Refactor the config a bit to make it easier to understand: #587

src/backend/middlewares/GalleryMWs.ts

@@ -84,7 +84,7 @@ export class GalleryMWs {
     res: Response,
     next: NextFunction
   ): Promise<void> {
-    if (Config.Gallery.enableDownloadZip === false) {
+    if (Config.Gallery.NavBar.enableDownloadZip === false) {
       return next();
     }
     const directoryName = req.params['directory'] || '/';

src/common/config/public/ClientConfig.ts

@@ -702,8 +702,138 @@ export class NavigationLinkConfig {
   }
 }
 
+
+@SubConfigClass<TAGS>({tags: {client: true}, softReadonly: true})
+export class ClientSortingConfig implements SortingMethod {
+  constructor(method: number = SortByTypes.Date, ascending: boolean = true) {
+    this.method = method;
+    this.ascending = ascending;
+  }
+
+  @ConfigProperty({
+    type: SortByTypes,
+    tags: {
+      name: $localize`Method`,
+    },
+  })
+  method: number = SortByTypes.Date;
+
+  @ConfigProperty({
+    tags: {
+      name: $localize`Ascending`,
+    },
+  })
+  ascending: boolean = true;
+}
+
+
+@SubConfigClass<TAGS>({tags: {client: true}, softReadonly: true})
+export class ClientGroupingConfig implements GroupingMethod {
+  constructor(method: number = GroupByTypes.Date, ascending: boolean = true) {
+    this.method = method;
+    this.ascending = ascending;
+  }
+
+  @ConfigProperty({
+    type: GroupByTypes,
+    tags: {
+      name: $localize`Method`,
+    },
+  })
+  method: number = GroupByTypes.Date;
+
+  @ConfigProperty({
+    tags: {
+      name: $localize`Ascending`,
+    },
+  })
+  ascending: boolean = true;
+}
+
+
+@SubConfigClass<TAGS>({tags: {client: true}, softReadonly: true})
+export class NavBarSortingAndGroupingConfig {
+
+  @ConfigProperty({
+    type: ClientSortingConfig,
+    tags: {
+      name: $localize`Default sorting`,
+      priority: ConfigPriority.advanced,
+    },
+    description: $localize`Default sorting method for photo and video in a directory results.`
+  })
+  defaultPhotoSortingMethod: ClientSortingConfig = new ClientSortingConfig(SortByTypes.Date, true);
+
+  @ConfigProperty({
+    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: ClientSortingConfig = new ClientSortingConfig(SortByTypes.Date, false);
+
+  @ConfigProperty({
+    type: ClientGroupingConfig,
+    tags: {
+      name: $localize`Default grouping`,
+      githubIssue: 706,
+      priority: ConfigPriority.advanced,
+    } as TAGS,
+    description: $localize`Default grouping method for photo and video in a directory results.`
+  })
+  defaultPhotoGroupingMethod: ClientGroupingConfig = new ClientGroupingConfig(GroupByTypes.Date, true);
+
+  @ConfigProperty({
+    type: ClientGroupingConfig,
+    tags: {
+      name: $localize`Default search grouping`,
+      githubIssue: 706,
+      priority: ConfigPriority.advanced,
+    },
+    description: $localize`Default grouping method for photo and video in a search results.`
+  })
+  defaultSearchGroupingMethod: ClientGroupingConfig = new ClientGroupingConfig(GroupByTypes.Date, false);
+
+}
+
 @SubConfigClass<TAGS>({tags: {client: true}, softReadonly: true})
 export class NavBarConfig {
+  @ConfigProperty({
+    tags: {
+      name: $localize`Download Zip`,
+      priority: ConfigPriority.advanced,
+      experimental: true,
+      githubIssue: 52
+    },
+    description: $localize`Enable download zip of a directory contents Directory flattening. (Does not work for searches.)`
+  })
+  enableDownloadZip: boolean = false;
+
+  @ConfigProperty({
+    tags: {
+      name: $localize`Directory flattening`,
+      priority: ConfigPriority.advanced,
+      experimental: true,
+      githubIssue: 174
+    },
+    description: $localize`Adds a button to flattens the file structure, by listing the content of all subdirectories. (Won't work if the gallery has multiple folders with the same path.)`
+  })
+  enableDirectoryFlattening: boolean = false;
+
+  @ConfigProperty({
+    type: GridSizes,
+    tags: {
+      name: $localize`Default grid size`,
+      githubIssue: 716,
+      priority: ConfigPriority.advanced,
+    },
+    description: $localize`Default grid size that is used to render photos and videos.`
+  })
+  defaultGidSize: GridSizes = GridSizes.medium;
+
+
   @ConfigProperty({
     tags: {
       name: $localize`Show item count`,
@@ -712,6 +842,7 @@ export class NavBarConfig {
     description: $localize`Shows the number photos and videos on the navigation bar.`,
   })
   showItemCount: boolean = true;
+
   @ConfigProperty({
     arrayType: NavigationLinkConfig,
     tags: {
@@ -755,6 +886,16 @@ export class NavBarConfig {
   })
   showScrollUpButton: ScrollUpModes = ScrollUpModes.mobileOnly;
 
+
+  @ConfigProperty({
+    type: NavBarSortingAndGroupingConfig,
+    tags: {
+      name: $localize`Sorting and grouping`,
+      priority: ConfigPriority.advanced,
+    },
+  })
+  SortingGrouping: NavBarSortingAndGroupingConfig = new NavBarSortingAndGroupingConfig();
+
 }
 
 @SubConfigClass<TAGS>({tags: {client: true}, softReadonly: true})
@@ -880,51 +1021,6 @@ export class ThemesConfig {
     )];
 }
 
-@SubConfigClass<TAGS>({tags: {client: true}, softReadonly: true})
-export class ClientSortingConfig implements SortingMethod {
-  constructor(method: number = SortByTypes.Date, ascending: boolean = true) {
-    this.method = method;
-    this.ascending = ascending;
-  }
-
-  @ConfigProperty({
-    type: SortByTypes,
-    tags: {
-      name: $localize`Method`,
-    },
-  })
-  method: number = SortByTypes.Date;
-
-  @ConfigProperty({
-    tags: {
-      name: $localize`Ascending`,
-    },
-  })
-  ascending: boolean = true;
-}
-
-@SubConfigClass<TAGS>({tags: {client: true}, softReadonly: true})
-export class ClientGroupingConfig implements GroupingMethod {
-  constructor(method: number = GroupByTypes.Date, ascending: boolean = true) {
-    this.method = method;
-    this.ascending = ascending;
-  }
-
-  @ConfigProperty({
-    type: GroupByTypes,
-    tags: {
-      name: $localize`Method`,
-    },
-  })
-  method: number = GroupByTypes.Date;
-
-  @ConfigProperty({
-    tags: {
-      name: $localize`Ascending`,
-    },
-  })
-  ascending: boolean = true;
-}
 
 @SubConfigClass<TAGS>({tags: {client: true}, softReadonly: true})
 export class ClientGalleryConfig {
@@ -945,59 +1041,6 @@ export class ClientGalleryConfig {
   })
   enableOnScrollRendering: boolean = true;
 
-  @ConfigProperty({
-    type: ClientSortingConfig,
-    tags: {
-      name: $localize`Default sorting`,
-      priority: ConfigPriority.advanced,
-    },
-    description: $localize`Default sorting method for photo and video in a directory results.`
-  })
-  defaultPhotoSortingMethod: ClientSortingConfig = new ClientSortingConfig(SortByTypes.Date, true);
-
-  @ConfigProperty({
-    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: ClientSortingConfig = new ClientSortingConfig(SortByTypes.Date, false);
-
-  @ConfigProperty({
-    type: ClientGroupingConfig,
-    tags: {
-      name: $localize`Default grouping`,
-      githubIssue: 706,
-      priority: ConfigPriority.advanced,
-    } as TAGS,
-    description: $localize`Default grouping method for photo and video in a directory results.`
-  })
-  defaultPhotoGroupingMethod: ClientGroupingConfig = new ClientGroupingConfig(GroupByTypes.Date, true);
-
-  @ConfigProperty({
-    type: ClientGroupingConfig,
-    tags: {
-      name: $localize`Default search grouping`,
-      githubIssue: 706,
-      priority: ConfigPriority.advanced,
-    },
-    description: $localize`Default grouping method for photo and video in a search results.`
-  })
-  defaultSearchGroupingMethod: ClientGroupingConfig = new ClientGroupingConfig(GroupByTypes.Date, false);
-
-  @ConfigProperty({
-    type: GridSizes,
-    tags: {
-      name: $localize`Default grid size`,
-      githubIssue: 716,
-      priority: ConfigPriority.advanced,
-    },
-    description: $localize`Default grid size that is used to render photos and videos.`
-  })
-  defaultGidSize: GridSizes = GridSizes.medium;
-
   @ConfigProperty({
     tags: {
       name: $localize`Sort directories by date`,
@@ -1018,6 +1061,7 @@ export class ClientGalleryConfig {
   @ConfigProperty({
     tags: {
       name: $localize`Navigation bar`,
+      uiIcon: 'ionMenuOutline',
       priority: ConfigPriority.advanced,
     } as TAGS
   })
@@ -1030,26 +1074,7 @@ export class ClientGalleryConfig {
     description: $localize`Show the caption (IPTC 120) tags from the EXIF data instead of the filenames.`
   })
   captionFirstNaming: boolean = false; // shows the caption instead of the filename in the photo grid
-  @ConfigProperty({
+
-    tags: {
-      name: $localize`Download Zip`,
-      priority: ConfigPriority.advanced,
-      experimental: true,
-      githubIssue: 52
-    },
-    description: $localize`Enable download zip of a directory contents Directory flattening. (Does not work for searches.)`
-  })
-  enableDownloadZip: boolean = false;
-  @ConfigProperty({
-    tags: {
-      name: $localize`Directory flattening`,
-      priority: ConfigPriority.advanced,
-      experimental: true,
-      githubIssue: 174
-    },
-    description: $localize`Adds a button to flattens the file structure, by listing the content of all subdirectories. (Won't work if the gallery has multiple folders with the same path.)`
-  })
-  enableDirectoryFlattening: boolean = false;
 
   @ConfigProperty({
     tags: {

src/frontend/app/ui/gallery/navigator/navigator.gallery.component.html

@@ -26,7 +26,7 @@
                 <div class="divider">&nbsp;</div>
             </ng-container>
 
-            <ng-container *ngIf="config.Gallery.enableDownloadZip && isDirectory && ItemCount > 0">
+            <ng-container *ngIf="config.Gallery.NavBar.enableDownloadZip && isDirectory && ItemCount > 0">
                 <a [href]="getDownloadZipLink()"
                    class="btn  btn-outline-secondary btn-navigator">
                     <ng-icon name="ionDownloadOutline" title="Download" i18n-title></ng-icon>
@@ -34,7 +34,7 @@
                 <div class="divider">&nbsp;</div>
             </ng-container>
 
-            <ng-container *ngIf="config.Gallery.enableDirectoryFlattening && isDirectory && authService.canSearch()">
+            <ng-container *ngIf="config.Gallery.NavBar.enableDirectoryFlattening && isDirectory && authService.canSearch()">
                 <a
                         [routerLink]="['/search', getDirectoryFlattenSearchQuery()]"
                         class="btn btn-outline-secondary btn-navigator">

src/frontend/app/ui/gallery/navigator/navigator.service.ts

@@ -55,7 +55,7 @@ export class GalleryNavigatorService {
 
 
   getDefaultGridSize(): GridSizes {
-    return Config.Gallery.defaultGidSize;
+    return Config.Gallery.NavBar.defaultGidSize;
   }
 
 }

src/frontend/app/ui/gallery/navigator/sorting.service.ts

@@ -28,10 +28,16 @@ export class GallerySortingService {
       private datePipe: DatePipe
   ) {
     this.sorting = new BehaviorSubject(
-      {method: Config.Gallery.defaultPhotoSortingMethod.method, ascending: Config.Gallery.defaultPhotoSortingMethod.ascending}
+        {
+          method: Config.Gallery.NavBar.SortingGrouping.defaultPhotoSortingMethod.method,
+          ascending: Config.Gallery.NavBar.SortingGrouping.defaultPhotoSortingMethod.ascending
+        }
     );
     this.grouping = new BehaviorSubject(
-      {method: Config.Gallery.defaultPhotoGroupingMethod.method, ascending: Config.Gallery.defaultPhotoGroupingMethod.ascending}
+        {
+          method: Config.Gallery.NavBar.SortingGrouping.defaultPhotoGroupingMethod.method,
+          ascending: Config.Gallery.NavBar.SortingGrouping.defaultPhotoGroupingMethod.ascending
+        }
     );
     this.galleryService.content.subscribe((c) => {
       if (c) {
@@ -69,17 +75,17 @@ export class GallerySortingService {
       }
     }
     if (cw.searchResult) {
-      return Config.Gallery.defaultSearchSortingMethod;
+      return Config.Gallery.NavBar.SortingGrouping.defaultSearchSortingMethod;
     }
-    return Config.Gallery.defaultPhotoSortingMethod;
+    return Config.Gallery.NavBar.SortingGrouping.defaultPhotoSortingMethod;
   }
 
 
   getDefaultGrouping(cw: ContentWrapper): GroupingMethod {
     if (cw.searchResult) {
-      return Config.Gallery.defaultSearchGroupingMethod;
+      return Config.Gallery.NavBar.SortingGrouping.defaultSearchGroupingMethod;
     }
-    return Config.Gallery.defaultPhotoGroupingMethod;
+    return Config.Gallery.NavBar.SortingGrouping.defaultPhotoGroupingMethod;
   }
 
   setSorting(sorting: SortingMethod): void {