From 4704b8e6676abf80a4fd474aaa3d84d63212ac60 Mon Sep 17 00:00:00 2001 From: Abhay Chawla Date: Fri, 15 Jun 2018 18:32:21 +0530 Subject: [PATCH] feat: UI for self service user management (#49) Add initial UI design for self service user management. --- src/app/app.module.ts | 2 + .../core/shell/header/header.component.html | 13 +- .../create-user/create-user.component.html | 124 ++++++++++++ .../create-user/create-user.component.scss | 0 .../create-user/create-user.component.spec.ts | 25 +++ .../create-user/create-user.component.ts | 17 ++ .../self-service-routing.module.ts | 22 +++ .../self-service/self-service.module.spec.ts | 13 ++ src/app/self-service/self-service.module.ts | 28 +++ .../user-management.component.html | 182 ++++++++++++++++++ .../user-management.component.scss | 6 + .../user-management.component.spec.ts | 25 +++ .../user-management.component.ts | 17 ++ .../view-user/view-user.component.html | 84 ++++++++ .../view-user/view-user.component.scss | 0 .../view-user/view-user.component.spec.ts | 25 +++ .../view-user/view-user.component.ts | 15 ++ src/main.scss | 9 +- 18 files changed, 597 insertions(+), 10 deletions(-) create mode 100644 src/app/self-service/create-user/create-user.component.html create mode 100644 src/app/self-service/create-user/create-user.component.scss create mode 100644 src/app/self-service/create-user/create-user.component.spec.ts create mode 100644 src/app/self-service/create-user/create-user.component.ts create mode 100644 src/app/self-service/self-service-routing.module.ts create mode 100644 src/app/self-service/self-service.module.spec.ts create mode 100644 src/app/self-service/self-service.module.ts create mode 100644 src/app/self-service/user-management/user-management.component.html create mode 100644 src/app/self-service/user-management/user-management.component.scss create mode 100644 src/app/self-service/user-management/user-management.component.spec.ts create mode 100644 src/app/self-service/user-management/user-management.component.ts create mode 100644 src/app/self-service/view-user/view-user.component.html create mode 100644 src/app/self-service/view-user/view-user.component.scss create mode 100644 src/app/self-service/view-user/view-user.component.spec.ts create mode 100644 src/app/self-service/view-user/view-user.component.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 786e6bfa5..4c0137f8b 100644 --- a/src/app/app.module.ts +++ b/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], diff --git a/src/app/core/shell/header/header.component.html b/src/app/core/shell/header/header.component.html index b329ffc4a..5c104ab3c 100644 --- a/src/app/core/shell/header/header.component.html +++ b/src/app/core/shell/header/header.component.html @@ -59,13 +59,20 @@
  • -
    +
    • - +
  • + +
    Self Service
    +     +
    + User Management +
    +
    • @@ -74,4 +81,4 @@ - \ No newline at end of file + diff --git a/src/app/self-service/create-user/create-user.component.html b/src/app/self-service/create-user/create-user.component.html new file mode 100644 index 000000000..2d589b5f2 --- /dev/null +++ b/src/app/self-service/create-user/create-user.component.html @@ -0,0 +1,124 @@ +
    +
    +
    +
    +

    Create User

    +
    +
    +
    +
    + +
    + + +
    +
    + + +
    + +
    +
    +
    +
    +
    + +
    +
    +
    +
    + +
    +
    +
    +
    + +
    +
    +
    +
    + +
    +
    +
    + +
    +
    +
    + +
    +
    + +
    +
    +
    +
    + +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +
    +
    diff --git a/src/app/self-service/create-user/create-user.component.scss b/src/app/self-service/create-user/create-user.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/app/self-service/create-user/create-user.component.spec.ts b/src/app/self-service/create-user/create-user.component.spec.ts new file mode 100644 index 000000000..0489eff4e --- /dev/null +++ b/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; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ CreateUserComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(CreateUserComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/self-service/create-user/create-user.component.ts b/src/app/self-service/create-user/create-user.component.ts new file mode 100644 index 000000000..e0e92ccbd --- /dev/null +++ b/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() { + } + +} diff --git a/src/app/self-service/self-service-routing.module.ts b/src/app/self-service/self-service-routing.module.ts new file mode 100644 index 000000000..7847ac191 --- /dev/null +++ b/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 { } diff --git a/src/app/self-service/self-service.module.spec.ts b/src/app/self-service/self-service.module.spec.ts new file mode 100644 index 000000000..8d627e422 --- /dev/null +++ b/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(); + }); +}); diff --git a/src/app/self-service/self-service.module.ts b/src/app/self-service/self-service.module.ts new file mode 100644 index 000000000..a3da8f512 --- /dev/null +++ b/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 { } diff --git a/src/app/self-service/user-management/user-management.component.html b/src/app/self-service/user-management/user-management.component.html new file mode 100644 index 000000000..7894be377 --- /dev/null +++ b/src/app/self-service/user-management/user-management.component.html @@ -0,0 +1,182 @@ +
    +
    +
    +
    +

    Users

    +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    + +
    +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    +
    + + +
    +     		NameUser IDStatusOfficeStaff
    +
    + + +
    +     		DataDataDataData
    +
    + + +
    +     		DataDataDataData
    +
    + + +
    +     		DataDataDataData
    +
    + + +
    +     		DataDataDataData
    +
    + + +
    +     		DataDataDataData
    +
    + + +
    +     		DataDataDataData
    + + +
    +
    + +
    +
    diff --git a/src/app/self-service/user-management/user-management.component.scss b/src/app/self-service/user-management/user-management.component.scss new file mode 100644 index 000000000..c48642986 --- /dev/null +++ b/src/app/self-service/user-management/user-management.component.scss @@ -0,0 +1,6 @@ +td, th { + text-align: center; +} +ngb-pagination { + margin: 20px 0px; +} diff --git a/src/app/self-service/user-management/user-management.component.spec.ts b/src/app/self-service/user-management/user-management.component.spec.ts new file mode 100644 index 000000000..4c1c14bcf --- /dev/null +++ b/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; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ UserManagementComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(UserManagementComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/self-service/user-management/user-management.component.ts b/src/app/self-service/user-management/user-management.component.ts new file mode 100644 index 000000000..ffe053826 --- /dev/null +++ b/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() { + } + +} diff --git a/src/app/self-service/view-user/view-user.component.html b/src/app/self-service/view-user/view-user.component.html new file mode 100644 index 000000000..8b830b207 --- /dev/null +++ b/src/app/self-service/view-user/view-user.component.html @@ -0,0 +1,84 @@ +
    +
    +
    +
    +

    Users > Abhay Chawla

    +
    +
    +
    +
    +
    + + User ID: 24651 +
    +
    +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Usernameusername
    First Namefname
    Last Namelname
    Gendergender
    Date of Birth01/01/2018
    Emailemail@gmail.com
    Mobile No1234567890
    OfficeHead Office
    StaffSmith W
    Activation Date12/03/2018
    +
    +
    +
    +
    +
    +
    diff --git a/src/app/self-service/view-user/view-user.component.scss b/src/app/self-service/view-user/view-user.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/app/self-service/view-user/view-user.component.spec.ts b/src/app/self-service/view-user/view-user.component.spec.ts new file mode 100644 index 000000000..57516288e --- /dev/null +++ b/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; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ViewUserComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ViewUserComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/self-service/view-user/view-user.component.ts b/src/app/self-service/view-user/view-user.component.ts new file mode 100644 index 000000000..91a41b6e8 --- /dev/null +++ b/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() { + } + +} diff --git a/src/main.scss b/src/main.scss index c7342d87c..aec7dfd25 100644 --- a/src/main.scss +++ b/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" \ No newline at end of file +@import "styles/_loader.scss"