Updated user view

TIER · Dec 11, 2018 · dd9d796 · dd9d796
1 parent 9e34ced
commit dd9d796
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 22 deletions.
diff --git a/ui/src/app/user/admin/container/admin-management.component.html b/ui/src/app/user/admin/container/admin-management.component.html
@@ -11,30 +11,29 @@
             <table class="table table-striped">
                 <thead class="thead-primary">
                     <tr>
-                        <th scope="col">#</th>
-                        <th scope="col">First</th>
-                        <th scope="col">Last</th>
-                        <th scope="col">Handle</th>
+                        <th scope="col">UserId</th>
+                        <th scope="col">Name</th>
+                        <th scope="col">Email</th>
+                        <th scope="col">Role</th>
+                        <th scope="col">Delete?</th>
                     </tr>
                 </thead>
                 <tbody>
-                    <tr>
-                        <th scope="row">1</th>
-                        <td>Mark</td>
-                        <td>Otto</td>
-                        <td>@mdo</td>
-                    </tr>
-                    <tr>
-                        <th scope="row">2</th>
-                        <td>Jacob</td>
-                        <td>Thornton</td>
-                        <td>@fat</td>
-                    </tr>
-                    <tr>
-                        <th scope="row">3</th>
-                        <td>Larry</td>
-                        <td>the Bird</td>
-                        <td>@twitter</td>
+                    <tr *ngFor="let user of users$ | async">
+                        <th>{{ user.resourceId }}</th>
+                        <td>{{ user.name.first }} {{ user.name.last }}</td>
+                        <td>{{ user.email }}</td>
+                        <td>
+                            <select [name]="user.resourceId" [ngModel]="user.role" class="form-control" (change)="setUserRole(user, $event.target.value)">
+                                <option *ngFor="let role of roles$ | async">{{ role }}</option>
+                            </select>
+                        </td>
+                        <td>
+                            <button class="btn btn-link" (click)="deleteUser(user.resourceId)">
+                                <span class="sr-only">Delete User</span>
+                                <i class="fa fa-trash fa-lg text-danger"></i>
+                            </button>
+                        </td>
                     </tr>
                 </tbody>
             </table>

diff --git a/ui/src/app/user/admin/container/admin-management.component.ts b/ui/src/app/user/admin/container/admin-management.component.ts
@@ -1,7 +1,13 @@
 import { Component, ChangeDetectionStrategy } from '@angular/core';
 import { Store } from '@ngrx/store';
+import { Observable, of } from 'rxjs';
 
 import * as fromRoot from '../../../app.reducer';
+import * as fromAdmin from '../reducer';
+
+import { UserService } from '../../../core/service/user.service';
+import { LoadAdminRequest, UpdateAdminRequest, RemoveAdminRequest } from '../action/collection.action';
+import { Admin } from '../model/admin';
 
 @Component({
     selector: 'admin-management-page',
@@ -11,7 +17,25 @@ import * as fromRoot from '../../../app.reducer';
 })
 export class AdminManagementPageComponent {
 
+    users$: Observable<Admin[]>;
+    roles$: Observable<string[]> = of(['SUPER_ADMIN', 'DELEGATED_ADMIN']);
+
     constructor(
         private store: Store<fromRoot.State>
-    ) { }
+    ) {
+        this.store.dispatch(new LoadAdminRequest());
+
+        this.users$ = this.store.select(fromAdmin.getAllAdmins);
+    }
+
+    setUserRole(user: Admin, change: string): void {
+        this.store.dispatch(new UpdateAdminRequest({
+            ...user,
+            role: change
+        }));
+    }
+
+    deleteUser(user: string): void {
+        this.store.dispatch(new RemoveAdminRequest(user));
+    }
 }