Add readonly file metadata tab
Signed-off-by: trivernis <trivernis@protonmail.com>pull/4/head
parent
d03409ef21
commit
7501e65d5c
@ -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() {
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in New Issue