Merge pull request #29 in ~VLE2FE/definma-ui from development to master

* commit '6f95ff41489216acdb6368ad098f16684d9d8310':
  added user status and prediction user
  fixed to the top button

src/app/app-routing.module.ts

@@ -1,5 +1,5 @@
 import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
+import {Routes, RouterModule, ExtraOptions} from '@angular/router';
 import {HomeComponent} from './home/home.component';
 import {LoginService} from './services/login.service';
 import {SampleComponent} from './sample/sample.component';
@@ -33,8 +33,14 @@ const routes: Routes = [
   { path: '**', redirectTo: '' }
 ];
 
+const routerOptions: ExtraOptions = {
+  scrollPositionRestoration: 'enabled',
+  anchorScrolling: 'enabled',
+  scrollOffset: [0, 64],
+};
+
 @NgModule({
-  imports: [RouterModule.forRoot(routes)],
+  imports: [RouterModule.forRoot(routes, routerOptions)],
   exports: [RouterModule]
 })
 export class AppRoutingModule { }

src/app/app.component.html

@@ -3,7 +3,7 @@
     <a routerLink="/home" routerLinkActive="active" rbLoadingLink>Home</a>
     <a routerLink="/prediction" routerLinkActive="active" rbLoadingLink *ngIf="login.isLevel.dev">Prediction</a>
     <a routerLink="/models" routerLinkActive="active" rbLoadingLink *ngIf="login.isLevel.dev">Models</a>
-    <a routerLink="/samples" routerLinkActive="active" rbLoadingLink *ngIf="login.isLoggedIn">Samples</a>
+    <a routerLink="/samples" routerLinkActive="active" rbLoadingLink *ngIf="login.isLevel.read">Samples</a>
     <a routerLink="/templates" routerLinkActive="active" rbLoadingLink *ngIf="login.isLevel.dev">
       Templates
     </a>
@@ -53,21 +53,18 @@
   </div>
 </rb-full-header>
 
-<div class="to-the-top-container">
+<div class="container">
-  <div class="container">
   <router-outlet></router-outlet>
-  </div>
-
-  <div class="to-the-top">
-    <rb-icon-button icon="up" mode="primary" iconOnly (click)="toTheTop()"></rb-icon-button>
-  </div>
 </div>
 
+<rb-icon-button icon="up" mode="primary" iconOnly (click)="toTheTop()" *ngIf="window.scrollY > 300" class="to-the-top">
+</rb-icon-button>
+
 <rb-footer-nav>
   <span class="copyright">
     CR/APS1 and CR/ANA1 2020
   </span>
   <nav>
-    <a [href]="'mailto:' + d.contact">Contact</a>
+    <a [href]="'mailto:' + d.contact.mail">Contact</a>
   </nav>
 </rb-footer-nav>

src/app/app.component.scss

@@ -14,21 +14,13 @@
   width: 800px;
 }
 
