Merge branch 'adarsh' into 'master'

src/app/app-routing.module.ts

@@ -6,7 +6,8 @@ const routes: Routes = [
 		path: '', 
 		redirectTo: 'start/login', 
 		pathMatch: 'full'
-	 }
+	 },
+	//  {path: '**', redirectTo: '/start/login'}
 ];
 
 @NgModule({

src/app/checker/addforex/addforex.component.html

@@ -8,7 +8,7 @@
       <h4>Forex Delivery Service Provider</h4>
     </div>
     <div class="col-md-6 textRight relative">
-        <button class="logout">
+        <button class="logout" (click)="logout()">
             <img src="assets/images/asset_logout.png">
           Logout</button>
         <img src="assets/images/asset_logo1.png">

src/app/checker/addforex/addforex.component.ts

@@ -126,4 +126,8 @@ export class AddforexComponent implements OnInit {
       }, 3000);
     }
 
+    logout() {
+      this.service.logout();
+    }
+
 }

src/app/checker/addprovider/addprovider.component.html

@@ -8,7 +8,7 @@
       <h4>Forex Delivery Service Provider</h4>
     </div>
     <div class="col-md-6 textRight relative">
-        <button class="logout">
+        <button class="logout" (click)="logout()">
             <img src="assets/images/asset_logout.png">
           Logout</button>
         <img src="assets/images/asset_logo1.png">

src/app/checker/addprovider/addprovider.component.ts

@@ -99,4 +99,8 @@ export class AddproviderComponent implements OnInit {
     this.router.navigate(['/checker/delivery']);
   }
 
+  logout() {
+    this.service.logout();
+  }
+
 }

src/app/checker/changepin/changepin.component.html

@@ -56,8 +56,14 @@
              </div>
           </div>
        </div>
-       <div *ngIf="resetError" class="s_validation">{{resetMsg}}</div>
-       <div *ngIf="!resetError && !error && loginSubmit" class="s_validation">Passwod Updated Successfully</div>
+       <div class="alert alert-danger alert-dismissible" *ngIf="resetError">
+            <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
+            <strong>Warning!</strong> {{resetMsg}}
+        </div>
+       <div class="alert alert-success alert-dismissible" *ngIf="!resetError && !error && loginSubmit">
+            <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
+            <strong>Success!</strong> Password Updated Successfully
+          </div>
        <div class="login_btn_bay">
           <div class="row">
               <div class="col-md-6">

src/app/checker/checker.module.ts

@@ -10,7 +10,6 @@ import { AddproviderComponent} from './addprovider/addprovider.component';
 import { EditproviderComponent } from './editprovider/editprovider.component';
 import { ManageproviderComponent } from './manageprovider/manageprovider.component';
 import { HomeComponent } from './home/home.component';
-import { CurrencyComponent } from './currency/currency.component';
 import { ForexproviderComponent } from './forexprovider/forexprovider.component';
 import { ChangepinComponent } from './changepin/changepin.component';
 import { CurrencyAddComponent } from './currency-add/currency-add.component';
