Add readonly file metadata tab

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

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

@@ -8,5 +8,8 @@
         <mat-tab *ngIf="this.selectedFiles.length > 0" label="Edit Tags">
             <app-tag-edit #fileedit [files]="this.selectedFiles"></app-tag-edit>
         </mat-tab>
+        <mat-tab *ngIf="this.selectedFiles.length === 1" label="File Metadata">
+            <app-file-metadata [file]="this.selectedFiles[0]"></app-file-metadata>
+        </mat-tab>
     </mat-tab-group>
 </div>

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

@@ -1,4 +1,4 @@
-mat-tab-group, mat-tab, .file-tag-list, app-tag-edit, app-file-search {
+mat-tab-group, mat-tab, .file-tag-list, app-tag-edit, app-file-search, app-file-metadata {
     height: 100%;
     width: 100%;
 }

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

@@ -6,5 +6,8 @@
         <mat-tab label="Edit Tags" *ngIf="selectedFiles.length > 0">
             <app-tag-edit [files]="selectedFiles"></app-tag-edit>
         </mat-tab>
+        <mat-tab label="File Metadata" *ngIf="selectedFiles.length === 1">
+            <app-file-metadata [file]="selectedFiles[0]"></app-file-metadata>
+        </mat-tab>
     </mat-tab-group>
 </div>

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

@@ -0,0 +1,19 @@
+<div class="file-metadata-inner">
+    <div class="file-metadata-header">
+        <h1>File Metadata</h1>
+        <mat-divider></mat-divider>
+    </div>
+    <div class="file-metadata-entries-scroll-container">
+        <div class="file-metadata-entries">
+
+            <app-metadata-entry attributeName="Name" [value]="file.name ?? ''"></app-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>
+</div>

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

@@ -0,0 +1,38 @@
+.file-metadata-inner {
+    height: 100%;
+    width: 100%;
+    display: block;
+    overflow: hidden;
+}
+
+.file-metadata-entries-scroll-container {
+    height: 100%;
+    overflow-y: auto;
+}
+
+.file-metadata-entries {
+    padding: 0 0.5em;
+    user-select: none;
+    height: auto;
+
+    app-metadata-entry {
+        margin: 0.5em 0;
+        width: 100%;
+        display: block;
+    }
+    :first-child {
+        margin-top: 0;
+    }
+    :last-child {
+        margin-bottom: 0;
+    }
+}
+
+.file-metadata-header {
+    text-align: center;
+    height: 100px;
+    width: 100%;
+    h1 {
+        margin-top: 20px;
+    }
+}

mediarepo-ui/src/app/components/shared/sidebar/file-metadata/file-metadata.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FileMetadataComponent } from './file-metadata.component';
+
+describe('FileMetadataComponent', () => {
+  let component: FileMetadataComponent;
+  let fixture: ComponentFixture<FileMetadataComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ FileMetadataComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FileMetadataComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,35 @@
+import {
+    Component,
+    Input,
+    OnChanges,
+    OnInit,
+    SimpleChanges
+} from "@angular/core";
+import {File} from "../../../../models/File";
+
+@Component({
+    selector: "app-file-metadata",
+    templateUrl: "./file-metadata.component.html",
+    styleUrls: ["./file-metadata.component.scss"]
+})
+export class FileMetadataComponent implements OnInit, OnChanges {
+
+    @Input() file!: File;
+
+    constructor() {
+    }
+
+    public async ngOnInit(): Promise<void> {
+        await this.loadFileInformation();
+    }
+
+    public async ngOnChanges(changes: SimpleChanges): Promise<void> {
+        if (changes["file"]) {
+            await this.loadFileInformation();
+        }
+    }
+
+    private async loadFileInformation() {
+
+    }
+}

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

@@ -0,0 +1,4 @@
+<div class="metadata-entry-inner">
+    <span class="metadata-attribute">{{attributeName}}:</span>
+    <span class="metadata-value">{{value}}</span>
+</div>

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

@@ -0,0 +1,17 @@
+.metadata-entry-inner {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.metadata-attribute {
+    opacity: 0.8;
+    text-overflow: ellipsis;
+    user-select: text;
+}
+
+.metadata-value {
+    margin-left: 0.5em;
+    word-break: break-all;
+    user-select: text;
+}

mediarepo-ui/src/app/components/shared/sidebar/file-metadata/metadata-entry/metadata-entry.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MetadataEntryComponent } from './metadata-entry.component';
+
+describe('MetadataEntryComponent', () => {
+  let component: MetadataEntryComponent;
+  let fixture: ComponentFixture<MetadataEntryComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ MetadataEntryComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MetadataEntryComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

mediarepo-ui/src/app/components/shared/sidebar/file-metadata/metadata-entry/metadata-entry.component.ts

@@ -0,0 +1,15 @@
+import {Component, Input} from "@angular/core";
+
+@Component({
+    selector: "app-metadata-entry",
+    templateUrl: "./metadata-entry.component.html",
+    styleUrls: ["./metadata-entry.component.scss"]
+})
+export class MetadataEntryComponent {
+
+    @Input() attributeName!: string;
+    @Input() value!: string;
+
+    constructor() {
+    }
+}

mediarepo-ui/src/app/components/shared/sidebar/sidebar.module.ts

@@ -26,6 +26,8 @@ import {FilesystemImportComponent} from "./file-import/filesystem-import/filesys
 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';
 
 
 @NgModule({
@@ -37,11 +39,14 @@ import {MatMenuModule} from "@angular/material/menu";
         FilterDialogComponent,
         FileImportComponent,
         FilesystemImportComponent,
+        FileMetadataComponent,
+        MetadataEntryComponent,
     ],
     exports: [
         TagEditComponent,
         FileSearchComponent,
-        FileImportComponent
+        FileImportComponent,
+        FileMetadataComponent
     ],
     imports: [
         CommonModule,