feat: UI for self service user management (#49)

Add initial UI design for self service user management.

src/app/app.module.ts

@@ -19,6 +19,7 @@ import { LoginModule } from './login/login.module';
 import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app-routing.module';
 import { NavigationModule } from './navigation/navigation.module';
+import { SelfServiceModule } from './self-service/self-service.module';
 
 @NgModule({
   imports: [
@@ -38,6 +39,7 @@ import { NavigationModule } from './navigation/navigation.module';
     AccountingModule,
     LoginModule,
     NavigationModule,
+    SelfServiceModule,
     AppRoutingModule
   ],
   declarations: [AppComponent],

src/app/core/shell/header/header.component.html

@@ -65,7 +65,14 @@
             <button class="dropdown-item">Something else is here</button>
           </div>
         </li>
-      
+        <li class="nav-item dropdown" ngbDropdown>
+            <a class="nav-link" id="self-service-dropdown">
+              <h5 class="font-weight-normal" ngbDropdownToggle>Self Service</h5>
+            </a>
+              <div class="dropdown-menu" ngbDropdownMenu arial-labelledby="self-service-dropdown">
+                <a class="dropdown-item" routerLink="/self-service/users" routerLinkActive="active">User Management</a>
+              </div>
+          </li>
     </ul>
     <form class="form-inline my-2 my-lg-0">
       <input class="form-control mr-sm-2" placeholder="Search" type="text">

src/app/self-service/create-user/create-user.component.html

@@ -0,0 +1,124 @@
+<div class="fluid-container">
+  <div class="container">
+    <div class="card mt-5">
+      <div class="card-header">
+          <h3 class="font-weight-bold">Create User</h3>
+      </div>
+      <div class="card-body">
+          <div class="row mb-3">
+            <div class="col-sm-12">
+                <!-- <div class="form-group"> -->
+                    <div class="custom-control custom-radio custom-control-inline">
+                      <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input" (change)="isCollapsed = false" [ngbCollapse]="isCollapsed" checked>
+                      <label class="custom-control-label" for="customRadio1">Existing User</label>
+                    </div>
+                  <div class="custom-control custom-radio custom-control-inline">
+                    <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input" (change)="isCollapsed = true" [ngbCollapse]="!isCollapsed">
+                    <label class="custom-control-label" for="customRadio2">New User</label>
+                  </div>
+                <!-- </div> -->
+            </div>
+          </div>
+          <div id="collapseExample" [ngbCollapse]="isCollapsed">
+              <div class="row">
+                <div class="offset-sm-1 col-sm-5 my-3">
+                    <select class="custom-select">
+                        <option selected>Office</option>
+                        <option value="1">One</option>
+                        <option value="2">Two</option>
+                        <option value="3">Three</option>
+                      </select>
+                </div>
+              </div>
+              <div class="row">
+                  <div class="offset-sm-1 col-sm-5 my-3">
+                      <select class="custom-select">
+                          <option selected>Staff</option>
+                          <option value="1">One</option>
+                          <option value="2">Two</option>
+                          <option value="3">Three</option>
+                        </select>
+                  </div>
+              </div>
+              <div class="row">
+                  <div class="offset-sm-1 col-sm-5 my-3">
+                      <select class="custom-select">
+                          <option selected>Client</option>
+                          <option value="1">One</option>
+                          <option value="2">Two</option>
+                          <option value="3">Three</option>
+                        </select>
+                  </div>
+              </div>
+              <div class="row">
+                <div class="offset-sm-1 col-sm-5">
+                    <button type="button" class="btn btn-success my-sm-4 btn-block"><i class="fas fa-unlock mr-2"></i>Activate Self Service User</button>
+                </div>
+              </div>
+          </div>
+
+          <div id="collapseExample" [ngbCollapse]="!isCollapsed">
+              <div class="row">
+                <div class="offset-sm-1 col-sm-4 my-3">
+                    <select class="custom-select">
+                        <option selected>Office</option>
+                        <option value="1">One</option>
+                        <option value="2">Two</option>
+                        <option value="3">Three</option>
+                      </select>
+                </div>
+                <div class="offset-sm-1 col-sm-4 my-3">
+                    <select class="custom-select">
+                        <option selected>Staff</option>
+                        <option value="1">One</option>
+                        <option value="2">Two</option>
+                        <option value="3">Three</option>
+                      </select>
+                </div>
+              </div>
+              <div class="row">
+                  <div class="offset-sm-1 col-sm-4 my-3">
+                      <input class="form-control mr-sm-2 mb-sm-2" placeholder="Username" type="text">
+                  </div>
+              </div>
+              <div class="row">
+                  <div class="offset-sm-1 col-sm-4 my-3">
+                      <input class="form-control mr-sm-2 mb-sm-2" placeholder="First Name" type="text">
+                  </div>
+                  <div class="offset-sm-1 col-sm-4 my-3">
+                      <input class="form-control mr-sm-2 mb-sm-2" placeholder="Last Name" type="text">
+                  </div>
+              </div>
+              <div class="row">
+                  <div class="offset-sm-1 col-sm-4 my-3">
+                      <select class="custom-select">
+                          <option selected>Gender</option>
+                          <option value="1">Male</option>
+                          <option value="2">Female</option>
+                        </select>
+                  </div>
+                  <div class="offset-sm-1 col-sm-4 my-3">
+                      <input class="form-control mr-sm-2 mb-sm-2" placeholder="Date of Birth" type="text">
+                  </div>
+              </div>
+              <div class="row">
+                  <div class="offset-sm-1 col-sm-4 my-3">
+                      <input class="form-control mr-sm-2 mb-sm-2" placeholder="Email" type="text">
+                  </div>
+                  <div class="offset-sm-1 col-sm-4 my-3">
+                      <input class="form-control mr-sm-2 mb-sm-2" placeholder="Mobile No" type="text">
+                  </div>
+              </div>
+              <div class="row">
+                <div class="offset-sm-3 col-sm-2">
+                    <button type="button" class="btn btn-default my-sm-2 btn-block">Cancel</button>
+                </div>
+                <div class="offset-sm-1 col-sm-2">
+                    <button type="button" class="btn btn-primary my-sm-2 btn-block">Submit</button>
+                </div>
+              </div>
+          </div>
+      </div>
+    </div>
+  </div>
+</div>

src/app/self-service/create-user/create-user.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CreateUserComponent } from './create-user.component';
+
+describe('CreateUserComponent', () => {
+  let component: CreateUserComponent;
+  let fixture: ComponentFixture<CreateUserComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CreateUserComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CreateUserComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/self-service/create-user/create-user.component.ts

@@ -0,0 +1,17 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-create-user',
+  templateUrl: './create-user.component.html',
+  styleUrls: ['./create-user.component.scss']
+})
+export class CreateUserComponent implements OnInit {
+
+  isCollapsed = false;
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/self-service/self-service-routing.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { Route, extract } from '@app/core';
+import { UserManagementComponent } from './user-management/user-management.component';
+import { CreateUserComponent } from './create-user/create-user.component';
+import { ViewUserComponent } from './view-user/view-user.component';
+
+const routes: Routes = [
+  Route.withShell([
+    { path: 'self-service/users', component: UserManagementComponent, data: { title: extract('Self Service') } },
+    { path: 'self-service/users/create', component: CreateUserComponent },
+    { path: 'self-service/users/view', component: ViewUserComponent }
+  ])
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+  providers: []
+})
+export class SelfServiceRoutingModule { }

src/app/self-service/self-service.module.spec.ts

@@ -0,0 +1,13 @@
+import { SelfServiceModule } from './self-service.module';
+
+describe('SelfServiceModule', () => {
+  let selfServiceModule: SelfServiceModule;
+
+  beforeEach(() => {
+    selfServiceModule = new SelfServiceModule();
+  });
+
+  it('should create an instance', () => {
+    expect(selfServiceModule).toBeTruthy();
+  });
+});

src/app/self-service/self-service.module.ts

@@ -0,0 +1,28 @@
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+
+import { UserManagementComponent } from './user-management/user-management.component';
+import { SelfServiceRoutingModule } from './self-service-routing.module';
+import { CoreModule } from '@app/core';
+import { CreateUserComponent } from './create-user/create-user.component';
+import { ViewUserComponent } from './view-user/view-user.component';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    CoreModule,
+    SelfServiceRoutingModule,
+    NgbModule
+  ],
+  declarations: [
+    UserManagementComponent,
+    CreateUserComponent,
+    ViewUserComponent
+  ],
+  schemas: [
+   CUSTOM_ELEMENTS_SCHEMA
+ ],
+})
+export class SelfServiceModule { }

