Merge pull request #668 from geonetwork/DH/link-format-filter-bug

DH/Bug : Links format filter filters out everything
geonetwork · Nov 3, 2023 · dbc10d3 · dbc10d3
2 parents 7661ac3 + e3bc5e3
commit dbc10d3
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 6 deletions.
diff --git a/apps/datahub-e2e/src/e2e/datasetDetailPage.cy.ts b/apps/datahub-e2e/src/e2e/datasetDetailPage.cy.ts
@@ -384,6 +384,24 @@ describe('dataset pages', () => {
             expect(/\S/.test(isFileDownloaded)).to.be.true
           })
         })
+        it('displays the full list after clicking two times on one filter', () => {
+          cy.get('gn-ui-data-downloads')
+            .find('gn-ui-button')
+            .children('button')
+            .eq(1)
+            .as('filterFormat')
+          cy.get('@filterFormat').click()
+          cy.get('[data-cy="download-format"]')
+            .filter(':visible')
+            .its('length')
+            .then((l1) => {
+              cy.get('@filterFormat').click()
+              cy.get('[data-cy="download-format"]')
+                .filter(':visible')
+                .its('length')
+                .then((l2) => expect(l2).to.not.equal(l1))
+            })
+        })
       })
     })
   })

diff --git a/libs/ui/elements/src/lib/downloads-list/downloads-list.component.spec.ts b/libs/ui/elements/src/lib/downloads-list/downloads-list.component.spec.ts
@@ -54,7 +54,7 @@ describe('DownloadsListComponent', () => {
     expect(component).toBeTruthy()
   })
 
-  describe('when a list of downloads', () => {
+  describe('with a non-empty list of downloads', () => {
     let items: DebugElement[]
 
     beforeEach(() => {
@@ -71,7 +71,7 @@ describe('DownloadsListComponent', () => {
     })
   })
 
-  describe('when a list of downloads is empty', () => {
+  describe('with an empty list of downloads', () => {
     let item: DebugElement
 
     beforeEach(() => {
@@ -96,7 +96,7 @@ describe('DownloadsListComponent', () => {
       expect(items.length).toBe(1)
     })
   })
-  describe('derivates color and format from link', () => {
+  describe('derives color and format from link', () => {
     let items: DebugElement[]
 
     beforeEach(() => {
@@ -165,6 +165,40 @@ describe('DownloadsListComponent', () => {
         expect(component.filteredLinks).toEqual([])
       })
     })
+
+    describe('toggling formats', () => {
+      it('removes already enabled formats', () => {
+        component.activeFilterFormats = ['excel', 'csv', 'shp']
+        component.toggleFilterFormat('excel')
+        expect(component.activeFilterFormats).toEqual(['csv', 'shp'])
+      })
+      it('adds disabled formats', () => {
+        component.activeFilterFormats = ['excel', 'csv', 'shp']
+        component.toggleFilterFormat('json')
+        expect(component.activeFilterFormats).toEqual([
+          'excel',
+          'csv',
+          'shp',
+          'json',
+        ])
+      })
+      it('sets filter to all if disabling the last format', () => {
+        component.activeFilterFormats = ['excel', 'csv']
+        component.toggleFilterFormat('excel')
+        component.toggleFilterFormat('csv')
+        expect(component.activeFilterFormats).toEqual(['all'])
+      })
+      it('toggling all disables other formats if disabled', () => {
+        component.activeFilterFormats = ['excel', 'csv']
+        component.toggleFilterFormat('all')
+        expect(component.activeFilterFormats).toEqual(['all'])
+      })
+      it('toggling all does nothing if already enabled', () => {
+        component.activeFilterFormats = ['all']
+        component.toggleFilterFormat('all')
+        expect(component.activeFilterFormats).toEqual(['all'])
+      })
+    })
   })
 
   describe('filter buttons visibility', () => {

diff --git a/libs/ui/elements/src/lib/downloads-list/downloads-list.component.ts b/libs/ui/elements/src/lib/downloads-list/downloads-list.component.ts
@@ -40,10 +40,20 @@ export class DownloadsListComponent {
   toggleFilterFormat(format: FilterFormat): void {
     if (format === 'all') {
       this.activeFilterFormats = ['all']
+      return
+    }
+    if (this.isFilterActive(format)) {
+      this.activeFilterFormats = this.activeFilterFormats.filter(
+        (f: string) => format !== f
+      )
     } else {
-      this.activeFilterFormats = this.isFilterActive(format)
-        ? this.activeFilterFormats.filter((f: string) => format !== f)
-        : [...this.activeFilterFormats.filter((f) => f !== 'all'), format]
+      this.activeFilterFormats = [
+        ...this.activeFilterFormats.filter((f) => f !== 'all'),
+        format,
+      ]
+    }
+    if (this.activeFilterFormats.length === 0) {
+      this.activeFilterFormats = ['all']
     }
   }