Add mode and selected file to state

Signed-off-by: Trivernis <trivernis@protonmail.com>
pull/4/head
Trivernis 3 years ago
parent 49354c02b4
commit f6a4b77465

@ -12,8 +12,10 @@
</button>
</div>
</ng-template>
<ng-template matTabContent>
<app-files-tab *ngIf="tab.category === 'Files'" [state]="tab"></app-files-tab>
<app-import-tab *ngIf="tab.category === 'Import'" [state]="tab"></app-import-tab>
</ng-template>
</mat-tab>
<mat-tab *ngIf="this.newTab" label="New Tab">
<div class="new-tab-content">

@ -6,7 +6,7 @@
</mat-drawer>
<mat-drawer-content>
<app-busy-indicator [blurBackground]="true" [busy]="contentLoading">
<app-file-multiview (fileSelectEvent)="this.onFileSelect($event)" [files]="this.files"></app-file-multiview>
<app-file-multiview [mode]="state.mode.value" (modeChangeEvent)="state.mode.next($event)" (fileSelectEvent)="this.onFileSelect($event)" [files]="this.files" [preselectedFile]="this.getStateSelectedFile()"></app-file-multiview>
</app-busy-indicator>
</mat-drawer-content>
</mat-drawer-container>

@ -24,5 +24,20 @@ export class FilesTabComponent implements OnInit {
async onFileSelect(files: File[]) {
this.selectedFiles = files;
if (files.length === 1) {
this.state.selectedFileHash.next(files[0].hash);
} else {
this.state.selectedFileHash.next(undefined);
}
}
public getStateSelectedFile(): File | undefined {
const hash = this.state.selectedFileHash.value;
if (hash) {
return this.files.find(f => f.hash === hash);
} else {
return undefined;
}
}
}

@ -5,7 +5,7 @@
<div (dblclick)="this.selectedFile? this.fileDblClickEvent.emit(this.selectedFile.data) : null"
class="file-full-view"
fxFlex="80%">
<app-content-viewer
<app-content-viewer *ngIf="this.selectedFile"
(contextmenu)="this.selectedFile && fileContextMenu.onContextMenu($event, this.selectedFile!.data)"
[file]="this.selectedFile!.data"></app-content-viewer>
</div>

@ -1,7 +1,7 @@
<app-file-grid #fileGrid (fileOpenEvent)="this.onFileOpen($event)" (fileSelectEvent)="this.onFileSelect($event)"
*ngIf="this.mode === 'grid'"
[files]="this.files" [preselectedFile]="this.preselectedFile"></app-file-grid>
<app-file-gallery #fileGallery (closeEvent)="this.mode = 'grid'" (fileSelectEvent)="this.onSinglefileSelect($event)"
<app-file-gallery #fileGallery (closeEvent)="this.setMode('grid')" (fileSelectEvent)="this.onSingleFileSelect($event)"
*ngIf="this.mode === 'gallery'"
[files]="this.files"
[preselectedFile]="this.preselectedFile"></app-file-gallery>

@ -22,12 +22,13 @@ export class FileMultiviewComponent {
@Output() fileOpenEvent = new EventEmitter<File>();
@Output() fileSelectEvent = new EventEmitter<File[]>();
@Output() modeChangeEvent = new EventEmitter<"grid"|"gallery">();
@ViewChild(FileGalleryComponent) fileGallery!: FileGalleryComponent;
@ViewChild(FileGridComponent) fileGrid!: FileGridComponent;
public selectedFiles: File[] = [];
public preselectedFile: File | undefined;
@Input() public preselectedFile: File | undefined;
constructor() {
}
@ -38,7 +39,7 @@ export class FileMultiviewComponent {
this.fileSelectEvent.emit(this.selectedFiles);
}
public onSinglefileSelect(file: File | undefined): void {
public onSingleFileSelect(file: File | undefined): void {
if (file) {
this.selectedFiles = [file];
this.preselectedFile = file;
@ -50,7 +51,12 @@ export class FileMultiviewComponent {
public onFileOpen(file: File): void {
this.preselectedFile = file;
this.mode = "gallery";
this.setMode("gallery")
this.fileOpenEvent.emit(file);
}
public setMode(mode: "grid" | "gallery") {
this.mode = mode;
this.modeChangeEvent.emit(mode);
}
}

@ -14,6 +14,9 @@ import {TagQuery} from "./TagQuery";
export class TabState {
public uuid: number;
public category: TabCategory;
public mode = new BehaviorSubject<"grid" | "gallery">("grid");
public selectedFileHash = new BehaviorSubject<string | undefined>(undefined);
public files = new BehaviorSubject<File[]>([]);
public filters = new BehaviorSubject<FilterExpression[]>([]);
public sortKeys = new BehaviorSubject<SortKey[]>(
@ -60,6 +63,8 @@ export class TabState {
);
state.filters.next(filters);
state.sortKeys.next(sortKeys);
state.mode.next(dto.mode ?? "grid");
state.selectedFileHash.next(dto.selectedFileHash)
return state
}
@ -70,6 +75,8 @@ export class TabState {
category: this.category,
filters: this.filters.value,
sortKeys: this.sortKeys.value,
mode: this.mode.value,
selectedFileHash: this.selectedFileHash.value
};
}
}

@ -29,7 +29,8 @@ export class StateService {
this.state.next(state);
}
});
this.stateChange.pipe(debounceTime(1000)).subscribe(async () => this.saveState());
this.stateChange.pipe(debounceTime(1000))
.subscribe(async () => this.saveState());
}
/**
@ -63,6 +64,10 @@ export class StateService {
.subscribe(() => this.stateChange.next()));
this.tabSubscriptions.push(tab.sortKeys
.subscribe(() => this.stateChange.next()));
this.tabSubscriptions.push(
tab.selectedFileHash.subscribe(() => this.stateChange.next()));
this.tabSubscriptions.push(
tab.mode.subscribe(() => this.stateChange.next()))
}
/**

Loading…
Cancel
Save