From 724cf478b094ec2461eb02c5b1e8f5a4896803d6 Mon Sep 17 00:00:00 2001
From: Arnaud Ambroselli <31724752+arnaudambro@users.noreply.github.com>
Date: Mon, 18 Dec 2023 16:01:03 +0100
Subject: [PATCH] =?UTF-8?q?fix:=20retour=20du=20filtre=20par=20cat=C3=A9go?=
 =?UTF-8?q?ries=20dans=20les=20acrtions=20des=20personnes=20(#1812)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: retour du filtre par catégories dans les acrtions des personnes

* fix: test
---
 dashboard/src/components/CustomFieldInput.js  |  2 +-
 dashboard/src/components/SelectCustom.js      |  2 +-
 .../tailwind/ActionsCategorySelect.js         |  2 +-
 .../src/scenes/person/OutOfActiveList.js      |  2 +-
 .../scenes/person/components/ActionsPerson.js | 40 ++++++++++++++++---
 ...erson-full-test-migrated-from-jest.spec.ts |  2 +-
 e2e/utils.ts                                  |  2 +-
 7 files changed, 41 insertions(+), 11 deletions(-)

diff --git a/dashboard/src/components/CustomFieldInput.js b/dashboard/src/components/CustomFieldInput.js
index 85258eb44..688f6172d 100644
--- 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
index 2554823f5..8b9fc831c 100644
--- 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
index bd7d7d1f5..a530649be 100644
--- 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
index f11d21203..d0211e4ef 100644
--- 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
index 203e5bf4b..71ae690d5 100644
--- 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
index 66d4a748c..b9aa56cf3 100644
--- 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
index bf3d6e8b9..ecf285082 100644
--- 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();