From 693a046295d7b2133bc1c6170b7924feed636678 Mon Sep 17 00:00:00 2001
From: Sebastian Stehle <sebastian@squidex.io>
Date: Sat, 14 Sep 2019 10:08:16 +0200
Subject: [PATCH] Users settings finalized.

---
 .../pages/assets-filters-page.component.html  |  3 +-
 .../contents-filters-page.component.html      |  3 +-
 .../contributors-page.component.html          | 66 ++++++++++---------
 .../contributors-page.component.scss          | 10 +++
 .../angular/forms/form-alert.component.ts     |  8 +--
 .../components/saved-queries.component.ts     | 20 +++---
 .../components/search-form.component.ts       |  2 +-
 src/Squidex/app/shared/state/queries.ts       |  4 ++
 8 files changed, 67 insertions(+), 49 deletions(-)

diff --git a/src/Squidex/app/features/assets/pages/assets-filters-page.component.html b/src/Squidex/app/features/assets/pages/assets-filters-page.component.html
index 99919b491..f3782afbe 100644
--- a/src/Squidex/app/features/assets/pages/assets-filters-page.component.html
+++ b/src/Squidex/app/features/assets/pages/assets-filters-page.component.html
@@ -30,7 +30,8 @@
 
         <sqx-shared-queries types="contents"
             [queries]="assetsQueries"
-            [queryUsed]="isQueryUsed">
+            [queryUsed]="isQueryUsed"
+            (search)="search($event.query)">
         </sqx-shared-queries>
     </ng-container>
 </sqx-panel>
\ No newline at end of file
diff --git a/src/Squidex/app/features/content/pages/contents/contents-filters-page.component.html b/src/Squidex/app/features/content/pages/contents/contents-filters-page.component.html
index 78da01c95..3cf873ff7 100644
--- a/src/Squidex/app/features/content/pages/contents/contents-filters-page.component.html
+++ b/src/Squidex/app/features/content/pages/contents/contents-filters-page.component.html
@@ -25,7 +25,8 @@
 
         <sqx-shared-queries types="contents"
             [queries]="schemaQueries"
-            [queryUsed]="isQueryUsed">
+            [queryUsed]="isQueryUsed"
+            (search)="search($event.query)">
         </sqx-shared-queries>
     </ng-container>
 </sqx-panel>
\ No newline at end of file
diff --git a/src/Squidex/app/features/settings/pages/contributors/contributors-page.component.html b/src/Squidex/app/features/settings/pages/contributors/contributors-page.component.html
index e61b3ff27..eaee544c2 100644
--- a/src/Squidex/app/features/settings/pages/contributors/contributors-page.component.html
+++ b/src/Squidex/app/features/settings/pages/contributors/contributors-page.component.html
@@ -28,6 +28,39 @@
             </ng-container>
             
             <ng-container *ngIf="contributorsState.contributorsPaged | async; let contributors">
+                <ng-container *ngIf="contributorsState.canCreate | async">
+                    <div class="table-items-header">
+                        <sqx-form-alert marginTop="0" marginBottom="2" light="true">
+                            Just enter the email address to invite someone with no account to the app.
+                        </sqx-form-alert>
+
+                        <form [formGroup]="assignContributorForm.form" (ngSubmit)="assignContributor()">
+                            <div class="row no-gutters">
+                                <div class="col">
+                                    <sqx-autocomplete [source]="usersDataSource" formControlName="user" [inputName]="'contributor'" placeholder="Find existing user" displayProperty="displayName">
+                                        <ng-template let-user="$implicit">
+                                            <span class="autocomplete-user">
+                                                <img class="user-picture autocomplete-user-picture" [attr.src]="user | sqxUserDtoPicture" />
+
+                                                <span class="user-name autocomplete-user-name">{{user.displayName}}</span>
+                                            </span>
+                                        </ng-template>
+                                    </sqx-autocomplete>
+                                </div>
+                                <div class="col-auto pl-1">
+                                    <button type="submit" class="btn btn-success" [disabled]="assignContributorForm.hasNoUser | async">Add Contributor</button>
+                                </div>
+                            </div>
+                        </form>
+                    </div>
+
+                    <div class="import-hint">
+                        <sqx-form-hint class="text-right">
+                            Big team? <a class="force" (click)="importDialog.show()">Add many contributors at once</a>
+                        </sqx-form-hint>
+                    </div>
+                </ng-container>
+            
                 <ng-container *ngIf="contributors.length > 0; else noContributors">
                     <table class="table table-items table-fixed" *ngIf="rolesState.roles | async; let roles">
                         <tbody *ngFor="let contributor of contributors; trackBy: trackByContributor">
