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> </button>
</div> </div>
</ng-template> </ng-template>
<ng-template matTabContent>
<app-files-tab *ngIf="tab.category === 'Files'" [state]="tab"></app-files-tab> <app-files-tab *ngIf="tab.category === 'Files'" [state]="tab"></app-files-tab>
<app-import-tab *ngIf="tab.category === 'Import'" [state]="tab"></app-import-tab> <app-import-tab *ngIf="tab.category === 'Import'" [state]="tab"></app-import-tab>
</ng-template>
</mat-tab> </mat-tab>
<mat-tab *ngIf="this.newTab" label="New Tab"> <mat-tab *ngIf="this.newTab" label="New Tab">
<div class="new-tab-content"> <div class="new-tab-content">

@ -6,7 +6,7 @@
</mat-drawer> </mat-drawer>
<mat-drawer-content> <mat-drawer-content>
<app-busy-indicator [blurBackground]="true" [busy]="contentLoading"> <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> </app-busy-indicator>
</mat-drawer-content> </mat-drawer-content>
</mat-drawer-container> </mat-drawer-container>

@ -24,5 +24,20 @@ export class FilesTabComponent implements OnInit {
async onFileSelect(files: File[]) { async onFileSelect(files: File[]) {
this.selectedFiles = files; 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" <div (dblclick)="this.selectedFile? this.fileDblClickEvent.emit(this.selectedFile.data) : null"
class="file-full-view" class="file-full-view"
fxFlex="80%"> fxFlex="80%">
<app-content-viewer <app-content-viewer *ngIf="this.selectedFile"
(contextmenu)="this.selectedFile && fileContextMenu.onContextMenu($event, this.selectedFile!.data)" (contextmenu)="this.selectedFile && fileContextMenu.onContextMenu($event, this.selectedFile!.data)"
[file]="this.selectedFile!.data"></app-content-viewer> [file]="this.selectedFile!.data"></app-content-viewer>
</div> </div>

@ -1,7 +1,7 @@
<app-file-grid #fileGrid (fileOpenEvent)="this.onFileOpen($event)" (fileSelectEvent)="this.onFileSelect($event)" <app-file-grid #fileGrid (fileOpenEvent)="this.onFileOpen($event)" (fileSelectEvent)="this.onFileSelect($event)"
*ngIf="this.mode === 'grid'" *ngIf="this.mode === 'grid'"
[files]="this.files" [preselectedFile]="this.preselectedFile"></app-file-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'" *ngIf="this.mode === 'gallery'"
[files]="this.files" [files]="this.files"
[preselectedFile]="this.preselectedFile"></app-file-gallery> [preselectedFile]="this.preselectedFile"></app-file-gallery>

@ -22,12 +22,13 @@ export class FileMultiviewComponent {
@Output() fileOpenEvent = new EventEmitter<File>(); @Output() fileOpenEvent = new EventEmitter<File>();
@Output() fileSelectEvent = new EventEmitter<File[]>(); @Output() fileSelectEvent = new EventEmitter<File[]>();
@Output() modeChangeEvent = new EventEmitter<"grid"|"gallery">();
@ViewChild(FileGalleryComponent) fileGallery!: FileGalleryComponent; @ViewChild(FileGalleryComponent) fileGallery!: FileGalleryComponent;
@ViewChild(FileGridComponent) fileGrid!: FileGridComponent; @ViewChild(FileGridComponent) fileGrid!: FileGridComponent;
public selectedFiles: File[] = []; public selectedFiles: File[] = [];
public preselectedFile: File | undefined; @Input() public preselectedFile: File | undefined;
constructor() { constructor() {
} }
@ -38,7 +39,7 @@ export class FileMultiviewComponent {
this.fileSelectEvent.emit(this.selectedFiles); this.fileSelectEvent.emit(this.selectedFiles);
} }
public onSinglefileSelect(file: File | undefined): void { public onSingleFileSelect(file: File | undefined): void {
if (file) { if (file) {
this.selectedFiles = [file]; this.selectedFiles = [file];
this.preselectedFile = file; this.preselectedFile = file;
@ -50,7 +51,12 @@ export class FileMultiviewComponent {
public onFileOpen(file: File): void { public onFileOpen(file: File): void {
this.preselectedFile = file; this.preselectedFile = file;
this.mode = "gallery"; this.setMode("gallery")
this.fileOpenEvent.emit(file); 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 { export class TabState {
public uuid: number; public uuid: number;
public category: TabCategory; public category: TabCategory;
public mode = new BehaviorSubject<"grid" | "gallery">("grid");
public selectedFileHash = new BehaviorSubject<string | undefined>(undefined);
public files = new BehaviorSubject<File[]>([]); public files = new BehaviorSubject<File[]>([]);
public filters = new BehaviorSubject<FilterExpression[]>([]); public filters = new BehaviorSubject<FilterExpression[]>([]);
public sortKeys = new BehaviorSubject<SortKey[]>( public sortKeys = new BehaviorSubject<SortKey[]>(
@ -60,6 +63,8 @@ export class TabState {
); );
state.filters.next(filters); state.filters.next(filters);
state.sortKeys.next(sortKeys); state.sortKeys.next(sortKeys);
state.mode.next(dto.mode ?? "grid");
state.selectedFileHash.next(dto.selectedFileHash)
return state return state
} }
@ -70,6 +75,8 @@ export class TabState {
category: this.category, category: this.category,
filters: this.filters.value, filters: this.filters.value,
sortKeys: this.sortKeys.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.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())); .subscribe(() => this.stateChange.next()));
this.tabSubscriptions.push(tab.sortKeys this.tabSubscriptions.push(tab.sortKeys
.subscribe(() => this.stateChange.next())); .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