enetity details changes : kdk

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

@@ -0,0 +1,79 @@
+<div style="overflow: auto;">
+    <div class="ml-xs mr-xs" style="width: 100%;" fxLayout="row" fxLayoutAlign="end">
+        <div style="text-align:right;">
+            <button mat-raised-button mat-icon-button color="primary" class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"
+                type="button" (click)="onNoClick()"><mat-icon>close</mat-icon></button>
+        </div>
+    </div>
+    <mat-card style="padding: 12px 8px;">
+        <form [formGroup]="tatForm" (submit)="onSubmit()">
+            <div fxLayout="row wrap" fxLayout.xs="column" fxLayoutGap="6px" fxLayoutAlign="start">
+                <mat-form-field>
+                    <input placeholder="TAT Value 1" matInput formControlName="toppings4">
+                    <mat-error *ngIf="submitted && f.toppings4.hasError('required')" class="mat-text-warn">TAT 1 Value Required.!</mat-error>
+                </mat-form-field>
+                <mat-form-field>
+                    <input placeholder="TAT Value 2" matInput formControlName="toppings5">
+                    <mat-error *ngIf="submitted && f.toppings5.hasError('required')" class="mat-text-warn">TAT 2 Value Required.!</mat-error>
+                </mat-form-field>
+            </div>
+            <div fxLayout="row wrap" fxLayout.xs="column" fxLayoutGap="6px" fxLayoutAlign="start">
+                <div>
+                    <mat-form-field>
+                        <mat-select (selectionChange)="selectedPD($event)" placeholder="PD Type" formControlName="toppings1" multiple>
+                            <mat-option *ngFor="let pd of m_pdType" [value]="pd.id">{{pd.name}}</mat-option>
+                        </mat-select>
+                        <mat-error *ngIf="submitted && f.toppings1.hasError('required')" class="mat-text-warn">PD Type Required.!</mat-error>
+                    </mat-form-field>
+                    <div style="height: 160px; overflow: auto;">
+                        <ul style="list-style: none; margin: 0px;padding: 0px;">
+                            <li *ngFor="let pdName of selectedItem">
+                                <mat-chip>{{pdName.name}}</mat-chip>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+                <div>
+                    <mat-form-field>
+                        <mat-select (selectionChange)="selectedProduct($event)" placeholder="Product" formControlName="toppings2" multiple>
+                            <mat-option *ngFor="let prdct of m_product" [value]="prdct.id">{{prdct.name}}</mat-option>
+                        </mat-select>
+                        <mat-error *ngIf="submitted && f.toppings2.hasError('required')" class="mat-text-warn">Product Required.!</mat-error>
+                    </mat-form-field>
+                    <div style="height: 160px; overflow: auto;">
+                        <ul style="list-style: none; margin: 0px;padding: 0px;">
+                            <li *ngFor="let prdcName of selectedProductItem" style="padding: 2px;">
+                                <mat-chip>{{prdcName.name}}</mat-chip>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+                <div>
+                    <mat-form-field>
+                        <mat-select (selectionChange)="selectedCity($event)" placeholder="City" formControlName="toppings3" multiple>
+                            <mat-option *ngFor="let city of m_city" [value]="city.id">{{city.name}}</mat-option>
+                        </mat-select>
+                        <mat-error *ngIf="submitted && f.toppings3.hasError('required')" class="mat-text-warn">City Required.!</mat-error>
+                    </mat-form-field>
+                    <div style="height: 160px; overflow: auto;">
+                        <ul style="list-style: none; margin: 0px;padding: 0px;">
+                            <li *ngFor="let cityName of selectedCityItem" style="padding: 2px;">
+                                <mat-chip>{{cityName.name}}</mat-chip>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+            <div fxLayout="row" fxLayoutAlign="end">
+                <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Reset" matTooltipPosition="above" type="reset"><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="submit"><mat-icon>save</mat-icon></button>
+            </div>
+        </form>
+        <div *ngIf="existValArray.length > 0">
+            <h5><b>Note : </b> Following are already exist for this Entity.</h5>
+            <ul>
+                <li *ngFor="let val of existValArray">{{ val }}</li>
+            </ul>
+        </div>
+    </mat-card>
+</div>

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

