Trivernis
/
mediarepo
mirror of https://github.com/Trivernis/mediarepo.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Replace sortingExpression with sortingPreset in all files

Browse Source 
Signed-off-by: trivernis <trivernis@protonmail.com>
pull/12/head
trivernis 3 years ago
parent c0dca663b0
commit ece096fb86
Signed by: Trivernis
GPG Key ID: DFFFCC2C7A02DB45
9 changed files with 94 additions and 58 deletions
Show Stats Download Patch File Download Diff File

8
mediarepo-ui/src/api/models/SortKey.ts
Unescape Escape View File

@ -69,6 +69,10 @@ export class SortKey {
} }
} }
public get rawData(): SortKeyData {
return this.data;
}
public static fromValues( public static fromValues(
sortType: SortType, sortType: SortType,
sortDirection: SortDirection, sortDirection: SortDirection,
@ -99,8 +103,4 @@ export class SortKey {
return `${this.sortType} ${this.sortDirection}`; return `${this.sortType} ${this.sortDirection}`;
} }
} }
public rawData(): SortKeyData {
return this.data;
}
} }

25
mediarepo-ui/src/api/models/SortingPreset.ts
Unescape Escape View File

@ -1,20 +1,39 @@
import {SortKey} from "./SortKey"; import {SortKey} from "./SortKey";
import {SortingPresetData} from "../api-types/presets"; import {SortingPresetData} from "../api-types/presets";
import {mapNew} from "./adaptors";
export class SortingPreset { export class SortingPreset {
private readonly _id: number;
private keys: SortKey[]; private keys: SortKey[];
constructor(presetData: SortingPresetData) { constructor(presetData: SortingPresetData) {
this._id = presetData.id; this._id = presetData.id;
this.keys = presetData.keys.map(SortKey.fromRawData); this.keys = presetData.keys.map(mapNew(SortKey));
} }
private _id: number;
public get id(): number { public get id(): number {
return this._id; return this._id;
} }
public set id(value: number) {
this._id = value;
}
public get sortKeys(): SortKey[] { public get sortKeys(): SortKey[] {
return this.sortKeys; return this.keys;
}
public get rawData(): SortingPresetData {
return {
id: this._id,
keys: this.keys.map(k => k.rawData),
};
}
public static fromValues(id: number, keys: SortKey[]) {
let preset = new SortingPreset({ id, keys: [] });
preset.keys = keys;
return preset;
} }
} }

3
mediarepo-ui/src/app/components/shared/sidebar/file-search/file-search.component.html
Unescape Escape View File

@ -35,7 +35,8 @@
</button> </button>
</app-filter-input> </app-filter-input>
<button (click)="openSortDialog()" id="sort-button" mat-flat-button>Sort: {{sortExpression.join(", ")}}</button> <button (click)="openSortDialog()" id="sort-button" mat-flat-button>
Sort: {{sortingPreset.sortKeys.join(", ")}}</button>
</div> </div>
<mat-divider fxFlex="1em"></mat-divider> <mat-divider fxFlex="1em"></mat-divider>

20
mediarepo-ui/src/app/components/shared/sidebar/file-search/file-search.component.ts
Unescape Escape View File

