Added ui for manage affiliate

src/app/app.component.ts

@@ -29,7 +29,7 @@ export class AppComponent implements OnInit{
     this.changePageTitle();
   }
   changePageTitle() {
-    this.router.events.filter(event => event instanceof NavigationEnd).subscribe((routeChange) => {debugger
+    this.router.events.filter(event => event instanceof NavigationEnd).subscribe((routeChange) => {
       var routeParts = this.routePartsService.generateRouteParts(this.activeRoute.snapshot);
       if (!routeParts.length)
         return this.title.setTitle(this.appTitle);

src/app/app.module.ts

@@ -46,7 +46,6 @@ import { AppRoutes } from './app.routing';
 import { AppComponent } from './app.component';
 import { BreadcrumbComponent } from './core/breadcrumb/breadcrumb.component';
 import { RoutePartsService } from './services/route-parts/route-parts.service';
-import { ManualBalanceAdjustmentComponent } from './components/dialog/manual-balance-adjustment/manual-balance-adjustment.component';
 
 export function createTranslateLoader(http: HttpClient) {
   return new TranslateHttpLoader(http, './assets/i18n/', '.json');

src/app/components/affiliates/add-affiliate-dialog/add-affiliate-dialog.component.html

+<mat-card>
+  <mat-toolbar color="primary">Add Affiliates</mat-toolbar>
+  <form [formGroup]="form">
+    <mat-card-content>
+      <div fxLayout="row wrap">
+        <div class="pb-1">
+          <mat-form-field fxFlex style="width: 30%">
+            <input matInput placeholder="First name" [formControl]="form.controls['fname']" required>
+            <mat-error
+              *ngIf="form.controls['fname'].hasError('required') && form.controls['fname'].touched">
+              You
+              must include a first name.</mat-error>
+            <mat-error class="mat-text-warn"
+              *ngIf="form.controls['fname'].hasError('minlength') && form.controls['fname'].touched">
+              Your
+              first name must be at least 5 characters long.</mat-error>
+            <mat-error class="mat-text-warn"
+              *ngIf="form.controls['fname'].hasError('maxlength') && form.controls['fname'].touched">
+              Your
+              first name cannot exceed 10 characters.</mat-error>
+          </mat-form-field>
+          <mat-form-field fxFlex style="width: 30%">
+            <input matInput placeholder="Last name" [formControl]="form.controls['lname']" required>
+            <mat-error
+              *ngIf="form.controls['lname'].hasError('required') && form.controls['lname'].touched"
+              class="mat-text-warn">You must include a last name.</mat-error>
+            <mat-error
+              *ngIf="form.controls['lname'].hasError('minlength') && form.controls['lname'].touched"
+              class="mat-text-warn">Your last name must be at least 5 characters long.</mat-error>
+            <mat-error
+              *ngIf="form.controls['lname'].hasError('maxlength') && form.controls['lname'].touched"
+              class="mat-text-warn">Your last name cannot exceed 10 characters.</mat-error>
+          </mat-form-field>
+          <mat-form-field style="width: 30%">
+            <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 a user name.</mat-error>
+            <mat-error
+              *ngIf="form.controls['uname'].hasError('minlength') && form.controls['uname'].touched"
+              class="mat-text-warn">Your user name must be at least 5 characters long.</mat-error>
+            <mat-error
+              *ngIf="form.controls['uname'].hasError('maxlength') && form.controls['uname'].touched"
+              class="mat-text-warn">Your user name cannot exceed 10 characters.</mat-error>
+          </mat-form-field>
+        </div>
+      </div>
+      <div fxLayout="row wrap">
+        <div class="pb-1">
+          <mat-form-field style="width: 30%">
+            <input matInput placeholder="Password" [formControl]="form.controls['password']" type="password"
+              required>
+            <mat-error
+              *ngIf="form.controls['password'].hasError('required') && form.controls['password'].touched"
+              class="mat-text-warn ">You must include password.</mat-error>
+          </mat-form-field>
+          <mat-form-field style="width: 30%">
+            <input matInput placeholder="Email address" [formControl]="form.controls['email']" type="email"
+              required>
+            <mat-error
+              *ngIf="form.controls['email'].hasError('required') && form.controls['email'].touched"
+              class="mat-text-warn">You must include an email address.</mat-error>
+            <mat-error
+              *ngIf="form.controls['email'].errors?.email && form.controls['email'].touched"
+              class="mat-text-warn">You
+              must include a valid email address.</mat-error>
+          </mat-form-field>
+          <mat-form-field style="width: 30%">
+            <input matInput placeholder="Mobile" required>
+          </mat-form-field>
+        </div>
+      </div>
+      <div fxLayout="row wrap">
+        <div class="mb-1">
+          <mat-form-field style="width: 90%">
+            <textarea matInput maxlength="256" placeholder="Address" matTextareaAutosize matAutosizeMinRows="2"
+              matAutosizeMaxRows="5"></textarea>
+          </mat-form-field>
+        </div>
+        <div class="mb-1">
+          <label>Gender</label>
+          <mat-radio-group>
+            <mat-radio-button value="male">Male</mat-radio-button>
+            <mat-radio-button value="female">Female</mat-radio-button>
+          </mat-radio-group>
+        </div>
+      </div>
+    </mat-card-content>
+    <div>
+      <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>
+    </div>
+  </form>
+</mat-card>
\ No newline at end of file

src/app/components/affiliates/add-affiliate-dialog/add-affiliate-dialog.component.ts

+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({
+  selector: 'app-add-affiliate-dialog',
+  templateUrl: './add-affiliate-dialog.component.html',
+  styleUrls: ['./add-affiliate-dialog.component.scss']
+})
+export class AddAffiliateDialogComponent implements OnInit {
+
+  public form: FormGroup;
+
+  constructor(public dialogRef: MatDialogRef<AddAffiliateDialogComponent>,
+    @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])],
+      password: [null, Validators.compose([Validators.required])],
+    });
+  }
+}

src/app/components/affiliates/affiliates.module.ts

 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { CommonModule } from '@angular/common';
-import { MatRadioModule,MatTooltipModule,MatCardModule,MatToolbarModule, MatTabsModule, MatSlideToggleModule, MatIconModule, MatInputModule, MatExpansionModule, MatDatepickerModule, MatNativeDateModule, MatSelectModule, MatButtonModule, MatButtonToggleModule } from '@angular/material';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import {  MatStepperModule,MatTooltipModule,MatToolbarModule,MatRadioModule,MatSlideToggleModule, MatInputModule, MatExpansionModule, MatDatepickerModule, MatNativeDateModule, MatSelectModule, MatButtonModule, MatButtonToggleModule, MatTabsModule, MatIconModule, MatCardModule } from '@angular/material';
+
 import { NgxDatatableModule } from '@swimlane/ngx-datatable';
 import { AffiliateRoutes } from './affiliates.routing';
 import { ViewAffiliateComponent } from './view-affiliates/view-affiliate.component';
 import { DeleteDialogComponent } from './delete-dialog/delete-dialog.component';
 import { EditDialogComponent } from './edit-dialog/edit-dialog.component';
+import { AddAffiliateDialogComponent } from './add-affiliate-dialog/add-affiliate-dialog.component';
+import { AddAffiliateComponent } from './add-affiliate/add-affiliate.component';
 
 
 @NgModule({
@@ -27,16 +31,22 @@ import { EditDialogComponent } from './edit-dialog/edit-dialog.component';
     MatTabsModule,
     MatCardModule,
     MatTooltipModule,
-    MatRadioModule
+    ReactiveFormsModule,
+    MatRadioModule,
+    FormsModule,
+    MatStepperModule
   ],
   declarations: [
     ViewAffiliateComponent,
     EditDialogComponent,
-    DeleteDialogComponent
+    DeleteDialogComponent,
+    AddAffiliateDialogComponent,
+    AddAffiliateComponent
   ],
   entryComponents: [
     EditDialogComponent,
-    DeleteDialogComponent
+    DeleteDialogComponent,
+    AddAffiliateDialogComponent
   ]
 })
 

