entity add , edit branch details changes : kdk

ng6-seed/src/app/settings/entity/entity-edit/entity-branch-add/entity-branch-add.component.html

@@ -1,27 +1,73 @@
-<form class="example-form">
+<!--<div *ngIf="listofCity.length > 0">
-  <mat-form-field class="example-full-width">
+  <mat-card *ngFor="let city of listofCity; let i = index;">
-    <input matInput placeholder="Add Branch" name="first" [(ngModel)]="newElement.name">
+    <h4>{{city.name}}</h4>
-  </mat-form-field> <span *ngIf="newElement.name"><mat-icon (click)="addItem()">check</mat-icon></span>
+    <div *ngIf="city.branch_details.length > 0">
-</form>
+      <form class="example-form">
-<div *ngIf="listOfBranch.length > 0">
+        <mat-form-field class="example-full-width">
-  <mat-list role="list" class="inlist">
+          <input matInput placeholder="Add Branch" name="first" [(ngModel)]="newElement[city.name]">
-    <ng-container *ngFor="let branch of listOfBranch; let i = index;">
+        </mat-form-field> <span *ngIf="newElement[city.name]"><mat-icon (click)="addItem(city.name)">check</mat-icon></span>
-      <mat-list-item role="listitem" *ngIf="branch.isactive == 1" class="list-item" [ngStyle]="{ 'border-color': i === currentElement ? '#f44336' : 'gray'}">
+      </form>
-        <label style="width: 80%" [hidden]="currentElement === i">{{branch.branch_name}}</label>
+      <mat-list role="list" class="inlist">
-        <input *ngIf="currentElement === i" matInput placeholder="Add Branch" [(ngModel)]="branch.branch_name">
+        <ng-container *ngFor="let branch of city.branch_details; let i = index;">
-        <span (click)="editItem(i)" [hidden]="currentElement === i"><mat-icon>edit</mat-icon></span>
+          <mat-list-item role="listitem" *ngIf="branch.isactive == 1" class="list-item" [ngStyle]="{ 'border-color': i === currentElement ? '#f44336' : 'gray'}">
-        <span (click)="editItem(-1)" *ngIf="currentElement === i"><mat-icon>check</mat-icon></span>
+            <label style="width: 80%" [hidden]="currentElement === i">{{branch.branch_name}}</label>
-        <span (click)="deleteItem(branch, i)"><mat-icon>delete</mat-icon></span>
+            <input *ngIf="currentElement === i" matInput placeholder="Add Branch" [(ngModel)]="branch.branch_name">
-      </mat-list-item>
+            <span (click)="editItem(i)" [hidden]="currentElement === i"><mat-icon>edit</mat-icon></span>
-    </ng-container>
+            <span (click)="editItem(-1)" *ngIf="currentElement === i"><mat-icon>check</mat-icon></span>
-  </mat-list>
+            <span (click)="deleteItem(branch, i)"><mat-icon>delete</mat-icon></span>
-
+          </mat-list-item>
+        </ng-container>
+      </mat-list>
+    </div>
+    <div *ngIf="city.branch_details.length == 0">
+      <h2 style="color: #ddd; text-align: center;">No Records Found...</h2>
+    </div>
+  </mat-card>
+<pre>{{ newElement | json}}</pre>
   <div class="row" style="text-align:right;">
     <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Reset" matTooltipPosition="above" (click)="reset();false"><mat-icon>settings_backup_restore</mat-icon></button>
     <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Save" matTooltipPosition="above" type="button"
       (click)="saveBranch()"><mat-icon>save</mat-icon></button>
   </div>
 </div>
-<div *ngIf="listOfBranch.length == 0">
+<div *ngIf="listofCity.length == 0">
   <h2 style="color: #ddd; text-align: center;">No Records Found...</h2>
