From 60a3f5a70e4c5adf1bab67635ee879d5197fc8d1 Mon Sep 17 00:00:00 2001
From: Sebastian Stehle <sebastian@squidex.io>
Date: Thu, 8 Apr 2021 16:32:42 +0200
Subject: [PATCH] Show favorites in search dialog. (#681)

---
 backend/i18n/frontend_en.json                 |  2 +
 backend/i18n/frontend_it.json                 |  2 +
 backend/i18n/frontend_nl.json                 |  2 +
 backend/i18n/source/frontend_en.json          |  2 +
 .../assets/pages/assets-page.component.html   |  1 +
 .../contents/contents-page.component.html     |  1 +
 .../search/search-form.component.html         | 52 ++++++++++++++++---
 .../search/search-form.component.scss         |  6 ++-
 .../search/search-form.component.ts           |  9 ++++
 frontend/app/shared/state/queries.ts          | 24 ++++++---
 10 files changed, 84 insertions(+), 17 deletions(-)

diff --git a/backend/i18n/frontend_en.json b/backend/i18n/frontend_en.json
index c066b28f1..5fb90b0f2 100644
--- a/backend/i18n/frontend_en.json
+++ b/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",
diff --git a/backend/i18n/frontend_it.json b/backend/i18n/frontend_it.json
index ae9e7ba2c..e63be4ab1 100644
--- a/backend/i18n/frontend_it.json
+++ b/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",
diff --git a/backend/i18n/frontend_nl.json b/backend/i18n/frontend_nl.json
index 6802b0d26..0ba628cec 100644
--- a/backend/i18n/frontend_nl.json
+++ b/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",
diff --git a/backend/i18n/source/frontend_en.json b/backend/i18n/source/frontend_en.json
index c066b28f1..5fb90b0f2 100644
--- a/backend/i18n/source/frontend_en.json
+++ b/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",
diff --git a/frontend/app/features/assets/pages/assets-page.component.html b/frontend/app/features/assets/pages/assets-page.component.html
index 48004550a..a1f7ddb42 100644
--- a/frontend/app/features/assets/pages/assets-page.component.html
+++ b/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>
diff --git a/frontend/app/features/content/pages/contents/contents-page.component.html b/frontend/app/features/content/pages/contents/contents-page.component.html
index a73929a1c..17eda8344 100644
--- a/frontend/app/features/content/pages/contents/contents-page.component.html
+++ b/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">
diff --git a/frontend/app/shared/components/search/search-form.component.html b/frontend/app/shared/components/search/search-form.component.html
index 5ed17b3ef..b40f73128 100644
--- a/frontend/app/shared/components/search/search-form.component.html
+++ b/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>
diff --git a/frontend/app/shared/components/search/search-form.component.scss b/frontend/app/shared/components/search/search-form.component.scss
index 30dcf2f4e..725a732c3 100644
--- a/frontend/app/shared/components/search/search-form.component.scss
+++ b/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 {
diff --git a/frontend/app/shared/components/search/search-form.component.ts b/frontend/app/shared/components/search/search-form.component.ts
index 65a5eb1a5..1cb2ca37c 100644
--- a/frontend/app/shared/components/search/search-form.component.ts
+++ b/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);
diff --git a/frontend/app/shared/state/queries.ts b/frontend/app/shared/state/queries.ts
index 13b576b34..d61d787de 100644
--- a/frontend/app/shared/state/queries.ts
+++ b/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}`;
     }