xuthus/pigallery2
1
0
Fork 0
mirror of https://github.com/xuthus83/pigallery2.git synced 2025-01-14 14:43:17 +08:00
Code Actions Projects Activity

Improve grouping UI

Browse Source
This commit is contained in:
Patrik J. Braun 2023-08-29 22:43:27 +02:00
parent 434e6aaacd
commit b6d8e5dfd1
4 changed files with 92 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/frontend/app/ui/gallery/cache.gallery.service.ts
View File

@ -23,6 +23,7 @@ export class GalleryCacheService {
private static readonly INSTANT_SEARCH_PREFIX = 'INSTANT_SEARCH:';
private static readonly SEARCH_PREFIX = 'SEARCH:';
private static readonly SORTING_PREFIX = 'SORTING:';
private static readonly GROUPING_PREFIX = 'GROUPING:';
private static readonly VERSION = 'VERSION';
private static readonly SLIDESHOW_SPEED = 'SLIDESHOW_SPEED';
private static THEME_MODE = 'THEME_MODE';
@ -96,8 +97,34 @@ export class GalleryCacheService {
}
}
public getGrouping(cw: ContentWrapper): SortingMethod {
return this.getSortOrGroup(GalleryCacheService.GROUPING_PREFIX, cw);
}
public getSorting(cw: ContentWrapper): SortingMethod {
let key = GalleryCacheService.SORTING_PREFIX;
return this.getSortOrGroup(GalleryCacheService.SORTING_PREFIX, cw);
}
public setGrouping(cw: ContentWrapper, sorting: SortingMethod): void {
return this.setSortOrGroup(GalleryCacheService.GROUPING_PREFIX, cw, sorting);
}
public setSorting(cw: ContentWrapper,
sorting: SortingMethod): void {
return this.setSortOrGroup(GalleryCacheService.SORTING_PREFIX, cw, sorting);
}
public removeGrouping(cw: ContentWrapper): void {
return this.removeSortOrGroup(GalleryCacheService.GROUPING_PREFIX, cw);
}
public removeSorting(cw: ContentWrapper): void {
return this.removeSortOrGroup(GalleryCacheService.SORTING_PREFIX, cw);
}
private getSortOrGroup(prefix: string, cw: ContentWrapper): SortingMethod {
let key = prefix;
if (cw?.searchResult?.searchQuery) {
key += JSON.stringify(cw.searchResult.searchQuery);
} else {
@ -110,7 +137,8 @@ export class GalleryCacheService {
return null;
}
public removeSorting(cw: ContentWrapper): void {
private removeSortOrGroup(prefix: string, cw: ContentWrapper): void {
try {
let key = GalleryCacheService.SORTING_PREFIX;
if (cw?.searchResult?.searchQuery) {
@ -125,12 +153,13 @@ export class GalleryCacheService {
}
}
public setSorting(
private setSortOrGroup(
prefix: string,
cw: ContentWrapper,
sorting: SortingMethod
): void {
try {
let key = GalleryCacheService.SORTING_PREFIX;
let key = prefix;
if (cw?.searchResult?.searchQuery) {
key += JSON.stringify(cw.searchResult.searchQuery);
} else {

27
src/frontend/app/ui/gallery/navigator/navigator.gallery.component.html
View File

@ -54,7 +54,7 @@
<div class="divider">&nbsp;</div>
</ng-container>
<div class="btn-group" dropdown #dropdown="bs-dropdown" placement="bottom right"
[autoClose]="false"
[insideClick]="true"
title="Sort and group" i18n-title>
<button id="button-alignment" dropdownToggle type="button"
class="btn dropdown-toggle btn-outline-secondary btn-navigator"
@ -114,7 +114,30 @@
</div>
</div>
<div class="col p-1">
<h6 class="ps-2">Grouping</h6>
<h6 class="ps-2">Grouping
<div class="btn-group btn-group-sm" dropdown #dropdown="bs-dropdown" placement="bottom right">
<button id="button-basic" dropdownToggle type="button" class="btn dropdown-toggle"
[class.btn-primary]="groupingFollowSorting"
[class.btn-secondary]="!groupingFollowSorting"
aria-controls="dropdown-basic">
<ng-container *ngIf="groupingFollowSorting" i18n>Follow</ng-container>
<ng-container *ngIf="!groupingFollowSorting" i18n>Indep.</ng-container>
</button>
<ul id="dropdown-basic" *dropdownMenu class="dropdown-menu dropdown-menu-right"
role="menu" aria-labelledby="button-basic">
<li class="dropdown-item"
[class.active]="groupingFollowSorting"
(click)="groupingFollowSorting=true"
role="menuitem" i18n>Follow Sorting
</li>
<li class="dropdown-item"
[class.active]="!groupingFollowSorting"
(click)="groupingFollowSorting=false"
role="menuitem" i18n>Independent
</li>
</ul>
</div>
</h6>
<div class="row">
<div class="dropdown-item sorting-grouping-item ps-3 pe-3" role="menuitem"
[class.active]="sortingService.grouping.value.method == type.key"

17
src/frontend/app/ui/gallery/navigator/navigator.gallery.component.ts
View File

@ -43,6 +43,7 @@ export class GalleryNavigatorComponent {
};
@ViewChild('dropdown', {static: true}) dropdown: BsDropdownDirective;
@ViewChild('navigator', {read: ElementRef}) navigatorElement: ElementRef<HTMLInputElement>;
public groupingFollowSorting = true; // if grouping should be set after sorting automatically
constructor(
public authService: AuthenticationService,
@ -157,13 +158,14 @@ export class GalleryNavigatorComponent {
this.sortingService.setSorting(s);
// you cannot group by random
if (sorting === SortingByTypes.random) {
if (sorting === SortingByTypes.random ||
// if grouping is disabled, do not update it
this.sortingService.grouping.value.method === null || !this.groupingFollowSorting
) {
return;
}
// if grouping is disabled, do not update it
if (this.sortingService.grouping.value.method !== null) {
this.sortingService.setGrouping(s);
}
this.sortingService.setGrouping(s);
}
setSortingAscending(asc: boolean) {
@ -171,9 +173,10 @@ export class GalleryNavigatorComponent {
this.sortingService.setSorting(s);
// if grouping is disabled, do not update it
if (this.sortingService.grouping.value.method !== null) {
this.sortingService.setGrouping(s);
if (this.sortingService.grouping.value.method !== null || !this.groupingFollowSorting) {
return;
}
this.sortingService.setGrouping(s);
}
setGroupingBy(grouping: SortingByTypes): void {

27
src/frontend/app/ui/gallery/navigator/sorting.service.ts
View File

@ -32,17 +32,23 @@ export class GallerySortingService {
{method: Config.Gallery.defaultPhotoSortingMethod.method, ascending: Config.Gallery.defaultPhotoSortingMethod.ascending}
);
this.grouping = new BehaviorSubject(
{method: Config.Gallery.defaultPhotoSortingMethod.method, ascending: Config.Gallery.defaultPhotoSortingMethod.ascending}
{method: Config.Gallery.defaultPhotoGroupingMethod.method, ascending: Config.Gallery.defaultPhotoGroupingMethod.ascending}
);
this.galleryService.content.subscribe((c) => {
if (c) {
const sort = this.galleryCacheService.getSorting(c);
const group = this.galleryCacheService.getGrouping(c);
if (sort !== null) {
this.sorting.next(sort);
return;
} else {
this.sorting.next(this.getDefaultSorting(c));
}
if (group !== null) {
this.grouping.next(group);
} else {
this.grouping.next(this.getDefaultGrouping(c));
}
}
this.sorting.next(this.getDefaultSorting(c));
});
}
@ -98,6 +104,21 @@ export class GallerySortingService {
setGrouping(grouping: SortingMethod): void {
this.grouping.next(grouping);
if (this.galleryService.content.value) {
if (
grouping !==
this.getDefaultGrouping(this.galleryService.content.value)
) {
this.galleryCacheService.setGrouping(
this.galleryService.content.value,
grouping
);
} else {
this.galleryCacheService.removeGrouping(
this.galleryService.content.value
);
}
}
}
private sortMedia(sorting: SortingMethod, media: MediaDTO[]): void {