Move home view to separate view and add tabs
Signed-off-by: trivernis <trivernis@protonmail.com>pull/4/head
parent
e721344d07
commit
5b0769dcd2
@ -0,0 +1,22 @@
|
||||
<mat-drawer-container class="page">
|
||||
<mat-drawer mode="side" opened>
|
||||
<div class="drawer-sidebar-inner">
|
||||
<app-file-search #filesearch></app-file-search>
|
||||
<div id="file-tag-list">
|
||||
<h1>Selection Tags</h1>
|
||||
<mat-selection-list [multiple]="false" *ngIf="tags.length > 0"
|
||||
(selectionChange)="addSearchTagFromList($event)">
|
||||
<mat-list-option
|
||||
*ngFor="let tag of tags"
|
||||
[value]="tag.getNormalizedOutput()">{{tag.getNormalizedOutput()}}</mat-list-option>
|
||||
</mat-selection-list>
|
||||
</div>
|
||||
</div>
|
||||
</mat-drawer>
|
||||
<mat-drawer-content>
|
||||
<app-file-grid (fileDblClickEvent)="openFile($event)" [files]="files"
|
||||
(fileSelectEvent)="onFileSelect($event)"
|
||||
(fileMultiselectEvent)="onFileMultiSelect($event)"
|
||||
></app-file-grid>
|
||||
</mat-drawer-content>
|
||||
</mat-drawer-container>
|
||||
@ -0,0 +1,35 @@
|
||||
#file-tag-list {
|
||||
height: calc(100% - 8em);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.drawer-sidebar-inner {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
mat-drawer {
|
||||
height: 100%;
|
||||
width: 25%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
mat-drawer-content {
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
mat-drawer-container {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
app-file-grid {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.page {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { SearchPageComponent } from './search-page.component';
|
||||
|
||||
describe('SearchPageComponent', () => {
|
||||
let component: SearchPageComponent;
|
||||
let fixture: ComponentFixture<SearchPageComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ SearchPageComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(SearchPageComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,119 @@
|
||||
import {Component, OnInit, ViewChild} from '@angular/core';
|
||||
import {Tag} from "../../../models/Tag";
|
||||
import {File} from "../../../models/File";
|
||||
import {FileSearchComponent} from "../../../components/file-search/file-search.component";
|
||||
import {ErrorBrokerService} from "../../../services/error-broker/error-broker.service";
|
||||
import {FileService} from "../../../services/file/file.service";
|
||||
import {TagService} from "../../../services/tag/tag.service";
|
||||
import {Lightbox, LIGHTBOX_EVENT, LightboxEvent} from "ngx-lightbox";
|
||||
import {MatSelectionListChange} from "@angular/material/list";
|
||||
|
||||
@Component({
|
||||
selector: 'app-search-page',
|
||||
templateUrl: './search-page.component.html',
|
||||
styleUrls: ['./search-page.component.scss']
|
||||
})
|
||||
export class SearchPageComponent implements OnInit {
|
||||
|
||||
tags: Tag[] = [];
|
||||
files: File[] = [];
|
||||
private openingLightbox = false;
|
||||
|
||||
@ViewChild('filesearch') fileSearch!: FileSearchComponent;
|
||||
|
||||
constructor(
|
||||
private errorBroker: ErrorBrokerService,
|
||||
private fileService: FileService,
|
||||
private tagService: TagService,
|
||||
private lightbox: Lightbox,
|
||||
private lightboxEvent: LightboxEvent) {
|
||||
}
|
||||
|
||||
async ngOnInit() {
|
||||
this.fileService.displayedFiles.subscribe((files) => this.files = files);
|
||||
}
|
||||
|
||||
async onFileMultiSelect(files: File[]) {
|
||||
await this.showFileDetails(files);
|
||||
}
|
||||
|
||||
async onFileSelect(file: File | undefined) {
|
||||
if (file) {
|
||||
await this.showFileDetails([file]);
|
||||
} else {
|
||||
this.tags = [];
|
||||
}
|
||||
}
|
||||
|
||||
async showFileDetails(files: File[]) {
|
||||
this.tags = [];
|
||||
|
||||
for (const file of files) {
|
||||
const fileTags = await this.tagService.getTagsForFile(file.hash)
|
||||
for (const tag of fileTags) {
|
||||
if (this.tags.findIndex((t) => t.getNormalizedOutput() === tag.getNormalizedOutput()) < 0) {
|
||||
this.tags.push(tag);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.tags = this.tags.sort((a, b) => {
|
||||
const aNorm = a.getNormalizedOutput();
|
||||
const bNorm = b.getNormalizedOutput();
|
||||
if (aNorm > bNorm) {
|
||||
return 1
|
||||
} else if (bNorm > aNorm) {
|
||||
return -1;
|
||||
} else {
|
||||
return 0;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async addSearchTagFromList(event: MatSelectionListChange) {
|
||||
if (event.options.length > 0) {
|
||||
const tag = event.options[0].value;
|
||||
this.fileSearch.addSearchTag(tag);
|
||||
await this.fileSearch.searchForFiles();
|
||||
}
|
||||
event.source.deselectAll();
|
||||
}
|
||||
|
||||
async openFile(file: File) {
|
||||
if (this.openingLightbox) {
|
||||
return;
|
||||
}
|
||||
this.openingLightbox = true;
|
||||
try {
|
||||
await this.openLightbox(file);
|
||||
} catch (err) {
|
||||
this.errorBroker.showError(err);
|
||||
}
|
||||
this.openingLightbox = false;
|
||||
}
|
||||
|
||||
private async openLightbox(file: File): Promise<void> {
|
||||
let url = await this.fileService.readFile(file);
|
||||
|
||||
let albums = [
|
||||
{
|
||||
src: url as string,
|
||||
caption: file.name ?? file.comment,
|
||||
thumb: url as string,
|
||||
}
|
||||
];
|
||||
this.lightbox.open(albums, 0, {
|
||||
disableScrolling: true,
|
||||
showImageNumberLabel: false,
|
||||
showDownloadButton: true,
|
||||
centerVertically: true,
|
||||
});
|
||||
const lighboxSubscription = this.lightboxEvent.lightboxEvent$.subscribe(
|
||||
(event: any) => {
|
||||
if (event?.id == LIGHTBOX_EVENT.CLOSE) {
|
||||
lighboxSubscription.unsubscribe();
|
||||
URL?.revokeObjectURL(url as string);
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue