From 29a4d7119e17c0376df49fb4c3548ebe052a0f47 Mon Sep 17 00:00:00 2001
From: "venbatechnologies@gmail.com" <venbatechnologies@gmail.com>
Date: Sat, 5 Jan 2019 22:18:57 +0530
Subject: [PATCH] address : ps

---
 .../forms/address/address.component.html      | 138 +++++----
 .../forms/address/address.component.ts        | 267 +++++-------------
 2 files changed, 129 insertions(+), 276 deletions(-)

diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/address/address.component.html b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/address/address.component.html
index 76ae7e05c..b11ab1d5b 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/address/address.component.html
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/address/address.component.html
@@ -108,7 +108,7 @@
                                             
                                         <div *ngIf="addressForm.controls['address_ownership'].value == 3 " fxFlex="33">
                                                 <mat-form-field style="width: 80%;">
-                                                    <input matInput placeholder="What is the monthly rent paid?" formControlName="rent_amt" autocomplete="off" (keypress)="keyPress($event)" (keyup)="inWords($event,'')">
+                                                    <input matInput placeholder="What is the monthly rent paid?" formControlName="rent_amt" autocomplete="off" (keypress)="keyPress($event)" (keyup)="inWordsForRent($event)">
                                                     <mat-hint align="start" style="font-size:70%" *ngIf="addressForm.controls['rent_amt'].value != ''">{{"&#8377;"}} {{rentAmtInwords}} Only</mat-hint>
                                                 </mat-form-field>
 
@@ -169,80 +169,72 @@
                                         </mat-select>
                                     </mat-form-field>--(Customer Behaviour)-->
 
-                                 
-                                  
-                                                
+                         
+                                            <mat-card *ngIf="addressForm.controls['bussiness_activity'].value == 'yes'">
+                                                    
+                                                    <div formArrayName="additional_address_units">
+                                                                    <div *ngFor="let item of addressForm.controls.additional_address_units['controls']; let i=index" >
+                                                                            <mat-card-header><p>Additional Unit #{{i+1}}</p></mat-card-header>
+                                                                        <mat-card-content class="matcard" [formGroup]="item">
 
