Improvements for role dialog

src/Squidex/app/features/administration/pages/restore/restore-page.component.html

@@ -50,7 +50,7 @@
         </ng-container>
         
         <div class="table-items-row">
-            <form [formGroup]="restoreForm.form" (submit)="restore()">
+            <form [formGroup]="restoreForm.form" (ngSubmit)="restore()">
                 <div class="row no-gutters">
                     <div class="col">
                         <input class="form-control" name="url" formControlName="url" placeholder="Url to backup" />

src/Squidex/app/features/rules/pages/rules/rule-wizard.component.html

@@ -30,7 +30,7 @@
         </div>
         
         <ng-container *ngIf="step === 2 && schemas">
-            <form [formGroup]="triggerForm.form" (submit)="saveTrigger()">  
+            <form [formGroup]="triggerForm.form" (ngSubmit)="saveTrigger()">  
                 <h3 class="wizard-title">{{ruleTriggers[triggerType].display}}</h3>
 
                 <ng-container [ngSwitch]="triggerType">
@@ -62,7 +62,7 @@
         </div>
     
         <ng-container *ngIf="step === 4">
-            <form [formGroup]="actionForm.form" (submit)="saveAction()">
+            <form [formGroup]="actionForm.form" (ngSubmit)="saveAction()">
                     <h3 class="wizard-title">{{ruleActions[actionType].display}}</h3>
 
                 <ng-container [ngSwitch]="actionType">

src/Squidex/app/features/schemas/pages/schemas/schemas-page.component.html

@@ -28,7 +28,7 @@
             (removing)="removeCategory(category)">
         </sqx-schema-category>
 
-        <form [formGroup]="addCategoryForm.form" (submit)="addCategory()">
+        <form [formGroup]="addCategoryForm.form" (ngSubmit)="addCategory()">
             <input class="form-control form-control-dark new-category-input" formControlName="name" placeholder="Create new category..." />
         </form>
     </ng-container>

src/Squidex/app/features/settings/pages/roles/role.component.html

@@ -19,7 +19,7 @@
                     <button type="button" class="btn btn-link btn-danger" [class.invisible]="isDefaultRole || role.numClients > 0 || role.numContributors > 0"
                         (sqxConfirmClick)="remove()"
                         confirmTitle="Delete role" 
-                        confirmText="Do you really want to delete the language?">
+                        confirmText="Do you really want to delete the role?">
                         <i class="icon-bin2"></i>
                     </button>
                 </div>
@@ -43,17 +43,23 @@
 
                         <sqx-autocomplete [formControl]="control" [source]="allPermissions"></sqx-autocomplete>
                     </div>
-                    <div class="col col-auto" *ngIf="!isDefaultRole">
+                    <div class="col col-auto pl-1" *ngIf="!isDefaultRole">
                         <button type="button" class="btn btn-link btn-danger" (click)="removePermission(i)">
                             <i class="icon-bin2"></i>
                         </button>
                     </div>
                 </div>
-                <div class="form-group" *ngIf="!isDefaultRole">
-                    <button type="button" class="btn btn-success btn-sm" (click)="addPermission()">
-                        Add Permission
+
+                <form class="form-group row no-gutters" [formGroup]="addPermissionForm.form" (ngSubmit)="addPermission()" *ngIf="!isDefaultRole">
+                    <div class="col">
+                        <sqx-autocomplete formControlName="permission" [source]="allPermissions" #addInput></sqx-autocomplete>
+                    </div>
+                    <div class="col col-auto pl-1">
+                        <button type="submit" class="btn btn-success">
+                            <i class="icon-plus"></i>
                         </button>
                     </div>
+                </form>
             </div>
         </form>
     </div>

src/Squidex/app/features/settings/pages/roles/role.component.ts

