Skip to content

Praful Makani / bo-livebillionbet-ui

Go to a project
Commit 610b7499 by Ajit Thakor
Options

added manage role

1 parent 55479469
Inline Side-by-side
Showing with 344 additions and 20 deletions
src/app/app.routing.ts
import { Routes } from '@angular/router'; import { Routes } from '@angular/router';
import { AdminLayoutComponent, AuthLayoutComponent } from './core'; import { AdminLayoutComponent, AuthLayoutComponent } from './core';
export const AppRoutes: Routes = [{ export const AppRoutes: Routes = [{
path: '', path: '',
component: AdminLayoutComponent, component: AdminLayoutComponent,
children: [{ children: [{
path: '', path: '',
loadChildren: './components/dashboard/dashboard.module#DashboardModule', loadChildren: './components/dashboard/dashboard.module#DashboardModule',
data: { title: '', breadcrumb: 'DASHBOARD'} data: { title: 'DASHBOARD', breadcrumb: 'DASHBOARD' }
}, { }, {
path: 'search', path: 'search',
loadChildren: './components/search/search.module#SearchModule', loadChildren: './components/search/search.module#SearchModule',
data: { title: 'SEARCH', breadcrumb: 'SEARCH'} data: { title: 'SEARCH', breadcrumb: 'SEARCH' }
}, { }, {
path: 'manage-players', path: 'manage-players',
loadChildren: './components/players/players.module#PlayersModule', loadChildren: './components/players/players.module#PlayersModule',
data: { title: 'MANAGE-PLAYERS', breadcrumb: 'MANAGE-PLAYERS'} data: { title: 'MANAGE-PLAYERS', breadcrumb: 'MANAGE-PLAYERS' }
}, { }, {
path: 'manage-affiliates', path: 'manage-affiliates',
loadChildren: './components/affiliates/affiliates.module#AffiliatesModule', loadChildren: './components/affiliates/affiliates.module#AffiliatesModule',
data: { title: 'MANAGE-AFFILIATES', breadcrumb: 'MANAGE-AFFILIATES'} data: { title: 'MANAGE-AFFILIATES', breadcrumb: 'MANAGE-AFFILIATES' }
}, { }, {
path: 'manage-operators', path: 'manage-operators',
loadChildren: './components/operators/operators.module#OperatorsModule', loadChildren: './components/operators/operators.module#OperatorsModule',
data: { title: 'MANAGE-OPERATORS', breadcrumb: 'MANAGE-OPERATORS'} data: { title: 'MANAGE-OPERATORS', breadcrumb: 'MANAGE-OPERATORS' }
}, { }, {
path: 'manage-payments', path: 'manage-payments',
loadChildren: './components/payments/payments.module#PaymentsModule', 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: '', path: '',
component: AuthLayoutComponent, component: AuthLayoutComponent,
......
src/app/components/dashboard/dashboard.routing.ts
...@@ -4,5 +4,6 @@ import { DashboardComponent } from './dashboard.component'; ...@@ -4,5 +4,6 @@ import { DashboardComponent } from './dashboard.component';
export const DashboardRoutes: Routes = [{ export const DashboardRoutes: Routes = [{
path: '', path: '',
component: DashboardComponent component: DashboardComponent,
data: { title: 'DASHBOARD', breadcrumb: 'DASHBOARD' }
}]; }];
src/app/components/profile/profile.component.html
<mat-card> <mat-card>
<mat-toolbar color="primary">Operator profile</mat-toolbar> <mat-toolbar color="primary">Operator profile</mat-toolbar>
<form> <mat-card-content>
<mat-card-content> <form fxLayout="column">
<div fxLayout="row wrap">
</mat-card-content> <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> <hr>
<mat-card-actions> <mat-card-actions>
<button mat-raised-button color="primary" type="submit">Submit</button> <button mat-raised-button color="primary" type="submit">Submit</button>
<button mat-raised-button color="accent" (click)="dialogRef.close(false)">Close</button> <button mat-raised-button color="accent" (click)="dialogRef.close(false)">Close</button>
</mat-card-actions> </mat-card-actions>
</form> </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({ @Component({
selector: 'app-profile', selector: 'app-profile',
...@@ -7,9 +8,13 @@ import { Component, OnInit } from '@angular/core'; ...@@ -7,9 +8,13 @@ import { Component, OnInit } from '@angular/core';
}) })
export class ProfileComponent implements OnInit { export class ProfileComponent implements OnInit {
constructor() { } selectedRole = 'SUPERADMIN';
constructor(public dialogRef: MatDialogRef<ProfileComponent>,
@Inject(MAT_DIALOG_DATA) public data: any) { }
ngOnInit() { ngOnInit() {
} }
} }
src/app/components/role/add-role-dialog/add-role-dialog.component.html 0 → 100644
<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 0 → 100644
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 0 → 100644
<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 0 → 100644
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 0 → 100644
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 0 → 100644
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 0 → 100644
<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 0 → 100644
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 { ...@@ -26,7 +26,7 @@ export class HeaderComponent {
panelClass: 'custom-overlay-pane-class', panelClass: 'custom-overlay-pane-class',
hasBackdrop: true, hasBackdrop: true,
backdropClass: '', backdropClass: '',
width: '700px', width: '650px',
height: '', height: '',
minWidth: '', minWidth: '',
minHeight: '', minHeight: '',
......
src/app/core/menu/menu.service.ts
...@@ -67,9 +67,11 @@ const MENUITEMS = [ ...@@ -67,9 +67,11 @@ const MENUITEMS = [
}, },
{ {
state: 'manage-roles', state: 'manage-roles',
name: 'Manage Role', name: 'Manage Roles',
type: 'link', type: 'sub',
icon: 'group_work', icon: 'group_work',
children: [{ state: 'view-roles', name: 'View Roles' },
{ state: 'role-access', name: 'Role Access' }]
}, },
]; ];
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!