From d97214f1d5f3eb754b4c1fb8dc359b999b0257e1 Mon Sep 17 00:00:00 2001
From: Carlo Minotti <50220438+minottic@users.noreply.github.com>
Date: Mon, 5 Feb 2024 09:30:17 +0100
Subject: [PATCH] Add scroll to bottom and top buttons

* Add scroll to bottom button
* Add scroll to top when descending order
---
 .../logbook-item/logbook-item.component.html  | 10 ++-
 .../logbook-item/logbook-item.component.scss  |  8 ++
 .../logbook-item.component.spec.ts            | 86 ++++++++++++++++++-
 .../logbook-item/logbook-item.component.ts    | 85 ++++++++++++------
 4 files changed, 159 insertions(+), 30 deletions(-)

diff --git a/scilog/src/app/logbook/widgets/logbook-item/logbook-item.component.html b/scilog/src/app/logbook/widgets/logbook-item/logbook-item.component.html
index 27cc82fe..5d117843 100644
--- a/scilog/src/app/logbook/widgets/logbook-item/logbook-item.component.html
+++ b/scilog/src/app/logbook/widgets/logbook-item/logbook-item.component.html
@@ -1,4 +1,4 @@
-<div [ngSwitch]="viewOption" class="logbook-container" (resized)="onResized($event)">
+<div [ngSwitch]="viewOption" class="logbook-container" (resized)="onResized()">
   <!-- <div #searchBar>
     <button (click)="toggleSearch()" >
       Search <mat-icon>search</mat-icon>
@@ -23,10 +23,16 @@
     </div>
   </div>
 
+  <button mat-mini-fab class="float" (click)="scrollOnClickTo('end')" [@scrollButton] *ngIf="!isAt('end') && !isDescending">
+    <mat-icon>keyboard_double_arrow_down</mat-icon>
+  </button>
+  <button mat-mini-fab class="float" (click)="scrollOnClickTo('start')" [@scrollButton] *ngIf="!isAt('start') && isDescending">
+    <mat-icon>keyboard_double_arrow_up</mat-icon>
+  </button>
   <div *ngIf="!mobile && !isReadOnly" [ngClass]="isLightMode == true ? 'editor-container' : 'editor-container-no-border'">
     <div #editor class="content-editor"
       [ngStyle]="{'padding-left':dashboardView === true ? '0px' : '78px', 'width': dashboardView === true ? '97%' : '92%'}"
-      (resized)="onResized($event)">
+      (resized)="onResized()">
       <div class='accessSettings'>
         <span [ngStyle]="{'flex':'1 1 auto'}"></span>
         <span matTooltip="ownerGroup">
diff --git a/scilog/src/app/logbook/widgets/logbook-item/logbook-item.component.scss b/scilog/src/app/logbook/widgets/logbook-item/logbook-item.component.scss
index 52e9bdce..d4edbd06 100644
--- a/scilog/src/app/logbook/widgets/logbook-item/logbook-item.component.scss
+++ b/scilog/src/app/logbook/widgets/logbook-item/logbook-item.component.scss
@@ -188,3 +188,11 @@
   font-size: initial;
   vertical-align: middle;
 }
+
+.float {
+  position: absolute;
+  margin: -25px;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  opacity: 0.4;
+}
diff --git a/scilog/src/app/logbook/widgets/logbook-item/logbook-item.component.spec.ts b/scilog/src/app/logbook/widgets/logbook-item/logbook-item.component.spec.ts
index 23624035..16f4870c 100644
--- a/scilog/src/app/logbook/widgets/logbook-item/logbook-item.component.spec.ts
+++ b/scilog/src/app/logbook/widgets/logbook-item/logbook-item.component.spec.ts
@@ -21,6 +21,7 @@ import { ChangeStreamNotification } from '@shared/changestreamnotification.model
 import { LogbookDataService } from '@shared/remote-data.service';
 import { LogbookScrollService } from '@shared/logbook-scroll.service';
 import { AppConfigService } from 'src/app/app-config.service';