@@ -56,7 +89,7 @@
                         </tbody>
                     </table>
 
-                    <sqx-pager [pager]="contributorsState.contributorsPager | async" (prevPage)="goPrev()" (nextPage)="goNext()"></sqx-pager>
+                    <sqx-pager [pager]="contributorsState.contributorsPager | async" [hideWhenButtonsDisabled]="true" (prevPage)="goPrev()" (nextPage)="goNext()"></sqx-pager>
                 </ng-container>
 
                 <ng-template #noContributors>
@@ -64,37 +97,6 @@
                         No contributors found.
                     </div>
                 </ng-template>
-                
-                <ng-container *ngIf="contributorsState.canCreate | async">
-                    <div class="table-items-footer">
-                        <sqx-form-alert marginTop="0" marginBottom="2" white="true">
-                            Just enter the email address to invite someone with no account to the app.
-                        </sqx-form-alert>
-
-                        <form [formGroup]="assignContributorForm.form" (ngSubmit)="assignContributor()">
-                            <div class="row no-gutters">
-                                <div class="col">
-                                    <sqx-autocomplete [source]="usersDataSource" formControlName="user" [inputName]="'contributor'" placeholder="Find existing user" displayProperty="displayName">
-                                        <ng-template let-user="$implicit">
-                                            <span class="autocomplete-user">
-                                                <img class="user-picture autocomplete-user-picture" [attr.src]="user | sqxUserDtoPicture" />
-
-                                                <span class="user-name autocomplete-user-name">{{user.displayName}}</span>
-                                            </span>
-                                        </ng-template>
-                                    </sqx-autocomplete>
-                                </div>
-                                <div class="col-auto pl-1">
-                                    <button type="submit" class="btn btn-success" [disabled]="assignContributorForm.hasNoUser | async">Add Contributor</button>
-                                </div>
-                            </div>
-                        </form>
-                    </div>
-
-                    <sqx-form-hint class="text-right">
-                        Big team? <a class="force" (click)="importDialog.show()">Add many contributors at once</a>
-                    </sqx-form-hint>
-                </ng-container>
             </ng-container>
         </ng-container>
     </ng-container>
diff --git a/src/Squidex/app/features/settings/pages/contributors/contributors-page.component.scss b/src/Squidex/app/features/settings/pages/contributors/contributors-page.component.scss
index e42bfaa5c..56afd85b9 100644
--- a/src/Squidex/app/features/settings/pages/contributors/contributors-page.component.scss
+++ b/src/Squidex/app/features/settings/pages/contributors/contributors-page.component.scss
@@ -9,4 +9,14 @@
     &-name {
         margin-left: .25rem;
     }
+}
+
+.import-hint {
+    margin-bottom: 1rem;
+    font-weight: normal;
+    font-size: 90%;
+}
+
+.table-items-header {
+    margin: 0;
 }
\ No newline at end of file
diff --git a/src/Squidex/app/framework/angular/forms/form-alert.component.ts b/src/Squidex/app/framework/angular/forms/form-alert.component.ts
index 052fca509..d9161242b 100644
--- a/src/Squidex/app/framework/angular/forms/form-alert.component.ts
+++ b/src/Squidex/app/framework/angular/forms/form-alert.component.ts
@@ -16,12 +16,12 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
             max-width: 100%;
         }
 
