Fix deleted files not disappearing from client view

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

mediarepo-ui/src/app/components/core/core.component.html

@@ -1,14 +1,14 @@
 <div id="content">
-    <mat-tab-group #tabGroup (selectedTabChange)="this.onTabSelectionChange($event)" class="main-tab-group"
+    <mat-tab-group #tabGroup (selectedTabChange)="this.onTabSelectionChange($event)" animationDuration="0"
-                   animationDuration="0">
+                   class="main-tab-group">
         <mat-tab [label]="this.selectedRepository? 'RepositoryData' : 'Repositories'">
             <app-repositories-tab></app-repositories-tab>
         </mat-tab>
         <mat-tab *ngFor="let tab of tabs">
             <ng-template mat-tab-label>
-                <div class="tab-label-div" (click)="this.onMouseClickTabLabel(tab, $event)">
+                <div (click)="this.onMouseClickTabLabel(tab, $event)" class="tab-label-div">
                     {{tab.category}}
-                    <button class="close-tab-button" mat-icon-button (click)="this.closeTab(tab)">
+                    <button (click)="this.closeTab(tab)" class="close-tab-button" mat-icon-button>
                         <ng-icon name="mat-close"></ng-icon>
                     </button>
                 </div>
@@ -21,13 +21,13 @@
         <mat-tab *ngIf="this.newTab" label="New Tab">
             <div class="new-tab-content">
                 Select the tab type
-                <button mat-flat-button (click)="this.addFilesTab()" color="primary">Files</button>
+                <button (click)="this.addFilesTab()" color="primary" mat-flat-button>Files</button>
-                <button mat-flat-button (click)="this.addImportTab()" color="primary">Import</button>
+                <button (click)="this.addImportTab()" color="primary" mat-flat-button>Import</button>
             </div>
         </mat-tab>
         <mat-tab *ngIf="this.selectedRepository" disabled>
             <ng-template mat-tab-label>
-                <button class="new-tab-button" mat-icon-button (click)="this.addTab()">
+                <button (click)="this.addTab()" class="new-tab-button" mat-icon-button>
                     <ng-icon name="mat-plus"></ng-icon>
                 </button>
             </ng-template>

mediarepo-ui/src/app/components/core/files-tab/files-tab.component.html

@@ -1,12 +1,17 @@
-<mat-drawer-container autosize appInputReceiver (keyDownEvent)="this.onKeydown($event)">
+<mat-drawer-container (keyDownEvent)="this.onKeydown($event)" appInputReceiver autosize>
     <mat-drawer disableClose mode="side" opened>
-        <app-files-tab-sidebar [state]="this.state" (searchEndEvent)="this.contentLoading = false;"
+        <app-files-tab-sidebar (searchEndEvent)="this.contentLoading = false;" (searchStartEvent)="this.contentLoading = true;"
-                               (searchStartEvent)="this.contentLoading = true;"
+                               [selectedFiles]="this.selectedFiles"
-                               [selectedFiles]="this.selectedFiles"></app-files-tab-sidebar>
+                               [state]="this.state"></app-files-tab-sidebar>
     </mat-drawer>
     <mat-drawer-content>
         <app-busy-indicator [blurBackground]="true" [busy]="contentLoading" [darkenBackground]="true">
-            <app-file-multiview [mode]="state.mode.value" (modeChangeEvent)="state.mode.next($event)" (fileSelectEvent)="this.onFileSelect($event)" [files]="this.files" [preselectedFile]="this.getStateSelectedFile()"></app-file-multiview>
+            <app-file-multiview (fileSelectEvent)="this.onFileSelect($event)"
+                                (modeChangeEvent)="state.mode.next($event)"
+                                [files]="this.files"
+                                [mode]="state.mode.value"
+                                [preselectedFile]="this.getStateSelectedFile()"
+                                [tabState]="this.state"></app-file-multiview>
         </app-busy-indicator>
     </mat-drawer-content>
 </mat-drawer-container>

mediarepo-ui/src/app/components/shared/app-base/file-action-base/file-action-base.component.ts

@@ -79,7 +79,7 @@ export class FileActionBaseComponent {
         }
     }
 