@ -9,7 +9,6 @@ import {
Output, Output,
ViewChild ViewChild
} from "@angular/core"; } from "@angular/core";
import {SortKey} from "../../../../../api/models/SortKey";
import {MatDialog} from "@angular/material/dialog"; import {MatDialog} from "@angular/material/dialog";
import {SortDialogComponent} from "./sort-dialog/sort-dialog.component"; import {SortDialogComponent} from "./sort-dialog/sort-dialog.component";
import {LoggingService} from "../../../../services/logging/logging.service"; import {LoggingService} from "../../../../services/logging/logging.service";
@ -23,6 +22,7 @@ import {FileStatus, FilterExpression,} from "../../../../../api/api-types/files"
import {filterExpressionToString} from "../../../../utils/filter-utils"; import {filterExpressionToString} from "../../../../utils/filter-utils";
import {MatCheckboxChange} from "@angular/material/checkbox"; import {MatCheckboxChange} from "@angular/material/checkbox";
import * as deepEqual from "fast-deep-equal"; import * as deepEqual from "fast-deep-equal";
import {SortingPreset} from "../../../../../api/models/SortingPreset";
@Component({ @Component({
@ -32,7 +32,7 @@ import * as deepEqual from "fast-deep-equal";
changeDetection: ChangeDetectionStrategy.OnPush changeDetection: ChangeDetectionStrategy.OnPush
}) })
export class FileSearchComponent implements AfterViewChecked, OnInit { export class FileSearchComponent implements AfterViewChecked, OnInit {
public sortExpression: SortKey[] = []; public sortingPreset: SortingPreset = new SortingPreset({ id: -1, keys: [] });
public filters: SearchFilters = new SearchFilters([]); public filters: SearchFilters = new SearchFilters([]);
@Input() availableTags: Tag[] = []; @Input() availableTags: Tag[] = [];
@ -68,7 +68,7 @@ export class FileSearchComponent implements AfterViewChecked, OnInit {
this.filters = f; this.filters = f;
this.assignDisplayedFilters(); this.assignDisplayedFilters();
}); });
this.state.sortKeys.subscribe(s => this.sortExpression = s); this.state.sortingPreset.subscribe(s => this.sortingPreset = s);
this.applyStatusFromFilters(); this.applyStatusFromFilters();
this.needsScroll = true; this.needsScroll = true;
this.assignDisplayedFilters(); this.assignDisplayedFilters();
@ -127,20 +127,18 @@ export class FileSearchComponent implements AfterViewChecked, OnInit {
} }
public openSortDialog() { public openSortDialog() {
const sortEntries = this.sortExpression.map( const sortingPreset = new SortingPreset(JSON.parse(JSON.stringify(this.sortingPreset.rawData)));
key => JSON.parse(JSON.stringify(key.rawData()))).map(
data => new SortKey(data));
const openedDialog = this.dialog.open(SortDialogComponent, { const openedDialog = this.dialog.open(SortDialogComponent, {
minWidth: "40vw", minWidth: "40vw",
data: { data: {
sortEntries, sortingPreset,
}, },
disableClose: true, disableClose: true,
}); });
openedDialog.afterClosed().subscribe(async (sortExpression) => { openedDialog.afterClosed().subscribe(async (sortingPreset) => {
if (sortExpression) { if (sortingPreset) {
this.sortExpression = sortExpression; this.sortingPreset = sortingPreset;
this.state.setSortKeys(this.sortExpression); this.state.setSortingPreset(this.sortingPreset);
} }
}); });
} }

20
mediarepo-ui/src/app/components/shared/sidebar/file-search/sort-dialog/sort-dialog.component.html
Unescape Escape View File

