Edit and delete inplace for scroll

Author: minottic

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

@@ -171,11 +171,34 @@ describe('OverviewScrollComponent', () => {
     }));
   });
 
-  it('should test deleteLogbook', async () => {
-    const reloadSpy = spyOn(component, 'reloadLogbooks');
-    await component.deleteLogbook('123');
-    expect(logbookDataSpy.deleteLogbook).toHaveBeenCalledOnceWith('123');
-    expect(reloadSpy).toHaveBeenCalledTimes(1);
+  it('should test deleteLogbook', fakeAsync(async () => {
+    const reshapeOnResizeSpy = spyOn<any>(component, 'reshapeOnResize').and.callThrough();
+    spyOn<any>(component, 'getLogbooks').and.returnValue([{id: '5'}]);
+    component.logbooks = [
+      [{id: '1'},{id: '2'}, {id: '3'}],
+      [{id: '4'}]
+    ];
+    component['pageSize'] = 3;
+    component['endOfData'] = false;
+    await component.deleteLogbook('3');
+    expect(reshapeOnResizeSpy).toHaveBeenCalledOnceWith(
+      2,
+      [{id: '1'}, {id: '2'}, {id: '4'}]
+    );
+    expect(component.logbooks).toEqual([
+      [{id: '1'}, {id: '2'}, {id: '4'}], [{id: '5'}]])
+  }));
+
+  it('should test afterLogbookEdit', async () => {
+    component.logbooks = [
+      [{id: '1'},{id: '2'},{id: '3'}], 
+      [{id: '4'},{id: '5'},{id: '6'}]
+    ];
+    component.afterLogbookEdit({id: '4', name: '9'} as unknown as Logbooks)
+    expect(component.logbooks).toEqual([
+      [{id: '1'},{id: '2'},{id: '3'}], 
+      [{id: '4', name: '9'},{id: '5'},{id: '6'}]
+    ]);
   });
 
 })

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