-                                     <!-- <mat-form-field *ngIf="addressForm.controls['bussiness_activity'].value == 'yes'" style="width: 100%"> -->
-                                            <!-- <mat-select placeholder="Bussiness Type" formControlName="bussiness_address_type">
-                                                <mat-option value="{{m_addressType.address_type_id}}"
-                                                                    *ngFor="let m_addressType of addressData">{{m_addressType.address_type}}
-                                                </mat-option>
-                                            </mat-select> -->
-                                            <!-- <mat-select placeholder="Type of Premises" formControlName="bussiness_address_type" multiple>
-                                                <mat-option  *ngFor="let m_addressType of addressData"  [value]="m_addressType.address_type_id" (onSelectionChange)="SelectedPremises($event)" > {{m_addressType.address_type}} </mat-option>
-                                            </mat-select>
-                                    </mat-form-field> -->
-                                    <label *ngIf="addressForm.controls['bussiness_activity'].value == 'yes'"> Type of Premises </label>
-                                    <div fxLayout="row wrap" class="example-section" *ngIf="addressForm.controls['bussiness_activity'].value == 'yes'">
-                                            <div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25" *ngFor="let at of addressData;let i = index;"> <!---- [formGroupName]="i"> -->
-                                                <mat-checkbox class="example-margin" color="primary" [value]="at.address_type_id" (change)="SelectedPremises($event)" [checked]="at.status==1 ? true:false">{{at.address_type}}</mat-checkbox>
-                                            </div>
-                                    </div>
-                                                        
-                                    <!-- <mat-form-field *ngIf="PremisesOtherFlag == true" style="width: 40%">
-                                        <input matInput placeholder="Specify Premises Type" formControlName="bussiness_address_type_others"  (change)="otherValueset()" autocomplete="off">
-                                    </mat-form-field> -->
-                                    <span *ngIf="PremisesOtherFlag == true">
-                                            <br>    
-                                                <mat-form-field  style="width: 40%">
-                                                    <input matInput placeholder="Specify Premises Type" formControlName="bussiness_address_type_others"  (change)="otherValueset()" autocomplete="off">
-                                                </mat-form-field>
-                                    </span>                
-                                
+                                                                                <mat-form-field  style="width: 40%">
+                                                                                        <mat-select placeholder="Type of Premises" formControlName="premises_type">
+                                                                                                <mat-option  *ngFor="let m_addressType of addressData"  [value]="m_addressType.address_type_id"> {{m_addressType.address_type}} </mat-option>
+                                                                                        </mat-select>
+                                                                                    </mat-form-field>
+                                                                                    <mat-form-field  *ngIf="item.get('premises_type').value == 12"  style="width: 40%">
+                                                                                        <input matInput placeholder="Specify Premises Type" formControlName="premises_type_others"  autocomplete="off">
+                                                                                    </mat-form-field>
+                                                                                <mat-form-field style="width: 40%;">
+                                                                                        <input matInput placeholder="Number Of Additional Units"
+                                                                                               formControlName="no_of_additional_units" autocomplete="off">
+                                                                                </mat-form-field>
+                                                                                <mat-form-field style="width: 40%;">
+                          
+                                                                                        <input matInput placeholder="Location/City"
+                                                                                        formControlName="premises_city" autocomplete="off">
+                                                                                        
+                                                                                </mat-form-field>
+                                                                                
+                                                                                <mat-form-field style="width: 40%;">
+                                                                                        <mat-select placeholder="Ownership" formControlName="premises_ownership">
+                                                                                            <mat-option value="{{ownerShip.id}}" *ngFor="let ownerShip of ownerShipData">
+                                                                                                {{ownerShip.name}}
+                                                                                            </mat-option>
+                                                                                        </mat-select>
+                                                                                </mat-form-field>
+                                                                                
+                                                                                <!-- <mat-form-field *ngIf="addressForm.controls['premises_ownership'].value == 4 "> -->
+                                                                                <mat-form-field *ngIf="item.get('premises_ownership').value == 4" style="width: 40%;">
+                                                                                    <input matInput placeholder="Specify Ownership" formControlName="premises_ownership_others" autocomplete="off">
+                                                                                </mat-form-field>
+                                                                                <mat-form-field *ngIf="item.get('premises_ownership').value == 3" style="width: 40%;">
+                                                                                  <input matInput placeholder="What is the monthly rent paid?" formControlName="premises_rent_amt" autocomplete="off" (keypress)="keyPress($event)" (keyup)="inWords($event,i)">
+                                                                                  <mat-hint align="start" style="font-size:70%" *ngIf="item.get('premises_rent_amt').value != ''">{{"&#8377;"}} {{premisesRentAmtInwords[i]}} Only</mat-hint>
+                                                                              </mat-form-field>
+                                                                                <mat-form-field style="width: 40%">
+                                                                                        <input matInput placeholder="Remarks"
+                                                                                                formControlName="premises_remarks" style="width: 65%;" autocomplete="off">
+                                                                                </mat-form-field>
+                                                                        
+                                            
+                                                                            
+                                                                        <button type="button" matTooltip="Add More Neighbour Details" class="mr-1 mb-1 hover-icon"  matTooltipPosition="above" mat-raised-button mat-icon-button *ngIf="i==0"
+                                                                                    (click)="addUnits($event)"
+                                                                                   color="primary" style="float: right;">
+                                                                                <mat-icon>add</mat-icon>
+                                                                        </button>
+                                                                        <button type="button" matTooltip="Delete" class="mr-1 mb-1 hover-icon"  matTooltipPosition="above" mat-raised-button mat-icon-button *ngIf="i>0"
+                                                                                     (click)="removeUnits(i)"
+                                                                                    style="float: right;">
+                                                                                <mat-icon>delete</mat-icon>
+                                                                        </button>
+                                                                        </mat-card-content>
+                                                                        
+                                                                    </div>
+                                                                </div>
+                                            </mat-card>
 
