Add functionality to name input field

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

mediarepo-ui/src-tauri/Cargo.lock

@@ -1580,8 +1580,8 @@ checksum = "a3e378b66a060d48947b590737b30a1be76706c8dd7b8ba0f2fe3989c68a853f"
 
 [[package]]
 name = "mediarepo-api"
-version = "0.3.0"
-source = "git+https://github.com/Trivernis/mediarepo-api.git?rev=6cd483a4a7d0a101f391b755b73fa253e70b4a29#6cd483a4a7d0a101f391b755b73fa253e70b4a29"
+version = "0.4.1"
+source = "git+https://github.com/Trivernis/mediarepo-api.git?rev=b123e69d92dfd384d37b9005c8e261c69fddfcc5#b123e69d92dfd384d37b9005c8e261c69fddfcc5"
 dependencies = [
  "async-trait",
  "chrono",

mediarepo-ui/src-tauri/Cargo.toml

@@ -30,7 +30,7 @@ features = ["env-filter"]
 
 [dependencies.mediarepo-api]
 git = "https://github.com/Trivernis/mediarepo-api.git"
-rev = "6cd483a4a7d0a101f391b755b73fa253e70b4a29"
+rev = "b123e69d92dfd384d37b9005c8e261c69fddfcc5"
 features = ["tauri-plugin"]
 
 [features]

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

@@ -3,7 +3,7 @@
     <h1>Edit File</h1>
     <mat-form-field *ngIf="this.files.length === 1" appearance="fill">
       <mat-label>Name</mat-label>
-      <input matInput>
+      <input #fileNameInput matInput (focusout)="this.changeFileName(fileNameInput.value)">
     </mat-form-field>
   </div>
   <div class="tag-edit-list" fxFlex fxFlexFill fxFlexAlign="start">

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

@@ -1,5 +1,5 @@
 import {
-  Component,
+  Component, ElementRef,
   Input,
   OnChanges,
   OnInit,
@@ -14,6 +14,7 @@ import {MatAutocompleteSelectedEvent} from "@angular/material/autocomplete";
 import {Observable} from "rxjs";
 import {map, startWith} from "rxjs/operators";
 import {TagService} from "../../services/tag/tag.service";
+import {FileService} from "../../services/file/file.service";
 
 @Component({
   selector: 'app-file-edit',
@@ -33,9 +34,11 @@ export class FileEditComponent implements OnInit, OnChanges {
   public editMode: string = "Toggle";
 
   @ViewChild("tagScroll") tagScroll!: CdkVirtualScrollViewport;
+  @ViewChild("fileNameInput") fileNameInput!: ElementRef<HTMLInputElement>;
 
   constructor(
     private tagService: TagService,
+    private fileService: FileService,
   ) {
     this.suggestionTags = this.tagInputForm.valueChanges.pipe(startWith(null),
       map(
@@ -47,11 +50,26 @@ export class FileEditComponent implements OnInit, OnChanges {
     this.tagService.tags.subscribe(tags => this.allTags = tags);
     await this.tagService.loadTags();
     await this.loadFileTags();
+    this.resetFileNameInput();
   }
 
   async ngOnChanges(changes: SimpleChanges) {
     if (changes["files"]) {
       await this.loadFileTags()
+      this.resetFileNameInput();
+    }
+  }
+
+  public async changeFileName(value: string) {
+    const name = value.trim();
+
+    if (name.length > 0) {
+      const file = this.files[0];
+      console.log("Updating name to", name);
+      const responseFile = await this.fileService.updateFileName(file, name);
+      console.log("Updated name");
+      file.name = responseFile.name;
+      this.resetFileNameInput();
     }
   }
 
@@ -145,6 +163,12 @@ export class FileEditComponent implements OnInit, OnChanges {
     this.mapFileTagsToTagList();
   }
 
+  private resetFileNameInput() {
+    if (this.files.length === 1) {
+      this.fileNameInput.nativeElement.value = this.files[0].name ?? "";
+    }
+  }
+
   private mapFileTagsToTagList() {
     let tags: Tag[] = [];
     for (const file of this.files) {

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

@@ -1,6 +1,5 @@
 <mat-card #card (click)="clickEvent.emit(this)" (dblclick)="dblClickEvent.emit(this)"
           [ngClass]="{'selected': gridEntry.selected}">
-  <mat-card-title *ngIf="!!gridEntry.file?.name">{{gridEntry.file?.name}}</mat-card-title>
   <mat-card-content *ngIf="contentUrl !== undefined">
     <app-content-aware-image *ngIf="contentUrl" [imageSrc]="contentUrl" class="entry-image"></app-content-aware-image>
   </mat-card-content>

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

@@ -45,4 +45,8 @@ export class FileService {
     return await invoke<Thumbnail[]>("plugin:mediarepo|get_file_thumbnails",
       {id: file.id});
   }
+
+  public async updateFileName(file: File, name: string): Promise<File> {
+    return await invoke<File>("plugin:mediarepo|update_file_name", {id: file.id, name})
+  }
 }