definma-ui/src/app/users/users.component.html

<rb-icon-button icon="add" mode="primary" (click)="addNewUser()" class="space-below">New user</rb-icon-button>

<form *ngIf="newUser" #userForm="ngForm" class="space-below">
  <rb-form-input name="name" label="user name" appValidate="username" required [(ngModel)]="newUser.name"
                 #nameInput="ngModel">
    <ng-template rbFormValidationMessage="failure">{{nameInput.errors.failure}}</ng-template>
    <ng-template rbFormValidationMessage="required">Cannot be empty</ng-template>
  </rb-form-input>
  <rb-form-input name="email" label="email" email required [(ngModel)]="newUser.email" ngModel>
    <ng-template rbFormValidationMessage="email">Invalid email</ng-template>
    <ng-template rbFormValidationMessage="required">Cannot be empty</ng-template>
  </rb-form-input>
  <rb-form-select name="level" label="level" required [(ngModel)]="newUser.level">
    <option *ngFor="let level of login.levels" [value]="level">{{level}}</option>
    <ng-template rbFormValidationMessage="required">Cannot be empty</ng-template>
  </rb-form-select>
  <rb-form-input name="location" label="location (Abbreviation, eg. Rng, for sample number)" appValidate="string"
                 [appValidateArgs]="['alphanum']" required
                 [(ngModel)]="newUser.location" #locationInput="ngModel">
    <ng-template rbFormValidationMessage="failure">{{locationInput.errors.failure}}</ng-template>
    <ng-template rbFormValidationMessage="required">Cannot be empty</ng-template>
  </rb-form-input>
  <rb-array-input [(ngModel)]="newUser.devices" name="devices" [pushTemplate]="''">
    <rb-form-input *rbArrayInputItem="let item" rbArrayInputListener="devices" [index]="item.i"
                   label="device" appValidate="string" [name]="'device-' + item.i" [ngModel]="item.value"
                   #deviceInput="ngModel">
      <ng-template rbFormValidationMessage="failure">{{deviceInput.errors.failure}}</ng-template>
    </rb-form-input>
  </rb-array-input>
  <rb-array-input [(ngModel)]="newUser.models" name="models" [pushTemplate]="''">
    <rb-form-select *rbArrayInputItem="let item" rbArrayInputListener="models" [index]="item.i" label="model"
                    [name]="'model-' + item.i" [ngModel]="item.value">
      <ng-container *ngTemplateOutlet="modelOptions"></ng-container>
    </rb-form-select>
  </rb-array-input>
  <rb-form-input name="passA" type="password" label="new password" appValidate="password" required
                 [(ngModel)]="newUserPass" #passAInput="ngModel">
    <ng-template rbFormValidationMessage="failure">{{passAInput.errors.failure}}</ng-template>
  </rb-form-input>
  <rb-form-input name="passB" type="password" label="confirm password" appValidate="equal"
                 [appValidateArgs]="[newUserPass]" required #passBInput="ngModel" ngModel>
    <ng-template rbFormValidationMessage="failure">{{passBInput.errors.failure}}</ng-template>
  </rb-form-input>
  <rb-icon-button icon="save" mode="primary" type="submit" [disabled]="!userForm.form.valid" (click)="saveNewUser()">
    Save user
  </rb-icon-button>
</form>

