Adding save album button to search query builder #45

src/frontend/app/ui/albums/album/album.component.css

@@ -1,21 +1,15 @@
-.star {
+.delete {
   margin: 2px;
-  color: #888;
   cursor: default;
-
 }
 
-.star.favourite {
+.delete {
-  color: white;
-}
-
-.star.clickable {
   cursor: pointer;
   transition: all .05s ease-in-out;
   transform: scale(1.0, 1.0);
 }
 
-.star.clickable:hover {
+.delete:hover {
   transform: scale(1.4, 1.4);
 }
 
@@ -46,13 +40,6 @@ a {
   background-position: center;
 }
 
-.button {
-  border: 0;
-  padding: 0;
-  text-align: left;
-
-}
-
 .info {
   background-color: rgba(0, 0, 0, 0.6);
   color: white;
@@ -71,9 +58,3 @@ a:hover .info {
 a:hover .photo-container {
   border-color: #000;
 }
-
-.person-name {
-  display: inline-block;
-  width: 180px;
-  white-space: normal;
-}

src/frontend/app/ui/albums/album/album.component.html

@@ -21,7 +21,7 @@
     {{album.name}}
     <span *ngIf="CanUpdate"
       (click)="deleteAlbum($event)"
-      class="star oi oi-remove"></span>
+      class="delete oi oi-trash float-right"></span>
 
   </div>
 </a>

src/frontend/app/ui/albums/album/album.component.ts

@@ -42,9 +42,9 @@ export class AlbumComponent implements OnInit, OnDestroy {
 
   get RouterLink(): any[] {
     if (this.IsSavedSearch) {
-      return ['/search', this.AsSavedSearch.searchQuery];
+      return ['/search', JSON.stringify(this.AsSavedSearch.searchQuery)];
     }
-    // TODO: add nomral albums here once they are ready
+    // TODO: add "normal" albums here once they are ready, see: https://github.com/bpatrik/pigallery2/issues/301
     return null;
   }
 

src/frontend/app/ui/albums/albums.service.ts

@@ -2,6 +2,7 @@ import {Injectable} from '@angular/core';
 import {NetworkService} from '../../model/network/network.service';
 import {BehaviorSubject} from 'rxjs';
 import {AlbumBaseDTO} from '../../../../common/entities/album/AlbumBaseDTO';
+import {SearchQueryDTO} from '../../../../common/entities/SearchQueryDTO';
 
 
 @Injectable()
@@ -22,4 +23,9 @@ export class AlbumsService {
     await this.networkService.deleteJson('/albums/' + album.id);
     await this.getAlbums();
   }
+
+  async addSavedSearch(name: string, searchQuery: SearchQueryDTO): Promise<void> {
+    await this.networkService.putJson('/albums/saved-searches', {name, searchQuery});
+    await this.getAlbums();
+  }
 }

src/frontend/app/ui/faces/face/face.component.css

@@ -72,8 +72,3 @@ a:hover .photo-container {
   border-color: #000;
 }
 
-.person-name {
-  display: inline-block;
-  width: 180px;
-  white-space: normal;
-}

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

@@ -17,7 +17,7 @@
     </div>
 
     <div class="input-group-btn" style="display: block">
-      <button class="btn btn-light" type="button" (click)="openModal(searchModal)">
+      <button class="btn btn-light" type="button" (click)="openSearchModal(searchModal)">
         <span class="oi oi-chevron-bottom"></span>
       </button>
     </div>
@@ -29,19 +29,20 @@
   <!-- sharing Modal-->
   <div class="modal-header">
     <h5 class="modal-title" i18n>Search</h5>
-    <button type="button" class="close" (click)="hideModal()" data-dismiss="modal" aria-label="Close">
+    <button type="button" class="close" (click)="hideSearchModal()" data-dismiss="modal" aria-label="Close">
       <span aria-hidden="true">&times;</span>
     </button>
   </div>
   <div class="modal-body">
     <form #searchPanelForm="ngForm" class="form-horizontal">
+
       <app-gallery-search-field [(ngModel)]="rawSearchText"
                                 (ngModelChange)="validateRawSearchText()"
                                 (search)="Search()"
                                 name="form-search-field">
 
       </app-gallery-search-field>
-
+      <hr>
       <app-gallery-search-query-entry
         [(ngModel)]="searchQueryDTO"
         (change)="onQueryChange()"
@@ -50,13 +51,49 @@
 
       </app-gallery-search-query-entry>
 
-      <div class="input-group-btn float-right" style="display: block">
+      <div class="input-group-btn float-right row" style="display: block">
+
+        <button class="btn btn-secondary mr-2" type="button"
+                [disabled]="rawSearchText == ''"
+                (click)="openSaveSearchModal(saveSearchModal)">
+          <span class="oi oi-folder"></span> Save
+        </button>
         <button class="btn btn-primary" type="button"
                 [routerLink]="['/search', HTMLSearchQuery]"
-                (click)="hideModal()">
+                (click)="hideSearchModal()">
           <span class="oi oi-magnifying-glass"></span> Search
         </button>
       </div>
     </form>
   </div>
 </ng-template>
+
+<ng-template #saveSearchModal>
+  <!-- sharing Modal-->
+  <div class="modal-header">
+    <h5 class="modal-title" i18n>Save search to album</h5>
+    <button type="button" class="close" (click)="hideSaveSearchModal()" data-dismiss="modal" aria-label="Close">
+      <span aria-hidden="true">&times;</span>
+    </button>
+  </div>
+  <div class="modal-body">
+
+    <form #saveSearchPanelForm="ngForm" class="form-horizontal">
+      <div class="row">
+        <input
+          id="saveSearchName"
+          name="saveSearchName"
+          placeholder="Search text"
+          class="form-control input-md"
+          [(ngModel)]="saveSearchName"
+          type="text"/>
+      </div>
+      <div class="input-group-btn float-right row mt-2" style="display: block">
+        <button class="btn btn-primary" type="button"
+                (click)="saveSearch()">
+          <span class="oi oi-folder"></span> Save as album
+        </button>
+      </div>
+    </form>
+  </div>
+</ng-template>

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

@@ -9,6 +9,7 @@ import {MetadataSearchQueryTypes, SearchQueryDTO, SearchQueryTypes, TextSearch}
 import {BsModalService} from 'ngx-bootstrap/modal';
 import {BsModalRef} from 'ngx-bootstrap/modal/bs-modal-ref.service';
 import {SearchQueryParserService} from './search-query-parser.service';
+import {AlbumsService} from '../../albums/albums.service';
 
 @Component({
   selector: 'app-gallery-search',
@@ -22,13 +23,16 @@ export class GallerySearchComponent implements OnDestroy {
   public rawSearchText = '';
   mouseOverAutoComplete = false;
   readonly SearchQueryTypes: typeof SearchQueryTypes;
-  modalRef: BsModalRef;
   public readonly MetadataSearchQueryTypes: { value: string; key: SearchQueryTypes }[];
+  private searchModalRef: BsModalRef;
   private readonly subscription: Subscription = null;
+  private saveSearchModalRef: BsModalRef;
+  public saveSearchName: string;
 
   constructor(private autoCompleteService: AutoCompleteService,
               private searchQueryParserService: SearchQueryParserService,
               private galleryService: GalleryService,
+              private albumService: AlbumsService,
               private navigationService: NavigationService,
               private route: ActivatedRoute,
               public router: Router,
@@ -60,14 +64,24 @@ export class GallerySearchComponent implements OnDestroy {
     }
   }
 
-  public async openModal(template: TemplateRef<any>): Promise<void> {
+  public async openSearchModal(template: TemplateRef<any>): Promise<void> {
-    this.modalRef = this.modalService.show(template, {class: 'modal-lg'});
+    this.searchModalRef = this.modalService.show(template, {class: 'modal-lg'});
     document.body.style.paddingRight = '0px';
   }
 
-  public hideModal(): void {
+  public async openSaveSearchModal(template: TemplateRef<any>): Promise<void> {
-    this.modalRef.hide();
+    this.saveSearchModalRef = this.modalService.show(template, {class: 'modal-lg'});
-    this.modalRef = null;
+    document.body.style.paddingRight = '0px';
+  }
+
+  public hideSaveSearchModal(): void {
+    this.saveSearchModalRef.hide();
+    this.saveSearchModalRef = null;
+  }
+
+  public hideSearchModal(): void {
+    this.searchModalRef.hide();
+    this.searchModalRef = null;
   }
 
   resetQuery(): void {
@@ -92,6 +106,10 @@ export class GallerySearchComponent implements OnDestroy {
   }
 
 
+  async saveSearch(): Promise<void> {
+    await this.albumService.addSavedSearch(this.saveSearchName, this.searchQueryDTO);
+    this.hideSaveSearchModal();
+  }
 }