@ -1,7 +1,7 @@
<h1 mat-dialog-title>Sort Entries</h1> <h1 mat-dialog-title>Sort Entries</h1>
<div mat-dialog-content> <div mat-dialog-content>
<div (cdkDropListDropped)="this.onSortEntryDrop($event)" cdkDropList class="sort-input-list"> <div (cdkDropListDropped)="this.onSortEntryDrop($event)" cdkDropList class="sort-input-list">
<div *ngFor="let sortKey of sortEntries" cdkDrag class="sort-input-row"> <div *ngFor="let sortKey of sortingPreset.sortKeys" cdkDrag class="sort-input-row">
<div *cdkDragPlaceholder class="drag-placeholder"></div> <div *cdkDragPlaceholder class="drag-placeholder"></div>
<div cdkDragHandle class="drag-handle"> <div cdkDragHandle class="drag-handle">
<ng-icon name="mat-drag-handle"></ng-icon> <ng-icon name="mat-drag-handle"></ng-icon>
@ -21,14 +21,16 @@
</mat-form-field> </mat-form-field>
<mat-form-field *ngIf="sortKey.sortType === 'Namespace'"> <mat-form-field *ngIf="sortKey.sortType === 'Namespace'">
<mat-label>Namespace Name</mat-label> <mat-label>Namespace Name</mat-label>
<input #namespaceInput (change)="sortKey.namespaceName = namespaceInput.value" <input #namespaceInput
[matAutocomplete]="namespaceAutocomplete" (change)="this.handlePresetChange(); sortKey.namespaceName = namespaceInput.value"
(keyup)="this.updateAutocompleteSuggestions(namespaceInput.value)"
(focus)="this.updateAutocompleteSuggestions(namespaceInput.value)" (focus)="this.updateAutocompleteSuggestions(namespaceInput.value)"
(keyup)="this.updateAutocompleteSuggestions(namespaceInput.value)"
[matAutocomplete]="namespaceAutocomplete"
[value]="sortKey.namespaceName ?? ''" [value]="sortKey.namespaceName ?? ''"
matInput matInput
required> required>
<mat-autocomplete #namespaceAutocomplete (optionSelected)="sortKey.namespaceName = $event.option.value"> <mat-autocomplete #namespaceAutocomplete
(optionSelected)="this.handlePresetChange(); sortKey.namespaceName = $event.option.value">
<mat-option *ngFor="let namespace of suggestedNamespaces" [value]="namespace.name"> <mat-option *ngFor="let namespace of suggestedNamespaces" [value]="namespace.name">
{{namespace.name}} {{namespace.name}}
</mat-option> </mat-option>
@ -37,16 +39,18 @@
<div *ngIf="sortKey.sortType !== 'Namespace'" class="filler"></div> <div *ngIf="sortKey.sortType !== 'Namespace'" class="filler"></div>
<mat-form-field> <mat-form-field>
<mat-label>Direction</mat-label> <mat-label>Direction</mat-label>
<mat-select [(value)]="sortKey.sortDirection" required> <mat-select (selectionChange)="this.handlePresetChange()" [(value)]="sortKey.sortDirection" required>
<mat-option value="Ascending">Ascending</mat-option> <mat-option value="Ascending">Ascending</mat-option>
<mat-option value="Descending">Descending</mat-option> <mat-option value="Descending">Descending</mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<button (click)="addNewSortKey()" *ngIf="sortEntries.indexOf(sortKey) === sortEntries.length -1" <button (click)="addNewSortKey()"
*ngIf="sortingPreset.sortKeys.indexOf(sortKey) === sortingPreset.sortKeys.length - 1"
mat-flat-button> mat-flat-button>
<ng-icon name="mat-add"></ng-icon> <ng-icon name="mat-add"></ng-icon>
</button> </button>
<button (click)="removeSortKey(sortKey)" *ngIf="sortEntries.indexOf(sortKey) !== sortEntries.length -1" <button (click)="removeSortKey(sortKey)"
*ngIf="sortingPreset.sortKeys.indexOf(sortKey) !== sortingPreset.sortKeys.length -1"
mat-flat-button> mat-flat-button>
<ng-icon name="mat-remove"></ng-icon> <ng-icon name="mat-remove"></ng-icon>
</button> </button>

28
mediarepo-ui/src/app/components/shared/sidebar/file-search/sort-dialog/sort-dialog.component.ts
Unescape Escape View File

