Simplify permission forms.

backend/i18n/frontend_en.json

@@ -339,6 +339,7 @@
   "common.passwordConfirm": "Confirm Password",
   "common.pattern": "Pattern",
   "common.patterns": "Patterns",
+  "common.permission": "Permission",
   "common.permissions": "Permissions",
   "common.preview": "Preview",
   "common.product": "Squidex Headless CMS",

backend/i18n/frontend_it.json

@@ -339,6 +339,7 @@
   "common.passwordConfirm": "Conferma Password",
   "common.pattern": "Pattern",
   "common.patterns": "Pattern",
+  "common.permission": "Permission",
   "common.permissions": "Permessi",
   "common.preview": "Anteprima",
   "common.product": "Squidex Headless CMS",

backend/i18n/frontend_nl.json

@@ -339,6 +339,7 @@
   "common.passwordConfirm": "Bevestig wachtwoord",
   "common.pattern": "Patroon",
   "common.patterns": "Patronen",
+  "common.permission": "Permission",
   "common.permissions": "Rechten",
   "common.preview": "Preview",
   "common.product": "Squidex Headless CMS",

backend/i18n/frontend_pt.json

@@ -339,6 +339,7 @@
   "common.passwordConfirm": "Confirmar Password",
   "common.pattern": "Padrão",
   "common.patterns": "Padrões",
+  "common.permission": "Permission",
   "common.permissions": "Permissões",
   "common.preview": "Previsualizar",
   "common.product": "CMS Headless Squidex",

backend/i18n/frontend_zh.json

@@ -339,6 +339,7 @@
   "common.passwordConfirm": "确认密码",
   "common.pattern": "模式",
   "common.patterns": "模式",
+  "common.permission": "Permission",
   "common.permissions": "权限",
   "common.preview": "预览",
   "common.product": "Squidex Headless CMS",

backend/i18n/source/frontend_en.json

@@ -339,6 +339,7 @@
   "common.passwordConfirm": "Confirm Password",
   "common.pattern": "Pattern",
   "common.patterns": "Patterns",
+  "common.permission": "Permission",
   "common.permissions": "Permissions",
   "common.preview": "Preview",
   "common.product": "Squidex Headless CMS",

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

@@ -82,18 +82,16 @@
                     </table>
                 </ng-template>
 
-                <form class="form-group row gx-2" [formGroup]="addPermissionForm.form" (ngSubmit)="addPermission()" *ngIf="isEditable">
+                <div class="form-group row gx-2" *ngIf="isEditable">
                     <div class="col">
-                        <sqx-autocomplete formControlName="permission" [source]="allPermissions" #addInput
-                            placeholder="{{ 'roles.permissionsPlaceholder' | sqxTranslate }}">
-                        </sqx-autocomplete>
+                        <div class="form-control preview">{{ 'common.permission' | sqxTranslate }}</div>
                     </div>
                     <div class="col-auto">
-                        <button type="submit" class="btn btn-success col-action">
+                        <button type="button" class="btn btn-success col-action" (click)="addPermission()">
                             <i class="icon-plus"></i>
                         </button>
                     </div>
-                </form>
+                </div>
 
                 <div class="mt-4" *ngIf="!role.isDefaultRole">
                     <h3>{{ 'roles.properties' | sqxTranslate }}</h3>

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

@@ -6,7 +6,7 @@
  */
 
 import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges, ViewChild } from '@angular/core';
-import { AddPermissionForm, AutocompleteComponent, AutocompleteSource, EditRoleForm, RoleDto, RolesState, SchemaDto, Settings } from '@app/shared';
+import { AutocompleteComponent, AutocompleteSource, EditRoleForm, RoleDto, RolesState, SchemaDto, Settings } from '@app/shared';
 
 const DESCRIPTIONS = {
     Developer: 'i18n:roles.defaults.developer',
@@ -59,8 +59,6 @@ export class RoleComponent implements OnChanges {
     public isEditing = false;
     public isEditable = false;
 
-    public addPermissionForm = new AddPermissionForm();
-
     public editForm = new EditRoleForm();
 
     public get halfSchemas() {
@@ -100,14 +98,7 @@ export class RoleComponent implements OnChanges {
     }
 
     public addPermission() {
-        const value = this.addPermissionForm.submit();
-
-        if (value) {
-            this.editForm.form.add(value.permission);
-
-            this.addPermissionForm.submitCompleted();
-            this.addPermissionInput.focus();
-        }
+        this.editForm.form.add('');
     }
 
     public save() {

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

@@ -6,7 +6,7 @@
  */
 
 import { UntypedFormControl, Validators } from '@angular/forms';
-import { ExtendedFormGroup, Form, hasNoValue$, hasValue$, TemplatedFormArray } from '@app/framework';
+import { ExtendedFormGroup, Form, hasNoValue$, TemplatedFormArray } from '@app/framework';
 import { CreateRoleDto, RoleDto, UpdateRoleDto } from './../services/roles.service';
 
 export class EditRoleForm extends Form<TemplatedFormArray, UpdateRoleDto, RoleDto> {
@@ -35,24 +35,6 @@ class PermissionTemplate {
     }
 }
 
-type AddPermissionFormType = { permission: string };
-
-export class AddPermissionForm extends Form<ExtendedFormGroup, AddPermissionFormType> {
-    public get permission() {
-        return this.form.controls['permission'];
-    }
-
-    public hasPermission = hasValue$(this.permission);
-
-    constructor() {
-        super(new ExtendedFormGroup({
-            permission: new UntypedFormControl('',
-                Validators.required,
-            ),
-        }));
-    }
-}
-
 export class AddRoleForm extends Form<ExtendedFormGroup, CreateRoleDto> {
     public get name() {
         return this.form.controls['name'];