@@ -5,11 +5,14 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { Component, Input, OnChanges } from '@angular/core';
+import { Component, Input, OnChanges, ViewChild } from '@angular/core';
+import { FormBuilder } from '@angular/forms';
 import { onErrorResumeNext } from 'rxjs/operators';
 
 import {
+    AddPermissionForm,
     AppRoleDto,
+    AutocompleteComponent,
     AutocompleteSource,
     EditPermissionsForm,
     fadeAnimation,
@@ -39,12 +42,18 @@ export class RoleComponent implements OnChanges {
     @Input()
     public allPermissions: AutocompleteSource;
 
+    @ViewChild('addInput')
+    public addPermissionInput: AutocompleteComponent;
+
     public isEditing = false;
     public isDefaultRole = false;
 
+    public addPermissionForm = new AddPermissionForm(this.formBuilder);
+
     public editForm = new EditPermissionsForm();
 
     constructor(
+        private readonly formBuilder: FormBuilder,
         private readonly rolesState: RolesState
     ) {
     }
@@ -63,10 +72,6 @@ export class RoleComponent implements OnChanges {
         this.isEditing = !this.isEditing;
     }
 
-    public addPermission() {
-        this.editForm.add();
-    }
-
     public removePermission(index: number) {
         this.editForm.remove(index);
     }
@@ -75,6 +80,17 @@ export class RoleComponent implements OnChanges {
         this.rolesState.delete(this.role).pipe(onErrorResumeNext()).subscribe();
     }
 
+    public addPermission() {
+        const value = this.addPermissionForm.submit();
+
+        if (value) {
+            this.editForm.add(value.permission);
+
+            this.addPermissionForm.submitCompleted({});
+            this.addPermissionInput.focus();
+        }
+    }
+
     public save() {
         const value = this.editForm.submit();
 

src/Squidex/app/framework/angular/forms/autocomplete.component.ts

@@ -5,7 +5,7 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { ChangeDetectionStrategy, Component, ContentChild, forwardRef, Input, OnDestroy, OnInit, TemplateRef } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ContentChild, ElementRef, forwardRef, Input, OnDestroy, OnInit, TemplateRef, ViewChild } from '@angular/core';
 import { ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { Observable, of, Subscription } from 'rxjs';
 import { catchError, debounceTime, distinctUntilChanged, filter, map, switchMap, tap } from 'rxjs/operators';
@@ -50,6 +50,9 @@ export class AutocompleteComponent implements ControlValueAccessor, OnDestroy, O
     @ContentChild(TemplateRef)
     public itemTemplate: TemplateRef<any>;
 
+    @ViewChild('input')
+    public inputControl: ElementRef<HTMLInputElement>;
+
     public suggestedItems: any[] = [];
     public suggestedIndex = -1;
 
@@ -95,8 +98,7 @@ export class AutocompleteComponent implements ControlValueAccessor, OnDestroy, O
                 this.reset();
                 return false;
             case KEY_ENTER:
-                if (this.suggestedItems.length > 0) {
-                    this.selectItem();
+                if (this.suggestedItems.length > 0 && this.selectItem()) {
                     return false;
                 }
                 break;
@@ -136,12 +138,16 @@ export class AutocompleteComponent implements ControlValueAccessor, OnDestroy, O
         this.callTouched = fn;
     }
 
+    public focus() {
+        this.inputControl.nativeElement.focus();
+    }
+
     public blur() {
         this.reset();
         this.callTouched();
     }
 
-    public selectItem(selection: any | null = null) {
+    public selectItem(selection: any | null = null): boolean {
         if (!selection) {
             selection = this.suggestedItems[this.suggestedIndex];
         }
@@ -161,7 +167,11 @@ export class AutocompleteComponent implements ControlValueAccessor, OnDestroy, O
             } finally {
                 this.reset();
             }
+
+            return true;
         }
+
+        return false;
     }
 
     public selectIndex(selection: number) {

src/Squidex/app/framework/angular/modals/dialog-renderer.component.ts

@@ -56,7 +56,7 @@ export class DialogRendererComponent implements OnDestroy, OnInit {
                 if (!isOpen) {
                     this.cancel();
 
-                    this.changeDetector.markForCheck();
+                    this.changeDetector.detectChanges();
                 }
             });
 
@@ -70,7 +70,7 @@ export class DialogRendererComponent implements OnDestroy, OnInit {
                     }, notification.displayTime);
                 }
 