@@ -1,59 +1,24 @@
-<mat-card>
+<div fxLayout="row" fxLayout.xs="column" fxLayoutWrap fxLayoutAlign="end" style="padding-top:1%">
-    <form [formGroup]="tatForm" (submit)="onSubmit()">
+      <div fxFlex="20%">
+        <button mat-fab class="mr-1 mb-1" color="primary"matTooltip="Add New Tat Details" matTooltipPosition="above"  (click)="addNewTatDetails()"><mat-icon>add</mat-icon></button>
+      </div>
+</div>
+
+<mat-card *ngFor="let data of entityTatListDetails">
    <div fxLayout="row wrap" fxLayout.xs="column" fxLayoutGap="2%" fxLayoutAlign="center center">
-        <div fxFlex="23.5%">
+        <div fxFlex="48%">
-            <mat-form-field>
+          <div class="text-line-limit">
-                <mat-select (selectionChange)="selectedPD($event)" placeholder="PD Type" formControlName="toppings1" multiple>
+            <div *ngFor="let comb of data.tatCombinations; let last = last">{{comb.pd.name}} - {{comb.product.name}} - {{comb.city.name}} <span *ngIf="!last">,</span></div>
-                    <mat-option *ngFor="let pd of m_pdType" [value]="pd.id">{{pd.name}}</mat-option>
-                </mat-select>
-                <mat-error *ngIf="submitted && f.toppings1.hasError('required')" class="mat-text-warn">PD Type Required.!</mat-error>
-            </mat-form-field>
-            <mat-chip-list  fxLayout="row wrap" fxLayout.xs="column">
-                <mat-chip *ngFor="let pdName of selectedItem" >{{pdName.name}}</mat-chip>
-            </mat-chip-list>
-        </div>
-        <div fxFlex="23.5%">
-            <mat-form-field>
-                <mat-select (selectionChange)="selectedProduct($event)" placeholder="Product" formControlName="toppings2" multiple>
-                    <mat-option *ngFor="let prdct of m_product" [value]="prdct.id">{{prdct.name}}</mat-option>
-                </mat-select>
-                    <mat-error *ngIf="submitted && f.toppings2.hasError('required')" class="mat-text-warn">Product Required.!</mat-error>
-            </mat-form-field>
-            <mat-chip-list fxLayout="row wrap" fxLayout.xs="column">
-                <mat-chip *ngFor="let prdcName of selectedProductItem" >{{prdcName.name}}</mat-chip>
-            </mat-chip-list>
-        </div>
-        <div fxFlex="23.5%">
-            <mat-form-field>
-                <mat-select (selectionChange)="selectedCity($event)" placeholder="City" formControlName="toppings3" multiple>
-                    <mat-option *ngFor="let city of m_city" [value]="city.id">{{city.name}}</mat-option>
-                </mat-select>
-                <mat-error *ngIf="submitted && f.toppings3.hasError('required')" class="mat-text-warn">City Required.!</mat-error>
-            </mat-form-field>
-            <mat-chip-list fxLayout="row wrap" fxLayout.xs="column">
-                <mat-chip *ngFor="let cityName of selectedCityItem" >{{cityName.name}}</mat-chip>
-            </mat-chip-list>
-        </div>
-        <div fxFlex="23.5%">
-            <mat-form-field>
-                <input placeholder="TAT Value 1" matInput formControlName="toppings4">
-            </mat-form-field> 
-            <mat-error *ngIf="submitted && f.toppings4.hasError('required')" class="mat-text-warn">TAT 1 Value Required.!</mat-error>
-                <mat-form-field>
-                <input placeholder="TAT Value 2" matInput formControlName="toppings5">
-            </mat-form-field> 
-            <!--<mat-error *ngIf="submitted && ques['controls'].question_weightage.hasError('required')" class="mat-text-warn">Ques. WT is Required.!</mat-error>-->
           </div>
         </div>
-    <div fxLayout="row" fxLayoutAlign="end">
+        <div fxFlex="9%">
-        <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Reset" matTooltipPosition="above" type="reset"><mat-icon>settings_backup_restore</mat-icon></button>
+          {{data.tatVal1}}
-        <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Save" matTooltipPosition="above" type="submit"><mat-icon>save</mat-icon></button>
+        </div>
+        <div fxFlex="9%">
+          {{data.tatVal2}}
+        </div>
+        <div fxFlex="18%">
+          <button mat-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above" (click)="editDetails(data)"><mat-icon>edit</mat-icon></button>
+        </div>
    </div>
