Implementing filter pinning #287

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

@@ -7,6 +7,33 @@
   cursor: pointer;
 }
 
+.filter-option .oi {
+  height: 0;
+  font-size: 0;
+  transition: all 0.1s;
+  display: inline-block;
+  padding: 0;
+  margin: 0;
+  color: #aaa;
+}
+
+.filter-option:hover .oi.filter-pin, .filter-option .oi.filter-only-selected {
+  display: inline-block;
+  height: auto;
+  font-size: 1rem;
+  padding: 0 0.3rem;
+  margin-left: -0.6rem;
+}
+
+.filter-option:hover .oi.filter-pin:hover {
+  color: #212529;
+}
+
+.filter-option .oi.filter-only-selected {
+  color: #007bff;
+}
+
+
 .filter-container {
   margin-top: -1rem;
 }

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

@@ -11,15 +11,23 @@
         <ul class="list-group" *ngIf="filter.options.length > 0">
           <li
             *ngFor="let option of filter.options"
-            [class.unselected] = "!option.selected"
+            [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}}
+
+            <div>
+              <span (click)="toggleSelectOnly(filter, option, $event)"
+                    class="oi oi-pin" title="Select only this"
+                    [ngClass]="isOnlySelected(filter,option) ? 'filter-only-selected' : 'filter-pin'"
+                    i18n-title></span>
+              {{option.name === undefined ? unknownText : option.name}}
+            </div>
             <span class="badge badge-pill"
-                  [class.badge-primary] = "option.selected"
-                  [class.badge-secondary] = "!option.selected"
+                  [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>

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

@@ -1,6 +1,6 @@
 import {Component} from '@angular/core';
 import {RouterLink} from '@angular/router';
-import {FilterService} from './filter.service';
+import {FilterOption, FilterService, SelectedFilter} from './filter.service';
 import {OnDestroy, OnInit} from '../../../../../../node_modules/@angular/core';
 
 @Component({
@@ -25,5 +25,29 @@ export class GalleryFilterComponent implements OnInit, OnDestroy {
     this.filterService.setShowingFilters(true);
   }
 
+  isOnlySelected(filter: SelectedFilter, option: FilterOption): boolean {
+    for (const o of filter.options) {
+      if (o === option) {
+        if (o.selected === false) {
+          return false;
+        }
+      } else {
+        if (o.selected === true) {
+          return false;
+        }
+      }
+    }
+    return true;
+  }
+
+  toggleSelectOnly(filter: SelectedFilter, option: FilterOption, event: MouseEvent): void {
+    if (this.isOnlySelected(filter, option)) {
+      filter.options.forEach(o => o.selected = true);
+    } else {
+      filter.options.forEach(o => o.selected = (o === option));
+    }
+    event.stopPropagation();
+    this.filterService.onFilterChange();
+  }
 }
 

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

@@ -8,16 +8,22 @@ export enum FilterRenderType {
   enum = 1, range = 2
 }
 
-interface Filter {
+export interface Filter {
   name: string;
   mapFn: (m: PhotoDTO) => (string | number)[] | (string | number);
   renderType: FilterRenderType;
   isArrayValue?: boolean;
 }
 
-interface SelectedFilter {
+export interface FilterOption {
+  name: string;
+  count: number;
+  selected: boolean;
+}
+
+export interface SelectedFilter {
   filter: Filter;
-  options: { name: string, count: number, selected: boolean }[];
+  options: FilterOption[];
 }
 
 @Injectable()
@@ -35,6 +41,12 @@ export class FilterService {
       renderType: FilterRenderType.enum,
       isArrayValue: true,
     },
+    {
+      name: $localize`Faces groups`,
+      mapFn: (m: PhotoDTO): string => m.metadata.faces?.map(f => f.name).sort().join(', '),
+      renderType: FilterRenderType.enum,
+      isArrayValue: false,
+    },
     /*  {
         name: $localize`Date`,
         mapFn: (m: PhotoDTO): number => m.metadata.creationDate,
@@ -77,10 +89,10 @@ export class FilterService {
       filter: this.AVAILABLE_FILTERS[1],
       options: []
     }, {
-      filter: this.AVAILABLE_FILTERS[4],
+      filter: this.AVAILABLE_FILTERS[5],
       options: []
     }, {
-      filter: this.AVAILABLE_FILTERS[2],
+      filter: this.AVAILABLE_FILTERS[3],
       options: []
     }
   ]);