src/app/components/affiliates/affiliates.routing.ts

@@ -4,6 +4,6 @@ export const AffiliateRoutes: Routes = [
   {
     path: 'view-affiliates',
     component: ViewAffiliateComponent,
-    data: { title: 'MANAGE-AFFILIATES', breadcrumb: 'VIEW-AFFILIATES'}
-  },
+    data: { title: 'MANAGE-AFFILIATES', breadcrumb: 'VIEW-AFFILIATES' }
+  }
 ];

src/app/components/affiliates/view-affiliates/view-affiliate.component.ts

@@ -3,6 +3,7 @@ import { MatDialogConfig, MatDialog, MatDialogRef } from '@angular/material';
 import { DOCUMENT } from '@angular/platform-browser';
 import { DeleteDialogComponent } from '../delete-dialog/delete-dialog.component';
 import { EditDialogComponent } from '../edit-dialog/edit-dialog.component';
+import { AddAffiliateDialogComponent } from '../add-affiliate-dialog/add-affiliate-dialog.component';
 
 const defaultDialogConfig = new MatDialogConfig();
 
@@ -18,6 +19,20 @@ export class ViewAffiliateComponent {
   lastBeforeCloseResult: string;
   actionsAlignment: string;
   
+  addAffiliateConfig = {
+    disableClose: true,
+    panelClass: 'custom-overlay-pane-class',
+    hasBackdrop: true,
+    backdropClass: '',
+    width: '800px',
+    height: '500px',
+    position: {
+      top: '',
+      bottom: '',
+      left: '',
+      right: ''
+    },
+  };
   config = {
     disableClose: true,
     panelClass: 'custom-overlay-pane-class',
@@ -58,6 +73,16 @@ export class ViewAffiliateComponent {
       doc.body.classList.remove('no-scroll');
     });
   }
