Add tag editing to import tab and remove name editing

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

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

@@ -24,7 +24,7 @@
                 </div>
             </div>
         </mat-tab>
-        <mat-tab *ngIf="this.selectedFiles.length > 0" label="Edit">
+        <mat-tab *ngIf="this.selectedFiles.length > 0" label="Edit Tags">
             <app-file-edit #fileedit [files]="this.selectedFiles"></app-file-edit>
         </mat-tab>
     </mat-tab-group>

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

@@ -3,5 +3,8 @@
         <mat-tab label="Import">
             <app-file-import (importFinished)="importFinished.emit($event)" (fileImported)="fileImported.emit($event)"></app-file-import>
         </mat-tab>
+        <mat-tab label="Edit Tags" *ngIf="selectedFiles.length > 0">
+            <app-file-edit [files]="selectedFiles"></app-file-edit>
+        </mat-tab>
     </mat-tab-group>
 </div>

mediarepo-ui/src/app/components/core/import-tab/import-tab-sidebar/import-tab-sidebar.component.ts

@@ -1,4 +1,4 @@
-import {Component, EventEmitter, Output} from "@angular/core";
+import {Component, EventEmitter, Input, Output} from "@angular/core";
 import {File} from "../../../../models/File";
 
 @Component({
@@ -8,6 +8,7 @@ import {File} from "../../../../models/File";
 })
 export class ImportTabSidebarComponent {
 
+    @Input() selectedFiles: File[] = [];
     @Output() fileImported = new EventEmitter<File>();
     @Output() importFinished = new EventEmitter<void>();
 

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

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

mediarepo-ui/src/app/components/core/import-tab/import-tab.component.ts

@@ -9,6 +9,7 @@ import {File} from "../../../models/File";
 export class ImportTabComponent {
 
     public files: File[] = [];
+    public selectedFiles: File[] = [];
 
     constructor() {
     }
@@ -32,4 +33,8 @@ export class ImportTabComponent {
     public refreshFileView() {
         this.files = [...this.files];
     }
+
+    public onFileSelect(files: File[]) {
+        this.selectedFiles = files;
+    }
 }

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

@@ -1,10 +1,7 @@
 <div class="file-edit-inner" fxLayout="column">
-    <div class="file-metadata" fxFlex="150px">
-        <h1>Edit File</h1>
-        <mat-form-field *ngIf="this.files.length === 1" appearance="fill">
-            <mat-label>Name</mat-label>
-            <input #fileNameInput (focusout)="this.changeFileName(fileNameInput.value)" matInput>
-        </mat-form-field>
+    <div class="file-edit-header" fxFlex="100px">
+        <h1>Edit Tags</h1>
+        <mat-divider></mat-divider>
     </div>
     <div class="tag-edit-list" fxFlex fxFlexAlign="start" fxFlexFill>
         <cdk-virtual-scroll-viewport #tagScroll itemSize="50" maxBufferPx="2000" minBufferPx="1000">

mediarepo-ui/src/app/components/shared/sidebar/file-edit/file-edit.component.scss

@@ -1,4 +1,4 @@
-.file-metadata, .tag-input {
+.file-edit-header, .tag-input {
     width: 100%;
 
     mat-form-field, app-tag-input {
@@ -10,6 +10,13 @@
     }
 }
 
+.file-edit-header {
+    text-align: center;
+    h1 {
+        margin-top: 20px;
+    }
+}
+
 .file-edit-inner {
     height: 100%;
     width: 100%;