Feat/download application (#96)

* Download applications * No wrap white space on home button * White text color on button * Mark parameter as optional
AtelierdeParis · Feb 28, 2024 · db0dad5 · db0dad5
1 parent a4ac29e
commit db0dad5
Show file tree

Hide file tree

Showing 28 changed files with 1,545 additions and 100 deletions.
diff --git a/back/api/application/controllers/application.js b/back/api/application/controllers/application.js
@@ -7,11 +7,11 @@
 
 module.exports = {
   async myApplications(ctx) {
-    const populateCommon = ['disponibility.espace' ]
+    const populateCommon = ['disponibility.espace', 'disponibility.espace.users_permissions_user', 'creation_file' ]
     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"? [...populateCommon,'company']:[...populateCommon,'place', 'disponibility.espace.users_permissions_user']
+    const populate = type==="place"? [...populateCommon,'company', ]:[...populateCommon,'place']
 
     return strapi
       .query("application")

diff --git a/back/extensions/documentation/documentation/1.0.0/full_documentation.json b/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/28/2024 10:57:52 AM"
+    "x-generation-date": "02/28/2024 12:18:26 PM"
   },
   "x-strapi-config": {
     "path": "/documentation",

diff --git a/web/components/Account/Application/Place/ApplicationDownloadAll.tsx b/web/components/Account/Application/Place/ApplicationDownloadAll.tsx
@@ -0,0 +1,65 @@
+import { Button, useDisclosure } from '@chakra-ui/react'
+import { useTranslation } from 'next-i18next'
+import { useRouter } from 'next/router'
+import { useState } from 'react'
+import ApplicationDownloadButton from '~components/Account/Application/Place/ApplicationsPdf/ApplicationDownloadButton'
+import { useMyApplications } from '~hooks/useMyApplications'
+import useSelectedCampaign from '~hooks/useSelectedCampaign'
+
+const ApplicationDownloadAll = () => {
+  const { selectedCampaign } = useSelectedCampaign()
+  const { t } = useTranslation('application')
+  const { query } = useRouter()
+
+  const { data: applications, isLoading, isFetching } = useMyApplications({
+    name: ['myApplications', query?.disponibility as string],
+    campaignId: query.campaign as string,
+    searchParams: { ...query, _sort: 'company.structureName:asc' },
+    options: {
+      enabled: Boolean(query?.disponibility) && Boolean(query?.espace),
+    },
+  })
+
+  if (['disponibilities', 'applications']?.includes(selectedCampaign?.mode)) {
+    return null
+  }
+  const { onOpen, onClose, isOpen } = useDisclosure()
+  const [downloadedApplications, setDownloadedApplications] = useState([])
+
+  return (
+    <>
+      <Button
+        colorScheme={selectedCampaign?.mode === 'closed' ? 'gray' : 'blue'}
+        backgroundColor={
+          selectedCampaign?.mode === 'closed' ? 'gray.700' : undefined
+        }
+        color={'white'}
+        size="lg"
+        onClick={() => {
+          setDownloadedApplications([])
+          onOpen()
+        }}
+        isLoading={
+          isLoading ||
+          isFetching ||
+          (isOpen && applications?.length !== downloadedApplications.length)
+        }
+      >
+        {t('place.download')}
+      </Button>
+      {applications?.map((application) => (
+        <ApplicationDownloadButton
+          application={application}
+          controlledOnClose={onClose}
+          controlledIsOpen={isOpen}
+          key={application?.id}
+          onDownloadFinish={(id) => {
+            setDownloadedApplications([...downloadedApplications, id])
+          }}
+        />
+      ))}
+    </>
+  )
+}
+
+export default ApplicationDownloadAll
diff --git a/web/components/Account/Application/Place/ApplicationPlaceFetcher.tsx b/web/components/Account/Application/Place/ApplicationPlaceFetcher.tsx
@@ -1,8 +1,6 @@
 import { useMyApplications } from '~hooks/useMyApplications'
 import ApplicationPlaceList from '~components/Account/Application/Place/ApplicationPlaceList'
-import InfoPlaceApplications from '~components/Account/Info/InfoPlaceApplications'
 import Loading from '~components/Loading'
-import { useCurrentUser } from '~hooks/useCurrentUser'
 import { useEffect } from 'react'
 import { useRouter } from 'next/router'
 

diff --git a/web/components/Account/Application/Place/ApplicationPlaceListItem.tsx b/web/components/Account/Application/Place/ApplicationPlaceListItem.tsx
@@ -4,9 +4,9 @@ import { Text, Button, IconButton, HStack, Flex } from '@chakra-ui/react'
 import { useTranslation } from 'next-i18next'
 import Cell from '~components/Account/Booking/Cell'
 import Link from '~components/Link'
-import DownloadApplication from 'public/assets/img/downloadApplication.svg'
 import useSelectedCampaign from '~hooks/useSelectedCampaign'
 import ApplicationStatusIcon from '~components/Account/Application/Place/ApplicationStatusIcon'
+import ApplicationDownloadButton from '~components/Account/Application/Place/ApplicationsPdf/ApplicationDownloadButton'
 
 interface Props {
   application: Application
@@ -48,19 +48,7 @@ const ApplicationPlaceListItem = ({ application, onSelect }: Props) => {
       {['preselections', 'closed']?.includes(selectedCampaign?.mode) && (
         <Cell>
           <HStack spacing={2}>
-            <IconButton
-              px={2}
-              py={1}
-              variant="outline"
-              color="grayText.1"
-              colorScheme="gray"
-              size="sm"
-              borderRadius="sm"
-              fontSize="md"
-              aria-label="dowload"
-              borderColor="rgba(98,103,130, 0.6)"
-              icon={<DownloadApplication />}
-            />
+            <ApplicationDownloadButton application={application} />
             <Button
               px={2}
               py={1}

diff --git a/web/components/Account/Application/Place/ApplicationsPdf/ApplicationDownloadButton.tsx b/web/components/Account/Application/Place/ApplicationsPdf/ApplicationDownloadButton.tsx
@@ -0,0 +1,75 @@
+import { Box, IconButton, useDisclosure } from '@chakra-ui/react'
+import DownloadApplication from 'public/assets/img/downloadApplication.svg'
+import { useRef, useState } from 'react'
+import { downloadPdf } from '~components/Account/Application/Place/ApplicationsPdf/pdfUtils'
+import SingleApplication from '~components/Account/Application/Place/SingleApplication'
+import useSelectedCampaign from '~hooks/useSelectedCampaign'
+import { Application } from '~typings/api'
+
+const ApplicationDownloadButton = ({
+  application,
+  controlledIsOpen,
+  controlledOnClose,
+  onDownloadFinish,
+}: {
+  application: Application
+  controlledIsOpen?: boolean
+  controlledOnClose?: () => void
+  onDownloadFinish?: (id: string) => void
+}) => {
+  const pdfRef = useRef()
+  const [isLoading, setIsLoading] = useState(false)
+  const { isOpen, onOpen, onClose } = useDisclosure()
+  const { selectedCampaign } = useSelectedCampaign()
+
+  return (
+    <>
+      <IconButton
+        px={2}
+        py={1}
+        variant="outline"
+        color="grayText.1"
+        colorScheme="gray"
+        size="sm"
+        borderRadius="sm"
+        fontSize="md"
+        aria-label="dowload"
+        borderColor="rgba(98,103,130, 0.6)"
+        icon={<DownloadApplication />}
+        isLoading={isLoading}
+        onClick={async () => {
+          onOpen()
+          setIsLoading(true)
+        }}
+        display={controlledOnClose ? 'none' : 'inherit'}
+      />
+
+      {(controlledIsOpen !== undefined ? controlledIsOpen : isOpen) && (
+        <Box w="1px" h="1px" overflow={'hidden'}>
+          <SingleApplication
+            application={application}
+            ref={pdfRef}
+            handleDownload={async (ref) => {
+              await downloadPdf(
+                ref,
+                `application_${
+                  application.id
+                }_${application?.company?.structureName
+                  ?.split(' ')
+                  ?.join('_')}_${selectedCampaign?.title
+                  ?.split(' ')
+                  ?.join('_')}`,
+                application?.creation_file[0]?.url,
+              )
+              setIsLoading(false)
+              onDownloadFinish(application.id)
+              controlledOnClose ? controlledOnClose() : onClose()
+            }}
+          />
+        </Box>
+      )}
+    </>
+  )
+}
+
+export default ApplicationDownloadButton
diff --git a/web/components/Account/Application/Place/ApplicationsPdf/ApplicationPdfCreation.tsx b/web/components/Account/Application/Place/ApplicationsPdf/ApplicationPdfCreation.tsx
@@ -0,0 +1,68 @@
+import { Text, Heading, VStack, Divider } from '@chakra-ui/react'
+import { useTranslation } from 'next-i18next'
+import ApplicationFormTitle from '~components/Campaign/Places/Application/ApplicationFormTitle'
+import { Application } from '~typings/api'
+
+const ApplicationPdfCreation = ({
+  application,
+}: {
+  application: Application
+}) => {
+  const { t } = useTranslation('place')
+  return (
+    <VStack alignItems="flex-start">
+      <ApplicationFormTitle
+        title={t('campaignApplication.creation.title')}
+        position="3."
+        spacing={6}
+      />
+
+      <VStack width="100%" spacing={4}>
+        <VStack width="100%" alignItems="flex-start">
+          <Text fontFamily="mabry medium">
+            {t('campaignApplication.creation.field_title')}
+          </Text>
+          <Text>{application?.creation_title}</Text>
+        </VStack>
+
+        <Divider opacity={0.3} />
+
+        <VStack width="100%" alignItems="flex-start">
+          <Text fontFamily="mabry medium">
+            {t('campaignApplication.creation.dancers')}
+          </Text>
+          <Text>{application?.creation_dancers}</Text>
+        </VStack>
+
+        <Divider opacity={0.3} />
+
+        <VStack width="100%" alignItems="flex-start">
+          <Text fontFamily="mabry medium">
+            {t('campaignApplication.creation.summary')}
+          </Text>
+          <Text>{application?.creation_summary}</Text>
+        </VStack>
+
+        <Divider opacity={0.3} />
+
+        <VStack width="100%" alignItems="flex-start">
+          <Text fontFamily="mabry medium">
+            {t('campaignApplication.creation.partnerships')}
+          </Text>
+          <Text>{application?.creation_partnerships}</Text>
+        </VStack>
+
+        <Divider opacity={0.3} />
+
+        <VStack width="100%" alignItems="flex-start">
+          <Text fontFamily="mabry medium">
+            {t('campaignApplication.creation.technical')}
+          </Text>
+          <Text>{application?.creation_techical_requirements}</Text>
+        </VStack>
+      </VStack>
+    </VStack>
+  )
+}
+
+export default ApplicationPdfCreation
diff --git a/web/components/Account/Application/Place/ApplicationsPdf/ApplicationPdfGeneral.tsx b/web/components/Account/Application/Place/ApplicationsPdf/ApplicationPdfGeneral.tsx
@@ -0,0 +1,48 @@
+import { Text, Heading, VStack, Divider } from '@chakra-ui/react'
+import { useTranslation } from 'next-i18next'
+import ApplicationFormTitle from '~components/Campaign/Places/Application/ApplicationFormTitle'
+import { Application } from '~typings/api'
+
+const ApplicationPdfGeneral = ({
+  application,
+}: {
+  application: Application
+}) => {
+  const { t } = useTranslation('place')
+  return (
+    <VStack alignItems="flex-start">
+      <ApplicationFormTitle
+        title={t('campaignApplication.general.title')}
+        position="2."
+        spacing={6}
+      />
+
+      <VStack width="100%" spacing={4}>
+        <VStack width="100%" alignItems="flex-start">
+          <Text fontFamily="mabry medium">
+            {t('campaignApplication.general.subtitle', {
+              place:
+                // @ts-expect-error
+                application?.disponibility?.espace?.users_permissions_user
+                  .structureName,
+            })}
+          </Text>
+          <Text>
+            {application?.already_supported ? t('global.yes') : t('global.no')}
+          </Text>
+        </VStack>
+
+        <Divider opacity={0.3} />
+
+        <VStack width="100%" alignItems="flex-start">
+          <Text fontFamily="mabry medium">
+            {t('campaignApplication.general.bio')}
+          </Text>
+          <Text>{application?.cv}</Text>
+        </VStack>
+      </VStack>
+    </VStack>
+  )
+}
+
+export default ApplicationPdfGeneral