better user edit

src/app/modules/user/info/users/user/user.component.html

@@ -1,4 +1,4 @@
-<div class="users">
+<div *ngIf="edit" class="users">
   <mat-form-field appearance="outline">
     <mat-label>Name</mat-label>
     <input (change)="onNameChanged(id, $event)" [ngModel]="name" matInput>
@@ -9,6 +9,14 @@
     <mat-select (ngModelChange)="onRoleChanged(id, $event)" [ngModel]="roles" multiple>
       <mat-option *ngFor="let role of ROLE_TYPES" [value]="role">{{role | role}}</mat-option>
     </mat-select>
-
   </mat-form-field>
+
+  <button (click)="edit=false" mat-icon-button>
+    <fa-icon [icon]="faClose"></fa-icon>
+  </button>
+</div>
+
+<div (click)="edit=true" *ngIf="!edit" class="users list-item">
+  <span>{{name}}</span>
+  <span><span *ngFor="let role of roles">{{role|role}}, </span></span>
 </div>

src/app/modules/user/info/users/user/user.component.less

@@ -1,5 +1,15 @@
+@import "../../../../../../styles/styles";
+
 .users {
   display: grid;
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: 1fr 1fr 40px;
   grid-gap: 20px;
 }
+
+.list-item {
+  cursor: pointer;
+
+  &:hover {
+    color: @primary-color;
+  }
+}

src/app/modules/user/info/users/user/user.component.ts

@@ -2,6 +2,7 @@ import {Component, Input} from '@angular/core';
 import {User} from '../../../../../services/user/user';
 import {UserService} from '../../../../../services/user/user.service';
 import {ROLE_TYPES} from '../../../../../services/user/roles';
+import {faTimes} from '@fortawesome/free-solid-svg-icons/faTimes';
 
 @Component({
   selector: 'app-user',
@@ -13,6 +14,8 @@ export class UserComponent {
   public name: string
   public roles: string[];
   public ROLE_TYPES = ROLE_TYPES;
+  public edit = false;
+  public faClose = faTimes;
 
   constructor(private userService: UserService) {
   }

src/app/modules/user/user.module.ts

@@ -21,6 +21,7 @@ import {UserComponent} from './info/users/user/user.component';
 import {NewComponent} from './new/new.component';
 import {ButtonModule} from '../../widget-modules/components/button/button.module';
 import {LogoModule} from '../../widget-modules/components/logo/logo.module';
+import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
 
 
 @NgModule({
@@ -39,6 +40,7 @@ import {LogoModule} from '../../widget-modules/components/logo/logo.module';
     RoleModule,
     ButtonModule,
     LogoModule,
+    FontAwesomeModule,
 
 
   ]