added manage role

src/app/app.routing.ts

 import { Routes } from '@angular/router';
-
 import { AdminLayoutComponent, AuthLayoutComponent } from './core';
 
+
 export const AppRoutes: Routes = [{
   path: '',
   component: AdminLayoutComponent,
   children: [{
     path: '',
     loadChildren: './components/dashboard/dashboard.module#DashboardModule',
-    data: { title: '', breadcrumb: 'DASHBOARD'}
+    data: { title: 'DASHBOARD', breadcrumb: 'DASHBOARD' }
   }, {
     path: 'search',
     loadChildren: './components/search/search.module#SearchModule',
-    data: { title: 'SEARCH', breadcrumb: 'SEARCH'}
+    data: { title: 'SEARCH', breadcrumb: 'SEARCH' }
   }, {
     path: 'manage-players',
     loadChildren: './components/players/players.module#PlayersModule',
-    data: { title: 'MANAGE-PLAYERS', breadcrumb: 'MANAGE-PLAYERS'}
+    data: { title: 'MANAGE-PLAYERS', breadcrumb: 'MANAGE-PLAYERS' }
   }, {
     path: 'manage-affiliates',
     loadChildren: './components/affiliates/affiliates.module#AffiliatesModule',
-    data: { title: 'MANAGE-AFFILIATES', breadcrumb: 'MANAGE-AFFILIATES'}
+    data: { title: 'MANAGE-AFFILIATES', breadcrumb: 'MANAGE-AFFILIATES' }
   }, {
     path: 'manage-operators',
     loadChildren: './components/operators/operators.module#OperatorsModule',
-    data: { title: 'MANAGE-OPERATORS', breadcrumb: 'MANAGE-OPERATORS'}
+    data: { title: 'MANAGE-OPERATORS', breadcrumb: 'MANAGE-OPERATORS' }
   }, {
     path: 'manage-payments',
     loadChildren: './components/payments/payments.module#PaymentsModule',
-    data: { title: 'MANAGE-PAYMENTS', breadcrumb: 'MANAGE-PAYMENTS'}
-  }]
+    data: { title: 'MANAGE-PAYMENTS', breadcrumb: 'MANAGE-PAYMENTS' }
+  }, {
+    path: 'manage-roles',
+    loadChildren: './components/role/role.module#RoleModule',
+    data: { title: 'MANAGE-ROLES', breadcrumb: 'MANAGE-ROLES' }
+  },]
 }, {
   path: '',
   component: AuthLayoutComponent,

src/app/components/dashboard/dashboard.routing.ts

@@ -4,5 +4,6 @@ import { DashboardComponent } from './dashboard.component';
 
 export const DashboardRoutes: Routes = [{
   path: '',
-  component: DashboardComponent
+  component: DashboardComponent,
+  data: { title: 'DASHBOARD', breadcrumb: 'DASHBOARD' }
 }];

src/app/components/profile/profile.component.html

 <mat-card>
   <mat-toolbar color="primary">Operator profile</mat-toolbar>
-    <form>
   <mat-card-content>
-       
-      </mat-card-content>
+    <form fxLayout="column">
+      <div fxLayout="row wrap">
+        <div class="pb-1" fxLayout="row" fxLayout.sm="column" fxLayout.xs="column" fxLayoutGap="15px">
+          <mat-form-field fxFlex style="width: 30%">
+            <input matInput placeholder="First name" value="alex" disabled>
+          </mat-form-field>
+          <mat-form-field fxFlex style="width: 30%">
+            <input matInput placeholder="Last name" value="paul" disabled>
+          </mat-form-field>
+          <mat-form-field fxFlex style="width: 30%">
+            <input matInput placeholder="User Name" value="alex123" disabled>
+          </mat-form-field>
+        </div>
+      </div>
+      <div fxLayout="row wrap">
+        <div class="pb-1" fxLayout="row" fxLayout.sm="column" fxLayout.xs="column" fxLayoutGap="15px">
+          <mat-form-field fxFlex style="width: 30%">
+            <input matInput placeholder="Email address" value="alex@ymail.com" disabled>
+          </mat-form-field>
+          <mat-form-field>
+            <mat-select placeholder="Role" [(value)]="selectedRole" disabled>
+              <mat-option value="SUPERADMIN">Super Admin</mat-option>
+              <mat-option value="ADMIN">Admin</mat-option>
+              <mat-option value="MARKETING">Marketing</mat-option>
+              <mat-option value="DEVELOPER">Developer</mat-option>
+              <mat-option value="QA">QA</mat-option>
+              <mat-option value="CS">CS</mat-option>
+            </mat-select>
+          </mat-form-field>
+        </div>
+      </div>
       <hr>
       <mat-card-actions>
         <button mat-raised-button color="primary" type="submit">Submit</button>
         <button mat-raised-button color="accent" (click)="dialogRef.close(false)">Close</button>
       </mat-card-actions>
     </form>
-  </mat-card>
+  </mat-card-content>
+</mat-card>
\ No newline at end of file

src/app/components/profile/profile.component.ts

-import { Component, OnInit } from '@angular/core';
+import { Component, Inject, OnInit } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
 
 @Component({
   selector: 'app-profile',
@@ -7,9 +8,13 @@ import { Component, OnInit } from '@angular/core';
 })
 export class ProfileComponent implements OnInit {
 
-  constructor() { }
+  selectedRole = 'SUPERADMIN';
+
+  constructor(public dialogRef: MatDialogRef<ProfileComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: any) { }
 
   ngOnInit() {
+
   }
 
 }

src/app/components/role/add-role-dialog/add-role-dialog.component.html

+<mat-card>
+  <mat-toolbar color="primary">Add Role</mat-toolbar>
+  <form [formGroup]="form">
+    <mat-card-content>
+      <div fxLayout="row wrap">
+        <div class="pb-1">
+          <mat-form-field fxFlex style="width: 100%">
+            <input matInput placeholder="Role Name" [formControl]="form.controls['role']" required>
+            <mat-error *ngIf="form.controls['role'].hasError('required') && form.controls['role'].touched"
+              class="mat-text-warn">You must include role name.</mat-error>
+          </mat-form-field>
+        </div>
+      </div>
+    </mat-card-content>
+    <hr>
+    <mat-card-actions>
+      <button mat-raised-button color="primary" type="submit" [disabled]="!form.valid">Submit</button>
+      <button mat-raised-button color="accent" (click)="dialogRef.close(false)">Close</button>
+    </mat-card-actions>
+  </form>
+</mat-card>
\ No newline at end of file

src/app/components/role/add-role-dialog/add-role-dialog.component.ts

+import { Component, Inject, OnInit } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
+
+@Component({
+  selector: 'app-add-role-dialog',
+  templateUrl: './add-role-dialog.component.html',
+  styleUrls: ['./add-role-dialog.component.scss']
+})
+export class AddRoleDialogComponent implements OnInit {
+  public form: FormGroup;
+  public actionsAlignment: string;
+
+  constructor(public dialogRef: MatDialogRef<AddRoleDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: any, private fb: FormBuilder) { }
+
+  ngOnInit() {
+    this.form = this.fb.group({
+      role: [null, Validators.compose([Validators.required])],
+    });
+  }
+}

src/app/components/role/role-access/role-access.component.html

+<mat-expansion-panel>
+  <mat-expansion-panel-header [expandedHeight]="expandedHeight" [collapsedHeight]="collapsedHeight">
+    <mat-panel-title>Select Role</mat-panel-title>
+  </mat-expansion-panel-header>
+  <ng-template matExpansionPanelContent>
+  </ng-template>
+  <mat-form-field>
+    <mat-select placeholder="Role">
+      <mat-option>--</mat-option>
+      <mat-option value="SUPERADMIN">Super Admin</mat-option>
+      <mat-option value="ADMIN">Admin</mat-option>
+      <mat-option value="MARKETING">Marketing</mat-option>
+      <mat-option value="DEVELOPER">Developer</mat-option>
+      <mat-option value="QA">QA</mat-option>
+      <mat-option value="CS">CS</mat-option>
+    </mat-select>
+  </mat-form-field>
+  <button mat-raised-button color="primary">Search</button>
+</mat-expansion-panel>
+<br>
+<div fxLayout="row" fxLayoutWrap="wrap">
+  <div fxFlex="100" fxFlex.gt-sm="100" fxFlex.sm="100">
+    <div class="mat-box-shadow">
+      <ngx-datatable class="material bg-white" [columnMode]="'force'" [headerHeight]="50" [footerHeight]="50"
+        [rowHeight]="50" [limit]="10" [rows]="operatorDataSource" [columns]="columns">
+
+        <ngx-datatable-column name="Role Name">
+          <ng-template let-row="row" ngx-datatable-cell-template>
+            {{ row?.userName }}
+          </ng-template>
+        </ngx-datatable-column>
+
+        <ngx-datatable-column name="Menu">
+          <ng-template let-row="row" ngx-datatable-cell-template>
+            {{ row?.createTime }}
+          </ng-template>
+        </ngx-datatable-column>
+
+        <ngx-datatable-column name="Child Menu">
+          <ng-template let-row="row" ngx-datatable-cell-template>
+            {{ row?.updateTime}}
+          </ng-template>
+        </ngx-datatable-column>
+
+        <ngx-datatable-column name="Status">
+          <ng-template let-row="row" ngx-datatable-cell-template>
+            {{ row?.lastLoginTime}}
+          </ng-template>
+        </ngx-datatable-column>
+
+        <ngx-datatable-column name="Operation">
+          <ng-template let-row="row" ngx-datatable-cell-template>
+            {{ row?.lastLoginIp}}
+          </ng-template>
+        </ngx-datatable-column>
+
+        <ngx-datatable-column name="Action">
+          <ng-template let-row="row" ngx-datatable-cell-template>
+            {{ row?.status }}
+          </ng-template>
+        </ngx-datatable-column>
+
+      </ngx-datatable>
+    </div>
+  </div>
+</div>
\ No newline at end of file

src/app/components/role/role-access/role-access.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-role-access',
+  templateUrl: './role-access.component.html',
+  styleUrls: ['./role-access.component.scss']
+})
+export class RoleAccessComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/components/role/role-routing.module.ts