-                                    <span *ngIf="addressForm.controls['bussiness_activity'].value == 'yes'" formArrayName="additional_premises">
-                                        <div 
-                                        *ngFor="let item of addressForm.controls.additional_premises['controls']; let i = index;" [formGroupName]="i">
-                                      
-                                                <p>{{i+1}} . {{PremisesLabel[i]}}</p>
-                                                
-                                                      <mat-form-field style="width: 40%;">
-                                                              <input matInput placeholder="Number Of Additional Units"
-                                                                     formControlName="no_of_additional_units" autocomplete="off">
-                                                      </mat-form-field>
-                                                      <mat-form-field *ngIf="item.get('no_of_additional_units').value > 2" style="width: 40%;">
-
-                                                              <mat-select  placeholder="City" formControlName="premises_city" multiple > <!-- (selectionChange)="relationChanged($event)"> -->
-                                                                  <mat-option *ngFor="let CL of cityData" [value]="CL.city_id">
-                                                                      {{CL.name}}
-                                                                  </mat-option>
-                                                              </mat-select>
-                                                              
-                                                      </mat-form-field>
-                                                      
-                                                      <mat-form-field *ngIf="item.get('no_of_additional_units').value <= 2  && item.get('no_of_additional_units').value != '' " style="width: 40%;">
-                                                              <mat-select placeholder="Ownership" formControlName="premises_ownership">
-                                                                  <mat-option value="{{ownerShip.id}}" *ngFor="let ownerShip of ownerShipData">
-                                                                      {{ownerShip.name}}
-                                                                  </mat-option>
-                                                              </mat-select>
-                                                      </mat-form-field>
-                                                      
-                                                      <!-- <mat-form-field *ngIf="addressForm.controls['premises_ownership'].value == 4 "> -->
-                                                      <mat-form-field *ngIf="item.get('premises_ownership').value == 4" style="width: 40%;">
-                                                          <input matInput placeholder="Specify Ownership" formControlName="premises_ownership_others" autocomplete="off">
-                                                      </mat-form-field>
-                                                      <mat-form-field *ngIf="item.get('premises_ownership').value == 3" style="width: 40%;">
-                                                        <input matInput placeholder="What is the monthly rent paid?" formControlName="premises_rent_amt" autocomplete="off" (keypress)="keyPress($event)" (keyup)="inWords($event,i)">
-                                                        <mat-hint align="start" style="font-size:70%" *ngIf="item.get('premises_rent_amt').value != ''">{{"&#8377;"}} {{premisesRentAmtInwords[i]}} Only</mat-hint>
-                                                    </mat-form-field>
-                                                      <mat-form-field style="width: 40%">
-                                                              <input matInput placeholder="Remarks"
-                                                                      formControlName="premises_remarks" style="width: 65%;" autocomplete="off">
-                                                      </mat-form-field>
-                                              </div>
-                                            </span>   
                                     <!--- Don't Remove To replace atlast of the PD Completion and creating new form (Neighbourhood check) --
                                     <mat-card>
                                         <mat-card-header>
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/address/address.component.ts b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/address/address.component.ts
index e9b0220b0..522a191b1 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/address/address.component.ts
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/address/address.component.ts
@@ -115,21 +115,24 @@ export class AddressComponent implements OnInit {
         this._pd.retriveForm(params).subscribe(data => {
             console.log('data', data);
             //const control = <FormArray>this.addressForm.controls['neighbourhood'];
-            const additionalPremisesControl = <FormArray>this.addressForm.controls['additional_premises'];
+            const control = <FormArray>this.addressForm.controls['additional_address_units'];
+            //const additionalPremisesControl = <FormArray>this.addressForm.controls['additional_premises'];
            if(data.status == 200) {
-            //    var result = Object.keys(data.records.neighbourhood).map(function (key) {
-            //        return data.records.neighbourhood[key];
-            //    });
+             
 
                this.addressForm.controls.address.setValue(data.records.address);
                this.addressForm.controls.pd_location.setValue(data.records.pd_location);
                this.addressForm.controls.address_type.setValue(data.records.address_type);
-               this.selectedAddressType(data.records.address_type);
+               let selectedAddressType = this.addressData.filter(element =>element.address_type_id == data.records.address_type);
+               this.selectedAddressType(selectedAddressType);
+
                if(data.records.address_type == 12) {
                 this.addressForm.controls.address_type_others.setValue(data.records.address_type_others);
                 this.selectedAddressType(data.records.address_type_others);
                }
+
                this.addressForm.controls.comment_locality.setValue(data.records.comment_locality);
+
                if(data.records.comment_locality == 10){
                 this.addressForm.controls.other_comment_locality.setValue(data.records.other_comment_locality);
                }
@@ -153,47 +156,36 @@ export class AddressComponent implements OnInit {
                 this.addressForm.controls.bussiness_activity_remark.setValue('');
                }
                this.addressForm.controls.bussiness_activity.setValue(data.records.bussiness_activity);
-               
-            if(data.records.bussiness_activity == 'yes' && data.records.bussiness_address_type !=null) {
+
                this.addressForm.controls.business_years.setValue(data.records.business_years);
                this.addressForm.controls.business_month.setValue(data.records.business_month);
-                               
-                let that = this;
-                this.bussiness_address_type = [];
-  
-                this.bussiness_address_type = (Object.keys(data.records.bussiness_address_type).map(function(key)
-                {   
-                  return data.records.bussiness_address_type[key].premises_types;
-                }))
-                
-                this.additional_premises = Object.keys(data.records.additional_premises).map(function(key)
-                {
-                    return data.records.additional_premises[key];
-                })
+
+               if(data.records.bussiness_activity == 'yes') {
+                // const control = <FormArray>this.addressForm.controls['additional_address_units'];
+               
+                    var resultOfUnits = Object.keys(data.records.additional_address_units).map(function (key) {
+                        return data.records.additional_address_units[key];
+                    });
+                    //console.log(resultOfUnits);
+
+                            if (resultOfUnits.length == 0) {
+                                control.push(this.createUnits());
+                            } else {
+                                resultOfUnits.forEach((datas,index) => {
+                                    this.premisesRentAmtInwords[index] = this._pd.convertNumberToWords(datas.premises_rent_amt);
+                                    control.push(this.createUnits());
+                                });
+                                this.addressForm.controls.additional_address_units.setValue(resultOfUnits);
+                            }
                  
                }
-               this.additional_premises.forEach((item,index)=>
-               {  
-                console.log(item);
-                console.log(index);
-                //this.premisesRentAmtInwords[index] = this._pd.convertNumberToWords(item.premises_rent_amt);
-                });
 
-               this.selectedValue(this.bussiness_address_type,this.additional_premises);
                if (data.records.locality_others) {
                    this.addressForm.controls.locality_others.setValue(data.records.locality_others);
                }
-
-            //    if (result.length == 0) {
-            //        control.push(this.createNeighbour());
-            //    } else {
-            //        result.forEach(datas => {
-            //            control.push(this.createNeighbour());
-            //        });
-            //        this.addressForm.controls.neighbourhood.setValue(result);
-            //    }
            } else {
                //control.push(this.createNeighbour());
+               control.push(this.createUnits());
            }
         });
     }
@@ -210,6 +202,7 @@ export class AddressComponent implements OnInit {
             other_comment_locality : [''],
             //customer_behaviour: ['', Validators.compose([Validators.required])],
             //neighbourhood: this.fb.array([]),
+            additional_address_units: this.fb.array([]),
             address_form_remark:[''],
             address_ownership:[''],
             other_ownership:[''],
@@ -221,7 +214,7 @@ export class AddressComponent implements OnInit {
             business_month:[''],
             bussiness_address_type:[''],
             bussiness_address_type_others: [''],
-            additional_premises: this.fb.array([])
+            //additional_premises: this.fb.array([])
         });
         this.address = this.addressForm.controls['address'];
         this.addressType = this.addressForm.controls['address_type'];
@@ -249,16 +242,28 @@ export class AddressComponent implements OnInit {
     //         is_owner: ['', Validators.compose([Validators.required])],
     //     });
     // }
-    createPremises(): FormGroup {
+    createUnits(): FormGroup {
         return this.fb.group({
             no_of_additional_units: [''],
+            premises_type: [''],
+            premises_type_others: [''],
             premises_city: [''],
-            premises_remarks: [''],
             premises_ownership: [''],
             premises_ownership_others: [''],
             premises_rent_amt:[''],
+            premises_remarks: [''],
         });
-   }
+    }
+//     createPremises(): FormGroup {
+//         return this.fb.group({
+//             no_of_additional_units: [''],
+//             premises_city: [''],
+//             premises_remarks: [''],
+//             premises_ownership: [''],
+//             premises_ownership_others: [''],
+//             premises_rent_amt:[''],
+//         });
+//    }
     getMasterDetails(table:string,type:number){
         this._pd.getAllMasterDatas(table).subscribe(data => {
             data.records.forEach(val => {
@@ -316,6 +321,17 @@ export class AddressComponent implements OnInit {
         const control = <FormArray>this.addressForm.controls['neighbourhood'];
         control.removeAt(index);
     }*/
+
+    addUnits() {
+        const control = <FormArray>this.addressForm.controls['additional_address_units'];
+        control.push(this.createUnits());
+    }
+
+    removeUnits(index) {
+        const control = <FormArray>this.addressForm.controls['additional_address_units'];
+        control.removeAt(index);
+    }
+
     onSubmit() {
         
         if (!this.addressForm.valid) {
@@ -338,6 +354,7 @@ export class AddressComponent implements OnInit {
         records.other_comment_locality = this.other_comment_locality.value;
         //records.customer_behaviour = this.commentlocality.value;
         //records.neighbourhood = this.addressForm.controls.neighbourhood.value;
+        
         records.address_form_remark = this.addressForm.controls.address_form_remark.value;
         records.address_ownership = this.ownership.value;
         records.other_ownership = this.other_ownership.value;
@@ -348,37 +365,10 @@ export class AddressComponent implements OnInit {
         records.business_years = this.business_years.value;
         records.business_month = this.business_month.value;
 
-        if (this.bussinessActivity.value == 'yes') {
-
-            // records.bussiness_address_type = this.addressForm.controls.bussiness_address_type.value;
-            records.bussiness_address_type = this.formPremisesArray;
-
-            if (records.bussiness_address_type == 12) {
-                records.bussiness_address_type_others = this.addressForm.controls.bussiness_address_type_others.value;
-            }
+        if (this.bussinessActivity.value == 'yes') {            
+            records.additional_address_units = this.addressForm.controls.additional_address_units.value;
         }
 
-        // console.log('this.addressForm.controls.additional_premises.value',this.addressForm.controls.additional_premises.value);
-
-        this.addressForm.controls.additional_premises.value.forEach((val,index)=>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  
-        {
-                if(val.premises_city != '' && val.premises_city != null){
-                    this.formPremisesCityArray = [];
-                        val.premises_city.forEach(option => {
-                            this.formPremisesCityArray.push({additional_premises_city: option});
-                    });
-            this.addressForm.controls.additional_premises.value[index].premises_city = this.formPremisesCityArray;
-                }
-                else{
-                    this.formPremisesCityArray = [];
-                        
-                            this.addressForm.controls.additional_premises.value[index].premises_city = null;
-                    
-                }
-            });
-            
-        records.additional_premises = this.addressForm.controls.additional_premises.value;
- 
         records.pdid = this.pdid;
         records.formid = '5';
         // records.fk_createdby = '250';
@@ -393,138 +383,11 @@ export class AddressComponent implements OnInit {
         });
     }
 
-    // relationChanged(event) {
-    //     this.formPremisesCityArray = [];
-    //     event.value.forEach(option => {
-    //         this.formPremisesCityArray.push({city: option});
-    //     });
-    // }
     selectedAddressType(e: any){
-        // console.log(e);
         this.placeholderName = 'Was any business activity seen at the '+e+' during PD visit?';
     }
-    SelectedPremises($event){
 
-        let premisesData = $event.source.value;
-        
-          
-        if($event.checked === true ){
-      
-            //this.formPremisesArray.push({member: $event.source.value});
-            //this.selectedSegmentDatas.push(CustomerSegmentName.name);            
-        
-      
-        
-      
-            this.formPremisesArray.push({premises_types: $event.source.value});
-      
-            
-            const control = <FormArray>this.addressForm.controls['additional_premises'];
-            let array = this.addressData.filter(data => data.address_type_id == premisesData)[0];
-            
-            if(premisesData == 12){
-                this.PremisesOtherFlag = true;
-                // this.PremisesLabel[this.z] = this.pdQuestionAddress.get('bussiness_address_type_others').value;
-                 control.push(this.createPremises());
-                
-            }
-            else{
-                this.PremisesLabel[this.z] = array.address_type;
-            control.push(this.createPremises());
-                
-            }
-            //console.log(this.PremisesLabel);
-            this.z++;
-      
-            
-            
-      
-      
-            
-          }
-          else if($event.checked === false ){   
-            
-            if(premisesData == 12){
-                this.PremisesOtherFlag = false;
-            }
-            
-            let index = this.formPremisesArray.findIndex(form=>form.premises_types== $event.source.value);
-            //console.log(index);
-            const control = <FormArray>this.addressForm.controls['additional_premises'];
-            control.removeAt(index); 
-            this.PremisesLabel.splice(index,1);     
-            //console.log(this.z);
-            this.z--;
-          }
-      
-        }
-      
-    getCity(e)
-  { 
-    this.cityData = [];
-        e.forEach(val=>
-          {
-              this.cityData.push({additional_premises_city:val});
-          });
-          //console.log(this.cityData);
-  }
-  otherValueset()
-  {
-    let z = this.z;
-    this.PremisesLabel[z-1] = this.addressForm.get('bussiness_address_type_others').value;    
-  }
 
-        selectedValue(e,data)
-        {
-          
-          let premisesData = e ;
-           this.tempArr = [];
-           let that = this;
-           this.addressData = Object.keys(this.addressData).map(function(key)
-           {
-               that.addressData[key].status = 0;
-              return that.addressData[key];
-           })
-         
-          premisesData.forEach((val,index)=>
-              {
-         
-                this.z++;
-         
-                this.formPremisesArray.push({premises_types: val});
-    
-                  this.tempArr.push(this.addressData.filter(add=>add.address_type_id==val)[0]);
-                  
-                  this.PremisesLabel[index] = this.tempArr[index].address_type;
-                 
-                if(data[index] !==undefined && data[index].premises_ownership < 2 ){
-                  data[index].premises_city = Object.keys(data[index].premises_city).map(function(key)
-                  {
-                        return data[index].premises_city[key].additional_premises_city;
-                  });
-                    //data[index].premises_city = data[index].premises_city.additional_premises_city;
-                }
-                  this.addressData.forEach(data=>
-                    {
-                      if(data.address_type_id == val)
-                      {
-                        data.status = 1;
-                      }
-                    });
-                  
-              });
-              
-              const control = <FormArray>this.addressForm.controls['additional_premises'] as FormArray;
-             
-              //  control.removeAt(0);
-              this.tempArr.forEach((item,index)=>
-              {  
-                  control.push(this.createPremises());
-              });
-                
-              this.addressForm.controls['additional_premises'].setValue(data);
-        }
-    
     validateAllFormFields(formGroup: FormGroup) {
         Object.keys(formGroup.controls).forEach(field => {
             const control = formGroup.get(field);
@@ -535,6 +398,7 @@ export class AddressComponent implements OnInit {
             }
         });
     }
+    
     ConvertMonthintoYear(e){
     
         let business_year = this.addressForm.controls.business_years.value;
@@ -557,13 +421,10 @@ export class AddressComponent implements OnInit {
       }
 
       inWords(e,i){ 
-          console.log(e);
-          console.log(i);
-        if(i != ''){
             this.premisesRentAmtInwords[i] = this._pd.convertNumberToWords(e.target.value);
-        }
-        else if(i == '' ){
-            this.rentAmtInwords = this._pd.convertNumberToWords(e.target.value);
-        }
+      }
+
+      inWordsForRent(e){
+        this.rentAmtInwords = this._pd.convertNumberToWords(e.target.value);
       }
 }
\ No newline at end of file