replacing mergeMap to switchMap in filter and sorting #287

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

@@ -2,7 +2,7 @@ import {Injectable} from '@angular/core';
 import {BehaviorSubject, Observable} from 'rxjs';
 import {PhotoDTO} from '../../../../../common/entities/PhotoDTO';
 import {DirectoryContent} from '../content.service';
-import {map, mergeMap} from 'rxjs/operators';
+import {map, switchMap} from 'rxjs/operators';
 
 export enum FilterRenderType {
   enum = 1, range = 2
@@ -90,18 +90,21 @@ export class FilterService {
   }
 
   public applyFilters(directoryContent: Observable<DirectoryContent>): Observable<DirectoryContent> {
-    return directoryContent.pipe(mergeMap((dirContent: DirectoryContent) => {
+    return directoryContent.pipe(switchMap((dirContent: DirectoryContent) => {
+
       return this.selectedFilters.pipe(map((filters: SelectedFilter[]) => {
         if (!dirContent || !dirContent.media || !this.filtersVisible) {
           return dirContent;
         }
 
+
         // clone, so the original won't get overwritten
         const c = {
           media: dirContent.media,
           directories: dirContent.directories,
           metaFile: dirContent.metaFile
         };
+
         for (const f of filters) {
 
           // get options

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

@@ -1,29 +1,29 @@
 <nav class="nav-container" aria-label="breadcrumb">
-  <ol *ngIf="isDirectory | async" id="directory-path" class="breadcrumb">
+  <ol *ngIf="isDirectory" id="directory-path" class="breadcrumb">
-    <li *ngFor="let path of Routes | async" class="breadcrumb-item">
+    <li *ngFor="let path of Routes" class="breadcrumb-item">
       <a *ngIf="path.route" [routerLink]="['/gallery',path.route]"
          [queryParams]="queryService.getParams()">{{path.name}}</a>
       <ng-container *ngIf="!path.route">{{path.name}}</ng-container>
     </li>
   </ol>
 
-  <ol *ngIf="!(isDirectory | async)" class="breadcrumb">
+  <ol *ngIf="!isDirectory" class="breadcrumb">
     <li class="active">
       <ng-container i18n>Searching for:</ng-container>
-      <strong> {{(wrappedContent | async)?.searchResult?.searchQuery | searchQuery}}</strong>
+      <strong> {{galleryService.content.value?.searchResult?.searchQuery | searchQuery}}</strong>
     </li>
   </ol>
 
   <div class="right-side">
-    <ng-container *ngIf="(ItemCount | async) > 0 && config.Client.Other.NavBar.showItemCount">
+    <ng-container *ngIf="ItemCount> 0 && config.Client.Other.NavBar.showItemCount">
       <div class="photos-count">
-        {{ItemCount | async}} <span i18n>items</span>
+        {{ItemCount}} <span i18n>items</span>
       </div>
       <div class="divider">&nbsp;</div>
     </ng-container>
 
-    <ng-container *ngIf="config.Client.Other.enableDownloadZip && (isDirectory | async) && (ItemCount | async) > 0">
+    <ng-container *ngIf="config.Client.Other.enableDownloadZip && isDirectory && ItemCount > 0">
-      <a [href]="getDownloadZipLink() | async"
+      <a [href]="getDownloadZipLink()"
          class="btn  btn-navbar">
          <span class="oi oi-data-transfer-download"
                title="download" i18n-title></span>
@@ -31,9 +31,9 @@
       <div class="divider">&nbsp;</div>
     </ng-container>
 
-    <ng-container *ngIf="config.Client.Other.enableDirectoryFlattening && (isDirectory | async)">
+    <ng-container *ngIf="config.Client.Other.enableDirectoryFlattening && isDirectory">
       <a
-        [routerLink]="['/search', getDirectoryFlattenSearchQuery() | async]"
+        [routerLink]="['/search', getDirectoryFlattenSearchQuery()]"
         class="btn  btn-navbar">
          <span class="oi oi-fork"
                title="Flatten directory" i18n-title></span>
@@ -50,7 +50,7 @@
     <div class="btn-group" dropdown placement="bottom right">
       <button id="button-alignment" dropdownToggle type="button"
               class="btn btn-secondary dropdown-toggle"
-              [ngClass]="{'btn-secondary':sortingService.sorting.value !== (DefaultSorting | async)}"
+              [ngClass]="{'btn-secondary':sortingService.sorting.value !== DefaultSorting}"
               aria-controls="dropdown-alignment"
               [innerHTML]="sortingService.sorting.value | iconizeSorting">
       </button>

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

@@ -40,94 +40,92 @@ export class GalleryNavigatorComponent {
     this.directoryContent = this.wrappedContent.pipe(map(c => c.directory ? c.directory : c.searchResult));
   }
 
-  get isDirectory(): Observable<boolean> {
+  get isDirectory(): boolean {
-    return this.wrappedContent.pipe(map(c => !!c.directory));
+    return !!this.galleryService.content.value.directory;
   }
 
-  get ItemCount(): Observable<number> {
+  get ItemCount(): number {
-    return this.wrappedContent.pipe(map(c => c.directory ? c.directory.mediaCount : (c.searchResult ? c.searchResult.media.length : 0)));
+    const c = this.galleryService.content.value;
+    return c.directory ? c.directory.mediaCount : (c.searchResult ? c.searchResult.media.length : 0);
   }
 
-  get Routes(): Observable<NavigatorPath[]> {
+  get Routes(): NavigatorPath[] {
-    return this.wrappedContent.pipe(map((c) => {
+
-      if (!c.directory) {
+    const c = this.galleryService.content.value;
-        return [];
+    if (!c.directory) {
+      return [];
+    }
+
+    const path = c.directory.path.replace(new RegExp('\\\\', 'g'), '/');
+
+    const dirs = path.split('/');
+    dirs.push(c.directory.name);
+
+    // removing empty strings
+    for (let i = 0; i < dirs.length; i++) {
+      if (!dirs[i] || 0 === dirs[i].length || '.' === dirs[i]) {
+        dirs.splice(i, 1);
+        i--;
       }
+    }
 
-      const path = c.directory.path.replace(new RegExp('\\\\', 'g'), '/');
+    const user = this.authService.user.value;
+    const arr: NavigatorPath[] = [];
 
-      const dirs = path.split('/');
+    // create root link
-      dirs.push(c.directory.name);
+    if (dirs.length === 0) {
+      arr.push({name: this.RootFolderName, route: null});
+    } else {
+      arr.push({name: this.RootFolderName, route: UserDTOUtils.isDirectoryPathAvailable('/', user.permissions) ? '/' : null});
+    }
 
-      // removing empty strings
+    // create rest navigation
-      for (let i = 0; i < dirs.length; i++) {
+    dirs.forEach((name, index) => {
-        if (!dirs[i] || 0 === dirs[i].length || '.' === dirs[i]) {
+      const route = dirs.slice(0, dirs.indexOf(name) + 1).join('/');
-          dirs.splice(i, 1);
+      if (dirs.length - 1 === index) {
-          i--;
+        arr.push({name, route: null});
-        }
-      }
-
-      const user = this.authService.user.value;
-      const arr: NavigatorPath[] = [];
-
-      // create root link
-      if (dirs.length === 0) {
-        arr.push({name: this.RootFolderName, route: null});
       } else {
-        arr.push({name: this.RootFolderName, route: UserDTOUtils.isDirectoryPathAvailable('/', user.permissions) ? '/' : null});
+        arr.push({name, route: UserDTOUtils.isDirectoryPathAvailable(route, user.permissions) ? route : null});
       }
+    });
 
-      // create rest navigation
+    return arr;
-      dirs.forEach((name, index) => {
-        const route = dirs.slice(0, dirs.indexOf(name) + 1).join('/');
-        if (dirs.length - 1 === index) {
-          arr.push({name, route: null});
-        } else {
-          arr.push({name, route: UserDTOUtils.isDirectoryPathAvailable(route, user.permissions) ? route : null});
-        }
-      });
 
-      return arr;
-    }));
   }
 
-  get DefaultSorting(): Observable<SortingMethods> {
+  get DefaultSorting(): SortingMethods {
-    return this.wrappedContent.pipe(map(c =>
+    return this.sortingService.getDefaultSorting(this.galleryService.content.value.directory);
-      this.sortingService.getDefaultSorting(c.directory)
-    ));
   }
 
   setSorting(sorting: SortingMethods): void {
     this.sortingService.setSorting(sorting);
   }
 
-  getDownloadZipLink(): Observable<string> {
+  getDownloadZipLink(): string {
-    return this.wrappedContent.pipe(map((c) => {
+    const c = this.galleryService.content.value;
-      if (!c.directory) {
+    if (!c.directory) {
-        return null;
+      return null;
-      }
+    }
-      let queryParams = '';
+    let queryParams = '';
-      Object.entries(this.queryService.getParams()).forEach(e => {
+    Object.entries(this.queryService.getParams()).forEach(e => {
-        queryParams += e[0] + '=' + e[1];
+      queryParams += e[0] + '=' + e[1];
-      });
+    });
-      return Utils.concatUrls(Config.Client.urlBase,
+    return Utils.concatUrls(Config.Client.urlBase,
-        '/api/gallery/zip/',
+      '/api/gallery/zip/',
-        c.directory.path, c.directory.name, '?' + queryParams);
+      c.directory.path, c.directory.name, '?' + queryParams);
-    }));
-
   }
 
-  getDirectoryFlattenSearchQuery(): Observable<string> {
+  getDirectoryFlattenSearchQuery(): string {
-    return this.wrappedContent.pipe(map((c) => {
+    const c = this.galleryService.content.value;
-      if (!c.directory) {
+    if (!c.directory) {
-        return null;
+      return null;
-      }
+    }
-      return JSON.stringify({
+    return JSON.stringify({
-        type: SearchQueryTypes.directory,
+      type: SearchQueryTypes.directory,
-        matchType: TextSearchQueryMatchTypes.like,
+      matchType: TextSearchQueryMatchTypes.like,
-        text: Utils.concatUrls('./', c.directory.path, c.directory.name)
+      text: Utils.concatUrls('./', c.directory.path, c.directory.name)
-      } as TextSearch);
+    } as TextSearch);
-    }));
+
   }
 
 }

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

@@ -6,9 +6,9 @@ import {BehaviorSubject, Observable} from 'rxjs';
 import {Config} from '../../../../../common/config/public/Config';
 import {SortingMethods} from '../../../../../common/entities/SortingMethods';
 import {PG2ConfMap} from '../../../../../common/PG2ConfMap';
-import {DirectoryContent, ContentService} from '../content.service';
+import {ContentService, DirectoryContent} from '../content.service';
 import {PhotoDTO} from '../../../../../common/entities/PhotoDTO';
-import {map, mergeMap} from 'rxjs/operators';
+import {map, switchMap} from 'rxjs/operators';
 import {SeededRandomService} from '../../../model/seededRandom.service';
 
 
@@ -57,7 +57,7 @@ export class GallerySortingService {
   }
 
   public applySorting(directoryContent: Observable<DirectoryContent>): Observable<DirectoryContent> {
-    return directoryContent.pipe(mergeMap((dirContent) => {
+    return directoryContent.pipe(switchMap((dirContent) => {
       return this.sorting.pipe(map((sorting: SortingMethods) => {
         if (!dirContent) {
           return dirContent;