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

<h2>Users</h2>

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

<form *ngIf="newUser" #userForm="ngForm">
  <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" appValidate="string" required [appValidateArgs]="['alphanum']"
                 [(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-form-input name="device" label="device" appValidate="string" [(ngModel)]="newUser.device_name"
                 #deviceInput="ngModel">
    <ng-template rbFormValidationMessage="failure">{{deviceInput.errors.failure}}</ng-template>
  </rb-form-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>
  <tr>
    <th>Name</th>
    <th>Email</th>
    <th>Level</th>
    <th>Location</th>
    <th>Device</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.device_name}}</td>
      <td><span class="rb-ic rb-ic-edit clickable" (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-form-input [name]="'device-' + user.name" appValidate="string" [(ngModel)]="user.device_name"
                       #deviceInput="ngModel">
          <ng-template rbFormValidationMessage="failure">{{deviceInput.errors.failure}}</ng-template>
        </rb-form-input>
      </td>
      <td><rb-icon-button icon="save" mode="primary" (click)="saveUser(user)" [disabled]="nameInput.invalid || emailInput.invalid || locationInput.invalid || deviceInput.invalid">Save</rb-icon-button></td>
    </ng-template>
  </tr>
</rb-table>