Make group size of overview logbooks dynamic

scilog/src/app/overview/logbook-icon-scroll-service.service.spec.ts

@@ -2,15 +2,18 @@ import { TestBed } from '@angular/core/testing';
 import { LogbookDataService } from '@shared/remote-data.service';
 
 import { LogbookIconScrollService } from './logbook-icon-scroll-service.service';
+import { AdapterMethodResult, IDatasource } from 'ngx-ui-scroll/src/component/interfaces';
 
 describe('LogbookIconScrollServiceService', () => {
   let service: LogbookIconScrollService;
 
   beforeEach(() => {
-    const LogbookDataServiceSpy = jasmine.createSpyObj("LogbookDataService", ["getDataBuffer"]);
+    const logbookDataServiceSpy = jasmine.createSpyObj("LogbookDataService", ["getDataBuffer"]);
+    logbookDataServiceSpy.getDataBuffer.and.resolveTo([1, 2, 3, 4, 5, 6, 7]);
+
     TestBed.configureTestingModule({
       providers: [
-        {provide: LogbookDataService, useValue: LogbookDataServiceSpy}
+        {provide: LogbookDataService, useValue: logbookDataServiceSpy}
       ],
     });
     service = TestBed.inject(LogbookIconScrollService);
@@ -19,4 +22,10 @@ describe('LogbookIconScrollServiceService', () => {
   it('should be created', () => {
     expect(service).toBeTruthy();
   });
+
+  it('should test getData', async () => {
+    service['datasource'] = {adapter: {relax: async () => ({} as AdapterMethodResult)}} as IDatasource;
+    expect(await service.getData(0, 10, {})).toEqual([[1, 2, 3], [4, 5, 6], [7]]);
+  });
+
 });

scilog/src/app/overview/logbook-icon-scroll-service.service.ts

@@ -8,11 +8,13 @@ import { Datasource } from 'ngx-ui-scroll';
 })
 export class LogbookIconScrollService extends ScrollBaseService {
 
+  groupSize = 3;
   constructor(private logbookDataService: LogbookDataService) {
     super();
   }
 
   protected setupDatasource() {
+    const bufferSize = (this.groupSize + 1) * 3;
     if (this.datasource != null) {
       this.datasource.adapter.reset(new Datasource({
         get: async (index: number, count: number) => {
@@ -22,7 +24,7 @@ export class LogbookIconScrollService extends ScrollBaseService {
         settings: {
           minIndex: 0,
           startIndex: this.startIndex,
-          bufferSize: 9,
+          bufferSize: bufferSize,
           padding: 0.5,
         }
       }));
@@ -35,24 +37,22 @@ export class LogbookIconScrollService extends ScrollBaseService {
         settings: {
           minIndex: 0,
           startIndex: this.startIndex,
-          bufferSize: 9,
+          bufferSize: bufferSize,
           padding: 0.5,
         }
       });
     }
   }
 
   getDataBuffer(index: number, count: number, config: any) {
-    // return this.logbookDataService.getDataBuffer(index, count, config);
     return this.getData(index, count, config);
   }
 
   async getData(index: number, count: number, config: any) {
-    let data = [];
-    let buffer = await this.logbookDataService.getDataBuffer(index, count * 3, config);
+    const buffer = await this.logbookDataService.getDataBuffer(index, count, config);
     this.datasource.adapter.relax();
     const groupedBuffer = [];
-    while (buffer.length) groupedBuffer.push(buffer.splice(0, 3));
+    while (buffer.length) groupedBuffer.push(buffer.splice(0, this.groupSize));
     return groupedBuffer
   }
 }

scilog/src/app/overview/overview.component.css

@@ -16,7 +16,7 @@
     height: calc(100vh - 250px);
     width: calc(100vw - 20px);
   }
-   
+
   ::ng-deep .mat-toolbar{
     z-index: 998;
     position: fixed;

scilog/src/app/overview/overview.component.html

@@ -21,7 +21,7 @@ <h1>Collection</h1>
     <!-- <mat-divider></mat-divider> -->
     <h1>Logbooks</h1>
     <button (click)='addCollectionLogbook("logbook")'>Add logbook</button><br>
-    <div class="logbook-container">
+    <div class="logbook-container" (resized)="onResized($event)" #logbookContainer>
       <div *uiScroll="let logbookGroup of logbookIconScrollService.datasource; let i = index">
         <span *ngFor="let logbook of logbookGroup">
           <app-logbook-cover [logbook]="logbook" (logbookEdit)="editLogbook($event)"

scilog/src/app/overview/overview.component.spec.ts

@@ -10,6 +10,8 @@ import { of } from 'rxjs';
 import { RouterTestingModule } from '@angular/router/testing';
 import {Pipe, PipeTransform} from '@angular/core';
 import { Logbooks } from '@model/logbooks';
+import { IDatasource } from 'ngx-ui-scroll';
+import { ResizedEvent } from 'angular-resize-event';
 
 @Pipe({name: 'logbookSearch'})
 class LogbookSearchMockPipe implements PipeTransform {
@@ -63,9 +65,45 @@ describe('OverviewComponent', () => {
     fixture = TestBed.createComponent(OverviewComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
+    component.logbookIconScrollService.groupSize = 3;
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  [
+    {adapter: {firstVisible: {element: {}}}},
+    {},
+    {adapter: {firstVisible: {element: {querySelector: () => ({clientWidht: 0})}}}},
+    {adapter: {firstVisible: {element: {querySelector: () => ({clientWidth: 10})}}}},    
+  ].forEach((t, i) => {
+    it(`should test get matCardWith ${i}`, () => {
+      component['logbookIconScrollService']['datasource'] = t as unknown as IDatasource;
+      expect(component.matCardWith).toEqual(i === 3? 10: 300);
+    });
+  });
+
+  [[1, 1], [700, 2]].forEach(t => {
+    it(`shokd test groupSize ${t[0]}`, () => {
+      expect(component.groupSize(t[0])).toEqual(t[1]);
+    });
+  });
+
+  [
+    [{newRect: {width: 900}}, [0, 0]], 
+    [{newRect: {width: 700}, oldRect: {width: 300}}, [1, 0]], 
+    [{newRect: {width: 100}, oldRect: {width: 300}}, [1, 0]],
+    [{newRect: {width: 200}, oldRect: {width: 300}}, [0, 1]],
+    [{newRect: {width: 400}, oldRect: {width: 300}}, [0, 1]],
+  ].forEach((t, i) => {
+    it(`shokd test onResized ${i}`, async () => {
+      const initializeSpy = spyOn(component["logbookIconScrollService"], "initialize");
+      const reloadSpy = spyOn(component["logbookIconScrollService"], "reload");
+      await component.onResized(t[0] as ResizedEvent);
+      expect(initializeSpy).toHaveBeenCalledTimes(t[1][0]);
+      expect(reloadSpy).toHaveBeenCalledTimes(t[1][1]);
+    });
+  });
+
 });

scilog/src/app/overview/overview.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
 import { Logbooks } from '@model/logbooks';
 import { Subject, Subscription } from 'rxjs';
 import { UserPreferencesService } from '@shared/user-preferences.service';
@@ -11,6 +11,7 @@ import { CookiesService } from '@shared/cookies.service';
 import { LogbookDataService } from '@shared/remote-data.service';
 import { LogbookIconScrollService } from './logbook-icon-scroll-service.service';
 import { debounceTime } from 'rxjs/operators';
+import { ResizedEvent } from 'angular-resize-event';
 
 enum ContentType {
   COLLECTION = 'collection',
@@ -38,6 +39,8 @@ export class OverviewComponent implements OnInit {
   subscriptions: Subscription[] = [];
   private _searchString: string = '';
   searchStringSubject: Subject<void> = new Subject();
+  _matCardWidth = 300;
+  @ViewChild('logbookContainer', {static: true}) logbookContainer: ElementRef<HTMLElement>;
 
 
   constructor(
@@ -65,6 +68,7 @@ export class OverviewComponent implements OnInit {
         this.logbookSubscription.unsubscribe();
       }
       this.config = this._prepareConfig();
+      this.logbookIconScrollService.groupSize = this.groupSize(this.logbookContainer.nativeElement.clientWidth);
       this.logbookIconScrollService.initialize(this.config);
     }));
     this.subscriptions.push(this.searchStringSubject.pipe(debounceTime(500)).subscribe(() => {
@@ -74,6 +78,29 @@ export class OverviewComponent implements OnInit {
     }));
   }
 
+  onResized(event: ResizedEvent){
+    const newSize = this.groupSize(event.newRect.width);
+    if (newSize === this.logbookIconScrollService.groupSize) return
+    this.logbookIconScrollService.groupSize = newSize;
+    if (event.newRect.width > 2 * event.oldRect.width || event.oldRect.width > 2 * event.newRect.width) {
+      this.logbookIconScrollService.initialize(this.config);
+    }
+    else
+      this.logbookIconScrollService.reload();
+  }
+
+  get matCardWith () {
+    const matCardWidth = this.logbookIconScrollService?.datasource?.adapter?.firstVisible?.element?.querySelector?.('.logbook-card')?.clientWidth;
+    if (!matCardWidth) 
+      return this._matCardWidth;
+    this._matCardWidth = matCardWidth
+    return matCardWidth
+  }
+
+  groupSize (viewPortWidth: number) {
+    return Math.floor(viewPortWidth / this.matCardWith) || 1;
+  }
+
   collectionSelected(collection: CollectionConfig) {
     this.showViewSelection = true;
     // this.views = [];