Adding grouping selector UI

bpatrik · Aug 28, 2023 · 3f35c35 · 3f35c35
1 parent 0a1fb29
commit 3f35c35
Show file tree

Hide file tree

Showing 15 changed files with 262 additions and 228 deletions.
diff --git a/src/common/PG2ConfMap.ts b/src/common/PG2ConfMap.ts
@@ -1,20 +1,20 @@
-import {SortingMethods} from './entities/SortingMethods';
+import {SortingByTypes, SortingMethod} from './entities/SortingMethods';
 
 /**
  * This contains the action of the supported list of *.pg2conf files.
  * These files are passed down to the client as metaFiles (like photos and directories)
  */
 export const PG2ConfMap = {
   sorting: {
-    '.order_descending_name.pg2conf': SortingMethods.descName,
-    '.order_ascending_name.pg2conf': SortingMethods.ascName,
-    '.order_descending_date.pg2conf': SortingMethods.descDate,
-    '.order_ascending_date.pg2conf': SortingMethods.ascDate,
-    '.order_descending_rating.pg2conf': SortingMethods.descRating,
-    '.order_ascending_rating.pg2conf': SortingMethods.ascRating,
-    '.order_random.pg2conf': SortingMethods.random,
-    '.order_descending_person_count.pg2conf': SortingMethods.descPersonCount,
-    '.order_ascending_person_count.pg2conf': SortingMethods.descPersonCount,
+    '.order_descending_name.pg2conf': {method: SortingByTypes.Name, ascending: false} as SortingMethod,
+    '.order_ascending_name.pg2conf': {method: SortingByTypes.Name, ascending: true} as SortingMethod,
+    '.order_descending_date.pg2conf': {method: SortingByTypes.Date, ascending: false} as SortingMethod,
+    '.order_ascending_date.pg2conf': {method: SortingByTypes.Date, ascending: true} as SortingMethod,
+    '.order_descending_rating.pg2conf': {method: SortingByTypes.Rating, ascending: false} as SortingMethod,
+    '.order_ascending_rating.pg2conf': {method: SortingByTypes.Rating, ascending: true} as SortingMethod,
+    '.order_random.pg2conf': {method: SortingByTypes.Rating, ascending: null} as SortingMethod,
+    '.order_descending_person_count.pg2conf': {method: SortingByTypes.PersonCount, ascending: false} as SortingMethod,
+    '.order_ascending_person_count.pg2conf': {method: SortingByTypes.PersonCount, ascending: true} as SortingMethod,
   },
 };
 

