added user status and prediction user

src/app/users/users.component.html

@@ -28,6 +28,12 @@
       <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>
@@ -41,13 +47,15 @@
   </rb-icon-button>
 </form>
 
-<rb-table>
+<rb-table scrollTop>
   <tr>
     <th>Name</th>
     <th>Email</th>
     <th>Level</th>
     <th>Location</th>
     <th>Device</th>
+    <th>Models</th>
+    <th></th>
     <th></th>
   </tr>
 
@@ -58,7 +66,13 @@
       <td>{{user.level}}</td>
       <td>{{user.location}}</td>
       <td>{{user.devices}}</td>
-      <td><span class="rb-ic rb-ic-edit clickable" (click)="user.edit = true"></span></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 ' + (user.status === 'new' ? 'rb-ic-edit': 'rb-ic-undo')"
+                (click)="user.status === 'new' ? user.edit = true: restoreUser(user)"></span></td>
     </ng-container>
     <ng-template #editUser>
       <td>
@@ -93,9 +107,17 @@
           </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" label="model"
+                          [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.name)">
+                        (click)="deleteConfirm(modalDeleteConfirm, user)">
           Delete
         </rb-icon-button>
         <ng-template #modalDeleteConfirm>
@@ -111,3 +133,10 @@
     </ng-template>
   </tr>
 </rb-table>
+
+<ng-template #modelOptions>
+  <option value=""></option>
+  <ng-container *ngFor="let model of modelSelect">
+    <option [value]="model.id">{{model.name}}</option>
+  </ng-container>
+</ng-template>

src/app/users/users.component.ts

@@ -3,8 +3,8 @@ import {ApiService} from '../services/api.service';
 import {UserModel} from '../models/user.model';
 import {LoginService} from '../services/login.service';
 import {ModalService} from '@inst-iot/bosch-angular-ui-components';
+import {DataService} from '../services/data.service';
 
-// TODO: somehow mail change triggered
 
 @Component({
   selector: 'app-users',
@@ -16,17 +16,26 @@ export class UsersComponent implements OnInit {
   users: UserModel[] = [];
   newUser: UserModel | null = null;
   newUserPass = '';
+  modelSelect: {id: string, name: string}[] = [];
+  modelIds: {[id: string]: string} = {};
 
   constructor(
     private api: ApiService,
     public login: LoginService,
-    private modal: ModalService
+    private modal: ModalService,
+    public d: DataService
   ) { }
 
   ngOnInit(): void {
     this.api.get<UserModel[]>('/users', data => {
       this.users = data.map(e => new UserModel().deserialize(e));
     });
+    this.d.load('modelGroups', () => {
+      this.d.arr.modelGroups.forEach(group => {
+        this.modelSelect.push(...group.models.map(e => ({id: e._id, name: `${group.group} - ${e.name}`})));
+      });
+      this.modelIds = this.modelSelect.reduce((s, e) => {s[e.id] = e.name; return s; }, {});
+    });
   }
 
   saveUser(user: UserModel) {
@@ -48,14 +57,20 @@ export class UsersComponent implements OnInit {
     this.newUser = this.newUser ? null : new UserModel();
   }
 
-  deleteConfirm(modal, username) {
+  deleteConfirm(modal, user) {
     this.modal.open(modal).then(result => {
       if (result) {
-        this.api.delete('/user/' + username, () => {
-          this.users.splice(this.users.findIndex(e => e.name === username), 1);
+        this.api.delete('/user/' + user.name, () => {
+          user.status = 'deleted';
+          user.edit = false;
         });
       }
     });
   }
 
+  restoreUser(user) {
+    this.api.put('/user/restore/' + user.name, {}, () => {
+      user.status = 'new';
+    });
+  }
 }