From b99cafd1137b2fd9731ddbeb906eb0392b5aff30 Mon Sep 17 00:00:00 2001
From: Sebastian <sebastian@squidex.io>
Date: Wed, 6 Jan 2021 12:11:14 +0100
Subject: [PATCH] Better sorting of schemas.

---
 .../contributors-page.component.html          | 17 ++++----
 .../settings/pages/roles/role.component.html  | 39 +++++++++++++------
 .../settings/pages/roles/role.component.scss  |  4 ++
 .../settings/pages/roles/role.component.ts    |  4 ++
 4 files changed, 46 insertions(+), 18 deletions(-)

diff --git a/frontend/app/features/settings/pages/contributors/contributors-page.component.html b/frontend/app/features/settings/pages/contributors/contributors-page.component.html
index ef47064e6..4bbc46b68 100644
--- a/frontend/app/features/settings/pages/contributors/contributors-page.component.html
+++ b/frontend/app/features/settings/pages/contributors/contributors-page.component.html
@@ -29,14 +29,16 @@
                         </div>
                     </ng-container>
                     <ng-container *ngIf="contributorsState.canCreate | async">
-                        <sqx-contributor-add-form [roles]="roles">
+                        <sqx-contributor-add-form
+                            [roles]="roles">
                         </sqx-contributor-add-form>
+
+                        <div class="import-hint">
+                            <sqx-form-hint class="text-right">
+                                {{ 'contributors.importHintg' | sqxTranslate }} <a class="force" (click)="importDialog.show()">{{ 'contributors.importButton' | sqxTranslate }}</a>
+                            </sqx-form-hint>
+                        </div>
                     </ng-container>
-                    <div class="import-hint">
-                        <sqx-form-hint class="text-right">
-                            {{ 'contributors.importHintg' | sqxTranslate }} <a class="force" (click)="importDialog.show()">{{ 'contributors.importButton' | sqxTranslate }}</a>
-                        </sqx-form-hint>
-                    </div>
                 </ng-container>
             </ng-container>
 
@@ -80,7 +82,8 @@
 </sqx-panel>
 
 <ng-container *sqxModal="importDialog">
-    <sqx-import-contributors-dialog [roles]="rolesState.roles | async" (close)="importDialog.hide()">
+    <sqx-import-contributors-dialog [roles]="rolesState.roles | async" 
+        (close)="importDialog.hide()">
     </sqx-import-contributors-dialog>
 </ng-container>
 
diff --git a/frontend/app/features/settings/pages/roles/role.component.html b/frontend/app/features/settings/pages/roles/role.component.html
index 16ea59ba6..d61da1182 100644
--- a/frontend/app/features/settings/pages/roles/role.component.html
+++ b/frontend/app/features/settings/pages/roles/role.component.html
@@ -115,17 +115,34 @@
                         <h5>{{ 'common.schemas' | sqxTranslate }}</h5>
 
                         <div class="row rule-section">
-                            <div class="custom-control custom-checkbox col-6" *ngFor="let schema of schemas; trackBy: trackBySchema">
-                                <input class="custom-control-input" type="checkbox" id="{{role.name}}_schema_{{schema.name}}"
-                                    [disabled]="!isEditable"
-                                    [ngModel]="getProperty(propertiesList.HIDE_CONTENTS(schema.name))"
-                                    (ngModelChange)="setProperty(propertiesList.HIDE_CONTENTS(schema.name), $event)"
-                                    [ngModelOptions]="standalone">
-                                <label class="custom-control-label" for="{{role.name}}_schema_{{schema.name}}">
-                                    <span class="truncate">
-                                        {{ 'roles.properties.hideContents' | sqxTranslate: { schema: schema.displayName } }}
-                                    </span>
-                                </label>
+                            <div class="col-6">
+                                <div class="custom-control custom-checkbox" *ngFor="let schema of schemas | slice:0:halfSchemas; trackBy: trackBySchema">
+                                    <input class="custom-control-input" type="checkbox" id="{{role.name}}_schema_{{schema.name}}"
+                                        [disabled]="!isEditable"
+                                        [ngModel]="getProperty(propertiesList.HIDE_CONTENTS(schema.name))"
+                                        (ngModelChange)="setProperty(propertiesList.HIDE_CONTENTS(schema.name), $event)"
+                                        [ngModelOptions]="standalone">
+                                    <label class="custom-control-label" for="{{role.name}}_schema_{{schema.name}}">
+                                        <span class="truncate">
+                                            {{ 'roles.properties.hideContents' | sqxTranslate: { schema: schema.displayName } }}
+                                        </span>
+                                    </label>
+                                </div>
+                            </div>
+
+                            <div class="col-6">
+                                <div class="custom-control custom-checkbox" *ngFor="let schema of schemas | slice:halfSchemas; trackBy: trackBySchema">
+                                    <input class="custom-control-input" type="checkbox" id="{{role.name}}_schema_{{schema.name}}"
+                                        [disabled]="!isEditable"
+                                        [ngModel]="getProperty(propertiesList.HIDE_CONTENTS(schema.name))"
+                                        (ngModelChange)="setProperty(propertiesList.HIDE_CONTENTS(schema.name), $event)"
+                                        [ngModelOptions]="standalone">
+                                    <label class="custom-control-label" for="{{role.name}}_schema_{{schema.name}}">
+                                        <span class="truncate">
+                                            {{ 'roles.properties.hideContents' | sqxTranslate: { schema: schema.displayName } }}
+                                        </span>
+                                    </label>
+                                </div>
                             </div>
                         </div>
                     </div>
diff --git a/frontend/app/features/settings/pages/roles/role.component.scss b/frontend/app/features/settings/pages/roles/role.component.scss
index e7bd49220..8e56d150f 100644
--- a/frontend/app/features/settings/pages/roles/role.component.scss
+++ b/frontend/app/features/settings/pages/roles/role.component.scss
@@ -44,6 +44,10 @@
     width: 42px;
 }
 
+.custom-control-label {
+    max-width: 100%;
+}
+
 .text-force {
     color: $color-text;
 }
diff --git a/frontend/app/features/settings/pages/roles/role.component.ts b/frontend/app/features/settings/pages/roles/role.component.ts
index 94e29cdf8..08f8182ef 100644
--- a/frontend/app/features/settings/pages/roles/role.component.ts
+++ b/frontend/app/features/settings/pages/roles/role.component.ts
@@ -53,6 +53,10 @@ export class RoleComponent implements OnChanges {
     @ViewChild('addInput', { static: false })
     public addPermissionInput: AutocompleteComponent;
 
+    public get halfSchemas() {
+        return Math.ceil(this.schemas.length / 2);
+    }
+
     public descriptions = DESCRIPTIONS;
 
     public propertiesList = Settings.AppProperties;