Feature/filter #287

src/frontend/app/app.module.ts

@@ -3,7 +3,7 @@ import {BrowserModule, HAMMER_GESTURE_CONFIG, HammerGestureConfig, HammerModule}
 import {FormsModule} from '@angular/forms';
 import {AppComponent} from './app.component';
 import {UserService} from './model/network/user.service';
-import {GalleryService} from './ui/gallery/gallery.service';
+import {ContentService} from './ui/gallery/content.service';
 import {NetworkService} from './model/network/network.service';
 import {GalleryCacheService} from './ui/gallery/cache.gallery.service';
 import {FullScreenService} from './ui/gallery/fullscreen.service';
@@ -114,6 +114,9 @@ import {BlogService} from './ui/gallery/blog/blog.service';
 import {PhotoFilterPipe} from './pipes/PhotoFilterPipe';
 import {PreviewSettingsComponent} from './ui/settings/preview/preview.settings.component';
 import {GallerySearchFieldComponent} from './ui/gallery/search/search-field/search-field.gallery.component';
+import {GalleryFilterComponent} from './ui/gallery/filter/filter.gallery.component';
+import {GallerySortingService} from './ui/gallery/navigator/sorting.service';
+import {FilterService} from './ui/gallery/filter/filter.service';
 
 @Injectable()
 export class MyHammerConfig extends HammerGestureConfig {
@@ -213,6 +216,7 @@ Marker.prototype.options.icon = iconDefault;
     GallerySearchQueryBuilderComponent,
     GalleryShareComponent,
     GalleryNavigatorComponent,
+    GalleryFilterComponent,
     GalleryPhotoComponent,
     AdminComponent,
     InfoPanelLightboxComponent,
@@ -269,7 +273,9 @@ Marker.prototype.options.icon = iconDefault;
     UserService,
     AlbumsService,
     GalleryCacheService,
-    GalleryService,
+    ContentService,
+    FilterService,
+    GallerySortingService,
     MapService,
     BlogService,
     SearchQueryParserService,

src/frontend/app/model/query.service.ts

@@ -3,7 +3,7 @@ import {ShareService} from '../ui/gallery/share.service';
 import {MediaDTO} from '../../../common/entities/MediaDTO';
 import {QueryParams} from '../../../common/QueryParams';
 import {Utils} from '../../../common/Utils';
-import {GalleryService} from '../ui/gallery/gallery.service';
+import {ContentService} from '../ui/gallery/content.service';
 import {Config} from '../../../common/config/public/Config';
 import {ParentDirectoryDTO, SubDirectoryDTO} from '../../../common/entities/DirectoryDTO';
 
@@ -12,7 +12,7 @@ export class QueryService {
 
 
   constructor(private shareService: ShareService,
-              private galleryService: GalleryService) {
+              private galleryService: ContentService) {
   }
 
   getMediaStringId(media: MediaDTO): string {

src/frontend/app/ui/gallery/gallery.service.ts → src/frontend/app/ui/gallery/content.service.ts

@@ -1,24 +1,25 @@
 import {Injectable} from '@angular/core';
 import {NetworkService} from '../../model/network/network.service';
 import {ContentWrapper} from '../../../../common/entities/ConentWrapper';
-import {DirectoryDTOUtils, ParentDirectoryDTO} from '../../../../common/entities/DirectoryDTO';
+import {DirectoryDTOUtils, ParentDirectoryDTO, SubDirectoryDTO} from '../../../../common/entities/DirectoryDTO';
 import {GalleryCacheService} from './cache.gallery.service';
-import {BehaviorSubject} from 'rxjs';
+import {BehaviorSubject, Observable} from 'rxjs';
 import {Config} from '../../../../common/config/public/Config';
 import {ShareService} from './share.service';
 import {NavigationService} from '../../model/navigation.service';
-import {SortingMethods} from '../../../../common/entities/SortingMethods';
 import {QueryParams} from '../../../../common/QueryParams';
-import {PG2ConfMap} from '../../../../common/PG2ConfMap';
 import {SearchQueryDTO} from '../../../../common/entities/SearchQueryDTO';
 import {ErrorCodes} from '../../../../common/entities/Error';
+import {map} from 'rxjs/operators';
+import {MediaDTO} from '../../../../common/entities/MediaDTO';
+import {FileDTO} from '../../../../common/entities/FileDTO';
 
 
 @Injectable()
-export class GalleryService {
+export class ContentService {
 
   public content: BehaviorSubject<ContentWrapperWithError>;
-  public sorting: BehaviorSubject<SortingMethods>;
+  public directoryContent: Observable<DirectoryContent>;
   lastRequest: { directory: string } = {
     directory: null
   };
@@ -31,42 +32,14 @@ export class GalleryService {
               private shareService: ShareService,
               private navigationService: NavigationService) {
     this.content = new BehaviorSubject<ContentWrapperWithError>(new ContentWrapperWithError());
-    this.sorting = new BehaviorSubject<SortingMethods>(Config.Client.Other.defaultPhotoSortingMethod);
-  }
-
-  getDefaultSorting(directory: ParentDirectoryDTO): SortingMethods {
-    if (directory && directory.metaFile) {
-      for (const file in PG2ConfMap.sorting) {
-        if (directory.metaFile.some(f => f.name === file)) {
-          return (PG2ConfMap.sorting as any)[file];
-        }
-      }
-    }
-    return Config.Client.Other.defaultPhotoSortingMethod;
-  }
-
-  setSorting(sorting: SortingMethods): void {
-    this.sorting.next(sorting);
-    if (this.content.value.directory) {
-      if (sorting !== this.getDefaultSorting(this.content.value.directory)) {
-        this.galleryCacheService.setSorting(this.content.value.directory, sorting);
-      } else {
-        this.galleryCacheService.removeSorting(this.content.value.directory);
-      }
-    }
+    this.directoryContent = this.content.pipe(map(c =>
+      c.directory ? c.directory : c.searchResult
+    ));
   }
 
 
   setContent(content: ContentWrapperWithError): void {
     this.content.next(content);
-    if (content.directory) {
-      const sort = this.galleryCacheService.getSorting(content.directory);
-      if (sort !== null) {
-        this.sorting.next(sort);
-      } else {
-        this.sorting.next(this.getDefaultSorting(content.directory));
-      }
-    }
   }
 
 
@@ -161,3 +134,9 @@ export class GalleryService {
 export class ContentWrapperWithError extends ContentWrapper {
   public error: string;
 }
+
+export interface DirectoryContent {
+  directories: SubDirectoryDTO[];
+  media: MediaDTO[];
+  metaFile: FileDTO[];
+}

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

@@ -0,0 +1,23 @@
+.filter-column {
+  max-height: 12em;
+  overflow-y: auto;
+}
+
+.filter-option {
+  cursor: pointer;
+}
+
+.filter-container {
+  margin-top: -1rem;
+}
+
+.filter-container > card-body {
+  margin: 0;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.unselected {
+  color: #6c757d;
+  background-color: #fff;
+}

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

@@ -0,0 +1,29 @@
+<div class="card bg-light filter-container">
+  <div class="card-body row ">
+    <div class="col-3" *ngFor="let filter of filterService.selectedFilters | async; let i=index">
+      <select [(ngModel)]="filter.filter"
+              (ngModelChange)="filterService.onFilterChange()"
+              class="form-control" id="gallery-filter-{{i}}">
+        <option *ngFor="let f of filterService.AVAILABLE_FILTERS"
+                [ngValue]="f">{{f.name}}</option>
+      </select>
+      <div class="filter-column">
+        <ul class="list-group" *ngIf="filter.options.length > 0">
+          <li
+            *ngFor="let option of filter.options"
+            [class.unselected] = "!option.selected"
+            (click)="option.selected = !option.selected; filterService.onFilterChange()"
+            class="filter-option list-group-item list-group-item-action d-flex justify-content-between align-items-center">
+            {{option.name === undefined ? unknownText : option.name}}
+            <span class="badge badge-pill"
+                  [class.badge-primary] = "option.selected"
+                  [class.badge-secondary] = "!option.selected"
+            >{{option.count}}</span>
+
+          </li>
+        </ul>
+        <div class="card-body text-center" *ngIf="filter.options.length === 0" i18n>Nothing to filter</div>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,29 @@
+import {Component} from '@angular/core';
+import {RouterLink} from '@angular/router';
+import {FilterService} from './filter.service';
+import {OnDestroy, OnInit} from '../../../../../../node_modules/@angular/core';
+
+@Component({
+  selector: 'app-gallery-filter',
+  styleUrls: ['./filter.gallery.component.css'],
+  templateUrl: './filter.gallery.component.html',
+  providers: [RouterLink],
+})
+export class GalleryFilterComponent implements OnInit, OnDestroy {
+  public readonly unknownText;
+
+  constructor(public filterService: FilterService) {
+    this.unknownText = '<' + $localize`unknown` + '>';
+  }
+
+  ngOnDestroy(): void {
+    setTimeout(() => this.filterService.setShowingFilters(false));
+  }
+
+  ngOnInit(): void {
+
+    this.filterService.setShowingFilters(true);
+  }
+
+}
+