<rb-table scrollTop>
  <tr>
    <th>Name</th>
    <th>Email</th>
    <th>Level</th>
    <th>Location</th>
    <th>Device</th>
    <th>Models</th>
    <th></th>
  </tr>

  <tr *ngFor="let user of users">
    <ng-container *ngIf="!user.edit; else editUser">
      <td>{{user.name}}</td>
      <td>{{user.email}}</td>
      <td>{{user.level}}</td>
      <td>{{user.location}}</td>
      <td>{{user.devices}}</td>
      <td>
        <ng-container *ngFor="let model of user.models; index as i">
        {{(i > 0 ? ', ' : '') + modelIds[model]}}
        </ng-container>
      </td>
      <td><span class="rb-ic clickable rb-ic-edit"  (click)="user.edit = true"></span></td>
    </ng-container>
    <ng-template #editUser>
      <td>
        <rb-form-input [name]="'name-' + user.name" appValidate="username" required [(ngModel)]="user.name"
                       #nameInput="ngModel">
          <ng-template rbFormValidationMessage="failure">{{nameInput.errors.failure}}</ng-template>
          <ng-template rbFormValidationMessage="required">Cannot be empty</ng-template>
        </rb-form-input>
      </td>
      <td>
        <rb-form-input [name]="'email-' + user.name" email required [(ngModel)]="user.email"  #emailInput="ngModel">
          <ng-template rbFormValidationMessage="email">Invalid email</ng-template>
          <ng-template rbFormValidationMessage="required">Cannot be empty</ng-template>
        </rb-form-input>
      </td>
      <td>
        <rb-form-select [name]="'level-' + user.name" [(ngModel)]="user.level">
          <option *ngFor="let level of login.levels" [value]="level">{{level}}</option>
        </rb-form-select>
      </td>
      <td>
        <rb-form-input [name]="'location-' + user.name" appValidate="string" required [appValidateArgs]="['alphanum']"
                       [(ngModel)]="user.location" #locationInput="ngModel">
          <ng-template rbFormValidationMessage="failure">{{locationInput.errors.failure}}</ng-template>
          <ng-template rbFormValidationMessage="required">Cannot be empty</ng-template>
        </rb-form-input>
      </td>
      <td>
        <rb-array-input [(ngModel)]="user.devices" name="devices" [pushTemplate]="''">
          <rb-form-input *rbArrayInputItem="let item" rbArrayInputListener="devices" [index]="item.i"
                         appValidate="string" [name]="'device-' + item.i" [ngModel]="item.value">
          </rb-form-input>
        </rb-array-input>
      </td>
      <td>
        <rb-array-input [(ngModel)]="user.models" name="devices" [pushTemplate]="''">
          <rb-form-select *rbArrayInputItem="let item" rbArrayInputListener="models" [index]="item.i"
                          [name]="'model-' + item.i" [ngModel]="item.value">
            <ng-container *ngTemplateOutlet="modelOptions"></ng-container>
          </rb-form-select>
        </rb-array-input>
      </td>
      <td>
        <rb-icon-button icon="delete" mode="danger" class="space-below"
                        (click)="deleteConfirm(modalDeleteConfirm, user)">
          Delete
        </rb-icon-button>
        <ng-template #modalDeleteConfirm>
          <rb-alert alertTitle="Are you sure?" type="danger" okBtnLabel="Delete user" cancelBtnLabel="Cancel">
            Do you really want to delete this user?
          </rb-alert>
        </ng-template>
        <rb-icon-button icon="save" mode="primary" (click)="saveUser(user)"
                          [disabled]="nameInput.invalid || emailInput.invalid || locationInput.invalid">
          Save
        </rb-icon-button>
      </td>
    </ng-template>
  </tr>
</rb-table>

<rb-accordion>
  <rb-accordion-title [open]="false"><span class="rb-ic rb-ic-delete"></span>&nbsp; Deleted users</rb-accordion-title>
  <rb-accordion-body>
    <rb-table scrollTop>
      <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Level</th>
        <th>Location</th>
        <th>Device</th>
        <th>Models</th>
        <th></th>
      </tr>

      <tr *ngFor="let user of deletedUsers">
        <td>{{user.name}}</td>
        <td>{{user.email}}</td>
        <td>{{user.level}}</td>
        <td>{{user.location}}</td>
        <td>{{user.devices}}</td>
        <td>
          <ng-container *ngFor="let model of user.models; index as i">
          {{(i > 0 ? ', ' : '') + modelIds[model]}}
          </ng-container>
        </td>
        <td><span class="rb-ic clickable rb-ic-undo" (click)="restoreUser(user)"></span></td>
      </tr>
    </rb-table>
  </rb-accordion-body>
</rb-accordion>

<ng-template #modelOptions>
  <option value=""></option>
  <ng-container *ngFor="let model of modelSelect">
    <option [value]="model.id">{{model.name}}</option>
  </ng-container>
</ng-template>