ceph/src/pybind/mgr/dashboard/frontend/src/app/core/auth/role-form/role-form.component.html

   1 <div class="cd-col-form"
   2      *cdFormLoading="loading">
   3   <form name="roleForm"
   4         #formDir="ngForm"
   5         [formGroup]="roleForm"
   6         novalidate>
   7     <div class="card">
   8       <div i18n="form title"
   9            class="card-header">{{ action | titlecase }} {{ resource | upperFirst }}</div>
  10       <div class="card-body">
  11
  12         <!-- Name -->
  13         <div class="form-group row">
  14           <label class="cd-col-form-label"
  15                  [ngClass]="{'required': mode !== roleFormMode.editing}"
  16                  for="name"
  17                  i18n>Name</label>
  18           <div class="cd-col-form-input">
  19             <input class="form-control"
  20                    type="text"
  21                    i18n-placeholder
  22                    placeholder="Name..."
  23                    id="name"
  24                    name="name"
  25                    formControlName="name"
  26                    autofocus>
  27             <span class="invalid-feedback"
  28                   *ngIf="roleForm.showError('name', formDir, 'required')"
  29                   i18n>This field is required.</span>
  30             <span class="invalid-feedback"
  31                   *ngIf="roleForm.showError('name', formDir, 'notUnique')"
  32                   i18n>The chosen name is already in use.</span>
  33           </div>
  34         </div>
  35
  36         <!-- Description -->
  37         <div class="form-group row">
  38           <label i18n
  39                  class="cd-col-form-label"
  40                  for="description">Description</label>
  41           <div class="cd-col-form-input">
  42             <input class="form-control"
  43                    type="text"
  44                    i18n-placeholder
  45                    placeholder="Description..."
  46                    id="description"
  47                    name="description"
  48                    formControlName="description">
  49           </div>
  50         </div>
  51
  52         <!-- Permissions -->
  53         <div class="form-group row">
  54           <label i18n
  55                  class="cd-col-form-label">Permissions</label>
  56           <div class="cd-col-form-input">
  57             <cd-table [data]="scopes_permissions"
  58                       [columns]="columns"
  59                       columnMode="flex"
  60                       [toolHeader]="false"
  61                       [autoReload]="false"
  62                       [autoSave]="false"
  63                       [footer]="false"
  64                       [limit]="0">
  65             </cd-table>
  66           </div>
  67         </div>
  68
  69       </div>
  70       <div class="card-footer">
  71         <cd-form-button-panel (submitActionEvent)="submit()"
  72                               [form]="roleForm"
  73                               [submitText]="(action | titlecase) + ' ' + (resource | upperFirst)"
  74                               wrappingClass="text-right"></cd-form-button-panel>
  75       </div>
  76     </div>
  77   </form>
  78 </div>
  79
  80 <ng-template #cellScopeCheckboxTpl
  81              let-column="column"
  82              let-row="row"
  83              let-value="value">
  84   <div class="custom-control custom-checkbox">
  85     <input class="custom-control-input"
  86            id="scope_{{ row.scope }}"
  87            type="checkbox"
  88            [checked]="isRowChecked(row.scope)"
  89            (change)="onClickCellCheckbox(row.scope, column.prop, $event)">
  90     <label class="datatable-permissions-scope-cell-label custom-control-label"
  91            for="scope_{{ row.scope }}">{{ value }}</label>
  92   </div>
  93 </ng-template>
  94
  95 <ng-template #cellPermissionCheckboxTpl
  96              let-column="column"
  97              let-row="row"
  98              let-value="value">
  99   <div class="custom-control custom-checkbox">
 100     <input class="custom-control-input"
 101            type="checkbox"
 102            [checked]="value"
 103            [id]="row.scope + '-' + column.prop"
 104            (change)="onClickCellCheckbox(row.scope, column.prop, $event)">
 105     <label class="custom-control-label"
 106            [for]="row.scope + '-' + column.prop"></label>
 107   </div>
 108 </ng-template>
 109
 110 <ng-template #headerPermissionCheckboxTpl
 111              let-column="column">
 112   <div class="custom-control custom-checkbox">
 113     <input class="custom-control-input"
 114            id="header_{{ column.prop }}"
 115            type="checkbox"
 116            [checked]="isHeaderChecked(column.prop)"
 117            (change)="onClickHeaderCheckbox(column.prop, $event)">
 118     <label class="datatable-permissions-header-cell-label custom-control-label"
 119            for="header_{{ column.prop }}">{{ column.name }}</label>
 120   </div>
 121 </ng-template>