Add readonly file metadata tab

Signed-off-by: trivernis <trivernis@protonmail.com>
pull/4/head
trivernis 3 years ago
parent d03409ef21
commit 7501e65d5c

@ -8,5 +8,8 @@
<mat-tab *ngIf="this.selectedFiles.length > 0" label="Edit Tags"> <mat-tab *ngIf="this.selectedFiles.length > 0" label="Edit Tags">
<app-tag-edit #fileedit [files]="this.selectedFiles"></app-tag-edit> <app-tag-edit #fileedit [files]="this.selectedFiles"></app-tag-edit>
</mat-tab> </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> </mat-tab-group>
</div> </div>

@ -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%; height: 100%;
width: 100%; width: 100%;
} }

@ -6,5 +6,8 @@
<mat-tab label="Edit Tags" *ngIf="selectedFiles.length > 0"> <mat-tab label="Edit Tags" *ngIf="selectedFiles.length > 0">
<app-tag-edit [files]="selectedFiles"></app-tag-edit> <app-tag-edit [files]="selectedFiles"></app-tag-edit>
</mat-tab> </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> </mat-tab-group>
</div> </div>

@ -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>

@ -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;
}
}

@ -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();
});
});

@ -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() {
}
}

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

@ -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;
}

@ -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();
});
});

@ -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() {
}
}

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

Loading…
Cancel
Save