Add .saved_searches.pg2conf popup #45

src/frontend/app/app.module.ts

@@ -104,6 +104,7 @@ import {AlbumsComponent} from './ui/albums/albums.component';
 import {AlbumComponent} from './ui/albums/album/album.component';
 import {AlbumsService} from './ui/albums/albums.service';
 import {GallerySearchQueryBuilderComponent} from './ui/gallery/search/query-builder/query-bulder.gallery.component';
+import {SavedSearchPopupComponent} from './ui/albums/saved-search-popup/saved-search-popup.component';
 
 
 @Injectable()
@@ -185,6 +186,7 @@ Marker.prototype.options.icon = iconDefault;
     // Albums
     AlbumsComponent,
     AlbumComponent,
+    SavedSearchPopupComponent,
     // Gallery
     GalleryLightboxMediaComponent,
     GalleryPhotoLoadingComponent,

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

@@ -38,17 +38,14 @@
   </div>
   <div class="modal-body">
     <form #savedSearchPanelForm="ngForm" class="form-horizontal">
-      <div class="row">
-
-      </div>
-
       <div class="form-group">
         <label for="saveSearchName">Album name</label>
         <input
           id="saveSearchName"
           name="saveSearchName"
-          placeholder="Search text"
+          placeholder="Album name"
           class="form-control input-md"
+          required="required"
           [(ngModel)]="savedSearch.name"
           type="text"/>
       </div>
@@ -63,7 +60,11 @@
 
 
       <div class="input-group-btn float-right row" style="display: block">
-
+        <app-saved-search-popup-btn
+          [disabled]="savedSearch.searchQuery.text == ''"
+          class="mr-2"
+          [savedSearchDTO]="savedSearch">
+        </app-saved-search-popup-btn>
         <button class="btn btn-primary" type="button"
                 [disabled]="savedSearch.searchQuery.text == ''"
                 (click)="saveSearch()">

src/frontend/app/ui/albums/saved-search-popup/saved-search-popup.component.css

@@ -1,29 +0,0 @@
-app-album {
-  margin: 2px;
-  display: inline-block;
-}
-
-.no-item-msg {
-  height: 100vh;
-  text-align: center;
-}
-
-.no-face-msg h2 {
-  color: #6c757d;
-}
-
-.add-saved-search {
-  vertical-align: baseline;
-  position: absolute;
-  margin: 2px;
-}
-
-.add-saved-search .text {
-  position: relative;
-  top: calc(50% - 40px);
-  text-align: center;
-}
-
-.add-saved-search .text .oi {
-  font-size: 80px;
-}

src/frontend/app/ui/albums/saved-search-popup/saved-search-popup.component.html