-    public async deletePermanently(files: File[]) {
+    public async deletePermanently(files: File[]): Promise<boolean> {
         if (files.length === 1) {
             const deletionConfirmed = await this.openConfirmDialog(
                 "Confirm deletion",
@@ -90,6 +90,7 @@ export class FileActionBaseComponent {
             );
             if (deletionConfirmed) {
                 await this.errorBroker.try(() => this.fileService.deleteFile(files[0].id));
+                return true;
             }
         } else {
             const deletionConfirmed = await this.openConfirmDialog(
@@ -104,8 +105,10 @@ export class FileActionBaseComponent {
                     files,
                     (file) => this.errorBroker.try(() => this.fileService.deleteFile(file.id))
                 );
+                return true;
             }
         }
+        return false;
     }
 
     protected getImageThumbnail(file: File): SafeResourceUrl | undefined {

mediarepo-ui/src/app/components/shared/file/file-context-menu/file-context-menu.component.html

@@ -10,8 +10,9 @@
                 *ngIf="actionDelete"
                 mat-menu-item>Delete
         </button>
-        <button (click)="this.deletePermanently(this.files)" *ngIf="actionDeletePermantently" mat-menu-item>Delete
+        <button (click)="this.deleteFilesPermanently()"
-            permanently
+                *ngIf="actionDeletePermantently"
+                mat-menu-item>Delete permanently
         </button>
         <button (click)="this.updateStatus(this.files, 'Archived')" *ngIf="actionRestore" mat-menu-item>Restore</button>
 

mediarepo-ui/src/app/components/shared/file/file-context-menu/file-context-menu.component.ts

@@ -30,7 +30,7 @@ export class FileContextMenuComponent extends FileActionBaseComponent implements
     public actionDeletePermantently = false;
 
     @ViewChild("contextMenu") contextMenu!: ContextMenuComponent;
-    @Output() fileUpdate = new EventEmitter<void>();
+    @Output() fileDeleted = new EventEmitter<File[]>();
 
     constructor(fileService: FileService, errorBroker: ErrorBrokerService, dialog: MatDialog) {
         super(dialog, errorBroker, fileService);
@@ -48,6 +48,14 @@ export class FileContextMenuComponent extends FileActionBaseComponent implements
         this.contextMenu.onContextMenu(event);
     }
 
+    public async deleteFilesPermanently() {
+        const deleted = await this.deletePermanently(this.files);
+
+        if (deleted) {
+            this.fileDeleted.emit(this.files);
+        }
+    }
+
     private applyStatus() {
         this.actionDeletePermantently = true;
         this.actionDelete = this.actionArchive = this.actionImported = this.actionRestore = false;

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

@@ -20,4 +20,4 @@
         </cdk-virtual-scroll-viewport>
     </div>
 </div>
-<app-file-context-menu #fileContextMenu></app-file-context-menu>
+<app-file-context-menu #fileContextMenu (fileDeleted)="this.fileDeleted.emit($event)"></app-file-context-menu>

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

@@ -31,11 +31,13 @@ export class FileGalleryComponent implements OnChanges, OnInit, AfterViewInit {
     @Output() fileDblClick = new EventEmitter<File>();
     @Output() appClose = new EventEmitter<FileGalleryComponent>();
     @Output() fileDelete = new EventEmitter<File>();
-    entries: Selectable<File>[] = [];
+    @Output() fileDeleted = new EventEmitter<File[]>();
 
     @ViewChild("virtualScroll") virtualScroll!: CdkVirtualScrollViewport;
+
     @ViewChild("inner") inner!: ElementRef<HTMLDivElement>;
 
+    public entries: Selectable<File>[] = [];
     public selectedFile: Selectable<File> | undefined;
     public fileContentUrl: SafeResourceUrl | undefined;
 

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

@@ -18,7 +18,7 @@
     </cdk-virtual-scroll-viewport>
 
 </div>
-<app-file-context-menu #fileContextMenu>
+<app-file-context-menu #fileContextMenu (fileDeleted)="this.fileDeleted.emit($event)">
     <button (click)="this.fileOpen.emit(fileContextMenu.files[0])"
             *ngIf="fileContextMenu.files.length === 1"
             content-before=""

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

@@ -31,6 +31,7 @@ export class FileGridComponent implements OnChanges, OnInit, AfterViewInit {
     @Output() fileOpen = new EventEmitter<File>();
     @Output() fileSelect = new EventEmitter<File[]>();
     @Output() fileDelete = new EventEmitter<File[]>();
+    @Output() fileDeleted = new EventEmitter<File[]>();
 
     @ViewChild("virtualScrollGrid") virtualScroll!: CdkVirtualScrollViewport;
     @ViewChild("inner") inner!: ElementRef<HTMLDivElement>;

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

@@ -1,10 +1,13 @@
 <app-file-grid (fileDelete)="this.onFileDelete($event)"
+               (fileDeleted)="this.onFileDeleted($event)"
                (fileOpen)="this.onFileOpen($event)"
                (fileSelect)="this.onFileSelect($event)"
                *ngIf="this.mode === 'grid'"
                [files]="this.files"
                [preselectedFile]="this.preselectedFile"></app-file-grid>
-<app-file-gallery (appClose)="this.setMode('grid')" (fileDelete)="this.onFileDelete([$event])"
+<app-file-gallery (appClose)="this.setMode('grid')"
+                  (fileDelete)="this.onFileDelete([$event])"
+                  (fileDeleted)="this.onFileDeleted($event)"
                   (fileSelect)="this.onSingleFileSelect($event)"
                   *ngIf="this.mode === 'gallery'"
                   [files]="this.files"

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

@@ -6,6 +6,7 @@ import {FileActionBaseComponent} from "../../app-base/file-action-base/file-acti
 import {MatDialog} from "@angular/material/dialog";
 import {ErrorBrokerService} from "../../../../services/error-broker/error-broker.service";
 import {FileService} from "../../../../services/file/file.service";
+import {TabState} from "../../../../models/TabState";
 
 @Component({
     selector: "app-file-multiview",
@@ -16,6 +17,7 @@ export class FileMultiviewComponent extends FileActionBaseComponent implements A
 
     @Input() files!: File[];
     @Input() mode: "grid" | "gallery" = "grid";
+    @Input() tabState!: TabState;
 
     @Output() fileOpenEvent = new EventEmitter<File>();
     @Output() fileSelectEvent = new EventEmitter<File[]>();
@@ -73,9 +75,18 @@ export class FileMultiviewComponent extends FileActionBaseComponent implements A
         }
 
         if (deletePermanently) {
-            await this.deletePermanently(files);
+            const deleted = await this.deletePermanently(files);
+
+            if (deleted) {
+                this.onFileDeleted(files);
+            }
         } else {
             await this.updateStatus(files, "Deleted");
         }
     }
+
+    public onFileDeleted(deletedFiles: File[]): void {
+        this.files = this.files.filter(f => deletedFiles.findIndex(df => df.id === f.id) < 0);
+        this.tabState.files.next(this.files);
+    }
 }