src/app/self-service/user-management/user-management.component.html

@@ -0,0 +1,182 @@
+<div class="fluid-container">
+ <div class="container">
+  <div class="card mt-5">
+    <div class="card-header">
+        <h3 class="font-weight-bold">Users</h3>
+        <div class="row">
+          <div class="col-sm-10">
+            <div class="row">
+              <div class="col-sm-6" [ngbCollapse]="!isCollapsed">
+                <input class="form-control mr-sm-2" placeholder="Search" type="text">
+              </div>
+              <div class="col-sm-2">
+                <button type="button" class="btn btn-outline-primary" (click)="isCollapsed = !isCollapsed" [ngbCollapse]="!isCollapsed" [attr.aria-expanded]="!isCollapsed" aria-controls="collapseExample"><i class="fas fa-chevron-down mr-2"></i>
+                  Parameters
+                </button>
+              </div>
+            </div>
+          </div>
+          <div class="col-sm-2">
+            <div class="float-right">
+              <button type="button" class="btn btn-primary btn-large" routerLink="/self-service/users/create" routerLinkActive="active"><i class="fas fa-plus mr-2"></i>Create User</button>
+            </div>
+          </div>
+        </div>
+          <div id="collapseExample" [ngbCollapse]="isCollapsed">
+            <div class="row">
+              <div class="col-sm-4">
+                  <input class="form-control mr-sm-2 mb-sm-2" placeholder="Name" type="text">
+              </div>
+              <div class="col-sm-4">
+                  <input class="form-control mr-sm-2 mb-sm-2" placeholder="User ID" type="text">
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-sm-4">
+                  <input class="form-control mr-sm-2 mb-sm-2" placeholder="Staff" type="text">
+              </div>
+              <div class="col-sm-4">
+                  <input class="form-control mr-sm-2 mb-sm-2" placeholder="Office" type="text">
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-sm-4">
+                  <input class="form-control mr-sm-2 mb-sm-2" placeholder="Activation Date" type="text">
+              </div>
+              <div class="col-sm-4">
+                <div class="row">
+                  <div class="col-sm-6">
+                      <button type="button" class="btn btn-primary mb-sm-2">Advance Search</button>
+                  </div>
+                  <div class="col-sm-3">
+                      <button type="button" class="btn btn-outline-primary mb-sm-2">Reset</button>
+                  </div>
+                  <div class="col-sm-3">
+                    <button type="button" class="btn btn-outline-primary float-right mb-sm-2" (click)="isCollapsed = !isCollapsed" [ngbCollapse]="isCollapsed" [attr.aria-expanded]="!isCollapsed" aria-controls="collapseExample"><i class="fas fa-chevron-up"></i>
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+        </div>
+    </div>
+    <div class="card-body">
+
+        <!--Table-->
+        <table class="table table-hover table-responsive-md table-fixed">
+
+            <!--Table head-->
+            <thead>
+                <tr>
+                    <th>
+                      <div class="custom-control custom-checkbox">
+                        <input type="checkbox" class="custom-control-input" id="customCheck">
+                        <label class="custom-control-label" for="customCheck">&nbsp;</label>
+                      </div>
+                    </th>
+                    <th>Name</th>
+                    <th>User ID</th>
+                    <th>Status</th>
+                    <th>Office</th>
+                    <th>Staff</th>
+                </tr>
+            </thead>
+            <!--Table head-->
+
+            <!--Table body-->
+            <tbody>
+                <tr>
+                    <th scope="row">
+                          <div class="custom-control custom-checkbox">
+                              <input type="checkbox" class="custom-control-input" id="customCheck1">
+                              <label class="custom-control-label" for="customCheck1">&nbsp;</label>
+                            </div>
+                    </th>
+                    <td>Data</td>
+                    <td>Data</td>
+                    <td><i class="fas fa-stop" style="color: #00ce00" placement="top" ngbTooltip="Active"></i></td>
+                    <td>Data</td>
+                    <td>Data</td>
+
+                </tr>
+                <tr>
+                    <th scope="row">
+                      <div class="custom-control custom-checkbox">
+                        <input type="checkbox" class="custom-control-input" id="customCheck2">
+                        <label class="custom-control-label" for="customCheck2">&nbsp;</label>
+                      </div>
+                    </th>
+                    <td>Data</td>
+                    <td>Data</td>
+                    <td><i class="fas fa-stop" style="color: #00ce00" placement="top" ngbTooltip="Active"></i></td>
+                    <td>Data</td>
+                    <td>Data</td>
+
+                </tr>
+                <tr>
+                    <th scope="row">
+                      <div class="custom-control custom-checkbox">
+                        <input type="checkbox" class="custom-control-input" id="customCheck3">
+                        <label class="custom-control-label" for="customCheck3">&nbsp;</label>
+                      </div>
+                    </th>
+                    <td>Data</td>
+                    <td>Data</td>
+                    <td><i class="fas fa-stop" style="color: #00ce00" placement="top" ngbTooltip="Active"></i></td>
+                    <td>Data</td>
+                    <td>Data</td>
+
+                </tr>
+                <tr>
+                    <th scope="row">
+                      <div class="custom-control custom-checkbox">
+                        <input type="checkbox" class="custom-control-input" id="customCheck4">
+                        <label class="custom-control-label" for="customCheck4">&nbsp;</label>
+                      </div>
+                    </th>
+                    <td>Data</td>
+                    <td>Data</td>
+                    <td><i class="fas fa-stop" placement="top" ngbTooltip="Inactive"></i></td>
+                    <td>Data</td>
+                    <td>Data</td>
+
+                </tr>
+                <tr>
+                    <th scope="row">
+                      <div class="custom-control custom-checkbox">
+                        <input type="checkbox" class="custom-control-input" id="customCheck5">
+                        <label class="custom-control-label" for="customCheck5">&nbsp;</label>
+                      </div>
+                    </th>
+                    <td>Data</td>
+                    <td>Data</td>
+                    <td><i class="fas fa-stop" placement="top" ngbTooltip="Inactive"></i></td>
+                    <td>Data</td>
+                    <td>Data</td>
+
+                </tr>
+                <tr>
+                    <th scope="row">
+                      <div class="custom-control custom-checkbox">
+                        <input type="checkbox" class="custom-control-input" id="customCheck6">
+                        <label class="custom-control-label" for="customCheck6">&nbsp;</label>
+                      </div>
+                    </th>
+                    <td>Data</td>
+                    <td>Data</td>
+                    <td><i class="fas fa-stop" style="color: #00ce00" placement="top" ngbTooltip="Active"></i></td>
+                    <td>Data</td>
+                    <td>Data</td>
+
+                </tr>
+            </tbody>
+            <!--Table body-->
+
+        </table>
+        <!--Table-->
+
+      </div>
+    </div>
+    <ngb-pagination  class="d-flex justify-content-center" [collectionSize]="70" [(page)]="page" [boundaryLinks]="true"></ngb-pagination>
+  </div>
+</div>