+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { ViewRolesComponent } from './view-roles/view-roles.component';
+import { RoleAccessComponent } from './role-access/role-access.component';
+
+const routes: Routes = [
+  {
+    path: 'view-roles',
+    component: ViewRolesComponent,
+    data: { title: 'VIEW-ROLES', breadcrumb: 'VIEW-ROLES'}
+  },
+  {
+    path: 'role-access',
+    component: RoleAccessComponent,
+    data: { title: 'ROLE-ACCESS', breadcrumb: 'ROLE-ACCESS'}
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class RoleRoutingModule { }

src/app/components/role/role.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { NgxDatatableModule } from '@swimlane/ngx-datatable';
+import { RoleRoutingModule } from './role-routing.module';
+import { ViewRolesComponent } from './view-roles/view-roles.component';
+import { RoleAccessComponent } from './role-access/role-access.component';
+import { MatButtonModule, MatExpansionModule, MatSelectModule, MatDialogModule, MatCardModule, MatInputModule, MatToolbarModule } from '@angular/material';
+import { AddRoleDialogComponent } from './add-role-dialog/add-role-dialog.component';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    RoleRoutingModule,
+    NgxDatatableModule,
+    MatButtonModule,
+    MatExpansionModule,
+    MatSelectModule,
+    MatDialogModule,
+    MatCardModule,
+    MatInputModule,
+    MatButtonModule,
+    MatToolbarModule,FormsModule,ReactiveFormsModule
+  ],
+  declarations: [
+    ViewRolesComponent,
+    RoleAccessComponent,
+    AddRoleDialogComponent],
+  entryComponents: [
+    AddRoleDialogComponent
+  ],
+
+})
+export class RoleModule { }

