Show favorites in search dialog. (#681)

backend/i18n/frontend_en.json

@@ -204,6 +204,7 @@
   "common.back": "Back",
   "common.backendError": "Backend ERROR",
   "common.backups": "Backups",
+  "common.bookmarks": "Bookmarks",
   "common.bytes": "bytes",
   "common.cancel": "Cancel",
   "common.category": "Category",
@@ -233,6 +234,7 @@
   "common.dateTimeEditor.utc": "UTC",
   "common.delete": "Delete",
   "common.description": "Description",
+  "common.designer": "Designer",
   "common.displayName": "Display Name",
   "common.edit": "Edit",
   "common.email": "Email",

backend/i18n/frontend_it.json

@@ -204,6 +204,7 @@
   "common.back": "Indietro",
   "common.backendError": "Errore nel Backend",
   "common.backups": "Backup",
+  "common.bookmarks": "Bookmarks",
   "common.bytes": "byte",
   "common.cancel": "Annulla",
   "common.category": "Categoria",
@@ -233,6 +234,7 @@
   "common.dateTimeEditor.utc": "UTC",
   "common.delete": "Cancella",
   "common.description": "Descrizione",
+  "common.designer": "Designer",
   "common.displayName": "Nome visualizzato",
   "common.edit": "Modifica",
   "common.email": "Email",

backend/i18n/frontend_nl.json

@@ -204,6 +204,7 @@
   "common.back": "Terug",
   "common.backendError": "Backend ERROR",
   "common.backups": "Back-ups",
+  "common.bookmarks": "Bookmarks",
   "common.bytes": "bytes",
   "common.cancel": "Annuleren",
   "common.category": "Category",
@@ -233,6 +234,7 @@
   "common.dateTimeEditor.utc": "UTC",
   "common.delete": "Verwijderen",
   "common.description": "Beschrijving",
+  "common.designer": "Designer",
   "common.displayName": "Weergavenaam",
   "common.edit": "Bewerken",
   "common.email": "E-mail",

backend/i18n/source/frontend_en.json

@@ -204,6 +204,7 @@
   "common.back": "Back",
   "common.backendError": "Backend ERROR",
   "common.backups": "Backups",
+  "common.bookmarks": "Bookmarks",
   "common.bytes": "bytes",
   "common.cancel": "Cancel",
   "common.category": "Category",
@@ -233,6 +234,7 @@
   "common.dateTimeEditor.utc": "UTC",
   "common.delete": "Delete",
   "common.description": "Description",
+  "common.designer": "Designer",
   "common.displayName": "Display Name",
   "common.edit": "Edit",
   "common.email": "Email",

frontend/app/features/assets/pages/assets-page.component.html

@@ -28,6 +28,7 @@
                         <sqx-search-form formClass="form" placeholder="{{ 'assets.searchByName' | sqxTranslate }}" fieldExample="fileSize"
                             [query]="assetsState.query | async"
                             [queries]="queries"
+                            [queriesTypes]="'common.assets' | sqxTranslate"
                             (queryChange)="search($event)"
                             enableShortcut="true">
                         </sqx-search-form>

frontend/app/features/content/pages/contents/contents-page.component.html

@@ -21,6 +21,7 @@
                     (queryChange)="search($event)"
                     [query]="contentsState.query | async"
                     [queries]="queries | async"
+                    [queriesTypes]="'common.contents' | sqxTranslate"
                     [queryModel]="queryModel | async"
                     [language]="languagesState.isoMasterLanguage | async"
                     enableShortcut="true">

frontend/app/shared/components/search/search-form.component.html

@@ -43,15 +43,51 @@
         </ng-container>
         
         <ng-container content>
-            <div class="form-horizontal">
-                <sqx-query [model]="queryModel" 
-                    [query]="query" 
-                    (queryChange)="changeQuery($event)"
-                    [language]="language">
-                </sqx-query>
-
-                <div class="link" [innerHTML]="'search.help' | sqxTranslate | sqxMarkdown"></div>
+            <div class="buttons2" *ngIf="queries && queriesTypes">
+                <ng-container *ngIf="saveKey | async; else notBookmarked; let key">
+                    <a class="save-search" (click)="queries.remove(key)">
+                        <i class="icon-star-full"></i>
+                    </a>
+                </ng-container>
+            
+                <ng-template #notBookmarked>
+                    <a class="save-search" (click)="saveQuery()">
+                        <i class="icon-star-empty"></i>
+                    </a>
+                </ng-template>
+                
+                <div class="btn-group ml-2">
+                    <button type="button" class="btn btn-sm btn-secondary btn-toggle" [class.btn-primary]="!showQueries" [disabled]="!showQueries" (click)="changeView(false)">
+                        {{ 'common.designer' | sqxTranslate }}
+                    </button>
+                    <button type="button" class="btn btn-sm btn-secondary btn-toggle" [class.btn-primary]="showQueries" [disabled]="showQueries" (click)="changeView(true)">
+                        {{ 'common.bookmarks' | sqxTranslate }}
+                    </button>
+                </div>
             </div>
+
+            <ng-container *ngIf="!showQueries; else savedQueries">
+                <div class="form-horizontal">
+                    <sqx-query [model]="queryModel" 
+                        [query]="query" 
+                        (queryChange)="changeQuery($event)"
+                        [language]="language">
+                    </sqx-query>
+    
+                    <div class="link" [innerHTML]="'search.help' | sqxTranslate | sqxMarkdown"></div>
+                </div>
+            </ng-container>
+
+            <ng-template #savedQueries>
+                <div class='mt-4' *ngIf="queries && queriesTypes">
+                    <sqx-shared-queries
+                        [types]="queriesTypes"
+                        [queryUsed]="query"
+                        [queries]="queries"
+                        (search)="changeQuery($event)">
+                    </sqx-shared-queries>
+                </div>
+            </ng-template>
         </ng-container>
         
         <ng-container footer>

frontend/app/shared/components/search/search-form.component.scss

@@ -15,7 +15,11 @@
 }
 
 .buttons {
-    @include absolute(8px, 8px, auto, auto);
+    @include absolute(8px, 8px);
+}
+
+.buttons2 {
+    @include absolute(.75rem, 1.75rem);
 }
 
 .save-search {

frontend/app/shared/components/search/search-form.component.ts

@@ -38,12 +38,17 @@ export class SearchFormComponent implements OnChanges {
     @Input()
     public queries: Queries;
 
+    @Input()
+    public queriesTypes: string;
+
     @Input()
     public enableShortcut = false;
 
     @Input()
     public formClass = 'form-inline search-form';
 
+    public showQueries = false;
+
     public saveKey: Observable<string | undefined>;
     public saveQueryDialog = new DialogModel();
     public saveQueryForm = new SaveQueryForm(this.formBuilder);
@@ -115,6 +120,10 @@ export class SearchFormComponent implements OnChanges {
         this.updateSaveKey();
     }
 
+    public changeView(value: boolean) {
+        this.showQueries = value;
+    }
+
     private updateSaveKey() {
         if (this.queries && this.query) {
             this.saveKey = this.queries.getSaveKey(this.query);

frontend/app/shared/state/queries.ts

@@ -5,7 +5,7 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { compareStrings } from '@app/framework';
+import { compareStrings, Types } from '@app/framework';
 import { Observable } from 'rxjs';
 import { map, shareReplay } from 'rxjs/operators';
 import { deserializeQuery, equalsQuery, Query } from './query';
@@ -58,19 +58,27 @@ export class Queries {
         this.uiState.set(this.getPath(key), JSON.stringify(query), user);
     }
 
-    public removeShared(saved: SavedQuery) {
-        this.uiState.removeShared(this.getPath(saved.name));
+    public removeShared(saved: SavedQuery | string) {
+        this.uiState.removeShared(this.getPath(saved));
     }
 
-    public removeUser(saved: SavedQuery) {
-        this.uiState.removeUser(this.getPath(saved.name));
+    public removeUser(saved: SavedQuery | string) {
+        this.uiState.removeUser(this.getPath(saved));
     }
 
-    public remove(saved: SavedQuery) {
-        this.uiState.remove(this.getPath(saved.name));
+    public remove(saved: SavedQuery | string) {
+        this.uiState.remove(this.getPath(saved));
     }
 
-    private getPath(key: string): string {
+    private getPath(saved: SavedQuery | string): string {
+        let key: string;
+
+        if (Types.isString(saved)) {
+            key = saved;
+        } else {
+            key = saved.name;
+        }
+
         return `${this.prefix}.queries.${key}`;
     }