@@ -1,75 +1,22 @@
-<app-frame>
-
-  <div body #container class="container-fluid">
-    <app-album *ngFor="let album of albumsService.albums | async"
-               [album]="album"
-               [size]="size"></app-album>
-
-    <div class="add-saved-search btn btn-secondary"
-         *ngIf="CanCreateAlbum"
-         [style.width.px]="size"
-         [style.height.px]="size"
-         (click)="openModal(modal)">
-      <div class="text">
-        <span class="oi oi-plus" aria-hidden="true">  </span><br/>
-        <span i18n>Add saved search</span>
-      </div>
-    </div>
-
-    <div class="d-flex no-item-msg"
-         *ngIf="(albumsService.albums | async) && (albumsService.albums | async).length == 0">
-      <div class="flex-fill">
-        <h2>:(
-          <ng-container i18n>No albums to show.</ng-container>
-        </h2>
-      </div>
-    </div>
-  </div>
-</app-frame>
+<button class="btn btn-secondary" type="button"
+        [disabled]="disabled"
+        (click)="openModal(modal)">
+  <span class="oi oi-file" aria-hidden="true"></span>
+  <span i18n>To .pg2conf</span>
+</button>
 
 
 <ng-template #modal>
   <!-- sharing Modal-->
   <div class="modal-header">
-    <h5 class="modal-title" i18n>Add Saved Search</h5>
+    <h5 class="modal-title" i18n>Saved Search to .saved_searches.pg2conf</h5>
     <button type="button" class="close" (click)="hideModal()" data-dismiss="modal" aria-label="Close">
       <span aria-hidden="true">&times;</span>
     </button>
   </div>
   <div class="modal-body">
-    <form #savedSearchPanelForm="ngForm" class="form-horizontal">
-      <div class="row">
-
-      </div>
-
-      <div class="form-group">
-        <label for="saveSearchName">Album name</label>
-        <input
-          id="saveSearchName"
-          name="saveSearchName"
-          placeholder="Search text"
-          class="form-control input-md"
-          [(ngModel)]="savedSearch.name"
-          type="text"/>
-      </div>
-      <div class="form-group">
-        <label for="album-search-query-builder">Search query</label>
-        <app-gallery-search-query-builder
-          id="album-search-query-builder"
-          name="album-search-query-builder"
-          [(ngModel)]="savedSearch.searchQuery">
-        </app-gallery-search-query-builder>
-      </div>
-
-
-      <div class="input-group-btn float-right row" style="display: block">
-
-        <button class="btn btn-primary" type="button"
-                [disabled]="savedSearch.searchQuery.text == ''"
-                (click)="saveSearch()">
-          <span class="oi oi-folder"></span> Save
-        </button>
-      </div>
-    </form>
+    <span i18n>Add this json to a '.saved_searches.pg2conf' file in your gallery:</span>
+    <pre class="bg-light mt-2"><code>{{[savedSearchDTO] | json}}</code></pre>
+    <span class="mt-2" i18n>This saved search will be loaded from file during gallery indexing and it will survive a database reset.</span>
   </div>
 </ng-template>

src/frontend/app/ui/albums/saved-search-popup/saved-search-popup.component.ts

@@ -1,42 +1,21 @@
-import {Component, ElementRef, OnInit, TemplateRef, ViewChild} from '@angular/core';
-import {AlbumsService} from './albums.service';
+import {Component, Input, TemplateRef} from '@angular/core';
 import {BsModalService} from 'ngx-bootstrap/modal';
 import {BsModalRef} from 'ngx-bootstrap/modal/bs-modal-ref.service';
-import {SearchQueryTypes, TextSearch} from '../../../../common/entities/SearchQueryDTO';
-import {UserRoles} from '../../../../common/entities/UserDTO';
-import {AuthenticationService} from '../../model/network/authentication.service';
+import {SearchQueryDTO} from '../../../../../common/entities/SearchQueryDTO';
 
 @Component({
-  selector: 'app-albums',
-  templateUrl: './albums.component.html',
-  styleUrls: ['./albums.component.css']
+  selector: 'app-saved-search-popup-btn',
+  templateUrl: './saved-search-popup.component.html',
+  styleUrls: ['./saved-search-popup.component.css']
 })
-export class SavedSearchPopupComponent implements OnInit {
-  @ViewChild('container', {static: true}) container: ElementRef;
-  public size: number;
-  public savedSearch = {
-    name: '',
-    searchQuery: {type: SearchQueryTypes.any_text, text: ''} as TextSearch
-  };
+export class SavedSearchPopupComponent {
+  @Input() disabled: boolean;
+  @Input() savedSearchDTO: { name: string, searchQuery: SearchQueryDTO };
   private modalRef: BsModalRef;
 
-  constructor(public albumsService: AlbumsService,
-              private modalService: BsModalService,
-              public authenticationService: AuthenticationService) {
-    this.albumsService.getAlbums().catch(console.error);
+  constructor(private modalService: BsModalService) {
   }
 
-
-  ngOnInit(): void {
-    this.updateSize();
-  }
-
-
-  get CanCreateAlbum(): boolean {
-    return this.authenticationService.user.getValue().role >= UserRoles.Admin;
-  }
-
-
   public async openModal(template: TemplateRef<any>): Promise<void> {
     this.modalRef = this.modalService.show(template, {class: 'modal-lg'});
     document.body.style.paddingRight = '0px';
@@ -47,18 +26,6 @@ export class SavedSearchPopupComponent implements OnInit {
     this.modalRef = null;
   }
 
-  async saveSearch(): Promise<void> {
-    await this.albumsService.addSavedSearch(this.savedSearch.name, this.savedSearch.searchQuery);
-    this.hideModal();
-  }
-
-  private updateSize(): void {
-    const size = 220 + 5;
-    // body - container margin
-    const containerWidth = this.container.nativeElement.clientWidth - 30;
-    this.size = (containerWidth / Math.round((containerWidth / size))) - 5;
-  }
-
 
 }
 

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

@@ -73,17 +73,26 @@
   <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="form-group">
+          <label for="saveSearchName">Album name</label>
+          <input
+            id="saveSearchName"
+            name="saveSearchName"
+            placeholder="Album name"
+            class="form-control input-md"
+            required="required"
+            [(ngModel)]="saveSearchName"
+            type="text"/>
+        </div>
       <div class="input-group-btn float-right row mt-2" style="display: block">
+        <app-saved-search-popup-btn
+          [disabled]="saveSearchName == ''"
+          class="mr-2"
+          [savedSearchDTO]="{name:saveSearchName, searchQuery:searchQueryDTO}">
+        </app-saved-search-popup-btn>
         <button class="btn btn-primary" type="button"
+                [disabled]="saveSearchName == ''"
                 (click)="saveSearch()">
           <span class="oi oi-folder"></span> Save as album
         </button>

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

@@ -27,7 +27,7 @@ export class GallerySearchComponent implements OnDestroy {
   mouseOverAutoComplete = false;
   readonly SearchQueryTypes: typeof SearchQueryTypes;
   public readonly MetadataSearchQueryTypes: { value: string; key: SearchQueryTypes }[];
-  public saveSearchName: string;
+  public saveSearchName = '';
   private searchModalRef: BsModalRef;
   private readonly subscription: Subscription = null;
   private saveSearchModalRef: BsModalRef;