MET-3943 Init filter remove scroll properly, restyle / refactor, adde…

…d tooltips
europeana · Oct 22, 2021 · 643c65b · 643c65b
1 parent ef27ca2
commit 643c65b
Show file tree

Hide file tree

Showing 8 changed files with 90 additions and 43 deletions.
diff --git a/cypress/integration/filter-removal.spec.ts b/cypress/integration/filter-removal.spec.ts
@@ -0,0 +1,31 @@
+import { DimensionName } from '../../src/app/_models';
+
+context('statistics-dashboard', () => {
+  describe('filter removal', () => {
+    const force = { force: true };
+    const selFilterRemove = '.rm-filter';
+    const selFilterRemoveNav = '.rm-filter-nav';
+    const selNavNext = `${selFilterRemoveNav}-next`;
+    const selNavPrev = `${selFilterRemoveNav}-prev`;
+    const selNavNextActive = `${selNavNext}.active`;
+    const selNavPrevActive = `${selNavPrev}.active`;
+    const url = `/data/${DimensionName.country}?dataset-id='datasetId_123,datasetId_456,datasetId_789,datasetId_abc,datasetId_def,datasetId_hij`;
+
+    it('should show the filter remove scroll controls', () => {
+      cy.visit(url);
+      cy.get(selFilterRemove).should('have.length', 6);
+      cy.get(selFilterRemoveNav).should('have.length', 1);
+      cy.get(selNavNext).should('have.length', 1);
+      cy.get(selNavPrev).should('have.length', 1);
+      cy.get(selNavNextActive).should('have.length', 1);
+      cy.get(selNavPrevActive).should('have.length', 0);
+    });
+
+    it('should scroll the filter remove options', () => {
+      cy.visit(url);
+      cy.get(selNavPrevActive).should('have.length', 0);
+      cy.get(selNavNextActive).click(force);
+      cy.get(selNavPrevActive).should('have.length', 1);
+    });
+  });
+});
diff --git a/cypress/integration/filters.spec.ts b/cypress/integration/filters.spec.ts
@@ -16,7 +16,6 @@ context('statistics-dashboard', () => {
     const selFilterOpenerName = `${selFilterOpener} .opener-name`;
     const selFilterOpened = `${selFilter} .checkboxes-list`;
     const selFilterRemove = `.rm-filter`;
-    const selFilterRemoveNav = `.rm-filter-nav`;
     const selNoData = '.no-data';
     const selCheckbox = `${selFilter} .checkbox`;
     const selSearch = `.checkbox-filter-input`;
@@ -56,20 +55,6 @@ context('statistics-dashboard', () => {
       cy.get(selFilterRemove).should('have.length', 1);
     });
 
-    it('should scroll the filter remove options', () => {
-      cy.visit(`/data/${DimensionName.country}`);
-      cy.get(selFilterOpener).eq(2).click(force);
-      cy.get(selFilterRemove).should('have.length', 0);
-      cy.get(selFilterRemoveNav).should('have.length', 0);
-
-      for(let i=0; i<4; i++){
-        cy.get(selCheckbox).eq(i).click(force);
-      }
-
-      cy.get(selFilterRemove).should('have.length', 4);
-      cy.get(selFilterRemoveNav).should('have.length', 1);
-    });
-
     it('should disable and restore filters', () => {
       cy.visit(`/data/${DimensionName.contentTier}`);
       cy.get(selFilterOpener).eq(1).click(force);

diff --git a/src/app/_directives/index.ts b/src/app/_directives/index.ts
@@ -0,0 +1 @@
+export * from './is-scrollable';
diff --git a/src/app/_directives/is-scrollable/is-scrollable.directive.ts b/src/app/_directives/is-scrollable/is-scrollable.directive.ts
@@ -1,27 +1,30 @@
-import { Directive, ElementRef } from '@angular/core';
+import { AfterViewInit, Directive, ElementRef } from '@angular/core';
 
 @Directive({
   selector: '[appIsScrollable]',
   exportAs: 'scrollInfo'
 })
-export class IsScrollableDirective {
-  private changes: MutationObserver;
-
+export class IsScrollableDirective implements AfterViewInit {
   canScrollBack = false;
   canScrollFwd = false;
 
   constructor(private elementRef: ElementRef) {
     const element = this.elementRef.nativeElement;
 
-    this.changes = new MutationObserver((_: MutationRecord[]) => {
+    new MutationObserver((_: MutationRecord[]) => {
       this.calc();
-    });
-
-    this.changes.observe(element, {
+    }).observe(element, {
       childList: true
     });
   }
 
+  ngAfterViewInit(): void {
+    const fn = (): void => {
+      this.calc();
+    };
+    setTimeout(fn, 0);
+  }
+
   /** calc
   /* updates the variables
   /* - canScrollBack

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -7,7 +7,7 @@ import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { ClickOutsideModule } from 'ng-click-outside';
 
-import { IsScrollableDirective } from './_directives/is-scrollable';
+import { IsScrollableDirective } from './_directives';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import {

diff --git a/src/app/overview/overview.component.html b/src/app/overview/overview.component.html
@@ -172,20 +172,32 @@ <h3 class="header-data">
                   <ng-container
                     *ngFor="let deadFacet of [isDeadFacet(filter, option)]"
                   >
-                    <label
-                      class="rm-filter"
-                      *ngIf="form.value[filter][option]"
-                      [ngClass]="{ 'dead-facet': deadFacet }"
+                    <ng-container
+                      *ngFor="
+                        let labelText of [
+                          fromInputSafeName(option) | renameRights
+                        ]
+                      "
                     >
-                      <app-checkbox
-                        [form]="form"
-                        [controlName]="option"
-                        [labelText]="fromInputSafeName(option) | renameRights"
-                        [group]="filter"
-                        (valueChanged)="updatePageUrl(deadFacet)"
-                      ></app-checkbox>
-                      <span class="x"></span>
-                    </label>
+                      <label
+                        class="rm-filter"
+                        *ngIf="form.value[filter][option]"
+                        [ngClass]="{ 'dead-facet': deadFacet }"
+                      >
+                        <app-checkbox
+                          [form]="form"
+                          [controlName]="option"
+                          [labelText]="labelText"
+                          [group]="filter"
+                          (valueChanged)="updatePageUrl(deadFacet)"
+                          title="remove filter: {{ labelText }}"
+                        ></app-checkbox>
+                        <span
+                          class="x"
+                          title="remove filter: {{ labelText }}"
+                        ></span>
+                      </label>
+                    </ng-container>
                   </ng-container>
                 </ng-container>
               </ng-container>
@@ -200,8 +212,9 @@ <h3 class="header-data">
                       group="datasetIds"
                       [labelText]="id"
                       (valueChanged)="updateDatasetIdFieldAndPageUrl(id)"
+                      title="remove filter: {{ id }}"
                     ></app-checkbox>
-                    <span class="x"></span>
+                    <span class="x" title="remove filter: {{ id }}"></span>
                   </label>
                 </ng-container>
               </ng-container>
@@ -216,12 +229,14 @@ <h3 class="header-data">
             class="rm-filter-nav-prev"
             (click)="scrollInfo.back()"
             [ngClass]="{ active: scrollInfo.canScrollBack }"
+            [title]="scrollInfo.canScrollBack ? 'scoll back' : ''"
             >&lsaquo;</a
           >
           <a
             class="rm-filter-nav-next"
             (click)="scrollInfo.fwd()"
             [ngClass]="{ active: scrollInfo.canScrollFwd }"
+            [title]="scrollInfo.canScrollFwd ? 'scoll forward' : ''"
             >&rsaquo;</a
           >
         </div>

diff --git a/src/app/overview/overview.component.scss b/src/app/overview/overview.component.scss
@@ -98,27 +98,38 @@ $width-left-col: 200px;
 
 .rm-filter-nav {
   align-items: center;
-  background: linear-gradient(90deg, transparent 0%, $offwhite 50%);
+  background: $offwhite;
   bottom: 0;
   display: flex;
   justify-content: flex-end;
-  pointer-events: none;
+  margin: 0 0 0 2px;
   position: absolute;
   right: 0;
   top: 0;
-  width: 70px;
+  width: 30px;
+
+  &::before {
+    background: linear-gradient(90deg, transparent 0%, $offwhite 100%);
+    content: "";
+    height: 100%;
+    left: -30px;
+    pointer-events: none;
+    position: absolute;
+    top: 0;
+    width: 30px;
+  }
 }
 
 .rm-filter-nav-next,
 .rm-filter-nav-prev {
   color: $gray-5;
+  cursor: default;
   font-size: 30px;
   transform: translateY(-4px);
   width: 14px;
-
   &.active {
     color: #000;
-    pointer-events: all;
+    cursor: pointer;
   }
 }
 

diff --git a/src/scss/_checkboxes.scss b/src/scss/_checkboxes.scss
@@ -38,6 +38,7 @@
   }
 
   :last-child {
+    cursor: pointer;
     width: 100%;
   }
 }