@ -5,6 +5,7 @@ import {CdkDragDrop, moveItemInArray} from "@angular/cdk/drag-drop";
import {Namespace} from "../../../../../../api/models/Namespace"; import {Namespace} from "../../../../../../api/models/Namespace";
import {TagService} from "../../../../../services/tag/tag.service"; import {TagService} from "../../../../../services/tag/tag.service";
import {compareSearchResults} from "../../../../../utils/compare-utils"; import {compareSearchResults} from "../../../../../utils/compare-utils";
import {SortingPreset} from "../../../../../../api/models/SortingPreset";
@Component({ @Component({
selector: "app-sort-dialog", selector: "app-sort-dialog",
@ -14,31 +15,34 @@ import {compareSearchResults} from "../../../../../utils/compare-utils";
}) })
export class SortDialogComponent { export class SortDialogComponent {
public sortEntries: SortKey[] = []; public sortingPreset: SortingPreset = SortingPreset.fromValues(-1, []);
public suggestedNamespaces: Namespace[] = []; public suggestedNamespaces: Namespace[] = [];
private previousId: number = -1;
private namespaces: Namespace[] = []; private namespaces: Namespace[] = [];
constructor(public tagService: TagService, public dialogRef: MatDialogRef<SortDialogComponent>, @Inject( constructor(public tagService: TagService, public dialogRef: MatDialogRef<SortDialogComponent>, @Inject(
MAT_DIALOG_DATA) data: any) { MAT_DIALOG_DATA) data: any) {
this.sortEntries = data.sortEntries; this.sortingPreset = data.sortingPreset;
console.debug(this.sortEntries); console.debug(this.sortingPreset);
tagService.namespaces.subscribe( tagService.namespaces.subscribe(
namespaces => this.namespaces = namespaces); namespaces => this.namespaces = namespaces);
} }
addNewSortKey() { addNewSortKey() {
const sortKey = SortKey.fromValues("FileName", "Ascending", undefined); const sortKey = SortKey.fromValues("FileName", "Ascending", undefined);
this.sortEntries.push(sortKey); this.handlePresetChange();
this.sortingPreset.sortKeys.push(sortKey);
} }
public removeSortKey(sortKey: SortKey): void { public removeSortKey(sortKey: SortKey): void {
const index = this.sortEntries.indexOf(sortKey); const index = this.sortingPreset.sortKeys.indexOf(sortKey);
this.sortEntries.splice(index, 1); this.handlePresetChange();
this.sortingPreset.sortKeys.splice(index, 1);
} }
public confirmSort(): void { public confirmSort(): void {
this.dialogRef.close(this.sortEntries); this.dialogRef.close(this.sortingPreset);
} }
public cancelSort(): void { public cancelSort(): void {
@ -46,7 +50,8 @@ export class SortDialogComponent {
} }
public onSortEntryDrop(event: CdkDragDrop<SortKey[]>): void { public onSortEntryDrop(event: CdkDragDrop<SortKey[]>): void {
moveItemInArray(this.sortEntries, event.previousIndex, this.handlePresetChange();
moveItemInArray(this.sortingPreset.sortKeys, event.previousIndex,
event.currentIndex event.currentIndex
); );
} }
@ -56,4 +61,11 @@ export class SortDialogComponent {
(a, b) => compareSearchResults(value, a.name, b.name)) (a, b) => compareSearchResults(value, a.name, b.name))
.slice(0, 50); .slice(0, 50);
} }
public handlePresetChange() {
if (this.sortingPreset.id >= 0) {
this.previousId = this.sortingPreset.id;
this.sortingPreset.id = -1;
}
}
} }

22
mediarepo-ui/src/app/models/TabState.ts
Unescape Escape View File

