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 227 additions and 84 deletions
src/app/app.module.ts
......@@ -3,7 +3,7 @@ import { BidiModule } from '@angular/cdk/bidi';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
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 { MatButtonModule, MatCardModule, MatCheckboxModule, MatIconModule, MatListModule, MatMenuModule, MatProgressBarModule, MatSelectModule, MatSidenavModule, MatSlideToggleModule, MatTabsModule, MatToolbarModule, MatDialogModule, MatInputModule } from '@angular/material';
import { BrowserModule } from '@angular/platform-browser';
......@@ -50,6 +50,7 @@ const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
BrowserAnimationsModule,
RouterModule.forRoot(AppRoutes),
FormsModule,
ReactiveFormsModule,
HttpClientModule,
TranslateModule.forRoot({
loader: {
......
src/app/components/dashboard/dashboard.component.html
......@@ -54,7 +54,7 @@
<!-- bar Player | Affiliates -->
<div fxFlex.gt-sm="50" fxFlex.gt-xs="30" fxFlex="100">
<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-content>
<canvas height="200" baseChart class="chart"
......@@ -70,8 +70,7 @@
<!-- line Payment -> Deposits | Withdrawals -->
<div fxFlex.gt-sm="50" fxFlex.gt-xs="30" fxFlex="100">
<mat-card>
<mat-card-title>Payment</mat-card-title>
<mat-card-subtitle>Deposits | Withdrawals</mat-card-subtitle>
<mat-card-title>Deposits | Withdrawals</mat-card-title>
<mat-card-content>
<canvas height="200" baseChart class="chart"
[datasets]="lineChartData"
......
src/app/components/operators/add-operator-dialog/add-operator-dialog.component.ts
import { Component, OnInit, Inject } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
import { Component, Inject, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
import { CustomValidators } from 'ng2-validation';
@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 { 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 { 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 { DialogComponent } from './dialog/dialog.component';
import { PaymentsRoutingModule } from './payments-routing.module';
import { WithdrawalsComponent } from './withdrawals/withdrawals.component';
@NgModule({
......@@ -20,8 +22,17 @@ import { WithdrawalsComponent } from './withdrawals/withdrawals.component';
MatButtonToggleModule,
MatCardModule,
MatIconModule,
MatTooltipModule
MatTooltipModule,
MatToolbarModule,
ReactiveFormsModule,
FormsModule
],
declarations: [DepositsComponent, WithdrawalsComponent]
declarations: [
DepositsComponent,
WithdrawalsComponent,
DialogComponent],
entryComponents: [
DialogComponent
]
})
export class PaymentsModule { }
src/app/components/payments/withdrawals/withdrawals.component.html
......@@ -105,12 +105,12 @@
<ngx-datatable-column name="Action">
<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
(click)="openEditDialog()" [attr.aria-label]="edit" color="primary">
<button id="execute" matTooltip="Execute" class="mibutton24" mat-icon-button mat-button-sm
(click)="btn_name = 'execute'; openDialog()" [attr.aria-label]="edit" color="primary">
<mat-icon class="mi16">check_circle</mat-icon>
</button>
<button id="lockedButton" matTooltip="Cancel" class="mibutton24" mat-icon-button mat-button-sm
(click)="openDeleteDialog()" [attr.aria-label]="delete" color="warn">
<button id="cancel" matTooltip="Cancel" class="mibutton24" mat-icon-button mat-button-sm
(click)="btn_name = 'cancel'; openDialog()" [attr.aria-label]="delete" color="warn">
<mat-icon class="mi16">cancel</mat-icon>
</button>
</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({
selector: 'app-withdrawals',
......@@ -6,12 +11,60 @@ import { Component, OnInit } from '@angular/core';
styleUrls: ['./withdrawals.component.scss']
})
export class WithdrawalsComponent implements OnInit {
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() {
}
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 {
withdrawId: string;
......
src/app/components/profile/profile.component.html
<mat-card>
<mat-toolbar color="primary">Operator profile</mat-toolbar>
<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-content>
<mat-toolbar color="primary">Operator</mat-toolbar>
<mat-tab-group>
<mat-tab>
<ng-template matTabLabel>Profile</ng-template>
<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-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>
\ 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 { 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({
selector: 'app-profile',
......@@ -8,12 +14,20 @@ import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
})
export class ProfileComponent implements OnInit {
public form: FormGroup;
selectedRole = 'SUPERADMIN';
constructor(public dialogRef: MatDialogRef<ProfileComponent>,
@Inject(MAT_DIALOG_DATA) public data: any) { }
@Inject(MAT_DIALOG_DATA) public data: any, private fb: FormBuilder) {
}
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!