Skip to content

Praful Makani / bo-livebillionbet-ui

Go to a project
Commit 7b34ad66 by Ajit Thakor
Options

added operator change password & validations

1 parent cfbce1e8
Inline Side-by-side
Showing with 188 additions and 45 deletions
src/app/app.module.ts
...@@ -3,7 +3,7 @@ import { BidiModule } from '@angular/cdk/bidi'; ...@@ -3,7 +3,7 @@ import { BidiModule } from '@angular/cdk/bidi';
import { HttpClient, HttpClientModule } from '@angular/common/http'; import { HttpClient, HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { FlexLayoutModule } from '@angular/flex-layout'; import { FlexLayoutModule } from '@angular/flex-layout';
import { FormsModule } from '@angular/forms'; import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { ChartsModule } from 'ng2-charts/ng2-charts'; import { ChartsModule } from 'ng2-charts/ng2-charts';
import { MatButtonModule, MatCardModule, MatCheckboxModule, MatIconModule, MatListModule, MatMenuModule, MatProgressBarModule, MatSelectModule, MatSidenavModule, MatSlideToggleModule, MatTabsModule, MatToolbarModule, MatDialogModule, MatInputModule } from '@angular/material'; import { MatButtonModule, MatCardModule, MatCheckboxModule, MatIconModule, MatListModule, MatMenuModule, MatProgressBarModule, MatSelectModule, MatSidenavModule, MatSlideToggleModule, MatTabsModule, MatToolbarModule, MatDialogModule, MatInputModule } from '@angular/material';
import { BrowserModule } from '@angular/platform-browser'; import { BrowserModule } from '@angular/platform-browser';
...@@ -50,6 +50,7 @@ const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = { ...@@ -50,6 +50,7 @@ const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
BrowserAnimationsModule, BrowserAnimationsModule,
RouterModule.forRoot(AppRoutes), RouterModule.forRoot(AppRoutes),
FormsModule, FormsModule,
ReactiveFormsModule,
HttpClientModule, HttpClientModule,
TranslateModule.forRoot({ TranslateModule.forRoot({
loader: { loader: {
......
src/app/components/dashboard/dashboard.component.html
...@@ -54,7 +54,7 @@ ...@@ -54,7 +54,7 @@
<!-- bar Player | Affiliates --> <!-- bar Player | Affiliates -->
<div fxFlex.gt-sm="50" fxFlex.gt-xs="30" fxFlex="100"> <div fxFlex.gt-sm="50" fxFlex.gt-xs="30" fxFlex="100">
<mat-card> <mat-card>
<mat-card-title>Playesrs | Affiliates</mat-card-title> <mat-card-title>Players | Affiliates</mat-card-title>
<!-- <mat-card-subtitle>Playesrs | Affiliates</mat-card-subtitle> --> <!-- <mat-card-subtitle>Playesrs | Affiliates</mat-card-subtitle> -->
<mat-card-content> <mat-card-content>
<canvas height="200" baseChart class="chart" <canvas height="200" baseChart class="chart"
...@@ -70,8 +70,7 @@ ...@@ -70,8 +70,7 @@
<!-- line Payment -> Deposits | Withdrawals --> <!-- line Payment -> Deposits | Withdrawals -->
<div fxFlex.gt-sm="50" fxFlex.gt-xs="30" fxFlex="100"> <div fxFlex.gt-sm="50" fxFlex.gt-xs="30" fxFlex="100">
<mat-card> <mat-card>
<mat-card-title>Payment</mat-card-title> <mat-card-title>Deposits | Withdrawals</mat-card-title>
<mat-card-subtitle>Deposits | Withdrawals</mat-card-subtitle>
<mat-card-content> <mat-card-content>
<canvas height="200" baseChart class="chart" <canvas height="200" baseChart class="chart"
[datasets]="lineChartData" [datasets]="lineChartData"
......
src/app/components/operators/add-operator-dialog/add-operator-dialog.component.ts
import { Component, OnInit, Inject } from '@angular/core'; import { Component, Inject, OnInit } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material'; import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms'; import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
import { CustomValidators } from 'ng2-validation'; import { CustomValidators } from 'ng2-validation';
@Component({ @Component({
......
src/app/components/payments/dialog/dialog.component.html 0 → 100644
<h1 matDialogTitle>Withdraw</h1>
<form [formGroup]="form">
<div mat-dialog-content>
<mat-form-field>
<input matInput placeholder="Remark" [formControl]="form.controls['remark']" required>
<mat-error *ngIf="form.controls['remark'].hasError('required') && form.controls['remark'].touched"
class="mat-text-warn">You must include remark.</mat-error>
</mat-form-field>
</div>
<br>
<div mat-dialog-actions>
<button type="button" mat-raised-button color="primary" [disabled]="!form.valid">Submit{{ btn_name}}</button>
&nbsp;
<span fxFlex></span>
<button mat-raised-button color="accent" (click)="dialogRef.close(false)">No Thanks!</button>
</div>
</form>
\ No newline at end of file
src/app/components/payments/dialog/dialog.component.ts 0 → 100644
import { Component, OnInit, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
import { Validators, FormBuilder, FormGroup } from '@angular/forms';
@Component({
selector: 'app-dialog',
templateUrl: './dialog.component.html',
styleUrls: ['./dialog.component.scss']
})
export class DialogComponent implements OnInit {
public form: FormGroup;
constructor(public dialogRef: MatDialogRef<DialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: any, private fb: FormBuilder) {
}
ngOnInit() {
this.form = this.fb.group({
remark: [null, Validators.compose([Validators.required])],
});
}
}
src/app/components/payments/payments.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatButtonModule, MatButtonToggleModule, MatCardModule, MatDatepickerModule, MatExpansionModule, MatIconModule, MatInputModule, MatNativeDateModule, MatSelectModule, MatToolbarModule, MatTooltipModule } from '@angular/material';
import { NgxDatatableModule } from '@swimlane/ngx-datatable'; import { NgxDatatableModule } from '@swimlane/ngx-datatable';
import { MatTooltipModule,MatCardModule,MatInputModule, MatExpansionModule, MatDatepickerModule, MatNativeDateModule, MatSelectModule, MatButtonModule, MatButtonToggleModule, MatIconModule } from '@angular/material';
import { PaymentsRoutingModule } from './payments-routing.module';
import { DepositsComponent } from './deposits/deposits.component'; import { DepositsComponent } from './deposits/deposits.component';
import { DialogComponent } from './dialog/dialog.component';
import { PaymentsRoutingModule } from './payments-routing.module';
import { WithdrawalsComponent } from './withdrawals/withdrawals.component'; import { WithdrawalsComponent } from './withdrawals/withdrawals.component';
@NgModule({ @NgModule({
...@@ -20,8 +22,17 @@ import { WithdrawalsComponent } from './withdrawals/withdrawals.component'; ...@@ -20,8 +22,17 @@ import { WithdrawalsComponent } from './withdrawals/withdrawals.component';
MatButtonToggleModule, MatButtonToggleModule,
MatCardModule, MatCardModule,
MatIconModule, MatIconModule,
MatTooltipModule MatTooltipModule,
MatToolbarModule,
ReactiveFormsModule,
FormsModule
], ],
declarations: [DepositsComponent, WithdrawalsComponent] declarations: [
DepositsComponent,
WithdrawalsComponent,
DialogComponent],
entryComponents: [
DialogComponent
]
}) })
export class PaymentsModule { } export class PaymentsModule { }
src/app/components/payments/withdrawals/withdrawals.component.html
...@@ -105,12 +105,12 @@ ...@@ -105,12 +105,12 @@
<ngx-datatable-column name="Action"> <ngx-datatable-column name="Action">
<ng-template let-row="row" let-value="value" ngx-datatable-cell-template> <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
<button id="modifyButton" matTooltip="Execute" class="mibutton24" mat-icon-button mat-button-sm <button id="execute" matTooltip="Execute" class="mibutton24" mat-icon-button mat-button-sm
(click)="openEditDialog()" [attr.aria-label]="edit" color="primary"> (click)="btn_name = 'execute'; openDialog()" [attr.aria-label]="edit" color="primary">
<mat-icon class="mi16">check_circle</mat-icon> <mat-icon class="mi16">check_circle</mat-icon>
</button> </button>
<button id="lockedButton" matTooltip="Cancel" class="mibutton24" mat-icon-button mat-button-sm <button id="cancel" matTooltip="Cancel" class="mibutton24" mat-icon-button mat-button-sm
(click)="openDeleteDialog()" [attr.aria-label]="delete" color="warn"> (click)="btn_name = 'cancel'; openDialog()" [attr.aria-label]="delete" color="warn">
<mat-icon class="mi16">cancel</mat-icon> <mat-icon class="mi16">cancel</mat-icon>
</button> </button>
</ng-template> </ng-template>
......
src/app/components/payments/withdrawals/withdrawals.component.ts
import { Component, OnInit } from '@angular/core'; import { Component, OnInit, TemplateRef, ViewChild, Inject } from '@angular/core';
import { MatDialogConfig, MatDialogRef, MatDialog } from '@angular/material';
import { DOCUMENT } from '@angular/common';
import { DialogComponent } from '../dialog/dialog.component';
const defaultDialogConfig = new MatDialogConfig();
@Component({ @Component({
selector: 'app-withdrawals', selector: 'app-withdrawals',
...@@ -6,12 +11,60 @@ import { Component, OnInit } from '@angular/core'; ...@@ -6,12 +11,60 @@ import { Component, OnInit } from '@angular/core';
styleUrls: ['./withdrawals.component.scss'] styleUrls: ['./withdrawals.component.scss']
}) })
export class WithdrawalsComponent implements OnInit { export class WithdrawalsComponent implements OnInit {
withdrawDataSOurce = WITHDRAW_DATA; withdrawDataSOurce = WITHDRAW_DATA;
constructor() { } dialogRef: MatDialogRef<any> | null;
lastAfterClosedResult: string;
lastBeforeCloseResult: string;
actionsAlignment: string;
btn_name: 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: ''
},
};
@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');
});
}
ngOnInit() { ngOnInit() {
} }
openDialog() {
console.log(this.btn_name)
this.dialogRef = this.dialog.open(DialogComponent, this.config);
this.dialogRef.beforeClose().subscribe((result: string) => {
this.lastBeforeCloseResult = result;
});
this.dialogRef.afterClosed().subscribe((result: string) => {
this.lastAfterClosedResult = result;
this.dialogRef = null;
});
}
} }
export interface WithdrawDataElement { export interface WithdrawDataElement {
withdrawId: string; withdrawId: string;
......
src/app/components/profile/profile.component.html
<mat-card> <mat-card>
<mat-toolbar color="primary">Operator profile</mat-toolbar> <mat-toolbar color="primary">Operator</mat-toolbar>
<mat-tab-group>
<mat-tab>
<ng-template matTabLabel>Profile</ng-template>
<mat-card-content> <mat-card-content>
<form fxLayout="column"> <form fxLayout="column">
<div fxLayout="row wrap"> <div fxLayout="row wrap">
...@@ -39,4 +42,51 @@ ...@@ -39,4 +42,51 @@
</mat-card-actions> </mat-card-actions>
</form> </form>
</mat-card-content> </mat-card-content>
</mat-tab>
<mat-tab>
<ng-template matTabLabel>Change Password</ng-template>
<mat-card-content>
<form [formGroup]="form" >
<div fxLayout="row wrap">
<div class="pb-1" fxLayoutGap="15px">
<mat-form-field fxFlex style="width: 250px">
<input matInput placeholder="User Name" [formControl]="form.controls['uname']" required>
<mat-error *ngIf="form.controls['uname'].hasError('required') && form.controls['uname'].touched"
class="mat-text-warn">You must include username.</mat-error>
</mat-form-field>
<mat-form-field fxFlex style="width: 250px">
<input matInput placeholder="Old Password" type="password" [formControl]="form.controls['old_password']" required>
<mat-error
*ngIf="form.controls['old_password'].hasError('required') && form.controls['old_password'].touched"
class="mat-text-warn">You must include old password.</mat-error>
</mat-form-field>
</div>
</div>
<div fxLayout="row wrap">
<div class="pb-1" fxLayoutGap="15px">
<mat-form-field fxFlex style="width: 250px">
<input matInput placeholder="New Password" type="password" [formControl]="form.controls['new_password']"required>
<mat-error
*ngIf="form.controls['new_password'].hasError('required') && form.controls['new_password'].touched"
class="mat-text-warn">You must include new password.</mat-error>
</mat-form-field>
<mat-form-field fxFlex style="width: 250px">
<input matInput placeholder="Confirm Password" type="password" [formControl]="form.controls['confirm_password']"required>
<mat-error
*ngIf="form.controls['confirm_password'].hasError('required') && form.controls['confirm_password'].touched"
class="mat-text-warn">You must include confirm password.</mat-error>
<mat-error *ngIf="form.controls['confirm_password'].errors?.equalTo" class="mat-text-warn">Passwords
do not match.</mat-error>
</mat-form-field>
</div>
</div>
<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-content>
</mat-tab>
</mat-tab-group>
</mat-card> </mat-card>
\ No newline at end of file
src/app/components/profile/profile.component.spec.ts deleted 100644 → 0
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ProfileComponent } from './profile.component';
describe('ProfileComponent', () => {
let component: ProfileComponent;
let fixture: ComponentFixture<ProfileComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ ProfileComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ProfileComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/components/profile/profile.component.ts
import { Component, Inject, OnInit } from '@angular/core'; import { Component, Inject, OnInit } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material'; import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
import { CustomValidators } from 'ng2-validation';
const new_password = new FormControl('', Validators.required);
const confirm_password = new FormControl('', CustomValidators.equalTo(new_password));
@Component({ @Component({
selector: 'app-profile', selector: 'app-profile',
...@@ -8,12 +14,20 @@ import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material'; ...@@ -8,12 +14,20 @@ import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
}) })
export class ProfileComponent implements OnInit { export class ProfileComponent implements OnInit {
public form: FormGroup;
selectedRole = 'SUPERADMIN'; selectedRole = 'SUPERADMIN';
constructor(public dialogRef: MatDialogRef<ProfileComponent>, constructor(public dialogRef: MatDialogRef<ProfileComponent>,
@Inject(MAT_DIALOG_DATA) public data: any) { } @Inject(MAT_DIALOG_DATA) public data: any, private fb: FormBuilder) {
}
ngOnInit() { ngOnInit() {
this.form = this.fb.group({
uname: [null, Validators.compose([Validators.required])],
old_password: [null, Validators.compose([Validators.required])],
new_password: new_password,
confirm_password: confirm_password
});
} }
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!