diff --git a/src/common/config/private/PrivateConfig.ts b/src/common/config/private/PrivateConfig.ts
@@ -18,6 +18,7 @@ import {
   ClientPhotoConvertingConfig,
   ClientServiceConfig,
   ClientSharingConfig,
+  ClientSortingConfig,
   ClientThumbnailConfig,
   ClientUserConfig,
   ClientVideoConfig,
@@ -28,7 +29,7 @@ import {SubConfigClass} from 'typeconfig/src/decorators/class/SubConfigClass';
 import {ConfigProperty} from 'typeconfig/src/decorators/property/ConfigPropoerty';
 import {DefaultsJobs} from '../../entities/job/JobDTO';
 import {SearchQueryDTO, SearchQueryTypes, TextSearch,} from '../../entities/SearchQueryDTO';
-import {SortingMethods} from '../../entities/SortingMethods';
+import {SortingByTypes} from '../../entities/SortingMethods';
 import {UserRoles} from '../../entities/UserDTO';
 import {MediaPickDTO} from '../../entities/MediaPickDTO';
 import {MessagingConfig} from './MessagingConfig';
@@ -888,18 +889,18 @@ export class ServerAlbumCoverConfig {
     text: '',
   } as TextSearch;
   @ConfigProperty({
-    arrayType: SortingMethods,
+    arrayType: ClientSortingConfig,
     tags: {
       name: $localize`Cover Sorting`,
       uiResetNeeded: {db: true},
       priority: ConfigPriority.advanced
     },
     description: $localize`If multiple cover is available sorts them by these methods and selects the first one.`,
   })
-  Sorting: SortingMethods[] = [
-    SortingMethods.descRating,
-    SortingMethods.descDate,
-    SortingMethods.descPersonCount,
+  Sorting: ClientSortingConfig[] = [
+    new ClientSortingConfig(SortingByTypes.Rating, false),
+    new ClientSortingConfig(SortingByTypes.Date, false),
+    new ClientSortingConfig(SortingByTypes.PersonCount, false)
   ];
 }
 

diff --git a/src/common/config/public/ClientConfig.ts b/src/common/config/public/ClientConfig.ts
@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-inferrable-types */
 import 'reflect-metadata';
-import {SortingMethods} from '../../entities/SortingMethods';
+import {SortingByTypes, SortingMethod} from '../../entities/SortingMethods';
 import {UserRoles} from '../../entities/UserDTO';
 import {ConfigProperty, SubConfigClass} from 'typeconfig/common';
 import {SearchQueryDTO} from '../../entities/SearchQueryDTO';
@@ -519,7 +519,7 @@ export class ClientMapConfig {
     arrayType: MapPathGroupConfig,
     tags: {
       name: $localize`Path theme groups`,
-      githubIssue:647,
+      githubIssue: 647,
       priority: ConfigPriority.underTheHood
     } as TAGS,
     description: $localize`Markers are grouped and themed by these settings`,
@@ -880,6 +880,30 @@ export class ThemesConfig {
     )];
 }
 
