From e233c1e59c867d697deabd3dfd600959224aff2d Mon Sep 17 00:00:00 2001
From: trivernis <trivernis@protonmail.com>
Date: Sun, 28 Nov 2021 17:33:03 +0100
Subject: [PATCH] Add file metadata sidebar entry

Signed-off-by: trivernis <trivernis@protonmail.com>
---
 mediarepo-ui/src-tauri/Cargo.lock             |  2 +-
 mediarepo-ui/src-tauri/Cargo.toml             | 14 ++++----
 .../editable-metadata-entry.component.html    | 13 +++++++
 .../editable-metadata-entry.component.scss    | 17 +++++++++
 .../editable-metadata-entry.component.spec.ts | 25 +++++++++++++
 .../editable-metadata-entry.component.ts      | 36 +++++++++++++++++++
 .../file-metadata.component.html              |  3 +-
 .../file-metadata.component.scss              |  2 +-
 .../file-metadata/file-metadata.component.ts  | 20 ++++-------
 .../shared/sidebar/sidebar.module.ts          |  8 +++--
 10 files changed, 113 insertions(+), 27 deletions(-)
 create mode 100644 mediarepo-ui/src/app/components/shared/sidebar/file-metadata/editable-metadata-entry/editable-metadata-entry.component.html
 create mode 100644 mediarepo-ui/src/app/components/shared/sidebar/file-metadata/editable-metadata-entry/editable-metadata-entry.component.scss
 create mode 100644 mediarepo-ui/src/app/components/shared/sidebar/file-metadata/editable-metadata-entry/editable-metadata-entry.component.spec.ts
 create mode 100644 mediarepo-ui/src/app/components/shared/sidebar/file-metadata/editable-metadata-entry/editable-metadata-entry.component.ts

diff --git a/mediarepo-ui/src-tauri/Cargo.lock b/mediarepo-ui/src-tauri/Cargo.lock
index ae23ff6..cdfa86a 100644
--- a/mediarepo-ui/src-tauri/Cargo.lock
+++ b/mediarepo-ui/src-tauri/Cargo.lock
@@ -1474,7 +1474,7 @@ checksum = "a3e378b66a060d48947b590737b30a1be76706c8dd7b8ba0f2fe3989c68a853f"
 [[package]]
 name = "mediarepo-api"
 version = "0.12.0"
