SHIBUI-1031 Implemented tab for user administration

ui/src/app/app.routing.ts

@@ -1,17 +1,22 @@
 import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
+import { Routes, RouterModule, PreloadAllModules } from '@angular/router';
 
 const routes: Routes = [
-    { path: '', redirectTo: 'metadata', pathMatch: 'full' },
-    { path: 'dashboard', redirectTo: 'metadata', pathMatch: 'full' },
+    { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
+    {
+        path: 'dashboard',
+        loadChildren: './dashboard/dashboard.module#DashboardModule'
+    },
     {
         path: 'metadata',
         loadChildren: './metadata/metadata.module#MetadataModule'
     }
 ];
 
 @NgModule({
-    imports: [RouterModule.forRoot(routes)],
+    imports: [RouterModule.forRoot(routes, {
+        preloadingStrategy: PreloadAllModules
+    })],
     exports: [RouterModule]
 })
 export class AppRoutingModule { }

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

@@ -0,0 +1,29 @@
+<div class="container-fluid p-3" role="main">
+    <ul class="nav nav-tabs">
+        <li class="nav-item">
+            <a class="nav-link"
+                [routerLink]="['./', 'metadata', 'manager', 'resolvers']"
+                routerLinkActive="active"
+                translate="label.metadata-sources">
+                Metadata Sources
+            </a>
+        </li>
+        <li class="nav-item">
+            <a class="nav-link"
+                [routerLink]="['./', 'metadata', 'manager', 'providers']"
+                routerLinkActive="active"
+                translate="label.metadata-providers">
+                Metadata Providers
+            </a>
+        </li>
+        <li class="nav-item">
+            <a class="nav-link"
+                [routerLink]="['./', 'users', 'admin']"
+                routerLinkActive="active"
+                translate="label.admin">
+                Admin
+            </a>
+        </li>
+    </ul>
+    <router-outlet></router-outlet>
+</div>

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

@@ -0,0 +1,15 @@
+@import '../../../theme/palette';
+
+:host {
+    .lead {
+        line-height: 36px;
+    }
+
+    .nav-tabs, .nav-link.active {
+        border-color: $brand-primary;
+    }
+
+    .nav-link:hover {
+        border-bottom-color: $brand-primary;
+    }
+}

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

@@ -0,0 +1,18 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { Store } from '@ngrx/store';
+
+import * as fromRoot from '../../app.reducer';
+
+@Component({
+    selector: 'dashboard-page',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    templateUrl: './dashboard.component.html',
+    styleUrls: ['./dashboard.component.scss']
+})
+export class DashboardPageComponent {
+
+    constructor(
+        private store: Store<fromRoot.State>
+    ) {
+    }
+}

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

@@ -0,0 +1,25 @@
+import { NgModule } from '@angular/core';
+
+import { I18nModule } from '../i18n/i18n.module';
+import { CustomWidgetRegistry } from '../schema-form/registry';
+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';
+
+@NgModule({
+    imports: [
+        DashboardRoutingModule,
+        MetadataModule,
+        UserModule,
+        I18nModule
+    ],
+    providers: [
+        { provide: WidgetRegistry, useClass: CustomWidgetRegistry }
+    ],
+    declarations: [
+        DashboardPageComponent
+    ]
+})
+export class DashboardModule { }

ui/src/app/dashboard/dashboard.routing.ts

@@ -0,0 +1,60 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { DashboardPageComponent } from './container/dashboard.component';
+import { ManagerComponent } from '../metadata/manager/container/manager.component';
+import { MetadataPageComponent } from '../metadata/metadata.component';
+import { DashboardResolversListComponent } from '../metadata/manager/container/dashboard-resolvers-list.component';
+import { DashboardProvidersListComponent } from '../metadata/manager/container/dashboard-providers-list.component';
+import { UserPageComponent } from '../user/user.component';
+import { AdminComponent } from '../user/admin/admin.component';
+import { AdminManagementPageComponent } from '../user/admin/container/admin-management.component';
+
+const routes: Routes = [
+    {
+        path: '',
+        component: DashboardPageComponent,
+        children: [
+            {
+                path: 'metadata',
+                component: MetadataPageComponent,
+                children: [
+                    {
+                        path: 'manager',
+                        component: ManagerComponent,
+                        children: [
+                            { path: '', redirectTo: 'resolvers', pathMatch: 'prefix' },
+                            { path: 'resolvers', component: DashboardResolversListComponent },
+                            { path: 'providers', component: DashboardProvidersListComponent },
+                        ]
+                    }
+                ]
+            },
+            {
+                path: 'users',
+                component: UserPageComponent,
+                children: [
+                    { path: '', redirectTo: 'admin', pathMatch: 'prefix' },
+                    {
+                        path: 'admin',
+                        component: AdminComponent,
+                        children: [
+                            { path: '', redirectTo: 'management', pathMatch: 'prefix' },
+                            {
+                                path: 'management',
+                                component: AdminManagementPageComponent
+                            }
+                        ]
+                    }
+                ]
+            }
+        ],
+    },
+];
+
+@NgModule({
+    imports: [
+        RouterModule.forChild(routes),
+    ],
+    exports: [RouterModule]
+})
+export class DashboardRoutingModule { }

ui/src/app/metadata/manager/container/manager.component.html

@@ -1,11 +1 @@
-<div class="container-fluid p-3" role="main">
-    <ul class="nav nav-tabs">
-        <li class="nav-item">
-            <a class="nav-link" [routerLink]="['./', 'resolvers']" routerLinkActive="active" translate="label.metadata-sources">Metadata Sources</a>
-        </li>
-        <li class="nav-item">
-            <a class="nav-link" [routerLink]="['./', 'providers']" routerLinkActive="active" translate="label.metadata-providers">Metadata Providers</a>
-        </li>
-    </ul>
-    <router-outlet></router-outlet>
-</div>
+<router-outlet></router-outlet>

ui/src/app/metadata/manager/manager.routing.ts

@@ -1,17 +1,3 @@
 import { Routes } from '@angular/router';
-import { DashboardResolversListComponent } from './container/dashboard-resolvers-list.component';
-import { DashboardProvidersListComponent } from './container/dashboard-providers-list.component';
-import { ManagerComponent } from './container/manager.component';
 
-export const ManagerRoutes: Routes = [
-    { path: '', redirectTo: 'manager', pathMatch: 'prefix' },
-    {
-        path: 'manager',
-        component: ManagerComponent,
-        children: [
-            { path: '', redirectTo: 'resolvers', pathMatch: 'prefix' },
-            { path: 'resolvers', component: DashboardResolversListComponent },
-            { path: 'providers', component: DashboardProvidersListComponent },
-        ]
-    }
-];
+export const ManagerRoutes: Routes = [];

ui/src/app/user/admin/admin.component.html

@@ -0,0 +1 @@
+<router-outlet></router-outlet>

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

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'admin-page',
+    templateUrl: './admin.component.html',
+    styleUrls: []
+})
+export class AdminComponent {
+    constructor() { }
+}

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