+  addAffiliateDialog() {
+    this.dialogRef = this.dialog.open(AddAffiliateDialogComponent, this.addAffiliateConfig);
+    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) => {

src/app/components/operators/add-operator-dialog/add-operator-dialog.component.ts

@@ -22,7 +22,6 @@ export class AddOperatorDialogComponent implements OnInit {
       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/payments/payments-routing.module.ts

@@ -6,10 +6,12 @@ import { WithdrawalsComponent } from './withdrawals/withdrawals.component';
 const routes: Routes = [
   {
     path: 'deposits',
-      component: DepositsComponent
+    component: DepositsComponent,
+    data: { title: 'MANAGE-PAYMENTS', breadcrumb: 'DEPOSITS' }
   }, {
     path: 'withdrawals',
-      component: WithdrawalsComponent
+    component: WithdrawalsComponent,
+    data: { title: 'MANAGE-PAYMENTS', breadcrumb: 'WITHDRAWALS' }
   }];
 
 @NgModule({

src/app/core/breadcrumb/breadcrumb.component.ts

@@ -15,7 +15,6 @@ export class BreadcrumbComponent implements OnInit {
     private routePartsService: RoutePartsService, 
     private activeRoute: ActivatedRoute
   ) {
-    debugger
     this.router.events.filter(event => event instanceof NavigationEnd).subscribe((routeChange) => {
       this.routeParts = this.routePartsService.generateRouteParts(this.activeRoute.snapshot);
       // generate url from parts
@@ -27,7 +26,6 @@ export class BreadcrumbComponent implements OnInit {
           item.url += `/${urlSegment.path}`
         });
         if(i === 0) {
-          debugger
           return item;
         }
         // prepend previous part to current part