feat(user-management): update user management component. Update team …

…component

Added update to team-form component.  Binding return values to team-form component.  Moved invite
user and create user into their own components.  Updated tables with styling.

feat #484

frontend/src/app/administration/invite-user/invite-user.component.html

@@ -1,21 +1,23 @@
-<p-card>
-  <div class="card-body">
-    <h6>Invite a User</h6>
-    <div id="formContent">
-      <form [formGroup]="inviteForm" (ngSubmit)="onSubmit(inviteForm)" id="userForm">
-        <div class="col-12">
-          <div class="p-d-flex p-flex-column p-flex-md-row">
-            <label for="inviteUser" class="col-12 col-md-4 col-form-label">User Email:</label>
-            <div class="col-12 col-md-8">
-              <input pInputText formControlName="email" type="text" class="fill-width" id="email" class="form-control"
-                name="email" placeholder="Email" style="margin-bottom: 5px;" />
+<div class="container col-6 align-self-center">
+  <p-card>
+    <div class="card-body">
+      <h6>Invite a User</h6>
+      <div id="formContent">
+        <form [formGroup]="inviteForm" (ngSubmit)="onSubmit(inviteForm)" id="userForm">
+          <div class="col-12">
+            <div class="p-d-flex p-flex-column p-flex-md-row">
+              <label for="inviteUser" class="col-12 col-md-4 col-form-label">User Email:</label>
+              <div class="col-12 col-md-8">
+                <input pInputText formControlName="email" type="text" class="fill-width" id="email" class="form-control"
+                  name="email" placeholder="Email" style="margin-bottom: 5px;" />
+              </div>
             </div>
           </div>
-        </div>
-        <input pInputText [disabled]="!inviteForm.valid" type="submit" class="btn btn-primary float-right"
-          value="Invite" />
-        <br />
-      </form>
+          <input pInputText [disabled]="!inviteForm.valid" type="submit" class="btn btn-primary float-right"
+            value="Invite" />
+          <br />
+        </form>
+      </div>
     </div>
-  </div>
-</p-card>
+  </p-card>
+</div>

frontend/src/app/administration/invite-user/invite-user.component.ts

