From 87e56066640a5c1f23756b290b96784373f22e11 Mon Sep 17 00:00:00 2001 From: Lucieo Date: Mon, 26 Feb 2024 11:03:54 +0000 Subject: [PATCH] Application drawer (#86) --- .../application/controllers/application.js | 3 +- .../1.0.0/full_documentation.json | 2 +- .../Place/ApplicationPlaceList.tsx | 17 ++- .../Place/ApplicationPlaceListItem.tsx | 4 +- .../DetailDrawer/ApplicationDetailDrawer.tsx | 64 +++++++++++ .../DetailDrawer/ApplicationDetailHeader.tsx | 51 +++++++++ .../DetailDrawer/ApplicationDetailInfos.tsx | 102 ++++++++++++++++++ .../Place/DetailDrawer/ApplicationPdf.tsx | 7 ++ .../DetailDrawer/ApplicationRightPanel.tsx | 68 ++++++++++++ web/components/Campaign/CampaignProvider.tsx | 9 -- .../Places/Application/Inputs/FileField.tsx | 1 - web/public/assets/img/applicationDownload.svg | 12 +++ web/public/assets/img/applicationSelected.svg | 11 ++ web/public/locales/fr/application.json | 21 +++- 14 files changed, 356 insertions(+), 16 deletions(-) create mode 100644 web/components/Account/Application/Place/DetailDrawer/ApplicationDetailDrawer.tsx create mode 100644 web/components/Account/Application/Place/DetailDrawer/ApplicationDetailHeader.tsx create mode 100644 web/components/Account/Application/Place/DetailDrawer/ApplicationDetailInfos.tsx create mode 100644 web/components/Account/Application/Place/DetailDrawer/ApplicationPdf.tsx create mode 100644 web/components/Account/Application/Place/DetailDrawer/ApplicationRightPanel.tsx create mode 100644 web/public/assets/img/applicationDownload.svg create mode 100644 web/public/assets/img/applicationSelected.svg diff --git a/back/api/application/controllers/application.js b/back/api/application/controllers/application.js index 04e92f62..ad4a02f8 100644 --- a/back/api/application/controllers/application.js +++ b/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") diff --git a/back/extensions/documentation/documentation/1.0.0/full_documentation.json b/back/extensions/documentation/documentation/1.0.0/full_documentation.json index ca352846..9b77bb88 100644 --- 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/23/2024 1:16:02 PM" + "x-generation-date": "02/26/2024 10:50:55 AM" }, "x-strapi-config": { "path": "/documentation", diff --git a/web/components/Account/Application/Place/ApplicationPlaceList.tsx b/web/components/Account/Application/Place/ApplicationPlaceList.tsx index 633dc7b5..1b3708c8 100644 --- a/web/components/Account/Application/Place/ApplicationPlaceList.tsx +++ b/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([]) const [isDesc, setDesc] = useState(true) + const [selectedApplication, onApplicationSelect] = useState() + const { isOpen, onOpen, onClose } = useDisclosure() + const { selectedCampaign } = useSelectedCampaign() useEffect(() => { setList(applications) @@ -85,9 +89,18 @@ const ApplicationPlaceList = ({ applications = [] }: Props) => { { + onApplicationSelect(application) + onOpen() + }} /> ))} + ) } diff --git a/web/components/Account/Application/Place/ApplicationPlaceListItem.tsx b/web/components/Account/Application/Place/ApplicationPlaceListItem.tsx index 4a085f95..3f9b71e3 100644 --- a/web/components/Account/Application/Place/ApplicationPlaceListItem.tsx +++ b/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')} diff --git a/web/components/Account/Application/Place/DetailDrawer/ApplicationDetailDrawer.tsx b/web/components/Account/Application/Place/DetailDrawer/ApplicationDetailDrawer.tsx new file mode 100644 index 00000000..9d2e531e --- /dev/null +++ b/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 ( + + + + + + {t('place.detail.title', { id })} + + + + + + + + + + + + + + + + + + + ) +} + +export default ApplicationDetailDrawer diff --git a/web/components/Account/Application/Place/DetailDrawer/ApplicationDetailHeader.tsx b/web/components/Account/Application/Place/DetailDrawer/ApplicationDetailHeader.tsx new file mode 100644 index 00000000..ef22229f --- /dev/null +++ b/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 ( + + + {t('place.detail.header.slot')} + {`${format( + application?.disponibility?.start, + 'dd MMMM', + )} - ${format(application?.disponibility?.end, 'dd MMMM yyyy')}`} + + + + {t('place.detail.header.space')} + {/* @ts-expect-error */} + {application?.disponibility?.espace?.name} + + + + {t('place.detail.header.company')} + {application?.company?.structureName} + + + ) +} + +export default ApplicationDetailHeader diff --git a/web/components/Account/Application/Place/DetailDrawer/ApplicationDetailInfos.tsx b/web/components/Account/Application/Place/DetailDrawer/ApplicationDetailInfos.tsx new file mode 100644 index 00000000..24a56c02 --- /dev/null +++ b/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 ( + + + {structureName} + {address} + + + + + {t('place.detail.right_panel.phone')} + + {phone} + + + + {t('place.detail.right_panel.email')} + + {email} + + + + {website && ( + + {website} + + )} + + + + + {t('place.detail.right_panel.siret')} + + {siret} + + + + + {t('place.detail.right_panel.ape')} + + {ape} + + + + + {t('place.detail.right_panel.insurance_name')} + + {insuranceName} + + + + + + {t('place.detail.right_panel.insurance_number')} + + + {insuranceNumber} + + + + + {t('place.detail.right_panel.license')} + + {license} + + + + + ) +} + +export default ApplicationDetailInfos diff --git a/web/components/Account/Application/Place/DetailDrawer/ApplicationPdf.tsx b/web/components/Account/Application/Place/DetailDrawer/ApplicationPdf.tsx new file mode 100644 index 00000000..6390e195 --- /dev/null +++ b/web/components/Account/Application/Place/DetailDrawer/ApplicationPdf.tsx @@ -0,0 +1,7 @@ +import { Box } from '@chakra-ui/react' + +const ApplicationPdf = () => { + return AAA +} + +export default ApplicationPdf diff --git a/web/components/Account/Application/Place/DetailDrawer/ApplicationRightPanel.tsx b/web/components/Account/Application/Place/DetailDrawer/ApplicationRightPanel.tsx new file mode 100644 index 00000000..3558d0af --- /dev/null +++ b/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 ( + + + + + + + + {/* @ts-expect-error */} + + + ) +} + +export default ApplicationRightPanel diff --git a/web/components/Campaign/CampaignProvider.tsx b/web/components/Campaign/CampaignProvider.tsx index 2f5064ec..54515164 100644 --- a/web/components/Campaign/CampaignProvider.tsx +++ b/web/components/Campaign/CampaignProvider.tsx @@ -122,15 +122,6 @@ const CampaignProvider = ({ children }: ICampaignProvider) => { (currentCampaign?.mode === 'disponibilities' && isCampaignPlace) || currentCampaign?.mode === 'applications' - // console.log( - // activeCampaigns, - // currentCampaign, - // isCampaignPlace, - // hasActiveCampaign, - // isLoading, - // allPlaceCampaigns, - // isLoadingAllPlaceCampaigns, - // ) return ( { const errors = files?.map((file) => file?.errors?.map((e) => e?.code)) - console.log(files) errors.map((e) => { errorToast(t('global.file.' + e)) }) diff --git a/web/public/assets/img/applicationDownload.svg b/web/public/assets/img/applicationDownload.svg new file mode 100644 index 00000000..ca4b6db7 --- /dev/null +++ b/web/public/assets/img/applicationDownload.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/web/public/assets/img/applicationSelected.svg b/web/public/assets/img/applicationSelected.svg new file mode 100644 index 00000000..c6074d79 --- /dev/null +++ b/web/public/assets/img/applicationSelected.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/web/public/locales/fr/application.json b/web/public/locales/fr/application.json index a8d2a58f..9e44112b 100644 --- a/web/public/locales/fr/application.json +++ b/web/public/locales/fr/application.json @@ -53,6 +53,25 @@ "open_applications_end": "vous pouvez consulter un aperçu des candidatures durant cette période mais ne pourrez consulter et télécharger les dossiers qu’au terme de celle-ci.", "closed_campaign": "Cette campagne est terminée." }, - "no_places": "Aucun de vos espaces ne propose de créneau pour ce dispositif" + "no_places": "Aucun de vos espaces ne propose de créneau pour ce dispositif", + "detail": { + "title": "Candidature n°{{id}}", + "header": { + "slot": "Créneau", + "space": "Espace", + "company": "Compagnie" + }, + "right_panel": { + "phone": "Tél :", + "email": "Email :", + "siret": "SIRET :", + "ape": "APE :", + "insurance_name": "Assurance :", + "insurance_number": "N° assurance :", + "license": "Licence(s) :" + }, + "download_pdf": "Télécharger le pdf", + "preselect": "Marquer comme sélectionnée" + } } }