-    </form>
-    <!--<div *ngIf="valArray.length > 0">
-        <h5><b>Note : </b> This following Combincation already exist for this Entity with different Tat Values.</h5>
-        <ul>
-            <li *ngFor="let val of valArray">{{ val }}</li>
-        </ul>
-    </div>-->
 </mat-card>

ng6-seed/src/app/settings/entity/entity-edit/entity-edit-tat/entity-edit-tat.component.scss

@@ -0,0 +1,16 @@
+.text-line-limit {
+   text-overflow: ellipsis;
+   overflow: hidden;
+  //  white-space: nowrap;
+   display: -webkit-box;
+   line-height: 16px;     /* fallback */
+   max-height: 32px;      /* fallback */
+   -webkit-line-clamp: 2; /* number of lines to show */
+   -webkit-box-orient: vertical;
+   
+  // text-overflow: ellipsis;
+  // overflow: hidden; 
+  // width: 160px; 
+  // height: 1.2em; 
+  // white-space: nowrap;
+}

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

@@ -17,6 +17,93 @@ import { EntityService } from './../../../service/entity/entity.service';
 })
 export class EntityEditTatComponent implements OnInit {
 
+ 
+  @Input() public entityId: number;
+
+	/**
+	 * Notifier service
+	 */
+  private notifier: NotifierService;
+
+  constructor(notifier: NotifierService,
+    private entityService: EntityService,
+    private mastersService: MastersService,
+    private dialog: MatDialog) {
+    this.notifier = notifier;
+  }
+  ngOnInit() {
+  }
+
+  addNewTatDetails() {
+    const dialogRef = this.dialog.open(DialogEntityAddTatComponent, {
+      data: {entity_id: this.entityId},
+      disableClose: true
+    });
+    dialogRef.afterClosed()
+      .subscribe(dataresult => {
+      });
+  }
+
+  entityTatListDetails: any = [ {
+    'm_id': 1,
+    'tatVal1': 3,
+    'tatVal2':10,
+    "tatCombinations" : [
+      {
+        'c_id': 1,
+        'pd': {
+         'id': 1, 
+         'name': 'PD Type 1' 
+        },
+        'product': { 
+          'id': 2, 
+          'name': 'Product 2' 
+        },
+        'city' : { 
+          'id': 3, 
+          'name': 'City 3' 
+        }
+      },
+      {
+        'c_id': 2,
+        'pd': {
+         'id': 2, 
+         'name': 'PD Type 2' 
+        },
+        'product': { 
+          'id': 1, 
+          'name': 'Product 1' 
+        },
+        'city' : { 
+          'id': 1, 
+          'name': 'City 1' 
+        }
+      }
+    ]
+  }]
+
+}
+
+
+// var array1=["A","B","C","D"];
+// var array2=["1","2","3"];
+// var array3=["#","$","@"];
+// var result1 = array1.reduce( (a1, v1, i1) =>
+//     a1.concat(array2.map(w => v1+w)),[]).reduce((a2, v2, i3)=>
+//                            a2.concat(array3.map(u=> v2+u)),[])
+// console.log(result1);
+// var valueApi = ["B1$","C2#"];
+// var exist = result1.filter(a => valueApi.indexOf(a) > -1);
+// console.log("exit :" + exist);
+
+@Component({
+  selector: 'dialog-entity-add-tat',
+  styles: [``
+  ],
+  templateUrl: './entity-add-tat.component.html'
+})
+export class DialogEntityAddTatComponent implements OnInit {
+
   public noRocordsFound: boolean;
   public entityVendorCityRecord: any;
   public errorMessage;
@@ -47,6 +134,8 @@ export class EntityEditTatComponent implements OnInit {
   constructor(notifier: NotifierService,
     private entityService: EntityService,
     private mastersService: MastersService,
+    public dialogRef: MatDialogRef<DialogEntityAddTatComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: any,
     private _formBuilder: FormBuilder) {
     this.notifier = notifier;
     this.tatForm = this._formBuilder.group({
@@ -114,33 +203,6 @@ export class EntityEditTatComponent implements OnInit {
 
   resultApi = ['123', '211'];
 
-  check() {
-    let arr1 = this.tatForm.controls['toppings1'].value;
-    let arr2 = this.tatForm.controls['toppings2'].value;
-    let arr3 = this.tatForm.controls['toppings3'].value;
-    alert(arr1);
-    let array1 = [...arr1];
-    let array2 = [...arr2];
-    let array3 = [...arr3];
-    let result1 = array1.reduce((a1, v1, i1) =>
-      a1.concat(array2.map(w => v1 + "" + w)), []).reduce((a2, v2, i3) =>
-        a2.concat(array3.map(u => v2 + "" + u)), []);
-
-    let exist = this.resultApi.filter(a => result1.indexOf(a) > -1);
-    alert(result1);
-    alert(exist);
-  }
-
-// {
-//         alert("a.id = "+a.id+" id ="+id);
-//         if(a.id == id)
-//         { 
-//           return a
-//         }
-//         else{ 
-//           return -1
-//         }}
-
   getIdPdName(id) {
       let pdF = this.m_pdType.filter(a => a.id == id);
       return pdF[0].name;
@@ -176,37 +238,22 @@ export class EntityEditTatComponent implements OnInit {
 
       let exist = this.resultApi.filter(a => result1.indexOf(a) > -1);
       if(exist){
-
+      // alert(result1);
-      alert(result1);
+      // alert(exist);
-      alert(exist);
-      
       this.existValArray = [];
-
       exist.forEach(a=>{
         let pdName = this.getIdPdName(a[0]);
         let productName = this.getIdProductName(a[1]);
         let cityName = this.getIdCityName(a[2]);
         this.existValArray.push(`${pdName}, ${productName}, ${cityName}`);
       });
-
     } else {
-
+      // api add new here
+      }
     }
   }
 
+  onNoClick(): void {
+    this.dialogRef.close();
   }
-
 }
-
-
-
-// var array1=["A","B","C","D"];
-// var array2=["1","2","3"];
-// var array3=["#","$","@"];
-// var result1 = array1.reduce( (a1, v1, i1) =>
-//     a1.concat(array2.map(w => v1+w)),[]).reduce((a2, v2, i3)=>
-//                            a2.concat(array3.map(u=> v2+u)),[])
-// console.log(result1);
-// var valueApi = ["B1$","C2#"];
-// var exist = result1.filter(a => valueApi.indexOf(a) > -1);
-// console.log("exit :" + exist);

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

@@ -234,12 +234,12 @@
                     </app-entity-edit-vendor-city-info>
                 </ng-template>
             </mat-tab> 
-            <!--<mat-tab label="TAT Information">
+            <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>
             <!--<mat-tab label="Category"> 
         <ng-template matTabContent>
         <app-template-edit-category [questionId]="question_id">

ng6-seed/src/app/settings/entity/entity.module.ts

@@ -29,7 +29,10 @@ import { EntityEditComponent } from './entity-edit/entity.edit.component';
 
 import { EntityService } from './../service/entity/entity.service';
 import { EntityEditRegionComponent } from './entity-edit/entity-edit-region/entity-edit-region.component';
+
 import { EntityEditTatComponent } from './entity-edit/entity-edit-tat/entity-edit-tat.component';
+import { DialogEntityAddTatComponent } from './entity-edit/entity-edit-tat/entity-edit-tat.component';
+
 import { EntityEditPriceComponent } from './entity-edit/entity-edit-price/entity-edit-price.component';
 import { EntityEditBillingInfoComponent } from './entity-edit/entity-edit-billing-info/entity-edit-billing-info.component';
 
@@ -108,6 +111,7 @@ const customNotifierOptions: NotifierOptions = {
     EntityAddComponent,
     EntityEditRegionComponent,
     EntityEditTatComponent,
+    DialogEntityAddTatComponent,
     EntityEditPriceComponent,
     EntityEditBillingInfoComponent,
     DialogAddEditBillingInfo,
@@ -116,6 +120,7 @@ const customNotifierOptions: NotifierOptions = {
   entryComponents: [
     // EntityEditComponent
     DialogAddEditBillingInfo,
+    DialogEntityAddTatComponent,
     EntityAddComponent
   ],
   providers : [