@ -6,7 +6,7 @@ import {SortKey} from "../../api/models/SortKey";
import {debounceTime} from "rxjs/operators"; import {debounceTime} from "rxjs/operators";
import {mapNew} from "../../api/models/adaptors"; import {mapNew} from "../../api/models/adaptors";
import {SearchFilters} from "../../api/models/SearchFilters"; import {SearchFilters} from "../../api/models/SearchFilters";
import {SortKeyData} from "../../api/api-types/files"; import {SortingPreset} from "../../api/models/SortingPreset";
export class TabState { export class TabState {
public uuid: number; public uuid: number;
@ -17,12 +17,14 @@ export class TabState {
public files = new BehaviorSubject<File[]>([]); public files = new BehaviorSubject<File[]>([]);
public filters = new BehaviorSubject<SearchFilters>(new SearchFilters([])); public filters = new BehaviorSubject<SearchFilters>(new SearchFilters([]));
public sortKeys = new BehaviorSubject<SortKey[]>( public sortingPreset = new BehaviorSubject<SortingPreset>(SortingPreset.fromValues(
-1,
[SortKey.fromValues( [SortKey.fromValues(
"FileImportedTime", "FileImportedTime",
"Ascending", "Ascending",
undefined undefined
)]); )]
));
private fileService: FileService; private fileService: FileService;
@ -37,7 +39,7 @@ export class TabState {
if (this.category === TabCategory.Files) { if (this.category === TabCategory.Files) {
this.filters.pipe(debounceTime(500)) this.filters.pipe(debounceTime(500))
.subscribe(async () => await this.findFiles()); .subscribe(async () => await this.findFiles());
this.sortKeys.pipe(debounceTime(100)) this.sortingPreset.pipe(debounceTime(100))
.subscribe(async () => await this.findFiles()); .subscribe(async () => await this.findFiles());
} }
} }
@ -51,9 +53,9 @@ export class TabState {
dto.category, dto.category,
fileService fileService
); );
const sortKeys = dto.sortKeys.map((data: SortKeyData) => new SortKey(data));
state.filters.next(new SearchFilters(dto.filters ?? [])); state.filters.next(new SearchFilters(dto.filters ?? []));
state.sortKeys.next(sortKeys); state.sortingPreset.next(new SortingPreset(dto.sortingPreset));
state.mode.next(dto.mode ?? "grid"); state.mode.next(dto.mode ?? "grid");
state.selectedCD.next(dto.selectedFileHash); state.selectedCD.next(dto.selectedFileHash);
state.files.next((dto.files ?? []).map(mapNew(File))); state.files.next((dto.files ?? []).map(mapNew(File)));
@ -65,7 +67,7 @@ export class TabState {
this.loading.next(true); this.loading.next(true);
const files = await this.fileService.findFiles( const files = await this.fileService.findFiles(
this.filters.value, this.filters.value,
this.sortKeys.value this.sortingPreset.value.sortKeys
); );
this.files.next(files); this.files.next(files);
this.loading.next(false); this.loading.next(false);
@ -75,8 +77,8 @@ export class TabState {
this.filters.next(filters); this.filters.next(filters);
} }
public setSortKeys(keys: SortKey[]) { public setSortingPreset(preset: SortingPreset) {
this.sortKeys.next(keys); this.sortingPreset.next(preset);
} }
public getDTO(): any { public getDTO(): any {
@ -84,7 +86,7 @@ export class TabState {
uuid: this.uuid, uuid: this.uuid,
category: this.category, category: this.category,
filters: this.filters.value.getFilters(), filters: this.filters.value.getFilters(),
sortKeys: this.sortKeys.value.map(key => key.rawData()), sortingPreset: this.sortingPreset.value.rawData,
mode: this.mode.value, mode: this.mode.value,
selectedFileHash: this.selectedCD.value, selectedFileHash: this.selectedCD.value,
files: this.category === TabCategory.Import ? this.files.value.map( files: this.category === TabCategory.Import ? this.files.value.map(

2
mediarepo-ui/src/app/services/file/file.service.ts
Unescape Escape View File

@ -26,7 +26,7 @@ export class FileService {
return MediarepoApi.findFiles( return MediarepoApi.findFiles(
{ {
filters: filters.getFilters(), filters: filters.getFilters(),
sortBy: sortBy.map(k => k.rawData()) sortBy: sortBy.map(k => k.rawData)
}) })
.then(mapMany(mapNew(File))); .then(mapMany(mapNew(File)));
} }

22
mediarepo-ui/src/app/services/state/state.service.ts
Unescape Escape View File

@ -59,6 +59,16 @@ export class StateService {
this.state.next(state); this.state.next(state);
} }
/**
* Sets the state of the frontend
* @returns {Promise<void>}
*/
public async saveState(): Promise<void> {
if (this.repoService.selectedRepository.value) {
await MediarepoApi.setFrontendState({ state: this.state.value.serializeJson() });
}
}
private subscribeToState(state: AppState) { private subscribeToState(state: AppState) {
state.tabs.subscribe(async tabs => { state.tabs.subscribe(async tabs => {
this.tabSubscriptions.forEach(s => s.unsubscribe()); this.tabSubscriptions.forEach(s => s.unsubscribe());
@ -70,7 +80,7 @@ export class StateService {
private subscribeToTab(tab: TabState) { private subscribeToTab(tab: TabState) {
this.tabSubscriptions.push(tab.filters this.tabSubscriptions.push(tab.filters
.subscribe(() => this.stateChange.next())); .subscribe(() => this.stateChange.next()));
this.tabSubscriptions.push(tab.sortKeys this.tabSubscriptions.push(tab.sortingPreset
.subscribe(() => this.stateChange.next())); .subscribe(() => this.stateChange.next()));
this.tabSubscriptions.push( this.tabSubscriptions.push(
tab.selectedCD.subscribe(() => this.stateChange.next())); tab.selectedCD.subscribe(() => this.stateChange.next()));
@ -78,14 +88,4 @@ export class StateService {
tab.mode.subscribe(() => this.stateChange.next())); tab.mode.subscribe(() => this.stateChange.next()));
this.tabSubscriptions.push(tab.files.subscribe(() => this.stateChange.next())); this.tabSubscriptions.push(tab.files.subscribe(() => this.stateChange.next()));
} }
/**
* Sets the state of the frontend
* @returns {Promise<void>}
*/
public async saveState(): Promise<void> {
if (this.repoService.selectedRepository.value) {
await MediarepoApi.setFrontendState({state: this.state.value.serializeJson()});
}
}
} }

Write Preview
Loading…
Cancel
Save