SHIBUI-1031 Integrated with backend endpoints

ui/src/app/core/action/configuration.action.ts

@@ -0,0 +1,29 @@
+import { Action } from '@ngrx/store';
+
+export enum ConfigurationActionTypes {
+    LOAD_ROLE_REQUEST = '[Config] Load User Role Request',
+    LOAD_ROLE_SUCCESS = '[Config] Load User Role Success',
+    LOAD_ROLE_FAIL = '[Config] Load User Role Fail'
+}
+
+export class LoadRoleRequest implements Action {
+    readonly type = ConfigurationActionTypes.LOAD_ROLE_REQUEST;
+
+    constructor() {}
+}
+export class LoadRoleSuccess implements Action {
+    readonly type = ConfigurationActionTypes.LOAD_ROLE_SUCCESS;
+
+    constructor(public payload: string[]) { }
+}
+export class LoadRoleFail implements Action {
+    readonly type = ConfigurationActionTypes.LOAD_ROLE_FAIL;
+
+    constructor() { }
+}
+
+export type ConfigurationActionUnion =
+    | LoadRoleRequest
+    | LoadRoleSuccess
+    | LoadRoleFail
+;

ui/src/app/core/effect/user.effect.ts

@@ -5,6 +5,7 @@ import { of } from 'rxjs';
 import { map, tap, catchError, switchMap } from 'rxjs/operators';
 
 import * as user from '../action/user.action';
+import { LoadRoleRequest, LoadRoleFail, LoadRoleSuccess, ConfigurationActionTypes } from '../action/configuration.action';
 import { UserService } from '../service/user.service';
 
 @Injectable()
@@ -21,6 +22,19 @@ export class UserEffects {
                 )
         )
     );
