Application drawer (#86)

back/api/application/controllers/application.js

@@ -7,10 +7,11 @@
 
 module.exports = {
   async myApplications(ctx) {
+    const populateCommon = ['disponibility.espace', ]
     const { id, type } = ctx.state.user;
      const {query: initialQuery}=ctx.request;
     const query = type === "place" ? {...initialQuery, 'disponibility.espace.users_permissions_user.id':id} : {...initialQuery, company: id };
-    const populate = type==="place"? ['disponibility.espace','company']:['disponibility.espace', 'place','disponibility.espace.users_permissions_user']
+    const populate = type==="place"? [...populateCommon,'company']:[...populateCommon,'place', 'disponibility.espace.users_permissions_user']
 
     return strapi
       .query("application")

back/extensions/documentation/documentation/1.0.0/full_documentation.json

@@ -14,7 +14,7 @@
       "name": "Apache 2.0",
       "url": "https://www.apache.org/licenses/LICENSE-2.0.html"
     },
-    "x-generation-date": "02/23/2024 1:16:02 PM"
+    "x-generation-date": "02/26/2024 10:50:55 AM"
   },
   "x-strapi-config": {
     "path": "/documentation",

web/components/Account/Application/Place/ApplicationPlaceList.tsx

@@ -6,15 +6,16 @@ import {
   Box,
   Divider as ChakraDivider,
   DividerProps,
+  useDisclosure,
 } from '@chakra-ui/react'
 import { useTranslation } from 'next-i18next'
-import { Application } from '~typings/api'
+import { Application, Applications } from '~typings/api'
 import Chevron from 'public/assets/img/chevron-down.svg'
 import Cell from '~components/Account/Booking/Cell'
-import useCampaignContext from '~components/Campaign/useCampaignContext'
 import ApplicationPlaceHelper from '~components/Account/Application/Place/ApplicationsHelpers/ApplicationPlaceHelper'
 import ApplicationPlaceListItem from '~components/Account/Application/Place/ApplicationPlaceListItem'
 import useSelectedCampaign from '~hooks/useSelectedCampaign'
+import ApplicationDetailDrawer from '~components/Account/Application/Place/DetailDrawer/ApplicationDetailDrawer'
 
 interface Props {
   applications: Application[]
@@ -28,6 +29,9 @@ const ApplicationPlaceList = ({ applications = [] }: Props) => {
   const { t } = useTranslation('application')
   const [list, setList] = useState<Application[]>([])
   const [isDesc, setDesc] = useState<boolean>(true)
+  const [selectedApplication, onApplicationSelect] = useState<Application>()
+  const { isOpen, onOpen, onClose } = useDisclosure()
+
   const { selectedCampaign } = useSelectedCampaign()
   useEffect(() => {
     setList(applications)
@@ -85,9 +89,18 @@ const ApplicationPlaceList = ({ applications = [] }: Props) => {
           <ApplicationPlaceListItem
             key={application.id}
             application={application}
+            onSelect={() => {
+              onApplicationSelect(application)
+              onOpen()
+            }}
           />
         ))}
       </SimpleGrid>
+      <ApplicationDetailDrawer
+        isOpen={isOpen}
+        onClose={onClose}
+        application={selectedApplication}
+      />
     </Box>
   )
 }

web/components/Account/Application/Place/ApplicationPlaceListItem.tsx

@@ -9,9 +9,10 @@ import useSelectedCampaign from '~hooks/useSelectedCampaign'
 
 interface Props {
   application: Application
+  onSelect: () => void
 }
 
-const ApplicationPlaceListItem = ({ application }: Props) => {
+const ApplicationPlaceListItem = ({ application, onSelect }: Props) => {
   const { selectedCampaign } = useSelectedCampaign()
   const { t } = useTranslation('application')
 
@@ -68,6 +69,7 @@ const ApplicationPlaceListItem = ({ application }: Props) => {
               fontSize="md"
               borderColor="rgba(98,103,130, 0.6)"
               isDisabled={selectedCampaign?.mode === 'closed'}
+              onClick={onSelect}
             >
               {t('place.table.buttons.details')}
             </Button>

web/components/Account/Application/Place/DetailDrawer/ApplicationDetailDrawer.tsx

@@ -0,0 +1,64 @@
+import {
+  Drawer,
+  DrawerCloseButton,
+  DrawerContent,
+  DrawerHeader,
+  DrawerOverlay,
+  VStack,
+  Divider,
+  Stack,
+  Box,
+  Grid,
+  GridItem,
+} from '@chakra-ui/react'
+import { useTranslation } from 'next-i18next'
+import ApplicationDetailHeader from '~components/Account/Application/Place/DetailDrawer/ApplicationDetailHeader'
+import { Application } from '~typings/api'
+import ApplicationRightPanel from '~components/Account/Application/Place/DetailDrawer/ApplicationRightPanel'
+import ApplicationPdf from '~components/Account/Application/Place/DetailDrawer/ApplicationPdf'
+
+const ApplicationDetailDrawer = ({
+  isOpen,
+  onClose,
+  application,
+}: {
+  isOpen: boolean
+  onClose: () => void
+  application: Application
+}) => {
+  const { t } = useTranslation('application')
+  const { id } = application ?? {}
+
+  if (!application) {
+    return null
+  }
+
+  return (
+    <Drawer isOpen={isOpen} placement="right" onClose={onClose} size="xl">
+      <DrawerOverlay />
+      <DrawerContent p={6} height="100%" maxW="80vw">
+        <DrawerCloseButton />
+        <DrawerHeader paddingY={0} paddingLeft={0}>
+          {t('place.detail.title', { id })}
+        </DrawerHeader>
+
+        <VStack paddingY={4}>
+          <ApplicationDetailHeader application={application} />
+          <Divider />
+
+          <Grid templateColumns={'repeat(3, 1fr)'} gap={4} width="100%">
+            <GridItem colSpan={{ base: 3, md: 2 }}>
+              <ApplicationPdf />
+            </GridItem>
+
+            <GridItem colSpan={{ base: 3, md: 1 }}>
+              <ApplicationRightPanel application={application} />
+            </GridItem>
+          </Grid>
+        </VStack>
+      </DrawerContent>
+    </Drawer>
+  )
+}
+
+export default ApplicationDetailDrawer

web/components/Account/Application/Place/DetailDrawer/ApplicationDetailHeader.tsx

@@ -0,0 +1,51 @@
+import { Box, Text, SimpleGrid, VStack } from '@chakra-ui/react'
+import { useTranslation } from 'next-i18next'
+import { Application } from '~typings/api'
+import { format } from '~utils/date'
+
+const ApplicationDetailHeader = ({
+  application,
+}: {
+  application: Application
+}) => {
+  const { t } = useTranslation('application')
+
+  return (
+    <SimpleGrid columns={{ base: 1, sm: 3 }} spacing={4} width="100%">
+      <VStack
+        borderBottom={{ base: '1px solid lightgray', sm: 'none' }}
+        alignItems="flex-start"
+        p={2}
+      >
+        <Text fontWeight="bold">{t('place.detail.header.slot')}</Text>
+        <Text>{`${format(
+          application?.disponibility?.start,
+          'dd MMMM',
+        )} - ${format(application?.disponibility?.end, 'dd MMMM yyyy')}`}</Text>
+      </VStack>
+
+      <VStack
+        borderLeft={{ base: 'none', sm: '1px solid lightgray' }}
+        borderBottom={{ base: '1px solid lightgray', sm: 'none' }}
+        alignItems="flex-start"
+        p={2}
+      >
+        <Text fontWeight="bold"> {t('place.detail.header.space')}</Text>
+        {/* @ts-expect-error */}
+        <Text>{application?.disponibility?.espace?.name}</Text>
+      </VStack>
+
+      <VStack
+        justifyContent="space-between"
+        alignItems="flex-start"
+        p={2}
+        borderLeft={{ base: 'none', sm: '1px solid lightgray' }}
+      >
+        <Text fontWeight="bold">{t('place.detail.header.company')}</Text>
+        <Text>{application?.company?.structureName}</Text>
+      </VStack>
+    </SimpleGrid>
+  )
+}
+
+export default ApplicationDetailHeader

web/components/Account/Application/Place/DetailDrawer/ApplicationDetailInfos.tsx

@@ -0,0 +1,102 @@
+import { VStack, Text, Box } from '@chakra-ui/react'
+import { useTranslation } from 'next-i18next'
+import Link from '~components/Link'
+import { UsersPermissionsUser } from '~typings/api'
+
+const ApplicationDetailInfos = ({
+  company,
+}: {
+  company: UsersPermissionsUser
+}) => {
+  const { t } = useTranslation('application')
+  const {
+    structureName,
+    address,
+    phone,
+    email,
+    website,
+    siret,
+    insuranceName,
+    ape,
+    insuranceNumber,
+    license,
+  } = company ?? {}
+
+  return (
+    <VStack alignItems="stretch" fontWeight="600" spacing={4} width="100%">
+      <Box>
+        <Text>{structureName}</Text>
+        <Text>{address}</Text>
+      </Box>
+
+      <Box>
+        <Box>
+          <Text as="span">{t('place.detail.right_panel.phone')}</Text>
+          <Text as="span" pl={1}>
+            {phone}
+          </Text>
+        </Box>
+        <Box>
+          <Text as="span">{t('place.detail.right_panel.email')}</Text>
+          <Text as="span" pl={1}>
+            {email}
+          </Text>
+        </Box>
+
+        {website && (
+          <Text
+            as={Link}
+            href={website}
+            target="_blank"
+            color="gray.300"
+            fontWeight={'500'}
+            textDecoration="underline"
+          >
+            {website}
+          </Text>
+        )}
+      </Box>
+
+      <Box>
+        <Box>
+          <Text as="span">{t('place.detail.right_panel.siret')}</Text>
+          <Text as="span" pl={1}>
+            {siret}
+          </Text>
+        </Box>
+
+        <Box>
+          <Text as="span">{t('place.detail.right_panel.ape')}</Text>
+          <Text pl={1} as="span">
+            {ape}
+          </Text>
+        </Box>
+
+        <Box>
+          <Text as="span">{t('place.detail.right_panel.insurance_name')}</Text>
+          <Text pl={1} as="span">
+            {insuranceName}
+          </Text>
+        </Box>
+
+        <Box>
+          <Text as="span">
+            {t('place.detail.right_panel.insurance_number')}
+          </Text>
+          <Text pl={1} as="span">
+            {insuranceNumber}
+          </Text>
+        </Box>
+
+        <Box>
+          <Text as="span">{t('place.detail.right_panel.license')}</Text>
+          <Text pl={1} as="span">
+            {license}
+          </Text>
+        </Box>
+      </Box>
+    </VStack>
+  )
+}
+
+export default ApplicationDetailInfos

web/components/Account/Application/Place/DetailDrawer/ApplicationPdf.tsx

@@ -0,0 +1,7 @@
+import { Box } from '@chakra-ui/react'
+
+const ApplicationPdf = () => {
+  return <Box>AAA</Box>
+}
+
+export default ApplicationPdf

web/components/Account/Application/Place/DetailDrawer/ApplicationRightPanel.tsx

@@ -0,0 +1,68 @@
+import { VStack, Divider, Button, Text, Box } from '@chakra-ui/react'
+import { useTranslation } from 'next-i18next'
+import ApplicationDownload from 'public/assets/img/applicationDownload.svg'
+import ApplicationSelected from 'public/assets/img/applicationSelected.svg'
+import ApplicationDetailInfos from '~components/Account/Application/Place/DetailDrawer/ApplicationDetailInfos'
+import { Application, Espace } from '~typings/api'
+
+const ApplicationRightPanel = ({
+  application,
+}: {
+  application: Application
+}) => {
+  const { t } = useTranslation('application')
+  return (
+    <VStack
+      p={{ base: 0, md: 4 }}
+      borderLeft={{ base: 'none', md: '1px solid lightgray' }}
+      spacing={4}
+    >
+      <VStack maxW="100%" overflow="hidden" width="100%">
+        <Button
+          isFullWidth
+          borderRadius={0}
+          leftIcon={<ApplicationDownload />}
+          display="flex"
+          justifyContent={'flex-start'}
+          p={3}
+          backgroundColor="blue.100"
+          color="blue.500"
+          _hover={{
+            backgroundColor: 'blue.200',
+          }}
+          _active={{
+            backgroundColor: 'blue.300',
+          }}
+          height="auto!important"
+        >
+          <Text pl={1}>{t('place.detail.download_pdf')}</Text>
+        </Button>
+        <Button
+          isFullWidth
+          borderRadius={0}
+          leftIcon={<ApplicationSelected />}
+          display="flex"
+          justifyContent={'flex-start'}
+          p={3}
+          backgroundColor="rgba(110, 174, 127, 0.25)"
+          color="black"
+          _hover={{
+            backgroundColor: 'rgba(110, 174, 127, 0.4)',
+          }}
+          _active={{
+            backgroundColor: 'rgba(110, 174, 127, 0.6)',
+          }}
+          height="auto!important"
+        >
+          <Text pl={1}>{t('place.detail.preselect')}</Text>
+        </Button>
+      </VStack>
+
+      <Divider />
+      {/* @ts-expect-error */}
+      <ApplicationDetailInfos company={application?.company} />
+    </VStack>
+  )
+}
+
+export default ApplicationRightPanel