+import { Renderer2 } from '@angular/core';
 
 class ChangeStreamServiceMock {
 
@@ -192,7 +193,6 @@ describe('LogbookItemComponent', () => {
     }
   }];
 
-
   const activatedRouteMock = {
     parent: { url: of(queryParams) },
     snapshot: { queryParams: { id: '1234' } }
@@ -201,8 +201,11 @@ describe('LogbookItemComponent', () => {
 
     viewsSpy = jasmine.createSpyObj("ViewsService", ["getLogbookViews"]);
 
-    logbookItemDataServiceSpy = jasmine.createSpyObj("LogbookItemDataService", ["getDataBuffer", "uploadParagraph"]);
-    scrollServiceSpy = jasmine.createSpyObj("LogbookScrollService", ["initialize", "updateViewportEstimate", "remove", "appendToEOF", "relax", "isBOF", "isEOF", "prependToBOF"]);
+    logbookItemDataServiceSpy = jasmine.createSpyObj("LogbookItemDataService", ["uploadParagraph", "getCount"]);
+    scrollServiceSpy = jasmine.createSpyObj("LogbookScrollService", [
+      "initialize", "updateViewportEstimate", "remove", 
+      "appendToEOF", "relax", "prependToBOF", "goToSnippetIndex",
+    ]);
     scrollServiceSpy.appendToEOF.and.returnValue(of({}));
 
 
@@ -239,6 +242,7 @@ describe('LogbookItemComponent', () => {
     component.config = defaultConfig[1].config;
     component.configIndex = 1;
     component.logbookCount = 10;
+    component['renderer'] = {setStyle: () => true} as unknown as Renderer2;
 
     fixture.detectChanges();
     // views = TestBed.get(ViewsService);
@@ -508,7 +512,7 @@ describe('LogbookItemComponent', () => {
   })
 
   it('Should remove from index', () => {
-    component.config = { view: { order: ["defaultOrder DESC"] }, general: {}, filter: {} };
+    component.isDescending = true;
     expect(component["_indexOrder"](2)).toEqual(8);
   })
 
@@ -595,6 +599,80 @@ describe('LogbookItemComponent', () => {
     component["updateSnippetValues"](content, snippet);
     expect(snippet.dashboardName).toEqual(content.dashboardName);
     expect(snippet.parentId).toEqual(snippet.parentId);
+  });
+
+  [
+    {input: [0, 0], output: 0},
+    {input: [1, 0], output: 1},
+    {input: [0, 1], output: 1},
+    {input: [1, 1], output: 1},
+  ].forEach((t, i) => {
+    it(`should test onResized ${i}`, () => {
+      component._editorHeightRef = 0;
+      component._snippetHeightRef = 0;
+      component.snippetContainerRef = {nativeElement: {
+        parentElement: {parentElement: {parentElement: {parentElement: {offsetHeight: t.input[0]}}}}
+      }};
+      component.editorRef = {nativeElement: {offsetHeight: t.input[1]}};
+      const updateViewHeightsSpy = spyOn(component, 'updateViewHeights').and.callFake(() => true);
+      component.onResized();
+      expect(updateViewHeightsSpy).toHaveBeenCalledTimes(t.output);
+    })
   })
 
+  it('should test stillToScrollToEnd equals old formula', () => {
+    const autoScrollFraction = 0.4;
+    const element = {scrollHeight: 10, clientHeight: 5, scrollTop: 4} as Element;
+    const oldFormula = element.scrollHeight - element.scrollTop - element.clientHeight - autoScrollFraction * element.clientHeight;
+    expect(component['stillToScrollToEnd'](element, autoScrollFraction, 0)).toEqual(oldFormula);
+  });
+
+  it('should test stillToScrollToEnd >0', () => {
+    const element = {scrollHeight: 10, clientHeight: 3, scrollTop: 6} as Element;
+    expect(component['stillToScrollToEnd'](element, 0, 0)).toEqual(1);
+  });
+
+  it('should test stillToScrollToEnd <0', () => {
+    const element = {scrollHeight: 10, clientHeight: 10, scrollTop: 4} as Element;
+    expect(component['stillToScrollToEnd'](element, 0.1, 1)).toEqual(-6);
+  });
+
+  ['start', 'end'].forEach(t => {
+      it(`should test scrollTo ${t}`, async () => {
+      spyOn(component["logbookItemDataService"], "getCount").and.resolveTo({count: 10});
+      const goToSnippetIndexSpy = spyOn(component["logbookScrollService"], "goToSnippetIndex");
+      await component['scrollTo'](t as 'start' | 'end');
+      expect(goToSnippetIndexSpy).toHaveBeenCalled();
+      expect(goToSnippetIndexSpy.calls.mostRecent().args[0]).toEqual(t === 'end'? 9: 0);
+    });
+  });
+
+  ['start', 'end'].forEach(t => {
+    it(`should test isAt ${t}`, () => {
+      const stillToScrollToEndSpy = spyOn<any>(component, "stillToScrollToEnd");
+      component.isAt(t as 'start' | 'end');
+      expect(stillToScrollToEndSpy).toHaveBeenCalledTimes(t === 'end'? 1: 0);
+    });
+  });
+
+  [
+    {position: 'end', scrollPosition: 'notEmpty'},
+    {position: 'end', scrollPosition: undefined},
+    {position: 'start', scrollPosition: 'notEmpty'},
+    {position: 'start', scrollPosition: undefined},
+  ].forEach((t, i) => {
+    it(`should test scrollOnClickTo ${t.position}:${i}`, () => {
+      spyOnProperty(component["logbookScrollService"], 'isEOF', 'get').and.returnValue(t.scrollPosition);
+      spyOnProperty(component["logbookScrollService"], 'isBOF', 'get').and.returnValue(t.scrollPosition);
+      const scrollWindowToSpy = spyOn<any>(component, "scrollWindowTo").and.callFake(() => true);
+      const scrollToSpy = spyOn<any>(component, "scrollTo").and.callFake(() => true);
+      component.scrollOnClickTo(t.position as 'end' | 'start');
+      if (t.scrollPosition)
+        expect(scrollWindowToSpy).toHaveBeenCalledOnceWith(t.position);
+      else 
+        expect(scrollToSpy).toHaveBeenCalledOnceWith(t.position);
+    });
+  });
+
+
 });
diff --git a/scilog/src/app/logbook/widgets/logbook-item/logbook-item.component.ts b/scilog/src/app/logbook/widgets/logbook-item/logbook-item.component.ts
index dd7ebe3e..95c3c6f5 100644
--- a/scilog/src/app/logbook/widgets/logbook-item/logbook-item.component.ts
+++ b/scilog/src/app/logbook/widgets/logbook-item/logbook-item.component.ts
@@ -22,7 +22,6 @@ import { ActivatedRoute } from '@angular/router';
 import { ViewsService } from '@shared/views.service';
 import * as ClassicEditor from '@shared/ckeditor/ckeditor5/build/ckeditor';
 import { CKEditorComponent } from '@shared/ckeditor/ckeditor5/build/ckeditor';
-import { ResizedEvent } from 'angular-resize-event';
 import { MediaObserver } from '@angular/flex-layout';
 import { CK5ImageUploadAdapter } from '@shared/ckeditor/ck5-image-upload-adapter';
 import { extractNotificationMessage } from '@shared/add-content/add-content.component';
@@ -81,6 +80,12 @@ import { LinkType } from 'src/app/core/model/paragraphs';
       transition('start => end', animate('200ms ease-in')),
       transition('end => start', animate('200ms ease-in'))
     ]),
+    trigger('scrollButton', [
+      transition(':enter', [
+        style({opacity: 0}), 
+        animate('1ms 0.2s ease-out', style({opacity: 0.4}))
+      ])
+    ]),
   ]
 })
 export class LogbookItemComponent implements OnInit {
@@ -132,12 +137,14 @@ export class LogbookItemComponent implements OnInit {
   isReadOnly = false;
 
   _snippetHeightRef = 0;
+  _editorHeightRef = 0;
   showSearch = false
   showSearchExpanded = false;
 
   forceScrollToEnd = false;
 
   logbookCount = 0;
+  isDescending: boolean;
 
   @ViewChildren(SnippetComponent) childSnippets: QueryList<SnippetComponent>;
 
@@ -195,10 +202,10 @@ export class LogbookItemComponent implements OnInit {
       if (change[0].mqAlias === 'sm' || change[0].mqAlias === 'xs') {
         this.mobile = true;
         console.log("mobile");
-        this.updateViewHeights({});
+        this.updateViewHeights();
       } else {
         this.mobile = false;
-        this.updateViewHeights({});
+        this.updateViewHeights();
       }
     }));
   }
