fix: revert to native select with optgroup for community/collection hierarchy (#5524)

Author: shernandez-dev

src/app/admin/admin-reports/filtered-items/filtered-items.component.html

@@ -15,25 +15,17 @@ <h1 id="header" class="border-bottom pb-2">{{'admin.reports.items.head' | transl
               <ds-loading></ds-loading>
               }
               @if ((loadingCollections$ | async) !== true) {
-              <button type="button" class="list-group-item list-group-item-action border-0 fw-bold mb-2"
-                [ngClass]="{'bg-primary text-white': isCollectionSelected('')}" (click)="toggleCollection('')">
-                {{'admin.reports.items.wholeRepo' | translate}}
-              </button>
-              <div class="collection-tree-selector border rounded p-2"
-                style="max-height: 300px; overflow-y: auto; overflow-x: hidden;">
+              <select id="collSel" name="collSel" class="form-select" multiple="multiple" size="10"
+                formControlName="collections">
+                <option value="">{{'admin.reports.items.wholeRepo' | translate}}</option>
                 @for (group of collectionGroups; track group.communityName) {
-                <div class="mb-2">
-                  <div class="text-muted small">{{group.communityName}}</div>
+                <optgroup [label]="group.communityName">
                   @for (item of group.collections; track item) {
-                  <button type="button" class="list-group-item list-group-item-action border-0 fw-bold ms-3"
-                    [ngClass]="{'bg-primary text-white': isCollectionSelected(item.id)}"
-                    (click)="toggleCollection(item.id)">
-                    {{item.name$ | async}}
-                  </button>
+                  <option [value]="item.id">{{item.name$ | async}}</option>
                   }
-                </div>
+                </optgroup>
                 }
-              </div>
+              </select>
               }
               <div class="row">
                 <span class="col-3"></span>

src/app/admin/admin-reports/filtered-items/filtered-items.component.spec.ts

@@ -167,65 +167,4 @@ describe('FilteredItemsComponent', () => {
     });
 
   });
-
-  describe('toggleCollection', () => {
-
-    it('should add a collection id when not previously selected', () => {
-      component.queryForm.get('collections').setValue([]);
-      component.toggleCollection('collection-a1');
-      expect(component.queryForm.get('collections').value).toEqual(['collection-a1']);
-    });
-
-    it('should remove a collection id when already selected', () => {
-      component.queryForm.get('collections').setValue(['collection-a1', 'collection-b1']);
-      component.toggleCollection('collection-a1');
-      expect(component.queryForm.get('collections').value).toEqual(['collection-b1']);
-    });
-
-    it('should allow multiple collections to be selected', () => {
-      component.queryForm.get('collections').setValue([]);
-      component.toggleCollection('collection-a1');
-      component.toggleCollection('collection-b1');
-      expect(component.queryForm.get('collections').value).toEqual(['collection-a1', 'collection-b1']);
-    });
-
-    it('should deselect specific collections when Whole Repository is selected', () => {
-      component.queryForm.get('collections').setValue(['collection-a1', 'collection-b1']);
-      component.toggleCollection('');
-      expect(component.queryForm.get('collections').value).toEqual(['']);
-    });
-
-    it('should deselect Whole Repository when a specific collection is selected', () => {
-      component.queryForm.get('collections').setValue(['']);
-      component.toggleCollection('collection-a1');
-      expect(component.queryForm.get('collections').value).toEqual(['collection-a1']);
-    });
-
-    it('should deselect Whole Repository when toggled twice', () => {
-      component.queryForm.get('collections').setValue(['']);
-      component.toggleCollection('');
-      expect(component.queryForm.get('collections').value).toEqual([]);
-    });
-
-  });
-
-  describe('isCollectionSelected', () => {
-
-    it('should return true when the collection id is in the form value', () => {
-      component.queryForm.get('collections').setValue(['collection-a1']);
-      expect(component.isCollectionSelected('collection-a1')).toBeTrue();
-    });
-
-    it('should return false when the collection id is not in the form value', () => {
-      component.queryForm.get('collections').setValue(['collection-a1']);
-      expect(component.isCollectionSelected('collection-b1')).toBeFalse();
-    });
-
-    it('should return false when the form value is empty', () => {
-      component.queryForm.get('collections').setValue([]);
-      expect(component.isCollectionSelected('collection-a1')).toBeFalse();
-    });
-
-  });
-
 });

src/app/admin/admin-reports/filtered-items/filtered-items.component.ts

@@ -1,7 +1,4 @@
-import {
-  AsyncPipe,
-  NgClass,
-} from '@angular/common';
+import { AsyncPipe } from '@angular/common';
 import {
   Component,
   OnInit,
@@ -77,7 +74,6 @@ interface CollectionGroup {
     FilteredItemsExportCsvComponent,
     FiltersComponent,
     NgbAccordionModule,
-    NgClass,
     ReactiveFormsModule,
     ThemedLoadingComponent,
     TranslateModule,
@@ -140,6 +136,23 @@ export class FilteredItemsComponent implements OnInit {
       filters: FiltersComponent.formGroup(this.formBuilder),
       additionalFields: this.formBuilder.control([], []),
     });
+
+    this.queryForm.get('collections').valueChanges.subscribe((selected: string[]) => {
+      if (!selected || selected.length <= 1) {return;}
+
+      const hasWholeRepo = selected.includes('');
+      if (hasWholeRepo) {
+        const lastSelected = selected[selected.length - 1];
+        if (lastSelected === '') {
+          this.queryForm.get('collections').setValue([''], { emitEvent: false });
+        } else {
+          this.queryForm.get('collections').setValue(
+            selected.filter(id => id !== ''),
+            { emitEvent: false },
+          );
+        }
+      }
+    });
   }
 
   loadCollections(): void {