Move gallery + grid to encapsulating file-multiview component

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

mediarepo-ui/src/app/app.module.ts

@@ -15,10 +15,10 @@ import {MatSnackBarModule} from "@angular/material/snack-bar";
 import {MatFormFieldModule} from "@angular/material/form-field";
 import {MatInputModule} from "@angular/material/input";
 import {ReactiveFormsModule} from "@angular/forms";
-import {FileGridComponent} from './components/file-grid/file-grid.component';
+import {FileGridComponent} from './components/file-multiview/file-grid/file-grid.component';
 import {MatSidenavModule} from "@angular/material/sidenav";
 import {MatGridListModule} from "@angular/material/grid-list";
-import {FileGridEntryComponent} from './components/file-grid/file-grid-entry/file-grid-entry.component';
+import {FileGridEntryComponent} from './components/file-multiview/file-grid/file-grid-entry/file-grid-entry.component';
 import {MatProgressBarModule} from "@angular/material/progress-bar";
 import {MatPaginatorModule} from "@angular/material/paginator";
 import {ScrollingModule} from "@angular/cdk/scrolling";
@@ -32,8 +32,8 @@ import {MatRippleModule} from "@angular/material/core";
 import {SortDialogComponent} from './components/file-search/sort-dialog/sort-dialog.component';
 import {MatDialogModule} from "@angular/material/dialog";
 import {MatSelectModule} from "@angular/material/select";
-import {FileGalleryComponent} from './components/file-gallery/file-gallery.component';
-import {FileGalleryEntryComponent} from './components/file-gallery/file-gallery-entry/file-gallery-entry.component';
+import {FileGalleryComponent} from './components/file-multiview/file-gallery/file-gallery.component';
+import {FileGalleryEntryComponent} from './components/file-multiview/file-gallery/file-gallery-entry/file-gallery-entry.component';
 import {MatProgressSpinnerModule} from "@angular/material/progress-spinner";
 import {BlockUIModule} from "primeng/blockui";
 import {PanelModule} from "primeng/panel";
@@ -58,15 +58,16 @@ import {TagFilterListItemComponent} from './components/file-search/filter-dialog
 import {TagInputComponent} from './components/inputs/tag-input/tag-input.component';
 import {ContextMenuComponent} from './components/context-menu/context-menu.component';
 import {FileContextMenuComponent} from './components/context-menu/file-context-menu/file-context-menu.component';
-import {ContentViewerComponent} from './components/file-gallery/content-viewer/content-viewer.component';
-import {ImageViewerComponent} from './components/file-gallery/content-viewer/image-viewer/image-viewer.component';
-import {VideoViewerComponent} from './components/file-gallery/content-viewer/video-viewer/video-viewer.component';
+import {ContentViewerComponent} from './components/file-multiview/file-gallery/content-viewer/content-viewer.component';
+import {ImageViewerComponent} from './components/file-multiview/file-gallery/content-viewer/image-viewer/image-viewer.component';
+import {VideoViewerComponent} from './components/file-multiview/file-gallery/content-viewer/video-viewer/video-viewer.component';
 import {HttpClientModule} from "@angular/common/http";
-import { AudioViewerComponent } from './components/file-gallery/content-viewer/audio-viewer/audio-viewer.component';
+import { AudioViewerComponent } from './components/file-multiview/file-gallery/content-viewer/audio-viewer/audio-viewer.component';
 import { BusyIndicatorComponent } from './components/busy-indicator/busy-indicator.component';
 import { FileThumbnailComponent } from './components/file-thumbnail/file-thumbnail.component';
 import {NgIconsModule} from "@ng-icons/core";
 import * as materialIcons from "@ng-icons/material-icons";
