Use CDKScroll for overview

* Add scroll component based on cdk * Add tests * Simplify logbook cover not to depend on matcard * Fix scrolling and update on resize * Add missing html change * Add overview table preliminary changes * Fix overview tests * Enable search, add spinner * Fix delete and edit for scroll * Fit image in given space
paulscherrerinstitute · Nov 18, 2024 · b68b0cf · b68b0cf
1 parent fe171c0
commit b68b0cf
Show file tree

Hide file tree

Showing 20 changed files with 507 additions and 276 deletions.
diff --git a/scilog/src/app/app.module.ts b/scilog/src/app/app.module.ts
@@ -87,6 +87,7 @@ import { ResizedDirective } from '@shared/directives/resized.directive';
 import { OverviewTableComponent } from './overview/overview-table/overview-table.component';
 import { MatPaginatorModule } from '@angular/material/paginator';
 import { MatSortModule } from '@angular/material/sort';
+import { OverviewScrollComponent } from './overview/overview-scroll/overview-scroll.component';
 
 const appConfigInitializerFn = (appConfig: AppConfigService) => {
     return () => appConfig.loadAppConfig();
@@ -133,7 +134,8 @@ const appConfigInitializerFn = (appConfig: AppConfigService) => {
         SearchWindowComponent,
         TaskComponent,
         ResizedDirective,
-        OverviewTableComponent
+        OverviewTableComponent,
+        OverviewScrollComponent
     ],
     imports: [
         BrowserModule,

diff --git a/scilog/src/app/core/remote-data.service.ts b/scilog/src/app/core/remote-data.service.ts
@@ -622,7 +622,7 @@ export class SearchDataService extends RemoteDataService {
     return this._searchString;
   }
   public set searchString(value: string) {
-    this._searchString = value;
+    this._searchString = value ?? '';
   }
 
   protected addIncludeScope(): Object {

diff --git a/scilog/src/app/core/toolbar/toolbar.component.html b/scilog/src/app/core/toolbar/toolbar.component.html
@@ -12,7 +12,7 @@
     </button>
   </div>
   <div *ngIf='showSearch' class="searchWindow">
-    <search-window #searchWindow [configsArray]='config' [searched]="searched" (close)="closeSearch()" (overviewSearch)="overviewSearch($event)"></search-window>
+    <search-window #searchWindow [configsArray]='config' [searched]="searched" (close)="closeSearch()" (overviewSearch)="setSearch($event)"></search-window>
   </div>
   <div class="flexExpand">
     <button mat-icon-button class='searchButton' (click)="openSearch()" *ngIf="!showMenuIcon">

diff --git a/scilog/src/app/core/toolbar/toolbar.component.spec.ts b/scilog/src/app/core/toolbar/toolbar.component.spec.ts
@@ -33,7 +33,7 @@ describe('ToolbarComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  it('should overviewSearch', () => {
+  it('should setSearch', () => {
     component.showSearch = true;
     fixture.detectChanges();
     fixture.debugElement.query(

diff --git a/scilog/src/app/core/toolbar/toolbar.component.ts b/scilog/src/app/core/toolbar/toolbar.component.ts
@@ -10,7 +10,6 @@ import { UserInfo } from '@model/user-info';
 import { Views } from '@model/views';
 import { SettingsComponent } from '@shared/settings/settings.component'
 import { WidgetConfig } from '@model/config';
-import { SearchWindowComponent } from '@shared/search-window/search-window.component';
 import { AppConfigService, AppConfig } from 'src/app/app-config.service';
 import { CookiesService } from '../cookies.service';
 
@@ -37,6 +36,7 @@ export class ToolbarComponent implements OnInit {
   config: WidgetConfig[];
 
   @Output() openMenu = new EventEmitter<any>();
+  @Output() overviewSearch = new EventEmitter<string>();
 
   private logbookTitleRef: ElementRef;
   @ViewChild('logbookTitle', { static: false }) set content(content: ElementRef) {
@@ -93,8 +93,9 @@ export class ToolbarComponent implements OnInit {
     console.log(this.showVersionInfo)
   }
 
-  overviewSearch($event) {
-    this.searched = $event
+  setSearch(search: string) {
+    this.searched = search;
+    this.overviewSearch.emit(search);
   }
 
   logout() {

diff --git a/scilog/src/app/logbook/core/search-window/search-window.component.spec.ts b/scilog/src/app/logbook/core/search-window/search-window.component.spec.ts
@@ -49,11 +49,9 @@ describe('SearchWindowComponent', () => {
     component.logbookId = undefined;
     const search = 'some';
     component.searchString = search;
-    const resetSpy = spyOn(component['logbookIconScrollService'], 'reset');
     const emitSpy = spyOn(component.overviewSearch, 'emit');
     const closeSearchSpy = spyOn(component, 'closeSearch');
     component.submitSearch();
-    expect(resetSpy).toHaveBeenCalledOnceWith(search);
     expect(emitSpy).toHaveBeenCalledOnceWith(search);
     expect(closeSearchSpy).toHaveBeenCalled();
   });

diff --git a/scilog/src/app/logbook/core/search-window/search-window.component.ts b/scilog/src/app/logbook/core/search-window/search-window.component.ts
@@ -5,7 +5,6 @@ import { UserPreferencesService } from '@shared/user-preferences.service';
 import { LogbookInfoService } from '@shared/logbook-info.service';
 import { TagService } from '@shared/tag.service';
 import { Hotkeys } from '@shared/hotkeys.service';
-import { LogbookIconScrollService } from 'src/app/overview/logbook-icon-scroll-service.service';
 import { SearchScrollService } from 'src/app/core/search-scroll.service';
 
 @Component({
@@ -41,7 +40,6 @@ export class SearchWindowComponent implements OnInit {
     private logbookInfo: LogbookInfoService,
     private tagService: TagService,
     private hotkeys: Hotkeys,
-    private logbookIconScrollService: LogbookIconScrollService,
     private searchScrollService: SearchScrollService,
   ) { }
 
@@ -72,7 +70,6 @@ export class SearchWindowComponent implements OnInit {
       this.searchScrollService.reset(this.concatSearchStrings());
       return
     }
-    this.logbookIconScrollService.reset(this.searchString);
     this.overviewSearch.emit(this.searchString);
     this.closeSearch();
   }

diff --git a/scilog/src/app/overview/logbook-cover/logbook-cover.component.css b/scilog/src/app/overview/logbook-cover/logbook-cover.component.css
@@ -1,5 +1,4 @@
 .logbook-module {
-
   width: 300px;
   height: 400px;
 }

diff --git a/scilog/src/app/overview/logbook-cover/logbook-cover.component.html b/scilog/src/app/overview/logbook-cover/logbook-cover.component.html
@@ -1,70 +1,13 @@
-<div [ngSwitch]="matView">
-  <div *ngSwitchCase="'logbook-headline'">
-    <ng-container *ngTemplateOutlet="logbookHeadline"></ng-container>
-  </div>
-  <div *ngSwitchCase="'logbook-module'">
-    <ng-container *ngTemplateOutlet="logbookModule"></ng-container>
-  </div>
-</div>
-
-<ng-template #logbookModule>
-  <mat-card [ngClass]="matView">
-    <mat-card-header>
-      <mat-card-title #cardHeader style="font-size: 18px;">{{ logbook?.name }}</mat-card-title>
-      <mat-card-subtitle>{{ logbook?.ownerGroup }}</mat-card-subtitle>
-      <button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Example icon-button with a menu"
-        class="mat-fab-top-right" [disabled]="isActionAllowed.tooltips.edit"
-        matTooltip="{{ isActionAllowed.tooltips.edit }}">
-        <mat-icon>more_vert</mat-icon>
-      </button>
-      <mat-menu #menu="matMenu">
-        <span [matTooltip]="isActionAllowed.tooltips.update">
-          <button mat-menu-item (click)="editLogbook()" [disabled]="isActionAllowed.tooltips.update">
-            <mat-icon>edit</mat-icon>
-            <span>Edit</span>
-          </button>
-        </span>
-        <span [matTooltip]="isActionAllowed.tooltips.delete">
-          <button mat-menu-item (click)="deleteLogbook()" [disabled]="isActionAllowed.tooltips.delete">
-            <mat-icon>delete</mat-icon>
-            <span>Delete</span>
-          </button>
-        </span>
-      </mat-menu>
-    </mat-card-header>
-    <div class="image-container">
-      <img (click)="selection($event)" [src]="imageToShow" alt="" [routerLink]="['/logbooks', logbook?.id, 'dashboard']"
-        *ngIf=" !isImageLoading">
-    </div>
-    <mat-card-content>
-      <p>
-        {{ logbook?.description }}
-      </p>
-    </mat-card-content>
-    <mat-divider></mat-divider>
-    <mat-card-actions class="mat-card-actions">
-      <button mat-button (click)="selection()" [routerLink]="['/logbooks', logbook?.id, 'dashboard']">
-        Open
-      </button>
-    </mat-card-actions>
-  </mat-card>
-</ng-template>
-
-<ng-template #logbookHeadline>
-  <mat-card [ngClass]="matView">
-    <div (dblclick)="selectOnDoubleClick()" class="card-container">
-      <mat-card-content class="title">{{ logbook?.name }}</mat-card-content>
-      <mat-card-content class="description">{{ logbook?.description }}</mat-card-content>
-      <mat-card-content class="owner">{{ logbook?.ownerGroup }}</mat-card-content>
-      <mat-card-content class="date">{{ logbook?.createdAt | date }}</mat-card-content>
-      <img [src]="imageToShow" alt="" *ngIf=" !isImageLoading">
-    </div>
-    <button mat-icon-button [matMenuTriggerFor]="menuHeadline" aria-label="Example icon-button with a menu"
+<mat-card class="logbook-module">
+  <mat-card-header>
+    <mat-card-title #cardHeader style="font-size: 18px;">{{ logbook?.name }}</mat-card-title>
+    <mat-card-subtitle>{{ logbook?.ownerGroup }}</mat-card-subtitle>
+    <button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Example icon-button with a menu"
       class="mat-fab-top-right" [disabled]="isActionAllowed.tooltips.edit"
       matTooltip="{{ isActionAllowed.tooltips.edit }}">
       <mat-icon>more_vert</mat-icon>
     </button>
-    <mat-menu #menuHeadline="matMenu">
+    <mat-menu #menu="matMenu">
       <span [matTooltip]="isActionAllowed.tooltips.update">
         <button mat-menu-item (click)="editLogbook()" [disabled]="isActionAllowed.tooltips.update">
           <mat-icon>edit</mat-icon>
@@ -78,5 +21,20 @@
         </button>
       </span>
     </mat-menu>
-  </mat-card>
-</ng-template>
+  </mat-card-header>
+  <div class="image-container">
+    <img (click)="selection($event)" [src]="imageToShow" alt="" [routerLink]="['/logbooks', logbook?.id, 'dashboard']"
+      *ngIf=" !isImageLoading">
+  </div>
+  <mat-card-content>
+    <p>
+      {{ logbook?.description }}
+    </p>
+  </mat-card-content>
+  <mat-divider></mat-divider>
+  <mat-card-actions class="mat-card-actions">
+    <button mat-button (click)="selection()" [routerLink]="['/logbooks', logbook?.id, 'dashboard']">
+      Open
+    </button>
+  </mat-card-actions>
+</mat-card>
diff --git a/scilog/src/app/overview/logbook-cover/logbook-cover.component.spec.ts b/scilog/src/app/overview/logbook-cover/logbook-cover.component.spec.ts
@@ -6,7 +6,6 @@ import { LogbookInfoService } from '@shared/logbook-info.service';
 import { of } from 'rxjs';
 import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu';
 import { Logbooks } from '@model/logbooks';
-import { MatCardType } from '../overview.component';
 
 class UserPreferencesMock {
   userInfo = {
@@ -79,22 +78,4 @@ describe('LogbookWidgetComponent', () => {
     expect(isAnyEditAllowedSpy).toHaveBeenCalledTimes(1);
   });
 
-  ['logbook-module', 'logbook-headline'].forEach(t => {
-    it(`should test ng-template: ${t}`, () => {
-      component.matView = t as MatCardType;
-      fixture.detectChanges();
-      expect(fixture.debugElement.nativeElement.querySelector(`.${t}`)).toEqual(jasmine.anything());
-    })
-  })
-
-  it('should test on doubleClick', () => {
-    component.matView = 'logbook-headline';
-    const selectOnDoubleClickSpy = spyOn(component, 'selectOnDoubleClick');
-    fixture.detectChanges();
-    const cardContainer = fixture.debugElement.nativeElement.querySelector('.card-container');
-    cardContainer.dispatchEvent(new Event('click'));
-    cardContainer.dispatchEvent(new Event('dblclick'));
-    expect(selectOnDoubleClickSpy).toHaveBeenCalledTimes(1);
-  });
-
 });
diff --git a/scilog/src/app/overview/logbook-cover/logbook-cover.component.ts b/scilog/src/app/overview/logbook-cover/logbook-cover.component.ts
@@ -21,9 +21,6 @@ export class LogbookWidgetComponent implements OnInit {
   @Input()
   logbook: Logbooks;
 
-  @Input()
-  matView: MatCardType;
-
   @ViewChild('cardHeader') cardHeader: ElementRef;
 
   imageToShow: any;

diff --git a/scilog/src/app/overview/overview-scroll/overview-scroll.component.css b/scilog/src/app/overview/overview-scroll/overview-scroll.component.css
@@ -0,0 +1,20 @@
+cdk-virtual-scroll-viewport {
+    height: 400px;
+    width: 100%;
+    border: 1px solid #ccc;
+}
+
+.logbook-container {
+    overflow: scroll;
+    height: calc(100vh - 250px);
+    width: calc(100vw - 20px);
+    border-color: transparent;
+}
+
+.logbook-content > .logbook-inline {
+    padding: 7px;
+}
+
+.logbook-inline {
+    display: inline-flex;
+}
diff --git a/scilog/src/app/overview/overview-scroll/overview-scroll.component.html b/scilog/src/app/overview/overview-scroll/overview-scroll.component.html
@@ -0,0 +1,9 @@
+<cdk-virtual-scroll-viewport [itemSize]="itemSize" class="logbook-container" (resized)="onResized($event)">
+  <div *cdkVirtualFor="let logbookGroup of logbooks; trackBy: trackByGroupId" class="logbook-content">
+    <span *ngFor="let logbook of logbookGroup" class="logbook-inline">
+      <app-logbook-cover [logbook]="logbook" (logbookEdit)="editLogbook($event)"
+        (logbookSelection)="logbookSelected($event)" (logbookDelete)="deleteLogbook($event)">
+      </app-logbook-cover>
+    </span>
+  </div>
+</cdk-virtual-scroll-viewport>