Fix resizing issues with filegrid and gallery

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

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

@@ -16,6 +16,7 @@ import {SafeResourceUrl} from "@angular/platform-browser";
 import {Selectable} from "../../models/Selectable";
 import {CdkVirtualScrollViewport} from "@angular/cdk/scrolling";
 import {CdkDragMove} from "@angular/cdk/drag-drop";
+import {TabService} from "../../services/tab/tab.service";
 
 @Component({
   selector: 'app-file-gallery',
@@ -42,7 +43,8 @@ export class FileGalleryComponent implements OnChanges, OnInit {
   public imagePosition = {x: 0, y: 0};
   public mouseInImageView = false;
 
-  constructor(private fileService: FileService) {
+  constructor(private tabService: TabService, private fileService: FileService) {
+    tabService.selectedTab.subscribe(() => this.adjustElementSizes());
   }
 
   /**
@@ -56,25 +58,31 @@ export class FileGalleryComponent implements OnChanges, OnInit {
       this.selectedFile?.unselect();
       entry.select();
       this.selectedFile = entry;
-      const selectedIndex = this.entries.indexOf(entry);
-      //this.virtualScroll.scrollToIndex(, "smooth");
       await this.loadSelectedFile();
 
       if (this.virtualScroll) {
-        const viewportSize = this.virtualScroll.getViewportSize();
+        this.scrollToSelection();
-        const indexAdjustment = (viewportSize / 260) / 2; // adjustment to have the selected item centered
-        this.virtualScroll.scrollToIndex(
-          Math.max(selectedIndex - indexAdjustment, 0), "smooth");
-
-        if (selectedIndex > indexAdjustment) {
-          this.virtualScroll.scrollToOffset(
-            this.virtualScroll.measureScrollOffset("left") + 130, "smooth");
-        }
       }
+
       this.fileSelectEvent.emit(this.selectedFile.data);
     }
   }
 
+  private scrollToSelection(): void {
+    if (this.selectedFile) {
+      const selectedIndex = this.entries.indexOf(this.selectedFile);
+      const viewportSize = this.virtualScroll.getViewportSize();
+      const indexAdjustment = (viewportSize / 260) / 2; // adjustment to have the selected item centered
+      this.virtualScroll.scrollToIndex(
+        Math.max(selectedIndex - indexAdjustment, 0), "smooth");
+
+      if (selectedIndex > indexAdjustment) {
+        this.virtualScroll.scrollToOffset(
+          this.virtualScroll.measureScrollOffset("left") + 130, "smooth");
+      }
+    }
+  }
+
   /**
    * Loads the content url of the selected file
    * @returns {Promise<void>}
@@ -192,4 +200,11 @@ export class FileGalleryComponent implements OnChanges, OnInit {
     }
     return undefined;
   }
+
+  public adjustElementSizes(): void {
+    if (this.virtualScroll) {
+      this.virtualScroll.checkViewportSize();
+      this.scrollToSelection();
+    }
+  }
 }

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

@@ -14,6 +14,7 @@ import {File} from "../../models/File";
 import {FileGridEntryComponent} from "./file-grid-entry/file-grid-entry.component";
 import {GridEntry} from "./file-grid-entry/GridEntry";
 import {CdkVirtualScrollViewport} from "@angular/cdk/scrolling";
+import {TabService} from "../../services/tab/tab.service";
 
 @Component({
   selector: 'app-file-grid',
@@ -38,7 +39,8 @@ export class FileGridComponent implements OnChanges, OnInit {
   private ctrlClicked = false;
   private gridEntries: GridEntry[] = []
 
-  constructor() {
+  constructor(private tabService: TabService) {
+    tabService.selectedTab.subscribe(() => this.adjustElementSizes());
   }
 
   public ngOnInit(): void {
@@ -181,4 +183,10 @@ export class FileGridComponent implements OnChanges, OnInit {
         break;
     }
   }
+
+  public adjustElementSizes(): void {
+    if (this.virtualScroll) {
+      this.virtualScroll.checkViewportSize();
+    }
+  }
 }

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

@@ -1,5 +1,5 @@
 <div id="content">
-  <mat-tab-group #tabGroup>
+  <mat-tab-group #tabGroup (selectedTabChange)="this.onTabSelectionChange($event)">
     <mat-tab label="Repositories">
       <app-repositories-tab></app-repositories-tab>
     </mat-tab>

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

@@ -1,8 +1,9 @@
 import {Component, OnInit, ViewChild} from '@angular/core';
 import {Repository} from "../../models/Repository";
 import {RepositoryService} from "../../services/repository/repository.service";
-import {MatTabGroup} from "@angular/material/tabs";
+import {MatTabChangeEvent, MatTabGroup} from "@angular/material/tabs";
 import {TagService} from "../../services/tag/tag.service";
+import {TabService} from "../../services/tab/tab.service";
 
 @Component({
   selector: 'app-home',
@@ -16,8 +17,11 @@ export class HomeComponent implements OnInit {
   @ViewChild("tabGroup") tabGroup!: MatTabGroup;
 
 
-  constructor(private repoService: RepositoryService, private tagService: TagService) {
+  constructor(
-  }
+    private tabService: TabService,
+    private repoService: RepositoryService,
+    private tagService: TagService)
+  {}
 
   public async ngOnInit(): Promise<void> {
     this.selectedRepository = this.repoService.selectedRepository.getValue();
@@ -42,4 +46,8 @@ export class HomeComponent implements OnInit {
   async loadRepoData() {
     await this.tagService.loadTags();
   }
+
+  public onTabSelectionChange(event: MatTabChangeEvent): void {
+    this.tabService.setSelectedTab(event.index);
+  }
 }

mediarepo-ui/src/app/pages/home/import-tab/import-tab.component.html

@@ -1,8 +1,8 @@
-<mat-drawer-container>
+<mat-drawer-container autosize>
   <mat-drawer disableClose="true" mode="side" opened>
     <app-import-tab-sidebar (fileImported)="this.addFileFromImport($event)" (importFinished)="this.refreshFileView()"></app-import-tab-sidebar>
   </mat-drawer>
   <mat-drawer-content>
-    <app-file-grid [files]="this.files" ></app-file-grid>
+    <app-file-grid #fileGrid [files]="this.files" ></app-file-grid>
   </mat-drawer-content>
 </mat-drawer-container>

mediarepo-ui/src/app/pages/home/import-tab/import-tab.component.scss

@@ -16,8 +16,12 @@ mat-drawer {
   width: 25%;
 }
 
-app-import-tab-sidebar, app-file-gallery {
+app-import-tab-sidebar, app-file-grid {
   height: 100%;
   width: 100%;
   margin: 0;
 }
+
+app-file-grid {
+  display: block;
+}

mediarepo-ui/src/app/pages/home/import-tab/import-tab.component.ts

@@ -1,6 +1,7 @@
-import {Component} from '@angular/core';
+import {Component, ViewChild} from '@angular/core';
 import {File} from "../../../models/File";
 import {FileService} from "../../../services/file/file.service";
+import {FileGridComponent} from "../../../components/file-grid/file-grid.component";
 
 @Component({
   selector: 'app-import-tab',
@@ -11,6 +12,8 @@ export class ImportTabComponent {
 
   public files: File[] = [];
 
+  @ViewChild("fileGrid") fileGrid!: FileGridComponent;
+
   constructor(private fileService: FileService) {
   }
 

mediarepo-ui/src/app/services/tab/tab.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { TabService } from './tab.service';
+
+describe('TabService', () => {
+  let service: TabService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(TabService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

mediarepo-ui/src/app/services/tab/tab.service.ts

@@ -0,0 +1,15 @@
+import { Injectable } from '@angular/core';
+import {BehaviorSubject} from "rxjs";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class TabService {
+
+  public selectedTab = new BehaviorSubject<number>(0);
+  constructor() { }
+
+  public setSelectedTab(index: number) {
+    this.selectedTab.next(index);
+  }
+}