@@ -0,0 +1,44 @@
+import { NgModule, ModuleWithProviders } from '@angular/core';
+import { HttpClientModule } from '@angular/common/http';
+import { RouterModule, Routes } from '@angular/router';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule } from '@angular/forms';
+
+import { SharedModule } from '../../shared/shared.module';
+import { I18nModule } from '../../i18n/i18n.module';
+import { AdminManagementPageComponent } from './container/admin-management.component';
+import { AdminComponent } from './admin.component';
+
+@NgModule({
+    declarations: [
+        AdminManagementPageComponent,
+        AdminComponent
+    ],
+    entryComponents: [
+    ],
+    imports: [
+        CommonModule,
+        ReactiveFormsModule,
+        RouterModule,
+        HttpClientModule,
+        SharedModule,
+        I18nModule
+    ]
+})
+export class UserAdminModule {
+    static forRoot(): ModuleWithProviders {
+        return {
+            ngModule: RootUserAdminModule,
+            providers: []
+        };
+    }
+}
+
+@NgModule({
+    imports: [
+        UserAdminModule,
+        // StoreModule.forFeature('admin', reducers),
+        // EffectsModule.forFeature([]),
+    ],
+})
+export class RootUserAdminModule { }

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

@@ -0,0 +1,14 @@
+<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.admin-management">Admin Management</span>
+                </div>
+            </div>
+        </div>
+        <div class="p-3">
+
+        </div>
+    </div>
+</section>

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

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

ui/src/app/user/user.component.html

@@ -0,0 +1 @@
+<router-outlet></router-outlet>

ui/src/app/user/user.component.ts

@@ -0,0 +1,17 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { Store } from '@ngrx/store';
+
+import * as fromRoot from '../app.reducer';
+
+@Component({
+    selector: 'user-page',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    templateUrl: './user.component.html',
+    styleUrls: []
+})
+export class UserPageComponent {
+
+    constructor(
+        private store: Store<fromRoot.State>
+    ) {}
+}

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

@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+
+import { UserRoutingModule } from './user.routing';
+import { I18nModule } from '../i18n/i18n.module';
+import { CustomWidgetRegistry } from '../schema-form/registry';
+import { WidgetRegistry } from 'ngx-schema-form';
+import { UserPageComponent } from './user.component';
+import { UserAdminModule } from './admin/admin.module';
+
+
+@NgModule({
+    imports: [
+        UserRoutingModule,
+        UserAdminModule.forRoot(),
+        I18nModule
+    ],
+    providers: [
+        { provide: WidgetRegistry, useClass: CustomWidgetRegistry }
+    ],
+    declarations: [
+        UserPageComponent
+    ]
+})
+export class UserModule { }

ui/src/app/user/user.routing.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { UserPageComponent } from './user.component';
+
+
+const routes: Routes = [
+    {
+        path: '',
+        component: UserPageComponent,
+        children: []
+    },
+];
+
+@NgModule({
+    imports: [
+        RouterModule.forChild(routes),
+    ],
+    exports: [RouterModule]
+})
+export class UserRoutingModule { }