SHIBUI-1062 Reorganized code, added action required tab

ui/src/app/user/admin/action/collection.action.ts → ui/src/app/admin/action/collection.action.ts

@@ -11,6 +11,7 @@ export enum AdminCollectionActionTypes {
     UPDATE_ADMIN_SUCCESS = '[Admin Collection] Update Admin Success',
     UPDATE_ADMIN_FAIL = '[Admin Collection] Update Admin Fail',
 
+    LOAD_NEW_USERS_REQUEST = '[Admin Collection] Load New Users Request',
     LOAD_ADMIN_REQUEST = '[Admin Collection] Load Admin Request',
     LOAD_ADMIN_SUCCESS = '[Admin Collection] Load Admin Success',
     LOAD_ADMIN_ERROR = '[Admin Collection] Load Admin Error',
@@ -51,6 +52,12 @@ export class LoadAdminRequest implements Action {
     constructor() { }
 }
 
+export class LoadNewUsersRequest implements Action {
+    readonly type = AdminCollectionActionTypes.LOAD_NEW_USERS_REQUEST;
+
+    constructor() { }
+}
+
 export class LoadAdminSuccess implements Action {
     readonly type = AdminCollectionActionTypes.LOAD_ADMIN_SUCCESS;
 
@@ -126,6 +133,7 @@ export type AdminCollectionActionsUnion =
     | LoadAdminRequest
     | LoadAdminSuccess
     | LoadAdminError
+    | LoadNewUsersRequest
     | AddAdminRequest
     | AddAdminSuccess
     | AddAdminFail

ui/src/app/admin/admin.component.ts

@@ -0,0 +1,20 @@
+import { Component, OnInit } from '@angular/core';
+import { LoadRoleRequest } from '../core/action/configuration.action';
+
+import * as fromRoot from '../app.reducer';
+import { Store } from '@ngrx/store';
+
+@Component({
+    selector: 'admin-page',
+    templateUrl: './admin.component.html',
+    styleUrls: []
+})
+export class AdminComponent implements OnInit {
+    constructor(
+        private store: Store<fromRoot.State>
+    ) { }
+
+    ngOnInit(): void {
+        this.store.dispatch(new LoadRoleRequest());
+    }
+}

ui/src/app/user/admin/admin.module.ts → ui/src/app/admin/admin.module.ts

@@ -1,12 +1,12 @@
-import { NgModule, ModuleWithProviders } from '@angular/core';
+import { NgModule } from '@angular/core';
 import { HttpClientModule } from '@angular/common/http';
 import { RouterModule } from '@angular/router';
 import { CommonModule } from '@angular/common';
-import { ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { FormsModule } from '@angular/forms';
 import { StoreModule } from '@ngrx/store';
 
-import { SharedModule } from '../../shared/shared.module';
-import { I18nModule } from '../../i18n/i18n.module';
+import { SharedModule } from '../shared/shared.module';
+import { I18nModule } from '../i18n/i18n.module';
 import { AdminManagementPageComponent } from './container/admin-management.component';
 import { AdminComponent } from './admin.component';
 import { reducers } from './reducer';
@@ -15,42 +15,36 @@ import { AdminCollectionEffects } from './effect/collection.effect';
 import { EffectsModule } from '@ngrx/effects';
 import { DeleteUserDialogComponent } from './component/delete-user-dialog.component';
 import { NgbModalModule } from '@ng-bootstrap/ng-bootstrap';
+import { ActionRequiredPageComponent } from './container/action-required.component';
+import { AccessRequestComponent } from './component/access-request.component';
+import { UserManagementComponent } from './component/user-management.component';
 
 @NgModule({
     declarations: [
         AdminManagementPageComponent,
         AdminComponent,
-        DeleteUserDialogComponent
+        DeleteUserDialogComponent,
+        UserManagementComponent,
+        ActionRequiredPageComponent,
+        AccessRequestComponent
     ],
     entryComponents: [
         DeleteUserDialogComponent
     ],
     imports: [
         CommonModule,
+        I18nModule,
+        StoreModule.forFeature('admin', reducers),
+        EffectsModule.forFeature([AdminCollectionEffects]),
         FormsModule,
         RouterModule,
         HttpClientModule,
         SharedModule,
         I18nModule,
         NgbModalModule
-    ]
-})
-export class UserAdminModule {
-    static forRoot(): ModuleWithProviders {
-        return {
-            ngModule: RootUserAdminModule,
-            providers: [
-                AdminService
-            ]
-        };
-    }
-}
-
-@NgModule({
-    imports: [
-        UserAdminModule,
-        StoreModule.forFeature('admin', reducers),
-        EffectsModule.forFeature([AdminCollectionEffects]),
     ],
+    providers: [
+        AdminService
+    ]
 })
-export class RootUserAdminModule { }
+export class AdminModule { }

ui/src/app/admin/component/access-request.component.html

@@ -0,0 +1,57 @@
+<section class="section">
+    <div class="section-body border border-top-0 border-primary">
+        <div class="section-header bg-primary p-2 text-light">
+            <div class="row justify-content-between">
+                <div class="col-12">
+                    <span class="lead" translate="label.user-access-request">User Access Request</span>
+                </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:
+                            </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="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>
+                    </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>
+    </div>
+</section>

ui/src/app/admin/component/access-request.component.ts

@@ -0,0 +1,10 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { UserManagementComponent } from './user-management.component';
+
+@Component({
+    selector: 'access-request-component',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    templateUrl: './access-request.component.html',
+    styleUrls: []
+})
+export class AccessRequestComponent extends UserManagementComponent {}

ui/src/app/user/admin/component/delete-user-dialog.component.ts → ui/src/app/admin/component/delete-user-dialog.component.ts

@@ -1,4 +1,4 @@
-import { Component, ChangeDetectionStrategy, Input, Output, EventEmitter } from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
 
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 

ui/src/app/user/admin/container/admin-management.component.ts → ui/src/app/admin/component/user-management.component.ts

@@ -1,37 +1,31 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { Component, ChangeDetectionStrategy, OnInit } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { Observable, of } from 'rxjs';
 
-import * as fromRoot from '../../../app.reducer';
-import * as fromCore from '../../../core/reducer';
+import * as fromRoot from '../../app.reducer';
+import * as fromCore from '../../core/reducer';
 import * as fromAdmin from '../reducer';
 
-import { LoadAdminRequest, UpdateAdminRequest, RemoveAdminRequest } from '../action/collection.action';
+import { UpdateAdminRequest, RemoveAdminRequest } from '../action/collection.action';
 import { Admin } from '../model/admin';
-import { LoadRoleRequest } from '../../../core/action/configuration.action';
-import { ModalService } from '../../../core/service/modal.service';
 import { DeleteUserDialogComponent } from '../component/delete-user-dialog.component';
-import { map } from 'rxjs/operators';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 
 @Component({
-    selector: 'admin-management-page',
+    selector: 'user-management',
     changeDetection: ChangeDetectionStrategy.OnPush,
-    templateUrl: './admin-management.component.html',
+    templateUrl: './user-management.component.html',
     styleUrls: []
 })
-export class AdminManagementPageComponent {
+export class UserManagementComponent {
 
     users$: Observable<Admin[]>;
     roles$: Observable<string[]>;
 
     constructor(
-        private store: Store<fromRoot.State>,
-        private modal: NgbModal
+        protected store: Store<fromRoot.State>,
+        protected modal: NgbModal
     ) {
-        this.store.dispatch(new LoadAdminRequest());
-        this.store.dispatch(new LoadRoleRequest());
-
         this.users$ = this.store.select(fromAdmin.getAllAdmins);
         this.roles$ = this.store.select(fromCore.getRoles);
     }

ui/src/app/admin/container/action-required.component.html

@@ -0,0 +1 @@
+<access-request-component></access-request-component>

ui/src/app/admin/container/action-required.component.ts

@@ -0,0 +1,21 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { Store } from '@ngrx/store';
+
+import * as fromRoot from '../../app.reducer';
+
+import { LoadNewUsersRequest } from '../action/collection.action';
+
+@Component({
+    selector: 'action-required-page',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    templateUrl: './action-required.component.html',
+    styleUrls: []
+})
+export class ActionRequiredPageComponent {
+
+    constructor(
+        private store: Store<fromRoot.State>
+    ) {
+        this.store.dispatch(new LoadNewUsersRequest());
+    }
+}

ui/src/app/admin/container/admin-management.component.html

@@ -0,0 +1 @@
+<user-management></user-management>

ui/src/app/admin/container/admin-management.component.ts

@@ -0,0 +1,21 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { Store } from '@ngrx/store';
+
+import * as fromRoot from '../../app.reducer';
+
+import { LoadAdminRequest } from '../action/collection.action';
+
+@Component({
+    selector: 'admin-management-page',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    templateUrl: './admin-management.component.html',
+    styleUrls: []
+})
+export class AdminManagementPageComponent {
+
+    constructor(
+        private store: Store<fromRoot.State>
+    ) {
+        this.store.dispatch(new LoadAdminRequest());
+    }
+}

ui/src/app/user/admin/effect/collection.effect.ts → ui/src/app/admin/effect/collection.effect.ts

@@ -11,7 +11,8 @@ import {
     UpdateAdminRequest,
     UpdateAdminSuccess,
     RemoveAdminRequest,
-    RemoveAdminSuccess
+    RemoveAdminSuccess,
+    LoadNewUsersRequest
 } from '../action/collection.action';
 import { AdminService } from '../service/admin.service';
 
@@ -28,6 +29,14 @@ export class AdminCollectionEffects {
         ))
     );
 
+    @Effect()
+    loadNewUsersRequest$ = this.actions$.pipe(
+        ofType<LoadNewUsersRequest>(AdminCollectionActionTypes.LOAD_NEW_USERS_REQUEST),
+        switchMap(() => this.adminService.query().pipe(
+            map(users => new LoadAdminSuccess(users))
+        ))
+    );
+
     @Effect()
     updateAdminRequest$ = this.actions$.pipe(
         ofType<UpdateAdminRequest>(AdminCollectionActionTypes.UPDATE_ADMIN_REQUEST),

ui/src/app/user/admin/reducer/index.ts → ui/src/app/admin/reducer/index.ts

@@ -1,5 +1,5 @@
 import { createSelector, createFeatureSelector } from '@ngrx/store';
-import * as fromRoot from '../../../core/reducer';
+import * as fromRoot from '../../core/reducer';
 import * as fromCollection from './collection.reducer';
 
 export interface AdminState {

ui/src/app/dashboard/container/dashboard.component.html

@@ -18,12 +18,21 @@
         </li>
         <li class="nav-item">
             <a class="nav-link"
-                [routerLink]="['./', 'users', 'admin']"
+                [routerLink]="['./', 'admin', 'management']"
                 routerLinkActive="active"
                 translate="label.admin">
                 Admin
             </a>
         </li>
+        <li class="nav-item">
+            <a class="nav-link"
+                [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>
+            </a>
+        </li>
     </ul>
     <router-outlet></router-outlet>
 </div>

ui/src/app/dashboard/dashboard.module.ts

@@ -6,13 +6,13 @@ import { WidgetRegistry } from 'ngx-schema-form';
 import { DashboardPageComponent } from './container/dashboard.component';
 import { DashboardRoutingModule } from './dashboard.routing';
 import { MetadataModule } from '../metadata/metadata.module';
-import { UserModule } from '../user/user.module';
+import { AdminModule } from '../admin/admin.module';
 
 @NgModule({
     imports: [
         DashboardRoutingModule,
         MetadataModule,
-        UserModule,
+        AdminModule,
         I18nModule
     ],
     providers: [