-        .white {
-            background: #fff;
+        .light {
+            background: #fcfeff;
         }
     `],
     template: `
-        <div class="alert alert-hint mt-{{marginTop}} mb-{{marginBottom}} {{class}}" [class.white]="white">
+        <div class="alert alert-hint mt-{{marginTop}} mb-{{marginBottom}} {{class}}" [class.light]="light">
             <i class="icon-info-outline"></i> <ng-content></ng-content>
         </div>`,
     changeDetection: ChangeDetectionStrategy.OnPush
@@ -37,5 +37,5 @@ export class FormAlertComponent {
     public marginBottom = 4;
 
     @Input()
-    public white = false;
+    public light = false;
 }
\ No newline at end of file
diff --git a/src/Squidex/app/shared/components/saved-queries.component.ts b/src/Squidex/app/shared/components/saved-queries.component.ts
index f5cce5ecf..d9d09a296 100644
--- a/src/Squidex/app/shared/components/saved-queries.component.ts
+++ b/src/Squidex/app/shared/components/saved-queries.component.ts
@@ -16,14 +16,14 @@ import { SavedQuery } from '../state/queries';
         <div class="sidebar-section">
             <h3>Shared queries</h3>
 
-            <ng-container *ngIf="queries.queriesShared | async; let queries">
-                <ng-container *ngIf="queries.length > 0; else noQuery">
-                    <a class="sidebar-item" *ngFor="let saved of queries; trackBy: trackByQuery" (click)="search.emit(saved)"
+            <ng-container *ngIf="queries.queriesShared | async; let queryList">
+                <ng-container *ngIf="queryList.length > 0; else noQuery">
+                    <a class="sidebar-item" *ngFor="let saved of queryList; trackBy: trackByQuery" (click)="search.emit(saved)"
                         [class.active]="isSelectedQuery(saved)">
 
                         {{saved.name}}
 
-                        <a class="sidebar-item-remove float-right" (click)="queries.remove(saved)" sqxStopClick>
+                        <a class="sidebar-item-remove float-right" (click)="queries.removeShared(saved)" sqxStopClick>
                             <i class="icon-close"></i>
                         </a>
                     </a>
@@ -42,9 +42,9 @@ import { SavedQuery } from '../state/queries';
         <div class="sidebar-section">
             <h3>My queries</h3>
 
-            <ng-container *ngIf="queries.queriesUser | async; let queries">
-                <ng-container *ngIf="queries.length > 0; else noQuery">
-                    <a class="sidebar-item" *ngFor="let saved of queries; trackBy: trackByQuery" (click)="search.emit(saved)"
+            <ng-container *ngIf="queries.queriesUser | async; let queryList">
+                <ng-container *ngIf="queryList.length > 0; else noQuery">
+                    <a class="sidebar-item" *ngFor="let saved of queryList; trackBy: trackByQuery" (click)="search.emit(saved)"
                         [class.active]="isSelectedQuery(saved)">
 
                         {{saved.name}}
@@ -66,13 +66,13 @@ import { SavedQuery } from '../state/queries';
 })
 export class SavedQueriesComponent {
     @Input()
-    public queries: Queries;
+    public queryUsed: (saved: SavedQuery) => boolean;
 
     @Input()
-    public types: string;
+    public queries: Queries;
 
     @Input()
-    public queryUsed: (saved: SavedQuery) => boolean;
+    public types: string;
 
     @Output()
     public search = new EventEmitter<SavedQuery>();
diff --git a/src/Squidex/app/shared/components/search-form.component.ts b/src/Squidex/app/shared/components/search-form.component.ts
index 5baa77436..5089dce47 100644
--- a/src/Squidex/app/shared/components/search-form.component.ts
+++ b/src/Squidex/app/shared/components/search-form.component.ts
@@ -93,7 +93,7 @@ export class SearchFormComponent implements OnChanges {
 
         if (value) {
             if (this.queries && this.query) {
-                this.queries.add(value.name, this.query);
+                this.queries.add(value.name, this.query, value.user);
             }
 
             this.saveQueryForm.submitCompleted();
diff --git a/src/Squidex/app/shared/state/queries.ts b/src/Squidex/app/shared/state/queries.ts
index 66b8208ab..0f280cccc 100644
--- a/src/Squidex/app/shared/state/queries.ts
+++ b/src/Squidex/app/shared/state/queries.ts
@@ -69,6 +69,10 @@ export class Queries {
         this.uiState.removeUser(this.getPath(saved.name));
     }
 
+    public remove(saved: SavedQuery) {
+        this.uiState.remove(this.getPath(saved.name));
+    }
+
     private getPath(key: string): string {
         return `${this.prefix}.queries.${key}`;
     }