Skip to content

Ajit Thakor / bo-livebillionbet-ui

Go to a project
Commit 452a700e by Ajit Thakor
Options

Added ui for manage operator and search functionlity

1 parent e7a2eea2
Inline Side-by-side
Showing with 795 additions and 32 deletions
src/app/components/operators/add-operator-dialog/add-operator-dialog.component.html 0 → 100644
<mat-card>
<mat-toolbar color="primary">Add Operator</mat-toolbar>
<form [formGroup]="form">
<mat-card-content>
<div fxLayout="row wrap">
<div class="mb-1">
<mat-form-field style="width: 100%">
<input matInput placeholder="First name" autofocus [formControl]="form.controls['fname']">
</mat-form-field>
<small *ngIf="form.controls['fname'].hasError('required') && form.controls['fname'].touched"
class="mat-text-warn">You must include a first name.</small>
<small *ngIf="form.controls['fname'].hasError('minlength') && form.controls['fname'].touched"
class="mat-text-warn">Your first name must be at least 5 characters long.</small>
<small *ngIf="form.controls['fname'].hasError('maxlength') && form.controls['fname'].touched"
class="mat-text-warn">Your first name cannot exceed 10 characters.</small>
</div>
</div>
<div fxLayout="row wrap">
<div class="mb-1">
<mat-form-field style="width: 100%">
<input matInput placeholder="Last name" [formControl]="form.controls['lname']">
</mat-form-field>
<small *ngIf="form.controls['lname'].hasError('required') && form.controls['lname'].touched"
class="mat-text-warn">You must include a last name.</small>
<small *ngIf="form.controls['lname'].hasError('minlength') && form.controls['lname'].touched"
class="mat-text-warn">Your last name must be at least 5 characters long.</small>
<small *ngIf="form.controls['lname'].hasError('maxlength') && form.controls['lname'].touched"
class="mat-text-warn">Your last name cannot exceed 10 characters.</small>
</div>
</div>
<div fxLayout="row wrap">
<div class="mb-1">
<mat-form-field style="width: 100%">
<input matInput placeholder="User name" [formControl]="form.controls['uname']">
</mat-form-field>
<small *ngIf="form.controls['uname'].hasError('required') && form.controls['uname'].touched"
class="mat-text-warn">You must include a user name.</small>
<small *ngIf="form.controls['uname'].hasError('minlength') && form.controls['uname'].touched"
class="mat-text-warn">Your user name must be at least 5 characters long.</small>
<small *ngIf="form.controls['uname'].hasError('maxlength') && form.controls['uname'].touched"
class="mat-text-warn">Your user name cannot exceed 10 characters.</small>
</div>
</div>
<div class="mb-1">
<mat-form-field style="width: 100%">
<input matInput placeholder="Email address" [formControl]="form.controls['email']" type="email">
</mat-form-field>
<small *ngIf="form.controls['email'].hasError('required') && form.controls['email'].touched"
class="mat-text-warn">You must include an email address.</small>
<small *ngIf="form.controls['email'].errors?.email && form.controls['email'].touched" class="mat-text-warn">You
must include a valid email address.</small>
</div>
<div class="mb-1">
<mat-form-field style="width: 100%">
<input matInput placeholder="Password" [formControl]="form.controls['password']" type="password">
</mat-form-field>
<small *ngIf="form.controls['password'].hasError('required') && form.controls['password'].touched"
class="mat-text-warn">You must include password.</small>
</div>
<div class="mb-1">
<mat-form-field style="width: 100%">
<mat-select placeholder="Role" [formControl]="form.controls['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>
<small *ngIf="form.controls['role'].hasError('required') && form.controls['role'].touched"
class="mat-text-warn">You must include role.</small>
</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 class="shadow-none" (click)="dialogRef.close(true)">Close</button>
</mat-card-actions>
</form>
</mat-card>
\ No newline at end of file
src/app/components/operators/add-operator-dialog/add-operator-dialog.component.ts 0 → 100644
import { Component, OnInit, Inject } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
import { CustomValidators } from 'ng2-validation';
@Component({
selector: 'app-add-operator-dialog',
templateUrl: './add-operator-dialog.component.html',
styleUrls: ['./add-operator-dialog.component.scss']
})
export class AddOperatorDialogComponent implements OnInit {
public form: FormGroup;
public actionsAlignment: string;
constructor(public dialogRef: MatDialogRef<AddOperatorDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: any, private fb: FormBuilder) { }
ngOnInit() {
this.form = this.fb.group({
fname: [null, Validators.compose([Validators.required, Validators.minLength(5), Validators.maxLength(10)])],
lname: [null, Validators.compose([Validators.required, Validators.minLength(5), Validators.maxLength(10)])],
uname: [null, Validators.compose([Validators.required, Validators.minLength(5), Validators.maxLength(10)])],
email: [null, Validators.compose([Validators.required, CustomValidators.email])],
range: [null, Validators.compose([Validators.required, CustomValidators.range([5, 9])])],
password: [null, Validators.compose([Validators.required])],
role: [null, Validators.compose([Validators.required, Validators.minLength(2), Validators.maxLength(10)])]
});
}
}
src/app/components/operators/delete-dialog/delete-dialog.component.html 0 → 100644
<h1 matDialogTitle>Delete Dailog</h1>
<div mat-dialog-content>
<!-- <p>Delete: <b>{{ data.userName }}</b> ?</p> -->
<p>Delete: <b>Test User</b> ?</p>
</div>
<div mat-dialog-actions>
<button type="button" mat-raised-button color="primary" (click)="dialogRef.close(true)"
(click)="confirmDelete()">Delete</button>
&nbsp;
<span fxFlex></span>
<button mat-raised-button color="accent" (click)="dialogRef.close(false)">No Thanks!</button>
</div>
\ No newline at end of file
src/app/components/operators/delete-dialog/delete-dialog.component.ts 0 → 100644
import { Component, Inject, OnInit } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
@Component({
selector: 'app-delete-dialog',
templateUrl: './delete-dialog.component.html',
styleUrls: ['./delete-dialog.component.scss']
})
export class DeleteDialogComponent implements OnInit {
private _dimesionToggle = false;
constructor(public dialogRef: MatDialogRef<DeleteDialogComponent>,@Inject(MAT_DIALOG_DATA) public data: any) { }
togglePosition(): void {
this._dimesionToggle = !this._dimesionToggle;
if (this._dimesionToggle) {
this.dialogRef
.updateSize('500px', '500px')
.updatePosition({ top: '25px', left: '25px' });
} else {
this.dialogRef
.updateSize()
.updatePosition();
}
}
ngOnInit() {
}
}
src/app/components/operators/edit-dialog/edit-dialog.component.html 0 → 100644
<mat-toolbar color="primary">Operator Details</mat-toolbar>
<div fxLayout="row wrap" fxLayoutAlign="center start">
<div fxFlex.gt-sm="55" fxFlex="100">
<mat-card class="mat-card-top">
<mat-tab-group>
<mat-tab>
<ng-template matTabLabel>Operator Info</ng-template>
<mat-card-content>
<form fxLayout="column">
<div fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-sm="50" class="pr-1">
<div class="pb-1">
<mat-form-field class="">
<input matInput placeholder="First name">
</mat-form-field>
<mat-form-field class="mb-1">
<input matInput placeholder="Last name">
</mat-form-field>
<mat-form-field class="mb-1">
<input matInput placeholder="User Name">
</mat-form-field>
</div>
</div>
<div fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-sm="50" class="pr-1">
<div class="pb-1">
<mat-form-field class="mb-1">
<input matInput placeholder="Email address">
</mat-form-field>
<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>
</div>
</div>
<hr>
<mat-card-actions>
<button mat-raised-button color="primary">Update</button>
<button mat-raised-button class="shadow-none" (click)="dialogRef.close(true)">Close</button>
</mat-card-actions>
</form>
</mat-card-content>
</mat-tab>
<mat-tab>
<ng-template matTabLabel>Reset Password</ng-template>
<mat-card-content>
<form fxLayout="column">
<div fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-sm="50" class="pr-1">
<div class="pb-1">
<mat-form-field class="mb-1">
<input matInput placeholder="New password" type="password">
</mat-form-field>
<mat-form-field class="mb-1">
<input matInput placeholder="Confirm new password" type="password">
</mat-form-field>
<hr>
<mat-card-actions>
<button mat-raised-button color="primary">Update</button>
<button mat-raised-button class="shadow-none" (click)="dialogRef.close(true)">Close</button>
</mat-card-actions>
</div>
</div>
</form>
</mat-card-content>
</mat-tab>
<mat-tab>
<ng-template matTabLabel>Operator Access</ng-template>
</mat-tab>
</mat-tab-group>
</mat-card>
</div>
</div>
\ No newline at end of file
src/app/components/operators/edit-dialog/edit-dialog.component.ts 0 → 100644
import { Component, Inject, OnInit } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA, MatDialog, MatDialogConfig } from '@angular/material';
const defaultDialogConfig = new MatDialogConfig();
@Component({
selector: 'app-edit-dialog',
templateUrl: './edit-dialog.component.html',
styleUrls: ['./edit-dialog.component.scss']
})
export class EditDialogComponent implements OnInit {
private _dimesionToggle = false;
actionsAlignment: string;
config = {
disableClose: true,
panelClass: 'custom-overlay-pane-class',
hasBackdrop: true,
backdropClass: '',
width: '',
height: '',
minWidth: '',
minHeight: '',
maxWidth: defaultDialogConfig.maxWidth,
maxHeight: '',
position: {
top: '',
bottom: '',
left: '',
right: ''
},
};
constructor(public dialog: MatDialog,
public dialogRef: MatDialogRef<EditDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: any) { }
togglePosition(): void {
this._dimesionToggle = !this._dimesionToggle;
if (this._dimesionToggle) {
this.dialogRef
.updateSize('500px', '500px')
.updatePosition({ top: '25px', left: '25px' });
} else {
this.dialogRef
.updateSize()
.updatePosition();
}
}
ngOnInit() {
}
}
src/app/components/operators/operators.module.ts
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { CommonModule } from '@angular/common';
import { MatInputModule, MatExpansionModule, MatDatepickerModule, MatNativeDateModule, MatSelectModule, MatButtonModule, MatButtonToggleModule, MatTabsModule,MatIconModule, MatCardModule } from '@angular/material';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatToolbarModule,MatRadioModule,MatSlideToggleModule, MatInputModule, MatExpansionModule, MatDatepickerModule, MatNativeDateModule, MatSelectModule, MatButtonModule, MatButtonToggleModule, MatTabsModule, MatIconModule, MatCardModule } from '@angular/material';
import { NgxDatatableModule } from '@swimlane/ngx-datatable';
import { OperatorsRoutes } from './operators.routing';
import { ViewOperatorsComponent } from './view-operators/view-operator.component';
import { AddOperatorDialogComponent } from './add-operator-dialog/add-operator-dialog.component';
import { DeleteDialogComponent } from './delete-dialog/delete-dialog.component';
import { EditDialogComponent } from './edit-dialog/edit-dialog.component';
@NgModule({
imports: [
......@@ -20,10 +24,23 @@ import { ViewOperatorsComponent } from './view-operators/view-operator.component
MatButtonToggleModule,
MatTabsModule,
MatIconModule,
MatCardModule
MatCardModule,
MatSlideToggleModule,
FormsModule,
ReactiveFormsModule,
MatRadioModule,
MatToolbarModule
],
declarations: [
ViewOperatorsComponent,
AddOperatorDialogComponent,
EditDialogComponent,
DeleteDialogComponent
],
entryComponents: [
AddOperatorDialogComponent,
EditDialogComponent,
DeleteDialogComponent
]
})
......
src/app/components/operators/view-operators/view-operator.component.html
......@@ -39,12 +39,12 @@
<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">Add Operator </button>
<button mat-raised-button color="primary" class="mr-1" (click)="addOperatorDialog()">Add Operator </button>
</div>
<div class="mat-box-shadow">
<ngx-datatable class="material bg-white" [columnMode]="'force'" [headerHeight]="50" [footerHeight]="50"
[rowHeight]="50" [limit]="10" [rows]="dataSource" [columns]="columns">
[rowHeight]="50" [limit]="10" [rows]="operatorDataSource" [columns]="columns">
<ngx-datatable-column name="Username">
<ng-template let-row="row" ngx-datatable-cell-template>
......@@ -78,7 +78,8 @@
<ngx-datatable-column name="Status">
<ng-template let-row="row" ngx-datatable-cell-template>
{{ row?.status }}
<!-- {{ row?.status }} -->
<mat-slide-toggle></mat-slide-toggle>
</ng-template>
</ngx-datatable-column>
......@@ -91,12 +92,12 @@
<ngx-datatable-column name="Action">
<ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
<button id="modifyButton" matTooltip="Modify" class="mibutton24" mat-icon-button mat-button-sm
(click)="edit(row.userId,row.userName,row.role,row.email,row.assignedNode)" [attr.aria-label]="edit"
(click)="openEditDialog()" [attr.aria-label]="edit"
color="primary">
<mat-icon class="mi16">edit</mat-icon>
</button>
<button id="lockedButton" matTooltip="Delete" class="mibutton24" mat-icon-button mat-button-sm
(click)="delete(row?.userId,row?.userName)" [attr.aria-label]="delete" color="warn">
(click)="openDeleteDialog()" [attr.aria-label]="delete" color="warn">
<mat-icon class="mi16">close</mat-icon>
</button>
</ng-template>
......
src/app/components/operators/view-operators/view-operator.component.ts
import { Component } from '@angular/core';
import { Component, ViewChild, TemplateRef, Inject } from '@angular/core';
import { MatDialogConfig, MatDialogRef, MatDialog } from '@angular/material';
import { DOCUMENT } from '@angular/platform-browser';
import { AddOperatorDialogComponent } from '../add-operator-dialog/add-operator-dialog.component';
import { DeleteDialogComponent } from '../delete-dialog/delete-dialog.component';
import { EditDialogComponent } from '../edit-dialog/edit-dialog.component';
const defaultDialogConfig = new MatDialogConfig();
@Component({
templateUrl: './view-operator.component.html',
styleUrls: ['./view-operator.component.scss']
})
export class ViewOperatorsComponent {
operatorDataSource = OPERATOR_DATA;
dialogRef: MatDialogRef<any> | null;
lastAfterClosedResult: string;
lastBeforeCloseResult: string;
actionsAlignment: string;
config = {
disableClose: true,
panelClass: 'custom-overlay-pane-class',
hasBackdrop: true,
backdropClass: '',
width: '700px',
height: '',
minWidth: '',
minHeight: '',
maxWidth: defaultDialogConfig.maxWidth,
maxHeight: '',
position: {
top: '',
bottom: '',
left: '',
right: ''
},
};
deleteDialogconfig = {
disableClose: true,
panelClass: 'custom-overlay-pane-class',
maxWidth: defaultDialogConfig.maxWidth,
maxHeight: '',
position: {
top: '', bottom: '', left: '', right: ''
},
};
@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');
});
}
addOperatorDialog() {
this.dialogRef = this.dialog.open(AddOperatorDialogComponent, this.config);
this.dialogRef.beforeClose().subscribe((result: string) => {
this.lastBeforeCloseResult = result;
});
this.dialogRef.afterClosed().subscribe((result: string) => {
this.lastAfterClosedResult = result;
this.dialogRef = null;
});
}
openEditDialog() {
this.dialogRef = this.dialog.open(EditDialogComponent, this.config);
this.dialogRef.beforeClose().subscribe((result: string) => {
this.lastBeforeCloseResult = result;
});
this.dialogRef.afterClosed().subscribe((result: string) => {
this.lastAfterClosedResult = result;
this.dialogRef = null;
});
}
openDeleteDialog() {
this.dialogRef = this.dialog.open(DeleteDialogComponent, this.deleteDialogconfig);
this.dialogRef.beforeClose().subscribe((result: string) => {
this.lastBeforeCloseResult = result;
});
this.dialogRef.afterClosed().subscribe((result: string) => {
this.lastAfterClosedResult = result;
this.dialogRef = null;
});
}
}
export interface OperatorDataElement {
userName: string;
createTime: string
updateTime: string
lastLoginTime: string
lastLoginIp: string
status: number
operatorRole: number
}
const OPERATOR_DATA: OperatorDataElement[] = [
{
userName: "test",
createTime: "13-12-1992 00:00:0000",
updateTime: "13-12-1992 00:00:0000",
lastLoginTime: "13-12-1992 00:00:0000",
lastLoginIp: "0.0.0.0",
status: 1,
operatorRole: 1
},
{
userName: "test",
createTime: "13-12-1992 00:00:0000",
updateTime: "13-12-1992 00:00:0000",
lastLoginTime: "13-12-1992 00:00:0000",
lastLoginIp: "0.0.0.0",
status: 1,
operatorRole: 1
},
{
userName: "test",
createTime: "13-12-1992 00:00:0000",
updateTime: "13-12-1992 00:00:0000",
lastLoginTime: "13-12-1992 00:00:0000",
lastLoginIp: "0.0.0.0",
status: 1,
operatorRole: 1
},
{
userName: "test",
createTime: "13-12-1992 00:00:0000",
updateTime: "13-12-1992 00:00:0000",
lastLoginTime: "13-12-1992 00:00:0000",
lastLoginIp: "0.0.0.0",
status: 1,
operatorRole: 1
},
{
userName: "test",
createTime: "13-12-1992 00:00:0000",
updateTime: "13-12-1992 00:00:0000",
lastLoginTime: "13-12-1992 00:00:0000",
lastLoginIp: "0.0.0.0",
status: 1,
operatorRole: 1
},
{
userName: "test",
createTime: "13-12-1992 00:00:0000",
updateTime: "13-12-1992 00:00:0000",
lastLoginTime: "13-12-1992 00:00:0000",
lastLoginIp: "0.0.0.0",
status: 1,
operatorRole: 1
},
{
userName: "test",
createTime: "13-12-1992 00:00:0000",
updateTime: "13-12-1992 00:00:0000",
lastLoginTime: "13-12-1992 00:00:0000",
lastLoginIp: "0.0.0.0",
status: 1,
operatorRole: 1
},
{
userName: "test",
createTime: "13-12-1992 00:00:0000",
updateTime: "13-12-1992 00:00:0000",
lastLoginTime: "13-12-1992 00:00:0000",
lastLoginIp: "0.0.0.0",
status: 1,
operatorRole: 1
},
{
userName: "test",
createTime: "13-12-1992 00:00:0000",
updateTime: "13-12-1992 00:00:0000",
lastLoginTime: "13-12-1992 00:00:0000",
lastLoginIp: "0.0.0.0",
status: 1,
operatorRole: 1
},
{
userName: "test",
createTime: "13-12-1992 00:00:0000",
updateTime: "13-12-1992 00:00:0000",
lastLoginTime: "13-12-1992 00:00:0000",
lastLoginIp: "0.0.0.0",
status: 1,
operatorRole: 1
},
];
src/app/components/players/edit-dialog/edit-dialog.component.html
......@@ -24,6 +24,10 @@
<mat-form-field class="mb-1">
<input matInput placeholder="Mobile number">
</mat-form-field>
</div>
</div>
<div fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-sm="50" class="pr-1">
<div class="pb-1">
<mat-form-field class="mb-1">
<mat-select placeholder="Gender">
<mat-option>--</mat-option>
......@@ -31,10 +35,6 @@
<mat-option value="female">Female</mat-option>
</mat-select>
</mat-form-field>
</div>
</div>
<div fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-sm="50" class="pr-1">
<div class="pb-1">
<mat-form-field class="mb-1">
<input matInput placeholder="Address">
</mat-form-field>
......
src/app/components/search/operation-log/operation-log.component.html
......@@ -6,6 +6,7 @@
</ng-template>
<mat-form-field class="pr-1">
<mat-select placeholder="Action Type">
<mat-option>--</mat-option>
<mat-option value="Login">Login</mat-option>
<mat-option value="Change-Password">Change-Password</mat-option>
</mat-select>
......@@ -28,10 +29,40 @@
</mat-form-field>
<button mat-raised-button color="primary">Search</button>
</mat-expansion-panel>
<ngx-datatable class="material" [rows]="rows" [columns]="[
{name:'Username'},
{name:'Action Type'},
{name:'Remote Ip'},
{name:'CreateTime'},
{name:'Remark'}]" [columnMode]="'force'" [headerHeight]="50" [footerHeight]="50" [rowHeight]="'auto'" [limit]="10">
</ngx-datatable>
\ No newline at end of file
<div class="mat-box-shadow">
<ngx-datatable class="material bg-white" [columnMode]="'force'" [headerHeight]="50" [footerHeight]="50"
[rowHeight]="50" [limit]="10" [rows]="operationDataSource" [columns]="columns">
<ngx-datatable-column name="Username">
<ng-template let-row="row" ngx-datatable-cell-template>
{{ row?.userName }}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Action Type">
<ng-template let-row="row" ngx-datatable-cell-template>
{{ row?.action }}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Remote Ip">
<ng-template let-row="row" ngx-datatable-cell-template>
{{ row?.remoteIp }}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Create Time">
<ng-template let-row="row" ngx-datatable-cell-template>
{{ row?.createTime }}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Remark">
<ng-template let-row="row" ngx-datatable-cell-template>
{{ row?.remark }}
</ng-template>
</ngx-datatable-column>
</ngx-datatable>
</div>
\ No newline at end of file
src/app/components/search/operation-log/operation-log.component.ts
......@@ -7,9 +7,88 @@ import { Component, OnInit } from '@angular/core';
})
export class OperationLogComponent implements OnInit {
operationDataSource = OPERATION_DATA;
constructor() { }
ngOnInit() {
}
}
export interface OperationDataElement {
userName: string;
action: string;
remoteIp:string;
createTime: string
remark: string
}
const OPERATION_DATA: OperationDataElement[] = [
{
userName: "test",
action:"test user login",
remoteIp:"0.0.0.0",
createTime: "13-12-1992 00:00:0000",
remark: "operator logged in"
},{
userName: "test",
action:"test user login",
remoteIp:"0.0.0.0",
createTime: "13-12-1992 00:00:0000",
remark: "operator logged in"
},{
userName: "test",
action:"test user login",
remoteIp:"0.0.0.0",
createTime: "13-12-1992 00:00:0000",
remark: "operator logged in"
},{
userName: "test",
action:"test user login",
remoteIp:"0.0.0.0",
createTime: "13-12-1992 00:00:0000",
remark: "operator logged in"
},{
userName: "test",
action:"test user login",
remoteIp:"0.0.0.0",
createTime: "13-12-1992 00:00:0000",
remark: "operator logged in"
},{
userName: "test",
action:"test user login",
remoteIp:"0.0.0.0",
createTime: "13-12-1992 00:00:0000",
remark: "operator logged in"
},{
userName: "test",
action:"test user login",
remoteIp:"0.0.0.0",
createTime: "13-12-1992 00:00:0000",
remark: "operator logged in"
},{
userName: "test",
action:"test user login",
remoteIp:"0.0.0.0",
createTime: "13-12-1992 00:00:0000",
remark: "operator logged in"
},{
userName: "test",
action:"test user login",
remoteIp:"0.0.0.0",
createTime: "13-12-1992 00:00:0000",
remark: "operator logged in"
},{
userName: "test",
action:"test user login",
remoteIp:"0.0.0.0",
createTime: "13-12-1992 00:00:0000",
remark: "operator logged in"
},{
userName: "test",
action:"test user login",
remoteIp:"0.0.0.0",
createTime: "13-12-1992 00:00:0000",
remark: "operator logged in"
},
];
src/app/components/search/transfer-history/transfer-history.component.html
......@@ -6,6 +6,7 @@
</ng-template>
<mat-form-field class="pr-1">
<mat-select placeholder="Transaction Type">
<mat-option>--</mat-option>
<mat-option value="MW > PT">MW > PT</mat-option>
<mat-option value="PT > MW">PT > MW</mat-option>
</mat-select>
......@@ -28,13 +29,56 @@
</mat-form-field>
<button mat-raised-button color="primary">Search</button>
</mat-expansion-panel>
<ngx-datatable class="material" [rows]="rows" [columns]="[
{name:'Transfer ID'},
{name:'Username'},
{name:'Transaction Type'},
{name:'Amount'},
{name:'Before'},
{name:'After'},
{name:'CreateTime'},
{name:'Remark'}]" [columnMode]="'force'" [headerHeight]="50" [footerHeight]="50" [rowHeight]="'auto'" [limit]="10">
</ngx-datatable>
\ No newline at end of file
<div class="mat-box-shadow">
<ngx-datatable class="material bg-white" [columnMode]="'force'" [headerHeight]="50" [footerHeight]="50"
[rowHeight]="50" [limit]="10" [rows]="historyDataSource" [columns]="columns">
<ngx-datatable-column name="Transfer ID">
<ng-template let-row="row" ngx-datatable-cell-template>
{{ row?.transferId }}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Username">
<ng-template let-row="row" ngx-datatable-cell-template>
{{ row?.userName }}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Transaction Type">
<ng-template let-row="row" ngx-datatable-cell-template>
{{ row?.transferType }}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Amount">
<ng-template let-row="row" ngx-datatable-cell-template>
{{ row?.amount }}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Before">
<ng-template let-row="row" ngx-datatable-cell-template>
{{ row?.credit }}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="After">
<ng-template let-row="row" ngx-datatable-cell-template>
{{ row?.newCredit }}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Create Time">
<ng-template let-row="row" ngx-datatable-cell-template>
{{ row?.createTime }}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Remark">
<ng-template let-row="row" ngx-datatable-cell-template>
{{ row?.remark }}
</ng-template>
</ngx-datatable-column>
</ngx-datatable>
</div>
\ No newline at end of file
src/app/components/search/transfer-history/transfer-history.component.ts
......@@ -6,6 +6,7 @@ import { Component, OnInit } from '@angular/core';
styleUrls: ['./transfer-history.component.scss']
})
export class TransferHistoryComponent implements OnInit {
historyDataSource = HISTORY_DATA;
constructor() { }
......@@ -13,3 +14,116 @@ export class TransferHistoryComponent implements OnInit {
}
}
export interface HistoryDataElement {
transferId: number,
userName: string;
transferType: string;
amount: number;
credit: number;
newCredit: number;
createTime: string
remark: string
}
const HISTORY_DATA: HistoryDataElement[] = [
{
transferId: 1,
userName: "test",
transferType: 'wechat',
amount: 10.00,
credit: 20,
newCredit: 30,
createTime: "13-12-1992 00:00:0000",
remark: "wechat transfer"
}, {
transferId: 2,
userName: "test",
transferType: 'wechat',
amount: 10.00,
credit: 20,
newCredit: 30,
createTime: "13-12-1992 00:00:0000",
remark: "wechat transfer"
}, {
transferId: 3,
userName: "test",
transferType: 'wechat',
amount: 10.00,
credit: 20,
newCredit: 30,
createTime: "13-12-1992 00:00:0000",
remark: "wechat transfer"
}, {
transferId: 4,
userName: "test",
transferType: 'wechat',
amount: 10.00,
credit: 20,
newCredit: 30,
createTime: "13-12-1992 00:00:0000",
remark: "wechat transfer"
}, {
transferId: 5,
userName: "test",
transferType: 'wechat',
amount: 10.00,
credit: 20,
newCredit: 30,
createTime: "13-12-1992 00:00:0000",
remark: "wechat transfer"
},{
transferId: 6,
userName: "test",
transferType: 'wechat',
amount: 10.00,
credit: 20,
newCredit: 30,
createTime: "13-12-1992 00:00:0000",
remark: "wechat transfer"
},{
transferId: 7,
userName: "test",
transferType: 'wechat',
amount: 10.00,
credit: 20,
newCredit: 30,
createTime: "13-12-1992 00:00:0000",
remark: "wechat transfer"
},{
transferId: 8,
userName: "test",
transferType: 'wechat',
amount: 10.00,
credit: 20,
newCredit: 30,
createTime: "13-12-1992 00:00:0000",
remark: "wechat transfer"
},{
transferId: 9,
userName: "test",
transferType: 'wechat',
amount: 10.00,
credit: 20,
newCredit: 30,
createTime: "13-12-1992 00:00:0000",
remark: "wechat transfer"
},{
transferId: 10,
userName: "test",
transferType: 'wechat',
amount: 10.00,
credit: 20,
newCredit: 30,
createTime: "13-12-1992 00:00:0000",
remark: "wechat transfer"
},{
transferId: 11,
userName: "test",
transferType: 'wechat',
amount: 10.00,
credit: 20,
newCredit: 30,
createTime: "13-12-1992 00:00:0000",
remark: "wechat transfer"
},
];
src/app/services/route-parts/route-parts.service.ts
......@@ -17,7 +17,7 @@ export class RoutePartsService {
ngOnInit() {
}
generateRouteParts(snapshot: ActivatedRouteSnapshot): IRoutePart[] {debugger
generateRouteParts(snapshot: ActivatedRouteSnapshot): IRoutePart[] {
var routeParts = <IRoutePart[]>[];
if (snapshot) {
if (snapshot.firstChild) {
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!