@@ -31,7 +31,7 @@ export class InviteUserComponent implements OnInit {
   onSubmit(form) {
     const email = { email: form.value.email };
     this.userService.inviteUser(email).subscribe((res: string) => {
-      this.router.navigate(['dashboard']);
+      this.router.navigate(['administration']);
       this.alertService.success(res);
     });
   }

frontend/src/app/app-routing.module.ts

@@ -28,6 +28,7 @@ import { AdministrationComponent } from './administration/administration.compone
 import { TeamFormComponent } from './team-form/team-form.component';
 import { RegisterComponent } from './register/register.component';
 import { UserProfileComponent } from './user-profile/user-profile.component';
+import { UserFormComponent } from './user-form/user-form.component';
 import { SettingsComponent } from './administration/settings/settings.component';
 import { EmailValidateComponent } from './email-validate/email-validate.component';
 import { UserService } from './user.service';
@@ -114,13 +115,12 @@ export class TeamFormResolver implements Resolve<any> {
     private appService: AppService,
     private userService: UserService
   ) {}
-  resolve() {
+  resolve(route: ActivatedRouteSnapshot) {
     return forkJoin([
       this.appService.getOrganizations(),
       this.userService.getAllUsers(),
     ]).pipe(
       map((result) => {
-        console.log(result);
         return {
           organizations: result[0],
           activeUsers: result[1],
@@ -218,14 +218,24 @@ const routes: Routes = [
     path: 'administration/team/:teamId',
     component: TeamFormComponent,
     canActivate: [AdminGuard],
-    resolve: { team: TeamResolver },
+    resolve: { result: TeamFormResolver },
   },
   {
     path: 'administration/team',
     component: TeamFormComponent,
     canActivate: [AdminGuard],
     resolve: { result: TeamFormResolver },
   },
+  {
+    path: 'administration/user/create',
+    canActivate: [AdminGuard],
+    component: UserFormComponent,
+  },
+  {
+    path: 'administration/user/invite',
+    component: InviteUserComponent,
+    canActivate: [AdminGuard],
+  },
   {
     path: 'dashboard',
     component: DashboardComponent,

frontend/src/app/app.module.ts

@@ -49,6 +49,7 @@ import { TeamComponent } from './team/team.component';
 import { TeamFormComponent } from './team-form/team-form.component';
 import { SelectButtonModule } from 'primeng/selectbutton';
 import { ListboxModule } from 'primeng/listbox';
+import { UserFormComponent } from './user-form/user-form.component';
 @NgModule({
   declarations: [
     AppComponent,
@@ -76,6 +77,7 @@ import { ListboxModule } from 'primeng/listbox';
     UserManagementComponent,
     TeamComponent,
     TeamFormComponent,
+    UserFormComponent,
   ],
   imports: [
     BrowserModule,

frontend/src/app/interfaces/Team.ts

@@ -1,10 +1,14 @@
 import { Organization } from '../org-form/Organization';
-
+import { Asset } from '../asset-form/Asset';
+interface Role {
+  name: string;
+}
 export interface Team {
-  teamId?: number;
+  id?: number;
   name: string;
   organization: Organization;
-  assetIds: number[];
-  role: string;
-  userIds: number[];
+  assets?: Asset[];
+  assetIds?: number[];
+  role: any;
+  users: number[];
 }

frontend/src/app/team-form/team-form.component.html

@@ -1,48 +1,59 @@
-<div class="container col-12 col-md-8 mx-auto">
-  <form [formGroup]="teamForm" (ngSubmit)="onSubmit(teamForm)" id="teamForm">
-    <div class="col-5">
-      <label>Team Name</label>
-      <input type="text" pInputText formControlName="name" name="name" class="form-control" />
-    </div>
-    <div class="col-5">
-      <label>Role</label>
-      <p-selectButton name="roles" [options]="roles" formControlName="role" optionLabel="name">
-      </p-selectButton>
-    </div>
-    <div class="col-5">
-      <label>Active Users</label>
-      <ng-select [items]="activeUsers" bindLabel="firstName" labelForId="testerList" [multiple]="true"
-        clearAllText="Clear" formControlName="userIds">
-        <ng-template ng-label-tmp let-item="item" let-clear="clear">
-          <span class="ng-value-icon right" (click)="clear(item)">×</span>
-          {{item.firstName}} {{item.lastName}}
-        </ng-template>
-        <ng-template ng-option-tmp let-item="item" let-search="searchTerm">
-          {{item.firstName}} {{item.lastName}}
-        </ng-template>
-      </ng-select>
-    </div>
-    <div class="col-5">
-      <label>Organization</label>
-      <p-listbox [options]="organizations" (click)="fetchOrgAssets(teamForm.controls['organization'].value)"
-        formControlName="organization" optionLabel="name"></p-listbox>
-    </div>
-    <div class="col-5">
-      <label>Assets</label>
-      <div *ngIf="assets">
-        <div *ngIf="assets.length; else no_org_assets">
-          <p-listbox [multiple]="true" [options]="assets" formControlName="assetIds" optionLabel="name"></p-listbox>
+<div class="container col-6 align-self-center">
+  <p-card>
+    <form [formGroup]="teamForm" (ngSubmit)="onSubmit(teamForm)" id="teamForm">
+      <div>
+        <label>Team Name</label>
+        <input type="text" pInputText formControlName="name" name="name" class="form-control" />
+      </div>
+      <br>
+      <div class="form-row">
+        <div class="col-5">
+          <label>Active Users</label>
+          <ng-select [items]="activeUsers" bindLabel="firstName" labelForId="testerList" [multiple]="true"
+            clearAllText="Clear" formControlName="users">
+            <ng-template ng-label-tmp let-item="item" let-clear="clear">
+              <span class="ng-value-icon right" (click)="clear(item)">×</span>
+              {{item.firstName}} {{item.lastName}}
+            </ng-template>
+            <ng-template ng-option-tmp let-item="item" let-search="searchTerm">
+              {{item.firstName}} {{item.lastName}}
+            </ng-template>
+          </ng-select>
+        </div>
+        <div class="col-7">
+          <label>Role</label>
+          <p-selectButton name="roles" [options]="roles" formControlName="role" optionLabel="name">
+          </p-selectButton>
+        </div>
+      </div>
+      <br>
+      <div class="form-row">
+        <div class="col-6">
+          <label>Organization</label>
+          <p-listbox [options]="organizations" (click)="fetchOrgAssets(teamForm.controls['organization'].value)"
+            formControlName="organization" optionLabel="name"></p-listbox>
+        </div>
+        <div class="col-6">
+          <label>Assets</label>
+          <div *ngIf="assets">
+            <div *ngIf="assets.length; else no_org_assets">
+              <p-listbox [checkbox]="true" [filter]="true" [multiple]="true" [options]="assets" formControlName="assets"
+                optionLabel="name"></p-listbox>
+            </div>
+          </div>
+          <ng-template #no_org_assets>The selected organization has no active assets</ng-template>
         </div>
       </div>
-      <ng-template #no_org_assets>The selected organization has no active assets</ng-template>
-    </div>
-    <button [disabled]="!teamForm.valid" class="btn btn-primary float-right" type="submit" data-toggle="tooltip"
-      data-placement="bottom" title="Submit">
-      Create Team
-    </button>
-    <button style="margin-right: 5px;" class="btn btn-secondary float-right" type="button" data-toggle="tooltip"
-      data-placement="bottom" title="Back to Assessments">
-      Back to Assessments
-    </button>
-  </form>
+      <br>
+      <button [disabled]="!teamForm.valid" class="btn btn-primary float-right" type="submit" data-toggle="tooltip"
+        data-placement="bottom" title="Submit">
+        {{isCreate ? 'Create Team': 'Update Team'}}
+      </button>
+      <button (click)="navigateToAdministration()" style="margin-right: 5px;" class="btn btn-secondary float-right"
+        type="button" data-toggle="tooltip" data-placement="bottom" title="Back to Administration">
+        Back to Administration
+      </button>
+    </form>
+    <br>
+  </p-card>
 </div>

frontend/src/app/team-form/team-form.component.ts

@@ -1,11 +1,11 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, OnChanges } from '@angular/core';
 import { ROLE } from '../enums/roles.enum';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
 import { TeamService } from '../team.service';
 import { AlertService } from '../alert/alert.service';
 import { Team } from '../interfaces/Team';
 import { Organization } from '../org-form/Organization';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { AppService } from '../app.service';
 import { Asset } from '../asset-form/Asset';
 import { User } from '../interfaces/User';
@@ -17,18 +17,22 @@ interface Role {
   templateUrl: './team-form.component.html',
   styleUrls: ['./team-form.component.sass'],
 })
-export class TeamFormComponent implements OnInit {
+export class TeamFormComponent implements OnInit, OnChanges {
   roles: Role[];
   teamForm: FormGroup;
   organizations: Organization[];
   assets: Asset[];
   activeUsers: User[];
+  teamModel: Team;
+  isCreate = true;
+  teamId: number;
   constructor(
     private fb: FormBuilder,
     public alertService: AlertService,
     public teamService: TeamService,
     public appService: AppService,
-    public activatedRoute: ActivatedRoute
+    public activatedRoute: ActivatedRoute,
+    public route: Router
   ) {
     this.createForm();
   }
@@ -37,7 +41,33 @@ export class TeamFormComponent implements OnInit {
     this.activatedRoute.data.subscribe(({ result }) => {
       this.organizations = result.organizations;
       this.activeUsers = result.activeUsers;
-      console.log(this.activeUsers);
+      this.appService
+        .getOrganizationAssets(this.organizations[0].id)
+        .then((assets: Asset[]) => {
+          // tslint:disable-next-line: no-string-literal
+          this.teamForm.controls['organization'].setValue(
+            this.organizations[0]
+          );
+          this.assets = assets;
+        });
+      this.activatedRoute.params.subscribe((param) => {
+        this.isCreate = false;
+        if (param.teamId) {
+          this.teamId = param.teamId;
+          this.teamService.getTeamById(param.teamId).subscribe((team: Team) => {
+            const role: Role = {
+              name: team.role,
+            };
+            team.role = role;
+            this.appService
+              .getOrganizationAssets(team.organization.id)
+              .then((assets: Asset[]) => {
+                this.assets = assets;
+                this.teamForm.patchValue(team);
+              });
+          });
+        }
+      });
     });
     this.roles = [
       { name: ROLE.ADMIN },
@@ -46,40 +76,68 @@ export class TeamFormComponent implements OnInit {
     ];
   }
 
+  ngOnChanges() {
+    this.rebuildForm();
+  }
+
   createForm() {
     this.teamForm = this.fb.group({
       name: ['', [Validators.required]],
       role: ['', [Validators.required]],
-      userIds: [''],
-      assetIds: [''],
+      users: [''],
+      assets: [''],
       organization: ['', [Validators.required]],
     });
   }
 
+  rebuildForm() {
+    this.teamForm.reset({
+      name: this.teamModel.name,
+      role: this.teamModel.role,
+      users: this.teamModel.users,
+      assets: this.teamModel.assets,
+      organization: this.teamModel.organization,
+    });
+  }
+
   onSubmit(form) {
-    if (form.value.userIds) {
-      form.value.userIds = form.value.userIds.map((x) => x.id);
+    if (form.value.users) {
+      form.value.users = form.value.users.map((x) => x.id);
     }
-    if (form.value.assetIds) {
-      form.value.assetIds = form.value.assetIds.map((x) => x.id);
+    if (form.value.assets) {
+      form.value.assets = form.value.assets.map((x) => x.id);
     }
     const team: Team = {
       name: form.value.name,
       organization: form.value.organization,
       role: form.value.role.name,
-      userIds: form.value.userIds,
-      assetIds: form.value.assetIds,
+      users: form.value.users,
+      assetIds: form.value.assets,
     };
-    this.teamService.createTeam(team).subscribe((res: string) => {
-      this.alertService.success(res);
-    });
+    if (this.isCreate) {
+      this.teamService.createTeam(team).subscribe((res: string) => {
+        this.teamForm.reset();
+        this.route.navigate([`administration`]);
+        this.alertService.success(res);
+      });
+    } else {
+      team.id = this.teamId;
+      this.teamService.updateTeam(team).subscribe((res: string) => {
+        this.teamForm.reset();
+        this.route.navigate([`administration`]);
+        this.alertService.success(res);
+      });
+    }
+  }
+
+  navigateToAdministration() {
+    this.route.navigate([`administration`]);
   }
 
   fetchOrgAssets(event) {
-    let orgId: number = event.id;
+    const orgId: number = event.id;
     this.appService.getOrganizationAssets(orgId).then((assets: Asset[]) => {
       this.assets = assets;
-      console.log(this.assets);
     });
   }
 }