-</div>
+</div>-->
+
+<form [formGroup]="_addEntityBranchFrom" (submit)="onSubmit()">
+    <div formArrayName="branch_details" class="example-full-width">
+      <mat-card *ngFor="let region of _addEntityBranchFrom.controls.branch_details['controls']; let i=index">
+           <mat-card-content *ngIf="region.get('isactive').value == 1">
+            <div [formGroupName]="i">
+                <div fxLayout="row wrap" fxLayout.xs="column" fxLayoutGap="2%" fxLayoutAlign="center center">
+                    <mat-form-field fxFlex="30%">
+                        <input matInput placeholder="Branch Name" name="first"  formControlName="branch_name">
+                        <mat-error *ngIf="submitted && region['controls'].branch_name.hasError('required')" class="mat-text-warn">Branch Name Required.!</mat-error>
+                    </mat-form-field>
+
+                    <mat-form-field fxFlex="30%">
+                        <mat-select placeholder="City *" formControlName="fk_city_id">
+                            <mat-option *ngFor="let city of m_city" [value]="city.fk_city_id">{{ city.name }}</mat-option>
+                        </mat-select>
+                        <mat-error *ngIf="submitted && region['controls'].fk_city_id.hasError('required')" class="mat-text-warn">City Required.!</mat-error>
+                    </mat-form-field>
+                     <div fxFlex="30%" style="text-align:center;">
+                            <!--<mat-checkbox *ngIf="region.get('entity_lender_branch_id').value != null" formControlName="isactive" [ngModel]="region.get('isactive').value == 1 ? true : region.get('isactive').value == 0 ? false : null"
+                            (ngModelChange)="region.get('isactive').value = $event ? 1 : 0"></mat-checkbox>
+                            
+                            <span *ngIf="_addEntityBranchFrom.controls.branch_details.controls.length > 1" (click)="removeLanguage(i)">-->
+                            <button (click)="deleteEntityBranch(i, $event); false" mat-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Delete" matTooltipPosition="above"><mat-icon>delete</mat-icon></button>
+                        <!--</span>-->
+                     </div>
+                </div>
+            </div>
+        </mat-card-content>
+        </mat-card>
+    </div>
+    <div class="row" style="text-align:right;">
+            <button mat-raised-button mat-icon-button class="mr-1 mb-1" color="primary" matTooltip="Add More Region Information" matTooltipPosition="above" (click)="addRegionFormData(null, $event); false"><mat-icon>add</mat-icon></button>
+   
+        <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Reset" matTooltipPosition="above" (click)="reset();false"><mat-icon>settings_backup_restore</mat-icon></button>
+        <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Save" matTooltipPosition="above" type="button" (click)="saveBranch(); false"><mat-icon>save</mat-icon></button>
+    </div>
+</form>

ng6-seed/src/app/settings/entity/entity-edit/entity-branch-add/entity-branch-add.component.ts