-source = "git+https://github.com/Trivernis/mediarepo-api.git?rev=16b892eab0b3446198601a8f5829d0bd54d2efdf#16b892eab0b3446198601a8f5829d0bd54d2efdf"
+source = "git+https://github.com/Trivernis/mediarepo-api.git?rev=914292532e562eed389a1a49e0bb802a9f9327e1#914292532e562eed389a1a49e0bb802a9f9327e1"
 dependencies = [
  "async-trait",
  "chrono",
diff --git a/mediarepo-ui/src-tauri/Cargo.toml b/mediarepo-ui/src-tauri/Cargo.toml
index e87394d..2c77783 100644
--- a/mediarepo-ui/src-tauri/Cargo.toml
+++ b/mediarepo-ui/src-tauri/Cargo.toml
@@ -19,14 +19,14 @@ tauri = { version = "1.0.0-beta.8", features = ["dialog-all", "path-all"] }
 thiserror = "1.0.30"
 typemap_rev = "0.1.5"
 
-  [dependencies.tracing-subscriber]
-  version = "0.3.0"
-  features = [ "env-filter" ]
+[dependencies.tracing-subscriber]
+version = "0.3.0"
+features = [ "env-filter" ]
 
-  [dependencies.mediarepo-api]
-  git = "https://github.com/Trivernis/mediarepo-api.git"
-  rev = "16b892eab0b3446198601a8f5829d0bd54d2efdf"
-  features = [ "tauri-plugin" ]
+[dependencies.mediarepo-api]
+git = "https://github.com/Trivernis/mediarepo-api.git"
+rev = "914292532e562eed389a1a49e0bb802a9f9327e1"
+features = [ "tauri-plugin" ]
 
 [features]
 default = [ "custom-protocol" ]
diff --git a/mediarepo-ui/src/app/components/shared/sidebar/file-metadata/editable-metadata-entry/editable-metadata-entry.component.html b/mediarepo-ui/src/app/components/shared/sidebar/file-metadata/editable-metadata-entry/editable-metadata-entry.component.html
new file mode 100644
index 0000000..7c10398
--- /dev/null
+++ b/mediarepo-ui/src/app/components/shared/sidebar/file-metadata/editable-metadata-entry/editable-metadata-entry.component.html
@@ -0,0 +1,13 @@
+<div class="metadata-inner">
+    <app-metadata-entry *ngIf="mode === 'read'" [value]="value" [attributeName]="attributeName"></app-metadata-entry>
+    <mat-form-field *ngIf="mode === 'write'">
+        <mat-label>{{attributeName}}</mat-label>
+        <input [formControl]="formControl" type="text" matInput [value]="value">
+    </mat-form-field>
+    <button *ngIf="mode === 'write'" mat-button (click)="this.onSave()">
+        <ng-icon name="mat-save"></ng-icon>
+    </button>
+    <button *ngIf="mode === 'read'" mat-button (click)="mode = 'write'">
+        <ng-icon name="mat-edit"></ng-icon>
+    </button>
+</div>
diff --git a/mediarepo-ui/src/app/components/shared/sidebar/file-metadata/editable-metadata-entry/editable-metadata-entry.component.scss b/mediarepo-ui/src/app/components/shared/sidebar/file-metadata/editable-metadata-entry/editable-metadata-entry.component.scss
new file mode 100644
index 0000000..5d5cd57
--- /dev/null
+++ b/mediarepo-ui/src/app/components/shared/sidebar/file-metadata/editable-metadata-entry/editable-metadata-entry.component.scss
@@ -0,0 +1,17 @@
+.metadata-inner {
+    display: flex;
+    flex-direction: row;
+}
+
+button {
+    float: right;
+}
+
+app-metadata-entry {
+    width: calc(100% - 4em);
+    display: block;
+}
+
+mat-form-field {
+    width: calc(100% - 4em);
+}
diff --git a/mediarepo-ui/src/app/components/shared/sidebar/file-metadata/editable-metadata-entry/editable-metadata-entry.component.spec.ts b/mediarepo-ui/src/app/components/shared/sidebar/file-metadata/editable-metadata-entry/editable-metadata-entry.component.spec.ts
new file mode 100644
index 0000000..cce83ea
--- /dev/null
+++ b/mediarepo-ui/src/app/components/shared/sidebar/file-metadata/editable-metadata-entry/editable-metadata-entry.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EditableMetadataEntryComponent } from './editable-metadata-entry.component';
+
+describe('EditableMetadataEntryComponent', () => {
+  let component: EditableMetadataEntryComponent;
+  let fixture: ComponentFixture<EditableMetadataEntryComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ EditableMetadataEntryComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EditableMetadataEntryComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/mediarepo-ui/src/app/components/shared/sidebar/file-metadata/editable-metadata-entry/editable-metadata-entry.component.ts b/mediarepo-ui/src/app/components/shared/sidebar/file-metadata/editable-metadata-entry/editable-metadata-entry.component.ts
new file mode 100644
index 0000000..d107270
--- /dev/null
+++ b/mediarepo-ui/src/app/components/shared/sidebar/file-metadata/editable-metadata-entry/editable-metadata-entry.component.ts
@@ -0,0 +1,36 @@
+import {
+    Component,
+    EventEmitter,
+    Input,
+    OnChanges,
+    OnInit,
+    Output
+} from "@angular/core";
+import {FormControl} from "@angular/forms";
+
+@Component({
+    selector: "app-editable-metadata-entry",
+    templateUrl: "./editable-metadata-entry.component.html",
+    styleUrls: ["./editable-metadata-entry.component.scss"]
+})
+export class EditableMetadataEntryComponent implements OnInit{
+
+    @Input() attributeName!: string;
+    @Input() value!: string;
+    @Input() mode: "read" | "write" = "read";
+    @Output() valueChangeEvent = new EventEmitter<string>();
+
+    public formControl = new FormControl();
+
+    constructor() {
+    }
+
+    public ngOnInit(): void {
+        this.formControl.setValue(this.value);
+    }
+
+    public onSave(): void {
+        this.valueChangeEvent.emit(this.formControl.value);
+        this.mode = "read";
+    }
+}
diff --git a/mediarepo-ui/src/app/components/shared/sidebar/file-metadata/file-metadata.component.html b/mediarepo-ui/src/app/components/shared/sidebar/file-metadata/file-metadata.component.html
index a3e5a5a..00f97c7 100644
--- a/mediarepo-ui/src/app/components/shared/sidebar/file-metadata/file-metadata.component.html
+++ b/mediarepo-ui/src/app/components/shared/sidebar/file-metadata/file-metadata.component.html
@@ -6,13 +6,12 @@
     <div class="file-metadata-entries-scroll-container">
         <div class="file-metadata-entries">
 
-            <app-metadata-entry attributeName="Name" [value]="file.name ?? ''"></app-metadata-entry>
+            <app-editable-metadata-entry attributeName="Name" [value]="file.name ?? ''" (valueChangeEvent)="this.saveFileName($event)"></app-editable-metadata-entry>
             <app-metadata-entry attributeName="Hash" [value]="file.hash"></app-metadata-entry>
             <app-metadata-entry attributeName="Mime Type" [value]="file.mime_type ?? 'unknown'"></app-metadata-entry>
             <app-metadata-entry attributeName="Imported at" [value]="file.import_time.toLocaleString()"></app-metadata-entry>
             <app-metadata-entry attributeName="Created at" [value]="file.creation_time.toLocaleString()"></app-metadata-entry>
             <app-metadata-entry attributeName="Changed at" [value]="file.change_time.toLocaleString()"></app-metadata-entry>
-            <app-metadata-entry attributeName="Comment" [value]="file.comment ?? ''"></app-metadata-entry>
 
         </div>
     </div>
diff --git a/mediarepo-ui/src/app/components/shared/sidebar/file-metadata/file-metadata.component.scss b/mediarepo-ui/src/app/components/shared/sidebar/file-metadata/file-metadata.component.scss
index 6352981..44fadc4 100644
--- a/mediarepo-ui/src/app/components/shared/sidebar/file-metadata/file-metadata.component.scss
+++ b/mediarepo-ui/src/app/components/shared/sidebar/file-metadata/file-metadata.component.scss
@@ -15,7 +15,7 @@
     user-select: none;
     height: auto;
 
-    app-metadata-entry {
+    app-metadata-entry, app-editable-metadata-entry {
         margin: 0.5em 0;
         width: 100%;
         display: block;
diff --git a/mediarepo-ui/src/app/components/shared/sidebar/file-metadata/file-metadata.component.ts b/mediarepo-ui/src/app/components/shared/sidebar/file-metadata/file-metadata.component.ts
index 66746e1..5879c09 100644
--- a/mediarepo-ui/src/app/components/shared/sidebar/file-metadata/file-metadata.component.ts
+++ b/mediarepo-ui/src/app/components/shared/sidebar/file-metadata/file-metadata.component.ts
@@ -6,30 +6,22 @@ import {
     SimpleChanges
 } from "@angular/core";
 import {File} from "../../../../models/File";
+import {FileService} from "../../../../services/file/file.service";
 
 @Component({
     selector: "app-file-metadata",
     templateUrl: "./file-metadata.component.html",
     styleUrls: ["./file-metadata.component.scss"]
 })
-export class FileMetadataComponent implements OnInit, OnChanges {
+export class FileMetadataComponent {
 
     @Input() file!: File;
 
-    constructor() {
+    constructor(private fileService: FileService) {
     }
 
-    public async ngOnInit(): Promise<void> {
-        await this.loadFileInformation();
-    }
-
-    public async ngOnChanges(changes: SimpleChanges): Promise<void> {
-        if (changes["file"]) {
-            await this.loadFileInformation();
-        }
-    }
-
-    private async loadFileInformation() {
-
+    public async saveFileName(name: string) {
+        const newFile = await this.fileService.updateFileName(this.file, name);
+        this.file.name = newFile.name;
     }
 }
diff --git a/mediarepo-ui/src/app/components/shared/sidebar/sidebar.module.ts b/mediarepo-ui/src/app/components/shared/sidebar/sidebar.module.ts
index cd01914..7b64e61 100644
--- a/mediarepo-ui/src/app/components/shared/sidebar/sidebar.module.ts
+++ b/mediarepo-ui/src/app/components/shared/sidebar/sidebar.module.ts
@@ -3,7 +3,7 @@ import {CommonModule} from "@angular/common";
 import {TagEditComponent} from "./tag-edit/tag-edit.component";
 import {FileSearchComponent} from "./file-search/file-search.component";
 import {NgIconsModule} from "@ng-icons/core";
-import {MatRemove, MatChangeCircle, MatAddCircle, MatRemoveCircle, MatDeleteSweep, MatFilterAlt} from "@ng-icons/material-icons";
+import {MatRemove, MatChangeCircle, MatAddCircle, MatRemoveCircle, MatDeleteSweep, MatFilterAlt, MatSave, MatEdit} from "@ng-icons/material-icons";
 import {MatRippleModule} from "@angular/material/core";
 import {MatButtonModule} from "@angular/material/button";
 import {InputModule} from "../input/input.module";
@@ -27,7 +27,9 @@ import {MatCheckboxModule} from "@angular/material/checkbox";
 import {MatProgressBarModule} from "@angular/material/progress-bar";
 import {MatMenuModule} from "@angular/material/menu";
 import { FileMetadataComponent } from "./file-metadata/file-metadata.component";
-import { MetadataEntryComponent } from './file-metadata/metadata-entry/metadata-entry.component';
+import { MetadataEntryComponent } from "./file-metadata/metadata-entry/metadata-entry.component";
+import { EditableMetadataEntryComponent } from "./file-metadata/editable-metadata-entry/editable-metadata-entry.component";
+import {ReactiveFormsModule} from "@angular/forms";
 
 
 @NgModule({
@@ -41,6 +43,7 @@ import { MetadataEntryComponent } from './file-metadata/metadata-entry/metadata-
         FilesystemImportComponent,
         FileMetadataComponent,
         MetadataEntryComponent,
+        EditableMetadataEntryComponent,
     ],
     exports: [
         TagEditComponent,
@@ -75,6 +78,7 @@ import { MetadataEntryComponent } from './file-metadata/metadata-entry/metadata-
         MatCheckboxModule,
         MatProgressBarModule,
         MatMenuModule,
+        ReactiveFormsModule,
     ]
 })
 export class SidebarModule {