+@SubConfigClass<TAGS>({tags: {client: true}, softReadonly: true})
+export class ClientSortingConfig implements SortingMethod {
+
+
+  constructor(method: SortingByTypes = SortingByTypes.Date, ascending: boolean = true) {
+    this.method = method;
+    this.ascending = ascending;
+  }
+
+  @ConfigProperty({
+    type: SortingByTypes,
+    tags: {
+      name: $localize`Method`,
+    },
+  })
+  method: SortingByTypes = SortingByTypes.Date;
+
+  @ConfigProperty({
+    tags: {
+      name: $localize`Ascending`,
+    },
+  })
+  ascending: boolean = true;
+}
 
 @SubConfigClass<TAGS>({tags: {client: true}, softReadonly: true})
 export class ClientGalleryConfig {
@@ -901,22 +925,24 @@ export class ClientGalleryConfig {
   enableOnScrollRendering: boolean = true;
 
   @ConfigProperty({
-    type: SortingMethods, tags: {
+    type: ClientSortingConfig,
+    tags: {
       name: $localize`Default sorting`,
       priority: ConfigPriority.advanced,
     },
     description: $localize`Default sorting method for photo and video in a directory results.`
   })
-  defaultPhotoSortingMethod: SortingMethods = SortingMethods.ascDate;
+  defaultPhotoSortingMethod: ClientSortingConfig = new ClientSortingConfig(SortingByTypes.Date, true);
 
   @ConfigProperty({
-    type: SortingMethods, tags: {
+    type: ClientSortingConfig,
+    tags: {
       name: $localize`Default search sorting`,
       priority: ConfigPriority.advanced,
     },
     description: $localize`Default sorting method for photo and video in a search results.`
   })
-  defaultSearchSortingMethod: SortingMethods = SortingMethods.descDate;
+  defaultSearchSortingMethod: ClientSortingConfig = new ClientSortingConfig(SortingByTypes.Date, false);
 
   @ConfigProperty({
     tags: {

diff --git a/src/common/entities/MediaPickDTO.ts b/src/common/entities/MediaPickDTO.ts
@@ -1,8 +1,8 @@
 import {SearchQueryDTO} from './SearchQueryDTO';
-import {SortingMethods} from './SortingMethods';
+import {SortingMethod} from './SortingMethods';
 
 export interface MediaPickDTO {
   searchQuery: SearchQueryDTO;
-  sortBy: SortingMethods[];
+  sortBy: SortingMethod[];
   pick: number;
 }
diff --git a/src/common/entities/SortingMethods.ts b/src/common/entities/SortingMethods.ts
@@ -2,14 +2,15 @@
  * Order of these enums determines the order in the UI.
  * Keep spaces between the values, so new value can be added in between without changing the existing ones
  */
-export enum SortingMethods {
-  ascName = 10,
-  descName = 11,
-  ascDate = 20,
-  descDate = 21,
-  ascRating = 30,
-  descRating = 31,
-  ascPersonCount = 40,
-  descPersonCount = 41,
+export enum SortingByTypes {
+  Name = 10,
+  Date = 20,
+  Rating = 30,
+  PersonCount = 40,
   random = 100 // let's keep random as the last in the UI
 }
+
+export interface SortingMethod {
+  method: SortingByTypes;
+  ascending: boolean;
+}
diff --git a/src/frontend/app/pipes/StringifySortingMethod.ts b/src/frontend/app/pipes/StringifySortingMethod.ts
@@ -1,12 +1,12 @@
-import { Pipe, PipeTransform } from '@angular/core';
-import { SortingMethods } from '../../../common/entities/SortingMethods';
+import {Pipe, PipeTransform} from '@angular/core';
+import {SortingByTypes} from '../../../common/entities/SortingMethods';
 import {EnumTranslations} from '../ui/EnumTranslations';
 
-@Pipe({ name: 'stringifySorting' })
+@Pipe({name: 'stringifySorting'})
 export class StringifySortingMethod implements PipeTransform {
 
-  transform(method: SortingMethods): string {
-    return EnumTranslations[SortingMethods[method]];
+  transform(method: SortingByTypes): string {
+    return EnumTranslations[SortingByTypes[method]];
   }
 }
 
diff --git a/src/frontend/app/ui/EnumTranslations.ts b/src/frontend/app/ui/EnumTranslations.ts
@@ -1,9 +1,9 @@
 import {UserRoles} from '../../../common/entities/UserDTO';
 import {ConfigPriority, MapProviders, NavigationLinkTypes, ScrollUpModes} from '../../../common/config/public/ClientConfig';
 import {ReIndexingSensitivity} from '../../../common/config/private/PrivateConfig';
-import {SortingMethods} from '../../../common/entities/SortingMethods';
 import {SearchQueryTypes} from '../../../common/entities/SearchQueryDTO';
 import {ConfigStyle} from './settings/settings.service';
+import {SortingByTypes} from '../../../common/entities/SortingMethods';
 
 export const EnumTranslations: Record<string, string> = {};
 export const enumToTranslatedArray = (EnumType: any): { key: number; value: string }[] => {
@@ -44,15 +44,11 @@ EnumTranslations[ReIndexingSensitivity[ReIndexingSensitivity.high]] = $localize`
 EnumTranslations[ReIndexingSensitivity[ReIndexingSensitivity.medium]] = $localize`medium`;
 
 
-EnumTranslations[SortingMethods[SortingMethods.descDate]] = $localize`descending date`;
-EnumTranslations[SortingMethods[SortingMethods.ascDate]] = $localize`ascending date`;
-EnumTranslations[SortingMethods[SortingMethods.descName]] = $localize`descending name`;
-EnumTranslations[SortingMethods[SortingMethods.ascName]] = $localize`ascending name`;
-EnumTranslations[SortingMethods[SortingMethods.descRating]] = $localize`descending rating`;
-EnumTranslations[SortingMethods[SortingMethods.ascRating]] = $localize`ascending rating`;
-EnumTranslations[SortingMethods[SortingMethods.random]] = $localize`random`;
-EnumTranslations[SortingMethods[SortingMethods.ascPersonCount]] = $localize`ascending persons`;
-EnumTranslations[SortingMethods[SortingMethods.descPersonCount]] = $localize`descending persons`;
+EnumTranslations[SortingByTypes[SortingByTypes.Date]] = $localize`date`;
+EnumTranslations[SortingByTypes[SortingByTypes.Name]] = $localize`name`;
+EnumTranslations[SortingByTypes[SortingByTypes.Rating]] = $localize`rating`;
+EnumTranslations[SortingByTypes[SortingByTypes.random]] = $localize`random`;
+EnumTranslations[SortingByTypes[SortingByTypes.PersonCount]] = $localize`persons`;
 
 
 EnumTranslations[NavigationLinkTypes[NavigationLinkTypes.url]] = $localize`Url`;

diff --git a/src/frontend/app/ui/gallery/cache.gallery.service.ts b/src/frontend/app/ui/gallery/cache.gallery.service.ts
@@ -1,16 +1,15 @@
 import {Injectable} from '@angular/core';
-import {DirectoryPathDTO, ParentDirectoryDTO,} from '../../../../common/entities/DirectoryDTO';
+import {ParentDirectoryDTO,} from '../../../../common/entities/DirectoryDTO';
 import {Utils} from '../../../../common/Utils';
 import {Config} from '../../../../common/config/public/Config';
 import {IAutoCompleteItem} from '../../../../common/entities/AutoCompleteItem';
 import {MediaDTO} from '../../../../common/entities/MediaDTO';
-import {SortingMethods} from '../../../../common/entities/SortingMethods';
+import {SortingMethod} from '../../../../common/entities/SortingMethods';
 import {VersionService} from '../../model/version.service';
 import {SearchQueryDTO, SearchQueryTypes,} from '../../../../common/entities/SearchQueryDTO';
 import {ContentWrapper} from '../../../../common/entities/ConentWrapper';
 import {ContentWrapperWithError} from './content.service';
 import {ThemeModes} from '../../../../common/config/public/ClientConfig';
-import {SearchResultDTO} from '../../../../common/entities/SearchResultDTO';
 
 interface CacheItem<T> {
   timestamp: number;
@@ -97,7 +96,7 @@ export class GalleryCacheService {
     }
   }
 
-  public getSorting(cw: ContentWrapper): SortingMethods {
+  public getSorting(cw: ContentWrapper): SortingMethod {
     let key = GalleryCacheService.SORTING_PREFIX;
     if (cw?.searchResult?.searchQuery) {
       key += JSON.stringify(cw.searchResult.searchQuery);
@@ -106,7 +105,7 @@ export class GalleryCacheService {
     }
     const tmp = localStorage.getItem(key);
     if (tmp != null) {
-      return parseInt(tmp, 10);
+      return JSON.parse(tmp);
     }
     return null;
   }
@@ -128,21 +127,20 @@ export class GalleryCacheService {
 
   public setSorting(
     cw: ContentWrapper,
-    sorting: SortingMethods
-  ): SortingMethods {
+    sorting: SortingMethod
+  ): void {
     try {
       let key = GalleryCacheService.SORTING_PREFIX;
       if (cw?.searchResult?.searchQuery) {
         key += JSON.stringify(cw.searchResult.searchQuery);
       } else {
         key += cw?.directory?.path + '/' + cw?.directory?.name;
       }
-      localStorage.setItem(key, sorting.toString());
+      localStorage.setItem(key, JSON.stringify(sorting));
     } catch (e) {
       this.reset();
       console.error(e);
     }
-    return null;
   }
 
   public getAutoComplete(

diff --git a/src/frontend/app/ui/gallery/navigator/navigator.gallery.component.html b/src/frontend/app/ui/gallery/navigator/navigator.gallery.component.html
@@ -59,35 +59,77 @@
                 [class.btn-secondary]="sortingService.sorting.value !== DefaultSorting"
                 [class.btn-outline-secondary]="sortingService.sorting.value == DefaultSorting"
                 aria-controls="sorting-dropdown">
-          <app-sorting-method-icon [method]="sortingService.sorting.value"></app-sorting-method-icon>
+          <ng-icon
+            [name]="sortingService.sorting.value.ascending ? 'ionArrowDownOutline' : 'ionArrowUpOutline'"></ng-icon>
+          <app-sorting-method-icon [method]="sortingService.sorting.value.method"></app-sorting-method-icon>
         </button>
         <div id="sorting-dropdown" *dropdownMenu class="dropdown-menu dropdown-menu-right"
              role="menu" aria-labelledby="button-alignment">
           <div class="row flex-nowrap">
-            <div class="col-6">
-              Sorting
+            <div class="col-6  p-1 border-end">
+              <span class="ps-2">Sorting</span>
               <div class="row">
-                <div class="dropdown-item sorting-grouping-item" role="menuitem"
-                    *ngFor="let type of sortingMethodsType"
-                    (click)="setSorting(type.key)">
+                <div class="dropdown-item sorting-grouping-item ps-3 pe-3"  role="menuitem"
+                     [class.active]="sortingService.sorting.value.method == type.key"
+                     *ngFor="let type of sortingByTypes"
+                     (click)="setSortingBy(type.key)">
                   <div class="me-2 d-inline-block">
                     <app-sorting-method-icon [method]="type.key"></app-sorting-method-icon>
                   </div>
                   <div class="d-inline-block">{{type.key | stringifySorting}}</div>
                 </div>
+                <hr>
+
+                <div class="dropdown-item sorting-grouping-item ps-3 pe-3" role="menuitem"
+                     [class.active]="sortingService.sorting.value.ascending == true"
+                     (click)="setSortingAscending(true)">
+                  <div class="me-2 d-inline-block">
+                    <ng-icon name="">ionArrowUpOutline</ng-icon>
+                  </div>
+                  <div class="d-inline-block" i18n>ascending</div>
+                </div>
+
+                <div class="dropdown-item sorting-grouping-item ps-3 pe-3" role="menuitem"
+                     [class.active]="sortingService.sorting.value.ascending == false"
+                     (click)="setSortingAscending(false)">
+                  <div class="me-2 d-inline-block">
+                    <ng-icon name="ionArrowDownOutline"></ng-icon>
+                  </div>
+                  <div class="d-inline-block" i18n>descending</div>
+                </div>
+
               </div>
             </div>
-            <div class="col-6">
-              Grouping
+            <div class="col-6 p-1">
+              <span class="ps-2">Grouping</span>
               <div class="row">
-                <div class="dropdown-item sorting-grouping-item" role="menuitem"
-                    *ngFor="let type of sortingMethodsType"
-                    (click)="setGrouping(type.key)">
+                <div class="dropdown-item sorting-grouping-item ps-3 pe-3" role="menuitem"
+                     [class.active]="sortingService.grouping.value.method == type.key"
+                     *ngFor="let type of sortingByTypes"
+                     (click)="setGroupingBy(type.key)">
                   <div class="me-2 d-inline-block">
                     <app-sorting-method-icon [method]="type.key"></app-sorting-method-icon>
                   </div>
                   <div class="d-inline-block">{{type.key | stringifySorting}}</div>
                 </div>
+                <hr>
+
+                <div class="dropdown-item sorting-grouping-item ps-3 pe-3" role="menuitem"
+                     [class.active]="sortingService.grouping.value.ascending == true"
+                     (click)="setGroupingAscending(true)">
+                  <div class="me-2 d-inline-block">
+                    <ng-icon name="ionArrowUpOutline"></ng-icon>
+                  </div>
+                  <div class="d-inline-block" i18n>ascending</div>
+                </div>
+                <div class="dropdown-item sorting-grouping-item ps-3 pe-3" role="menuitem"
+                     [class.active]="sortingService.grouping.value.ascending == false"
+                     (click)="setGroupingAscending(false)">
+                  <div class="me-2 d-inline-block">
+                    <ng-icon name="ionArrowDownOutline"></ng-icon>
+                  </div>
+                  <div class="d-inline-block" i18n>descending</div>
+                </div>
               </div>
             </div>
           </div>