+
+    @Effect()
+    loadRoles$ = this.actions$.pipe(
+        ofType<LoadRoleRequest>(ConfigurationActionTypes.LOAD_ROLE_REQUEST),
+        switchMap(() =>
+            this.userService.getRoles()
+                .pipe(
+                    map(roles => new LoadRoleSuccess(roles)),
+                    catchError(error => of(new LoadRoleFail()))
+                )
+        )
+    );
+
     @Effect({dispatch: false})
     redirect$ = this.actions$.pipe(
         ofType(user.REDIRECT),

ui/src/app/core/reducer/configuration.reducer.ts

@@ -0,0 +1,25 @@
+import { ConfigurationActionUnion, ConfigurationActionTypes } from '../action/configuration.action';
+
+export interface ConfigState {
+    roles: string[];
+}
+
+export const initialState: ConfigState = {
+    roles: []
+};
+
+export function reducer(state = initialState, action: ConfigurationActionUnion): ConfigState {
+    switch (action.type) {
+        case ConfigurationActionTypes.LOAD_ROLE_SUCCESS: {
+            return {
+                roles: [...action.payload]
+            };
+        }
+        default: {
+            return state;
+        }
+    }
+}
+
+
+export const getRoles = (state: ConfigState) => state.roles;

ui/src/app/core/reducer/index.ts

@@ -5,11 +5,13 @@ import {
 
 import * as fromUser from './user.reducer';
 import * as fromVersion from './version.reducer';
+import * as fromConfig from './configuration.reducer';
 import * as fromRoot from '../../app.reducer';
 
 export interface CoreState {
     user: fromUser.UserState;
     version: fromVersion.VersionState;
+    config: fromConfig.ConfigState;
 }
 
 export interface State extends fromRoot.State {
@@ -18,19 +20,24 @@ export interface State extends fromRoot.State {
 
 export const reducers = {
     user: fromUser.reducer,
-    version: fromVersion.reducer
+    version: fromVersion.reducer,
+    config: fromConfig.reducer
 };
 
 export const getCoreFeature = createFeatureSelector<CoreState>('core');
 export const getUserStateFn = (state: CoreState) => state.user;
 export const getVersionStateFn = (state: CoreState) => state.version;
+export const getConfigStateFn = (state: CoreState) => state.config;
 
 export const getUserState = createSelector(getCoreFeature, getUserStateFn);
 export const getUser = createSelector(getUserState, fromUser.getUser);
 export const isFetching = createSelector(getUserState, fromUser.isFetching);
 export const getUserError = createSelector(getUserState, fromUser.getError);
 
-export const getVersionState = createSelector(getCoreFeature, (state: CoreState) => state.version);
+export const getVersionState = createSelector(getCoreFeature, getVersionStateFn);
 export const getVersionInfo = createSelector(getVersionState, fromVersion.getVersionInfo);
 export const getVersionLoading = createSelector(getVersionState, fromVersion.getVersionIsLoading);
 export const getVersionError = createSelector(getVersionState, fromVersion.getVersionError);
+
+export const getConfigState = createSelector(getCoreFeature, getConfigStateFn);
+export const getRoles = createSelector(getConfigState, fromConfig.getRoles);

ui/src/app/core/service/user.service.ts

@@ -1,11 +1,16 @@
 import { Injectable } from '@angular/core';
 import { Observable, of } from 'rxjs';
 import { User } from '../model/user';
+import { HttpClient } from '@angular/common/http';
 
 @Injectable()
 export class UserService {
 
-    constructor() { }
+    readonly base = `/api`;
+
+    constructor(
+        private http: HttpClient
+    ) { }
 
     get(): Observable<User> {
         const defUser = Object.assign({}, {
@@ -18,4 +23,10 @@ export class UserService {
         });
         return of(defUser);
     }
+
+    getRoles(): Observable<string[]> {
+        return this.http.get<string[]>(
+            `${this.base}/supportedRoles`
+        );
+    }
 } /* istanbul ignore next */

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

@@ -24,8 +24,8 @@
                         <td>{{ user.firstName }} {{ user.lastName }}</td>
                         <td>{{ user.emailAddress }}</td>
                         <td>
-                            <select [name]="user.username" [ngModel]="user.role.name" class="form-control" (change)="setUserRole(user, $event.target.value)">
-                                <option *ngFor="let role of roles$ | async" [value]="role.name">{{ role.name }}</option>
+                            <select [name]="user.username" [ngModel]="user.role" class="form-control" (change)="setUserRole(user, $event.target.value)">
+                                <option *ngFor="let role of roles$ | async" [value]="role">{{ role }}</option>
                             </select>
                         </td>
                         <td>

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

@@ -3,11 +3,12 @@ import { Store } from '@ngrx/store';
 import { Observable, of } from 'rxjs';
 
 import * as fromRoot from '../../../app.reducer';
+import * as fromCore from '../../../core/reducer';
 import * as fromAdmin from '../reducer';
 
-import { UserService } from '../../../core/service/user.service';
 import { LoadAdminRequest, UpdateAdminRequest, RemoveAdminRequest } from '../action/collection.action';
-import { Admin, Role } from '../model/admin';
+import { Admin } from '../model/admin';
+import { LoadRoleRequest } from '../../../core/action/configuration.action';
 
 @Component({
     selector: 'admin-management-page',
@@ -18,17 +19,19 @@ import { Admin, Role } from '../model/admin';
 export class AdminManagementPageComponent {
 
     users$: Observable<Admin[]>;
-    roles$: Observable<Role[]> = of([{name: 'ROLE_ADMIN' },  {name: 'ROLE_USER'}]);
+    roles$: Observable<string[]>;
 
     constructor(
         private store: Store<fromRoot.State>
     ) {
         this.store.dispatch(new LoadAdminRequest());
+        this.store.dispatch(new LoadRoleRequest());
 
         this.users$ = this.store.select(fromAdmin.getAllAdmins);
+        this.roles$ = this.store.select(fromCore.getRoles);
     }
 
-    setUserRole(user: Admin, change: Role): void {
+    setUserRole(user: Admin, change: string): void {
         this.store.dispatch(new UpdateAdminRequest({
             ...user,
             role: change

ui/src/app/user/admin/model/admin-entity.ts

@@ -1,4 +1,4 @@
-import { Admin, Role } from './admin';
+import { Admin } from './admin';
 
 export class AdminEntity implements Admin {
 
@@ -7,19 +7,11 @@ export class AdminEntity implements Admin {
     lastName: string;
     emailAddress: string;
 
-    roles: Role[];
+    role: string;
 
     constructor(
         properties: Admin
     ) {
         Object.assign(this, properties);
     }
-
-    get role(): Role {
-        return this.roles[0];
-    }
-
-    set role(newRole: Role) {
-        this.roles[0] = newRole;
-    }
 }

ui/src/app/user/admin/model/admin.ts

@@ -1,19 +1,11 @@
-import { User } from '../../../core/model/user';
-
 export interface Admin {
     createdDate?: string;
     updatedDate?: string;
     username: string;
     firstName: string;
     lastName: string;
 
-    roles: Role[];
-
-    role: Role;
+    role: string;
 
     emailAddress: string;
 }
-
-export interface Role {
-    name: string;
-}

ui/src/app/user/admin/service/admin.service.ts

@@ -24,7 +24,7 @@ export class AdminService {
 
     update(user: Admin): Observable<Admin> {
         return this.http.put<Admin>(
-            `${this.base}${this.endpoint}/${user.username}`, {user}
+            `${this.base}${this.endpoint}/${user.username}`, {...user}
         );
     }