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

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