-.to-the-top-container {
+.container {
   position: relative;
   overflow: hidden;
 }
 
 .to-the-top {
-  position: absolute;
+  position: fixed;
-  top: 100vh;
-  bottom: 10px;
   right: 1rem;
-  pointer-events: none;
+  bottom: 20px;
-
-  rb-icon-button {
-    position: sticky;
-    pointer-events: all;
-    top: calc(100vh - 3rem);
-  }
 }

src/app/app.component.ts

@@ -22,7 +22,7 @@ export class AppComponent implements OnInit{
   constructor(
     public login: LoginService,
     public router: Router,
-    private window: Window,
+    public window: Window,
     private modal: ModalService,
     public d: DataService
   ) {

src/app/documentation/documentation.component.html

@@ -32,51 +32,66 @@
 <rb-table>
   <tr>
     <th></th>
+    <th>prediction</th>
+    <th>read</th>
+    <th>write</th>
+    <th>dev</th>
+    <th>admin</th>
+  </tr>
+  <tr>
+    <th>use prediction models</th>
+    <td>specified ones</td>
+    <td>specified ones</td>
+    <td>specified ones</td>
+    <td>all</td>
+    <td>all</td>
+  </tr>
+  <tr>
     <th>read sample data</th>
+    <td><span class="rb-ic rb-ic-abort-frame"></span></td>
+    <td><span class="rb-ic rb-ic-checkmark-frame"></span></td>
+    <td><span class="rb-ic rb-ic-checkmark-frame"></span></td>
+    <td><span class="rb-ic rb-ic-checkmark-frame"></span></td>
+    <td><span class="rb-ic rb-ic-checkmark-frame"></span></td>
+  </tr>
+  <tr>
     <th>add samples/edit own</th>
+    <td><span class="rb-ic rb-ic-abort-frame"></span></td>
+    <td><span class="rb-ic rb-ic-abort-frame"></span></td>
+    <td><span class="rb-ic rb-ic-checkmark-frame"></span></td>
+    <td><span class="rb-ic rb-ic-checkmark-frame"></span></td>
+    <td><span class="rb-ic rb-ic-checkmark-frame"></span></td>
+  </tr>
+  <tr>
     <th>read spectral data</th>
+    <td><span class="rb-ic rb-ic-abort-frame"></span></td>
+    <td><span class="rb-ic rb-ic-abort-frame"></span></td>
+    <td><span class="rb-ic rb-ic-abort-frame"></span></td>
+    <td><span class="rb-ic rb-ic-checkmark-frame"></span></td>
+    <td><span class="rb-ic rb-ic-checkmark-frame"></span></td>
+  </tr>
+  <tr>
     <th>edit other's data</th>
+    <td><span class="rb-ic rb-ic-abort-frame"></span></td>
+    <td><span class="rb-ic rb-ic-abort-frame"></span></td>
+    <td><span class="rb-ic rb-ic-abort-frame"></span></td>
+    <td><span class="rb-ic rb-ic-checkmark-frame"></span></td>
+    <td><span class="rb-ic rb-ic-checkmark-frame"></span></td>
+  </tr>
+  <tr>
     <th>maintain templates</th>
+    <td><span class="rb-ic rb-ic-abort-frame"></span></td>
+    <td><span class="rb-ic rb-ic-abort-frame"></span></td>
+    <td><span class="rb-ic rb-ic-abort-frame"></span></td>
+    <td><span class="rb-ic rb-ic-checkmark-frame"></span></td>
+    <td><span class="rb-ic rb-ic-checkmark-frame"></span></td>
+  </tr>
+  <tr>
     <th>edit users</th>
-  </tr>
-
-  <tr>
-    <td>read</td>
-    <td><span class="rb-ic rb-ic-checkmark-frame"></span></td>
     <td><span class="rb-ic rb-ic-abort-frame"></span></td>
     <td><span class="rb-ic rb-ic-abort-frame"></span></td>
     <td><span class="rb-ic rb-ic-abort-frame"></span></td>
     <td><span class="rb-ic rb-ic-abort-frame"></span></td>
-    <td><span class="rb-ic rb-ic-abort-frame"></span></td>
-  </tr>
-
-  <tr>
-    <td>write</td>
-    <td><span class="rb-ic rb-ic-checkmark-frame"></span></td>
-    <td><span class="rb-ic rb-ic-checkmark-frame"></span></td>
-    <td><span class="rb-ic rb-ic-abort-frame"></span></td>
-    <td><span class="rb-ic rb-ic-abort-frame"></span></td>
-    <td><span class="rb-ic rb-ic-abort-frame"></span></td>
-    <td><span class="rb-ic rb-ic-abort-frame"></span></td>
-  </tr>
-
-  <tr>
-    <td>dev</td>
-    <td><span class="rb-ic rb-ic-checkmark-frame"></span></td>
-    <td><span class="rb-ic rb-ic-checkmark-frame"></span></td>
-    <td><span class="rb-ic rb-ic-checkmark-frame"></span></td>
-    <td><span class="rb-ic rb-ic-checkmark-frame"></span></td>
-    <td><span class="rb-ic rb-ic-checkmark-frame"></span></td>
-    <td><span class="rb-ic rb-ic-abort-frame"></span></td>
-  </tr>
-
-  <tr>
-    <td>admin</td>
-    <td><span class="rb-ic rb-ic-checkmark-frame"></span></td>
-    <td><span class="rb-ic rb-ic-checkmark-frame"></span></td>
-    <td><span class="rb-ic rb-ic-checkmark-frame"></span></td>
-    <td><span class="rb-ic rb-ic-checkmark-frame"></span></td>
-    <td><span class="rb-ic rb-ic-checkmark-frame"></span></td>
     <td><span class="rb-ic rb-ic-checkmark-frame"></span></td>
   </tr>
 </rb-table>

src/app/help/help.component.html

@@ -2,13 +2,13 @@
 
 <ng-container [ngSwitch]="route">
  <p *ngSwitchCase="'/'">Please log in for further access. If you do not have an account yet, please contact
-   <a [href]="'mailto:' + d.contact">{{d.contact}}</a>.
+   <a [href]="'mailto:' + d.contact.mail">{{d.contact.name}}</a>.
  </p>
  <p *ngSwitchCase="'/home'">Please log in for further access. If you do not have an account yet, please contact
-   <a [href]="'mailto:' + d.contact">{{d.contact}}</a>.
+   <a [href]="'mailto:' + d.contact.mail">{{d.contact.name}}</a>.
  </p>
  <p *ngSwitchDefault>
    Sadly, currently there is no help available for this page. Please contact
-   <a [href]="'mailto:' + d.contact">{{d.contact}}</a> for further questions.
+   <a [href]="'mailto:' + d.contact.mail">{{d.contact.name}}</a> for further questions.
  </p>
 </ng-container>

src/app/login/login.component.html

@@ -16,7 +16,8 @@
       <ng-template rbFormValidationMessage="failure">{{emailInput.errors.failure}}</ng-template>
     </rb-form-input>
     <a href="#" class="forgot-pass" (click)="passreset = !passreset">Forgot password</a>
-    <button class="rb-btn rb-primary login-button" (click)="login()" type="submit" [disabled]="!loginForm.form.valid">
+    <button class="rb-btn rb-primary login-button" (click)="userLogin()" type="submit"
+            [disabled]="!loginForm.form.valid">
       {{passreset ? 'Send' : 'Login'}}
     </button>
     <div class="message">{{message}}</div>

src/app/login/login.component.ts

@@ -23,7 +23,7 @@ export class LoginComponent implements OnInit {
 
   constructor(
     private validate: ValidationService,
-    private loginService: LoginService,
+    private login: LoginService,
     private api: ApiService,
     private router: Router
   ) { }
@@ -31,7 +31,7 @@ export class LoginComponent implements OnInit {
   ngOnInit() {
   }
 
-  login() {
+  userLogin() {
     if (this.passreset) {
       this.api.post('/user/passreset', {name: this.username, email: this.email}, (data, err) => {
         if (err) {
@@ -43,11 +43,16 @@ export class LoginComponent implements OnInit {
       });
     }
     else {
-      this.loginService.login(this.username, this.password).then(ok => {
+      this.login.login(this.username, this.password).then(ok => {
         if (ok) {
           this.message = 'Login successful';
+          if (this.login.isLevel.read) {
             this.router.navigate(['/samples']);
           }
+          else {
+            this.router.navigate(['/prediction']);
+          }
+        }
         else {
           this.message = 'Wrong credentials!';
         }

src/app/model-templates/model-templates.component.ts

@@ -50,7 +50,6 @@ export class ModelTemplatesComponent implements OnInit {
       this.oldModelGroup = '';
       this.oldModelName = '';
       this.model = new ModelItemModel().models[0];
-      this.groups = this.d.arr.modelGroups.map(e => e.group);
     });
   }
 

src/app/models/user.model.ts

@@ -10,6 +10,8 @@ export class UserModel extends BaseModel{
   level = '';
   location = '';
   devices = [''];
+  models = [''];
+  status = 'new';
   edit = false;
 
   deserialize(input: any): this {
@@ -22,6 +24,7 @@ export class UserModel extends BaseModel{
     const keys = ['name', 'email', 'location', 'devices'];
     if (mode === 'admin') {
       keys.push('level');
+      keys.push('models');
     }
     return pick(this, keys);
   }

src/app/prediction/prediction.component.html

@@ -14,17 +14,20 @@
   <ng-container *ngIf="multipleSamples; else singleSampleResult">
     <h4 *ngFor="let prediction of result.predictions; index as i">
       {{spectrumNames[i]}}: {{prediction}}&nbsp;{{activeGroup.models[activeModelIndex].label}}
+      <a [routerLink]='"."' fragment="disclaimer"><sup>#</sup></a>
     </h4>
   </ng-container>
   <ng-template #singleSampleResult>
     <h4>
-      Average result: {{result.meanPrediction}}&nbsp;{{activeGroup.models[activeModelIndex].label}},
+      Average result: {{result.meanPrediction}}&nbsp;{{activeGroup.models[activeModelIndex].label}}
-      standard deviation: {{result.std}}
+      <a [routerLink]='"."' fragment="disclaimer"><sup>#</sup></a>,
+      standard deviation: {{result.std}}<a [routerLink]='"."' fragment="disclaimer"><sup>#</sup></a>
     </h4>
     <a href="javascript:" class="rb-details-toggle" rbDetailsToggle #triggerDetails="rbDetailsToggle">Details</a>
     <div *ngIf="triggerDetails.open" class="space-below">
       <p *ngFor="let prediction of result.predictions; index as i">
         {{spectrumNames[i]}}: {{prediction}}&nbsp;{{activeGroup.models[activeModelIndex].label}}
+        <a [routerLink]='"."' fragment="disclaimer"><sup>#</sup></a>
       </p>
     </div>
   </ng-template>
@@ -53,7 +56,7 @@
   </div>
 </div>
 
-<div class="dpt-chart">
+<div class="dpt-chart space-below">
   <canvas baseChart
           class="dpt-chart"
           [datasets]="chart"
@@ -63,3 +66,12 @@
           chartType="scatter">
   </canvas>
 </div>
+
+<div class="shaded-container" id="disclaimer">
+  <h4><sup>#</sup>Disclaimer: This tool is still under development</h4>
+  <p>
+    The prediction and classification of material parameters are validated only for certain conditions.
+    These results may therefore under no circumstances be used to evaluate quality-relevant issues. <br>
+    For more details please contact <a [href]="'mailto:' + d.contact.mail">{{d.contact.name}}</a>.
+  </p>
+</div>

src/app/prediction/prediction.component.scss

@@ -1,6 +1,7 @@
 .dpt-chart {
   max-width: 800px;
-  margin: 0 auto;
+  margin-left: auto;
+  margin-right: auto;
 }
 
 .file-input {

src/app/prediction/prediction.component.ts

@@ -5,6 +5,7 @@ import {animate, style, transition, trigger} from '@angular/animations';
 import cloneDeep from 'lodash/cloneDeep';
 import {DataService} from '../services/data.service';
 import {ModelItemModel} from '../models/model-item.model';
+import {HttpClient} from '@angular/common/http';
 
 interface PredictionResult {
   meanPrediction: string;
@@ -86,7 +87,8 @@ export class PredictionComponent implements OnInit {
       if (files.hasOwnProperty(i)) {
         const fileReader = new FileReader();
         fileReader.onload = () => {
-          this.spectrum = fileReader.result.toString().split('\r\n').map(e => e.split(',').map(el => parseFloat(el))) as any;
+          this.spectrum = fileReader.result.toString().split('\r\n').map(e => e.split(',').map(el => parseFloat(el)))
+            .filter(el => el.length === 2) as any;
           this.flattenedSpectra[i] = {labels: this.spectrum.map(e => e[0]), values: this.spectrum.map(e => e[1])};
           this.chart[i] = cloneDeep(this.chartInit);
           this.chart[i].data = this.spectrum.map(e => ({x: parseFloat(e[0]), y: parseFloat(e[1])}));

src/app/sample/sample.component.html

@@ -169,7 +169,7 @@
       <tr><td>Type</td><td>{{baseSample.type}}</td></tr>
       <tr><td>color</td><td>{{baseSample.color}}</td></tr>
       <tr><td>Batch</td><td>{{baseSample.batch}}</td></tr>
-      <tr><td>Comment</td><td>{{baseSample.notes.comment}}</td></tr>
+      <tr><td>Comment</td><td>{{baseSample.notes | exists:'comment'}}</td></tr>
       <tr *ngFor="let reference of sampleReferences.slice(0, -1)">
         <td>Sample reference</td><td>{{reference[0]}} - {{reference[1]}}</td>
       </tr>
@@ -323,7 +323,8 @@
 </ng-template>
 
 <ng-template #modalDeleteConfirm>
-  <rb-alert alertTitle="Are you sure?" type="danger" [okBtnLabel]="'Delete sample' + (samples.length > 1 ? 's' : '')" cancelBtnLabel="Cancel">
+  <rb-alert alertTitle="Are you sure?" type="danger" [okBtnLabel]="'Delete sample' + (samples.length > 1 ? 's' : '')"
+            cancelBtnLabel="Cancel">
     Do you really want to delete {{samples.length > 1 ? 'these samples' : 'this sample'}}?
   </rb-alert>
 </ng-template>

src/app/sample/sample.component.ts

@@ -329,6 +329,7 @@ export class SampleComponent implements OnInit, AfterContentChecked {
         resolve();
       }
     }).then(() => {  // save sample
+      if (this.baseSample.notes) {
         this.baseSample.notes.custom_fields = {};
         this.customFields.forEach(element => {
           if (element[0] !== '') {
@@ -338,6 +339,7 @@ export class SampleComponent implements OnInit, AfterContentChecked {
         this.baseSample.notes.sample_references = this.sampleReferences
           .filter(e => e[0] && e[1] && e[2])
           .map(e => ({sample_id: e[2], relation: e[1]}));
+      }
       if (this.samples.length === 0) {  // only save new sample for the first time in mode new, otherwise save changes
         for (let i = 0; i < this.sampleCount; i ++) {
           this.api.post<SampleModel>('/sample/new', this.baseSample.sendFormat(), data => {

src/app/services/data.service.ts

@@ -34,7 +34,7 @@ export class DataService {
   id: {[key: string]: {[id: string]: any}} = {};  // data in format _id: data
   d: {[key: string]: any} = {};      // data not in array format
 
-  contact = 'dominic.lingenfelser@bosch.com';
+  contact = {name: 'CR/APS1-Lingenfelser', mail: 'dominic.lingenfelser@bosch.com'};
 
   load(collection, f = () => {}) {  // load data
     if (this.arr[collection]) { // data already loaded

src/app/services/login.service.ts

@@ -3,6 +3,7 @@ import {ApiService} from './api.service';
 import {ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot} from '@angular/router';
 import {LocalStorageService} from 'angular-2-local-storage';
 import {Observable} from 'rxjs';
+import {DataService} from './data.service';
 
 @Injectable({
   providedIn: 'root'
@@ -15,12 +16,14 @@ export class LoginService implements CanActivate {
     {path: 'users', permission: 'admin'}
   ];
   readonly levels = [
+    'predict',
     'read',
     'write',
     'dev',
     'admin'
   ];
   isLevel: {[level: string]: boolean} = {};
+  hasPrediction = false;  // true if user has prediction models specified
   userId = '';
 
   private loggedIn;
@@ -28,7 +31,8 @@ export class LoginService implements CanActivate {
   constructor(
     private api: ApiService,
     private storage: LocalStorageService,
-    private router: Router
+    private router: Router,
+    private d: DataService
   ) {
 
   }
@@ -60,6 +64,14 @@ export class LoginService implements CanActivate {
             this.loggedIn = true;
             this.levels.forEach(level => {
               this.isLevel[level] = this.levels.indexOf(data.level) >= this.levels.indexOf(level);
+              if (this.isLevel.dev) {  // set hasPrediction
+                this.hasPrediction = true;
+              }
+              else {
+                this.d.load('modelGroups', () => {
+                  this.hasPrediction = this.d.arr.modelGroups.length > 0;
+                });
+              }
             });
             this.userId = data.user_id;
             resolve(true);
@@ -83,6 +95,7 @@ export class LoginService implements CanActivate {
     this.levels.forEach(level => {
       this.isLevel[level] = false;
     });
+    this.hasPrediction = false;
   }
 
   canActivate(route: ActivatedRouteSnapshot = null, state: RouterStateSnapshot = null): Observable<boolean> {

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.api.delete('/user/' + user.name, () => {
-          this.users.splice(this.users.findIndex(e => e.name === username), 1);
+          user.status = 'deleted';
+          user.edit = false;
         });
       }
     });
   }
 
+  restoreUser(user) {
+    this.api.put('/user/restore/' + user.name, {}, () => {
+      user.status = 'new';
+    });
+  }
 }