@@ -18,9 +18,15 @@ import { EntityService } from './../../../service/entity/entity.service';
 export class EntityBranchAddComponent implements OnInit {
 
   @Input() public entityId: number;
-  public newElement = { name: '' };
+  public newElement: any= {};
+  public listofCity = [];
   public listOfBranch = [];
 
+  public m_city: any = [];
+  
+  public _addEntityBranchFrom: FormGroup;
+  public submitted = false;
+
   /**
 * Notifier service
 */
@@ -32,18 +38,89 @@ export class EntityBranchAddComponent implements OnInit {
     private mastersService: MastersService,
     private _formBuilder: FormBuilder) {
     this.notifier = notifier;
+     this._addEntityBranchFrom = this._formBuilder.group({
+      branch_details: this._formBuilder.array([
+        // this.addRegionFormData(null, null),
+      ])
+    })
   }
 
   ngOnInit() {
     this.entityService.getEntityBranchList(this.entityId).subscribe(data => {
       if (data.dataStatus) {
-        this.listOfBranch = data.records;
+        this.listofCity = data.records;
+        this.m_city = data.records.city_master;
+        // this.listOfBranch = data.records;
+        this.setFormDatas(data.records.branch_details);
       }
     }, err => {
-
     })
   }
 
+  setFormDatas(record) {
+    if (record.length > 0) {
+      for (let val of record) {
+        let vals = {
+          entity_lender_branch_id: val.entity_lender_branch_id,
+          branch_name: val.branch_name,
+          fk_entity_id: val.fk_entity_id,
+          fk_region_id: val.fk_region_id,
+          fk_city_id: val.fk_city_id,
+          fk_updatedby: val.fk_updatedby,
+          fk_createdby: val.fk_createdby,
+          isactive: val.isactive,
+        };
+        this.addRegionFormData(vals, null);
+      }
+    }
+  }
+
+   // convenience getter for easy access to form fields
+  get f() { return this._addEntityBranchFrom.controls; }
+
+  // Dynamic Form field creation Functionality : START ===>
+  initRegionFormLoad(data) {
+    return this._formBuilder.group({
+      entity_lender_branch_id: [data.entity_lender_branch_id],
+      branch_name: [data.branch_name, Validators.compose([Validators.required])],
+      fk_city_id: [data.fk_city_id, Validators.compose([Validators.required])],
+      fk_entity_id: [data.fk_entity_id],
+      fk_updatedby: [data.fk_updatedby],
+      fk_createdby: [data.fk_createdby],
+      isactive: [data.isactive],
+    });
+  }
+  addRegionFormData(data, e) {
+    if (data == null) {
+      let newDate = {
+        entity_lender_branch_id: null,
+        branch_name:null,
+        fk_entity_id: this.entityId,
+        fk_createdby: null,
+        fk_updatedby: null,
+        fk_city_id: null,
+        isactive: 1,
+      }
+      const control = <FormArray>this._addEntityBranchFrom.controls['branch_details'];
+      control.push(this.initRegionFormLoad(newDate));
+    } else {
+      const control = <FormArray>this._addEntityBranchFrom.controls['branch_details'];
+      control.push(this.initRegionFormLoad(data));
+    }
+  }
+
+  deleteEntityBranch(inx, e) {
+    e.stopPropagation();
+    const control = <FormArray>this._addEntityBranchFrom.controls['branch_details'];
+    // let dataS = control.controls[inx].value;
+    if(control.controls[inx].value['entity_lender_branch_id'] !== null){
+      console.log(  this._addEntityBranchFrom.controls['branch_details']['controls'][inx].controls.isactive);
+      this._addEntityBranchFrom.controls['branch_details']['controls'][inx].controls.isactive.setValue("0");
+       console.log(  this._addEntityBranchFrom.controls['branch_details']['controls'][inx].controls.isactive.value);
+    } else {
+      control.removeAt(inx);
+    }
+  }
 
   // public listOfBranch = [
   //   	{
@@ -72,17 +149,17 @@ export class EntityBranchAddComponent implements OnInit {
   // 	}
   // ];
 
-  addItem(): void {
+  addItem(prop): void {
-    let data = {
+    // let data = {
-      "entity_lender_branch_id": null,
+    //   "entity_lender_branch_id": null,
-      "branch_name": this.newElement.name,
+    //   "branch_name": this.newElement.name,
-      "isactive": "1",
+    //   "isactive": "1",
-      "fk_createdby": null,
+    //   "fk_createdby": null,
-      "fk_updatedby": null,
+    //   "fk_updatedby": null,
-      "fk_entity_id": this.entityId.toString()
+    //   "fk_entity_id": this.entityId.toString()
-    }
+    // }
-    this.listOfBranch.push(data);
+    // this.listOfBranch.push(data);
-    this.newElement.name = '';
+    // this.newElement.name = '';
   }
 
   public currentElement = -1;
@@ -98,8 +175,48 @@ export class EntityBranchAddComponent implements OnInit {
     }
   }
 
+   /** To Save/Edited Popup Data */
+  onSubmit() {
+    alert();
+    this.submitted = true;
+    // stop here if form is invalid
+    if (this._addEntityBranchFrom.invalid) {
+      // this.errorMessage = "Please Fill All Mandate Fields.";
+      return; 
+    } else {
+      var formValues = this._addEntityBranchFrom.value;
+      //To Remove The "Null" With Key also
+      Object.keys(formValues).forEach((key) => (formValues[key] == null) && delete formValues[key]);
+      alert(JSON.stringify(formValues.branch_details));
+        // this.entityService.updateEntityIdRegionInfoDetails(formValues.region_lender).subscribe(
+        //   dataresult => {
+        //     if (dataresult.status == 200) {
+        //       console.log(dataresult);
+        //       this.notifier.notify('success', 'Your Changes Updated.!');
+        //       const arr = <FormArray>this._editEntityRegionFrom.controls.region_lender;
+        //       arr.controls.splice(0);
+        //       // this.getEntityIDRegionInfoDetails();
+        //     }
+        //     else {
+        //       this.notifier.notify('warning', 'Something Wents Wrong Try Again.!');
+        //       // this.errorMessage = "Something Wents Wrong Try Again.!";
+        //     }
+        //   }, error => {
+        //     this.notifier.notify('warning', 'Something Wents Wrong Try Again.!');
+        //     // this.errorMessage = "Some Thing Wents Wrong Try Again.!";
+        //   });
+    }
+  }
+
+
   saveBranch(): void {
-    this.entityService.updateEntityIdBranchInfoDetails(this.listOfBranch).subscribe(data => {
+// alert();
+      var formValues = this._addEntityBranchFrom.value;
+      //To Remove The "Null" With Key also
+      Object.keys(formValues).forEach((key) => (formValues[key] == null) && delete formValues[key]);
+      // alert(JSON.stringify(formValues.branch_details));
+
+    this.entityService.updateEntityIdBranchInfoDetails(formValues.branch_details).subscribe(data => {
       if (data.dataStatus) {
         this.notifier.notify('success', 'Your Changes Updated.!');
       } else {

ng6-seed/src/app/settings/entity/entity-edit/entity.edit.component.html

@@ -234,18 +234,18 @@
                     </app-entity-edit-vendor-city-info>
                 </ng-template>
             </mat-tab> 
-            <mat-tab label="TAT Information">
-                <ng-template matTabContent>
-                    <app-entity-edit-tat [entityId]="entity_id">
-                    </app-entity-edit-tat>
-                </ng-template>
-            </mat-tab>
              <mat-tab  *ngIf="localEntityType == 2" label="Branch">
                 <ng-template matTabContent>
                     <app-entity-branch-add [entityId]="entity_id">
                     </app-entity-branch-add>
                 </ng-template>
             </mat-tab>
+            <mat-tab label="TAT Information">
+                <ng-template matTabContent>
+                    <app-entity-edit-tat [entityId]="entity_id">
+                    </app-entity-edit-tat>
+                </ng-template>
+            </mat-tab>
             <!--<mat-tab label="Category"> 
         <ng-template matTabContent>
         <app-template-edit-category [questionId]="question_id">