src/app/components/role/view-roles/view-roles.component.html

+<div fxLayout="row" fxLayoutWrap="wrap">
+  <div fxFlex="100" fxFlex.gt-sm="100" fxFlex.sm="100">
+    <div fxFlex.gt-xs="50" fxFlex="100" class="text-sm-right text-xs-left">
+      <span fxFlex></span>
+      <button mat-raised-button color="primary" class="mr-1" (click)="addRoleDialog()">Add Role </button>
+    </div>
+    <div class="mat-box-shadow">
+      <ngx-datatable class="material bg-white" [columnMode]="'force'" [headerHeight]="50" [footerHeight]="50"
+        [rowHeight]="50" [limit]="10" [rows]="operatorDataSource" [columns]="columns">
+
+        <ngx-datatable-column name="Role ID">
+          <ng-template let-row="row" ngx-datatable-cell-template>
+            {{ row?.roleId }}
+          </ng-template>
+        </ngx-datatable-column>
+
+        <ngx-datatable-column name="Role Name">
+          <ng-template let-row="row" ngx-datatable-cell-template>
+            {{ row?.userName }}
+          </ng-template>
+        </ngx-datatable-column>
+
+        <ngx-datatable-column name="Status">
+          <ng-template let-row="row" ngx-datatable-cell-template>
+            {{ row?.lastLoginTime}}
+          </ng-template>
+        </ngx-datatable-column>
+
+      </ngx-datatable>
+    </div>
+  </div>
+</div>
\ No newline at end of file