@@ -116,7 +116,7 @@ export class OverviewScrollComponent {
 
   private async reshapeOnResize(oldPageSize: number, logbooks: Logbooks[] = undefined) {
     const pageDiff = this.pageSize - oldPageSize;
-    const _logbooks = logbooks ?? this.logbooks.flat();
+    const _logbooks = [...(logbooks ?? this.logbooks.flat())];
     if (!this.endOfData)
       pageDiff > 0 ?
         _logbooks.push(...(await this.getLogbooks(oldPageSize, pageDiff))) :
@@ -161,9 +161,17 @@ export class OverviewScrollComponent {
     this.logbookEdit.emit(logbook);
   }
 
+  afterLogbookEdit(logbook: Logbooks) {
+    this.logbooks.forEach(group => 
+      group.forEach((log, i) => {if (log.id === logbook.id) group[i] = logbook})
+    );
+  }
+
   async deleteLogbook(logbookId: string) {
     await this.dataService.deleteLogbook(logbookId);
-    await this.reloadLogbooks();
+    const logbooks = this.logbooks.flat().filter(logbook => logbook.id !== logbookId);
+    await this.reshapeOnResize(
+      this.pageSize - 1, logbooks);
   }
 
   logbookSelected(logbookId: string) {

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

@@ -119,4 +119,10 @@ describe('OverviewTableComponent', () => {
     expect(reloadSpy).toHaveBeenCalledOnceWith(false);
   });
 
+  it('should test afterLogbookEdit', async () => {
+    const reloadSpy = spyOn(component, 'reloadLogbooks');
+    await component.afterLogbookEdit();
+    expect(reloadSpy).toHaveBeenCalledOnceWith(false);
+  });
+
 })

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

@@ -93,6 +93,10 @@ export class OverviewTableComponent implements OnInit {
     this.logbookEdit.emit(logbook);
   }
 
+  async afterLogbookEdit() {
+    await this.reloadLogbooks(false);
+  }
+
   async deleteLogbook(logbookId: string) {
     await this.dataService.deleteLogbook(logbookId);
     await this.reloadLogbooks(false);

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

@@ -34,8 +34,8 @@ describe('OverviewComponent', () => {
 
   cookiesSpy = jasmine.createSpyObj("CookieService", ["lastLogbook"]);
   cookiesSpy.lastLogbook.and.returnValue([]);
-  const tableSpy = jasmine.createSpyObj("OverviewTableComponent", ['reloadLogbooks']);
-  const scrollSpy = jasmine.createSpyObj("OverviewScrollComponent", ['reloadLogbooks']);
+  const tableSpy = jasmine.createSpyObj("OverviewTableComponent", ['reloadLogbooks', 'afterLogbookEdit']);
+  const scrollSpy = jasmine.createSpyObj("OverviewScrollComponent", ['reloadLogbooks', 'afterLogbookEdit']);
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
@@ -65,16 +65,16 @@ describe('OverviewComponent', () => {
   });
 
   [
-    ['logbook-module', scrollSpy, 'add', true],
-    ['logbook-module', scrollSpy, 'edit', false],
-    ['logbook-headline', tableSpy, 'add', true],
-    ['logbook-headline', tableSpy, 'edit', false],
+    ['logbook-module', scrollSpy.reloadLogbooks, 'add', true],
+    ['logbook-module', scrollSpy.afterLogbookEdit, 'edit', false],
+    ['logbook-headline', tableSpy.reloadLogbooks, 'add', true],
+    ['logbook-headline', tableSpy.afterLogbookEdit, 'edit', false],
   ].forEach((t, i) => {
     it(`should test reloadData ${i}`, async () => {
-      t[1].reloadLogbooks.calls.reset();
-      component.matCardType = t[0] as MatCardType;
-      await component['reloadData'](t[2] as 'edit' | 'add');
-      expect(t[1].reloadLogbooks).toHaveBeenCalledOnceWith(t[3]);
+      t[1].calls.reset();
+      component.matCardType = t[0];
+      await component['reloadData']({id: '1'}, t[2]);
+      expect(t[1]).toHaveBeenCalledTimes(1);
     });
   });
 

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

@@ -1,6 +1,6 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { Logbooks } from '@model/logbooks';
-import { from, Subscription, switchMap } from 'rxjs';
+import { Subscription } from 'rxjs';
 import { UserPreferencesService } from '@shared/user-preferences.service';
 import { CollectionConfig, WidgetItemConfig } from '@model/config';
 import { MatLegacyDialog as MatDialog, MatLegacyDialogConfig as MatDialogConfig } from '@angular/material/legacy-dialog';
@@ -102,13 +102,16 @@ export class OverviewComponent implements OnInit {
     let dialogRef: any;
     dialogRef = this.dialog.open(AddLogbookComponent, dialogConfig);
 
-    this.subscriptions.push(dialogRef.afterClosed().pipe(
-      switchMap(() => from(this.reloadData('edit')))
-    ).subscribe());
+    this.subscriptions.push(dialogRef.afterClosed()
+    .subscribe(async (result: Logbooks) => {
+      await this.reloadData(result, 'edit');
+    }));
   }
 
-  private async reloadData(action: 'edit' | 'add') {
-    await this.overviewComponent.reloadLogbooks(!(action === 'edit'));
+  async reloadData(logbook: Logbooks, action: 'edit' | 'add') {
+    if (!logbook) return
+    if (action === 'edit') await this.overviewComponent.afterLogbookEdit(logbook);
+    if (action === 'add') await this.overviewComponent.reloadLogbooks();
   }
 
   addCollectionLogbook(contentType: string) {
@@ -126,10 +129,8 @@ export class OverviewComponent implements OnInit {
       default:
         break;
     }
-    this.subscriptions.push(dialogRef.afterClosed().subscribe(async result => {
-      if (typeof result != "undefined") {
-        await this.reloadData('add');
-      }
+    this.subscriptions.push(dialogRef.afterClosed().subscribe(async (result: Logbooks) => {
+      await this.reloadData(result, 'add');
     }));
   }