@@ -21,7 +20,7 @@ import { CurrencyListComponent } from './currency-list/currency-list.component';
 
 @NgModule({
   // tslint:disable-next-line:max-line-length
-  declarations: [IndexComponent, AddproviderComponent, EditproviderComponent, ManageproviderComponent, HomeComponent, CurrencyComponent, ForexproviderComponent, ChangepinComponent, CurrencyAddComponent, AddforexComponent, EditforexComponent, CurrencyEditComponent, CurrencyListComponent],
+  declarations: [IndexComponent, AddproviderComponent, EditproviderComponent, ManageproviderComponent, HomeComponent, ForexproviderComponent, ChangepinComponent, CurrencyAddComponent, AddforexComponent, EditforexComponent, CurrencyEditComponent, CurrencyListComponent],
   imports: [
     CommonModule,
     moduleRouting,

src/app/checker/checker.routing.ts

 // COMMON-ANGULAR-MODULES
 
-import { ModuleWithProviders } from '@angular/core'
+import { ModuleWithProviders } from '@angular/core';
 
 // ROUTING
 
 import { Routes, RouterModule } from '@angular/router';
 
+import { RoleGuard } from './../providers/role-guard.service';
+
 //IMPORTED-PAGE-COMPONENTS
 
 import { IndexComponent } from './index/index.component';
@@ -14,7 +16,6 @@ import { EditproviderComponent } from './editprovider/editprovider.component';
 import { ManageproviderComponent } from './manageprovider/manageprovider.component';
 import { ForexproviderComponent } from './forexprovider/forexprovider.component';
 import { HomeComponent } from './home/home.component';
-import { CurrencyComponent } from './currency/currency.component';
 import { ChangepinComponent } from './changepin/changepin.component';
 import { CurrencyAddComponent } from './currency-add/currency-add.component';
 import { AuthGuard } from './../providers/auth.guard';
@@ -35,7 +36,6 @@ const ModuleRoutes: Routes = [
 			{ path: 'provider_forex', component: AddforexComponent },
 			{ path: 'forex_edit/:id', component: EditforexComponent },
 			{ path: 'home', component: HomeComponent },
-			{ path: 'currency', component: CurrencyComponent },
 			{ path: 'changepin', component: ChangepinComponent },
 			{ path: 'currency_add', component: CurrencyAddComponent},
 			{ path: 'currency_edit/:id', component: CurrencyEditComponent},

src/app/checker/currency-add/currency-add.component.html

@@ -8,7 +8,7 @@
       <h4>Currency Management</h4>
     </div>
     <div class="col-md-6 textRight relative">
-        <button class="logout">
+        <button class="logout" (click)="logout()">
             <img src="assets/images/asset_logout.png">
           Logout</button>
         <img src="assets/images/asset_logo1.png">

src/app/checker/currency-add/currency-add.component.ts

@@ -94,4 +94,18 @@ currencyProcess() {
     console.log(input);
     return input;
     }
+
+    cancelClick() {
+      this.router.navigate(['/checker/currency_list']);
+    }
+
+    goToPage(path: any, data = null) {
+      console.log(data);
+      this.router.navigateByUrl(path, {queryParams: data});
+      document.body.scrollTop = document.documentElement.scrollTop = 0;
+    }
+
+    logout() {
+      this.service.logout();
+    }
 }

src/app/checker/currency-edit/currency-edit.component.html

@@ -8,7 +8,7 @@
       <h4>Currency Management</h4>
     </div>
     <div class="col-md-6 textRight relative">
-        <button class="logout">
+        <button class="logout" (click)="logout()">
             <img src="assets/images/asset_logout.png">
           Logout</button>
         <img src="assets/images/asset_logo1.png">

src/app/checker/currency-edit/currency-edit.component.ts

@@ -43,7 +43,7 @@ export class CurrencyEditComponent implements OnInit {
       const parm = decodeURIComponent(this.route.snapshot.params['id']);
     // tslint:disable-next-line:radix
       const id = parseInt(parm);
-      //this.getCurrency(id);
+      this.getCurrency(id);
       this.currencyForm = this.formBuilder.group({
         'name':  ['', Validators.compose([Validators.required])],
         'symbol':  ['', Validators.compose([Validators.required])],
@@ -119,7 +119,7 @@ export class CurrencyEditComponent implements OnInit {
             symbol: this.currency.symbol,
             rate: this.currency.rate,
             start_from: this.currency.start_from,
-            flag: this.currency.flag
+            flag: ''
           });
         } else {
           this.error = true;
@@ -140,4 +140,18 @@ export class CurrencyEditComponent implements OnInit {
       return ImageStorage + this.image_url;
     }
 
+    cancelClick() {
+      this.router.navigate(['/checker/currency_list']);
+    }
+
+    goToPage(path, data = null) {
+    console.log(data);
+    this.router.navigateByUrl(path, {queryParams: data});
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+  }
+
+  logout() {
+    this.service.logout();
+  }
+
 }

src/app/checker/currency-list/currency-list.component.html

@@ -4,10 +4,10 @@
 <header class="provider_header">
     <div class="row">
       <div class="col-md-6">
-        <h4>Forex Provider</h4>
+        <h4>Manage Currency</h4>
       </div>
       <div class="col-md-6 textRight relative">
-          <button class="logout">
+          <button class="logout" (click)="logout()">
               <img src="assets/images/asset_logout.png">
             Logout</button>
           <img src="assets/images/asset_logo1.png">
@@ -17,7 +17,7 @@
   </header>
 <section>
     <div class="provider_content">
-      <h3>Manage Forex Service Provider</h3>
+      <h3>Currency List</h3>
       <div class="provider_inner_content">
           <div class="table-responsive">   
               <div class="alert alert-danger alert-dismissible" *ngIf="error">
@@ -26,40 +26,34 @@
               </div>
               <div class="alert alert-success alert-dismissible" *ngIf="success">
                   <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
-                  <strong>Success!</strong> Forex provider removed successfully
+                  <strong>Success!</strong> Currency removed successfully
                 </div>      
               <table class="table">
                 <thead>
                   <tr>
-                    <th>Provider Name</th>
-                    <th>Location</th>
-                    <th>CR Manager</th>
-                    <th>CR ID</th>
-                    <th>Contact</th>
-                    <th>Phone</th>
-                    <th>Email ID</th>
+                    <th>Name</th>
+                    <th>symbol</th>
+                    <th>Rate</th>
+                    <th>Start from</th>
                     <th class="textRight">
-                      <button class="add" (click)="goToPage('checker/provider_forex')">+</button>
+                      <button class="add" (click)="goToPage('checker/currency_add')">+</button>
                     </th>
                   </tr>
                 </thead>
-                <tbody *ngIf="providerList; else noProvider">
-                  <tr *ngFor="let provider of providerList;">
-                    <td>{{provider.name | titlecase}}</td>
-                    <td>{{provider.location | titlecase}}</td>
-                    <td>{{provider.cr_manager | titlecase}}</td>
-                    <td>{{provider.cr_id}}</td>
-                    <td>{{provider.contact | titlecase}}</td>
-                    <td>{{provider.phone}}</td>
-                    <td>{{provider.email_id}}</td>
+                <tbody *ngIf="currencyList; else noCurrency">
+                  <tr *ngFor="let currency of currencyList;">
+                    <td>{{currency.name}}</td>
+                    <td>{{currency.symbol}}</td>
+                    <td>{{currency.rate}}</td>
+                    <td>{{currency.start_from}}</td>
                     <td class="textRight">
-                      <button class="edit_btn"(click)="editClick(provider.id)"></button>
-                      <button class="delete_btn" (click)="deleteClick(provider.id)"></button>
+                      <button class="edit_btn"(click)="editClick(currency.id)"></button>
+                      <button class="delete_btn" (click)="deleteClick(currency.id)"></button>
                     </td>
                   </tr>
                 </tbody>                
               </table>
-              <ng-template #noProvider></ng-template>
+              <ng-template #noCurrency></ng-template>
           </div>
       </div>
     </div>

src/app/checker/currency-list/currency-list.component.scss

+.provider_header{
+    background: #1a5c7c;
+    padding: 4px;
+    
+    h4{
+        margin:0px;
+        color: #fff;
+        padding: 20px;
+        font-weight: 400;
+        font-size:20px;
+    }
+
+    span{
+        position: absolute;
+        bottom:-30px;
+        right:15px;
+        font-size: 14px;
+        cursor: pointer;
+        z-index: 999;
+    }
+}
+
+
+.provider_content{
+    width:100%;
+    position: relative;
+
+    h3{
+        margin:0px;
+        padding:0px;
+        border-bottom: 1px solid #494949;
+        color: #464646;
+        font-size: 20px;
+        font-weight: 400;
+        padding: 15px;
+    }
+    .provider_inner_content{
+        width:100%;
+        padding-top: 40px;
+        padding-left: 20px;
+        padding-right: 20px;
+        .row{
+            padding-bottom: 40px;
+            .provider_data_content{
+                width:90%;
+                margin:0 auto;
+                .edit_delivery{
+                    color: #195c77;
+                    text-decoration: underline;
+                    cursor: pointer;
+                    font-weight: 500;
+                    position: relative;
+                    top:30px;
+                }
+                p{
+                    color: #464646;
+                    margin:0px;
+                    padding-bottom: 10px;
+                    font-weight: 500;
+                }
+                .provider_input{
+                    border:1px solid #b4b4b4;
+                    height:40px;
+                    padding-left: 10px;
+                    padding-right: 10px;
+                    width: 100%;
+                    &:focus{
+                        outline: none;
+                    }
+                }
+                .provider_pin{
+                    border:1px solid #b4b4b4;
+                    height:40px;
+                    width: calc(100% - 90%);
+                    margin-right: calc(100% - 92%);
+                    text-align: center;
+                    display: inline-block;
+                    border-radius: 10px;
+                    &:focus{
+                        outline: none;
+                    }
+                }
+            }
+            .edit_btn{
+                background: #d9d9d9;
+            color: #1a5d7a;
+            border-radius:20px;
+            height:40px;
+            padding-left: 4%;
+            padding-right:4%;
+            font-weight: 500;
+            margin:1%;
+            border:none;
+            &:hover{
+                outline: none;
+            }
+            &:focus{
+                outline:none;
+            } 
+            }
+        } 
+        .add_provider_btn_bay{
+            width:100%;
+            padding-top:5%;
+            text-align: right;
+            .save_btn{
+                background: #cd3d3d;
+                color: #fff;
+                border-radius:20px;
+                height:40px;
+                border:none;
+                padding-left:4%;
+                padding-right:4%;
+                margin:1%;
+                &:hover{
+                    outline: none;
+                }
+                &:focus{
+                    outline:none;
+                }
+            }
+    
+            .cancel_btn{
+                background: #1a5c7c;
+                color: #fff;
+                border-radius:20px;
+                height:40px;
+                padding-left:4%;
+                padding-right:4%;
+                border:none;
+                margin:1%;
+                &:hover{
+                    outline: none;
+                }
+                &:focus{
+                    outline:none;
+                }
+            }
+        }
+
+        table{
+            thead{
+                background: #1ca8cb;
+                tr{
+                    th{
+                        color: #fff;
+                        padding-left: 25px;
+                        font-weight: 500;
+                        .add{
+                            width:30px;
+                            height:30px;
+                            background: #1a5b77;
+                            color: #fff;
+                            border:1px solid #fff;
+                            border-radius: 50%;
+                            font-size: 18px;
+                            cursor: pointer;
+                            &:focus{
+                                outline: none;
+                            }
+                        }
+                    }
+                }
+            }
+            tbody{
+                tr{
+                    border-bottom: 2px solid #fff;
+                    td{
+                        .edit_btn{
+                            width:25px;
+                            height:25px;
+                            border:none;
+                            background:url('/assets/images/asset_edit.png');
+                            background-position: center;
+                            background-size: 18px;
+                            background-repeat: no-repeat;
+                            margin: 2px;
+                            &:focus{
+                                outline:none;
+                            }
+
+                        }
+                        .delete_btn{
+                            width:25px;
+                            height:25px;
+                            border:none;
+                            background:url('/assets/images/asset_delete.png');
+                            background-position: center;
+                            background-size: 20px;
+                            background-repeat: no-repeat;
+                            margin: 2px;
+                            &:focus{
+                                outline:none;
+                            }
+                        }
+
+                    }
+                    &:nth-child(even) {background: #f3f3f3}
+                    &:nth-child(odd) {background: #f9f9f9}
+                }
+            }
+        }
+    }
+
+
+}
\ No newline at end of file

src/app/checker/currency-list/currency-list.component.ts

 import { Component, OnInit } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+import { WebService } from './../../providers/web.service';
+import { ValidationService } from './../../providers/validation.service';
+
 
 @Component({
   selector: 'app-currency-list',
@@ -6,10 +10,94 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./currency-list.component.scss']
 })
 export class CurrencyListComponent implements OnInit {
+  currencyList: any[];
+  fname: any;
+  lang =  'ar';
+  responseMsg: any;
+  error: boolean;
+  success: boolean;
+  loader: boolean;
 
-  constructor() { }
+  constructor(private router: Router, private route: ActivatedRoute, public vs: ValidationService, public service: WebService) {
+    this.responseMsg = '';
+    this.error = false;
+    this.success = false;
+    this.loader = false;
+  }
 
   ngOnInit() {
+    this.getCurrency();
+  }
+
+  getCurrency() {
+    this.loader = true;
+    this.fname = 'currency';
+      this.service.post_data(this.fname, []).subscribe(response => {
+        this.loader = false;
+        console.log(response);
+        if (response.code === 1) {
+          this.currencyList = response.responseResult;
+        } else {
+          this.error = true;
+          this.responseMsg = this.vs.errorCode[this.lang][response.errorCode];
+        }
+      }, (error) => {
+        this.error = true;
+        this.responseMsg =  this.vs.errorCode[this.lang]['ER08'];
+    });
+
+    const This = this;
+    setTimeout(function() {
+      This.responseMsg = '';
+    }, 3000);
+  }
+
+  reset() {
+    this.error = false;
+    this.success = false;
+  }
+
+  deleteClick(currency_id: any) {
+    this.reset();
+    const res = confirm('Do you want to remove this currency ?');
+    if (res === true) {
+      this.loader = true;
+      this.fname = 'currency_delete';
+      const post_data = {'currency_id': currency_id};
+        this.service.post_data(this.fname, post_data).subscribe(response => {
+          this.loader = false;
+          console.log(response);
+          if (response.code === 1) {
+            this.success = true;
+            console.log(this.success);
+            this.getCurrency();
+          } else {
+            this.error = true;
+            this.responseMsg = this.vs.errorCode[this.lang][response.errorCode];
+          }
+        }, (error) => {
+          this.error = true;
+          this.responseMsg = this.vs.errorCode[this.lang]['ER08'];
+      });
+    }
+    /* const This = this;
+    setTimeout(function() {
+      This.responseMsg = '';
+    }, 3000); */
+  }
+
+  editClick(id: number) {
+    this.router.navigate(['checker/currency_edit/' + id]);
+  }
+
+  goToPage(path, data = null) {
+    console.log(data);
+    this.router.navigateByUrl(path, {queryParams: data});
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+  }
+
+  logout() {
+    this.service.logout();
   }
 
 }

src/app/checker/editforex/editforex.component.html

@@ -7,7 +7,7 @@
         <h4>Forex Provider</h4>
       </div>
       <div class="col-md-6 textRight relative">
-          <button class="logout">
+          <button class="logout" (click)="logout()">
               <img src="assets/images/asset_logout.png">
             Logout</button>
           <img src="assets/images/asset_logo1.png">

src/app/checker/editforex/editforex.component.ts

@@ -148,4 +148,14 @@ export class EditforexComponent implements OnInit {
     console.log('tested');
   }
 
+  logout() {
+    this.service.logout();
+  }
+
+  goToPage(path, data = null) {
+      console.log(data);
+      this.router.navigateByUrl(path, {queryParams: data});
+      document.body.scrollTop = document.documentElement.scrollTop = 0;
+    }
+
 }

src/app/checker/editprovider/editprovider.component.html

@@ -7,7 +7,7 @@
         <h4>Forex Delivery Service Provider</h4>
       </div>
       <div class="col-md-6 textRight relative">
-            <button class="logout">
+            <button class="logout" (click)="logout()">
                     <img src="assets/images/asset_logout.png">
                   Logout</button>
           <img src="assets/images/asset_logo1.png">

src/app/checker/editprovider/editprovider.component.ts

@@ -125,4 +125,8 @@ export class EditproviderComponent implements OnInit {
     console.log('tested');
   }
 
+  logout() {
+    this.service.logout();
+  }
+
 }

src/app/checker/forexprovider/forexprovider.component.html

@@ -7,7 +7,7 @@
         <h4>Forex Provider</h4>
       </div>
       <div class="col-md-6 textRight relative">
-          <button class="logout">
+          <button class="logout" (click)="logout()">
               <img src="assets/images/asset_logout.png">
             Logout</button>
           <img src="assets/images/asset_logo1.png">
@@ -17,7 +17,7 @@
   </header>
 <section>
     <div class="provider_content">
-      <h3>Manage Forex Service Provider</h3>
+      <h3>Manage Forex Provider</h3>
       <div class="provider_inner_content">
           <div class="table-responsive">   
               <div class="alert alert-danger alert-dismissible" *ngIf="error">

src/app/checker/forexprovider/forexprovider.component.ts

@@ -96,4 +96,8 @@ export class ForexproviderComponent implements OnInit {
     document.body.scrollTop = document.documentElement.scrollTop = 0;
   }
 
+  logout() {
+    this.service.logout();
+  }
+
 }

src/app/checker/home/home.component.html

@@ -4,7 +4,7 @@
       <h4>Forex Delivery Service Provider</h4>
     </div>
     <div class="col-md-6 textRight relative">
-        <button class="logout">
+        <button class="logout" (click)="logout()">
             <img src="assets/images/asset_logout.png">
           Logout</button>
         <img src="assets/images/asset_logo1.png">

src/app/checker/home/home.component.ts

 import { Component, OnInit } from '@angular/core';
 import { Router,ActivatedRoute } from '@angular/router';
+import { WebService } from './../../providers/web.service';
 
 @Component({
   selector: 'app-home',
@@ -8,7 +9,7 @@ import { Router,ActivatedRoute } from '@angular/router';
 })
 export class HomeComponent implements OnInit {
 
-  constructor(private router: Router, private route: ActivatedRoute) { }
+  constructor(private router: Router, private route: ActivatedRoute, public service: WebService) { }
 
   ngOnInit() {
   }
@@ -25,4 +26,8 @@ export class HomeComponent implements OnInit {
   clickDelivery() {
     this.router.navigate(['/checker/delivery']);
   }
+
+  logout() {
+    this.service.logout();
+  }
 }

src/app/forex/addprovider/addprovider.component.spec.ts → src/app/delivery/add-driver/add-driver.component.spec.ts

 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { AddproviderComponent } from './addprovider.component';
+import { AddDriverComponent } from './add-driver.component';
 
-describe('AddproviderComponent', () => {
-  let component: AddproviderComponent;
-  let fixture: ComponentFixture<AddproviderComponent>;
+describe('AddDriverComponent', () => {
+  let component: AddDriverComponent;
+  let fixture: ComponentFixture<AddDriverComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ AddproviderComponent ]
+      declarations: [ AddDriverComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(AddproviderComponent);
+    fixture = TestBed.createComponent(AddDriverComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/delivery/add-driver/add-driver.component.ts

+import { Component, OnInit } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+import { WebService } from './../../providers/web.service';
+import { ValidationService } from './../../providers/validation.service';
+import { FormControl, FormGroup, FormBuilder, Validators, ValidationErrors } from '@angular/forms';
+
+@Component({
+  selector: 'app-add-driver',
+  templateUrl: './add-driver.component.html',
+  styleUrls: ['./add-driver.component.scss']
+})
+export class AddDriverComponent implements OnInit {
+  providerForm: FormGroup;
+  mobnumPattern = '^((\\+?)|0)?[0-9]{8,15}$';
+  emailPattern = '^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$';
+  providerSubmit: boolean;
+  lang =  'en';
+  error_msg: any[];
+  funcName: any;
+  loader: boolean;
+  responseError: any;
+  error: boolean;
+  success: boolean;
+  providerList: any[];
+  loginDetails: any;
+  userDetails: any;
+
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute,
+    public vs: ValidationService,
+    public service: WebService,
+    private formBuilder: FormBuilder
+    ) {
+      this.loader = false;
+      this.error = false;
+      this.success = false;
+      this.providerSubmit = false;
+      this.error_msg = this.vs.errorList[this.lang];
+      this.loginDetails =  JSON.parse(this.service.getLocalStorageItem('userData'));
+    }
+
+    ngOnInit() {
+      this.getProfile();
+      this.providerForm = this.formBuilder.group({
+        'name':  ['', Validators.compose([Validators.required])],
+        'cr_manager':  ['', Validators.compose([Validators.required])],
+        'cr_id':  ['', Validators.compose([Validators.required])],
+        'location':  ['', Validators.compose([Validators.required])],
+        'email_id': ['', Validators.compose([Validators.required, Validators.maxLength(50), Validators.pattern(this.emailPattern)])],
+        // tslint:disable-next-line:max-line-length
+        'phone':  ['', Validators.compose([Validators.required, Validators.minLength(8), Validators.maxLength(15), Validators.pattern(this.mobnumPattern)])],
+        'type':  [4],
+        'deli_provider_id': ['', Validators.compose([Validators.required])],
+        'password': [''],
+      });
+    }
+
+    goToPage(path, data = null) {
+      console.log(data);
+      this.router.navigateByUrl(path, {queryParams: data});
+      document.body.scrollTop = document.documentElement.scrollTop = 0;
+    }
+
+    regProcess() {
+      const This = this;
+      this.error = false;
+      this.success = false;
+      let pass =  Math.round(Math.random() * 1000000);
+      pass = this.pad(pass, 6, 0);
+      this.providerForm.controls['password'].setValue(pass);
+      console.log(this.providerForm.value);
+      this.providerSubmit = true;
+      if (this.providerForm.valid) {
+        this.loader = true;
+        const providerObj = this.providerForm.value;
+        this.funcName = 'provider_create';
+        this.service.post_data(this.funcName, providerObj).subscribe(response => {
+          this.loader = false;
+          console.log(response);
+          if (response.code === 1) {
+            this.success = true;
+            this.providerSubmit = false;
+            this.providerForm.reset();
+          } else {
+            this.error = true;
+            this.responseError = this.vs.errorCode[this.lang][response.errorCode];
+          }
+        }, (error) => {
+          this.error = false;
+          this.responseError = this.vs.errorCode[this.lang]['ER08'];
+        });
+      } else {
+        console.log('asdasd');
+      }
+      console.log('tested');
+    }
+
+    pad(n: any, width: any, z: any) {
+      z = z || '0';
+      n = n + '';
+      return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
+    }
+
+    cancelClick() {
+      this.router.navigate(['/delivery/driverlist']);
+    }
+
+
+    getProfile() {
+      this.funcName = 'get_user_details';
+      const post_data = {'user_id': this.loginDetails.user_id};
+      this.service.post_data(this.funcName, post_data).subscribe(response => {
+        if (response.code === 1) {
+          this.userDetails = response.responseResult;
+          this.providerForm.controls['deli_provider_id'].setValue(this.userDetails.id);
+        } else {
+          this.error = true;
+          this.responseError = this.vs.errorCode[this.lang][response.errorCode];
+        }
+      }, (error) => {
+        this.error = true;
+        this.responseError =  this.vs.errorCode[this.lang]['ER08'];
+    });
+    }
+
+    logout() {
+      this.service.logout();
+    }
+
+}

src/app/delivery/addprovider/addprovider.component.ts

-import { Component, OnInit } from '@angular/core';
-import { Router,ActivatedRoute } from '@angular/router';
-
-@Component({
-  selector: 'app-addprovider',
-  templateUrl: './addprovider.component.html',
-  styleUrls: ['./addprovider.component.scss']
-})
-export class AddproviderComponent implements OnInit {
-
-  constructor(private router: Router,private route: ActivatedRoute) { }
-
-  ngOnInit() {
-  }
-
-  goToPage(path,data=null){
-    console.log(data)
-    this.router.navigateByUrl(path,{queryParams:data});
-    document.body.scrollTop = document.documentElement.scrollTop = 0;
-  }
-
-}

src/app/delivery/changepin/changepin.component.html

@@ -11,46 +11,68 @@
                 <div class="login_row">
                     <p>Old PIN</p>
                     <div class="login_pin">
-                      <input class="log_pin" type="password" maxlength="1" value="0">
-                      <input class="log_pin" type="password" maxlength="1" value="0">
-                      <input class="log_pin" type="password" maxlength="1" value="0">
-                      <input class="log_pin" type="password" maxlength="1" value="0">
-                      <input class="log_pin" type="password" maxlength="1" value="0">
-                      <input class="log_pin m0"  type="password" maxlength="1" value="0"> 
+                      <input class="log_pin" type="password" maxlength="1" #old1  (keyup)="processKeyUp($event, old2)">
+                      <input class="log_pin" type="password" maxlength="1" #old2 (keydown.backspace)="processBack($event, old1)" (keyup)="processKeyUp($event, old3)">
+                      <input class="log_pin" type="password" maxlength="1" #old3 (keydown.backspace)="processBack($event, old2)" (keyup)="processKeyUp($event, old4)">
+                      <input class="log_pin" type="password" maxlength="1" #old4 (keydown.backspace)="processBack($event, old3)" (keyup)="processKeyUp($event, old5)">
+                      <input class="log_pin" type="password" maxlength="1" #old5 (keydown.backspace)="processBack($event, old4)" (keyup)="processKeyUp($event, old6)">
+                      <input class="log_pin m0"  type="password" maxlength="1" #old6 (keydown.backspace)="processBack($event, old5)"> 
                     </div>
+                    <div class="s_error" *ngIf="passwordErr">
+                        <div class="s_validation">{{error_msg.password}} </div>
+                     </div>
                  </div>
                  <div class="login_row">
                     <p>New PIN</p>
                     <div class="login_pin">
-                      <input class="log_pin" type="password" maxlength="1" value="0">
-                      <input class="log_pin" type="password" maxlength="1" value="0">
-                      <input class="log_pin" type="password" maxlength="1" value="0">
-                      <input class="log_pin" type="password" maxlength="1" value="0">
-                      <input class="log_pin" type="password" maxlength="1" value="0">
-                      <input class="log_pin m0"  type="password" maxlength="1" value="0"> 
+                      <input class="log_pin" type="password" maxlength="1" #new1 (keyup)="processKeyUp($event, new2)">
+                      <input class="log_pin" type="password" maxlength="1" #new2 (keydown.backspace)="processBack($event, new1)" (keyup)="processKeyUp($event, new3)">
+                      <input class="log_pin" type="password" maxlength="1" #new3 (keydown.backspace)="processBack($event, new2)" (keyup)="processKeyUp($event, new4)">
+                      <input class="log_pin" type="password" maxlength="1" #new4 (keydown.backspace)="processBack($event, new3)" (keyup)="processKeyUp($event, new5)">
+                      <input class="log_pin" type="password" maxlength="1" #new5 (keydown.backspace)="processBack($event, new4)" (keyup)="processKeyUp($event, new6)">
+                      <input class="log_pin m0"  type="password" maxlength="1" #new6 (keydown.backspace)="processBack($event, new5)"> 
                     </div>
                  </div>
+                 <div class="s_error" *ngIf="newpasswordErr">
+                     <div class="s_validation">{{error_msg.password}} </div>
+                  </div>
                  <div class="login_row">
                     <p>Confirm PIN</p>
                     <div class="login_pin">
-                      <input class="log_pin" type="password" maxlength="1" value="0">
-                      <input class="log_pin" type="password" maxlength="1" value="0">
-                      <input class="log_pin" type="password" maxlength="1" value="0">
-                      <input class="log_pin" type="password" maxlength="1" value="0">
-                      <input class="log_pin" type="password" maxlength="1" value="0">
-                      <input class="log_pin m0"  type="password" maxlength="1" value="0"> 
+                      <input class="log_pin" type="password" maxlength="1" #conf1  (keyup)="processKeyUp($event, conf2)">
+                      <input class="log_pin" type="password" maxlength="1" #conf2 (keydown.backspace)="processBack($event, conf1)" (keyup)="processKeyUp($event, conf3)">
+                      <input class="log_pin" type="password" maxlength="1" #conf3 (keydown.backspace)="processBack($event, conf2)" (keyup)="processKeyUp($event, conf4)">
+                      <input class="log_pin" type="password" maxlength="1" #conf4 (keydown.backspace)="processBack($event, conf3)" (keyup)="processKeyUp($event, conf5)">
+                      <input class="log_pin" type="password" maxlength="1" #conf5 (keydown.backspace)="processBack($event, conf4)" (keyup)="processKeyUp($event, conf6)">
+                      <input class="log_pin m0"  type="password" maxlength="1" #conf6 (keydown.backspace)="processBack($event, conf5)"> 
                     </div>
                  </div>
+                 <div class="s_error" *ngIf="confpasswordErr">
+                     <div class="s_validation">{{error_msg.password}} </div>
+                  </div>
+                  <div class="s_error" *ngIf="notMatchErr">
+                     <div class="s_validation">{{error_msg.confirm}} </div>
+                  </div>
              </div>
           </div>
        </div>
+       <div class="alert alert-danger alert-dismissible" *ngIf="resetError">
+            <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
+            <strong>Warning!</strong> {{resetMsg}}
+        </div>
+
+       <div class="alert alert-success alert-dismissible" *ngIf="!resetError && !error && loginSubmit">
+            <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
+            <strong>Success!</strong> Password Updated Successfully
+          </div>
+       <!-- <div *ngIf="!resetError && !error && loginSubmit" class="s_validation">Passwod Updated Successfully</div> -->
        <div class="login_btn_bay">
           <div class="row">
               <div class="col-md-6">
-                  <button class="cancel_btn" (click)="goToPage('start/forgot')">Cancel</button>
+                  <button class="cancel_btn" (click)="cancelClick()">Cancel</button>
               </div>
               <div class="col-md-6">
-                <button class="login_btn" (click)="goToPage('start/login')">Save</button>
+                <button class="login_btn" (click)="saveClick()">Save</button>
               </div>
            </div>
        </div>

src/app/delivery/changepin/changepin.component.ts

-import { Component, OnInit } from '@angular/core';
-import { Router,ActivatedRoute } from '@angular/router';
+import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+import { ValidationService } from './../../providers/validation.service';
+import { SubjectService } from './../../providers/subject.service';
+import { WebService } from './../../providers/web.service';
+import {Location} from '@angular/common';
+
 
 @Component({
   selector: 'app-changepin',
@@ -7,15 +12,213 @@ import { Router,ActivatedRoute } from '@angular/router';
   styleUrls: ['./changepin.component.scss']
 })
 export class ChangepinComponent implements OnInit {
+  @ViewChild('old1') old1: ElementRef;
+  @ViewChild('old2') old2: ElementRef;
+  @ViewChild('old3') old3: ElementRef;
+  @ViewChild('old4') old4: ElementRef;
+  @ViewChild('old5') old5: ElementRef;
+  @ViewChild('old6') old6: ElementRef;
+
+  @ViewChild('new1') new1: ElementRef;
+  @ViewChild('new2') new2: ElementRef;
+  @ViewChild('new3') new3: ElementRef;
+  @ViewChild('new4') new4: ElementRef;
+  @ViewChild('new5') new5: ElementRef;
+  @ViewChild('new6') new6: ElementRef;
+
+  @ViewChild('conf1') conf1: ElementRef;
+  @ViewChild('conf2') conf2: ElementRef;
+  @ViewChild('conf3') conf3: ElementRef;
+  @ViewChild('conf4') conf4: ElementRef;
+  @ViewChild('conf5') conf5: ElementRef;
+  @ViewChild('conf6') conf6: ElementRef;
+
+  error_msg: any[];
+  lang =  'en';
+  model: any;
+  passwordErr: boolean;
+  newpasswordErr: boolean;
+  confpasswordErr: boolean;
+  notMatchErr: boolean;
+  password: any;
+  fname: any;
+  loginSubmit: boolean;
+  resetError: boolean;
+  resetMsg: any;
+  loginDetails: any;
+  error: boolean;
 
-  constructor(private router: Router,private route: ActivatedRoute) { }
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute,
+    public vs: ValidationService,
+    public service: WebService,
+    public subjectService: SubjectService,
+    public location: Location
+  ) {
+    this.loginDetails = JSON.parse(this.service.getLocalStorageItem('userData'));
+    this.error = false;
+    this.passwordErr = false;
+    this.newpasswordErr = false;
+    this.confpasswordErr = false;
+    this.notMatchErr = false;
+    this.error_msg = this.vs.errorList[this.lang];
+  }
 
   ngOnInit() {
   }
-  goToPage(path,data=null){
-    console.log(data)
-    this.router.navigateByUrl(path,{queryParams:data});
-    document.body.scrollTop = document.documentElement.scrollTop = 0;
+
+  processKeyUp(e: any, el: any) {
+    el.value = '';
+    console.log(e);
+    if ((e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 96 && e.keyCode <= 105)) {
+      e.target.value = e.key;
+      el.focus();
+    } else {
+      if (e.keyCode !== 8) {
+        e.target.value = '';
+      }
+    }
+  }
+
+  processBack (e: any, el: any) {
+    if (e.keyCode === 8) {
+      e.target.value = '';
+      el.focus();
+    }
+  }
+
+  saveClick() {
+
+    this.loginSubmit = true;
+    this.passwordErr = false;
+    this.newpasswordErr = false;
+    this.confpasswordErr = false;
+    this.notMatchErr = false;
+    this.resetError = false;
+    this.error = false;
+    const password = [];
+    const newpassword = [];
+    const confirm = [];
+
+    password[0] = this.old1.nativeElement.value;
+    password[1] = this.old2.nativeElement.value;
+    password[2] = this.old3.nativeElement.value;
+    password[3] = this.old4.nativeElement.value;
+    password[4] = this.old5.nativeElement.value;
+    password[5] = this.old6.nativeElement.value;
+
+    newpassword[0] = this.new1.nativeElement.value;
+    newpassword[1] = this.new2.nativeElement.value;
+    newpassword[2] = this.new3.nativeElement.value;
+    newpassword[3] = this.new4.nativeElement.value;
+    newpassword[4] = this.new5.nativeElement.value;
+    newpassword[5] = this.new6.nativeElement.value;
+
+
+    confirm[0] = this.conf1.nativeElement.value;
+    confirm[1] = this.conf2.nativeElement.value;
+    confirm[2] = this.conf3.nativeElement.value;
+    confirm[3] = this.conf4.nativeElement.value;
+    confirm[4] = this.conf5.nativeElement.value;
+    confirm[5] = this.conf6.nativeElement.value;
+
+
+    const oldpass = password.join('');
+    const newpass = newpassword.join('');
+    const confirmpass = confirm.join('');
+
+      if (oldpass === '') {
+        this.passwordErr = true;
+        this.error = true;
+      } else {
+        for (const i in password) {
+          if (password[i] === '') {
+            this.passwordErr = true;
+            this.error = true;
+          }
+        }
+      }
+
+      if (newpass === '') {
+        this.newpasswordErr = true;
+        this.error = true;
+      } else {
+        for (const i in newpassword) {
+          if (newpassword[i] === '') {
+            this.newpasswordErr = true;
+            this.error = true;
+          }
+        }
+      }
+
+      if (confirmpass === '') {
+        this.confpasswordErr = true;
+        this.error = true;
+      } else {
+        for (const i in confirm) {
+          if (confirm[i] === '') {
+            this.confpasswordErr = true;
+            this.error = true;
+          }
+        }
+      }
+
+      console.log(this.error);
+
+
+
+      if (this.error === false) {
+        if (newpass !== confirmpass) {
+          this.notMatchErr = true;
+          this.error = true;
+        }
+      }
+
+    this.fname = 'reset_pin';
+    const post_data = {'user_id': this.loginDetails.user_id, 'password': oldpass, 'new_password': newpass};
+      this.service.post_data(this.fname, post_data).subscribe(response => {
+        console.log(response);
+        if (response.code === 1) {
+          const responseData = response.responseResult;
+          this.reset();
+        } else {
+          this.resetError = true;
+          this.resetMsg = this.vs.errorCode[this.lang][response.errorCode];
+          console.log(this.resetMsg);
+        }
+      }, (error) => {
+        this.resetError = true;
+        this.resetMsg = this.vs.errorCode[this.lang]['ER08'];
+        console.log(this.resetMsg);
+    });
+  }
+
+  reset() {
+    this.conf1.nativeElement.value = '';
+    this.conf2.nativeElement.value = '';
+    this.conf3.nativeElement.value = '';
+    this.conf4.nativeElement.value = '';
+    this.conf5.nativeElement.value = '';
+    this.conf6.nativeElement.value = '';
+
+    this.new1.nativeElement.value = '';
+    this.new2.nativeElement.value = '';
+    this.new3.nativeElement.value = '';
+    this.new4.nativeElement.value = '';
+    this.new5.nativeElement.value = '';
+    this.new6.nativeElement.value = '';
+
+    this.old1.nativeElement.value = '';
+    this.old2.nativeElement.value = '';
+    this.old3.nativeElement.value = '';
+    this.old4.nativeElement.value = '';
+    this.old5.nativeElement.value = '';
+    this.old6.nativeElement.value = '';
+  }
+
+  cancelClick() {
+    this.location.back();
   }
 
 }

src/app/delivery/delivery.module.ts

 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { moduleRouting } from './delivery.routing';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 /* CUSTOM-COMPONENTS */
 
 import { IndexComponent } from './index/index.component';
-import { AddproviderComponent } from './addprovider/addprovider.component';
 import { ChangepinComponent } from './changepin/changepin.component';
 import { EditproviderComponent } from './editprovider/editprovider.component';
-import { ManageproviderComponent } from './manageprovider/manageprovider.component';
 import { TransactionComponent } from './transaction/transaction.component';
+import { AddDriverComponent } from './add-driver/add-driver.component';
+import { ListDriverComponent } from './list-driver/list-driver.component';
+import { EditDriverComponent } from './edit-driver/edit-driver.component';
 
 @NgModule({
-  declarations: [IndexComponent, AddproviderComponent, ChangepinComponent, EditproviderComponent, ManageproviderComponent, TransactionComponent],
+  // tslint:disable-next-line:max-line-length
+  declarations: [IndexComponent, ChangepinComponent, EditproviderComponent, TransactionComponent, AddDriverComponent, ListDriverComponent, EditDriverComponent],
   imports: [
     CommonModule,
-    moduleRouting
+    moduleRouting,
+    FormsModule,
+    ReactiveFormsModule
   ]
 })
 export class DeliveryModule { }

src/app/delivery/delivery.routing.ts

@@ -9,23 +9,25 @@ import { Routes, RouterModule } from '@angular/router';
 //IMPORTED-PAGE-COMPONENTS
 
 import { IndexComponent } from './index/index.component';
-import { AddproviderComponent} from './addprovider/addprovider.component';
 import { ChangepinComponent } from './changepin/changepin.component';
 import { EditproviderComponent } from './editprovider/editprovider.component';
-import { ManageproviderComponent } from './manageprovider/manageprovider.component';
 import { TransactionComponent } from './transaction/transaction.component';
 import { AuthGuard } from './../providers/auth.guard';
+import { AddDriverComponent } from './add-driver/add-driver.component';
+import { ListDriverComponent } from './list-driver/list-driver.component';
+import { EditDriverComponent } from './edit-driver/edit-driver.component';
 
 
 const ModuleRoutes: Routes = [
 
 { path: 'delivery', component: IndexComponent, canActivate: [AuthGuard],
 		children: [
-			{ path: 'provider', component: AddproviderComponent },
 			{ path: 'changepin', component: ChangepinComponent },
 			{ path: 'editprovider',	component: EditproviderComponent },
-			{ path: 'manageprovider', component: ManageproviderComponent},
-			{path: '', component: TransactionComponent}
+			{path: '', component: TransactionComponent},
+			{ path: 'driveradd', component: AddDriverComponent },
+			{ path: 'driverlist', component: ListDriverComponent },
+			{ path: 'driveredit/:id', component: EditDriverComponent },
 		]
 	}
 ];

src/app/forex/addprovider/addprovider.component.scss → src/app/delivery/edit-driver/edit-driver.component.scss

@@ -20,10 +20,11 @@
     }
 }
 
+
 .provider_content{
     width:100%;
     position: relative;
-   
+
     h3{
         margin:0px;
         padding:0px;
@@ -43,6 +44,14 @@
             .provider_data_content{
                 width:90%;
                 margin:0 auto;
+                .edit_delivery{
+                    color: #195c77;
+                    text-decoration: underline;
+                    cursor: pointer;
+                    font-weight: 500;
+                    position: relative;
+                    top:30px;
+                }
                 p{
                     color: #464646;
                     margin:0px;

src/app/delivery/addprovider/addprovider.component.spec.ts → src/app/delivery/edit-driver/edit-driver.component.spec.ts

 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { AddproviderComponent } from './addprovider.component';
+import { EditDriverComponent } from './edit-driver.component';
 
-describe('AddproviderComponent', () => {
-  let component: AddproviderComponent;
-  let fixture: ComponentFixture<AddproviderComponent>;
+describe('EditDriverComponent', () => {
+  let component: EditDriverComponent;
+  let fixture: ComponentFixture<EditDriverComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ AddproviderComponent ]
+      declarations: [ EditDriverComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(AddproviderComponent);
+    fixture = TestBed.createComponent(EditDriverComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/delivery/edit-driver/edit-driver.component.ts

+import { Component, OnInit } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+import { WebService } from './../../providers/web.service';
+import { ValidationService } from './../../providers/validation.service';
+import { FormControl, FormGroup, FormBuilder, Validators, ValidationErrors } from '@angular/forms';
+
+@Component({
+  selector: 'app-edit-driver',
+  templateUrl: './edit-driver.component.html',
+  styleUrls: ['./edit-driver.component.scss']
+})
+export class EditDriverComponent implements OnInit {
+  provider: any;
+  funcName: any;
+  lang =  'ar';
+  responseMsg: any;
+  error: boolean;
+  success: boolean;
+  loader: boolean;
+  providerForm: FormGroup;
+  mobnumPattern = '^((\\+?)|0)?[0-9]{8,15}$';
+  emailPattern = '^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$';
+  providerSubmit: boolean;
+  error_msg: any[];
+  loginDetails: any;
+  userDetails: any;
+
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute,
+    public vs: ValidationService,
+    public service: WebService,
+    private formBuilder: FormBuilder
+  ) {
+    this.loader = false;
+    this.error = false;
+    this.success = false;
+    this.providerSubmit = false;
+    this.error_msg = this.vs.errorList[this.lang];
+  }
+
+  ngOnInit() {
+    const parm = decodeURIComponent(this.route.snapshot.params['id']);
+    // tslint:disable-next-line:radix
+    const id = parseInt(parm);
+    this.loginDetails =  JSON.parse(this.service.getLocalStorageItem('userData'));
+    this.getProfile();
+    this.getProvider(id);
+    console.log(id);
+    this.providerForm = this.formBuilder.group({
+      'cr_manager':  ['', Validators.compose([Validators.required])],
+      'location':  ['', Validators.compose([Validators.required])],
+      'email_id': ['', Validators.compose([Validators.required, Validators.maxLength(50), Validators.pattern(this.emailPattern)])],
+      // tslint:disable-next-line:max-line-length
+      'phone':  ['', Validators.compose([Validators.required, Validators.minLength(8), Validators.maxLength(15), Validators.pattern(this.mobnumPattern)])],
+      'type':  [4],
+      'provider_id': [id],
+      'deli_provider_id': ['', Validators.compose([Validators.required])]
+    });
+  }
+
+  getProvider(id: any) {
+    this.loader = true;
+    this.funcName = 'providers_details';
+    const post_data = {'provider_id': id};
+      this.service.post_data(this.funcName, post_data).subscribe(response => {
+        this.loader = false;
+        console.log(response);
+        if (response.code === 1) {
+          this.provider = response.responseResult;
+          this.providerForm.patchValue({
+            cr_manager: this.provider.cr_manager,
+            contact: this.provider.contact,
+            location: this.provider.location,
+            email_id: this.provider.email_id,
+            phone: this.provider.phone
+          });
+        } else {
+          this.error = true;
+          this.responseMsg = this.vs.errorCode[this.lang][response.errorCode];
+        }
+      }, (error) => {
+        this.error = true;
+        this.responseMsg =  this.vs.errorCode[this.lang]['ER08'];
+    });
+
+    const This = this;
+    setTimeout(function() {
+      This.responseMsg = '';
+    }, 3000);
+  }
+
+  goToPage(path, data = null){
+    console.log(data);
+    this.router.navigateByUrl(path,{queryParams:data});
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+  }
+
+  cancelClick() {
+    this.router.navigate(['/delivery/driverlist']);
+  }
+
+  editProcess() {
+    const This = this;
+    this.error = false;
+    this.success = false;
+    console.log(this.providerForm.value);
+    this.providerSubmit = true;
+    if (this.providerForm.valid) {
+      this.loader = true;
+      const providerObj = this.providerForm.value;
+      this.funcName = 'provider_edit';
+      this.service.post_data(this.funcName, providerObj).subscribe(response => {
+        this.loader = false;
+        console.log(response);
+        if (response.code === 1) {
+          this.success = true;
+          this.providerSubmit = false;
+        } else {
+          this.error = true;
+          this.responseMsg = this.vs.errorCode[this.lang][response.errorCode];
+        }
+      }, (error) => {
+        this.error = false;
+        this.responseMsg = this.vs.errorCode[this.lang]['ER08'];
+      });
+    }
+    console.log('tested');
+  }
+
+  getProfile() {
+    this.funcName = 'get_user_details';
+    const post_data = {'user_id': this.loginDetails.user_id};
+    this.service.post_data(this.funcName, post_data).subscribe(response => {
+      if (response.code === 1) {
+        this.userDetails = response.responseResult;
+        this.providerForm.controls['deli_provider_id'].setValue(this.userDetails.id);
+      } else {
+        this.error = true;
+        this.responseMsg = this.vs.errorCode[this.lang][response.errorCode];
+      }
+    }, (error) => {
+      this.error = true;
+      this.responseMsg =  this.vs.errorCode[this.lang]['ER08'];
+  });
+  }
+
+  logout() {
+    this.service.logout();
+  }
+
+}

src/app/delivery/editprovider/editprovider.component.scss

@@ -68,6 +68,18 @@
                         outline: none;
                     }
                 }
+
+                .provider_select{
+                    border:1px solid #b4b4b4;
+                    height:40px;
+                    padding-left: 10px;
+                    padding-right: 10px;
+                    width: 100%;
+                    background: url('/assets/images/asset_dropdown.png');
+                    -webkit-appearance: none;
+                    background-repeat: no-repeat;
+                    background-position: right 10px top 10px;
+                }
                 .provider_pin{
                     border:1px solid #b4b4b4;
                     height:40px;

src/app/delivery/editprovider/editprovider.component.ts

 import { Component, OnInit } from '@angular/core';
-import { Router,ActivatedRoute } from '@angular/router';
+import { Router, ActivatedRoute } from '@angular/router';
+import { WebService } from './../../providers/web.service';
+import { ValidationService } from './../../providers/validation.service';
+import { FormControl, FormGroup, FormBuilder, Validators, ValidationErrors } from '@angular/forms';
 
 @Component({
   selector: 'app-editprovider',
@@ -7,16 +10,114 @@ import { Router,ActivatedRoute } from '@angular/router';
   styleUrls: ['./editprovider.component.scss']
 })
 export class EditproviderComponent implements OnInit {
+  provider: any;
+  funcName: any;
+  lang =  'ar';
+  responseMsg: any;
+  error: boolean;
+  success: boolean;
+  loader: boolean;
+  providerForm: FormGroup;
+  mobnumPattern = '^((\\+?)|0)?[0-9]{8,15}$';
+  emailPattern = '^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$';
+  providerSubmit: boolean;
+  error_msg: any[];
+  loginDetails: any;
+  userDetails: any;
 
-  constructor(private router: Router,private route: ActivatedRoute) { }
+  constructor(private router: Router,
+    private route: ActivatedRoute,
+    public vs: ValidationService,
+    public service: WebService,
+    private formBuilder: FormBuilder
+  ) {
+    this.loader = false;
+    this.error = false;
+    this.success = false;
+    this.providerSubmit = false;
+    this.error_msg = this.vs.errorList[this.lang];
+    this.loginDetails = JSON.parse(this.service.getLocalStorageItem('userData'));
+  }
 
   ngOnInit() {
+
+    this.getProfile();
+    this.providerForm = this.formBuilder.group({
+      'cr_manager':  ['', Validators.compose([Validators.required])],
+      'contact':  ['', Validators.compose([Validators.required])],
+      'location':  ['', Validators.compose([Validators.required])],
+      'email_id': ['', Validators.compose([Validators.required, Validators.maxLength(50), Validators.pattern(this.emailPattern)])],
+      // tslint:disable-next-line:max-line-length
+      'phone':  ['', Validators.compose([Validators.required, Validators.minLength(8), Validators.maxLength(15), Validators.pattern(this.mobnumPattern)])],
+      'type':  [3],
+      'provider_id': []
+    });
+  }
+
+  cancelClick() {
+    this.router.navigate(['/checker/forex']);
+  }
+
+  editProcess() {
+    const This = this;
+    this.error = false;
+    this.success = false;
+    console.log(this.providerForm.value);
+    this.providerSubmit = true;
+    if (this.providerForm.valid) {
+      this.loader = true;
+      const providerObj = this.providerForm.value;
+      this.funcName = 'provider_edit';
+      this.service.post_data(this.funcName, providerObj).subscribe(response => {
+        this.loader = false;
+        console.log(response);
+        if (response.code === 1) {
+          this.success = true;
+          this.providerSubmit = false;
+        } else {
+          this.error = true;
+          this.responseMsg = this.vs.errorCode[this.lang][response.errorCode];
+        }
+      }, (error) => {
+        this.error = false;
+        this.responseMsg = this.vs.errorCode[this.lang]['ER08'];
+      });
+    }
+    console.log('tested');
+  }
+
+  getProfile() {
+    this.funcName = 'get_user_details';
+    const post_data = {'user_id': this.loginDetails.user_id};
+    this.service.post_data(this.funcName, post_data).subscribe(response => {
+      if (response.code === 1) {
+          this.provider = response.responseResult;
+          this.providerForm.patchValue({
+            cr_manager: this.provider.cr_manager,
+            contact: this.provider.contact,
+            location: this.provider.location,
+            email_id: this.provider.email_id,
+            provider_id: this.provider.id,
+            phone: this.provider.phone
+          });
+      } else {
+        this.error = true;
+        this.responseMsg = this.vs.errorCode[this.lang][response.errorCode];
+      }
+    }, (error) => {
+      this.error = true;
+      this.responseMsg =  this.vs.errorCode[this.lang]['ER08'];
+    });
   }
 
-  goToPage(path,data=null){
-    console.log(data)
-    this.router.navigateByUrl(path,{queryParams:data});
+  goToPage(path, data = null) {
+    console.log(data);
+    this.router.navigateByUrl(path, {queryParams: data});
     document.body.scrollTop = document.documentElement.scrollTop = 0;
   }
 
+  logout() {
+    this.service.logout();
+  }
+
 }

src/app/delivery/list-driver/list-driver.component.html

+<div class="custom_loader_wrapper" *ngIf="loader">
+    <div class="custom_loader_ring"></div>
+</div>
+<header class="provider_header">
+    <div class="row">
+      <div class="col-md-6">
+        <h4>Driver Management</h4>
+      </div>
+      <div class="col-md-6 textRight relative">
+          <button class="logout" (click)="logout()">
+              <img src="assets/images/asset_logout.png">
+            Logout</button>
+          <img src="assets/images/asset_logo1.png">
+          <span (click)="goToPage('checker/changepin')">Change PIN</span>
+      </div>
+    </div>
+  </header>
+<section>
+    <div class="provider_content">
+      <h3>Driver List</h3>
+      <div class="provider_inner_content">
+          <div class="table-responsive">   
+              <div class="alert alert-danger alert-dismissible" *ngIf="error">
+                  <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
+                  <strong>Warning!</strong> {{responseMsg}}
+              </div>
+              <div class="alert alert-success alert-dismissible" *ngIf="success">
+                  <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
+                  <strong>Success!</strong> Forex provider removed successfully
+                </div>      
+              <table class="table">
+                <thead>
+                  <tr>
+                    <th>Provider Name</th>
+                    <th>Location</th>
+                    <th>Manager ID</th>
+                    <th>National ID</th>
+                    <th>Phone</th>
+                    <th>Email ID</th>
+                    <th class="textRight">
+                      <button class="add" (click)="goToPage('delivery/driveradd')">+</button>
+                    </th>
+                  </tr>
+                </thead>
+                <tbody *ngIf="providerList; else noProvider">
+                  <tr *ngFor="let provider of providerList;">
+                    <td>{{provider.name | titlecase}}</td>
+                    <td>{{provider.location | titlecase}}</td>
+                    <td>{{provider.cr_manager | titlecase}}</td>
+                    <td>{{provider.cr_id}}</td>
+                    <td>{{provider.phone}}</td>
+                    <td>{{provider.email_id}}</td>
+                    <td class="textRight">
+                      <button class="edit_btn"(click)="editClick(provider.id)"></button>
+                      <button class="delete_btn" (click)="deleteClick(provider.id)"></button>
+                    </td>
+                  </tr>
+                </tbody>                
+              </table>
+              <ng-template #noProvider></ng-template>
+          </div>
+      </div>
+    </div>
+  </section>
\ No newline at end of file

src/app/delivery/manageprovider/manageprovider.component.spec.ts → src/app/delivery/list-driver/list-driver.component.spec.ts

 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { ManageproviderComponent } from './manageprovider.component';
+import { ListDriverComponent } from './list-driver.component';
 
-describe('ManageproviderComponent', () => {
-  let component: ManageproviderComponent;
-  let fixture: ComponentFixture<ManageproviderComponent>;
+describe('ListDriverComponent', () => {
+  let component: ListDriverComponent;
+  let fixture: ComponentFixture<ListDriverComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ ManageproviderComponent ]
+      declarations: [ ListDriverComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(ManageproviderComponent);
+    fixture = TestBed.createComponent(ListDriverComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/delivery/list-driver/list-driver.component.ts

+import { Component, OnInit } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+import { WebService } from './../../providers/web.service';
+import { ValidationService } from './../../providers/validation.service';
+
+@Component({
+  selector: 'app-list-driver',
+  templateUrl: './list-driver.component.html',
+  styleUrls: ['./list-driver.component.scss']
+})
+export class ListDriverComponent implements OnInit {
+  providerList: any[];
+  fname: any;
+  lang =  'ar';
+  responseMsg: any;
+  error: boolean;
+  success: boolean;
+  loader: boolean;
+  driverList: any[];
+  loginDetails: any;
+  userDetails: any;
+
+  constructor(private router: Router, private route: ActivatedRoute, public vs: ValidationService, public service: WebService) {
+    this.responseMsg = '';
+    this.error = false;
+    this.success = false;
+    this.loader = false;
+    this.loginDetails = JSON.parse(this.service.getLocalStorageItem('userData'));
+  }
+
+  ngOnInit() {
+    this.getProvider();
+  }
+
+  getProvider() {
+    this.fname = 'get_user_details';
+    const post_data = {'user_id': this.loginDetails.user_id};
+    this.service.post_data(this.fname, post_data).subscribe(response => {
+      if (response.code === 1) {
+        this.userDetails = response.responseResult;
+        this.providerDriver(this.userDetails.id);
+      } else {
+        this.error = true;
+        this.responseMsg = this.vs.errorCode[this.lang][response.errorCode];
+      }
+    }, (error) => {
+      this.error = true;
+      this.responseMsg =  this.vs.errorCode[this.lang]['ER08'];
+  });
+  }
+
+  providerDriver(provider_id: any) {
+    this.loader = true;
+    this.fname = 'get_drivers';
+    const post_data = {'provider_id': provider_id};
+      this.service.post_data(this.fname, post_data).subscribe(response => {
+        this.loader = false;
+        console.log(response);
+        if (response.code === 1) {
+          this.providerList = response.responseResult;
+        } else {
+          this.providerList = [];
+        }
+      }, (error) => {
+        // this.error = true;
+        // this.responseMsg =  this.vs.errorCode[this.lang]['ER08'];
+    });
+    const This = this;
+    setTimeout(function() {
+      This.responseMsg = '';
+    }, 3000);
+}
+
+  reset() {
+    this.error = false;
+    this.success = false;
+  }
+
+  deleteClick(provider_id: any) {
+    this.reset();
+    const res = confirm('Do you want to remove this user ?');
+    if (res === true) {
+      this.loader = true;
+      this.fname = 'provider_delete';
+      const post_data = {'provider_id': provider_id};
+        this.service.post_data(this.fname, post_data).subscribe(response => {
+          this.loader = false;
+          console.log(response);
+          if (response.code === 1) {
+            this.success = true;
+            console.log(this.success);
+            this.getProvider();
+          } else {
+            this.error = true;
+            this.responseMsg = this.vs.errorCode[this.lang][response.errorCode];
+          }
+        }, (error) => {
+          this.error = true;
+          this.responseMsg = this.vs.errorCode[this.lang]['ER08'];
+      });
+    }
+    /* const This = this;
+    setTimeout(function() {
+      This.responseMsg = '';
+    }, 3000); */
+  }
+
+  editClick(id: number) {
+    this.router.navigate(['delivery/driveredit/' + id]);
+  }
+
+  goToPage(path, data = null) {
+    console.log(data);
+    this.router.navigateByUrl(path, {queryParams: data});
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+  }
+
+  logout() {
+    this.service.logout();
+  }
+
+}

src/app/delivery/manageprovider/manageprovider.component.html

-<header class="provider_header">
-    <div class="row">
-      <div class="col-md-6">
-        <h4>Forex Delivery Service Provider</h4>
-      </div>
-      <div class="col-md-6 textRight relative">
-          <button class="logout">
-              <img src="assets/images/asset_logout.png">
-            Logout</button>
-          <img src="assets/images/asset_logo1.png">
-          <span (click)="goToPage('delivery/changepin')">Change PIN</span>
-      </div>
-    </div>
-  </header>
-<section>
-    <div class="provider_content">
-      <h3>Manage Delivery Service Provider</h3>
-      <div class="provider_inner_content">
-          <div class="table-responsive">          
-              <table class="table">
-                <thead>
-                  <tr>
-                    <th>Provider Name</th>
-                    <th>Location</th>
-                    <th>CR Manager</th>
-                    <th>CR ID</th>
-                    <th>Contact</th>
-                    <th>Phone</th>
-                    <th>Email ID</th>
-                    <th class="textRight">
-                      <button class="add" (click)="goToPage('delivery/addprovider')">+</button>
-                    </th>
-                  </tr>
-                </thead>
-                <tbody>
-                  <tr>
-                    <td></td>
-                    <td></td>
-                    <td></td>
-                    <td></td>
-                    <td></td>
-                    <td></td>
-                    <td></td>
-                    <td class="textRight">
-                      <button class="edit_btn"(click)="goToPage('delivery/editprovider')"></button>
-                      <button class="delete_btn"></button>
-                    </td>
-                  </tr>
-                  <tr>
-                      <td></td>
-                      <td></td>
-                      <td></td>
-                      <td></td>
-                      <td></td>
-                      <td></td>
-                      <td></td>
-                      <td class="textRight">
-                        <button class="edit_btn" (click)="goToPage('delivery/editprovider')"></button>
-                        <button class="delete_btn"></button>
-                      </td>
-                    </tr>
-                    <tr>
-                        <td></td>
-                        <td></td>
-                        <td></td>
-                        <td></td>
-                        <td></td>
-                        <td></td>
-                        <td></td>
-                        <td class="textRight">
-                          <button class="edit_btn" (click)="goToPage('delivery/editprovider')"></button>
-                          <button class="delete_btn"></button>
-                        </td>
-                      </tr>
-                      <tr>
-                          <td></td>
-                          <td></td>
-                          <td></td>
-                          <td></td>
-                          <td></td>
-                          <td></td>
-                          <td></td>
-                          <td class="textRight">
-                            <button class="edit_btn" (click)="goToPage('delivery/editprovider')"></button>
-                            <button class="delete_btn"></button>
-                          </td>
-                        </tr>
-                        <tr>
-                            <td></td>
-                            <td></td>
-                            <td></td>
-                            <td></td>
-                            <td></td>
-                            <td></td>
-                            <td></td>
-                            <td class="textRight">
-                              <button class="edit_btn" (click)="goToPage('delivery/editprovider')"></button>
-                              <button class="delete_btn"></button>
-                            </td>
-                          </tr>
-                          <tr>
-                              <td></td>
-                              <td></td>
-                              <td></td>
-                              <td></td>
-                              <td></td>
-                              <td></td>
-                              <td></td>
-                              <td class="textRight">
-                                <button class="edit_btn" (click)="goToPage('delivery/editprovider')"></button>
-                                <button class="delete_btn"></button>
-                              </td>
-                            </tr>
-                            <tr>
-                                <td></td>
-                                <td></td>
-                                <td></td>
-                                <td></td>
-                                <td></td>
-                                <td></td>
-                                <td></td>
-                                <td class="textRight">
-                                  <button class="edit_btn" (click)="goToPage('delivery/editprovider')"></button>
-                                  <button class="delete_btn"></button>
-                                </td>
-                              </tr>
-                </tbody>
-              </table>
-          </div>
-      </div>
-    </div>
-  </section>
\ No newline at end of file

src/app/delivery/manageprovider/manageprovider.component.ts

-import { Component, OnInit } from '@angular/core';
-import { Router,ActivatedRoute } from '@angular/router';
-
-@Component({
-  selector: 'app-manageprovider',
-  templateUrl: './manageprovider.component.html',
-  styleUrls: ['./manageprovider.component.scss']
-})
-export class ManageproviderComponent implements OnInit {
-
-  constructor(private router: Router,private route: ActivatedRoute) { }
-
-  ngOnInit() {
-  }
-
-  
-  goToPage(path,data=null){
-    console.log(data)
-    this.router.navigateByUrl(path,{queryParams:data});
-    document.body.scrollTop = document.documentElement.scrollTop = 0;
-  }
-
-}

src/app/delivery/transaction/transaction.component.ts

 import { Component, OnInit } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+import { WebService } from './../../providers/web.service';
+import { ValidationService } from './../../providers/validation.service';
 
 @Component({
   selector: 'app-transaction',
@@ -6,10 +9,176 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./transaction.component.scss']
 })
 export class TransactionComponent implements OnInit {
+  transactionList: any[];
+  fname: any;
+  lang =  'ar';
+  responseMsg: any;
+  error: boolean;
+  success: boolean;
+  loader: boolean;
+  loginDetails: any;
+  meta: any;
+  userDetails: any;
+  selectedData: any;
+  driverList: any[];
+  driverStatus: boolean;
+  driverId: any;
+  assignError: boolean;
 
-  constructor() { }
+  constructor(private router: Router, private route: ActivatedRoute, public vs: ValidationService, public service: WebService) {
+    this.responseMsg = '';
+    this.error = false;
+    this.success = false;
+    this.loader = false;
+    this.driverStatus = true;
+    this.assignError = false;
+    this.loginDetails = JSON.parse(this.service.getLocalStorageItem('userData'));
+    console.log(this.loginDetails);
+  }
 
   ngOnInit() {
+    this.getProvider();
+  }
+
+  providerDriver(provider_id: any) {
+    this.loader = true;
+    this.fname = 'get_drivers';
+    const post_data = {'provider_id': provider_id};
+      this.service.post_data(this.fname, post_data).subscribe(response => {
+        this.loader = false;
+        console.log(response);
+        if (response.code === 1) {
+          this.driverList = response.responseResult;
+        } else {
+          this.driverList = [];
+        }
+      }, (error) => {
+        // this.error = true;
+        // this.responseMsg =  this.vs.errorCode[this.lang]['ER08'];
+    });
+    const This = this;
+    setTimeout(function() {
+      This.responseMsg = '';
+    }, 3000);
+}
+
+  getTransaction(id: any, page_number: number) {
+    this.error = false;
+    this.loader = true;
+    this.fname = 'transaction_list';
+    const post_data = {'type': 3, 'user_id': id, 'page': page_number};
+      this.service.post_data(this.fname, post_data).subscribe(response => {
+        this.loader = false;
+        console.log(response);
+        if (response.code === 1) {
+          this.transactionList = response.responseResult.data;
+          this.meta = response.responseResult.meta;
+          console.log(this.transactionList);
+        } else {
+          this.transactionList = [];
+          this.error = true;
+          this.responseMsg = this.vs.errorCode[this.lang][response.errorCode];
+        }
+      }, (error) => {
+        this.error = true;
+        this.responseMsg =  this.vs.errorCode[this.lang]['ER08'];
+    });
+
+  }
+
+  goToPage(path, data = null) {
+    console.log(data);
+    this.router.navigateByUrl(path, {queryParams: data});
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+  }
+
+  getProvider() {
+    this.fname = 'get_user_details';
+    const post_data = {'user_id': this.loginDetails.user_id};
+    this.service.post_data(this.fname, post_data).subscribe(response => {
+      if (response.code === 1) {
+        this.userDetails = response.responseResult;
+        this.getTransaction(this.userDetails.id, 1);
+        this.providerDriver(this.userDetails.id);
+      } else {
+        this.error = true;
+        this.responseMsg = this.vs.errorCode[this.lang][response.errorCode];
+      }
+    }, (error) => {
+      this.error = true;
+      this.responseMsg =  this.vs.errorCode[this.lang]['ER08'];
+  });
+  }
+
+  get_status(status: any) {
+    switch (status) {
+      case 0:
+        return 'Cancelled';
+        break;
+      case 1:
+        return 'Requested';
+        break;
+      case 2:
+        return 'Processing';
+        break;
+      case 3:
+        return 'Completed';
+        break;
+      default:
+      break;
+    }
+  }
+
+  getCustomer(data: any, type: any) {
+    if (data !== null) {
+      const userData = JSON.parse(data);
+      return userData[type];
+    } else {
+      return '';
+    }
+  }
+
+  getNumber(num) {
+    return new Array(num);
+  }
+
+  assignClick(index: any) {
+    this.selectedData = this.transactionList[index];
+    console.log(this.selectedData);
+  }
+
+  selectDriver(driver) {
+    this.driverId = driver;
+    this.driverStatus = false;
+  }
+
+  driverAssign() {
+    this.loader = true;
+    this.assignError = false;
+    this.fname = 'assign_driver';
+    const post_data = {'trans_id': this.selectedData.id, 'driver_id': this.driverId};
+      this.service.post_data(this.fname, post_data).subscribe(response => {
+        this.loader = false;
+        console.log(response);
+        if (response.code === 1) {
+          this.driverId = undefined;
+          this.driverStatus = false;
+          this.getTransaction(this.userDetails.id, 1);
+        } else {
+          this.assignError = true;
+        }
+      }, (error) => {
+        // this.error = true;
+        // this.responseMsg =  this.vs.errorCode[this.lang]['ER08'];
+    });
+    const This = this;
+    setTimeout(function() {
+      This.responseMsg = '';
+    }, 3000);
+  }
+
+  logout() {
+    this.service.logout();
   }
 
 }

src/app/forex/addprovider/addprovider.component.html

-<header class="provider_header">
-  <div class="row">
-    <div class="col-md-6">
-      <h4>Forex Delivery Service Provider</h4>
-    </div>
-    <div class="col-md-6 textRight relative">
-        <button class="logout">
-            <img src="assets/images/asset_logout.png">
-          Logout</button>
-        <img src="assets/images/asset_logo1.png">
-        <span (click)="goToPage('forex/changepin')">Change PIN</span>
-    </div>
-  </div>
-</header>
-<section>
-  <div class="provider_content">
-    
-    <h3>Add Delivery Provider</h3>
-    <div class="provider_inner_content">
-      <div class="row">
-        <div class="col">
-          <div class="provider_data_content">
-              <p>Provider Name</p>
-              <input class="provider_input" placeholder="" type="text">
-          </div>
-        </div>
-        <div class="col">
-            <div class="provider_data_content">
-                <p>Pin</p>
-                <input class="provider_pin" placeholder="" type="password" maxlength="1">
-                <input class="provider_pin" placeholder="" type="password" maxlength="1">
-                <input class="provider_pin" placeholder="" type="password" maxlength="1">
-                <input class="provider_pin" placeholder="" type="password" maxlength="1">
-                <input class="provider_pin" placeholder="" type="password" maxlength="1">
-                <input class="provider_pin m0" placeholder="" type="password" maxlength="1">
-            </div>
-        </div>
-        <div class="col">
-            <div class="provider_data_content">
-                <p>Confirm Pin</p>
-                <input class="provider_pin" placeholder="" type="password" maxlength="1">
-                <input class="provider_pin" placeholder="" type="password" maxlength="1">
-                <input class="provider_pin" placeholder="" type="password" maxlength="1">
-                <input class="provider_pin" placeholder="" type="password" maxlength="1">
-                <input class="provider_pin" placeholder="" type="password" maxlength="1">
-                <input class="provider_pin m0" placeholder="" type="password" maxlength="1">
-            </div>
-        </div>
-      </div>
-      <div class="row">
-          <div class="col">
-            <div class="provider_data_content">
-                <p>Location</p>
-                <input class="provider_input" placeholder="" type="text">
-            </div>
-          </div>
-          <div class="col">
-              <div class="provider_data_content">
-                  <p>CR ID</p>
-                  <input class="provider_input" placeholder="" type="text">
-              </div>
-          </div>
-          <div class="col">
-              <div class="provider_data_content">
-                  <p>CR Manager</p>
-                  <input class="provider_input" placeholder="" type="text">
-              </div>
-          </div>
-        </div>
-        <div class="row">
-            <div class="col">
-              <div class="provider_data_content">
-                  <p>Contact</p>
-                  <input class="provider_input" placeholder="" type="number">
-              </div>
-            </div>
-            <div class="col">
-                <div class="provider_data_content">
-                    <p>Phone</p>
-                    <input class="provider_input" placeholder="" type="number">
-                </div>
-            </div>
-            <div class="col">
-                <div class="provider_data_content">
-                    <p>Email id</p>
-                    <input class="provider_input" placeholder="" type="mail">
-                </div>
-            </div>
-          </div>
-          <div class="row">
-              <div class="col">
-                <div class="add_provider_btn_bay p0">
-                    <button class="edit_btn floatRight" (click)="goToPage('forex/editprovider')">Edit</button>
-                  <div class="clear"></div>
-                </div>
-              </div>
-            </div>
-          <div class="row">
-            <div class="col">
-              <div class="add_provider_btn_bay">
-                <button class="save_btn floatRight" (click)="goToPage('forex/manageprovider')">Save</button>
-                <button class="cancel_btn floatRight">Cancel</button>
-                <div class="clear"></div>
-              </div>
-            </div>
-          </div>
-    </div>
-  </div>
-</section>
\ No newline at end of file

src/app/forex/addprovider/addprovider.component.ts

-import { Component, OnInit } from '@angular/core';
-import { Router,ActivatedRoute } from '@angular/router';
-
-@Component({
-  selector: 'app-addprovider',
-  templateUrl: './addprovider.component.html',
-  styleUrls: ['./addprovider.component.scss']
-})
-export class AddproviderComponent implements OnInit {
-
-  constructor(private router: Router,private route: ActivatedRoute) { }
-
-  ngOnInit() {
-  }
-
-  goToPage(path,data=null){
-    console.log(data)
-    this.router.navigateByUrl(path,{queryParams:data});
-    document.body.scrollTop = document.documentElement.scrollTop = 0;
-  }
-
-}

src/app/forex/changepin/changepin.component.html

@@ -11,46 +11,68 @@
                 <div class="login_row">
                     <p>Old PIN</p>
                     <div class="login_pin">
-                      <input class="log_pin" type="password" maxlength="1" value="0">
-                      <input class="log_pin" type="password" maxlength="1" value="0">
-                      <input class="log_pin" type="password" maxlength="1" value="0">
-                      <input class="log_pin" type="password" maxlength="1" value="0">
-                      <input class="log_pin" type="password" maxlength="1" value="0">
-                      <input class="log_pin m0"  type="password" maxlength="1" value="0"> 
+                      <input class="log_pin" type="password" maxlength="1" #old1  (keyup)="processKeyUp($event, old2)">
+                      <input class="log_pin" type="password" maxlength="1" #old2 (keydown.backspace)="processBack($event, old1)" (keyup)="processKeyUp($event, old3)">
+                      <input class="log_pin" type="password" maxlength="1" #old3 (keydown.backspace)="processBack($event, old2)" (keyup)="processKeyUp($event, old4)">
+                      <input class="log_pin" type="password" maxlength="1" #old4 (keydown.backspace)="processBack($event, old3)" (keyup)="processKeyUp($event, old5)">
+                      <input class="log_pin" type="password" maxlength="1" #old5 (keydown.backspace)="processBack($event, old4)" (keyup)="processKeyUp($event, old6)">
+                      <input class="log_pin m0"  type="password" maxlength="1" #old6 (keydown.backspace)="processBack($event, old5)"> 
                     </div>
+                    <div class="s_error" *ngIf="passwordErr">
+                        <div class="s_validation">{{error_msg.password}} </div>
+                     </div>
                  </div>
                  <div class="login_row">
                     <p>New PIN</p>
                     <div class="login_pin">
-                      <input class="log_pin" type="password" maxlength="1" value="0">
-                      <input class="log_pin" type="password" maxlength="1" value="0">
-                      <input class="log_pin" type="password" maxlength="1" value="0">
-                      <input class="log_pin" type="password" maxlength="1" value="0">
-                      <input class="log_pin" type="password" maxlength="1" value="0">
-                      <input class="log_pin m0"  type="password" maxlength="1" value="0"> 
+                      <input class="log_pin" type="password" maxlength="1" #new1 (keyup)="processKeyUp($event, new2)">
+                      <input class="log_pin" type="password" maxlength="1" #new2 (keydown.backspace)="processBack($event, new1)" (keyup)="processKeyUp($event, new3)">
+                      <input class="log_pin" type="password" maxlength="1" #new3 (keydown.backspace)="processBack($event, new2)" (keyup)="processKeyUp($event, new4)">
+                      <input class="log_pin" type="password" maxlength="1" #new4 (keydown.backspace)="processBack($event, new3)" (keyup)="processKeyUp($event, new5)">
+                      <input class="log_pin" type="password" maxlength="1" #new5 (keydown.backspace)="processBack($event, new4)" (keyup)="processKeyUp($event, new6)">
+                      <input class="log_pin m0"  type="password" maxlength="1" #new6 (keydown.backspace)="processBack($event, new5)"> 
                     </div>
                  </div>
+                 <div class="s_error" *ngIf="newpasswordErr">
+                     <div class="s_validation">{{error_msg.password}} </div>
+                  </div>
                  <div class="login_row">
                     <p>Confirm PIN</p>
                     <div class="login_pin">
-                      <input class="log_pin" type="password" maxlength="1" value="0">
-                      <input class="log_pin" type="password" maxlength="1" value="0">
-                      <input class="log_pin" type="password" maxlength="1" value="0">
-                      <input class="log_pin" type="password" maxlength="1" value="0">
-                      <input class="log_pin" type="password" maxlength="1" value="0">
-                      <input class="log_pin m0"  type="password" maxlength="1" value="0"> 
+                      <input class="log_pin" type="password" maxlength="1" #conf1  (keyup)="processKeyUp($event, conf2)">
+                      <input class="log_pin" type="password" maxlength="1" #conf2 (keydown.backspace)="processBack($event, conf1)" (keyup)="processKeyUp($event, conf3)">
+                      <input class="log_pin" type="password" maxlength="1" #conf3 (keydown.backspace)="processBack($event, conf2)" (keyup)="processKeyUp($event, conf4)">
+                      <input class="log_pin" type="password" maxlength="1" #conf4 (keydown.backspace)="processBack($event, conf3)" (keyup)="processKeyUp($event, conf5)">
+                      <input class="log_pin" type="password" maxlength="1" #conf5 (keydown.backspace)="processBack($event, conf4)" (keyup)="processKeyUp($event, conf6)">
+                      <input class="log_pin m0"  type="password" maxlength="1" #conf6 (keydown.backspace)="processBack($event, conf5)"> 
                     </div>
                  </div>
+                 <div class="s_error" *ngIf="confpasswordErr">
+                     <div class="s_validation">{{error_msg.password}} </div>
+                  </div>
+                  <div class="s_error" *ngIf="notMatchErr">
+                     <div class="s_validation">{{error_msg.confirm}} </div>
+                  </div>
              </div>
           </div>
        </div>
+       <div class="alert alert-danger alert-dismissible" *ngIf="resetError">
+            <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
+            <strong>Warning!</strong> {{resetMsg}}
+        </div>
+
+       <div class="alert alert-success alert-dismissible" *ngIf="!resetError && !error && loginSubmit">
+            <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
+            <strong>Success!</strong> Password Updated Successfully
+          </div>
+       <!-- <div *ngIf="!resetError && !error && loginSubmit" class="s_validation">Passwod Updated Successfully</div> -->
        <div class="login_btn_bay">
           <div class="row">
               <div class="col-md-6">
-                  <button class="cancel_btn" (click)="goToPage('start/forgot')">Cancel</button>
+                  <button class="cancel_btn" (click)="cancelClick()">Cancel</button>
               </div>
               <div class="col-md-6">
-                <button class="login_btn" (click)="goToPage('start/login')">Save</button>
+                <button class="login_btn" (click)="saveClick()">Save</button>
               </div>
            </div>
        </div>

src/app/forex/changepin/changepin.component.ts

-import { Component, OnInit } from '@angular/core';
-import { Router,ActivatedRoute } from '@angular/router';
+import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+import { ValidationService } from './../../providers/validation.service';
+import { SubjectService } from './../../providers/subject.service';
+import { WebService } from './../../providers/web.service';
+import {Location} from '@angular/common';
+
 
 @Component({
   selector: 'app-changepin',
@@ -7,15 +12,213 @@ import { Router,ActivatedRoute } from '@angular/router';
   styleUrls: ['./changepin.component.scss']
 })
 export class ChangepinComponent implements OnInit {
+  @ViewChild('old1') old1: ElementRef;
+  @ViewChild('old2') old2: ElementRef;
+  @ViewChild('old3') old3: ElementRef;
+  @ViewChild('old4') old4: ElementRef;
+  @ViewChild('old5') old5: ElementRef;
+  @ViewChild('old6') old6: ElementRef;
+
+  @ViewChild('new1') new1: ElementRef;
+  @ViewChild('new2') new2: ElementRef;
+  @ViewChild('new3') new3: ElementRef;
+  @ViewChild('new4') new4: ElementRef;
+  @ViewChild('new5') new5: ElementRef;
+  @ViewChild('new6') new6: ElementRef;
+
+  @ViewChild('conf1') conf1: ElementRef;
+  @ViewChild('conf2') conf2: ElementRef;
+  @ViewChild('conf3') conf3: ElementRef;
+  @ViewChild('conf4') conf4: ElementRef;
+  @ViewChild('conf5') conf5: ElementRef;
+  @ViewChild('conf6') conf6: ElementRef;
+
+  error_msg: any[];
+  lang =  'en';
+  model: any;
+  passwordErr: boolean;
+  newpasswordErr: boolean;
+  confpasswordErr: boolean;
+  notMatchErr: boolean;
+  password: any;
+  fname: any;
+  loginSubmit: boolean;
+  resetError: boolean;
+  resetMsg: any;
+  loginDetails: any;
+  error: boolean;
 
-  constructor(private router: Router,private route: ActivatedRoute) { }
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute,
+    public vs: ValidationService,
+    public service: WebService,
+    public subjectService: SubjectService,
+    public location: Location
+  ) {
+    this.loginDetails = JSON.parse(this.service.getLocalStorageItem('userData'));
+    this.error = false;
+    this.passwordErr = false;
+    this.newpasswordErr = false;
+    this.confpasswordErr = false;
+    this.notMatchErr = false;
+    this.error_msg = this.vs.errorList[this.lang];
+  }
 
   ngOnInit() {
   }
-  goToPage(path,data=null){
-    console.log(data)
-    this.router.navigateByUrl(path,{queryParams:data});
-    document.body.scrollTop = document.documentElement.scrollTop = 0;
+
+  processKeyUp(e: any, el: any) {
+    el.value = '';
+    console.log(e);
+    if ((e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 96 && e.keyCode <= 105)) {
+      e.target.value = e.key;
+      el.focus();
+    } else {
+      if (e.keyCode !== 8) {
+        e.target.value = '';
+      }
+    }
+  }
+
+  processBack (e: any, el: any) {
+    if (e.keyCode === 8) {
+      e.target.value = '';
+      el.focus();
+    }
+  }
+
+  saveClick() {
+
+    this.loginSubmit = true;
+    this.passwordErr = false;
+    this.newpasswordErr = false;
+    this.confpasswordErr = false;
+    this.notMatchErr = false;
+    this.resetError = false;
+    this.error = false;
+    const password = [];
+    const newpassword = [];
+    const confirm = [];
+
+    password[0] = this.old1.nativeElement.value;
+    password[1] = this.old2.nativeElement.value;
+    password[2] = this.old3.nativeElement.value;
+    password[3] = this.old4.nativeElement.value;
+    password[4] = this.old5.nativeElement.value;
+    password[5] = this.old6.nativeElement.value;
+
+    newpassword[0] = this.new1.nativeElement.value;
+    newpassword[1] = this.new2.nativeElement.value;
+    newpassword[2] = this.new3.nativeElement.value;
+    newpassword[3] = this.new4.nativeElement.value;
+    newpassword[4] = this.new5.nativeElement.value;
+    newpassword[5] = this.new6.nativeElement.value;
+
+
+    confirm[0] = this.conf1.nativeElement.value;
+    confirm[1] = this.conf2.nativeElement.value;
+    confirm[2] = this.conf3.nativeElement.value;
+    confirm[3] = this.conf4.nativeElement.value;
+    confirm[4] = this.conf5.nativeElement.value;
+    confirm[5] = this.conf6.nativeElement.value;
+
+
+    const oldpass = password.join('');
+    const newpass = newpassword.join('');
+    const confirmpass = confirm.join('');
+
+      if (oldpass === '') {
+        this.passwordErr = true;
+        this.error = true;
+      } else {
+        for (const i in password) {
+          if (password[i] === '') {
+            this.passwordErr = true;
+            this.error = true;
+          }
+        }
+      }
+
+      if (newpass === '') {
+        this.newpasswordErr = true;
+        this.error = true;
+      } else {
+        for (const i in newpassword) {
+          if (newpassword[i] === '') {
+            this.newpasswordErr = true;
+            this.error = true;
+          }
+        }
+      }
+
+      if (confirmpass === '') {
+        this.confpasswordErr = true;
+        this.error = true;
+      } else {
+        for (const i in confirm) {
+          if (confirm[i] === '') {
+            this.confpasswordErr = true;
+            this.error = true;
+          }
+        }
+      }
+
+      console.log(this.error);
+
+
+
+      if (this.error === false) {
+        if (newpass !== confirmpass) {
+          this.notMatchErr = true;
+          this.error = true;
+        }
+      }
+
+    this.fname = 'reset_pin';
+    const post_data = {'user_id': this.loginDetails.user_id, 'password': oldpass, 'new_password': newpass};
+      this.service.post_data(this.fname, post_data).subscribe(response => {
+        console.log(response);
+        if (response.code === 1) {
+          const responseData = response.responseResult;
+          this.reset();
+        } else {
+          this.resetError = true;
+          this.resetMsg = this.vs.errorCode[this.lang][response.errorCode];
+          console.log(this.resetMsg);
+        }
+      }, (error) => {
+        this.resetError = true;
+        this.resetMsg = this.vs.errorCode[this.lang]['ER08'];
+        console.log(this.resetMsg);
+    });
+  }
+
+  reset() {
+    this.conf1.nativeElement.value = '';
+    this.conf2.nativeElement.value = '';
+    this.conf3.nativeElement.value = '';
+    this.conf4.nativeElement.value = '';
+    this.conf5.nativeElement.value = '';
+    this.conf6.nativeElement.value = '';
+
+    this.new1.nativeElement.value = '';
+    this.new2.nativeElement.value = '';
+    this.new3.nativeElement.value = '';
+    this.new4.nativeElement.value = '';
+    this.new5.nativeElement.value = '';
+    this.new6.nativeElement.value = '';
+
+    this.old1.nativeElement.value = '';
+    this.old2.nativeElement.value = '';
+    this.old3.nativeElement.value = '';
+    this.old4.nativeElement.value = '';
+    this.old5.nativeElement.value = '';
+    this.old6.nativeElement.value = '';
+  }
+
+  cancelClick() {
+    this.location.back();
   }
 
 }

src/app/checker/currency/currency.component.html → src/app/forex/currency/currency.component.html

@@ -4,10 +4,10 @@
 <header class="provider_header">
   <div class="row">
     <div class="col-md-6">
-      <h4>Forex Delivery Service Provider</h4>
+      <h4>Forex Currency Rate</h4>
     </div>
     <div class="col-md-6 textRight relative">
-        <button class="logout">
+        <button class="logout" (click)="logout()">
             <img src="assets/images/asset_logout.png">
           Logout</button>
         <img src="assets/images/asset_logo1.png">
@@ -66,7 +66,7 @@
               
               <div formArrayName="currency">
               <div class="row">
-                <div class="col-md-6" *ngFor="let address of currencyForm.controls.currency.controls; let i=index" [formGroupName]="i">
+                <div class="col-md-6" *ngFor="let address of formData.controls; let i=index" [formGroupName]="i">
                   <h6>{{selectedList[i].name}}</h6>
                    <input class="" type="hidden" formControlName="currency_id">
                   <input class="" type="number" formControlName="rate">                                          
@@ -92,7 +92,7 @@
           <div class="col">
             <div class="add_provider_btn_bay">
               <button class="save_btn floatRight">Save</button>
-              <button class="cancel_btn floatRight">Cancel</button>
+              <button class="cancel_btn floatRight" (click)="cancelClick()">Cancel</button>
               <div class="clear"></div>
             </div>
           </div>

src/app/checker/currency/currency.component.ts → src/app/forex/currency/currency.component.ts

@@ -25,6 +25,7 @@ export class CurrencyComponent implements OnInit {
   public currencyForm: FormGroup;
   loginDetails: any;
   currenySubmit: boolean;
+  userDetails: any;
 
   constructor(
     private router: Router,
@@ -34,7 +35,7 @@ export class CurrencyComponent implements OnInit {
     private fb: FormBuilder
   ) {
     this.currencyForm = this.fb.group({
-      'provider_id': [1, Validators.compose([Validators.required])],
+      'provider_id': ['', Validators.compose([Validators.required])],
       'currency': this.fb.array([])
     });
     this.responseMsg = '';
@@ -44,9 +45,10 @@ export class CurrencyComponent implements OnInit {
     this.buffer = [];
     this.packet = [];
     this.selectedList = [];
+    this.currencyList = [];
     this.currenySubmit = false;
     this.loginDetails = JSON.parse(this.service.getLocalStorageItem('userData'));
-    this.providerCurrency();
+    this.getProvider();
   }
 
   ngOnInit() {
@@ -66,7 +68,7 @@ export class CurrencyComponent implements OnInit {
   getCurrency() {
     this.loader = true;
     this.fname = 'currency';
-      this.service.get_data(this.fname).subscribe(response => {
+      this.service.post_data(this.fname,[]).subscribe(response => {
         this.loader = false;
         console.log(response);
         if (response.code === 1) {
@@ -86,10 +88,11 @@ export class CurrencyComponent implements OnInit {
     }, 3000);
   }
 
-  providerCurrency() {
+  providerCurrency(provider_id: any) {
       this.loader = true;
       this.fname = 'forex_currency';
-        this.service.get_data(this.fname).subscribe(response => {
+      const post_data = {'provider_id': provider_id};
+        this.service.post_data(this.fname, post_data).subscribe(response => {
           this.loader = false;
           console.log(response);
           if (response.code === 1) {
@@ -137,6 +140,7 @@ export class CurrencyComponent implements OnInit {
   }
 
   getunique(allList, ArrayList) {
+    console.log(allList, ArrayList);
     this.avaliableList = allList.filter(this.comparer(ArrayList));
     console.log(this.avaliableList);
   }
@@ -149,11 +153,12 @@ export class CurrencyComponent implements OnInit {
     };
   }
 
+  get formData() { return <FormArray>this.currencyForm.get('currency'); }
+
   patchValues() {
     console.log('called');
     console.log(this.selectedList);
-
-     const currencyCtrl = <FormArray>this.currencyForm.controls.currency;
+     const currencyCtrl = <FormArray>this.currencyForm.controls['currency'];
      currencyCtrl.controls = [];
     const currencyCount = this.selectedList.length;
     console.log(currencyCount);
@@ -193,6 +198,32 @@ export class CurrencyComponent implements OnInit {
       }
     }
 
+    getProvider() {
+      this.fname = 'get_user_details';
+      const post_data = {'user_id': this.loginDetails.user_id};
+      this.service.post_data(this.fname, post_data).subscribe(response => {
+        if (response.code === 1) {
+          this.userDetails = response.responseResult;
+          this.currencyForm.controls['provider_id'].setValue(this.userDetails.id);
+          this.providerCurrency(this.userDetails.id);
+        } else {
+          this.error = true;
+          this.responseMsg = this.vs.errorCode[this.lang][response.errorCode];
+        }
+      }, (error) => {
+        this.error = true;
+        this.responseMsg =  this.vs.errorCode[this.lang]['ER08'];
+    });
+    }
+
+    logout() {
+      this.service.logout();
+    }
+
+    cancelClick() {
+      this.router.navigate(['/forex/currency']);
+    }
+
 
 
 }

src/app/forex/editprovider/editprovider.component.html

+<div class="custom_loader_wrapper" *ngIf="loader">
+    <div class="custom_loader_ring"></div>
+</div>
 <header class="provider_header">
     <div class="row">
       <div class="col-md-6">
-        <h4>Forex Delivery Service Provider</h4>
+        <h4>Forex Provider</h4>
       </div>
       <div class="col-md-6 textRight relative">
-          <button class="logout">
+          <button class="logout" (click)="logout()">
               <img src="assets/images/asset_logout.png">
             Logout</button>
           <img src="assets/images/asset_logo1.png">
@@ -14,25 +17,38 @@
   </header>
 <section>
     <div class="provider_content">
-      <h3>Edit Delivery Service Provider</h3>
+      <h3>Edit Forex Provider</h3>
       <div class="provider_inner_content">
+          <div class="alert alert-success alert-dismissible" *ngIf="success">
+              <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
+              <strong>Success!</strong> Provider updated successfully.
+            </div>
+            <div class="alert alert-danger alert-dismissible" *ngIf="error">
+                <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
+                <strong>Warning!</strong> {{responseMsg}}
+            </div>
+        <form [formGroup]="providerForm" (ngSubmit)="editProcess()" autocomplete="off">
         <div class="row">
           <div class="col">
-            <div class="provider_data_content">
+            <div class="provider_data_content" *ngIf="provider">
                 <p>Provider Name</p>
-                <input class="provider_input" placeholder="" type="text" disabled>
+                <input class="provider_input" placeholder="" type="text" disabled [value]="provider.name">
             </div>
           </div>
           <div class="col">
               <div class="provider_data_content">
                   <p>Location</p>
-                  <input class="provider_input" placeholder="" type="text">
+                  <input class="provider_input" placeholder="" type="text" formControlName="location">
               </div>
-          </div>
+              <div class="s_error" *ngIf="!providerForm.controls['location'].valid && providerSubmit">
+                  <div class="s_validation" *ngIf="providerForm.controls['location'].hasError('required')">{{error_msg.required}} </div>
+              </div>
+            </div>
+          
           <div class="col">
-              <div class="provider_data_content">
+              <div class="provider_data_content" *ngIf="provider">
                   <p>CR ID</p>
-                  <input class="provider_input" placeholder="" type="text" disabled>
+                  <input class="provider_input" placeholder="" type="text" disabled [value]="provider.cr_id">
               </div>
           </div>
         </div>
@@ -40,55 +56,94 @@
             <div class="col">
                 <div class="provider_data_content">
                     <p>CR Manager</p>
-                    <input class="provider_input" placeholder="" type="text">
+                    <input class="provider_input" placeholder="" type="text"  formControlName="cr_manager">
+                </div>
+                <div class="s_error" *ngIf="!providerForm.controls['cr_manager'].valid && providerSubmit">
+                    <div class="s_validation" *ngIf="providerForm.controls['cr_manager'].hasError('required')">{{error_msg.required}} </div>
                 </div>
             </div>
             <div class="col">
                 <div class="provider_data_content">
                     <p>Contact</p>
-                    <input class="provider_input" placeholder="" type="text">
+                    <input class="provider_input" placeholder="" type="text" formControlName="contact">
                 </div>
-            </div>
-            <div class="col">
-                <div class="provider_data_content">
-                    <p>Phone</p>
-                    <input class="provider_input" placeholder="" type="number">
+                <div class="s_error" *ngIf="!providerForm.controls['contact'].valid && providerSubmit">
+                    <div class="s_validation" *ngIf="providerForm.controls['contact'].hasError('required')">{{error_msg.required}} </div>
                 </div>
               </div>
+              <div class="col">
+                  <div class="provider_data_content">
+                      <p>Phone</p>
+                      <input class="provider_input" placeholder="" type="number" formControlName="phone">
+                  </div>
+                  <div class="s_error" *ngIf="!providerForm.controls['phone'].valid && providerForm.controls['phone'].touched">
+                      <div class="s_validation" *ngIf="providerForm.controls['phone'].hasError('pattern')">{{error_msg.phone}}</div>
+                  </div>
+                  <div class="s_error" *ngIf="!providerForm.controls['phone'].valid && providerForm.controls['phone'].touched && !providerForm.controls['phone'].hasError('pattern')">
+
+                    <div class="s_validation" *ngIf="providerForm.controls['phone'].hasError('maxlength')">{{error_msg.maxLength}} 15</div>
+                      <div class="s_validation" *ngIf="providerForm.controls['phone'].hasError('minlength')">{{error_msg.minLength}} 8</div>
+                  </div>
+                  <div class="s_error" *ngIf="!providerForm.controls['phone'].valid && providerSubmit">
+                      <div class="s_validation" *ngIf="providerForm.controls['phone'].hasError('required')">{{error_msg.required}} </div>
+                  </div>
+              </div>
           </div>
           <div class="row">
               <div class="col">
                   <div class="provider_data_content">
                       <p>Email id</p>
-                      <input class="provider_input" placeholder="" type="mail">
+                      <input class="provider_input" placeholder="" type="mail" formControlName="email_id">
+                  </div>
+                  <div class="s_error" *ngIf="!providerForm.controls['email_id'].valid && providerForm.controls['email_id'].touched">
+                      <div class="s_validation" *ngIf="providerForm.controls['email_id'].hasError('pattern')">{{error_msg.email}} </div>
+                      <div class="s_validation" *ngIf="providerForm.controls['email_id'].hasError('maxlength')">{{error_msg.maxLength}} 50</div>
+                  </div>
+                  <div class="s_error" *ngIf="!providerForm.controls['email_id'].valid && providerSubmit">
+                      <div class="s_validation" *ngIf="providerForm.controls['email_id'].hasError('required')">{{error_msg.required}} </div>
                   </div>
               </div>
-              <div class="col">
-                <div class="provider_data_content">
-                  <p>Status</p>
-                  <select class="provider_select">
-                    <option>Online</option>
-                  </select>
-              </div>
-              </div>
-              <div class="col">
-                <div class="provider_data_content">
-                  <p>Deliver Provider</p>
-                  <select class="provider_select">
-                      <option></option>
-                    </select>
-              </div>
-              </div>
+                  <div class="col">
+                    <div class="provider_data_content">
+                        <p>Status</p>
+                        <select class="provider_input" formControlName="online_status">
+                          <option value="1">Online</option>
+                          <option value="0">Offline</option>
+                        </select>
+                    </div>
+                    <div class="s_error" *ngIf="!providerForm.controls['online_status'].valid && providerSubmit">
+                        <div class="s_validation" *ngIf="providerForm.controls['online_status'].hasError('required')">{{error_msg.required}} </div>
+                    </div>
+                  </div>
+
+                  <div class="col">
+                      <div class="provider_data_content">
+                          <p>Delivery Provider</p>
+                          <select class="provider_input" formControlName="deli_provider_id">
+                            <option *ngFor="let provider of providerList" [value]="provider.id">{{provider.name}}</option>
+                          </select>
+                      </div>
+                      <div class="s_error" *ngIf="!providerForm.controls['deli_provider_id'].valid && providerSubmit">
+                          <div class="s_validation" *ngIf="providerForm.controls['deli_provider_id'].hasError('required')">{{error_msg.required}} </div>
+                      </div>
+                    </div>
+              <!-- <div class="col">
+                  <div class="provider_data_content">
+                      <p></p>
+                    <div class="edit_delivery">Edit Delivery Driver</div>
+                    </div>
+              </div> -->
             </div>
             <div class="row">
               <div class="col">
                 <div class="add_provider_btn_bay">
-                  <button class="save_btn floatRight" (click)="goToPage('forex/manageprovider')">Save</button>
-                  <button class="cancel_btn floatRight">Cancel</button>
+                  <button class="save_btn floatRight">Save</button>
+                  <button class="cancel_btn floatRight" (click)="cancelClick()">Cancel</button>
                   <div class="clear"></div>
                 </div>
               </div>
             </div>
+            </form>
       </div>
     </div>
   </section>
\ No newline at end of file

src/app/forex/editprovider/editprovider.component.ts

 import { Component, OnInit } from '@angular/core';
-import { Router,ActivatedRoute } from '@angular/router';
+import { Router, ActivatedRoute } from '@angular/router';
+import { WebService } from './../../providers/web.service';
+import { ValidationService } from './../../providers/validation.service';
+import { FormControl, FormGroup, FormBuilder, Validators, ValidationErrors } from '@angular/forms';
+
 @Component({
   selector: 'app-editprovider',
   templateUrl: './editprovider.component.html',
   styleUrls: ['./editprovider.component.scss']
 })
 export class EditproviderComponent implements OnInit {
+  provider: any;
+  funcName: any;
+  lang =  'ar';
+  responseMsg: any;
+  error: boolean;
+  success: boolean;
+  loader: boolean;
+  providerForm: FormGroup;
+  mobnumPattern = '^((\\+?)|0)?[0-9]{8,15}$';
+  emailPattern = '^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$';
+  providerSubmit: boolean;
+  error_msg: any[];
+  providerList: any[];
+  loginDetails: any;
+  userDetails: any;
 
-  constructor(private router: Router,private route: ActivatedRoute) { }
+  constructor(private router: Router,
+    private route: ActivatedRoute,
+    public vs: ValidationService,
+    public service: WebService,
+    private formBuilder: FormBuilder
+  ) {
+    this.loader = false;
+    this.error = false;
+    this.success = false;
+    this.providerSubmit = false;
+    this.error_msg = this.vs.errorList[this.lang];
+    this.loginDetails = JSON.parse(this.service.getLocalStorageItem('userData'));
+  }
 
   ngOnInit() {
+
+    this.getProfile();
+    this.getProviderList();
+    this.providerForm = this.formBuilder.group({
+      'cr_manager':  ['', Validators.compose([Validators.required])],
+      'contact':  ['', Validators.compose([Validators.required])],
+      'location':  ['', Validators.compose([Validators.required])],
+      'email_id': ['', Validators.compose([Validators.required, Validators.maxLength(50), Validators.pattern(this.emailPattern)])],
+      // tslint:disable-next-line:max-line-length
+      'phone':  ['', Validators.compose([Validators.required, Validators.minLength(8), Validators.maxLength(15), Validators.pattern(this.mobnumPattern)])],
+      'type':  [2],
+      'provider_id': [],
+      'online_status':  ['', Validators.compose([Validators.required])],
+      'deli_provider_id': ['', Validators.compose([Validators.required])],
+    });
+  }
+
+  getProviderList() {
+    this.loader = true;
+    this.funcName = 'providers';
+    const post_data = {'type': 3};
+      this.service.post_data(this.funcName, post_data).subscribe(response => {
+        this.loader = false;
+        console.log(response);
+        if (response.code === 1) {
+          this.providerList = response.responseResult;
+        } else {
+          this.error = true;
+          this.responseMsg = this.vs.errorCode[this.lang][response.errorCode];
+        }
+      }, (error) => {
+        this.error = true;
+        this.responseMsg =  this.vs.errorCode[this.lang]['ER08'];
+    });
+    const This = this;
+    setTimeout(function() {
+      This.responseMsg = '';
+    }, 3000);
+  }
+
+  cancelClick() {
+    this.router.navigate(['/checker/forex']);
   }
 
-  goToPage(path,data=null){
-    console.log(data)
-    this.router.navigateByUrl(path,{queryParams:data});
+  editProcess() {
+    const This = this;
+    this.error = false;
+    this.success = false;
+    console.log(this.providerForm.value);
+    this.providerSubmit = true;
+    if (this.providerForm.valid) {
+      this.loader = true;
+      const providerObj = this.providerForm.value;
+      this.funcName = 'provider_edit';
+      this.service.post_data(this.funcName, providerObj).subscribe(response => {
+        this.loader = false;
+        console.log(response);
+        if (response.code === 1) {
+          this.success = true;
+          this.providerSubmit = false;
+        } else {
+          this.error = true;
+          this.responseMsg = this.vs.errorCode[this.lang][response.errorCode];
+        }
+      }, (error) => {
+        this.error = false;
+        this.responseMsg = this.vs.errorCode[this.lang]['ER08'];
+      });
+    }
+    console.log('tested');
+  }
+
+  getProfile() {
+    this.funcName = 'get_user_details';
+    const post_data = {'user_id': this.loginDetails.user_id};
+    this.service.post_data(this.funcName, post_data).subscribe(response => {
+      if (response.code === 1) {
+          this.provider = response.responseResult;
+          this.providerForm.patchValue({
+            cr_manager: this.provider.cr_manager,
+            contact: this.provider.contact,
+            location: this.provider.location,
+            email_id: this.provider.email_id,
+            provider_id: this.provider.id,
+            phone: this.provider.phone,
+            online_status: this.provider.online_status,
+            deli_provider_id: this.provider.deli_provider_id,
+          });
+      } else {
+        this.error = true;
+        this.responseMsg = this.vs.errorCode[this.lang][response.errorCode];
+      }
+    }, (error) => {
+      this.error = true;
+      this.responseMsg =  this.vs.errorCode[this.lang]['ER08'];
+    });
+  }
+
+  goToPage(path, data = null) {
+    console.log(data);
+    this.router.navigateByUrl(path, {queryParams: data});
     document.body.scrollTop = document.documentElement.scrollTop = 0;
   }
 
+  logout() {
+    this.service.logout();
+  }
+
 }

src/app/forex/forex.module.ts

 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { moduleRouting } from './forex.routing';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
-//IMPORTED-PAGE-COMPONENTS
+// IMPORTED-PAGE-COMPONENTS
 
 import { IndexComponent } from './index/index.component';
-import { AddproviderComponent} from './addprovider/addprovider.component';
 import { ChangepinComponent } from './changepin/changepin.component';
 import { EditproviderComponent } from './editprovider/editprovider.component';
-import { ManageproviderComponent } from './manageprovider/manageprovider.component';
 import { TransactionComponent } from './transaction/transaction.component';
+import { CurrencyComponent } from './currency/currency.component';
 
 
 @NgModule({
-  declarations: [IndexComponent, AddproviderComponent, ChangepinComponent, EditproviderComponent, ManageproviderComponent, TransactionComponent],
+  // tslint:disable-next-line:max-line-length
+  declarations: [IndexComponent, ChangepinComponent, EditproviderComponent, TransactionComponent, CurrencyComponent],
   imports: [
     CommonModule,
-    moduleRouting
+    moduleRouting,
+    FormsModule,
+    ReactiveFormsModule
   ]
 })
 export class ForexModule { }

src/app/forex/forex.routing.ts

@@ -9,20 +9,18 @@ import { Routes, RouterModule } from '@angular/router';
 //IMPORTED-PAGE-COMPONENTS
 
 import { IndexComponent } from './index/index.component';
-import { AddproviderComponent} from './addprovider/addprovider.component';
 import { ChangepinComponent } from './changepin/changepin.component';
 import { EditproviderComponent } from './editprovider/editprovider.component';
-import { ManageproviderComponent } from './manageprovider/manageprovider.component';
 import { TransactionComponent } from './transaction/transaction.component';
+import { CurrencyComponent } from './currency/currency.component';
 import { AuthGuard } from './../providers/auth.guard';
 
 const ModuleRoutes: Routes = [{
 	path: 'forex', component: IndexComponent, canActivate: [AuthGuard],
 		children: [
-			{path: 'addprovider', component: AddproviderComponent},
 			{path: 'changepin', component: ChangepinComponent},
 			{path: 'editprovider', component: EditproviderComponent},
-			{path: 'manageprovider', component: ManageproviderComponent },
+			{path: 'currency', component: CurrencyComponent },
 			{path: '', component: TransactionComponent }
 		]
 	}

src/app/forex/manageprovider/manageprovider.component.html

-<header class="provider_header">
-    <div class="row">
-      <div class="col-md-6">
-        <h4>Forex Delivery Service Provider</h4>
-      </div>
-      <div class="col-md-6 textRight relative">
-          <button class="logout">
-              <img src="assets/images/asset_logout.png">
-            Logout</button>
-          <img src="assets/images/asset_logo1.png">
-          <span (click)="goToPage('forex/changepin')">Change PIN</span>
-      </div>
-    </div>
-  </header>
-<section>
-    <div class="provider_content">
-      <h3>Manage Delivery Service Provider</h3>
-      <div class="provider_inner_content">
-          <div class="table-responsive">          
-              <table class="table">
-                <thead>
-                  <tr>
-                    <th>Provider Name</th>
-                    <th>Location</th>
-                    <th>CR Manager</th>
-                    <th>CR ID</th>
-                    <th>Contact</th>
-                    <th>Phone</th>
-                    <th>Email ID</th>
-                    <th class="textRight">
-                      <button class="add" (click)="goToPage('forex/addprovider')">+</button>
-                    </th>
-                  </tr>
-                </thead>
-                <tbody>
-                  <tr>
-                    <td></td>
-                    <td></td>
-                    <td></td>
-                    <td></td>
-                    <td></td>
-                    <td></td>
-                    <td></td>
-                    <td class="textRight">
-                      <button class="edit_btn"(click)="goToPage('forex/editprovider')"></button>
-                      <button class="delete_btn"></button>
-                    </td>
-                  </tr>
-                  <tr>
-                      <td></td>
-                      <td></td>
-                      <td></td>
-                      <td></td>
-                      <td></td>
-                      <td></td>
-                      <td></td>
-                      <td class="textRight">
-                        <button class="edit_btn" (click)="goToPage('forex/editprovider')"></button>
-                        <button class="delete_btn"></button>
-                      </td>
-                    </tr>
-                    <tr>
-                        <td></td>
-                        <td></td>
-                        <td></td>
-                        <td></td>
-                        <td></td>
-                        <td></td>
-                        <td></td>
-                        <td class="textRight">
-                          <button class="edit_btn" (click)="goToPage('forex/editprovider')"></button>
-                          <button class="delete_btn"></button>
-                        </td>
-                      </tr>
-                      <tr>
-                          <td></td>
-                          <td></td>
-                          <td></td>
-                          <td></td>
-                          <td></td>
-                          <td></td>
-                          <td></td>
-                          <td class="textRight">
-                            <button class="edit_btn" (click)="goToPage('forex/editprovider')"></button>
-                            <button class="delete_btn"></button>
-                          </td>
-                        </tr>
-                        <tr>
-                            <td></td>
-                            <td></td>
-                            <td></td>
-                            <td></td>
-                            <td></td>
-                            <td></td>
-                            <td></td>
-                            <td class="textRight">
-                              <button class="edit_btn" (click)="goToPage('forex/editprovider')"></button>
-                              <button class="delete_btn"></button>
-                            </td>
-                          </tr>
-                          <tr>
-                              <td></td>
-                              <td></td>
-                              <td></td>
-                              <td></td>
-                              <td></td>
-                              <td></td>
-                              <td></td>
-                              <td class="textRight">
-                                <button class="edit_btn" (click)="goToPage('forex/editprovider')"></button>
-                                <button class="delete_btn"></button>
-                              </td>
-                            </tr>
-                            <tr>
-                                <td></td>
-                                <td></td>
-                                <td></td>
-                                <td></td>
-                                <td></td>
-                                <td></td>
-                                <td></td>
-                                <td class="textRight">
-                                  <button class="edit_btn" (click)="goToPage('forex/editprovider')"></button>
-                                  <button class="delete_btn"></button>
-                                </td>
-                              </tr>
-                </tbody>
-              </table>
-          </div>
-      </div>
-    </div>
-  </section>
\ No newline at end of file

src/app/forex/manageprovider/manageprovider.component.scss

-.provider_header{
-    background: #1a5c7c;
-    padding: 4px;
-    
-    h4{
-        margin:0px;
-        color: #fff;
-        padding: 20px;
-        font-weight: 400;
-        font-size:20px;
-    }
-
-    span{
-        position: absolute;
-        bottom:-30px;
-        right:15px;
-        font-size: 14px;
-        cursor: pointer;
-        z-index: 999;
-    }
-}
-
-
-.provider_content{
-    width:100%;
-    position: relative;
-
-    h3{
-        margin:0px;
-        padding:0px;
-        border-bottom: 1px solid #494949;
-        color: #464646;
-        font-size: 20px;
-        font-weight: 400;
-        padding: 15px;
-    }
-    .provider_inner_content{
-        width:100%;
-        padding-top: 40px;
-        padding-left: 20px;
-        padding-right: 20px;
-        .row{
-            padding-bottom: 40px;
-            .provider_data_content{
-                width:90%;
-                margin:0 auto;
-                .edit_delivery{
-                    color: #195c77;
-                    text-decoration: underline;
-                    cursor: pointer;
-                    font-weight: 500;
-                    position: relative;
-                    top:30px;
-                }
-                p{
-                    color: #464646;
-                    margin:0px;
-                    padding-bottom: 10px;
-                    font-weight: 500;
-                }
-                .provider_input{
-                    border:1px solid #b4b4b4;
-                    height:40px;
-                    padding-left: 10px;
-                    padding-right: 10px;
-                    width: 100%;
-                    &:focus{
-                        outline: none;
-                    }
-                }
-                .provider_pin{
-                    border:1px solid #b4b4b4;
-                    height:40px;
-                    width: calc(100% - 90%);
-                    margin-right: calc(100% - 92%);
-                    text-align: center;
-                    display: inline-block;
-                    border-radius: 10px;
-                    &:focus{
-                        outline: none;
-                    }
-                }
-            }
-            .edit_btn{
-                background: #d9d9d9;
-            color: #1a5d7a;
-            border-radius:20px;
-            height:40px;
-            padding-left: 4%;
-            padding-right:4%;
-            font-weight: 500;
-            margin:1%;
-            border:none;
-            &:hover{
-                outline: none;
-            }
-            &:focus{
-                outline:none;
-            } 
-            }
-        } 
-        .add_provider_btn_bay{
-            width:100%;
-            padding-top:5%;
-            text-align: right;
-            .save_btn{
-                background: #cd3d3d;
-                color: #fff;
-                border-radius:20px;
-                height:40px;
-                border:none;
-                padding-left:4%;
-                padding-right:4%;
-                margin:1%;
-                &:hover{
-                    outline: none;
-                }
-                &:focus{
-                    outline:none;
-                }
-            }
-    
-            .cancel_btn{
-                background: #1a5c7c;
-                color: #fff;
-                border-radius:20px;
-                height:40px;
-                padding-left:4%;
-                padding-right:4%;
-                border:none;
-                margin:1%;
-                &:hover{
-                    outline: none;
-                }
-                &:focus{
-                    outline:none;
-                }
-            }
-        }
-
-        table{
-            thead{
-                background: #1ca8cb;
-                tr{
-                    th{
-                        color: #fff;
-                        padding-left: 25px;
-                        font-weight: 500;
-                        .add{
-                            width:30px;
-                            height:30px;
-                            background: #1a5b77;
-                            color: #fff;
-                            border:1px solid #fff;
-                            border-radius: 50%;
-                            font-size: 18px;
-                            cursor: pointer;
-                            &:focus{
-                                outline: none;
-                            }
-                        }
-                    }
-                }
-            }
-            tbody{
-                tr{
-                    border-bottom: 2px solid #fff;
-                    td{
-                        .edit_btn{
-                            width:25px;
-                            height:25px;
-                            border:none;
-                            background:url('/assets/images/asset_edit.png');
-                            background-position: center;
-                            background-size: 18px;
-                            background-repeat: no-repeat;
-                            margin: 2px;
-                            &:focus{
-                                outline:none;
-                            }
-
-                        }
-                        .delete_btn{
-                            width:25px;
-                            height:25px;
-                            border:none;
-                            background:url('/assets/images/asset_delete.png');
-                            background-position: center;
-                            background-size: 20px;
-                            background-repeat: no-repeat;
-                            margin: 2px;
-                            &:focus{
-                                outline:none;
-                            }
-                        }
-
-                    }
-                    &:nth-child(even) {background: #f3f3f3}
-                    &:nth-child(odd) {background: #f9f9f9}
-                }
-            }
-        }
-    }
-
-
-}
\ No newline at end of file

src/app/forex/manageprovider/manageprovider.component.spec.ts

-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { ManageproviderComponent } from './manageprovider.component';
-
-describe('ManageproviderComponent', () => {
-  let component: ManageproviderComponent;
-  let fixture: ComponentFixture<ManageproviderComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ ManageproviderComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(ManageproviderComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

src/app/forex/manageprovider/manageprovider.component.ts

-import { Component, OnInit } from '@angular/core';
-import { Router,ActivatedRoute } from '@angular/router';
-
-@Component({
-  selector: 'app-manageprovider',
-  templateUrl: './manageprovider.component.html',
-  styleUrls: ['./manageprovider.component.scss']
-})
-export class ManageproviderComponent implements OnInit {
-
-  constructor(private router: Router,private route: ActivatedRoute) { }
-
-  ngOnInit() {
-  }
-
-  
-  goToPage(path,data=null){
-    console.log(data)
-    this.router.navigateByUrl(path,{queryParams:data});
-    document.body.scrollTop = document.documentElement.scrollTop = 0;
-  }
-
-}

src/app/forex/transaction/transaction.component.html

+<div class="custom_loader_wrapper" *ngIf="loader">
+    <div class="custom_loader_ring"></div>
+</div>
 <header class="provider_header">
     <div class="row">
       <div class="col-md-6">
         <h4>Forex Transaction List</h4>
       </div>
       <div class="col-md-6 textRight relative">
-          <button class="logout">
+          <button class="logout" (click)="logout()">
               <img src="assets/images/asset_logout.png">
             Logout</button>
           <img src="assets/images/asset_logo1.png">
@@ -16,116 +19,47 @@
     <div class="provider_content">
       <h3>Manage Transaction</h3>
       <div class="provider_inner_content">
+          <div class="alert alert-danger alert-dismissible" *ngIf="error">
+              <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
+              <strong>Warning!</strong> {{responseMsg}}
+          </div>
+          <div class="alert alert-success alert-dismissible" *ngIf="success">
+              <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
+              <strong>Success!</strong> Forex provider removed successfully
+            </div> 
           <div class="table-responsive">          
               <table class="table">
                 <thead>
                   <tr>
-                    <th>Provider Name</th>
-                    <th>Location</th>
-                    <th>CR Manager</th>
-                    <th>CR ID</th>
-                    <th>Contact</th>
+                    <th>User Info</th>
                     <th>Phone</th>
-                    <th>Email ID</th>
-                    <th class="textRight">
-                      <button class="add" (click)="goToPage('forex/addprovider')">+</button>
-                    </th>
+                    <th>Location</th>
+                    <th>Currency</th>
+                    <th>Amount</th>
+                    <th>Forex Amount</th>
+                    <th>Driver</th>
+                    <th>Status</th>
                   </tr>
                 </thead>
-                <tbody>
-                  <tr>
-                    <td></td>
-                    <td></td>
-                    <td></td>
-                    <td></td>
-                    <td></td>
-                    <td></td>
-                    <td></td>
-                    <td class="textRight">
-                      <button class="edit_btn"(click)="goToPage('forex/editprovider')"></button>
-                      <button class="delete_btn"></button>
-                    </td>
+                <tbody *ngIf="transactionList">
+                  <tr *ngFor="let tansaction of transactionList">
+                    <td>{{getCustomer(tansaction.user_info,'name') | titlecase}}</td>
+                    <td>{{getCustomer(tansaction.user_info,'phone') | titlecase}}</td>
+                    <td>{{getCustomer(tansaction.user_info,'location') | titlecase}}</td>
+                    <td>{{tansaction.currency}}</td>
+                    <td>SAR {{tansaction.amount}}</td>
+                    <td>{{tansaction.symbol + tansaction.convert_price}}</td>
+                    <td>{{getCustomer(tansaction.driver_info,'name') | titlecase}}</td>
+                    <td>{{get_status(tansaction.status)}}</td>
                   </tr>
-                  <tr>
-                      <td></td>
-                      <td></td>
-                      <td></td>
-                      <td></td>
-                      <td></td>
-                      <td></td>
-                      <td></td>
-                      <td class="textRight">
-                        <button class="edit_btn" (click)="goToPage('forex/editprovider')"></button>
-                        <button class="delete_btn"></button>
-                      </td>
-                    </tr>
-                    <tr>
-                        <td></td>
-                        <td></td>
-                        <td></td>
-                        <td></td>
-                        <td></td>
-                        <td></td>
-                        <td></td>
-                        <td class="textRight">
-                          <button class="edit_btn" (click)="goToPage('forex/editprovider')"></button>
-                          <button class="delete_btn"></button>
-                        </td>
-                      </tr>
-                      <tr>
-                          <td></td>
-                          <td></td>
-                          <td></td>
-                          <td></td>
-                          <td></td>
-                          <td></td>
-                          <td></td>
-                          <td class="textRight">
-                            <button class="edit_btn" (click)="goToPage('forex/editprovider')"></button>
-                            <button class="delete_btn"></button>
-                          </td>
-                        </tr>
-                        <tr>
-                            <td></td>
-                            <td></td>
-                            <td></td>
-                            <td></td>
-                            <td></td>
-                            <td></td>
-                            <td></td>
-                            <td class="textRight">
-                              <button class="edit_btn" (click)="goToPage('forex/editprovider')"></button>
-                              <button class="delete_btn"></button>
-                            </td>
-                          </tr>
-                          <tr>
-                              <td></td>
-                              <td></td>
-                              <td></td>
-                              <td></td>
-                              <td></td>
-                              <td></td>
-                              <td></td>
-                              <td class="textRight">
-                                <button class="edit_btn" (click)="goToPage('forex/editprovider')"></button>
-                                <button class="delete_btn"></button>
-                              </td>
-                            </tr>
-                            <tr>
-                                <td></td>
-                                <td></td>
-                                <td></td>
-                                <td></td>
-                                <td></td>
-                                <td></td>
-                                <td></td>
-                                <td class="textRight">
-                                  <button class="edit_btn" (click)="goToPage('forex/editprovider')"></button>
-                                  <button class="delete_btn"></button>
-                                </td>
-                              </tr>
                 </tbody>
               </table>
+              <div class="forex_pagination" *ngIf="meta">
+                <ul *ngIf="userDetails">
+                    <li *ngFor="let i of getNumber(meta.total_pages); let j = index" [ngClass]="{'activeClass': meta.current_page == j+1}" (click)="getTransaction(userDetails.id, j+1)">{{j+1}}</li>
+                </ul>
+               
+              </div>
           </div>
       </div>
     </div>

src/app/forex/transaction/transaction.component.ts

 import { Component, OnInit } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+import { WebService } from './../../providers/web.service';
+import { ValidationService } from './../../providers/validation.service';
 
 @Component({
   selector: 'app-transaction',
@@ -6,10 +9,111 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./transaction.component.scss']
 })
 export class TransactionComponent implements OnInit {
+  transactionList: any[];
+  fname: any;
+  lang =  'ar';
+  responseMsg: any;
+  error: boolean;
+  success: boolean;
+  loader: boolean;
+  loginDetails: any;
+  meta: any;
+  userDetails: any;
 
-  constructor() { }
+  constructor(private router: Router, private route: ActivatedRoute, public vs: ValidationService, public service: WebService) {
+    this.responseMsg = '';
+    this.error = false;
+    this.success = false;
+    this.loader = false;
+    this.loginDetails = JSON.parse(this.service.getLocalStorageItem('userData'));
+    console.log(this.loginDetails);
+  }
 
   ngOnInit() {
+    this.getProvider();
+  }
+
+  getTransaction(id: any, page_number: number) {
+    this.error = false;
+    this.loader = true;
+    this.fname = 'transaction_list';
+    const post_data = {'type': 2, 'user_id': id, 'page': page_number};
+      this.service.post_data(this.fname, post_data).subscribe(response => {
+        this.loader = false;
+        console.log(response);
+        if (response.code === 1) {
+          this.transactionList = response.responseResult.data;
+          this.meta = response.responseResult.meta;
+          console.log(this.transactionList);
+        } else {
+          this.transactionList = [];
+          this.error = true;
+          this.responseMsg = this.vs.errorCode[this.lang][response.errorCode];
+        }
+      }, (error) => {
+        this.error = true;
+        this.responseMsg =  this.vs.errorCode[this.lang]['ER08'];
+    });
+
+  }
+
+  goToPage(path, data = null) {
+    console.log(data);
+    this.router.navigateByUrl(path, {queryParams: data});
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+  }
+
+  getProvider() {
+    this.fname = 'get_user_details';
+    const post_data = {'user_id': this.loginDetails.user_id};
+    this.service.post_data(this.fname, post_data).subscribe(response => {
+      if (response.code === 1) {
+        this.userDetails = response.responseResult;
+        this.getTransaction(this.userDetails.id, 1);
+      } else {
+        this.error = true;
+        this.responseMsg = this.vs.errorCode[this.lang][response.errorCode];
+      }
+    }, (error) => {
+      this.error = true;
+      this.responseMsg =  this.vs.errorCode[this.lang]['ER08'];
+  });
+  }
+
+  get_status(status: any) {
+    switch (status) {
+      case 0:
+        return 'Cancelled';
+        break;
+      case 1:
+        return 'Requested';
+        break;
+      case 2:
+        return 'Processing';
+        break;
+      case 3:
+        return 'Completed';
+        break;
+      default:
+      break;
+    }
+  }
+
+  getCustomer(data: any, type: any) {
+    if (data !== null){
+      const userData = JSON.parse(data);
+      return userData[type];
+    } else {
+      return '';
+    }
+  }
+
+  getNumber(num) {
+    return new Array(num);
+  }
+
+  logout() {
+    this.service.logout();
   }
 
 }

src/app/providers/auth.service.ts

@@ -15,6 +15,8 @@ export class AuthService {
     return localStorage.getItem('userData');
   }
   isLoggednIn() {
+    const router = this.myRoute.url;
+    console.log(router);
     return this.getToken() !== null;
   }
   logout() {

src/app/providers/role-guard.service.ts

+import { AuthService } from './auth.service';
+import { Injectable } from '@angular/core';
+import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router, Route } from '@angular/router';
+import { Observable } from 'rxjs';
+
+@Injectable()
+export class RoleGuard implements CanActivate {
+
+
+  constructor(private _authService: AuthService, private _router: Router) {
+  }
+
+  canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
+    const user = 1;
+
+    if (user === next.data.role) {
+      return true;
+    }
+
+    // navigate to not found page
+    // this._router.navigate(['/404']);
+    return false;
+  }
+
+}
\ No newline at end of file

src/app/providers/web.service.ts

@@ -2,6 +2,8 @@ import { Injectable } from '@angular/core';
 import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
 import { map, catchError } from 'rxjs/operators';
 import { apiConfig } from '../../environments/server.config';
+import { SubjectService } from './subject.service';
+import { Router, ActivatedRoute } from '@angular/router';
 
 const httpOptions = {
   headers: new HttpHeaders({
@@ -23,7 +25,7 @@ const httplive = {
 })
 
 export class WebService {
-  constructor(private http: HttpClient) {
+  constructor(private http: HttpClient, public subjectService: SubjectService, private router: Router) {
   }
 
   post_data(url: string, data) {
@@ -55,5 +57,12 @@ export class WebService {
     }
   }
 
+  logout() {
+    const userData = this.getLocalStorageItem('userData');
+    this.removeLocalStorageItem(userData);
+    this.subjectService.sendLoginData('logged_out');
+    this.router.navigate(['/start/login']);
+  }
+
 
 }

src/app/start/login/login.component.ts

@@ -21,7 +21,7 @@ export class LoginComponent implements OnInit {
   @ViewChild('focus5') focus5: ElementRef;
   @ViewChild('focus6') focus6: ElementRef;
   error_msg: any[];
-  lang =  'ar';
+  lang =  'en';
   model: any;
   passwordErr: boolean;
   password: any;
@@ -39,6 +39,7 @@ export class LoginComponent implements OnInit {
     public subjectService: SubjectService
   ) {
     this.error_msg = this.vs.errorList[this.lang];
+    console.log(this.error_msg);
     this.passwordErr = false;
     this.loginSubmit = false;
     this.loginError = false;
@@ -90,11 +91,11 @@ export class LoginComponent implements OnInit {
 
 
   changeLang(val: string) {
-    if (val === '1') {
+    /*if (val === '1') {
       $('body').addClass('ar');
     } else {
       $('body').removeClass('ar');
-    }
+    }*/
   }
 
   processBack (e: any, el: any) {

src/assets/styles/translation.scss

-.ar{
+/*.ar{
     .floatLeft{
         float: right !important;
     }
@@ -46,6 +46,14 @@
                 margin-right:0px !important;
             }
         }
+        tr{
+            th{
+                text-align: right !important;
+            }
+            td{
+                text-align: right !important;
+            }
+        }
     }
 
     .login_wrapper{
@@ -60,4 +68,21 @@
             }
         }
     }
-}
+    .forex_pagination{
\ No newline at end of file
+        ul{
+            text-align: left;
+            li{
+                &:first-child { 
+                    border-top-right-radius: 4px;
+                    border-bottom-right-radius: 4px;
+                  }
+                  &:last-child { 
+                    border-top-left-radius: 4px;
+                    border-bottom-left-radius: 4px;
+                  }
+            }
+           
+        }
+    }
+}*/
+

src/environments/server.config.ts

- //export const ImageStorage = 'http://forex.nuvento.com/';
-export const ImageStorage = 'http://localhost:3000/';
-export const apiConfig = 'http://localhost:3000/api/';
- //export const apiConfig = 'http://forex.nuvento.com/api/';
+export const ImageStorage = 'http://forex.nuvento.com/';
+// export const ImageStorage = 'http://localhost:3000/';
+// export const apiConfig = 'http://localhost:3000/api/';
+export const apiConfig = 'http://forex.nuvento.com/api/';

src/styles.scss

@@ -558,6 +558,13 @@ section.module.parallax {
                 padding-right: 10px;
                 width: 100%;
             }
+            select{
+                border: 1px solid #b4b4b4;
+                height: 40px;
+                padding-left: 10px;
+                padding-right: 10px;
+                width: 100%;
+            }
         }
       
     }
@@ -647,4 +654,38 @@ section.module.parallax {
         width: 24px;
         margin-right: 5px;
     }
+}
+
+.forex_pagination{
+    width:100%;
+    
+    ul{
+        margin: 0px;
+        padding:0px;
+        text-align: right;
+        li{
+            list-style: none;
+            display: inline-block;
+            border:1px solid #a8a8a8;
+            text-align: center;
+            padding-left: 10px;
+            padding-right: 10px;
+            padding-top: 3px;
+            padding-bottom: 3px;
+            font-size: 14px;
+            &:first-child { 
+                border-top-left-radius: 4px;
+                border-bottom-left-radius: 4px;
+              }
+              &:last-child { 
+                border-top-right-radius: 4px;
+                border-bottom-right-radius: 4px;
+              }
+        }
+        .activeClass{
+            background: #1ca8cb;
+            color: #fff;
+            border:1px solid #1ca8cb;
+        }
+    }
 }
\ No newline at end of file