fix: retour du filtre par catégories dans les acrtions des personnes (#…

…1812) * fix: retour du filtre par catégories dans les acrtions des personnes * fix: test
SocialGouv · Dec 18, 2023 · 724cf47 · 724cf47
1 parent 12f7fd5
commit 724cf47
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 11 deletions.
diff --git a/dashboard/src/components/CustomFieldInput.js b/dashboard/src/components/CustomFieldInput.js
@@ -138,7 +138,7 @@ const CustomFieldInput = ({ field, values, handleChange, model, colWidth = null,
               inputId={id}
               classNamePrefix={id}
               value={(typeof values[field.name] === 'string' ? [values[field.name]] : values[field.name])?.map((o) => ({ value: o, label: o }))}
-              placeholder={' -- Choisir -- '}
+              placeholder={'Choisir...'}
               getOptionValue={(i) => i.value}
               getOptionLabel={(i) => i.label}
               isDisabled={disabled}

diff --git a/dashboard/src/components/SelectCustom.js b/dashboard/src/components/SelectCustom.js
@@ -9,7 +9,7 @@ const SelectCustom = ({ creatable, ...props }) => {
   return (
     <Component
       styles={filterStyles}
-      placeholder="-- Choisir --"
+      placeholder="Choisir..."
       noOptionsMessage={() => 'Aucun résultat'}
       formatCreateLabel={(inputValue) => `Ajouter "${inputValue}"`}
       theme={(defaultTheme) => ({

diff --git a/dashboard/src/components/tailwind/ActionsCategorySelect.js b/dashboard/src/components/tailwind/ActionsCategorySelect.js
@@ -134,7 +134,7 @@ const ActionsCategorySelect = ({ label, values, onChange, id, withMostUsed, isDi
             </button>
           </div>
         ))}
-        {!selected.length && <div className="not-draggable tw-py-0.5 tw-opacity-60">-- Choisir --</div>}
+        {!selected.length && <div className="not-draggable tw-py-0.5 tw-opacity-60">Choisir...</div>}
         <button
           type="button"
           onClick={() => setOpen(true)}

diff --git a/dashboard/src/scenes/person/OutOfActiveList.js b/dashboard/src/scenes/person/OutOfActiveList.js
@@ -121,7 +121,7 @@ const OutOfActiveList = ({ person }) => {
                           inputId="person-select-outOfActiveListReasons"
                           classNamePrefix="person-select-outOfActiveListReasons"
                           value={values.outOfActiveListReasons?.map((_option) => ({ value: _option, label: _option })) || []}
-                          placeholder={' -- Choisir -- '}
+                          placeholder={'Choisir...'}
                           getOptionValue={(i) => i.value}
                           getOptionLabel={(i) => i.label}
                           styles={{ width: '800px' }}

diff --git a/dashboard/src/scenes/person/components/ActionsPerson.js b/dashboard/src/scenes/person/components/ActionsPerson.js
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { useRecoilValue, selectorFamily } from 'recoil';
 import { organisationState, userState } from '../../../recoil/auth';
-import { CANCEL, DONE, mappedIdsToLabels } from '../../../recoil/actions';
+import { CANCEL, DONE, flattenedActionsCategoriesSelector, mappedIdsToLabels } from '../../../recoil/actions';
 import { useHistory } from 'react-router-dom';
 import SelectCustom from '../../../components/SelectCustom';
 import ExclamationMarkButton from '../../../components/tailwind/ExclamationMarkButton';
@@ -131,17 +131,47 @@ export const Actions = ({ person }) => {
   );
 };
 
-const ActionsFilters = ({ data, setFilterTeamIds, setFilterStatus, filterStatus, filterTeamIds }) => {
+const ActionsFilters = ({ data, setFilterCategories, setFilterTeamIds, setFilterStatus, filterStatus, filterTeamIds, filterCategories }) => {
+  const categories = useRecoilValue(flattenedActionsCategoriesSelector);
+
+  const catsSelect = ['-- Aucune --', ...(categories || [])];
   return (
     <>
       {data.length ? (
         <div className="tw-mb-4 tw-flex tw-justify-between">
+          <div className="tw-shrink-0 tw-grow tw-basis-1/3 tw-pl-2 tw-pr-1">
+            <label htmlFor="action-select-categories-filter" className="tw-text-xs">
+              Filtrer par catégorie
+            </label>
+            <div className="tw-max-w-full">
+              <SelectCustom
+                options={catsSelect.map((_option) => ({ value: _option, label: _option }))}
+                value={filterCategories?.map((_option) => ({ value: _option, label: _option })) || []}
+                getOptionValue={(i) => i.value}
+                getOptionLabel={(i) => i.label}
+                onChange={(values) => setFilterCategories(values.map((v) => v.value))}
+                inputId="action-select-categories-filter"
+                name="categories"
+                isClearable
+                isMulti
+              />
+            </div>
+          </div>
           <div className="tw-shrink-0 tw-grow tw-basis-1/3 tw-px-1">
-            <label htmlFor="action-select-categories-filter">Filtrer par équipe</label>
-            <SelectTeamMultiple onChange={(teamIds) => setFilterTeamIds(teamIds)} value={filterTeamIds} colored inputId="action-team-select" />
+            <label htmlFor="action-select-categories-filter" className="tw-text-xs">
+              Filtrer par équipe
+            </label>
+            <SelectTeamMultiple
+              onChange={(teamIds) => setFilterTeamIds(teamIds)}
+              value={filterTeamIds}
+              colored
+              inputId="action-team-select"
+            />
           </div>
           <div className="tw-shrink-0 tw-grow tw-basis-1/3 tw-pl-1 tw-pr-2">
-            <label htmlFor="action-select-status-filter">Filtrer par statut</label>
+            <label htmlFor="action-select-status-filter" className="tw-text-xs">
+              Filtrer par statut
+            </label>
             <SelectCustom
               inputId="action-select-status-filter"
               options={mappedIdsToLabels}

diff --git a/e2e/persons_person-full-test-migrated-from-jest.spec.ts b/e2e/persons_person-full-test-migrated-from-jest.spec.ts
@@ -190,7 +190,7 @@ test("test", async ({ page }) => {
   await page.getByRole("button", { name: "Réintégrer dans la file active" }).click();
   await page.getByText(personName + " est réintégré dans la file active").click();
   await page.getByRole("button", { name: "Sortie de file active" }).click();
-  await page.locator('label:has-text("Veuillez préciser le(s) motif(s) de sortie -- Choisir --") svg').click();
+  await page.locator('label:has-text("Veuillez préciser le(s) motif(s) de sortieChoisir...") svg').click();
   await page.locator("#react-select-outOfActiveListReasons-option-4").click();
   await page.getByRole("button", { name: "Sauvegarder" }).click();
   await page.locator(".alert-warning").getByText("Départ vers autre région").click();

diff --git a/e2e/utils.ts b/e2e/utils.ts
@@ -40,7 +40,7 @@ export async function createAction(
   await clickOnEmptyReactSelect(page, "create-action-person-select", personName);
   const { categories = [], group = false } = options;
   if (categories.length > 0) {
-    await page.locator("#categories").getByText("-- Choisir --").click();
+    await page.locator("#categories").getByText("Choisir...").click();
     for (const { group, category } of categories) {
       await page.getByRole("button", { name: `${group} (2)` }).click();
       await page.getByRole("button", { name: category }).click();