-                this.changeDetector.markForCheck();
+                this.changeDetector.detectChanges();
             });
 
         this.dialogsSubscription =
@@ -81,7 +81,7 @@ export class DialogRendererComponent implements OnDestroy, OnInit {
                     this.dialogRequest = request;
                     this.dialogView.show();
 
-                    this.changeDetector.markForCheck();
+                    this.changeDetector.detectChanges();
                 });
     }
 
@@ -107,7 +107,7 @@ export class DialogRendererComponent implements OnDestroy, OnInit {
         if (index >= 0) {
             this.notifications.splice(index, 1);
 
-            this.changeDetector.markForCheck();
+            this.changeDetector.detectChanges();
         }
     }
 }

src/Squidex/app/framework/angular/modals/modal-dialog.component.ts

@@ -64,6 +64,6 @@ export class ModalDialogComponent implements AfterViewInit {
         this.hasTabs = this.tabsElement.nativeElement.children.length > 0;
         this.hasFooter = this.footerElement.nativeElement.children.length > 0;
 
-        this.changeDetector.markForCheck();
+        this.changeDetector.detectChanges();
     }
 }

src/Squidex/app/shared/components/comments.component.html

@@ -14,7 +14,7 @@
         </div>
         
         <div class="grid-footer">
-            <form [formGroup]="commentForm.form" (submit)="comment()">
+            <form [formGroup]="commentForm.form" (ngSubmit)="comment()">
                 <input class="form-control" name="text" formControlName="text" placeholder="Create a comment" />
             </form>
         </div>

src/Squidex/app/shared/components/geolocation-editor.component.html

@@ -4,7 +4,7 @@
         <input [class.hidden]="!isGoogleMaps" class="form-control search-control" type="text" [disabled]="isDisabled" placeholder="Search Google Maps" #searchBox />
     </form>
     <div>
-        <form class="form-inline no-gutters" [formGroup]="geolocationForm" (change)="updateValueByInput()" (submit)="updateValueByInput()">
+        <form class="form-inline no-gutters" [formGroup]="geolocationForm" (change)="updateValueByInput()" (ngSubmit)="updateValueByInput()">
             <div class="form-group col-auto pr-2">
                 <label for="latitude">Latitude: </label>
             </div>

src/Squidex/app/shared/state/roles.forms.ts

@@ -15,8 +15,8 @@ export class EditPermissionsForm extends Form<FormArray> {
         super(new FormArray([]));
     }
 
-    public add() {
-        this.form.push(new FormControl(undefined, Validators.required));
+    public add(value?: string) {
+        this.form.push(new FormControl(value, Validators.required));
     }
 
     public remove(index: number) {
@@ -36,6 +36,21 @@ export class EditPermissionsForm extends Form<FormArray> {
     }
 }
 
+export class AddPermissionForm extends Form<FormGroup> {
+    public hasPermission =
+        this.form.controls['permission'].valueChanges.pipe(startWith(''), map(x => !x || x.length === 0));
+
+    constructor(formBuilder: FormBuilder) {
+        super(formBuilder.group({
+            permission: [null,
+                [
+                    Validators.required
+                ]
+            ]
+        }));
+    }
+}
+
 export class AddRoleForm extends Form<FormGroup> {
     public hasNoName =
         this.form.controls['name'].valueChanges.pipe(startWith(''), map(x => !x || x.length === 0));

src/Squidex/app/shared/state/roles.state.ts

@@ -76,7 +76,7 @@ export class RolesState extends State<Snapshot> {
         return this.appRolesService.postRole(this.appName, request, this.version).pipe(
             tap(dto => {
                 this.next(s => {
-                    const roles = s.roles.push(dto.payload);
+                    const roles = s.roles.push(dto.payload).sortByStringAsc(x => x.name);
 
                     return { ...s, roles, version: dto.version };
                 });