+import { FileMultiviewComponent } from './components/file-multiview/file-multiview.component';
 
 @NgModule({
   declarations: [
@@ -102,6 +103,7 @@ import * as materialIcons from "@ng-icons/material-icons";
     AudioViewerComponent,
     BusyIndicatorComponent,
     FileThumbnailComponent,
+    FileMultiviewComponent,
   ],
   imports: [
     BrowserModule,

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

@@ -8,11 +8,11 @@ import {
   SimpleChanges, ViewChild
 } from '@angular/core';
 import {SafeResourceUrl} from "@angular/platform-browser";
-import {File} from "../../../models/File";
-import {FileService} from "../../../services/file/file.service";
-import {FileHelper} from "../../../services/file/file.helper";
-import {ErrorBrokerService} from "../../../services/error-broker/error-broker.service";
-import {BusyIndicatorComponent} from "../../busy-indicator/busy-indicator.component";
+import {File} from "../../../../models/File";
+import {FileService} from "../../../../services/file/file.service";
+import {FileHelper} from "../../../../services/file/file.helper";
+import {ErrorBrokerService} from "../../../../services/error-broker/error-broker.service";
+import {BusyIndicatorComponent} from "../../../busy-indicator/busy-indicator.component";
 
 type ContentType = "image" | "video" | "audio" | "other";
 

mediarepo-ui/src/app/components/file-multiview/file-gallery/file-gallery-entry/file-gallery-entry.component-theme.scss

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@use '~@angular/material' as mat;
+@use '../../../../../../node_modules/@angular/material/index' as mat;
 
 @mixin color($theme) {
   $color-config: mat.get-color-config($theme);

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

@@ -7,11 +7,11 @@ import {
   Output,
   SimpleChanges
 } from '@angular/core';
-import {File} from "../../../models/File";
-import {FileService} from "../../../services/file/file.service";
+import {File} from "../../../../models/File";
+import {FileService} from "../../../../services/file/file.service";
 import {DomSanitizer, SafeResourceUrl} from "@angular/platform-browser";
-import {ErrorBrokerService} from "../../../services/error-broker/error-broker.service";
-import {Selectable} from "../../../models/Selectable";
+import {ErrorBrokerService} from "../../../../services/error-broker/error-broker.service";
+import {Selectable} from "../../../../models/Selectable";
 
 @Component({
   selector: 'app-file-gallery-entry',

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

@@ -9,12 +9,12 @@ import {
   SimpleChanges,
   ViewChild
 } from '@angular/core';
-import {File} from "../../models/File";
-import {FileService} from "../../services/file/file.service";
+import {File} from "../../../models/File";
+import {FileService} from "../../../services/file/file.service";
 import {SafeResourceUrl} from "@angular/platform-browser";
-import {Selectable} from "../../models/Selectable";
+import {Selectable} from "../../../models/Selectable";
 import {CdkVirtualScrollViewport} from "@angular/cdk/scrolling";
-import {TabService} from "../../services/tab/tab.service";
+import {TabService} from "../../../services/tab/tab.service";
 
 @Component({
   selector: 'app-file-gallery',

mediarepo-ui/src/app/components/file-multiview/file-grid/file-grid-entry/GridEntry.ts

@@ -1,4 +1,4 @@
-import {File} from "../../../models/File";
+import {File} from "../../../../models/File";
 
 export type GridEntry = {
   file: File,

mediarepo-ui/src/app/components/file-multiview/file-grid/file-grid-entry/file-grid-entry.component-theme.scss

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@use '~@angular/material' as mat;
+@use '../../../../../../node_modules/@angular/material/index' as mat;
 
 @mixin color($theme) {
   $color-config: mat.get-color-config($theme);

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

@@ -9,9 +9,9 @@ import {
   SimpleChanges,
   ViewChild
 } from '@angular/core';
-import {File} from "../../../models/File";
-import {FileService} from "../../../services/file/file.service";
-import {ErrorBrokerService} from "../../../services/error-broker/error-broker.service";
+import {File} from "../../../../models/File";
+import {FileService} from "../../../../services/file/file.service";
+import {ErrorBrokerService} from "../../../../services/error-broker/error-broker.service";
 import {SafeResourceUrl} from "@angular/platform-browser";
 import {GridEntry} from "./GridEntry";
 

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

@@ -5,7 +5,7 @@
       <div class="file-row">
         <app-file-grid-entry
           *ngFor="let gridEntry of rowEntry" (clickEvent)="setSelectedFile($event.gridEntry)"
-          (dblClickEvent)="fileDblClickEvent.emit($event.gridEntry.file)"
+          (dblClickEvent)="fileOpenEvent.emit($event.gridEntry.file)"
           (contextmenu)="fileContextMenu.onContextMenu($event, gridEntry.file)"
           [gridEntry]="gridEntry"></app-file-grid-entry>
       </div>

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

@@ -10,12 +10,12 @@ import {
   SimpleChanges,
   ViewChild
 } from '@angular/core';
-import {File} from "../../models/File";
+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";
-import {FileService} from "../../services/file/file.service";
+import {TabService} from "../../../services/tab/tab.service";
+import {FileService} from "../../../services/file/file.service";
 
 @Component({
   selector: 'app-file-grid',
@@ -27,9 +27,8 @@ 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>();
+  @Output() fileOpenEvent = new EventEmitter<File>();
+  @Output() fileSelectEvent = new EventEmitter<File[]>();
 
   @ViewChild("virtualScrollGrid") virtualScroll!: CdkVirtualScrollViewport;
   @ViewChild("galleryWrapper") galleryWrapper!: ElementRef<HTMLDivElement>;
@@ -90,15 +89,7 @@ export class FileGridComponent implements OnChanges, OnInit {
         this.selectedEntries.push(clickedEntry);
       }
     }
-    if (this.selectedEntries.length == 1) {
-      this.fileSelectEvent.emit(
-        this.selectedEntries.map(entry => entry.file)[0]);
-    } else if (this.selectedEntries.length == 0 && previousSelectionSize == 1) {
-      this.fileSelectEvent.emit(undefined);
-    } else {
-      this.fileMultiselectEvent.emit(
-        this.selectedEntries.map(entry => entry.file));
-    }
+    this.fileSelectEvent.emit(this.selectedEntries.map(g => g.file));
   }
 
   private setPartitionedGridEntries() {

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

@@ -0,0 +1,4 @@
+<app-file-grid *ngIf="this.mode === 'grid'" [files]="this.files" [preselectedFile]="this.preselectedFile"
+               (fileSelectEvent)="this.onFileSelect($event)" (fileOpenEvent)="this.onFileOpen($event)"></app-file-grid>
+<app-file-gallery *ngIf="this.mode === 'gallery'" [files]="this.files" [preselectedFile]="this.preselectedFile"
+                  (fileSelectEvent)="this.onSinglefileSelect($event)" (closeEvent)="this.mode = 'grid'"></app-file-gallery>

mediarepo-ui/src/app/components/file-multiview/file-multiview.component.scss

@@ -0,0 +1,4 @@
+app-file-gallery, app-file-grid {
+  width: 100%;
+  height: 100%;
+}

mediarepo-ui/src/app/components/file-multiview/file-multiview.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FileMultiviewComponent } from './file-multiview.component';
+
+describe('FileMultiviewComponent', () => {
+  let component: FileMultiviewComponent;
+  let fixture: ComponentFixture<FileMultiviewComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ FileMultiviewComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FileMultiviewComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,43 @@
+import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {File} from "../../models/File";
+
+@Component({
+  selector: 'app-file-multiview',
+  templateUrl: './file-multiview.component.html',
+  styleUrls: ['./file-multiview.component.scss']
+})
+export class FileMultiviewComponent {
+
+  @Input() files!: File[];
+  @Input() mode: "grid" | "gallery" = "grid";
+
+  @Output() fileOpenEvent = new EventEmitter<File>();
+  @Output() fileSelectEvent = new EventEmitter<File[]>();
+
+  public selectedFiles: File[] = [];
+  public preselectedFile: File | undefined;
+
+  constructor() { }
+
+  public onFileSelect(files: File[]): void {
+    this.selectedFiles = files;
+    this.preselectedFile = files[0];
+    this.fileSelectEvent.emit(this.selectedFiles);
+  }
+
+  public onSinglefileSelect(file: File | undefined): void {
+    if (file) {
+      this.selectedFiles = [file];
+      this.preselectedFile = file;
+    } else {
+      this.selectedFiles = [];
+    }
+    this.fileSelectEvent.emit(this.selectedFiles);
+  }
+
+  public onFileOpen(file: File): void {
+    this.preselectedFile = file;
+    this.mode = "gallery";
+    this.fileOpenEvent.emit(file);
+  }
+}

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

@@ -6,16 +6,7 @@
   </mat-drawer>
   <mat-drawer-content>
     <app-busy-indicator [busy]="contentLoading" [blurBackground]="true">
-      <app-file-grid (fileDblClickEvent)="openGallery($event)" (fileMultiselectEvent)="onFileMultiSelect($event)"
-                     (fileSelectEvent)="onFileSelect($event)"
-                     *ngIf="!this.showGallery"
-                     [files]="files"
-                     [preselectedFile]="this.preselectedFile"
-      ></app-file-grid>
-      <app-file-gallery (closeEvent)="this.closeGallery($event.selectedFile?.data)"
-                        (fileSelectEvent)="onFileSelect($event)" *ngIf="this.showGallery"
-                        [files]="files"
-                        [preselectedFile]="this.preselectedFile"></app-file-gallery>
+      <app-file-multiview (fileSelectEvent)="this.onFileSelect($event)" [files]="this.files"></app-file-multiview>
     </app-busy-indicator>
   </mat-drawer-content>
 </mat-drawer-container>

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

@@ -20,11 +20,7 @@ mat-drawer-container {
   overflow: hidden;
 }
 
-app-file-grid {
-  padding: 0;
-}
-
-app-file-gallery, app-files-tab-sidebar {
+app-file-multiview {
   padding: 0;
   height: 100%;
   width: 100%;

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

@@ -13,8 +13,6 @@ export class FilesTabComponent implements OnInit {
 
 
   files: File[] = [];
-  showGallery = false;
-  preselectedFile: File | undefined;
   contentLoading = false;
   selectedFiles: File[] = [];
 
@@ -30,26 +28,7 @@ export class FilesTabComponent implements OnInit {
     });
   }
 
-  async onFileMultiSelect(files: File[]) {
+  async onFileSelect(files: File[]) {
     this.selectedFiles = files;
   }
-
-
-  async onFileSelect(file: File | undefined) {
-    if (file) {
-      this.selectedFiles = [file];
-    } else {
-      this.selectedFiles = [];
-    }
-  }
-
-  async openGallery(preselectedFile: File) {
-    this.preselectedFile = preselectedFile;
-    this.showGallery = true;
-  }
-
-  async closeGallery(preselectedFile: File | undefined) {
-    this.preselectedFile = preselectedFile;
-    this.showGallery = false;
-  }
 }

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

@@ -3,6 +3,6 @@
     <app-import-tab-sidebar (fileImported)="this.addFileFromImport($event)" (importFinished)="this.refreshFileView()"></app-import-tab-sidebar>
   </mat-drawer>
   <mat-drawer-content>
-    <app-file-grid #fileGrid [files]="this.files" ></app-file-grid>
+    <app-file-multiview [files]="this.files" ></app-file-multiview>
   </mat-drawer-content>
 </mat-drawer-container>

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

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

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

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

mediarepo-ui/src/styles.scss

@@ -1,9 +1,9 @@
 @use 'sass:map';
 @use "~@angular/material" as mat;
 @use 'src/app/app.component-theme' as app;
-@use 'src/app/components/file-grid/file-grid-entry/file-grid-entry.component-theme' as file-grid-entry;
+@use 'app/components/file-multiview/file-grid/file-grid-entry/file-grid-entry.component-theme' as file-grid-entry;
 @use 'src/app/components/file-search/file-search.component-theme' as file-search;
-@use "src/app/components/file-gallery/file-gallery-entry/file-gallery-entry.component-theme" as gallery-entry;
+@use "app/components/file-multiview/file-gallery/file-gallery-entry/file-gallery-entry.component-theme" as gallery-entry;
 
 @include mat.core();