Merge pull request #2682 from MTES-MCT/feat/dashboard-v2-filters-order

[TRA-12676] Reworks filters order and adds a separator
MTES-MCT · Sep 11, 2023 · eebabfb · eebabfb
2 parents 6c8ef0a + 4cb8cc2
commit eebabfb
Show file tree

Hide file tree

Showing 9 changed files with 240 additions and 225 deletions.
diff --git a/front/src/Apps/Dashboard/dashboardUtils.tsx b/front/src/Apps/Dashboard/dashboardUtils.tsx
@@ -100,153 +100,157 @@ enum FilterName {
   ficheInterventionNumbers = "ficheInterventionNumbers",
 }
 
-export const filterList: Filter[] = [
-  {
-    name: FilterName.types,
-    label: filter_bsd_type,
-    type: FilterType.select,
-    isMultiple: true,
-    options: bsdTypeFilterSelectOptions,
-    isActive: true,
-  },
-  {
-    name: FilterName.sirets,
-    label: filter_siret,
-    type: FilterType.input,
-    isActive: true,
-  },
-  {
-    name: FilterName.waste,
-    label: filter_waste_code,
-    type: FilterType.input,
-    isActive: true,
-  },
-  {
-    name: FilterName.readableId,
-    label: filter_bsd_number,
-    type: FilterType.input,
-    isActive: true,
-  },
-  {
-    name: FilterName.packagingNumbers,
-    label: filter_contenant_number,
-    type: FilterType.input,
-    isActive: true,
-  },
-  {
-    name: FilterName.transporterNumberPlate,
-    label: filter_immat_number,
-    type: FilterType.input,
-    isActive: true,
-  },
-  {
-    name: FilterName.pickupSiteName,
-    label: filter_chantier_name,
-    type: FilterType.input,
-    isActive: true,
-  },
-  {
-    name: FilterName.pickupSiteAddress,
-    label: filter_chantier_adress,
-    type: FilterType.input,
-    isActive: true,
-  },
-  {
-    name: FilterName.transporterCustomInfo,
-    label: filter_free_text,
-    type: FilterType.input,
-    isActive: true,
-  },
-  {
-    name: FilterName.operationCode,
-    label: filter_worker_operation_code,
-    type: FilterType.input,
-    isActive: true,
-  },
-  {
-    name: FilterName.siretProductorAddress,
-    label: filter_siret_productor_address,
-    type: FilterType.input,
-    isActive: true,
-  },
-  {
-    name: FilterName.tvaIntra,
-    label: filter_tva_intra,
-    type: FilterType.input,
-    isActive: true,
-  },
-  {
-    name: FilterName.nextDestinationSiret,
-    label: filter_next_destination_siret,
-    type: FilterType.input,
-    isActive: true,
-  },
-  {
-    name: FilterName.traderSiret,
-    label: filter_trader_siret,
-    type: FilterType.input,
-    isActive: true,
-  },
-  {
-    name: FilterName.brokerSiret,
-    label: filter_broker_siret,
-    type: FilterType.input,
-    isActive: true,
-  },
-  {
-    name: FilterName.givenName,
-    label: filter_emitter_name,
-    type: FilterType.input,
-    isActive: true,
-  },
-  {
-    name: FilterName.sealNumbers,
-    label: filter_seal_numbers,
-    type: FilterType.input,
-    isActive: true,
-  },
-  {
-    name: FilterName.ficheInterventionNumbers,
-    label: filter_fiche_intervention_numbers,
-    type: FilterType.input,
-    isActive: true,
-  },
-  {
-    name: FilterName.emitterSignDate,
-    label: filter_emitter_sign_date,
-    type: FilterType.date,
-    isActive: true,
-  },
-  {
-    name: FilterName.workerSignDate,
-    label: filter_worker_sign_date,
-    type: FilterType.date,
-    isActive: true,
-  },
-  {
-    name: FilterName.transporterTransportSignDate,
-    label: filter_transporter_sign_date,
-    type: FilterType.date,
-    isActive: true,
-  },
-  {
-    name: FilterName.destinationReceptionDate,
-    label: filter_reception_sign_date,
-    type: FilterType.date,
-    isActive: true,
-  },
-  {
-    name: FilterName.destinationAcceptationDate,
-    label: filter_acceptation_sign_date,
-    type: FilterType.date,
-    isActive: true,
-  },
-  {
-    name: FilterName.destinationOperationSignDate,
-    label: filter_operation_sign_date,
-    type: FilterType.date,
-    isActive: true,
-  },
+export const filterList: Filter[][] = [
+  [
+    {
+      name: FilterName.types,
+      label: filter_bsd_type,
+      type: FilterType.select,
+      isMultiple: true,
+      options: bsdTypeFilterSelectOptions,
+      isActive: true,
+    },
+    {
+      name: FilterName.readableId,
+      label: filter_bsd_number,
+      type: FilterType.input,
+      isActive: true,
+    },
+    {
+      name: FilterName.waste,
+      label: filter_waste_code,
+      type: FilterType.input,
+      isActive: true,
+    },
+    {
+      name: FilterName.pickupSiteName,
+      label: filter_chantier_name,
+      type: FilterType.input,
+      isActive: true,
+    },
+    {
+      name: FilterName.transporterNumberPlate,
+      label: filter_immat_number,
+      type: FilterType.input,
+      isActive: true,
+    },
+    {
+      name: FilterName.packagingNumbers,
+      label: filter_contenant_number,
+      type: FilterType.input,
+      isActive: true,
+    },
+    {
+      name: FilterName.givenName,
+      label: filter_emitter_name,
+      type: FilterType.input,
+      isActive: true,
+    },
+    {
+      name: FilterName.sirets,
+      label: filter_siret,
+      type: FilterType.input,
+      isActive: true,
+    },
+    {
+      name: FilterName.transporterCustomInfo,
+      label: filter_free_text,
+      type: FilterType.input,
+      isActive: true,
+    },
+  ],
+  [
+    {
+      name: FilterName.pickupSiteAddress,
+      label: filter_chantier_adress,
+      type: FilterType.input,
+      isActive: true,
+    },
+    {
+      name: FilterName.siretProductorAddress,
+      label: filter_siret_productor_address,
+      type: FilterType.input,
+      isActive: true,
+    },
+    {
+      name: FilterName.operationCode,
+      label: filter_worker_operation_code,
+      type: FilterType.input,
+      isActive: true,
+    },
+    {
+      name: FilterName.destinationAcceptationDate,
+      label: filter_acceptation_sign_date,
+      type: FilterType.date,
+      isActive: true,
+    },
+    {
+      name: FilterName.transporterTransportSignDate,
+      label: filter_transporter_sign_date,
+      type: FilterType.date,
+      isActive: true,
+    },
+    {
+      name: FilterName.destinationReceptionDate,
+      label: filter_reception_sign_date,
+      type: FilterType.date,
+      isActive: true,
+    },
+    {
+      name: FilterName.workerSignDate,
+      label: filter_worker_sign_date,
+      type: FilterType.date,
+      isActive: true,
+    },
+    {
+      name: FilterName.emitterSignDate,
+      label: filter_emitter_sign_date,
+      type: FilterType.date,
+      isActive: true,
+    },
+    {
+      name: FilterName.destinationOperationSignDate,
+      label: filter_operation_sign_date,
+      type: FilterType.date,
+      isActive: true,
+    },
+    {
+      name: FilterName.ficheInterventionNumbers,
+      label: filter_fiche_intervention_numbers,
+      type: FilterType.input,
+      isActive: true,
+    },
+    {
+      name: FilterName.sealNumbers,
+      label: filter_seal_numbers,
+      type: FilterType.input,
+      isActive: true,
+    },
+    {
+      name: FilterName.tvaIntra,
+      label: filter_tva_intra,
+      type: FilterType.input,
+      isActive: true,
+    },
+    {
+      name: FilterName.brokerSiret,
+      label: filter_broker_siret,
+      type: FilterType.input,
+      isActive: true,
+    },
+    {
+      name: FilterName.nextDestinationSiret,
+      label: filter_next_destination_siret,
+      type: FilterType.input,
+      isActive: true,
+    },
+    {
+      name: FilterName.traderSiret,
+      label: filter_trader_siret,
+      type: FilterType.input,
+      isActive: true,
+    },
+  ],
 ];
 
 export const filterPredicates: {

diff --git a/front/src/Apps/common/Components/Filters/FilterLine.tsx b/front/src/Apps/common/Components/Filters/FilterLine.tsx
@@ -8,7 +8,7 @@ import FilterSelector from "./FilterSelector";
 import { Filter } from "./filtersTypes";
 
 interface FilterLineProps {
-  filters: Filter[];
+  filters: Filter[][];
   onChange?: (event: React.ChangeEvent<HTMLSelectElement>) => void;
   onAddFilterType: (
     event: React.MouseEvent<HTMLButtonElement, MouseEvent>

diff --git a/front/src/Apps/common/Components/Filters/FilterSelector.tsx b/front/src/Apps/common/Components/Filters/FilterSelector.tsx
@@ -6,7 +6,7 @@ import {
 import { Filter } from "./filtersTypes";
 
 interface FilterSelectorProps {
-  filters: Filter[];
+  filters: Filter[][];
   onChange?: (event: React.ChangeEvent<HTMLSelectElement>) => void;
   disabled?: boolean;
   value?: string;
@@ -18,6 +18,20 @@ const FilterSelector = ({
   disabled = false,
   value = "",
 }: FilterSelectorProps) => {
+  const filtersList = filters.map((filtersGroup, index) => {
+    let filtersElement = filtersGroup.map(filter => (
+      <option key={filter.name} value={filter.name} disabled={!filter.isActive}>
+        {filter.label}
+      </option>
+    ));
+
+    if (index !== filters.length - 1) {
+      filtersElement.push(<option disabled>──────────</option>);
+    }
+
+    return filtersElement;
+  });
+
   return (
     <div className="fr-select-group">
       <label className="fr-label" htmlFor={`${value}_select`}>
@@ -33,15 +47,8 @@ const FilterSelector = ({
         <option value="" disabled>
           {filter_type_select_placeholder}
         </option>
-        {filters.map(filter => (
-          <option
-            key={filter.name}
-            value={filter.name}
-            disabled={!filter.isActive}
-          >
-            {filter.label}
-          </option>
-        ))}
+
+        {filtersList}
       </select>
     </div>
   );