Fix to Keep selection when exiting the gallery view

Signed-off-by: trivernis <trivernis@protonmail.com>

mediarepo-ui/src/app/components/file-gallery/file-gallery.component.html

@@ -1,5 +1,5 @@
 <div class="gallery-container" fxLayout="column">
-  <button mat-icon-button class="close-button" (click)="this.closeEvent.emit()">
+  <button mat-icon-button class="close-button" (click)="this.closeEvent.emit(this)">
     <mat-icon>close</mat-icon>
   </button>
   <div class="file-full-view" fxFlex="80%"

mediarepo-ui/src/app/components/file-gallery/file-gallery.component.ts

@@ -23,12 +23,12 @@ export class FileGalleryComponent implements OnChanges, OnInit {
   @Input() preselectedFile: File | undefined;
   @Output() fileSelectEvent = new EventEmitter<File | undefined>();
   @Output() fileDblClickEvent = new EventEmitter<File>();
-  @Output() closeEvent = new EventEmitter<void>();
+  @Output() closeEvent = new EventEmitter<FileGalleryComponent>();
   entries: Selectable<File>[] = [];
 
   @ViewChild("virtualScroll") virtualScroll!: CdkVirtualScrollViewport;
 
-  selectedFile: Selectable<File> | undefined;
+  public selectedFile: Selectable<File> | undefined;
   fileContentUrl: SafeResourceUrl | undefined;
   scaleWidth = false;
 

mediarepo-ui/src/app/components/file-grid/file-grid.component.html

@@ -1,4 +1,4 @@
-<cdk-virtual-scroll-viewport class="file-scroll" maxBufferPx="500" minBufferPx="500" itemSize="250">
+<cdk-virtual-scroll-viewport #virtualScrollGrid class="file-scroll" maxBufferPx="500" minBufferPx="500" itemSize="250">
   <div *cdkVirtualFor="let rowEntry of partitionedGridEntries">
     <div class="file-row">
       <app-file-grid-entry (clickEvent)="setSelectedFile($event.gridEntry)" (dblClickEvent)="fileDblClickEvent.emit($event.gridEntry.file)"

mediarepo-ui/src/app/components/file-grid/file-grid.component.ts

@@ -4,26 +4,30 @@ import {
   HostListener,
   Input, OnChanges,
   OnInit,
-  Output, QueryList, SimpleChanges, ViewChildren
+  Output, QueryList, SimpleChanges, ViewChild, ViewChildren
 } from '@angular/core';
 import {File} from "../../models/File";
 import {FileService} from "../../services/file/file.service";
 import {FileGridEntryComponent} from "./file-grid-entry/file-grid-entry.component";
 import {GridEntry} from "./file-grid-entry/GridEntry";
+import {CdkVirtualScrollViewport} from "@angular/cdk/scrolling";
 
 @Component({
   selector: 'app-file-grid',
   templateUrl: './file-grid.component.html',
   styleUrls: ['./file-grid.component.scss']
 })
-export class FileGridComponent implements OnChanges {
+export class FileGridComponent implements OnChanges, OnInit {
 
   @Input() files: File[] = [];
   @Input() columns: number = 6;
+  @Input() preselectedFile: File | undefined;
   @Output() fileDblClickEvent = new EventEmitter<File>();
   @Output() fileMultiselectEvent = new EventEmitter<File[]>();
   @Output() fileSelectEvent = new EventEmitter<File | undefined>();
 
+  @ViewChild("virtualScrollGrid") virtualScroll!: CdkVirtualScrollViewport;
+
   selectedEntries: GridEntry[] = [];
 
   private shiftClicked = false;
@@ -34,16 +38,63 @@ export class FileGridComponent implements OnChanges {
   constructor() {
   }
 
-  ngOnChanges(changes: SimpleChanges): void {
+  public ngOnInit(): void {
     this.gridEntries = this.files.map(file => {return {file, selected: false}});
     this.setPartitionedGridEntries();
   }
 
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes["files"]) {
+      this.gridEntries = this.files.map(file => {return {file, selected: false}});
+      this.setPartitionedGridEntries();
+    }
+  }
+
+  private handlePreselection() {
+    if (this.preselectedFile && this.selectedEntries.length === 0) {
+      const selectedEntry = this.gridEntries.find(e => e.file.hash == this.preselectedFile?.hash);
+      if (selectedEntry) {
+        this.setSelectedFile(selectedEntry);
+      }
+    }
+  }
+
+  private handleScrollToPreselection() {
+    if (this.preselectedFile && this.selectedEntries.length === 0) {
+      const rowIndex = this.partitionedGridEntries.findIndex(
+        r => r.findIndex(e => e.file.hash == this.preselectedFile?.hash) >= 0);
+      if (rowIndex >= 0) {
+        this.virtualScroll?.scrollToIndex(rowIndex);
+      }
+    }
+  }
+
   private setPartitionedGridEntries() {
     this.partitionedGridEntries = [];
+    this.selectedEntries = [];
+    let scrollToIndex = -1;
+    let selectedEntry: GridEntry | undefined = undefined;
 
     for (let i = 0; i < (Math.ceil(this.gridEntries.length / this.columns)); i++) {
-      this.partitionedGridEntries.push(this.gridEntries.slice(i * this.columns, Math.min(this.gridEntries.length, (i + 1) * this.columns)))
+      const entries = this.gridEntries.slice(i * this.columns, Math.min(this.gridEntries.length, (i + 1) * this.columns));
+      this.partitionedGridEntries.push(entries);
+      const preselectedEntry = entries.find(e => e.file.hash == this.preselectedFile?.hash);
+
+      if (preselectedEntry) {
+        scrollToIndex = i;
+        selectedEntry = preselectedEntry;
+      }
+    }
+    if (scrollToIndex >= 0 && this.preselectedFile && this.selectedEntries.length == 0) {
+      setTimeout(() => {  // add timeout to avoid being stuck in the update loop
+        if (this.virtualScroll) {
+          this.virtualScroll?.scrollToIndex(scrollToIndex);
+          if (selectedEntry) {
+            selectedEntry.selected = true;
+            this.selectedEntries = [selectedEntry];
+          }
+        }
+      }, 0);
     }
   }
 

mediarepo-ui/src/app/pages/home/search-page/search-page.component.html

@@ -22,10 +22,11 @@
       </div>
       <app-file-grid *ngIf="!this.showGallery" (fileDblClickEvent)="openGallery($event)" [files]="files"
                      (fileSelectEvent)="onFileSelect($event)"
+                     [preselectedFile]="this.preselectedFile"
                      (fileMultiselectEvent)="onFileMultiSelect($event)"
       ></app-file-grid>
       <app-file-gallery *ngIf="this.showGallery" [files]="files" (fileSelectEvent)="onFileSelect($event)"
                         (fileDblClickEvent)="openFile($event)" [preselectedFile]="this.preselectedFile"
-                        (closeEvent)="this.showGallery = false"></app-file-gallery>
+                        (closeEvent)="this.closeGallery($event.selectedFile?.data)"></app-file-gallery>
   </mat-drawer-content>
 </mat-drawer-container>

mediarepo-ui/src/app/pages/home/search-page/search-page.component.ts

@@ -104,6 +104,11 @@ export class SearchPageComponent implements OnInit {
     this.showGallery = true;
   }
 
+  async closeGallery(preselectedFile: File | undefined) {
+    this.preselectedFile = preselectedFile;
+    this.showGallery = false;
+  }
+
   private async openLightbox(file: File): Promise<void> {
     let url = await this.fileService.readFile(file);