Merge branch '322-carto-le-meme-filtre-s-affiche-plusieurs-fois-regression' into 'dev'

Resolve "[Carto] Le même filtre s'affiche plusieurs fois - Regression"

See merge request !530

src/app/structure-list/components/more-filters/more-filters.component.html

@@ -78,14 +78,10 @@
                     >
                       <div class="checkbox">
                         <div class="checkboxItem">
-                          <label
-                            fxLayout="row"
-                            fxLayoutAlign="start center"
-                            tabindex="0"
-                            (keyup.enter)="onCheckboxChange($event, c.id, module.name)"
-                          >
+                          <label fxLayout="row" fxLayoutAlign="start center">
                             <input
                               type="checkbox"
+                              class="visually-hidden"
                               [checked]="searchService.getIndex(checkedModules, module.id, c.id) > -1"
                               [value]="module.id"
                               (change)="onCheckboxChange($event, c.id, module.name)"

src/app/structure-list/components/more-filters/more-filters.component.scss

@@ -52,6 +52,10 @@
     display: block !important;
   }
 }
+.checkboxItem input:focus-visible + span + .label {
+  box-shadow: 0 0 0 2px $red;
+}
+
 .modalmoreFilters {
   width: 100%;
   min-width: 100%;

src/app/structure-list/components/more-filters/more-filters.component.ts

@@ -41,8 +41,8 @@ export class MoreFiltersComponent implements OnInit, OnChanges {
   // Management of the checkbox event (Check / Uncheck)
   public onCheckboxChange(event, category: string, text?: string): void {
     // Handle mouse or keyboard event
-    const checkValue: string = event.target.value || event.target?.firstChild?.value;
-    const checked: boolean = event.target.checked || !event.target?.firstChild?.checked;
+    const checkValue: string = event.target.value;
+    const checked: boolean = event.target.checked;
     if (checked) {
       this.checkedModules.push(new Module(checkValue, category, text ? text : checkValue));
     } else {

src/app/structure-list/components/structure-list-search/structure-list-search.component.ts

@@ -242,18 +242,26 @@ export class StructureListSearchComponent implements OnInit {
     this.hasUrlParams = Object.keys(this.activatedRoute.snapshot.queryParams).length > 0;
     if (this.hasUrlParams) {
       const filters: Filter[] = [];
+      const filterSet: Set<string> = new Set();
+
       this.activatedRoute.queryParamMap.subscribe((params) => {
-        let elements = { ...params.keys };
+        const elements = { ...params.keys };
+
         for (let item in elements) {
-          if (elements[item] != 'query' && catNames.includes(elements[item])) {
+          if (elements[item] !== 'query' && catNames.includes(elements[item])) {
             params
               .get(elements[item])
               .split(',')
-              .forEach((singleFilter) =>
-                filters.push(new Filter(elements[item], singleFilter, moduleNamesById[singleFilter]))
-              );
+              .forEach((singleFilter) => {
+                const filterKey = `${elements[item]}_${singleFilter}`; // create unique key to compare if filter already exists (duplicate values in url)
+                if (!filterSet.has(filterKey)) {
+                  filterSet.add(filterKey);
+                  filters.push(new Filter(elements[item], singleFilter, moduleNamesById[singleFilter]));
                 }
+              });
           }
+        }
+
         this.filters = filters;
       });
     }

src/styles.scss

@@ -591,6 +591,7 @@ button {
 }
 
 .visually-hidden {
+  display: block !important;
   position: absolute !important;
   width: 1px !important;
   height: 1px !important;