@@ -242,6 +249,7 @@ export class LogbookItemComponent implements OnInit {
       // console.log(config[this.configIndex].config);
       if (config != null) {
         this.config = config[this.configIndex].config;
+        this.isDescending = this.config?.view?.order[0]?.split(" ")?.[1] === 'DESC';
         this.targetId = this.config.filter.targetId;
         this.isReadOnly = this.config.general.readonly;
         await this.logbookScrollService.initialize(this.config);
@@ -370,7 +378,7 @@ export class LogbookItemComponent implements OnInit {
                   // pos = this.insertIntoSortedArray(notification.content);
                   // console.log(pos);
                   console.log(notification.content);
-                  let _descending = this.config.view.order[0].split(" ")[1] == 'DESC' ? true : false;
+                  let _descending = this.isDescending;
                   let _bof = _descending ? (notification.content.defaultOrder > this.childSnippets.toArray()[0].snippet.defaultOrder) : (notification.content.defaultOrder < this.childSnippets.toArray()[0].snippet.defaultOrder)
                   let _eof = _descending ? (notification.content.defaultOrder < this.childSnippets.toArray()[this.childSnippets.toArray().length - 1].snippet.defaultOrder) : (notification.content.defaultOrder > this.childSnippets.toArray()[this.childSnippets.toArray().length - 1].snippet.defaultOrder);
                   if ((this.logbookScrollService.isBOF) && (_bof)) {
@@ -386,7 +394,7 @@ export class LogbookItemComponent implements OnInit {
                     console.log("appending to EOF")
                     console.log(notification.content);
                     await this.logbookScrollService.appendToEOF(notification.content);
-                    let autoScrollEnabled = ((this.snippetContainerRef.nativeElement.scrollHeight - this.snippetContainerRef.nativeElement.scrollTop - this.snippetContainerRef.nativeElement.clientHeight < this.autoScrollFraction * this.snippetContainerRef.nativeElement.clientHeight)) ? true : false;
+                    let autoScrollEnabled = this.isAt('end', this.autoScrollFraction, 0);
                     console.log("autoscroll: ", autoScrollEnabled)
                     if (autoScrollEnabled || this.forceScrollToEnd) {
                       console.log("scheduling scrolling to EOF");
@@ -394,7 +402,7 @@ export class LogbookItemComponent implements OnInit {
                       // await this.logbookScrollService.isLoaded$;
                       setTimeout(() => {
                         console.log("scrolling to EOF");
-                        this.snippetContainerRef.nativeElement.scrollTop = this.snippetContainerRef.nativeElement.scrollHeight;
+                        this.scrollWindowTo('end');
                       }, 50);
                     }
                   } else {
@@ -404,17 +412,7 @@ export class LogbookItemComponent implements OnInit {
                     }
                     if (this.forceScrollToEnd) {
                       console.log("scrolling to new item")
-                      this.forceScrollToEnd = false;
-                      let count = await this.logbookItemDataService.getCount(this.config);
-                      await this.logbookScrollService.goToSnippetIndex(count.count - 1, () => {
-                        this.logbookScrollService.datasource.adapter.relax(() => {
-                          setTimeout(() => {
-                            this.snippetContainerRef.nativeElement.scrollTop = this.snippetContainerRef.nativeElement.scrollHeight;
-                          }, 50);
-                        });
-
-                      }
-                      );
+                      await this.scrollTo('end');
                     } else {
                       console.log(this.childSnippets.toArray());
                       await this.logbookScrollService.appendToEOF(notification.content);
@@ -442,6 +440,25 @@ export class LogbookItemComponent implements OnInit {
     }
   }
 
+  private async scrollTo(position: 'end' | 'start') {
+    let positionIndex = 0;
+    if (position === 'end') {
+      this.forceScrollToEnd = false;
+      positionIndex = (await this.logbookItemDataService.getCount(this.config)).count - 1;
+    }
+    await this.logbookScrollService.goToSnippetIndex(positionIndex, () => {
+      this.logbookScrollService.datasource.adapter.relax(() => {
+        setTimeout(() => {
+          this.scrollWindowTo(position);
+        }, 50);
+      });
+    });
+  }
+
+  private scrollWindowTo(position: 'end' | 'start') {
+    this.snippetContainerRef.nativeElement.scrollTop = position === 'end'? this.snippetContainerRef.nativeElement.scrollHeight: 0;
+  }
+
   private updateSnippetValues(content: Basesnippets, snippet: Basesnippets) {
     for (const key in content) {
       snippet[key] = content[key];
@@ -672,11 +689,13 @@ export class LogbookItemComponent implements OnInit {
     this.submitContent(notification);
   }
 
-  onResized(event: ResizedEvent) {
-    let _heightRef = this.snippetContainerRef.nativeElement.parentElement.parentElement.parentElement.parentElement.offsetHeight;
-    if (this._snippetHeightRef != _heightRef) {
+  onResized() {
+    const _heightRef = this.snippetContainerRef.nativeElement.parentElement.parentElement.parentElement.parentElement.offsetHeight;
+    const _editorHeight = this.editorRef?.nativeElement?.offsetHeight;
+    if (this._snippetHeightRef != _heightRef || this._editorHeightRef != _editorHeight) {
       this._snippetHeightRef = _heightRef;
-      this.updateViewHeights(event)
+      this._editorHeightRef = _editorHeight;
+      this.updateViewHeights();
     }
 
     // console.log(this.snippetContainerRef.nativeElement.parentElement.parentElement.parentElement.parentElement.offsetHeight);
@@ -686,7 +705,7 @@ export class LogbookItemComponent implements OnInit {
     // }, 10);
   }
 
-  updateViewHeights(event) {
+  updateViewHeights() {
     if (this.editorRef) {
       let offset = this.mobile ? 210 - 28 : (this.dashboardView ? 130 - 28 : 195 - 25);
       let snippetHeight: number;
@@ -704,7 +723,7 @@ export class LogbookItemComponent implements OnInit {
   ngAfterViewInit(): void {
     //Called after ngAfterContentInit when the component's view has been initialized. Applies to components only.
     //Add 'implements AfterViewInit' to the class.
-    this.updateViewHeights({});
+    this.updateViewHeights();
     this.cdr.detectChanges();
   }
 
@@ -751,6 +770,24 @@ export class LogbookItemComponent implements OnInit {
     })
   }
 
+  isAt(position: 'end' | 'start', scrollPortion = 0, offset = 1) {
+    const element = this.snippetContainerRef?.nativeElement;
+    if (element)
+      return position === 'end'? this.stillToScrollToEnd(element, scrollPortion, offset) <= 0: element.scrollTop <= offset;
+  }
+
+  private stillToScrollToEnd(element: Element, scrollPortion: number, offset: number) {
+    return element.scrollHeight - element.clientHeight * (1 + scrollPortion) - element.scrollTop - offset;
+  }
+
+  scrollOnClickTo(position: 'end' | 'start') {
+    const scrollServicePosition = position === 'end'? 'isEOF' : 'isBOF';
+    if (this.logbookScrollService[scrollServicePosition])
+      this.scrollWindowTo(position);
+    else
+      this.scrollTo(position);
+  }
+
   addContent(isMessage = false) {
     this.forceScrollToEnd = true;
     console.log(this.editorContentRef.editorInstance.prel_filestorage);
@@ -801,7 +838,7 @@ export class LogbookItemComponent implements OnInit {
   }
 
   private _indexOrder(i: number) {
-    if (this.config.view.order[0].split(" ")[1] == 'DESC') {
+    if (this.isDescending) {
       return this.logbookCount - i
     }
     return i + 1