SHIBUI-1062 Implemented action required tab, added styling

TIER · Jan 15, 2019 · 6e4007e · 6e4007e
1 parent d741a3f
commit 6e4007e
Show file tree

Hide file tree

Showing 13 changed files with 111 additions and 56 deletions.
diff --git a/backend/src/main/resources/i18n/messages_en.properties b/backend/src/main/resources/i18n/messages_en.properties
@@ -378,11 +378,14 @@ label.nameid-formats-type=NameID Type
 label.select-filter-type=Select Filter Type
 
 label.admin=Admin
+label.action-required=Action Required
+label.user-access-request=User Access Request
 label.user-maintenance=User Maintenance
 label.user-id=UserId
 label.email=Email
 label.role=Role
 label.delete=Delete?
+label.delete-request=Delete Request
 
 message.delete-user-title=Delete User?
 message.delete-user-body=You are requesting to delete a user. If you complete this process the user will be removed. This cannot be undone. Do you wish to continue?

diff --git a/ui/src/app/admin/admin.component.ts b/ui/src/app/admin/admin.component.ts
@@ -3,6 +3,7 @@ import { LoadRoleRequest } from '../core/action/configuration.action';
 
 import * as fromRoot from '../app.reducer';
 import { Store } from '@ngrx/store';
+import { LoadAdminRequest } from './action/collection.action';
 
 @Component({
     selector: 'admin-page',
@@ -15,6 +16,6 @@ export class AdminComponent implements OnInit {
     ) { }
 
     ngOnInit(): void {
-        this.store.dispatch(new LoadRoleRequest());
+        this.store.dispatch(new LoadAdminRequest());
     }
 }
diff --git a/ui/src/app/admin/component/access-request.component.html b/ui/src/app/admin/component/access-request.component.html
@@ -7,51 +7,62 @@
                 </div>
             </div>
         </div>
-        <div *ngFor="let user of users$ | async">
-            <div class="p-3 bg-light border-light rounded m-3">
-                <div class="row align-items-center">
-                    <div class="col-10">
-                        <div class="row">
-                            <div class="col text-right font-weight-bold" translate="label.user-id">
-                                UserId:
+        <ng-container>
+            <div class="d-flex justify-content-center">
+                <div class="w-25 alert alert-info m-3" *ngIf="!(hasUsers$ | async)">
+                    <p>There are no new user requests at this time.</p>
+                </div>
+            </div>
+        </ng-container>
+        <ng-container *ngIf="hasUsers$ | async">
+            <div *ngFor="let user of users$ | async; let i = index;">
+                <div class="p-3 bg-light border-light rounded m-3">
+                    <div class="row align-items-center">
+                        <div class="col-10">
+                            <div class="row">
+                                <div class="col text-right font-weight-bold" translate="label.user-id">
+                                    UserId
+                                </div>
+                                <div class="col">{{ user.username }}</div>
+                                <div class="col text-right font-weight-bold" translate="label.email">
+                                    Email
+                                </div>
+                                <div class="col">{{ user.emailAddress }}</div>
                             </div>
-                            <div class="col">{{ user.username }}</div>
-                            <div class="col text-right font-weight-bold" translate="label.email">
-                                Email:
+                            <div class="w-100 my-1"></div>
+                            <div class="row">
+                                <div class="col text-right font-weight-bold" translate="label.name">
+                                    Name
+                                </div>
+                                <div class="col">{{ user.firstName }} {{ user.lastName }}</div>
+                                <label [for]="'role-' + i" class="d-block col text-right font-weight-bold" translate="label.role">
+                                    Role
+                                </label>
+                                <div class="col">
+                                    <select
+                                        [id]="'role-' + i"
+                                        [name]="user.username"
+                                        [ngModel]="user.role"
+                                        class="form-control form-control-sm"
+                                        disableValidation
+                                        (change)="setUserRole(user, $event.target.value)">
+                                        <option *ngFor="let role of roles$ | async" [value]="role">{{ role }}</option>
+                                    </select>
+                                </div>
                             </div>
-                            <div class="col">{{ user.emailAddress }}</div>
                         </div>
-                        <div class="w-100 my-1"></div>
-                        <div class="row">
-                            <div class="col text-right font-weight-bold" translate="label.name">
-                                Name:
-                            </div>
-                            <div class="col">{{ user.firstName }} {{ user.lastName }}</div>
-                            <div class="col text-right font-weight-bold" translate="label.role">
-                                Role:
-                            </div>
-                            <div class="col">
-                                <select [name]="user.username"
-                                    [ngModel]="user.role"
-                                    class="form-control form-control-sm"
-                                    disableValidation
-                                    (change)="setUserRole(user, $event.target.value)">
-                                    <option *ngFor="let role of roles$ | async" [value]="role">{{ role }}</option>
-                                </select>
-                            </div>
+                        <div class="col-2 text-right">
+                            <button class="btn btn-danger btn-sm" (click)="deleteUser(user.username)">
+                                <i class="fa fa-trash fa-lg"></i>
+                                &nbsp;
+                                <span translate="label.delete-request">
+                                    Delete Request
+                                </span>
+                            </button>
                         </div>
                     </div>
-                    <div class="col-2 text-right">
-                        <button class="btn btn-danger btn-sm" (click)="deleteUser(user.username)">
-                            <i class="fa fa-trash fa-lg"></i>
-                            &nbsp;
-                            <span translate="label.delete-request">
-                                Delete Request
-                            </span>
-                        </button>
-                    </div>
                 </div>
             </div>
-        </div>
+        </ng-container>
     </div>
 </section>
diff --git a/ui/src/app/admin/component/access-request.component.ts b/ui/src/app/admin/component/access-request.component.ts
@@ -1,10 +1,19 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { Component, ChangeDetectionStrategy, OnInit } from '@angular/core';
 import { UserManagementComponent } from './user-management.component';
+import * as fromAdmin from '../reducer';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
 
 @Component({
     selector: 'access-request-component',
     changeDetection: ChangeDetectionStrategy.OnPush,
     templateUrl: './access-request.component.html',
     styleUrls: []
 })
-export class AccessRequestComponent extends UserManagementComponent {}
+export class AccessRequestComponent extends UserManagementComponent implements OnInit {
+
+    ngOnInit(): void {
+        this.users$ = this.store.select(fromAdmin.getAllNewUsers);
+        this.hasUsers$ = this.users$.pipe(map(userList => userList.length > 0));
+    }
+}
diff --git a/ui/src/app/admin/component/user-management.component.html b/ui/src/app/admin/component/user-management.component.html
@@ -8,7 +8,10 @@
             </div>
         </div>
         <div class="p-3">
-            <table class="table table-striped">
+            <div class="alert alert-info" *ngIf="!(hasUsers$ | async)">
+                <p>There are no users configured in the system for you to manage.</p>
+            </div>
+            <table class="table table-striped" *ngIf="hasUsers$ | async">
                 <thead class="thead-primary">
                     <tr>
                         <th scope="col" translate="label.user-id">UserId</th>

diff --git a/ui/src/app/admin/component/user-management.component.ts b/ui/src/app/admin/component/user-management.component.ts
@@ -10,24 +10,31 @@ import { UpdateAdminRequest, RemoveAdminRequest } from '../action/collection.act
 import { Admin } from '../model/admin';
 import { DeleteUserDialogComponent } from '../component/delete-user-dialog.component';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { map } from 'rxjs/operators';
 
 @Component({
     selector: 'user-management',
     changeDetection: ChangeDetectionStrategy.OnPush,
     templateUrl: './user-management.component.html',
     styleUrls: []
 })
-export class UserManagementComponent {
+export class UserManagementComponent implements OnInit {
 
     users$: Observable<Admin[]>;
     roles$: Observable<string[]>;
 
+    hasUsers$: Observable<boolean>;
+
     constructor(
         protected store: Store<fromRoot.State>,
         protected modal: NgbModal
     ) {
-        this.users$ = this.store.select(fromAdmin.getAllAdmins);
-        this.roles$ = this.store.select(fromCore.getRoles);
+        this.roles$ = this.store.select(fromCore.getUserRoles);
+    }
+
+    ngOnInit(): void {
+        this.users$ = this.store.select(fromAdmin.getAllConfiguredUsers);
+        this.hasUsers$ = this.users$.pipe(map(userList => userList.length > 0));
     }
 
     setUserRole(user: Admin, change: string): void {

diff --git a/ui/src/app/admin/container/action-required.component.ts b/ui/src/app/admin/container/action-required.component.ts
@@ -15,7 +15,5 @@ export class ActionRequiredPageComponent {
 
     constructor(
         private store: Store<fromRoot.State>
-    ) {
-        this.store.dispatch(new LoadNewUsersRequest());
-    }
+    ) {}
 }
diff --git a/ui/src/app/admin/container/admin-management.component.ts b/ui/src/app/admin/container/admin-management.component.ts
@@ -15,7 +15,5 @@ export class AdminManagementPageComponent {
 
     constructor(
         private store: Store<fromRoot.State>
-    ) {
-        this.store.dispatch(new LoadAdminRequest());
-    }
+    ) {}
 }
diff --git a/ui/src/app/admin/reducer/index.ts b/ui/src/app/admin/reducer/index.ts
@@ -31,3 +31,7 @@ export const getSelectedAdmin = createSelector(getAdminEntities, getSelectedAdmi
     return selectedId && entities[selectedId];
 });
 export const getAdminIds = createSelector(getCollectionState, fromCollection.selectAdminIds);
+export const getAllNewUsers = createSelector(getAllAdmins, (admins) => admins.filter(a => a.role === 'ROLE_NONE'));
+export const getAllConfiguredUsers = createSelector(getAllAdmins, (admins) => admins.filter(a => a.role !== 'ROLE_NONE'));
+
+export const getTotalActionsRequired = createSelector(getAllNewUsers, (users) => users.length);
diff --git a/ui/src/app/core/reducer/index.ts b/ui/src/app/core/reducer/index.ts
@@ -39,5 +39,9 @@ export const getVersionInfo = createSelector(getVersionState, fromVersion.getVer
 export const getVersionLoading = createSelector(getVersionState, fromVersion.getVersionIsLoading);
 export const getVersionError = createSelector(getVersionState, fromVersion.getVersionError);
 
+export const filterRoles = (roles: string[]) => roles.filter(r => r !== 'ROLE_NONE');
+
 export const getConfigState = createSelector(getCoreFeature, getConfigStateFn);
 export const getRoles = createSelector(getConfigState, fromConfig.getRoles);
+
+export const getUserRoles = createSelector(getRoles, filterRoles);
diff --git a/ui/src/app/dashboard/container/dashboard.component.html b/ui/src/app/dashboard/container/dashboard.component.html
@@ -1,4 +1,4 @@
-<div class="container-fluid p-3" role="section">
+<div class="container-fluid p-3" role="navigation">
     <ul class="nav nav-tabs">
         <li class="nav-item">
             <a class="nav-link"
@@ -29,8 +29,10 @@
                 [routerLink]="['./', 'admin', 'actions']"
                 routerLinkActive="active">
                 <translate-i18n key="label.action-required">Action Required</translate-i18n>
-                &nbsp;
-                <span class="badge badge-pill badge-danger">0</span>
+                <ng-container *ngIf="hasActions$">
+                    &nbsp;
+                    <span class="badge badge-pill badge-danger">{{ actionsRequired$ | async }}</span>
+                </ng-container>
             </a>
         </li>
     </ul>

diff --git a/ui/src/app/dashboard/container/dashboard.component.ts b/ui/src/app/dashboard/container/dashboard.component.ts
@@ -2,6 +2,11 @@ import { Component, ChangeDetectionStrategy } from '@angular/core';
 import { Store } from '@ngrx/store';
 
 import * as fromRoot from '../../app.reducer';
+import * as fromAdmin from '../../admin/reducer';
+import { Observable } from 'rxjs';
+import { LoadAdminRequest } from '../../admin/action/collection.action';
+import { LoadRoleRequest } from '../../core/action/configuration.action';
+import { map } from 'rxjs/operators';
 
 @Component({
     selector: 'dashboard-page',
@@ -11,8 +16,16 @@ import * as fromRoot from '../../app.reducer';
 })
 export class DashboardPageComponent {
 
+    actionsRequired$: Observable<Number>;
+    hasActions$: Observable<boolean>;
+
     constructor(
         private store: Store<fromRoot.State>
     ) {
+        this.actionsRequired$ = this.store.select(fromAdmin.getTotalActionsRequired);
+        this.hasActions$ = this.actionsRequired$.pipe(map(a => a > 0));
+
+        this.store.dispatch(new LoadAdminRequest());
+        this.store.dispatch(new LoadRoleRequest());
     }
 }
diff --git a/ui/src/app/dashboard/dashboard.module.ts b/ui/src/app/dashboard/dashboard.module.ts
@@ -7,13 +7,15 @@ import { DashboardPageComponent } from './container/dashboard.component';
 import { DashboardRoutingModule } from './dashboard.routing';
 import { MetadataModule } from '../metadata/metadata.module';
 import { AdminModule } from '../admin/admin.module';
+import { CommonModule } from '@angular/common';
 
 @NgModule({
     imports: [
         DashboardRoutingModule,
         MetadataModule,
         AdminModule,
-        I18nModule
+        I18nModule,
+        CommonModule
     ],
     providers: [
         { provide: WidgetRegistry, useClass: CustomWidgetRegistry }