src/app/components/role/view-roles/view-roles.component.ts

+import { Component, OnInit, ViewChild, TemplateRef, Inject } from '@angular/core';
+import { MatDialogConfig, MatDialogRef, MatDialog } from '@angular/material';
+import { DOCUMENT } from '@angular/common';
+import { AddRoleDialogComponent } from '../add-role-dialog/add-role-dialog.component';
+
+const defaultDialogConfig = new MatDialogConfig();
+
+@Component({
+  selector: 'app-view-roles',
+  templateUrl: './view-roles.component.html',
+  styleUrls: ['./view-roles.component.scss']
+})
+export class ViewRolesComponent implements OnInit {
+
+  dialogRef: MatDialogRef<any> | null;
+  lastAfterClosedResult: string;
+  lastBeforeCloseResult: string;
+  actionsAlignment: string;
+
+  config = {
+    disableClose: false,
+    panelClass: 'custom-overlay-pane-class',
+    hasBackdrop: true,
+    backdropClass: '',
+    width: '500px',
+    height: '300px',
+    minWidth: '',
+    minHeight: '',
+    maxWidth: defaultDialogConfig.maxWidth,
+    maxHeight: '',
+    position: {
+      top: '',
+      bottom: '',
+      left: '',
+      right: ''
+    },
+  };
+  numTemplateOpens = 0;
+
+  @ViewChild(TemplateRef) template: TemplateRef<any>;
+
+  constructor(public dialog: MatDialog, @Inject(DOCUMENT) doc: any) {
+    dialog.afterOpen.subscribe(() => {
+      if (!doc.body.classList.contains('no-scroll')) {
+        doc.body.classList.add('no-scroll');
+      }
+    });
+    dialog.afterAllClosed.subscribe(() => {
+      doc.body.classList.remove('no-scroll');
+    });
+  }
+  addRoleDialog() {
+    this.dialogRef = this.dialog.open(AddRoleDialogComponent, this.config);
+    this.dialogRef.beforeClose().subscribe((result: string) => {
+      this.lastBeforeCloseResult = result;
+    });
+    this.dialogRef.afterClosed().subscribe((result: string) => {
+      this.lastAfterClosedResult = result;
+      this.dialogRef = null;
+    });
+  }
+
+  ngOnInit() {
+  }
+
+}

src/app/core/header/header.component.ts

@@ -26,7 +26,7 @@ export class HeaderComponent {
     panelClass: 'custom-overlay-pane-class',
     hasBackdrop: true,
     backdropClass: '',
-    width: '700px',
+    width: '650px',
     height: '',
     minWidth: '',
     minHeight: '',

src/app/core/menu/menu.service.ts

@@ -67,9 +67,11 @@ const MENUITEMS = [
   },
   {
     state: 'manage-roles',
-    name: 'Manage Role',
-    type: 'link',
+    name: 'Manage  Roles',
+    type: 'sub',
     icon: 'group_work',
+    children: [{ state: 'view-roles', name: 'View Roles' },
+    { state: 'role-access', name: 'Role Access' }]
   },
 ];