Feat/select application btn adjustments (#91)

* Fix application selection btn * Search applications
AtelierdeParis · Feb 26, 2024 · f89b891 · f89b891
1 parent 57b089d
commit f89b891
Show file tree

Hide file tree

Showing 8 changed files with 120 additions and 15 deletions.
diff --git a/web/components/Account/Application/Place/ApplicationPlaceList.tsx b/web/components/Account/Application/Place/ApplicationPlaceList.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useMemo, useState } from 'react'
 import {
   Flex,
   Text,
@@ -9,13 +9,14 @@ import {
   useDisclosure,
 } from '@chakra-ui/react'
 import { useTranslation } from 'next-i18next'
-import { Application, Applications } from '~typings/api'
+import { Application } from '~typings/api'
 import Chevron from 'public/assets/img/chevron-down.svg'
 import Cell from '~components/Account/Booking/Cell'
 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'
+import { useRouter } from 'next/router'
 
 interface Props {
   applications: Application[]
@@ -31,8 +32,10 @@ const ApplicationPlaceList = ({ applications = [] }: Props) => {
   const [isDesc, setDesc] = useState<boolean>(true)
   const [selectedApplication, onApplicationSelect] = useState<Application>()
   const { isOpen, onOpen, onClose } = useDisclosure()
+  const { query } = useRouter()
 
   const { selectedCampaign } = useSelectedCampaign()
+
   useEffect(() => {
     setList(applications)
     setDesc(true)
@@ -43,6 +46,23 @@ const ApplicationPlaceList = ({ applications = [] }: Props) => {
     setList(list.reverse())
   }
 
+  const preselectedApplications = applications?.filter(
+    (application) => application?.status === 'preselected',
+  )
+
+  const filteredList = useMemo(
+    () =>
+      list.filter((application) => {
+        return (
+          !query.search?.length ||
+          `${application?.company?.structureName} (${application.company.firstname} ${application.company.lastname})`
+            .toLowerCase()
+            ?.includes((query.search as string)?.toLowerCase())
+        )
+      }),
+    [list, query.search],
+  )
+
   return (
     <Box>
       <ApplicationPlaceHelper applications={applications} />
@@ -85,7 +105,7 @@ const ApplicationPlaceList = ({ applications = [] }: Props) => {
             <Divider />
           </Cell>
         )}
-        {list.map((application) => (
+        {filteredList.map((application) => (
           <ApplicationPlaceListItem
             key={application.id}
             application={application}
@@ -100,6 +120,11 @@ const ApplicationPlaceList = ({ applications = [] }: Props) => {
         isOpen={isOpen}
         onClose={onClose}
         application={selectedApplication}
+        canPreselect={
+          preselectedApplications?.length <
+            selectedCampaign?.preselections_max &&
+          selectedCampaign?.mode === 'preselections'
+        }
       />
     </Box>
   )

diff --git a/web/components/Account/Application/Place/ApplicationsSearch.tsx b/web/components/Account/Application/Place/ApplicationsSearch.tsx
@@ -0,0 +1,38 @@
+import { Box, Input, InputGroup, InputRightElement } from '@chakra-ui/react'
+import { useTranslation } from 'next-i18next'
+import { useRouter } from 'next/router'
+import SearchIcon from '~public/assets/icons/SearchIcon'
+
+const ApplicationsSearch = () => {
+  const { t } = useTranslation('application')
+  const router = useRouter()
+
+  const handleSearch = (value) => {
+    router.push(
+      {
+        pathname: router.pathname,
+        query: { ...router.query, search: value },
+      },
+      undefined,
+      { shallow: true },
+    )
+  }
+
+  return (
+    <Box p={4}>
+      <InputGroup>
+        <Input
+          placeholder={t('place.search')}
+          onChange={(e) => handleSearch(e.target.value)}
+          width="auto"
+          p={2}
+        />
+        <InputRightElement>
+          <SearchIcon />
+        </InputRightElement>
+      </InputGroup>
+    </Box>
+  )
+}
+
+export default ApplicationsSearch
diff --git a/web/components/Account/Application/Place/DetailDrawer/ApplicationDetailDrawer.tsx b/web/components/Account/Application/Place/DetailDrawer/ApplicationDetailDrawer.tsx
@@ -21,10 +21,12 @@ const ApplicationDetailDrawer = ({
   isOpen,
   onClose,
   application,
+  canPreselect,
 }: {
   isOpen: boolean
   onClose: () => void
   application: Application
+  canPreselect: boolean
 }) => {
   const { t } = useTranslation('application')
   const { id } = application ?? {}
@@ -52,7 +54,10 @@ const ApplicationDetailDrawer = ({
             </GridItem>
 
             <GridItem colSpan={{ base: 3, md: 1 }}>
-              <ApplicationRightPanel application={application} />
+              <ApplicationRightPanel
+                application={application}
+                canPreselect={canPreselect}
+              />
             </GridItem>
           </Grid>
         </VStack>

diff --git a/web/components/Account/Application/Place/DetailDrawer/ApplicationPreselectButton.tsx b/web/components/Account/Application/Place/DetailDrawer/ApplicationPreselectButton.tsx
@@ -9,14 +9,14 @@ import { useRouter } from 'next/router'
 import RemoveIcon from '~public/assets/icons/RemoveIcon'
 import Link from '~components/Link'
 import { ROUTE_CONTACT } from '~constants'
-import useSelectedCampaign from '~hooks/useSelectedCampaign'
 
 const ApplicationPreselectButton = ({
   application,
+  canPreselect,
 }: {
   application: Application
+  canPreselect: boolean
 }) => {
-  const { selectedCampaign } = useSelectedCampaign()
   const { t } = useTranslation('application')
   const { errorToast, successToast } = useToast()
   const queryClient = useQueryClient()
@@ -48,7 +48,7 @@ const ApplicationPreselectButton = ({
   }
 
   return (
-    <VStack spacing={4}>
+    <VStack spacing={4} width="100%">
       <Button
         isFullWidth
         borderRadius={0}
@@ -85,13 +85,11 @@ const ApplicationPreselectButton = ({
             application.status === 'preselected' ? null : 'preselected',
           )
         }}
-        isDisabled={
-          application?.status === 'confirmed' ||
-          selectedCampaign?.mode === 'closed'
-        }
+        isDisabled={!canPreselect || application?.status === 'confirmed'}
       >
         <Text pl={1}>
-          {application?.status === 'preselected'
+          {application?.status === 'preselected' ||
+          application?.status === 'confirmed'
             ? t('place.detail.deselect')
             : t('place.detail.preselect')}
         </Text>

diff --git a/web/components/Account/Application/Place/DetailDrawer/ApplicationRightPanel.tsx b/web/components/Account/Application/Place/DetailDrawer/ApplicationRightPanel.tsx
@@ -4,12 +4,14 @@ import ApplicationDownload from 'public/assets/img/applicationDownload.svg'
 
 import ApplicationPreselectButton from '~components/Account/Application/Place/DetailDrawer/ApplicationPreselectButton'
 import ApplicationDetailInfos from '~components/Account/Application/Place/DetailDrawer/ApplicationDetailInfos'
-import { Application, Espace } from '~typings/api'
+import { Application } from '~typings/api'
 
 const ApplicationRightPanel = ({
   application,
+  canPreselect,
 }: {
   application: Application
+  canPreselect: boolean
 }) => {
   const { t } = useTranslation('application')
 
@@ -39,7 +41,10 @@ const ApplicationRightPanel = ({
         >
           <Text pl={1}>{t('place.detail.download_pdf')}</Text>
         </Button>
-        <ApplicationPreselectButton application={application} />
+        <ApplicationPreselectButton
+          application={application}
+          canPreselect={canPreselect}
+        />
       </VStack>
 
       <Divider />

diff --git a/web/components/Account/Application/Place/DisponibilitiesSelector/DisponibilitiesSelector.tsx b/web/components/Account/Application/Place/DisponibilitiesSelector/DisponibilitiesSelector.tsx
@@ -3,6 +3,7 @@ import { useTranslation } from 'next-i18next'
 import { useRouter } from 'next/router'
 import { useEffect, useState } from 'react'
 import ApplicationPlaceFetcher from '~components/Account/Application/Place/ApplicationPlaceFetcher'
+import ApplicationsSearch from '~components/Account/Application/Place/ApplicationsSearch'
 import ApplicationSelector from '~components/Account/Application/Place/DisponibilitiesSelector/DisponibilitiesSelectorFields'
 import { useMyApplications } from '~hooks/useMyApplications'
 import { useMyPlaces } from '~hooks/useMyPlaces'
@@ -56,7 +57,7 @@ const DisponibilitiesSelector = () => {
   return (
     <>
       {Boolean(places?.length) && !isLoading && !isFetching && (
-        <HStack>
+        <HStack justifyContent="space-between">
           <ApplicationSelector
             places={places?.map((p) => ({
               ...p,
@@ -66,6 +67,7 @@ const DisponibilitiesSelector = () => {
             }))}
             hasConfirmedSelection={hasConfirmedSelection}
           />
+          <ApplicationsSearch />
         </HStack>
       )}
 

diff --git a/web/public/assets/icons/SearchIcon.tsx b/web/public/assets/icons/SearchIcon.tsx
@@ -0,0 +1,31 @@
+const SearchIcon = ({ stroke = '#626782' }) => (
+  <svg
+    width="13"
+    height="13"
+    viewBox="0 0 13 13"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clip-path="url(#clip0_2226_6860)">
+      <path
+        d="M12.1902 12.1876L8.75391 8.75122"
+        stroke={stroke}
+        strokeMiterlimit="10"
+        strokeLinecap="square"
+      />
+      <path
+        d="M5.6888 10.0209C8.08204 10.0209 10.0221 8.08075 10.0221 5.68752C10.0221 3.29429 8.08204 1.35419 5.6888 1.35419C3.29557 1.35419 1.35547 3.29429 1.35547 5.68752C1.35547 8.08075 3.29557 10.0209 5.6888 10.0209Z"
+        stroke={stroke}
+        strokeMiterlimit="10"
+        strokeLinecap="square"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_2226_6860">
+        <rect width="13" height="13" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+)
+
+export default SearchIcon
diff --git a/web/public/locales/fr/application.json b/web/public/locales/fr/application.json
@@ -42,6 +42,7 @@
         "details": "Détails"
       }
     },
+    "search": "Recherche",
     "helper": {
       "preselection_start": "Établissez votre présélection avant le {{date}}.",
       "missing_preselections": "{{num}} manquantes.",