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 @@ +
+ + + {{attributeName}} + + + + +
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; + + 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(); + + 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 @@ 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 { - await this.loadFileInformation(); - } - - public async ngOnChanges(changes: SimpleChanges): Promise { - 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 {