Implementing grouping selector button

src/backend/model/jobs/jobs/TopPickSendJob.ts

@@ -1,7 +1,7 @@
 import {ConfigTemplateEntry, DefaultsJobs,} from '../../../../common/entities/job/JobDTO';
 import {Job} from './Job';
 import {backendTexts} from '../../../../common/BackendTexts';
-import {SortingMethods} from '../../../../common/entities/SortingMethods';
+import {SortingByTypes} from '../../../../common/entities/SortingMethods';
 import {DatePatternFrequency, DatePatternSearch, SearchQueryTypes} from '../../../../common/entities/SearchQueryDTO';
 import {ObjectManagers} from '../../ObjectManagers';
 import {PhotoEntity} from '../../database/enitites/PhotoEntity';
@@ -30,7 +30,8 @@ export class TopPickSendJob extends Job<{
           daysLength: 7,
           frequency: DatePatternFrequency.every_year
         } as DatePatternSearch,
-        sortBy: [SortingMethods.descRating, SortingMethods.descPersonCount],
+        sortBy: [{method: SortingByTypes.Rating, ascending: false},
+          {method: SortingByTypes.PersonCount, ascending: false}],
         pick: 5
       }] as MediaPickDTO[],
     }, {

src/common/PG2ConfMap.ts

@@ -1,23 +1,23 @@
 import {SortingByTypes, SortingMethod} from './entities/SortingMethods';
+import {Utils} from './Utils';
 
 /**
  * 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': {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,
-  },
+export const PG2ConfMap: { sorting: { [key: string]: SortingMethod } } = {
+  sorting: {}
 };
 
+Utils.enumToArray(SortingByTypes).forEach(kv => {
+  if (kv.key === SortingByTypes.random) {
+    PG2ConfMap.sorting['.order_random.pg2conf'] = {method: kv.key, ascending: null} as SortingMethod;
+    return;
+  }
+  PG2ConfMap.sorting['.order_descending' + kv.value.toLowerCase() + '.pg2conf'] = {method: kv.key, ascending: false} as SortingMethod;
+  PG2ConfMap.sorting['.order_ascending' + kv.value.toLowerCase() + '.pg2conf'] = {method: kv.key, ascending: true} as SortingMethod;
+});
+
 /**
  * These files are processed on the server side,
  * do not get passed down to the client or saved to the DB

src/common/config/public/ClientConfig.ts

@@ -944,6 +944,26 @@ export class ClientGalleryConfig {
   })
   defaultSearchSortingMethod: ClientSortingConfig = new ClientSortingConfig(SortingByTypes.Date, false);
 
+  @ConfigProperty({
+    type: ClientSortingConfig,
+    tags: {
+      name: $localize`Default grouping`,
+      priority: ConfigPriority.advanced,
+    },
+    description: $localize`Default grouping method for photo and video in a directory results.`
+  })
+  defaultPhotoGroupingMethod: ClientSortingConfig = new ClientSortingConfig(SortingByTypes.Date, true);
+
+  @ConfigProperty({
+    type: ClientSortingConfig,
+    tags: {
+      name: $localize`Default search grouping`,
+      priority: ConfigPriority.advanced,
+    },
+    description: $localize`Default grouping method for photo and video in a search results.`
+  })
+  defaultSearchGroupingMethod: ClientSortingConfig = new ClientSortingConfig(SortingByTypes.Date, false);
+
   @ConfigProperty({
     tags: {
       name: $localize`Sort directories by date`,

src/frontend/app/app.module.ts

@@ -178,6 +178,7 @@ import {
 import {SortingMethodIconComponent} from './ui/sorting-method-icon/sorting-method-icon.component';
 import {SafeHtmlPipe} from './pipes/SafeHTMLPipe';
 import {DatePipe} from '@angular/common';
+import {ParseIntPipe} from './pipes/ParseIntPipe';
 
 @Injectable()
 export class MyHammerConfig extends HammerGestureConfig {
@@ -191,7 +192,7 @@ export class MyHammerConfig extends HammerGestureConfig {
 
 export class CustomUrlSerializer implements UrlSerializer {
   private defaultUrlSerializer: DefaultUrlSerializer =
-      new DefaultUrlSerializer();
+    new DefaultUrlSerializer();
 
   parse(url: string): UrlTree {
     // Encode parentheses
@@ -202,9 +203,9 @@ export class CustomUrlSerializer implements UrlSerializer {
 
   serialize(tree: UrlTree): string {
     return this.defaultUrlSerializer
-        .serialize(tree)
-        .replace(/%28/g, '(')
-        .replace(/%29/g, ')');
+      .serialize(tree)
+      .replace(/%28/g, '(')
+      .replace(/%29/g, ')');
   }
 }
 
@@ -320,6 +321,7 @@ Marker.prototype.options.icon = MarkerFactory.defIcon;
     StringifySearchType,
     FileDTOToPathPipe,
     PhotoFilterPipe,
+    ParseIntPipe,
     UsersComponent,
     SharingsListComponent,
     SortingMethodIconComponent,

src/frontend/app/pipes/ParseIntPipe.ts

@@ -0,0 +1,10 @@
+import {Pipe, PipeTransform} from '@angular/core';
+
+@Pipe({name: 'parseInt'})
+export class ParseIntPipe implements PipeTransform {
+
+  transform(num: string): number {
+    return parseInt(num);
+  }
+}
+

src/frontend/app/pipes/StringifyEnum.ts

@@ -1,5 +1,4 @@
 import {Pipe, PipeTransform} from '@angular/core';
-import {ConfigPriority} from '../../../common/config/public/ClientConfig';
 import {EnumTranslations} from '../ui/EnumTranslations';
 
 @Pipe({name: 'stringifyEnum'})

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

@@ -1,7 +1,15 @@
 <div #gridContainer [style.width]="renderDelayTimer ? containerWidth+'px' : ''">
   <ng-container *ngIf="mediaToRender?.length > 0">
     <ng-container *ngFor="let group of mediaToRender">
-      <div *ngIf="group.name" class="mt-4 mb-3"><h6 class="ms-2">{{group.name}}</h6></div>
+      <ng-container *ngIf="group.name">
+      <ng-container [ngSwitch]="sortingService.grouping.value.method">
+        <div *ngSwitchCase="SortingByTypes.Rating" class="mt-4 mb-3"><h6 class="ms-2">
+          <ng-icon *ngFor="let i of [0,1,2,3,4]" [name]="(i < (group.name | parseInt)) ? 'ionStar' : 'ionStarOutline'"></ng-icon>
+        </h6></div>
+        <div *ngSwitchCase="SortingByTypes.PersonCount" class="mt-4 mb-3"><h6 class="ms-2">{{group.name}} <ng-icon class="ms-1" name="ionPeopleOutline"></ng-icon></h6></div>
+        <div *ngSwitchDefault class="mt-4 mb-3"><h6 class="ms-2">{{group.name}}</h6></div>
+      </ng-container>
+      </ng-container>
       <div class="media-grid">
         <app-gallery-grid-photo
           *ngFor="let gridPhoto of group.media"

src/frontend/app/ui/gallery/grid/grid.gallery.component.ts

@@ -25,8 +25,8 @@ import {QueryService} from '../../../model/query.service';
 import {ContentService} from '../content.service';
 import {MediaDTO, MediaDTOUtils,} from '../../../../../common/entities/MediaDTO';
 import {QueryParams} from '../../../../../common/QueryParams';
-import {MediaGroup} from '../navigator/sorting.service';
-import {SimpleChanges} from '../../../../../../node_modules/@angular/core';
+import {GallerySortingService, MediaGroup} from '../navigator/sorting.service';
+import {SortingByTypes} from '../../../../../common/entities/SortingMethods';
 
 @Component({
   selector: 'app-gallery-grid',
@@ -58,20 +58,31 @@ export class GalleryGridComponent
   private onScrollFired = false;
   private helperTime: number = null;
   public renderDelayTimer: number = null; // delays render on resize
+  public readonly SortingByTypes = SortingByTypes;
 
   constructor(
     private overlayService: OverlayService,
     private changeDetector: ChangeDetectorRef,
     public queryService: QueryService,
     private router: Router,
     public galleryService: ContentService,
+    public sortingService: GallerySortingService,
     private route: ActivatedRoute
   ) {
   }
 
-  ngOnChanges(changes: SimpleChanges): void {
-    console.log(changes);
-    this.onChange();
+  ngOnChanges(): void {
+    if (this.isAfterViewInit === false) {
+      return;
+    }
+    this.updateContainerDimensions();
+    this.mergeNewPhotos();
+    this.helperTime = window.setTimeout((): void => {
+      this.renderPhotos();
+      if (this.delayedRenderUpToPhoto) {
+        this.renderUpToMedia(this.delayedRenderUpToPhoto);
+      }
+    }, 0);
   }
 
   ngOnInit(): void {
@@ -92,20 +103,6 @@ export class GalleryGridComponent
     );
   }
 
-  onChange = () => {
-    if (this.isAfterViewInit === false) {
-      return;
-    }
-    this.updateContainerDimensions();
-    this.mergeNewPhotos();
-    this.helperTime = window.setTimeout((): void => {
-      this.renderPhotos();
-      if (this.delayedRenderUpToPhoto) {
-        this.renderUpToMedia(this.delayedRenderUpToPhoto);
-      }
-    }, 0);
-  };
-
   ngOnDestroy(): void {
     if (this.helperTime != null) {
       clearTimeout(this.helperTime);
@@ -170,9 +167,15 @@ export class GalleryGridComponent
   }
 
 
-  // TODO: This is deprecated,
-  // we do not post update galleries anymore since the preview member in the DriectoryDTO
+  // Merging photos after new sorting and filter was applied
   private mergeNewPhotos(): void {
+    if (this.mediaToRender.length === 0) {
+      return;
+    }
+    if (this.mediaGroups?.length === 0) {
+      this.clearRenderedPhotos();
+      return;
+    }
     // merge new data with old one
     const lastSameIndex = {groups: 0, media: 0};
     let lastRowId = 0;
@@ -195,7 +198,7 @@ export class GalleryGridComponent
 
       // delete last row if the length of the two are not equal
       if (!diffFound && this.mediaGroups[i].media.length < this.mediaToRender[i].media.length) {
-        lastRowId = this.mediaToRender[i].media[this.mediaToRender[i].media.length].rowId;
+        lastRowId = this.mediaToRender[i].media[this.mediaToRender[i].media.length - 1].rowId;
         for (let j = this.mediaToRender[i].media.length - 2; j >= 0; --j) {
           const gridMedia = this.mediaToRender[i].media[j];
           if (gridMedia.rowId !== lastRowId) {
@@ -211,9 +214,17 @@ export class GalleryGridComponent
         this.clearRenderedPhotos();
         return;
       }
-      this.mediaToRender.splice(lastSameIndex.groups, this.mediaToRender.length - lastSameIndex.groups);
+      // only delete the whole group if all media is different
+      if (lastSameIndex.media === 0) {
+        this.mediaToRender.splice(lastSameIndex.groups, this.mediaToRender.length - lastSameIndex.groups);
+        return;
+      }
+      this.mediaToRender.splice(lastSameIndex.groups + 1, this.mediaToRender.length - lastSameIndex.groups);
+
       const media = this.mediaToRender[lastSameIndex.groups].media;
       media.splice(lastSameIndex.media, media.length - lastSameIndex.media);
+
+
     }
 
   }

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

@@ -53,3 +53,10 @@ app-gallery-filter {
   --bs-text-opacity: 1;
   color: rgba(var(--bs-body-color-rgb), var(--bs-text-opacity)) !important;
 }
+
+.grouping-icon{
+  display: inline-block;
+  font-size: xx-small;
+  vertical-align: top;
+  line-height: 1;
+}