src/app/self-service/user-management/user-management.component.scss

@@ -0,0 +1,6 @@
+td, th {
+  text-align: center;
+}
+ngb-pagination {
+  margin: 20px 0px;
+}

src/app/self-service/user-management/user-management.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UserManagementComponent } from './user-management.component';
+
+describe('UserManagementComponent', () => {
+  let component: UserManagementComponent;
+  let fixture: ComponentFixture<UserManagementComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ UserManagementComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(UserManagementComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/self-service/user-management/user-management.component.ts

@@ -0,0 +1,17 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-user-management',
+  templateUrl: './user-management.component.html',
+  styleUrls: ['./user-management.component.scss']
+})
+export class UserManagementComponent implements OnInit {
+  page = 1;
+  isCollapsed = true;
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/self-service/view-user/view-user.component.html

@@ -0,0 +1,84 @@
+<div class="fluid-container">
+  <div class="container">
+    <div class="card mt-5">
+      <div class="card-header">
+          <h3 class="font-weight-bold">Users > Abhay Chawla</h3>
+      </div>
+      <div class="card-body">
+        <div class="row">
+          <div class="col-sm-3 ml-2">
+              <h5>
+                <i class="fas fa-stop" style="color: #00ce00" placement="top" ngbTooltip="Active"></i>
+                User ID: 24651
+              </h5>
+          </div>
+        </div>
+        <div class="row">
+            <div class="offset-sm-6 col-sm-1">
+                <button type="button" class="btn btn-primary my-sm-2"><i class="fas fa-edit mr-2"></i>Edit</button>
+            </div>
+            <div class="col-sm-3">
+                <button type="button" class="btn btn-default my-sm-2 float-right"><i class="fas fa-cog mr-2"></i>Change Password</button>
+            </div>
+            <div class="col-sm-2">
+                <button type="button" class="btn btn-danger my-sm-2 float-right"><i class="fas fa-lock mr-2"></i>Deactivate</button>
+            </div>
+        </div>
+        <div class="row mt-2">
+          <div class="col-sm-6">
+            <table class="table table-striped">
+                <!-- <thead>
+                  <tr>
+                    <th scope="col">Last</th>
+                    <th scope="col">Handle</th>
+                  </tr>
+                </thead> -->
+                <tbody>
+                  <tr>
+                    <th scope="row">Username</th>
+                    <td>username</td>
+                  </tr>
+                  <tr>
+                    <th scope="row">First Name</th>
+                    <td>fname</td>
+                  </tr>
+                  <tr>
+                    <th scope="row">Last Name</th>
+                    <td>lname</td>
+                  </tr>
+                  <tr>
+                    <th scope="row">Gender</th>
+                    <td>gender</td>
+                  </tr>
+                  <tr>
+                    <th scope="row">Date of Birth</th>
+                    <td>01/01/2018</td>
+                  </tr>
+                  <tr>
+                    <th scope="row">Email</th>
+                    <td>email@gmail.com</td>
+                  </tr>
+                  <tr>
+                    <th scope="row">Mobile No</th>
+                    <td>1234567890</td>
+                  </tr>
+                  <tr>
+                    <th scope="row">Office</th>
+                    <td>Head Office</td>
+                  </tr>
+                  <tr>
+                    <th scope="row">Staff</th>
+                    <td>Smith W</td>
+                  </tr>
+                  <tr>
+                    <th scope="row">Activation Date</th>
+                    <td>12/03/2018</td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/app/self-service/view-user/view-user.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ViewUserComponent } from './view-user.component';
+
+describe('ViewUserComponent', () => {
+  let component: ViewUserComponent;
+  let fixture: ComponentFixture<ViewUserComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ViewUserComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ViewUserComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/self-service/view-user/view-user.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-view-user',
+  templateUrl: './view-user.component.html',
+  styleUrls: ['./view-user.component.scss']
+})
+export class ViewUserComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/main.scss

@@ -5,7 +5,6 @@
 
 // Theme variables, must be included before the libraries to allow overriding defaults
 
-/* 
 @import "theme/theme-variables";
 
 // 3rd party libraries
@@ -13,16 +12,12 @@
 @import "~@fortawesome/fontawesome-free-webfonts/scss/fontawesome.scss";
 @import "~@fortawesome/fontawesome-free-webfonts/scss/fa-brands.scss";
 @import "~@fortawesome/fontawesome-free-webfonts/scss/fa-regular.scss";
-@import "~@fortawesome/fontawesome-free-webfonts/scss/fa-solid.scss";        */
+@import "~@fortawesome/fontawesome-free-webfonts/scss/fa-solid.scss";
 
 // Theme customization
 @import "styles/bootstrap-material/_variables.scss";
 @import "~bootstrap/scss/bootstrap";
 @import "styles/bootstrap-material/_bootswatch.scss";
 
-// 3rd party libraries
-
-/* @import "~@fortawesome/fontawesome-free-webfonts/scss/fontawesome.scss";
- */
 //other scss imports
 @import "styles/_loader.scss"