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

<div class="table-items-row table-items-row-expandable"> 
    <div class="table-items-row-summary">        
        <div class="row">
            <div class="col-5" [class.built]="role.isDefaultRole">
                <span class="role-name">{{role.name}}</span>
            </div>
            <div class="col text-decent">
                {{ 'common.clients' | sqxTranslate }}: <span [class.text-force]="role.numClients > 0">{{role.numClients}}</span>
            </div>
            <div class="col text-decent">
                {{ 'common.users' | sqxTranslate }}: <span [class.text-force]="role.numContributors > 0">{{role.numContributors}}</span>
            </div>
            <div class="col-auto">
                <div class="float-right">
                    <button type="button" class="btn btn-secondary table-items-edit-button mr-1" [class.active]="isEditing" (click)="toggleEditing()">
                        <i class="icon-settings"></i>
                    </button>

                    <button type="button" class="btn btn-text-danger" [disabled]="!role.canDelete"
                        (sqxConfirmClick)="delete()"
                        confirmTitle="i18n:roles.deleteConfirmTitle"
                        confirmText="i18n:roles.deleteConfirmText"
                        confirmRememberKey="deleteRole">
                        <i class="icon-bin2"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="table-items-row-details" *ngIf="isEditing">
        <form (ngSubmit)="save()">
            <div class="table-items-row-details-tabs clearfix">
                <div class="float-right">
                    <button type="reset" class="btn btn-text-secondary2" (click)="toggleEditing()">{{ 'common.cancel' | sqxTranslate }}</button>
                    <button type="submit" class="btn btn-primary ml-1" *ngIf="isEditable">{{ 'common.save' | sqxTranslate }}</button>
                </div>
            </div>

            <div class="table-items-row-details-tab">
                <h3>{{ 'roles.permissions' | sqxTranslate }}</h3>

                <sqx-form-hint marginBottom="3">
                    {{ 'roles.permissionsDescription' | sqxTranslate }}
                </sqx-form-hint>

                <ng-container *ngIf="!role.isDefaultRole; else defaultRole">
                    <table class="table table-bordered table-fixed table-sm">
                        <tr *ngFor="let control of editForm.controls; let i = index">
                            <td class="col-name">
                                <sqx-control-errors [for]="control" [fieldName]="'Permission'"></sqx-control-errors>
    
                                <sqx-autocomplete inputStyle="empty" [formControl]="control" [source]="allPermissions"></sqx-autocomplete>
                            </td>
                            <td class="col-action" *ngIf="isEditable">
                                <button type="button" class="btn btn-text-danger" (click)="removePermission(i)">
                                    <i class="icon-bin2"></i>
                                </button>
                            </td>
                        </tr>
                    </table>
                </ng-container>

                <ng-template #defaultRole>
                    <sqx-form-alert>
                        {{descriptions[role.name] | sqxTranslate}}
                    </sqx-form-alert>
                    
                    <table class="table table-bordered table-fixed table-sm">
                        <tr *ngFor="let control of editForm.controls; let i = index">
                            <td>
                                <input class="form-control form-control-empty" [formControl]="control" />
                            </td>
                        </tr>
                    </table>
                </ng-template>

                <form class="form-group row no-gutters" [formGroup]="addPermissionForm.form" (ngSubmit)="addPermission()" *ngIf="isEditable">
                    <div class="col">
                        <sqx-autocomplete formControlName="permission" [source]="allPermissions" #addInput
                            placeholder="{{ 'i18n:roles.permissionsPlaceholder' | sqxTranslate }}">
                        </sqx-autocomplete>
                    </div>
                    <div class="col-auto pl-1">
                        <button type="submit" class="btn btn-success col-action">
                            <i class="icon-plus"></i>
                        </button>
                    </div>
                </form>

                <div class="mt-4" *ngIf="!role.isDefaultRole">
                    <h3>{{ 'roles.properties' | sqxTranslate }}</h3>

                    <sqx-form-hint marginBottom="3">
                        {{ 'roles.propertiesDescription' | sqxTranslate }}
                    </sqx-form-hint>

                    <div class="row rule-section">
                        <div class="form-check col-6" *ngFor="let property of propertiesSimple; trackBy: trackByProperty">
                            <input class="form-check-input" type="checkbox" id="{{role.name}}_{{property.key}}"
                                [disabled]="!isEditable"
                                [ngModel]="getProperty(property.key)"
                                (ngModelChange)="setProperty(property.key, $event)"
                                [ngModelOptions]="standalone">
                            <label class="form-check-label" for="{{role.name}}{{property.key}}">
                                {{ property.name | sqxTranslate }}
                            </label>
                        </div>
                    </div>

                    <div class="mt-4" *ngIf="schemas && schemas.length > 0">
                        <h5>{{ 'common.schemas' | sqxTranslate }}</h5>

                        <div class="row rule-section">
                            <div class="form-check col-6" *ngFor="let schema of schemas; trackBy: trackBySchema">
                                <input class="form-check-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="form-check-label truncate" for="{{role.name}}_schema_{{schema.name}}">
                                    {{ 'roles.properties.hideContents' | sqxTranslate: { schema: schema.displayName } }}
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>