master detail changes

ng6-seed/src/app/settings/masters/component/branch/branch-list/branch-list.component.html

@@ -15,7 +15,7 @@
    
    <div class="example-container mat-elevation-z8">
    
-     <mat-table  *ngIf="dataSource.length > 0" #table [dataSource]="dataSource" matSort >
+     <mat-table [dataSource]="dataSource" matSort >
    
         <ng-container matColumnDef="SerialNo">
             <mat-header-cell *matHeaderCellDef mat-sort-header>Sl </mat-header-cell>
@@ -53,12 +53,11 @@
        </mat-row>
      </mat-table>
 
-     <p *ngIf="dataSource.length === 0">No records found</p>
+     <!-- <div *ngIf="dataSource.length === 0">No records found</div> -->
    
      <mat-paginator [pageSizeOptions]="[5, 10, 25, 50, 100]"></mat-paginator>
    </div>
 </mat-card-content>
 
-
   
-  <p *ngIf="dataSource.length === 0">No records found</p>
+  <!-- <p *ngIf="dataSource.length === 0">No records found</p> -->

ng6-seed/src/app/settings/masters/component/branch/branch-list/branch-list.component.ts

@@ -12,8 +12,7 @@ import { map } from 'rxjs/operators';
 
 import { DataSource } from '@angular/cdk/table';
 import { of as observableOf, merge } from 'rxjs';
-// import { Bra } from './../branch-list';
+
-// BranchListComponent
 import { MastersService } from '../../../../service/masters/masters.service';
 import { BranchDialogComponent } from '../branch-dialog/branch-dialog.component';
 import { Branch,States,City } from '../../../model/branch';
@@ -45,7 +44,10 @@ export class BranchListComponent implements OnInit {
                   data => {
                       this.userData = data.records;
                       // alert(this.userData);
-                      this.dataLength = data.records.length;
+                      if(data.records === ''){
+                        this.dataLength = data.records.length;  
+                      }else{
+                      this.dataLength = 0}
                       this.dataSource.data = this.userData; 
                   }
                 )

ng6-seed/src/app/settings/masters/component/city/city-dialog/city-dialog.component.html

@@ -2,7 +2,7 @@
   <h2 mat-dialog-title>City &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button>
   </h2>
-</div> -->
+</div>
 <div class="container"
      fxLayout
      fxLayout.xs="column"
@@ -12,15 +12,23 @@
   <div class="mat-dialog-title" fxFlex="15px">City</div>
   <div fxFlex="20px" fxFlexOrder="3" style="text-align:right;"><button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button></div>
   <div fxFlex></div>
+</div> -->
+<div class="ml-xs mr-xs" style="width: 100%;" 
+fxLayout="row"
+fxLayoutAlign="center">
+<h2 mat-dialog-title style="width: 30%;"> City &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h2>
+<div style="width: 40%;"></div>
+<div style="width: 30%;text-align:right;">
+      <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button>
+</div>
 </div>
-
 
 <form [formGroup]="_cityForm" (submit)="onSubmit()">
 
     <div class="form-group">
           <mat-dialog-content>
 
-            <div class="mb-1"> 
+            <div class="ml-xs mr-xs"> 
                   <mat-form-field>
                         <mat-select placeholder="Pick Up State Name" required [formControl]="_cityForm.controls['fk_state_id']">
                                          <mat-option  *ngFor="let sd of stateDatas"  [value]="sd.state_id">{{ sd.name }}</mat-option>
@@ -29,7 +37,7 @@
                   </mat-form-field>
                   
             </div>
-            <div class="mb-1"> 
+            <div class="ml-xs mr-xs"> 
                   <mat-form-field>
                         <input matInput type="text" placeholder="City Name" required [formControl]="_cityForm.controls['name']">
                         <mat-error *ngIf="!_cityForm.controls['name'].valid && _cityForm.controls['name'].touched" class="mat-text-warn">You must include a Name.</mat-error>

ng6-seed/src/app/settings/masters/component/city/city-list/city-list.component.html

@@ -8,7 +8,7 @@
    </div>
    <!-- displayedColumns = ['city_id','name', 'fk_state_id','state_name' , 'isactive','actions']; 
      <div class="example-container mat-elevation-z8">
-            <table>-->
+            <table>
      <div datatable>
             <table style="border-collapse: collapse">           
                    <thead>
@@ -31,7 +31,7 @@
                   </td> 
                 </tr>
               </table>
-          </div> 
+          </div> -->
 
     <!--      <div>
             <!-- <mat-table [dataSource]="dataSource">  ->
@@ -71,6 +71,55 @@
           </div>
           
           <br>-->
+
+          <div class="example-header">
+            <mat-form-field>
+              <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
+            </mat-form-field>
+          </div>
           
-  
+          <div class="example-container mat-elevation-z8">
+          
+            <mat-table [dataSource]="dataSource" matSort >
+          
+               <ng-container matColumnDef="SerialNo">
+                   <mat-header-cell *matHeaderCellDef mat-sort-header>Sl </mat-header-cell>
+                   <mat-cell *matCellDef="let row; let i = index;"> {{i+1}} </mat-cell>
+               </ng-container>
+       
+              <ng-container matColumnDef="CityName">
+                <mat-header-cell *matHeaderCellDef mat-sort-header> City Name </mat-header-cell>
+                <mat-cell *matCellDef="let row"> {{row.name}} </mat-cell>
+              </ng-container>
+          
+              <ng-container matColumnDef="StateName">
+                <mat-header-cell *matHeaderCellDef mat-sort-header> State Name </mat-header-cell>
+                <mat-cell *matCellDef="let row"> {{row.cityname}} </mat-cell>
+              </ng-container>
+              
+              <ng-container matColumnDef="IsActive">
+                <mat-header-cell *matHeaderCellDef mat-sort-header> Is Active </mat-header-cell>
+                <mat-cell *matCellDef="let row"><!--{{row.isactive}}-->
+                   <mat-icon *ngIf="row.isactive == 1;else notactive;" class="hover-icon" matTooltip="Active" matTooltipPosition="above">done</mat-icon>
+                   <ng-template #notactive ><mat-icon class="hover-icon" matTooltip="Inactive" matTooltipPosition="above">clear</mat-icon></ng-template> 
+                </mat-cell>
+              </ng-container>
+       
+              <ng-container matColumnDef="Actions">
+                <mat-header-cell *matHeaderCellDef>   Actions </mat-header-cell>
+                <mat-cell *matCellDef="let row"> 
+                   <button mat-icon-button class="hover-icon" matTooltip="Edit" matTooltipPosition="above" (click)="editCity(row)"><mat-icon>edit</mat-icon></button>
+                   <button *ngIf="row.isactive == 1;" mat-icon-button class="hover-icon" matTooltip="Delete" matTooltipPosition="above" (click)="deleteBranch(row.city_id)"><mat-icon>delete_outline</mat-icon></button>
+                 </mat-cell>
+              </ng-container>
+          
+              <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+              <mat-row *matRowDef="let row; columns: displayedColumns;">
+              </mat-row>
+            </mat-table>
+          
+            <mat-paginator [pageSizeOptions]="[5, 10, 25, 50, 100]"></mat-paginator>
+          </div>
+ 
+        
 </mat-card-content>

ng6-seed/src/app/settings/masters/component/city/city-list/city-list.component.scss

@@ -54,7 +54,7 @@
 .mat-table {
   overflow: auto;
   max-height: 500px;
-}*/
+}*
   table {
     width: 100%;
   }
@@ -66,4 +66,25 @@
 .button{
   padding-left: 6px;
     font-size: 20px;
+}*/
+
+.example-container {
+  display: flex;
+  flex-direction: column;
+  min-width: 300px;
+}
+
+.example-header {  
+  min-height: 64px;
+  padding: 8px 24px 0;
+}
+
+.mat-form-field {
+  font-size: 14px;
+  width: 100%;
+}
+
+.mat-table {
+  overflow: auto;
+  max-height: 500px;
 }

ng6-seed/src/app/settings/masters/component/city/city-list/city-list.component.ts

@@ -28,9 +28,15 @@ export class CityListComponent implements OnInit {
   //, createdon, fk_createdby, updatedon, fk_updatedby, isactive
   displayedColumns = ['city_id','name', 'fk_state_id','state_name' , 'isactive','actions'];
 
+  userData = null;
+
+  public dataLength: number;
+  public dataSource = new MatTableDataSource();
+//  displayedColumns = ['SerialNo','BranchName','CityName', 'IsActive','Actions'];
+
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
- 
+
   constructor(private dialog: MatDialog,
     private _MastersService: MastersService) { }
 
@@ -38,7 +44,7 @@ export class CityListComponent implements OnInit {
   //    return this._MastersService.getAllCity();
   //  }
 
-  dataSource = new UserDataSource(this._MastersService);
+  //dataSource = new UserDataSource(this._MastersService);
   
   ngOnInit() {
     this.getCity();

ng6-seed/src/app/settings/masters/component/comments-on-locality/comments-on-locality-dialog/comments-on-locality-dialog.component.html

@@ -2,7 +2,7 @@
   <h2 mat-dialog-title>CommentOnLocality &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button>
   </h2>
-</div> -->
+</div> 
 <div class="container"
      fxLayout
      fxLayout.xs="column"
@@ -12,6 +12,15 @@
   <div class="mat-dialog-title" fxFlex="15px">Comment On Locality</div>
   <div fxFlex="20px" fxFlexOrder="3" style="text-align:right;"><button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button></div>
   <div fxFlex></div>
+</div>-->
+<div class="ml-xs mr-xs" style="width: 100%;" 
+fxLayout="row"
+fxLayoutAlign="center">
+<h2 mat-dialog-title style="width: 30%;"> Comment On Locality &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h2>
+<div style="width: 40%;"></div>
+<div style="width: 30%;text-align:right;">
+      <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button>
+</div>
 </div>
 
 
@@ -20,7 +29,7 @@
     <div class="form-group">
           <mat-dialog-content>
 
-            <div class="mb-1"> 
+            <div class="ml-xs mr-xs"> 
                   <mat-form-field style="width: 100%">
                         <input matInput type="text" placeholder="Rating" required [formControl]="_CommentOnLocalityForm.controls['rating']">
                         <mat-error *ngIf="!_CommentOnLocalityForm.controls['rating'].valid && _CommentOnLocalityForm.controls['rating'].touched" class="mat-text-warn">You must include a Rating.</mat-error>

ng6-seed/src/app/settings/masters/component/comments-on-locality/comments-on-locality-list/comments-on-locality-list.component.html

@@ -6,7 +6,7 @@
   <div *ngIf="loader">
     <mat-progress-bar mode="indeterminate" color="accent" class="mb-1"></mat-progress-bar>
  </div>        
- <div datatable>
+ <!--<div datatable>
     <table style="border-collapse: collapse">           
                  <thead>
                     <th style="text-align:  center;">#</th>
@@ -60,6 +60,55 @@
         </div>
         
         <br>-->
-        
 
+        <div class="example-header">
+          <mat-form-field>
+            <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
+          </mat-form-field>
+        </div>
+        
+        <div class="example-container mat-elevation-z8">
+        
+          <mat-table [dataSource]="dataSource" matSort >
+        
+             <ng-container matColumnDef="SerialNo">
+                 <mat-header-cell *matHeaderCellDef mat-sort-header>Sl </mat-header-cell>
+                 <mat-cell *matCellDef="let row; let i = index;"> {{i+1}} </mat-cell>
+             </ng-container>
+     
+            <ng-container matColumnDef="CityName">
+              <mat-header-cell *matHeaderCellDef mat-sort-header> City Name </mat-header-cell>
+              <mat-cell *matCellDef="let row"> {{row.name}} </mat-cell>
+            </ng-container>
+        
+            <ng-container matColumnDef="StateName">
+              <mat-header-cell *matHeaderCellDef mat-sort-header> State Name </mat-header-cell>
+              <mat-cell *matCellDef="let row"> {{row.cityname}} </mat-cell>
+            </ng-container>
+            
+            <ng-container matColumnDef="IsActive">
+              <mat-header-cell *matHeaderCellDef mat-sort-header> Is Active </mat-header-cell>
+              <mat-cell *matCellDef="let row"><!--{{row.isactive}}-->
+                 <mat-icon *ngIf="row.isactive == 1;else notactive;" class="hover-icon" matTooltip="Active" matTooltipPosition="above">done</mat-icon>
+                 <ng-template #notactive ><mat-icon class="hover-icon" matTooltip="Inactive" matTooltipPosition="above">clear</mat-icon></ng-template> 
+              </mat-cell>
+            </ng-container>
+     
+            <ng-container matColumnDef="Actions">
+              <mat-header-cell *matHeaderCellDef>   Actions </mat-header-cell>
+              <mat-cell *matCellDef="let row"> 
+                 <button mat-icon-button class="hover-icon" matTooltip="Edit" matTooltipPosition="above" (click)="editCity(row)"><mat-icon>edit</mat-icon></button>
+                 <button *ngIf="row.isactive == 1;" mat-icon-button class="hover-icon" matTooltip="Delete" matTooltipPosition="above" (click)="deleteBranch(row.city_id)"><mat-icon>delete_outline</mat-icon></button>
+               </mat-cell>
+            </ng-container>
+        
+            <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+            <mat-row *matRowDef="let row; columns: displayedColumns;">
+            </mat-row>
+          </mat-table>
+        
+          <mat-paginator [pageSizeOptions]="[5, 10, 25, 50, 100]"></mat-paginator>
+        </div>
+
+        
 </mat-card-content>

ng6-seed/src/app/settings/masters/component/comments-on-locality/comments-on-locality-list/comments-on-locality-list.component.scss

@@ -55,7 +55,7 @@
   overflow: auto;
   max-height: 500px;
 }*/
-/* Structure */
+/* Structure *
 .example-container {
     display: flex;
     flex-direction: column;
@@ -89,5 +89,25 @@
   
   th { 
     text-align: left;
+  }*/
+  .example-container {
+    display: flex;
+    flex-direction: column;
+    min-width: 300px;
+  }
+  
+  .example-header {  
+    min-height: 64px;
+    padding: 8px 24px 0;
+  }
+  
+  .mat-form-field {
+    font-size: 14px;
+    width: 100%;
+  }
+  
+  .mat-table {
+    overflow: auto;
+    max-height: 500px;
   }
 

ng6-seed/src/app/settings/masters/component/comments-on-locality/comments-on-locality-list/comments-on-locality-list.component.ts

@@ -28,9 +28,15 @@ export class CommentsOnLocalityListComponent implements OnInit {
 
   displayedColumns = ['comments_on_locality_id','rating','isactive','actions'];
 
+  userData = null;
+
+  public dataLength: number;
+  public dataSource = new MatTableDataSource();
+  //displayedColumns = ['SerialNo','BranchName','CityName', 'IsActive','Actions'];
+
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
-   
+
   constructor(private dialog: MatDialog,
     private _MastersService: MastersService) { }
 
@@ -38,7 +44,7 @@ export class CommentsOnLocalityListComponent implements OnInit {
   //    return this._MastersService.getAllCommentsOnLocality();
   //  }
 
-  dataSource = new UserDataSource(this._MastersService);
+//  dataSource = new UserDataSource(this._MastersService);
   
   ngOnInit() {
     this.getCommentsOnLocality();

ng6-seed/src/app/settings/masters/component/company/company-dialog/company-dialog.component.html

@@ -2,7 +2,7 @@
     <h2 mat-dialog-title>Company &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button>
     </h2>
-</div> -->
+</div> 
   
 <div class="container"
      fxLayout
@@ -13,7 +13,17 @@
   <div class="mat-dialog-title" fxFlex="15px">Company</div>
   <div fxFlex="20px" fxFlexOrder="3" style="text-align:right;"><button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button></div>
   <div fxFlex></div>
+</div>-->
+<div class="ml-xs mr-xs" style="width: 100%;" 
+fxLayout="row"
+fxLayoutAlign="center">
+<h2 mat-dialog-title style="width: 30%;"> Company &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h2>
+<div style="width: 40%;"></div>
+<div style="width: 30%;text-align:right;">
+      <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button>
 </div>
+</div>
+
 
   
   <form [formGroup]="_companyForm" (ngsubmit)="onSubmit()">

ng6-seed/src/app/settings/masters/component/company/company-list/company-list.component.html

@@ -6,15 +6,15 @@
     <div *ngIf="loader">
         <mat-progress-bar mode="indeterminate" color="accent" class="mb-1"></mat-progress-bar>
      </div>        
-     <div datatable>
+     <!-- <div datatable>
         <table style="border-collapse: collapse">           
                    <thead>
                       <th style="text-align:  center;">#</th>
-                      <!-- <th style="text-align:  center;">Company ID</th> -->
+                      <!-- <th style="text-align:  center;">Company ID</th> ->
                       <th style="text-align:  center;">Company Name</th>
                       <th style="text-align:  center;">Company City</th>
                       <th style="text-align:  center;">Company State</th>
-                      <!-- <th style="text-align:  center;">Is Active</th> -->
+                      <!-- <th style="text-align:  center;">Is Active</th> ->
                       <th style="text-align:  center;">Action</th>
                     </thead>
     
@@ -94,7 +94,53 @@
             </mat-table>
           </div>-->
           
-          <br>
+          <div class="example-header">
+            <mat-form-field>
+              <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
+            </mat-form-field>
+          </div>
           
+          <div class="example-container mat-elevation-z8">
+          
+            <mat-table [dataSource]="dataSource" matSort >
+          
+               <ng-container matColumnDef="SerialNo">
+                   <mat-header-cell *matHeaderCellDef mat-sort-header>Sl </mat-header-cell>
+                   <mat-cell *matCellDef="let row; let i = index;"> {{i+1}} </mat-cell>
+               </ng-container>
+       
+              <ng-container matColumnDef="CityName">
+                <mat-header-cell *matHeaderCellDef mat-sort-header> City Name </mat-header-cell>
+                <mat-cell *matCellDef="let row"> {{row.name}} </mat-cell>
+              </ng-container>
+          
+              <ng-container matColumnDef="StateName">
+                <mat-header-cell *matHeaderCellDef mat-sort-header> State Name </mat-header-cell>
+                <mat-cell *matCellDef="let row"> {{row.cityname}} </mat-cell>
+              </ng-container>
+              
+              <ng-container matColumnDef="IsActive">
+                <mat-header-cell *matHeaderCellDef mat-sort-header> Is Active </mat-header-cell>
+                <mat-cell *matCellDef="let row"><!--{{row.isactive}}-->
+                   <mat-icon *ngIf="row.isactive == 1;else notactive;" class="hover-icon" matTooltip="Active" matTooltipPosition="above">done</mat-icon>
+                   <ng-template #notactive ><mat-icon class="hover-icon" matTooltip="Inactive" matTooltipPosition="above">clear</mat-icon></ng-template> 
+                </mat-cell>
+              </ng-container>
+       
+              <ng-container matColumnDef="Actions">
+                <mat-header-cell *matHeaderCellDef>   Actions </mat-header-cell>
+                <mat-cell *matCellDef="let row"> 
+                   <button mat-icon-button class="hover-icon" matTooltip="Edit" matTooltipPosition="above" (click)="editCity(row)"><mat-icon>edit</mat-icon></button>
+                   <button *ngIf="row.isactive == 1;" mat-icon-button class="hover-icon" matTooltip="Delete" matTooltipPosition="above" (click)="deleteBranch(row.city_id)"><mat-icon>delete_outline</mat-icon></button>
+                 </mat-cell>
+              </ng-container>
+          
+              <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+              <mat-row *matRowDef="let row; columns: displayedColumns;">
+              </mat-row>
+            </mat-table>
+          
+            <mat-paginator [pageSizeOptions]="[5, 10, 25, 50, 100]"></mat-paginator>
+          </div>
   
 </mat-card-content>

ng6-seed/src/app/settings/masters/component/company/company-list/company-list.component.scss

@@ -55,7 +55,7 @@
   overflow: auto;
   max-height: 500px;
 }*/
-/* Structure */
+/* Structure *
 .example-container {
     display: flex;
     flex-direction: column;
@@ -89,5 +89,25 @@
   
   th { 
     text-align: left;
+  }*/
+  .example-container {
+    display: flex;
+    flex-direction: column;
+    min-width: 300px;
+  }
+  
+  .example-header {  
+    min-height: 64px;
+    padding: 8px 24px 0;
+  }
+  
+  .mat-form-field {
+    font-size: 14px;
+    width: 100%;
+  }
+  
+  .mat-table {
+    overflow: auto;
+    max-height: 500px;
   }
 

ng6-seed/src/app/settings/masters/component/company/company-list/company-list.component.ts

@@ -29,8 +29,15 @@ export class CompanyListComponent implements OnInit {
   //displayedColumns = ['Company_id', 'fk_city_id', 'name', 'createdon', 'fk_createdby', 'updatedon', 'fk_updatedby', 'isactive','actions'];
   displayedColumns = ['company_id', 'name', 'addressline1', 'addressline2','addressline3', 'city', 'state','city_name', 'state_name',  'pincode', 'logo','action'];
 
+  userData = null;
+
+  public dataLength: number;
+  public dataSource = new MatTableDataSource();
+//  displayedColumns = ['SerialNo','BranchName','CityName', 'IsActive','Actions'];
+
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
+
  
   
   constructor(private dialog: MatDialog,
@@ -40,7 +47,7 @@ export class CompanyListComponent implements OnInit {
   //    return this._MastersService.getAllCompany();
   //  }
 
-  dataSource = new UserDataSource(this._MastersService);
+  //dataSource = new UserDataSource(this._MastersService);
   
   ngOnInit() {
     this.getCompany();

ng6-seed/src/app/settings/masters/component/customer-behaviour/customer-behaviour-dialog/customer-behaviour-dialog.component.html

@@ -2,7 +2,7 @@
   <h2 mat-dialog-title>Customer Behaviour &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button>
   </h2>
-</div> -->
+</div> 
 <div class="container"
      fxLayout
      fxLayout.xs="column"
@@ -12,7 +12,17 @@
   <div class="mat-dialog-title" fxFlex>Customer Behaviour</div>
   <div fxFlex="20px" fxFlexOrder="3" style="text-align:right;"><button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button></div>
   <div fxFlex="15px"></div>
+</div>-->
+<div class="ml-xs mr-xs" style="width: 100%;" 
+fxLayout="row"
+fxLayoutAlign="center">
+<h2 mat-dialog-title style="width: 30%;"> Customer Behaviour &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h2>
+<div style="width: 40%;"></div>
+<div style="width: 30%;text-align:right;">
+      <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button>
 </div>
+</div>
+
 
 
 

ng6-seed/src/app/settings/masters/component/customer-behaviour/customer-behaviour-list/customer-behaviour-list.component.html

@@ -6,7 +6,7 @@
   <div *ngIf="loader">
       <mat-progress-bar mode="indeterminate" color="accent" class="mb-1"></mat-progress-bar>
    </div>           
-   <div datatable>
+   <!-- <div datatable>
       <table style="border-collapse: collapse">           
                  <thead>
                     <th style="text-align:  center;">#</th>
@@ -60,6 +60,55 @@
         </div>
         
         <br>-->
+        <div class="example-header">
+          <mat-form-field>
+            <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
+          </mat-form-field>
+        </div>
+        
+        <div class="example-container mat-elevation-z8">
+        
+          <mat-table [dataSource]="dataSource" matSort >
+        
+             <ng-container matColumnDef="SerialNo">
+                 <mat-header-cell *matHeaderCellDef mat-sort-header>Sl </mat-header-cell>
+                 <mat-cell *matCellDef="let row; let i = index;"> {{i+1}} </mat-cell>
+             </ng-container>
+     
+            <ng-container matColumnDef="CityName">
+              <mat-header-cell *matHeaderCellDef mat-sort-header> City Name </mat-header-cell>
+              <mat-cell *matCellDef="let row"> {{row.name}} </mat-cell>
+            </ng-container>
+        
+            <ng-container matColumnDef="StateName">
+              <mat-header-cell *matHeaderCellDef mat-sort-header> State Name </mat-header-cell>
+              <mat-cell *matCellDef="let row"> {{row.cityname}} </mat-cell>
+            </ng-container>
+            
+            <ng-container matColumnDef="IsActive">
+              <mat-header-cell *matHeaderCellDef mat-sort-header> Is Active </mat-header-cell>
+              <mat-cell *matCellDef="let row"><!--{{row.isactive}}-->
+                 <mat-icon *ngIf="row.isactive == 1;else notactive;" class="hover-icon" matTooltip="Active" matTooltipPosition="above">done</mat-icon>
+                 <ng-template #notactive ><mat-icon class="hover-icon" matTooltip="Inactive" matTooltipPosition="above">clear</mat-icon></ng-template> 
+              </mat-cell>
+            </ng-container>
+     
+            <ng-container matColumnDef="Actions">
+              <mat-header-cell *matHeaderCellDef>   Actions </mat-header-cell>
+              <mat-cell *matCellDef="let row"> 
+                 <button mat-icon-button class="hover-icon" matTooltip="Edit" matTooltipPosition="above" (click)="editCity(row)"><mat-icon>edit</mat-icon></button>
+                 <button *ngIf="row.isactive == 1;" mat-icon-button class="hover-icon" matTooltip="Delete" matTooltipPosition="above" (click)="deleteBranch(row.city_id)"><mat-icon>delete_outline</mat-icon></button>
+               </mat-cell>
+            </ng-container>
+        
+            <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+            <mat-row *matRowDef="let row; columns: displayedColumns;">
+            </mat-row>
+          </mat-table>
+        
+          <mat-paginator [pageSizeOptions]="[5, 10, 25, 50, 100]"></mat-paginator>
+        </div>
+
         
 
 </mat-card-content>

ng6-seed/src/app/settings/masters/component/customer-behaviour/customer-behaviour-list/customer-behaviour-list.component.scss

@@ -55,7 +55,7 @@
   overflow: auto;
   max-height: 500px;
 }*/
-/* Structure */
+/* Structure *
 .example-container {
     display: flex;
     flex-direction: column;
@@ -90,4 +90,24 @@
   th { 
     text-align: left;
   }
+*/
+.example-container {
+  display: flex;
+  flex-direction: column;
+  min-width: 300px;
+}
 
+.example-header {  
+  min-height: 64px;
+  padding: 8px 24px 0;
+}
+
+.mat-form-field {
+  font-size: 14px;
+  width: 100%;
+}
+
+.mat-table {
+  overflow: auto;
+  max-height: 500px;
+}

ng6-seed/src/app/settings/masters/component/customer-behaviour/customer-behaviour-list/customer-behaviour-list.component.ts

@@ -28,9 +28,15 @@ export class CustomerBehaviourListComponent implements OnInit {
 
   displayedColumns = ['customer_behaviour_id', 'description', 'isactive','actions'];
 
+  userData = null;
+
+  public dataLength: number;
+  public dataSource = new MatTableDataSource();
+//  displayedColumns = ['SerialNo','BranchName','CityName', 'IsActive','Actions'];
+
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
- 
+
   
   constructor(private dialog: MatDialog,
     private _MastersService: MastersService) { }
@@ -39,7 +45,7 @@ export class CustomerBehaviourListComponent implements OnInit {
   //    return this._MastersService.getAllCustomerBehaviour();
   //  }
 
-  dataSource = new UserDataSource(this._MastersService);
+  //dataSource = new UserDataSource(this._MastersService);
   
   ngOnInit() {
     this.getCustomerBehaviour();

ng6-seed/src/app/settings/masters/component/customer-segment/customer-segment-dialog/customer-segment-dialog.component.html

@@ -2,7 +2,7 @@
   <h2 mat-dialog-title>Customer Segment &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button>
   </h2>
-</div> -->
+</div> 
 <div class="container"
      fxLayout
      fxLayout.xs="column"
@@ -12,7 +12,17 @@
   <div class="mat-dialog-title" fxFlex>Customer Segment</div>
   <div fxFlex="20px" fxFlexOrder="3" style="text-align:right;"><button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button></div>
   <div fxFlex="15px"></div>
+</div> -->
+<div class="ml-xs mr-xs" style="width: 100%;" 
+fxLayout="row"
+fxLayoutAlign="center">
+<h2 mat-dialog-title style="width: 30%;"> Customer Segment &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h2>
+<div style="width: 40%;"></div>
+<div style="width: 30%;text-align:right;">
+      <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button>
 </div>
+</div>
+
 
 
 

ng6-seed/src/app/settings/masters/component/customer-segment/customer-segment-list/customer-segment-list.component.html

@@ -6,11 +6,11 @@
     <div *ngIf="loader">
         <mat-progress-bar mode="indeterminate" color="accent" class="mb-1"></mat-progress-bar>
      </div>                
-     <div datatable>
+     <!--<div datatable>
         <table style="border-collapse: collapse">           
                    <thead>
                       <th style="text-align:  center;">#</th>
-                      <!-- <th style="text-align:  center;">CustomerSegment ID</th> -->
+                      <!-- <th style="text-align:  center;">CustomerSegment ID</th> ->
                       <th style="text-align:  center;">CustomerSegment Name</th>
                       <th style="text-align:  center;">Abbrevation</th>
                       <th style="text-align:  center;">IsActive</th>
@@ -65,6 +65,56 @@
           </div>
           
           <br>-->
+
+          <div class="example-header">
+            <mat-form-field>
+              <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
+            </mat-form-field>
+          </div>
+          
+          <div class="example-container mat-elevation-z8">
+          
+            <mat-table [dataSource]="dataSource" matSort >
+          
+               <ng-container matColumnDef="SerialNo">
+                   <mat-header-cell *matHeaderCellDef mat-sort-header>Sl </mat-header-cell>
+                   <mat-cell *matCellDef="let row; let i = index;"> {{i+1}} </mat-cell>
+               </ng-container>
+       
+              <ng-container matColumnDef="CityName">
+                <mat-header-cell *matHeaderCellDef mat-sort-header> City Name </mat-header-cell>
+                <mat-cell *matCellDef="let row"> {{row.name}} </mat-cell>
+              </ng-container>
+          
+              <ng-container matColumnDef="StateName">
+                <mat-header-cell *matHeaderCellDef mat-sort-header> State Name </mat-header-cell>
+                <mat-cell *matCellDef="let row"> {{row.cityname}} </mat-cell>
+              </ng-container>
+              
+              <ng-container matColumnDef="IsActive">
+                <mat-header-cell *matHeaderCellDef mat-sort-header> Is Active </mat-header-cell>
+                <mat-cell *matCellDef="let row"><!--{{row.isactive}}-->
+                   <mat-icon *ngIf="row.isactive == 1;else notactive;" class="hover-icon" matTooltip="Active" matTooltipPosition="above">done</mat-icon>
+                   <ng-template #notactive ><mat-icon class="hover-icon" matTooltip="Inactive" matTooltipPosition="above">clear</mat-icon></ng-template> 
+                </mat-cell>
+              </ng-container>
+       
+              <ng-container matColumnDef="Actions">
+                <mat-header-cell *matHeaderCellDef>   Actions </mat-header-cell>
+                <mat-cell *matCellDef="let row"> 
+                   <button mat-icon-button class="hover-icon" matTooltip="Edit" matTooltipPosition="above" (click)="editCity(row)"><mat-icon>edit</mat-icon></button>
+                   <button *ngIf="row.isactive == 1;" mat-icon-button class="hover-icon" matTooltip="Delete" matTooltipPosition="above" (click)="deleteBranch(row.city_id)"><mat-icon>delete_outline</mat-icon></button>
+                 </mat-cell>
+              </ng-container>
+          
+              <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+              <mat-row *matRowDef="let row; columns: displayedColumns;">
+              </mat-row>
+            </mat-table>
+          
+            <mat-paginator [pageSizeOptions]="[5, 10, 25, 50, 100]"></mat-paginator>
+          </div>
+
           
   </mat-card-content>
   

ng6-seed/src/app/settings/masters/component/customer-segment/customer-segment-list/customer-segment-list.component.scss

@@ -55,7 +55,7 @@
   overflow: auto;
   max-height: 500px;
 }*/
-/* Structure */
+/* Structure *
 .example-container {
     display: flex;
     flex-direction: column;
@@ -91,3 +91,24 @@
     text-align: left;
   }
 
+*/
+.example-container {
+  display: flex;
+  flex-direction: column;
+  min-width: 300px;
+}
+
+.example-header {  
+  min-height: 64px;
+  padding: 8px 24px 0;
+}
+
+.mat-form-field {
+  font-size: 14px;
+  width: 100%;
+}
+
+.mat-table {
+  overflow: auto;
+  max-height: 500px;
+}

ng6-seed/src/app/settings/masters/component/customer-segment/customer-segment-list/customer-segment-list.component.ts

@@ -27,9 +27,15 @@ export class CustomerSegmentListComponent implements OnInit {
 
   displayedColumns = ['customer_segment_id', 'abbr', 'name',  'isactive','actions'];
 
+  userData = null;
+
+  public dataLength: number;
+  public dataSource = new MatTableDataSource();
+//  displayedColumns = ['SerialNo','BranchName','CityName', 'IsActive','Actions'];
+
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
- 
+
   
   constructor(private dialog: MatDialog,
     private _MastersService: MastersService) { }
@@ -38,7 +44,7 @@ export class CustomerSegmentListComponent implements OnInit {
   //    return this._MastersService.getAllCustomerSegment();
   //  }
 
-  dataSource = new UserDataSource(this._MastersService);
+  //dataSource = new UserDataSource(this._MastersService);
   
   ngOnInit() {
     this.getCustomerSegment();

ng6-seed/src/app/settings/masters/component/designation/designation-dialog/designation-dialog.component.html

@@ -2,7 +2,7 @@
   <h2 mat-dialog-title>Designation &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button>
   </h2>
-</div> -->
+</div>
 <div class="container"
      fxLayout
      fxLayout.xs="column"
@@ -12,16 +12,23 @@
   <div class="mat-dialog-title" fxFlex="15px">Designation</div>
   <div fxFlex="20px" fxFlexOrder="3" style="text-align:right;"><button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button></div>
   <div fxFlex></div>
+</div>-->
+<div class="ml-xs mr-xs" style="width: 100%;" 
+fxLayout="row"
+fxLayoutAlign="center">
+<h2 mat-dialog-title style="width: 30%;"> Designation &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h2>
+<div style="width: 40%;"></div>
+<div style="width: 30%;text-align:right;">
+      <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button>
+</div>
 </div>
-
-
 
 <form [formGroup]="_designationForm" (submit)="onSubmit()">
 
     <div class="form-group">
           <mat-dialog-content>
 
-            <div class="mb-1"> 
+            <div class="ml-xs mr-xs"> 
                   <mat-form-field style="width: 100%">
                         <input matInput type="text" placeholder="Name" required [formControl]="_designationForm.controls['name']">
                         <mat-error *ngIf="!_designationForm.controls['name'].valid && _designationForm.controls['name'].touched" class="mat-text-warn">You must include a Name.</mat-error>
@@ -31,7 +38,7 @@
 
             <!-- //designation_id, name, short_name, createdon, fk_createdby, updatedon, fk_updatedby, isactive -->
             
-            <div class="mb-1"> 
+            <div class="ml-xs mr-xs"> 
                       <mat-form-field style="width: 100%">
                             <input matInput type="text" placeholder="Short Name" required [formControl]="_designationForm.controls['short_name']">
                             <mat-error *ngIf="!_designationForm.controls['short_name'].valid && _designationForm.controls['short_name'].touched" class="mat-text-warn">You must include a Short Name.</mat-error>

ng6-seed/src/app/settings/masters/component/designation/designation-list/designation-list.component.html

@@ -6,7 +6,7 @@
   <div *ngIf="loader">
       <mat-progress-bar mode="indeterminate" color="accent" class="mb-1"></mat-progress-bar>
    </div>                   
-   <div datatable>
+   <!-- <div datatable>
       <table style="border-collapse: collapse">           
                  <thead>
                     <th style="text-align:  center;">#</th>
@@ -65,6 +65,56 @@
         </div>
         
         <br>-->
+
+        <div class="example-header">
+          <mat-form-field>
+            <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
+          </mat-form-field>
+        </div>
+        
+        <div class="example-container mat-elevation-z8">
+        
+          <mat-table [dataSource]="dataSource" matSort >
+        
+             <ng-container matColumnDef="SerialNo">
+                 <mat-header-cell *matHeaderCellDef mat-sort-header>Sl </mat-header-cell>
+                 <mat-cell *matCellDef="let row; let i = index;"> {{i+1}} </mat-cell>
+             </ng-container>
+     
+            <ng-container matColumnDef="CityName">
+              <mat-header-cell *matHeaderCellDef mat-sort-header> City Name </mat-header-cell>
+              <mat-cell *matCellDef="let row"> {{row.name}} </mat-cell>
+            </ng-container>
+        
+            <ng-container matColumnDef="StateName">
+              <mat-header-cell *matHeaderCellDef mat-sort-header> State Name </mat-header-cell>
+              <mat-cell *matCellDef="let row"> {{row.cityname}} </mat-cell>
+            </ng-container>
+            
+            <ng-container matColumnDef="IsActive">
+              <mat-header-cell *matHeaderCellDef mat-sort-header> Is Active </mat-header-cell>
+              <mat-cell *matCellDef="let row"><!--{{row.isactive}}-->
+                 <mat-icon *ngIf="row.isactive == 1;else notactive;" class="hover-icon" matTooltip="Active" matTooltipPosition="above">done</mat-icon>
+                 <ng-template #notactive ><mat-icon class="hover-icon" matTooltip="Inactive" matTooltipPosition="above">clear</mat-icon></ng-template> 
+              </mat-cell>
+            </ng-container>
+     
+            <ng-container matColumnDef="Actions">
+              <mat-header-cell *matHeaderCellDef>   Actions </mat-header-cell>
+              <mat-cell *matCellDef="let row"> 
+                 <button mat-icon-button class="hover-icon" matTooltip="Edit" matTooltipPosition="above" (click)="editCity(row)"><mat-icon>edit</mat-icon></button>
+                 <button *ngIf="row.isactive == 1;" mat-icon-button class="hover-icon" matTooltip="Delete" matTooltipPosition="above" (click)="deleteBranch(row.city_id)"><mat-icon>delete_outline</mat-icon></button>
+               </mat-cell>
+            </ng-container>
+        
+            <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+            <mat-row *matRowDef="let row; columns: displayedColumns;">
+            </mat-row>
+          </mat-table>
+        
+          <mat-paginator [pageSizeOptions]="[5, 10, 25, 50, 100]"></mat-paginator>
+        </div>
+
         
 
 </mat-card-content>

ng6-seed/src/app/settings/masters/component/designation/designation-list/designation-list.component.scss

@@ -55,7 +55,7 @@
   overflow: auto;
   max-height: 500px;
 }*/
-/* Structure */
+/* Structure *
 .example-container {
     display: flex;
     flex-direction: column;
@@ -89,5 +89,27 @@
   
   th { 
     text-align: left;
-  }
+  }*/
+
+
+.example-container {
+  display: flex;
+  flex-direction: column;
+  min-width: 300px;
+}
+
+.example-header {  
+  min-height: 64px;
+  padding: 8px 24px 0;
+}
+
+.mat-form-field {
+  font-size: 14px;
+  width: 100%;
+}
+
+.mat-table {
+  overflow: auto;
+  max-height: 500px;
+}
 

ng6-seed/src/app/settings/masters/component/designation/designation-list/designation-list.component.ts

@@ -29,9 +29,15 @@ export class DesignationListComponent implements OnInit {
   displayedColumns = ['designation_id', 'name', 'short_name','isactive','actions'];
   
 
+  userData = null;
+
+  public dataLength: number;
+  public dataSource = new MatTableDataSource();
+//  displayedColumns = ['SerialNo','BranchName','CityName', 'IsActive','Actions'];
+
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
- 
+
   
   constructor(private dialog: MatDialog,
     private _MastersService: MastersService) { }
@@ -40,7 +46,7 @@ export class DesignationListComponent implements OnInit {
   //    return this._MastersService.getAllDesignation();
   //  }
 
-  dataSource = new UserDataSource(this._MastersService);
+  //dataSource = new UserDataSource(this._MastersService);
   
   ngOnInit() {
     this.getDesignation();

ng6-seed/src/app/settings/masters/component/frequency/frequency-dialog/frequency-dialog.component.html

@@ -2,7 +2,7 @@
     <h2 mat-dialog-title>Frequency &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button>
     </h2>
-</div> -->
+</div>
 <div class="container"
      fxLayout
      fxLayout.xs="column"
@@ -12,6 +12,15 @@
   <div class="mat-dialog-title" fxFlex>Frequency</div>
   <div fxFlex="20px" fxFlexOrder="3" style="text-align:right;"><button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button></div>
   <div fxFlex="15px"></div>
+</div>-->
+<div class="ml-xs mr-xs" style="width: 100%;" 
+fxLayout="row"
+fxLayoutAlign="center">
+<h2 mat-dialog-title style="width: 30%;">Frequency &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h2>
+<div style="width: 40%;"></div>
+<div style="width: 30%;text-align:right;">
+      <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button>
+</div>
 </div>
 
   
@@ -21,7 +30,7 @@
       <div class="form-group">
             <mat-dialog-content>
 
-              <div class="mb-1"> 
+                  <div class="ml-xs mr-xs"> 
                     <mat-form-field style="width: 100%">
                           <input matInput type="text" placeholder="Frequency Name" required [formControl]="_frequencyForm.controls['name']">
                           <mat-error *ngIf="!_frequencyForm.controls['name'].valid && _frequencyForm.controls['name'].touched" class="mat-text-warn">You must include a Name.</mat-error>

ng6-seed/src/app/settings/masters/component/frequency/frequency-list/frequency-list.component.html

@@ -6,7 +6,7 @@
     <div *ngIf="loader">
         <mat-progress-bar mode="indeterminate" color="accent" class="mb-1"></mat-progress-bar>
      </div>         
-     <div datatable>
+     <!-- <div datatable>
         <table style="border-collapse: collapse">   
                    <thead>
                       <th style="text-align:  center;">#</th>
@@ -74,6 +74,56 @@
           </div>
           
           <br>-->
+
+          <div class="example-header">
+            <mat-form-field>
+              <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
+            </mat-form-field>
+          </div>
+          
+          <div class="example-container mat-elevation-z8">
+          
+            <mat-table [dataSource]="dataSource" matSort >
+          
+               <ng-container matColumnDef="SerialNo">
+                   <mat-header-cell *matHeaderCellDef mat-sort-header>Sl </mat-header-cell>
+                   <mat-cell *matCellDef="let row; let i = index;"> {{i+1}} </mat-cell>
+               </ng-container>
+       
+              <ng-container matColumnDef="CityName">
+                <mat-header-cell *matHeaderCellDef mat-sort-header> City Name </mat-header-cell>
+                <mat-cell *matCellDef="let row"> {{row.name}} </mat-cell>
+              </ng-container>
+          
+              <ng-container matColumnDef="StateName">
+                <mat-header-cell *matHeaderCellDef mat-sort-header> State Name </mat-header-cell>
+                <mat-cell *matCellDef="let row"> {{row.cityname}} </mat-cell>
+              </ng-container>
+              
+              <ng-container matColumnDef="IsActive">
+                <mat-header-cell *matHeaderCellDef mat-sort-header> Is Active </mat-header-cell>
+                <mat-cell *matCellDef="let row"><!--{{row.isactive}}-->
+                   <mat-icon *ngIf="row.isactive == 1;else notactive;" class="hover-icon" matTooltip="Active" matTooltipPosition="above">done</mat-icon>
+                   <ng-template #notactive ><mat-icon class="hover-icon" matTooltip="Inactive" matTooltipPosition="above">clear</mat-icon></ng-template> 
+                </mat-cell>
+              </ng-container>
+       
+              <ng-container matColumnDef="Actions">
+                <mat-header-cell *matHeaderCellDef>   Actions </mat-header-cell>
+                <mat-cell *matCellDef="let row"> 
+                   <button mat-icon-button class="hover-icon" matTooltip="Edit" matTooltipPosition="above" (click)="editCity(row)"><mat-icon>edit</mat-icon></button>
+                   <button *ngIf="row.isactive == 1;" mat-icon-button class="hover-icon" matTooltip="Delete" matTooltipPosition="above" (click)="deleteBranch(row.city_id)"><mat-icon>delete_outline</mat-icon></button>
+                 </mat-cell>
+              </ng-container>
+          
+              <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+              <mat-row *matRowDef="let row; columns: displayedColumns;">
+              </mat-row>
+            </mat-table>
+          
+            <mat-paginator [pageSizeOptions]="[5, 10, 25, 50, 100]"></mat-paginator>
+          </div>
+
           
   
 </mat-card-content>

ng6-seed/src/app/settings/masters/component/frequency/frequency-list/frequency-list.component.scss

@@ -84,7 +84,7 @@
   overflow: auto;
   max-height: 500px;
 }*/
-/* Structure */
+/* Structure *
 .example-container {
   display: flex;
   flex-direction: column;
@@ -118,5 +118,28 @@ table {
 
 th { 
   text-align: left;
+}*/
+
+
+
+.example-container {
+  display: flex;
+  flex-direction: column;
+  min-width: 300px;
+}
+
+.example-header {  
+  min-height: 64px;
+  padding: 8px 24px 0;
+}
+
+.mat-form-field {
+  font-size: 14px;
+  width: 100%;
+}
+
+.mat-table {
+  overflow: auto;
+  max-height: 500px;
 }
 

ng6-seed/src/app/settings/masters/component/frequency/frequency-list/frequency-list.component.ts

@@ -28,6 +28,12 @@ export class FrequencyListComponent implements OnInit {
 
   displayedColumns = ['frequency_id','name','createdon','fk_createdby','updatedon','isactive','fk_updatedby','actions'];
   
+  userData = null;
+
+  public dataLength: number;
+  public dataSource = new MatTableDataSource();
+//  displayedColumns = ['SerialNo','BranchName','CityName', 'IsActive','Actions'];
+
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
 
@@ -39,7 +45,7 @@ export class FrequencyListComponent implements OnInit {
   //    return this._MastersService. getAllFrequency();
   //  }
 
-   dataSource = new UserDataSource(this._MastersService);
+  // dataSource = new UserDataSource(this._MastersService);
   
   ngOnInit() {
     this.getFrequency();

ng6-seed/src/app/settings/masters/component/industry_classification/industry_classification-dialog/industry_classification-dialog.component.html

@@ -2,7 +2,7 @@
         <h2 mat-dialog-title>Industry Classification &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button>
         </h2>
-</div> -->
+</div> 
 <div class="container"
      fxLayout
      fxLayout.xs="column"
@@ -12,7 +12,17 @@
   <div class="mat-dialog-title" fxFlex fxFlexOrder="1">Industry Classification</div>
   <div fxFlex="20px" fxFlexOrder="3" style="text-align:right;"><button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button></div>
   <div fxFlex="15px" fxFlexOrder="2"></div>
+</div>-->
+<div class="ml-xs mr-xs" style="width: 100%;" 
+fxLayout="row"
+fxLayoutAlign="center">
+<h2 mat-dialog-title style="width: 30%;"> Industry Classification &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h2>
+<div style="width: 40%;"></div>
+<div style="width: 30%;text-align:right;">
+      <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button>
 </div>
+</div>
+
 
       
       
@@ -21,7 +31,7 @@
           <div class="form-group">
                 <mat-dialog-content>
     
-                  <div class="mb-1"> 
+                  <div class="ml-xs mr-xs">
                         <mat-form-field style="width: 100%">
                               <input matInput type="text" placeholder="Classification Name" required [formControl]="_IndustryClassificationForm.controls['name']">
                               <mat-error *ngIf="!_IndustryClassificationForm.controls['name'].valid && _IndustryClassificationForm.controls['name'].touched" class="mat-text-warn">You must include a Classified Name.</mat-error>

ng6-seed/src/app/settings/masters/component/industry_classification/industry_classification-list/industry_classification-list.component.html

@@ -6,7 +6,7 @@
     <div *ngIf="loader">
         <mat-progress-bar mode="indeterminate" color="accent" class="mb-1"></mat-progress-bar>
      </div>            
-     <div datatable>
+     <!--<div datatable>
         <table style="border-collapse: collapse">   
                    <thead>
                       <th style="text-align:  center;">#</th>
@@ -75,5 +75,55 @@
               <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
             </mat-table>
           </div>-->
+
+          <div class="example-header">
+            <mat-form-field>
+              <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
+            </mat-form-field>
+          </div>
+          
+          <div class="example-container mat-elevation-z8">
+          
+            <mat-table [dataSource]="dataSource" matSort >
+          
+               <ng-container matColumnDef="SerialNo">
+                   <mat-header-cell *matHeaderCellDef mat-sort-header>Sl </mat-header-cell>
+                   <mat-cell *matCellDef="let row; let i = index;"> {{i+1}} </mat-cell>
+               </ng-container>
+       
+              <ng-container matColumnDef="CityName">
+                <mat-header-cell *matHeaderCellDef mat-sort-header> City Name </mat-header-cell>
+                <mat-cell *matCellDef="let row"> {{row.name}} </mat-cell>
+              </ng-container>
+          
+              <ng-container matColumnDef="StateName">
+                <mat-header-cell *matHeaderCellDef mat-sort-header> State Name </mat-header-cell>
+                <mat-cell *matCellDef="let row"> {{row.cityname}} </mat-cell>
+              </ng-container>
+              
+              <ng-container matColumnDef="IsActive">
+                <mat-header-cell *matHeaderCellDef mat-sort-header> Is Active </mat-header-cell>
+                <mat-cell *matCellDef="let row"><!--{{row.isactive}}-->
+                   <mat-icon *ngIf="row.isactive == 1;else notactive;" class="hover-icon" matTooltip="Active" matTooltipPosition="above">done</mat-icon>
+                   <ng-template #notactive ><mat-icon class="hover-icon" matTooltip="Inactive" matTooltipPosition="above">clear</mat-icon></ng-template> 
+                </mat-cell>
+              </ng-container>
+       
+              <ng-container matColumnDef="Actions">
+                <mat-header-cell *matHeaderCellDef>   Actions </mat-header-cell>
+                <mat-cell *matCellDef="let row"> 
+                   <button mat-icon-button class="hover-icon" matTooltip="Edit" matTooltipPosition="above" (click)="editCity(row)"><mat-icon>edit</mat-icon></button>
+                   <button *ngIf="row.isactive == 1;" mat-icon-button class="hover-icon" matTooltip="Delete" matTooltipPosition="above" (click)="deleteBranch(row.city_id)"><mat-icon>delete_outline</mat-icon></button>
+                 </mat-cell>
+              </ng-container>
+          
+              <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+              <mat-row *matRowDef="let row; columns: displayedColumns;">
+              </mat-row>
+            </mat-table>
+          
+            <mat-paginator [pageSizeOptions]="[5, 10, 25, 50, 100]"></mat-paginator>
+          </div>
+
                     
 </mat-card-content>

ng6-seed/src/app/settings/masters/component/industry_classification/industry_classification-list/industry_classification-list.component.scss

@@ -80,7 +80,7 @@
   overflow: auto;
   max-height: 500px;
 }*/
-/* Structure */
+/* Structure *
 .example-container {
   display: flex;
   flex-direction: column;
@@ -114,5 +114,27 @@ table {
 
 th { 
   text-align: left;
+}*/
+
+
+.example-container {
+  display: flex;
+  flex-direction: column;
+  min-width: 300px;
+}
+
+.example-header {  
+  min-height: 64px;
+  padding: 8px 24px 0;
+}
+
+.mat-form-field {
+  font-size: 14px;
+  width: 100%;
+}
+
+.mat-table {
+  overflow: auto;
+  max-height: 500px;
 }
 

ng6-seed/src/app/settings/masters/component/industry_classification/industry_classification-list/industry_classification-list.component.ts

@@ -36,9 +36,16 @@ export class IndustryClassificationListComponent implements OnInit {
   displayedColumns = ['industry_classification_id','name','createdon','fk_createdby','updatedon','isactive','fk_updatedby','actions'];
   //industry_classification_id, name, createdon, fk_createdby, updatedon, fk_updatedby, isactive
   
+  userData = null;
+
+  public dataLength: number;
+  public dataSource = new MatTableDataSource();
+//  displayedColumns = ['SerialNo','BranchName','CityName', 'IsActive','Actions'];
+
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
 
+
   
   constructor(private dialog: MatDialog,
     private _IMService: MastersService) { }
@@ -48,7 +55,7 @@ export class IndustryClassificationListComponent implements OnInit {
   //  }
 
   //displayedColumns: string[] = ['ID','ClassifiedName'];
-  dataSource = new UserDataSource(this._IMService);
+  //dataSource = new UserDataSource(this._IMService);
 
   
   ngOnInit() {

ng6-seed/src/app/settings/masters/component/lender-hierarchy/lender-hierarchy-dialog/lender-hierarchy-dialog.component.html

@@ -2,7 +2,7 @@
     <h2 mat-dialog-title>Lender Hierarchy &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button>
     </h2>
-</div> -->
+</div>
 <div class="container"
 fxLayout
 fxLayout.xs="column"
@@ -12,7 +12,17 @@ fxLayoutGap.xs="0">
 <div class="mat-dialog-title" fxFlex fxFlexOrder="1">Lender Hierarchy </div>
 <div fxFlex="20px" fxFlexOrder="3" style="text-align:right;"><button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button></div>
 <div fxFlex="15px" fxFlexOrder="2"></div>
+</div>-->
+<div class="ml-xs mr-xs" style="width: 100%;" 
+fxLayout="row"
+fxLayoutAlign="center">
+<h2 mat-dialog-title style="width: 30%;"> Lender Hierarchy &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h2>
+<div style="width: 40%;"></div>
+<div style="width: 30%;text-align:right;">
+      <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button>
 </div>
+</div>
+
 
   
   <form [formGroup]="_lenderHierarchyForm" (submit)="onSubmit()">
@@ -20,7 +30,7 @@ fxLayoutGap.xs="0">
       <div class="form-group">
             <mat-dialog-content>
 
-              <div class="mb-1"> 
+                  <div class="ml-xs mr-xs">
                     <mat-form-field style="width: 100%">
                           <input matInput type="text" placeholder="Lender Hierarchy Name" required [formControl]="_lenderHierarchyForm.controls['lender_hierarchy']">
                           <mat-error *ngIf="!_lenderHierarchyForm.controls['lender_hierarchy'].valid && _lenderHierarchyForm.controls['lender_hierarchy'].touched" class="mat-text-warn">You must include a Lender Hierarchy Name.</mat-error>

ng6-seed/src/app/settings/masters/component/lender-hierarchy/lender-hierarchy-list/lender-hierarchy-list.component.html

@@ -6,7 +6,7 @@
     <div *ngIf="loader">
         <mat-progress-bar mode="indeterminate" color="accent" class="mb-1"></mat-progress-bar>
      </div>     
-     <div datatable>
+     <!-- <div datatable>
         <table style="border-collapse: collapse">  
                    <thead>
                       <th style="text-align:  center;">#</th>
@@ -59,6 +59,56 @@
           </div>
           
           <br>-->
+
+          <div class="example-header">
+            <mat-form-field>
+              <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
+            </mat-form-field>
+          </div>
+          
+          <div class="example-container mat-elevation-z8">
+          
+            <mat-table [dataSource]="dataSource" matSort >
+          
+               <ng-container matColumnDef="SerialNo">
+                   <mat-header-cell *matHeaderCellDef mat-sort-header>Sl </mat-header-cell>
+                   <mat-cell *matCellDef="let row; let i = index;"> {{i+1}} </mat-cell>
+               </ng-container>
+       
+              <ng-container matColumnDef="CityName">
+                <mat-header-cell *matHeaderCellDef mat-sort-header> City Name </mat-header-cell>
+                <mat-cell *matCellDef="let row"> {{row.name}} </mat-cell>
+              </ng-container>
+          
+              <ng-container matColumnDef="StateName">
+                <mat-header-cell *matHeaderCellDef mat-sort-header> State Name </mat-header-cell>
+                <mat-cell *matCellDef="let row"> {{row.cityname}} </mat-cell>
+              </ng-container>
+              
+              <ng-container matColumnDef="IsActive">
+                <mat-header-cell *matHeaderCellDef mat-sort-header> Is Active </mat-header-cell>
+                <mat-cell *matCellDef="let row"><!--{{row.isactive}}-->
+                   <mat-icon *ngIf="row.isactive == 1;else notactive;" class="hover-icon" matTooltip="Active" matTooltipPosition="above">done</mat-icon>
+                   <ng-template #notactive ><mat-icon class="hover-icon" matTooltip="Inactive" matTooltipPosition="above">clear</mat-icon></ng-template> 
+                </mat-cell>
+              </ng-container>
+       
+              <ng-container matColumnDef="Actions">
+                <mat-header-cell *matHeaderCellDef>   Actions </mat-header-cell>
+                <mat-cell *matCellDef="let row"> 
+                   <button mat-icon-button class="hover-icon" matTooltip="Edit" matTooltipPosition="above" (click)="editCity(row)"><mat-icon>edit</mat-icon></button>
+                   <button *ngIf="row.isactive == 1;" mat-icon-button class="hover-icon" matTooltip="Delete" matTooltipPosition="above" (click)="deleteBranch(row.city_id)"><mat-icon>delete_outline</mat-icon></button>
+                 </mat-cell>
+              </ng-container>
+          
+              <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+              <mat-row *matRowDef="let row; columns: displayedColumns;">
+              </mat-row>
+            </mat-table>
+          
+            <mat-paginator [pageSizeOptions]="[5, 10, 25, 50, 100]"></mat-paginator>
+          </div>
+
           
   
 </mat-card-content>

ng6-seed/src/app/settings/masters/component/lender-hierarchy/lender-hierarchy-list/lender-hierarchy-list.component.scss

@@ -55,7 +55,7 @@
   overflow: auto;
   max-height: 500px;
 }*/
-/* Structure */
+/* Structure *
 .example-container {
     display: flex;
     flex-direction: column;
@@ -89,5 +89,27 @@
   
   th { 
     text-align: left;
-  }
+  }*/
+
+
+.example-container {
+  display: flex;
+  flex-direction: column;
+  min-width: 300px;
+}
+
+.example-header {  
+  min-height: 64px;
+  padding: 8px 24px 0;
+}
+
+.mat-form-field {
+  font-size: 14px;
+  width: 100%;
+}
+
+.mat-table {
+  overflow: auto;
+  max-height: 500px;
+}
 

ng6-seed/src/app/settings/masters/component/lender-hierarchy/lender-hierarchy-list/lender-hierarchy-list.component.ts

@@ -28,6 +28,12 @@ export class LenderHierarchyListComponent implements OnInit {
 
   displayedColumns = ['lender_hierarchy_id', 'lender_hierarchy','isactive','actions'];
   
+  userData = null;
+
+  public dataLength: number;
+  public dataSource = new MatTableDataSource();
+//  displayedColumns = ['SerialNo','BranchName','CityName', 'IsActive','Actions'];
+
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
 
@@ -39,7 +45,7 @@ export class LenderHierarchyListComponent implements OnInit {
   //    return this._MastersService. getAllLenderHierarchy();
   //  }
 
-   dataSource = new UserDataSource(this._MastersService);
+  // dataSource = new UserDataSource(this._MastersService);
   
   ngOnInit() {
       this.getLenderHierarchy();

ng6-seed/src/app/settings/masters/component/members-occupation/members-occupation-dialog/members-occupation-dialog.component.html

@@ -2,7 +2,7 @@
     <h2 mat-dialog-title>Occupation of Non earning members &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button>
     </h2>
-</div> -->
+</div>
 <div class="container"
      fxLayout
      fxLayout.xs="column"
@@ -12,7 +12,17 @@
   <div class="mat-dialog-title" fxFlex fxFlexOrder="1">Occupation of Non earning members </div>
   <div fxFlex="20px" fxFlexOrder="3" style="text-align:right;"><button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button></div>
   <div fxFlex="2px"></div>
+</div>-->
+<div class="ml-xs mr-xs" style="width: 100%;" 
+fxLayout="row"
+fxLayoutAlign="center">
+<h2 mat-dialog-title style="width: 30%;">Occupation of Non earning members &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h2>
+<div style="width: 40%;"></div>
+<div style="width: 30%;text-align:right;">
+      <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button>
 </div>
+</div>
+
 
   
   
@@ -21,7 +31,7 @@
       <div class="form-group">
             <mat-dialog-content>
 
-              <div class="mb-1"> 
+                  <div class="ml-xs mr-xs">
                     <mat-form-field style="width: 100%">
                           <input matInput type="text" placeholder="Name" required [formControl]="_occupationForm.controls['name']">
                           <mat-error *ngIf="!_occupationForm.controls['name'].valid && _occupationForm.controls['name'].touched" class="mat-text-warn">You must include a Name.</mat-error>

ng6-seed/src/app/settings/masters/component/members-occupation/members-occupation-list/members-occupation-list.component.html

@@ -6,11 +6,11 @@
     <div *ngIf="loader">
         <mat-progress-bar mode="indeterminate" color="accent" class="mb-1"></mat-progress-bar>
      </div>        
-     <div datatable>
+     <!-- <div datatable>
         <table style="border-collapse: collapse">  
                    <thead>
                       <th style="text-align:  center;">#</th>
-                      <!-- <th style="text-align:  center;">Occupation ID</th> -->
+                      <!-- <th style="text-align:  center;">Occupation ID</th> ->
                       <th style="text-align:  center;">Occupation Name</th>
                       <th style="text-align:  center;">IsActive</th>
                       <th style="text-align:  center;">Action</th>
@@ -79,6 +79,56 @@
           </div>
           
           <br>-->
+
+          <div class="example-header">
+            <mat-form-field>
+              <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
+            </mat-form-field>
+          </div>
+          
+          <div class="example-container mat-elevation-z8">
+          
+            <mat-table [dataSource]="dataSource" matSort >
+          
+               <ng-container matColumnDef="SerialNo">
+                   <mat-header-cell *matHeaderCellDef mat-sort-header>Sl </mat-header-cell>
+                   <mat-cell *matCellDef="let row; let i = index;"> {{i+1}} </mat-cell>
+               </ng-container>
+       
+              <ng-container matColumnDef="CityName">
+                <mat-header-cell *matHeaderCellDef mat-sort-header> City Name </mat-header-cell>
+                <mat-cell *matCellDef="let row"> {{row.name}} </mat-cell>
+              </ng-container>
+          
+              <ng-container matColumnDef="StateName">
+                <mat-header-cell *matHeaderCellDef mat-sort-header> State Name </mat-header-cell>
+                <mat-cell *matCellDef="let row"> {{row.cityname}} </mat-cell>
+              </ng-container>
+              
+              <ng-container matColumnDef="IsActive">
+                <mat-header-cell *matHeaderCellDef mat-sort-header> Is Active </mat-header-cell>
+                <mat-cell *matCellDef="let row"><!--{{row.isactive}}-->
+                   <mat-icon *ngIf="row.isactive == 1;else notactive;" class="hover-icon" matTooltip="Active" matTooltipPosition="above">done</mat-icon>
+                   <ng-template #notactive ><mat-icon class="hover-icon" matTooltip="Inactive" matTooltipPosition="above">clear</mat-icon></ng-template> 
+                </mat-cell>
+              </ng-container>
+       
+              <ng-container matColumnDef="Actions">
+                <mat-header-cell *matHeaderCellDef>   Actions </mat-header-cell>
+                <mat-cell *matCellDef="let row"> 
+                   <button mat-icon-button class="hover-icon" matTooltip="Edit" matTooltipPosition="above" (click)="editCity(row)"><mat-icon>edit</mat-icon></button>
+                   <button *ngIf="row.isactive == 1;" mat-icon-button class="hover-icon" matTooltip="Delete" matTooltipPosition="above" (click)="deleteBranch(row.city_id)"><mat-icon>delete_outline</mat-icon></button>
+                 </mat-cell>
+              </ng-container>
+          
+              <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+              <mat-row *matRowDef="let row; columns: displayedColumns;">
+              </mat-row>
+            </mat-table>
+          
+            <mat-paginator [pageSizeOptions]="[5, 10, 25, 50, 100]"></mat-paginator>
+          </div>
+
           
   
 </mat-card-content>

ng6-seed/src/app/settings/masters/component/members-occupation/members-occupation-list/members-occupation-list.component.scss

@@ -21,7 +21,7 @@
     .header-cell{
     display:flex;
     justify-content:center;
-  }*/
+  }*
 
   .example-container {
     display: flex;
@@ -56,4 +56,26 @@
   
   th { 
     text-align: left;
-  }
+  }
+
+*/
+.example-container {
+  display: flex;
+  flex-direction: column;
+  min-width: 300px;
+}
+
+.example-header {  
+  min-height: 64px;
+  padding: 8px 24px 0;
+}
+
+.mat-form-field {
+  font-size: 14px;
+  width: 100%;
+}
+
+.mat-table {
+  overflow: auto;
+  max-height: 500px;
+}

ng6-seed/src/app/settings/masters/component/members-occupation/members-occupation-list/members-occupation-list.component.ts

@@ -30,6 +30,14 @@ export class MembersOccupationListComponent implements OnInit {
   displayedColumns = ['occupation_non_earning_member_id','name','createdon','fk_createdby','updatedon','isactive','fk_updatedby','actions'];
   //occupation_non_earning_member_id, name, createdon, fk_createdby, updatedon, fk_updatedby, isactive
   
+  // @ViewChild(MatPaginator) paginator: MatPaginator;
+  // @ViewChild(MatSort) sort: MatSort;
+  userData = null;
+
+  public dataLength: number;
+  public dataSource = new MatTableDataSource();
+//  displayedColumns = ['SerialNo','BranchName','CityName', 'IsActive','Actions'];
+
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
 
@@ -45,7 +53,7 @@ export class MembersOccupationListComponent implements OnInit {
     this.getMemberOccupation();
   }
 
-  dataSource = new UserDataSource(this._memberService);
+  //dataSource = new UserDataSource(this._memberService);
 
   addMemberOccupation() {
     this.isPopupOpened = true;

ng6-seed/src/app/settings/masters/component/pd/pd-allocation-type-dialog/pd-allocation-type-dialog.component.html

@@ -2,7 +2,7 @@
             <h2 mat-dialog-title>PD Allocation Type &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                  <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button>
             </h2>
-        </div> -->
+        </div> 
           
         <div class="container"
         fxLayout
@@ -13,14 +13,24 @@
      <div class="mat-dialog-title" fxFlex fxFlexOrder="1">PD Allocation Type</div>
      <div fxFlex="20px" fxFlexOrder="3" style="text-align:right;"><button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button></div>
      <div fxFlex="2px" fxFlexOrder="2"></div>
-   </div>
+   </div>-->
+   <div class="ml-xs mr-xs" style="width: 100%;" 
+fxLayout="row"
+fxLayoutAlign="center">
+<h2 mat-dialog-title style="width: 30%;"> PD Allocation Type &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h2>
+<div style="width: 40%;"></div>
+<div style="width: 30%;text-align:right;">
+      <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button>
+</div>
+</div>
+
    
           <form [formGroup]="_PDAllocationTypeForm" (submit)="onSubmit()">
           
               <div class="form-group">
                     <mat-dialog-content>
         
-                      <div class="mb-1"> 
+                      <div class="ml-xs mr-xs">
                             <mat-form-field style="width: 100%">
                                   <input matInput type="text" placeholder="PD Allocation Type Name" required [formControl]="_PDAllocationTypeForm.controls['pd_allocation_type_name']">
                                   <mat-error *ngIf="!_PDAllocationTypeForm.controls['pd_allocation_type_name'].valid && _PDAllocationTypeForm.controls['pd_allocation_type_name'].touched" class="mat-text-warn">You must include a Name.</mat-error>

ng6-seed/src/app/settings/masters/component/pd/pd-allocation-type-list/pd-allocation-type-list.component.html

@@ -6,7 +6,7 @@
   <div *ngIf="loader">
       <mat-progress-bar mode="indeterminate" color="accent" class="mb-1"></mat-progress-bar>
   </div>           
-  <div datatable>
+  <!--<div datatable>
       <table style="border-collapse: collapse">  
                  <thead>
                     <th style="text-align:  center;">#</th>
@@ -57,7 +57,55 @@
             <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
           </mattable>
         </div>-->
+        <div class="example-header">
+          <mat-form-field>
+            <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
+          </mat-form-field>
+        </div>
         
+        <div class="example-container mat-elevation-z8">
+        
+          <mat-table [dataSource]="dataSource" matSort >
+        
+             <ng-container matColumnDef="SerialNo">
+                 <mat-header-cell *matHeaderCellDef mat-sort-header>Sl </mat-header-cell>
+                 <mat-cell *matCellDef="let row; let i = index;"> {{i+1}} </mat-cell>
+             </ng-container>
+     
+            <ng-container matColumnDef="CityName">
+              <mat-header-cell *matHeaderCellDef mat-sort-header> City Name </mat-header-cell>
+              <mat-cell *matCellDef="let row"> {{row.name}} </mat-cell>
+            </ng-container>
+        
+            <ng-container matColumnDef="StateName">
+              <mat-header-cell *matHeaderCellDef mat-sort-header> State Name </mat-header-cell>
+              <mat-cell *matCellDef="let row"> {{row.cityname}} </mat-cell>
+            </ng-container>
+            
+            <ng-container matColumnDef="IsActive">
+              <mat-header-cell *matHeaderCellDef mat-sort-header> Is Active </mat-header-cell>
+              <mat-cell *matCellDef="let row"><!--{{row.isactive}}-->
+                 <mat-icon *ngIf="row.isactive == 1;else notactive;" class="hover-icon" matTooltip="Active" matTooltipPosition="above">done</mat-icon>
+                 <ng-template #notactive ><mat-icon class="hover-icon" matTooltip="Inactive" matTooltipPosition="above">clear</mat-icon></ng-template> 
+              </mat-cell>
+            </ng-container>
+     
+            <ng-container matColumnDef="Actions">
+              <mat-header-cell *matHeaderCellDef>   Actions </mat-header-cell>
+              <mat-cell *matCellDef="let row"> 
+                 <button mat-icon-button class="hover-icon" matTooltip="Edit" matTooltipPosition="above" (click)="editCity(row)"><mat-icon>edit</mat-icon></button>
+                 <button *ngIf="row.isactive == 1;" mat-icon-button class="hover-icon" matTooltip="Delete" matTooltipPosition="above" (click)="deleteBranch(row.city_id)"><mat-icon>delete_outline</mat-icon></button>
+               </mat-cell>
+            </ng-container>
+        
+            <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+            <mat-row *matRowDef="let row; columns: displayedColumns;">
+            </mat-row>
+          </mat-table>
+        
+          <mat-paginator [pageSizeOptions]="[5, 10, 25, 50, 100]"></mat-paginator>
+        </div>
+
         <br>
         
 

ng6-seed/src/app/settings/masters/component/pd/pd-allocation-type-list/pd-allocation-type-list.component.scss

@@ -55,7 +55,7 @@
   overflow: auto;
   max-height: 500px;
 }*/
-/* Structure */
+/* Structure *
 .example-container {
     display: flex;
     flex-direction: column;
@@ -91,3 +91,25 @@
     text-align: left;
   }
 
+
+*/
+.example-container {
+  display: flex;
+  flex-direction: column;
+  min-width: 300px;
+}
+
+.example-header {  
+  min-height: 64px;
+  padding: 8px 24px 0;
+}
+
+.mat-form-field {
+  font-size: 14px;
+  width: 100%;
+}
+
+.mat-table {
+  overflow: auto;
+  max-height: 500px;
+}

ng6-seed/src/app/settings/masters/component/pd/pd-allocation-type-list/pd-allocation-type-list.component.ts

@@ -28,9 +28,15 @@ export class PdAllocationTypeListComponent implements OnInit {
 
   displayedColumns = ['pd_allocation_type_id','pd_allocation_type_name','isactive','actions'];
 
+  userData = null;
+
+  public dataLength: number;
+  public dataSource = new MatTableDataSource();
+//  displayedColumns = ['SerialNo','BranchName','CityName', 'IsActive','Actions'];
+
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
- 
+
   
   constructor(private dialog: MatDialog,
     private _MastersService: MastersService) { }
@@ -39,7 +45,7 @@ export class PdAllocationTypeListComponent implements OnInit {
   //    return this._MastersService.getAllPDAllocationType();
   //  }
 
-  dataSource = new UserDataSource(this._MastersService);
+  //dataSource = new UserDataSource(this._MastersService);
   
   ngOnInit() {
     this.getPDAllocationType();

ng6-seed/src/app/settings/masters/component/pd/pd-location-approach-dialog/pd-location-approach-dialog.component.html

@@ -2,7 +2,7 @@
   <h2 mat-dialog-title>PD Location Approach &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button>
   </h2>
-</div> -->
+</div>
 <div class="container"
      fxLayout
      fxLayout.xs="column"
@@ -12,7 +12,17 @@
   <div class="mat-dialog-title" fxFlex fxFlexOrder="1">PD Location Approach</div>
   <div fxFlex="20px" fxFlexOrder="3" style="text-align:right;"><button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button></div>
   <div fxFlex="2px" fxFlexOrder="2"></div>
+</div>-->
+<div class="ml-xs mr-xs" style="width: 100%;" 
+fxLayout="row"
+fxLayoutAlign="center">
+<h2 mat-dialog-title style="width: 30%;">PD Location Approach &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h2>
+<div style="width: 40%;"></div>
+<div style="width: 30%;text-align:right;">
+      <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button>
 </div>
+</div>
+
 
 
 
@@ -21,7 +31,7 @@
     <div class="form-group">
           <mat-dialog-content>
 
-            <div class="mb-1"> 
+            <div class="ml-xs mr-xs">
                   <mat-form-field style="width: 100%">
                         <input matInput type="text" placeholder="Name" required [formControl]="_pdLocationApproachForm.controls['description']">
                         <mat-error *ngIf="!_pdLocationApproachForm.controls['description'].valid && _pdLocationApproachForm.controls['description'].touched" class="mat-text-warn">You must include a Description.</mat-error>

ng6-seed/src/app/settings/masters/component/pd/pd-location-approach-list/pd-location-approach-list.component.html

@@ -6,7 +6,7 @@
   <div *ngIf="loader">
       <mat-progress-bar mode="indeterminate" color="accent" class="mb-1"></mat-progress-bar>
   </div>         
-  <div datatable>
+  <!-- <div datatable>
       <table style="border-collapse: collapse">  
                  <thead>
                     <th style="text-align:  center;">#</th>
@@ -15,7 +15,7 @@
                     <th style="text-align:  center;">Action</th>
                   </thead>
 
-                  <!-- , createdon, fk_createdby, updatedon, fk_updatedby, isactive -->
+                  <!- , createdon, fk_createdby, updatedon, fk_updatedby, isactive ->
   
                   <tr *ngIf="MemberOccupationList.length === 0" > <td colspan="4" style="text-align:  center;"> No Records </td></tr>
               <tr *ngFor="let PAL of PdLocationApproachList; let i=index">
@@ -62,6 +62,56 @@
         </div>
         
         <br>-->
+
+        <div class="example-header">
+          <mat-form-field>
+            <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
+          </mat-form-field>
+        </div>
+        
+        <div class="example-container mat-elevation-z8">
+        
+          <mat-table [dataSource]="dataSource" matSort >
+        
+             <ng-container matColumnDef="SerialNo">
+                 <mat-header-cell *matHeaderCellDef mat-sort-header>Sl </mat-header-cell>
+                 <mat-cell *matCellDef="let row; let i = index;"> {{i+1}} </mat-cell>
+             </ng-container>
+     
+            <ng-container matColumnDef="CityName">
+              <mat-header-cell *matHeaderCellDef mat-sort-header> City Name </mat-header-cell>
+              <mat-cell *matCellDef="let row"> {{row.name}} </mat-cell>
+            </ng-container>
+        
+            <ng-container matColumnDef="StateName">
+              <mat-header-cell *matHeaderCellDef mat-sort-header> State Name </mat-header-cell>
+              <mat-cell *matCellDef="let row"> {{row.cityname}} </mat-cell>
+            </ng-container>
+            
+            <ng-container matColumnDef="IsActive">
+              <mat-header-cell *matHeaderCellDef mat-sort-header> Is Active </mat-header-cell>
+              <mat-cell *matCellDef="let row"><!--{{row.isactive}}-->
+                 <mat-icon *ngIf="row.isactive == 1;else notactive;" class="hover-icon" matTooltip="Active" matTooltipPosition="above">done</mat-icon>
+                 <ng-template #notactive ><mat-icon class="hover-icon" matTooltip="Inactive" matTooltipPosition="above">clear</mat-icon></ng-template> 
+              </mat-cell>
+            </ng-container>
+     
+            <ng-container matColumnDef="Actions">
+              <mat-header-cell *matHeaderCellDef>   Actions </mat-header-cell>
+              <mat-cell *matCellDef="let row"> 
+                 <button mat-icon-button class="hover-icon" matTooltip="Edit" matTooltipPosition="above" (click)="editCity(row)"><mat-icon>edit</mat-icon></button>
+                 <button *ngIf="row.isactive == 1;" mat-icon-button class="hover-icon" matTooltip="Delete" matTooltipPosition="above" (click)="deleteBranch(row.city_id)"><mat-icon>delete_outline</mat-icon></button>
+               </mat-cell>
+            </ng-container>
+        
+            <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+            <mat-row *matRowDef="let row; columns: displayedColumns;">
+            </mat-row>
+          </mat-table>
+        
+          <mat-paginator [pageSizeOptions]="[5, 10, 25, 50, 100]"></mat-paginator>
+        </div>
+
         
 
 </mat-card-content>

ng6-seed/src/app/settings/masters/component/pd/pd-location-approach-list/pd-location-approach-list.component.scss

@@ -55,7 +55,7 @@
   overflow: auto;
   max-height: 500px;
 }*/
-/* Structure */
+/* Structure *
 .example-container {
     display: flex;
     flex-direction: column;
@@ -91,3 +91,25 @@
     text-align: left;
   }
 
+
+*/
+.example-container {
+  display: flex;
+  flex-direction: column;
+  min-width: 300px;
+}
+
+.example-header {  
+  min-height: 64px;
+  padding: 8px 24px 0;
+}
+
+.mat-form-field {
+  font-size: 14px;
+  width: 100%;
+}
+
+.mat-table {
+  overflow: auto;
+  max-height: 500px;
+}

ng6-seed/src/app/settings/masters/component/pd/pd-location-approach-list/pd-location-approach-list.component.ts

@@ -29,9 +29,15 @@ export class PdLocationApproachListComponent implements OnInit {
 
   displayedColumns = ['pd_allocation_type_id', 'pd_allocation_type_name', 'isactive','actions'];
 
+  userData = null;
+
+  public dataLength: number;
+  public dataSource = new MatTableDataSource();
+//  displayedColumns = ['SerialNo','BranchName','CityName', 'IsActive','Actions'];
+
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
- 
+
   
   constructor(private dialog: MatDialog,
     private _MastersService: MastersService) { }

ng6-seed/src/app/settings/masters/component/pd/pd-type-dialog/pd-type-dialog.component.html

@@ -2,7 +2,7 @@
             <h2 mat-dialog-title>PD TYPE &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                  <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button>
             </h2>
-          </div> -->
+          </div> 
           <div class="container"
      fxLayout
      fxLayout.xs="column"
@@ -12,7 +12,17 @@
   <div class="mat-dialog-title" fxFlex fxFlexOrder="1">PD type</div>
   <div fxFlex="20px" fxFlexOrder="3" style="text-align:right;"><button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button></div>
   <div fxFlex="15px" fxFlexOrder="2" ></div>
+</div>-->
+<div class="ml-xs mr-xs" style="width: 100%;" 
+fxLayout="row"
+fxLayoutAlign="center">
+<h2 mat-dialog-title style="width: 30%;"> PD type &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h2>
+<div style="width: 40%;"></div>
+<div style="width: 30%;text-align:right;">
+      <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button>
 </div>
+</div>
+
 
           
           
@@ -21,7 +31,7 @@
               <div class="form-group">
                     <mat-dialog-content>
           
-                      <div class="mb-1"> 
+                      <div class="ml-xs mr-xs">
                             <mat-form-field style="width: 100%">
                                   <input matInput type="text" placeholder="Name" required [formControl]="_pdTypeForm.controls['type_name']">
                                   <mat-error *ngIf="!_pdTypeForm.controls['type_name'].valid && _pdTypeForm.controls['type_name'].touched" class="mat-text-warn">You must include a type_name.</mat-error>

ng6-seed/src/app/settings/masters/component/pd/pd-type-list/pd-type-list.component.html

@@ -6,7 +6,7 @@
   <div *ngIf="loader">
       <mat-progress-bar mode="indeterminate" color="accent" class="mb-1"></mat-progress-bar>
   </div>          
-  <div datatable>
+  <!-- <div datatable>
       <table style="border-collapse: collapse">  
                  <thead>
                     <th style="text-align:  center;">S.no</th>
@@ -59,6 +59,54 @@
         </div>-->
         
         <br>
+        <div class="example-header">
+          <mat-form-field>
+            <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
+          </mat-form-field>
+        </div>
         
+        <div class="example-container mat-elevation-z8">
+        
+          <mat-table [dataSource]="dataSource" matSort >
+        
+             <ng-container matColumnDef="SerialNo">
+                 <mat-header-cell *matHeaderCellDef mat-sort-header>Sl </mat-header-cell>
+                 <mat-cell *matCellDef="let row; let i = index;"> {{i+1}} </mat-cell>
+             </ng-container>
+     
+            <ng-container matColumnDef="CityName">
+              <mat-header-cell *matHeaderCellDef mat-sort-header> City Name </mat-header-cell>
+              <mat-cell *matCellDef="let row"> {{row.name}} </mat-cell>
+            </ng-container>
+        
+            <ng-container matColumnDef="StateName">
+              <mat-header-cell *matHeaderCellDef mat-sort-header> State Name </mat-header-cell>
+              <mat-cell *matCellDef="let row"> {{row.cityname}} </mat-cell>
+            </ng-container>
+            
+            <ng-container matColumnDef="IsActive">
+              <mat-header-cell *matHeaderCellDef mat-sort-header> Is Active </mat-header-cell>
+              <mat-cell *matCellDef="let row"><!--{{row.isactive}}-->
+                 <mat-icon *ngIf="row.isactive == 1;else notactive;" class="hover-icon" matTooltip="Active" matTooltipPosition="above">done</mat-icon>
+                 <ng-template #notactive ><mat-icon class="hover-icon" matTooltip="Inactive" matTooltipPosition="above">clear</mat-icon></ng-template> 
+              </mat-cell>
+            </ng-container>
+     
+            <ng-container matColumnDef="Actions">
+              <mat-header-cell *matHeaderCellDef>   Actions </mat-header-cell>
+              <mat-cell *matCellDef="let row"> 
+                 <button mat-icon-button class="hover-icon" matTooltip="Edit" matTooltipPosition="above" (click)="editCity(row)"><mat-icon>edit</mat-icon></button>
+                 <button *ngIf="row.isactive == 1;" mat-icon-button class="hover-icon" matTooltip="Delete" matTooltipPosition="above" (click)="deleteBranch(row.city_id)"><mat-icon>delete_outline</mat-icon></button>
+               </mat-cell>
+            </ng-container>
+        
+            <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+            <mat-row *matRowDef="let row; columns: displayedColumns;">
+            </mat-row>
+          </mat-table>
+        
+          <mat-paginator [pageSizeOptions]="[5, 10, 25, 50, 100]"></mat-paginator>
+        </div>
+
 
 </mat-card-content>

ng6-seed/src/app/settings/masters/component/pd/pd-type-list/pd-type-list.component.scss

@@ -55,7 +55,7 @@
   overflow: auto;
   max-height: 500px;
 }*/
-/* Structure */
+/* Structure *
 .example-container {
     display: flex;
     flex-direction: column;
@@ -91,3 +91,25 @@
     text-align: left;
   }
 
+
+*/
+.example-container {
+  display: flex;
+  flex-direction: column;
+  min-width: 300px;
+}
+
+.example-header {  
+  min-height: 64px;
+  padding: 8px 24px 0;
+}
+
+.mat-form-field {
+  font-size: 14px;
+  width: 100%;
+}
+
+.mat-table {
+  overflow: auto;
+  max-height: 500px;
+}

ng6-seed/src/app/settings/masters/component/pd/pd-type-list/pd-type-list.component.ts

@@ -29,9 +29,15 @@ export class PdTypeListComponent implements OnInit {
 
   displayedColumns = ['pd_type_id', 'type_name', 'isactive','actions'];
 
+  userData = null;
+
+  public dataLength: number;
+  public dataSource = new MatTableDataSource();
+  //displayedColumns = ['SerialNo','BranchName','CityName', 'IsActive','Actions'];
+
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
- 
+
   
   constructor(private dialog: MatDialog,
     private _PDTypeService: MastersService) { }
@@ -40,7 +46,7 @@ export class PdTypeListComponent implements OnInit {
   //    return this._PDTypeService.getAllPDType();
   //  }
 
-  dataSource = new UserDataSource(this._PDTypeService);
+//  dataSource = new UserDataSource(this._PDTypeService);
   
   ngOnInit() {
     this.getPDType();

ng6-seed/src/app/settings/masters/component/product/product-dialog/product-dialog.component.html

@@ -1,8 +1,8 @@
-<!-- <div class="mb-1">
+<!-- <div class="ml-xs mr-xs">
         <h2 mat-dialog-title> Product Details &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button>
         </h2>
-</div> -->
+</div>
 <div class="container"
      fxLayout
      fxLayout.xs="column"
@@ -12,7 +12,17 @@
   <div class="mat-dialog-title" fxFlex fxFlexOrder="1">Product Details</div>
   <div fxFlex="20px" fxFlexOrder="3" style="text-align:right;"><button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button></div>
   <div fxFlex="15px" fxFlexOrder="2"></div>
+</div>-->
+<div class="ml-xs mr-xs" style="width: 100%;" 
+fxLayout="row"
+fxLayoutAlign="center">
+<h2 mat-dialog-title style="width: 30%;"> Product Details &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h2>
+<div style="width: 40%;"></div>
+<div style="width: 30%;text-align:right;">
+      <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button>
 </div>
+</div>
+
 
       
       <form [formGroup]="_productMasterForm" (submit)="onSubmit()">
@@ -20,7 +30,7 @@
           <div class="form-group">
               <mat-dialog-content>
     
-                <div class="mb-1">
+                <div class="ml-xs mr-xs">
                     <mat-form-field style="width: 100%">
                             <input matInput type="text" placeholder="Product Name" required [formControl]="_productMasterForm.controls['name']">
                             <mat-error *ngIf="!_productMasterForm.controls['name'].valid && _productMasterForm.controls['name'].touched" class="mat-text-warn">You must include a Product name.</mat-error>
@@ -28,7 +38,7 @@
                     
                 </div>    
                   
-                <div class="mb-1">
+                <div class="ml-xs mr-xs">
                     <mat-form-field style="width: 100%">
                             <input matInput type="text" placeholder="Product Abbr" required [formControl]="_productMasterForm.controls['abbr']">
                     </mat-form-field>

ng6-seed/src/app/settings/masters/component/product/product-list/product-list.component.html

@@ -4,37 +4,53 @@
     </div>
     <br>
 
-    <mat-form-field>
+    <div class="example-header">
-      <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
+      <mat-form-field>
-    </mat-form-field>
+        <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
+      </mat-form-field>
+    </div>
     
-    <div class="mat-elevation-z8">
+    <div class="example-container mat-elevation-z8">
-      <table mat-table  [dataSource]="dataSource" matSort class="mat-elevation-z8">
     
-        <!-- Position Column -->
+      <mat-table [dataSource]="dataSource" matSort >
-        <ng-container matColumnDef="ID">
+    
-          <th mat-header-cell *matHeaderCellDef mat-sort-header> No. </th>
+         <ng-container matColumnDef="SerialNo">
-          <td mat-cell *matCellDef="let element"> {{element.ID}} </td>
+             <mat-header-cell *matHeaderCellDef mat-sort-header>Sl </mat-header-cell>
+             <mat-cell *matCellDef="let row; let i = index;"> {{i+1}} </mat-cell>
+         </ng-container>
+ 
+        <ng-container matColumnDef="CityName">
+          <mat-header-cell *matHeaderCellDef mat-sort-header> City Name </mat-header-cell>
+          <mat-cell *matCellDef="let row"> {{row.name}} </mat-cell>
         </ng-container>
     
-        <!-- Name Column -->
+        <ng-container matColumnDef="StateName">
-        <ng-container matColumnDef="ProductName">
+          <mat-header-cell *matHeaderCellDef mat-sort-header> State Name </mat-header-cell>
-          <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
+          <mat-cell *matCellDef="let row"> {{row.cityname}} </mat-cell>
-          <td mat-cell *matCellDef="let element"> {{element.ProductName}} </td>
         </ng-container>
-    
         
-        <ng-container matColumnDef="ProductAbbr">
+        <ng-container matColumnDef="IsActive">
-          <th mat-header-cell *matHeaderCellDef mat-sort-header> ProductAbbr </th>
+          <mat-header-cell *matHeaderCellDef mat-sort-header> Is Active </mat-header-cell>
-          <td mat-cell *matCellDef="let element"> {{element.ProductAbbr}} </td>
+          <mat-cell *matCellDef="let row"><!--{{row.isactive}}-->
+             <mat-icon *ngIf="row.isactive == 1;else notactive;" class="hover-icon" matTooltip="Active" matTooltipPosition="above">done</mat-icon>
+             <ng-template #notactive ><mat-icon class="hover-icon" matTooltip="Inactive" matTooltipPosition="above">clear</mat-icon></ng-template> 
+          </mat-cell>
+        </ng-container>
+ 
+        <ng-container matColumnDef="Actions">
+          <mat-header-cell *matHeaderCellDef>   Actions </mat-header-cell>
+          <mat-cell *matCellDef="let row"> 
+             <button mat-icon-button class="hover-icon" matTooltip="Edit" matTooltipPosition="above" (click)="editCity(row)"><mat-icon>edit</mat-icon></button>
+             <button *ngIf="row.isactive == 1;" mat-icon-button class="hover-icon" matTooltip="Delete" matTooltipPosition="above" (click)="deleteBranch(row.city_id)"><mat-icon>delete_outline</mat-icon></button>
+           </mat-cell>
         </ng-container>
     
-        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+        <mat-row *matRowDef="let row; columns: displayedColumns;">
-        
+        </mat-row>
-      </table>
+      </mat-table>
     
-      <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
+      <mat-paginator [pageSizeOptions]="[5, 10, 25, 50, 100]"></mat-paginator>
     </div>
 
       <!-- Copyright 2018 Google Inc. All Rights Reserved.

ng6-seed/src/app/settings/masters/component/product/product-list/product-list.component.scss

@@ -55,7 +55,7 @@
   overflow: auto;
   max-height: 500px;
 }*/
-/* Structure */
+/* Structure *
 .example-container {
     display: flex;
     flex-direction: column;
@@ -89,4 +89,26 @@
   
   th { 
     text-align: left;
-  }
+  }*/
+
+
+.example-container {
+  display: flex;
+  flex-direction: column;
+  min-width: 300px;
+}
+
+.example-header {  
+  min-height: 64px;
+  padding: 8px 24px 0;
+}
+
+.mat-form-field {
+  font-size: 14px;
+  width: 100%;
+}
+
+.mat-table {
+  overflow: auto;
+  max-height: 500px;
+}

ng6-seed/src/app/settings/masters/component/product/product-list/product-list.component.ts

@@ -32,13 +32,21 @@ export class ProductListComponent implements OnInit {
   
   //dataSource = new UserDataSource(this._ProductService);
   
-  displayedColumns: string[] = ['ID','ProductName','ProductAbbr'];
+  // displayedColumns: string[] = ['ID','ProductName','ProductAbbr'];
-  dataSource = new MatTableDataSource<ProductElement>(ELEMENT_DATA1);
+  // dataSource = new MatTableDataSource<ProductElement>(ELEMENT_DATA1);
+
+  // @ViewChild(MatPaginator) paginator: MatPaginator;
+  // @ViewChild(MatSort) sort: MatSort;
+
+  userData = null;
+
+  public dataLength: number;
+  public dataSource = new MatTableDataSource();
+  displayedColumns = ['SerialNo','BranchName','CityName', 'IsActive','Actions'];
 
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
 
-
   //Onready function
   ngOnInit() {
     this.dataSource.paginator = this.paginator;

ng6-seed/src/app/settings/masters/component/regions/regions-dialog/regions-dialog.component.html

@@ -1,8 +1,8 @@
-<!-- <div class="mb-1">
+<!-- <div class="ml-xs mr-xs">
     <h2 mat-dialog-title>Region &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button>
     </h2>
-</div> -->
+</div>
 <div class="container"
      fxLayout
      fxLayout.xs="column"
@@ -12,7 +12,17 @@
   <div class="mat-dialog-title" fxFlex fxFlexOrder="1">Region</div>
   <div fxFlex="20px" fxFlexOrder="3" style="text-align:right;"><button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button></div>
   <div fxFlex="15px" fxFlexOrder="2"></div>
+</div>-->
+<div class="ml-xs mr-xs" style="width: 100%;" 
+fxLayout="row"
+fxLayoutAlign="center">
+<h2 mat-dialog-title style="width: 30%;"> Region &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h2>
+<div style="width: 40%;"></div>
+<div style="width: 30%;text-align:right;">
+      <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button>
 </div>
+</div>
+
 
   
   
@@ -21,7 +31,7 @@
       <div class="form-group">
             <mat-dialog-content>
 
-              <div class="mb-1"> 
+              <div class="ml-xs mr-xs"> 
                     <mat-form-field style="width: 100%">
                           <input matInput type="text" placeholder="Name" required [formControl]="_regionsForm.controls['name']">
                           <mat-error *ngIf="!_regionsForm.controls['name'].valid && _regionsForm.controls['name'].touched" class="mat-text-warn">You must include a Name.</mat-error>

ng6-seed/src/app/settings/masters/component/regions/regions-list/regions-list.component.html

@@ -6,7 +6,7 @@
     <div *ngIf="loader">
         <mat-progress-bar mode="indeterminate" color="accent" class="mb-1"></mat-progress-bar>
      </div>  
-     <div datatable>
+     <!-- <div datatable>
         <table style="border-collapse: collapse">  
                    <thead>
                       <th style="text-align:  center;">#</th>
@@ -60,6 +60,57 @@
           </div>
           
           <br>-->
+
+
+          <div class="example-header">
+            <mat-form-field>
+              <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
+            </mat-form-field>
+          </div>
+          
+          <div class="example-container mat-elevation-z8">
+          
+            <mat-table [dataSource]="dataSource" matSort >
+          
+               <ng-container matColumnDef="SerialNo">
+                   <mat-header-cell *matHeaderCellDef mat-sort-header>Sl </mat-header-cell>
+                   <mat-cell *matCellDef="let row; let i = index;"> {{i+1}} </mat-cell>
+               </ng-container>
+       
+              <ng-container matColumnDef="CityName">
+                <mat-header-cell *matHeaderCellDef mat-sort-header> City Name </mat-header-cell>
+                <mat-cell *matCellDef="let row"> {{row.name}} </mat-cell>
+              </ng-container>
+          
+              <ng-container matColumnDef="StateName">
+                <mat-header-cell *matHeaderCellDef mat-sort-header> State Name </mat-header-cell>
+                <mat-cell *matCellDef="let row"> {{row.cityname}} </mat-cell>
+              </ng-container>
+              
+              <ng-container matColumnDef="IsActive">
+                <mat-header-cell *matHeaderCellDef mat-sort-header> Is Active </mat-header-cell>
+                <mat-cell *matCellDef="let row"><!--{{row.isactive}}-->
+                   <mat-icon *ngIf="row.isactive == 1;else notactive;" class="hover-icon" matTooltip="Active" matTooltipPosition="above">done</mat-icon>
+                   <ng-template #notactive ><mat-icon class="hover-icon" matTooltip="Inactive" matTooltipPosition="above">clear</mat-icon></ng-template> 
+                </mat-cell>
+              </ng-container>
+       
+              <ng-container matColumnDef="Actions">
+                <mat-header-cell *matHeaderCellDef>   Actions </mat-header-cell>
+                <mat-cell *matCellDef="let row"> 
+                   <button mat-icon-button class="hover-icon" matTooltip="Edit" matTooltipPosition="above" (click)="editCity(row)"><mat-icon>edit</mat-icon></button>
+                   <button *ngIf="row.isactive == 1;" mat-icon-button class="hover-icon" matTooltip="Delete" matTooltipPosition="above" (click)="deleteBranch(row.city_id)"><mat-icon>delete_outline</mat-icon></button>
+                 </mat-cell>
+              </ng-container>
+          
+              <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+              <mat-row *matRowDef="let row; columns: displayedColumns;">
+              </mat-row>
+            </mat-table>
+          
+            <mat-paginator [pageSizeOptions]="[5, 10, 25, 50, 100]"></mat-paginator>
+          </div>
+
           
   
 </mat-card-content>

ng6-seed/src/app/settings/masters/component/regions/regions-list/regions-list.component.scss

@@ -55,7 +55,7 @@
   overflow: auto;
   max-height: 500px;
 }*/
-/* Structure */
+/* Structure *
 .example-container {
     display: flex;
     flex-direction: column;
@@ -91,3 +91,25 @@
     text-align: left;
   }
 
+
+*/
+.example-container {
+  display: flex;
+  flex-direction: column;
+  min-width: 300px;
+}
+
+.example-header {  
+  min-height: 64px;
+  padding: 8px 24px 0;
+}
+
+.mat-form-field {
+  font-size: 14px;
+  width: 100%;
+}
+
+.mat-table {
+  overflow: auto;
+  max-height: 500px;
+}

ng6-seed/src/app/settings/masters/component/regions/regions-list/regions-list.component.ts

@@ -30,9 +30,15 @@ export class RegionsListComponent implements OnInit {
   displayedColumns = ['region_id', 'name', 'isactive','actions'];
   //region_id, name, createdon, fk_createdby, updatedon, fk_updatedby, isactive
 
+  userData = null;
+
+  public dataLength: number;
+  public dataSource = new MatTableDataSource();
+//  displayedColumns = ['SerialNo','BranchName','CityName', 'IsActive','Actions'];
+
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
- 
+
   constructor(private dialog: MatDialog,
     private _regionsService: MastersService) { }
 
@@ -40,7 +46,7 @@ export class RegionsListComponent implements OnInit {
   //    return this._regionsService.getAllregions();
   //  }
 
-  dataSource = new UserDataSource(this._regionsService);
+  //dataSource = new UserDataSource(this._regionsService);
   
   ngOnInit() {
     this.getregions();

ng6-seed/src/app/settings/masters/component/relation-ship/relation-ship-dialog/relation-ship-dialog.component.html

@@ -1,8 +1,8 @@
-<!-- <div class="mb-1">
+<!-- <div class="ml-xs mr-xs">
     <h2 mat-dialog-title>Relation Ship &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button>
     </h2>
-</div> -->
+</div>
 <div class="container"
      fxLayout
      fxLayout.xs="column"
@@ -12,7 +12,17 @@
   <div class="mat-dialog-title" fxFlex fxFlexOrder="1">Relation Ship</div>
   <div fxFlex="20px" fxFlexOrder="3" style="text-align:right;"><button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button></div>
   <div fxFlex="2px" fxFlexOrder="2"></div>
+</div> -->
+<div class="ml-xs mr-xs" style="width: 100%;" 
+fxLayout="row"
+fxLayoutAlign="center">
+<h2 mat-dialog-title style="width: 30%;"> Relation Ship &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h2>
+<div style="width: 40%;"></div>
+<div style="width: 30%;text-align:right;">
+      <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button>
 </div>
+</div>
+
 
   
   
@@ -21,7 +31,7 @@
       <div class="form-group">
             <mat-dialog-content>
 
-              <div class="mb-1"> 
+              <div class="ml-xs mr-xs"> 
                     <mat-form-field style="width: 100%">
                           <input matInput type="text" placeholder="Name" required [formControl]="_relationShipForm.controls['name']">
                           <mat-error *ngIf="!_relationShipForm.controls['name'].valid && _relationShipForm.controls['name'].touched" class="mat-text-warn">You must include a Name.</mat-error>

ng6-seed/src/app/settings/masters/component/relation-ship/relation-ship-list/relation-ship-list.component.html

@@ -6,7 +6,7 @@
     <div *ngIf="loader">
         <mat-progress-bar mode="indeterminate" color="accent" class="mb-1"></mat-progress-bar>
     </div>  
-    <div datatable>
+    <!-- <div datatable>
         <table style="border-collapse: collapse">  
                    <thead>
                       <th style="text-align:  center;">#</th>
@@ -80,6 +80,56 @@
           </div>
           
           <br>-->
+
+          <div class="example-header">
+            <mat-form-field>
+              <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
+            </mat-form-field>
+          </div>
+          
+          <div class="example-container mat-elevation-z8">
+          
+            <mat-table [dataSource]="dataSource" matSort >
+          
+               <ng-container matColumnDef="SerialNo">
+                   <mat-header-cell *matHeaderCellDef mat-sort-header>Sl </mat-header-cell>
+                   <mat-cell *matCellDef="let row; let i = index;"> {{i+1}} </mat-cell>
+               </ng-container>
+       
+              <ng-container matColumnDef="CityName">
+                <mat-header-cell *matHeaderCellDef mat-sort-header> City Name </mat-header-cell>
+                <mat-cell *matCellDef="let row"> {{row.name}} </mat-cell>
+              </ng-container>
+          
+              <ng-container matColumnDef="StateName">
+                <mat-header-cell *matHeaderCellDef mat-sort-header> State Name </mat-header-cell>
+                <mat-cell *matCellDef="let row"> {{row.cityname}} </mat-cell>
+              </ng-container>
+              
+              <ng-container matColumnDef="IsActive">
+                <mat-header-cell *matHeaderCellDef mat-sort-header> Is Active </mat-header-cell>
+                <mat-cell *matCellDef="let row"><!--{{row.isactive}}-->
+                   <mat-icon *ngIf="row.isactive == 1;else notactive;" class="hover-icon" matTooltip="Active" matTooltipPosition="above">done</mat-icon>
+                   <ng-template #notactive ><mat-icon class="hover-icon" matTooltip="Inactive" matTooltipPosition="above">clear</mat-icon></ng-template> 
+                </mat-cell>
+              </ng-container>
+       
+              <ng-container matColumnDef="Actions">
+                <mat-header-cell *matHeaderCellDef>   Actions </mat-header-cell>
+                <mat-cell *matCellDef="let row"> 
+                   <button mat-icon-button class="hover-icon" matTooltip="Edit" matTooltipPosition="above" (click)="editCity(row)"><mat-icon>edit</mat-icon></button>
+                   <button *ngIf="row.isactive == 1;" mat-icon-button class="hover-icon" matTooltip="Delete" matTooltipPosition="above" (click)="deleteBranch(row.city_id)"><mat-icon>delete_outline</mat-icon></button>
+                 </mat-cell>
+              </ng-container>
+          
+              <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+              <mat-row *matRowDef="let row; columns: displayedColumns;">
+              </mat-row>
+            </mat-table>
+          
+            <mat-paginator [pageSizeOptions]="[5, 10, 25, 50, 100]"></mat-paginator>
+          </div>
+
           
   
 </mat-card-content>

ng6-seed/src/app/settings/masters/component/relation-ship/relation-ship-list/relation-ship-list.component.scss

@@ -82,7 +82,7 @@
   overflow: auto;
   max-height: 500px;
 }*/
-/* Structure */
+/* Structure *
 .example-container {
   display: flex;
   flex-direction: column;
@@ -118,3 +118,24 @@ th {
   text-align: left;
 }
 
+*/
+.example-container {
+  display: flex;
+  flex-direction: column;
+  min-width: 300px;
+}
+
+.example-header {  
+  min-height: 64px;
+  padding: 8px 24px 0;
+}
+
+.mat-form-field {
+  font-size: 14px;
+  width: 100%;
+}
+
+.mat-table {
+  overflow: auto;
+  max-height: 500px;
+}

ng6-seed/src/app/settings/masters/component/relation-ship/relation-ship-list/relation-ship-list.component.ts

@@ -41,14 +41,21 @@ export class RelationShipListComponent implements OnInit {
   displayedColumns = ['relationship_id','name','createdon','fk_createdby','updatedon','isactive','fk_updatedby','actions'];
   //relationship_id, name, createdon, fk_createdby, updatedon, fk_updatedby, isactive
   
+  userData = null;
+
+  public dataLength: number;
+  public dataSource = new MatTableDataSource();
+ // displayedColumns = ['SerialNo','BranchName','CityName', 'IsActive','Actions'];
+
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
+
   
   ngOnInit() {
     this.getRelationShip();
   }
 
-  dataSource = new UserDataSource(this._MastersService);
+  //dataSource = new UserDataSource(this._MastersService);
 
   addRelationShip() {
     this.isPopupOpened = true;

ng6-seed/src/app/settings/masters/component/states/states-dialog/states-dialog.component.html

@@ -1,8 +1,8 @@
-<!-- <div class="mb-1">
+<!-- <div class="ml-xs mr-xs">
     <h2 mat-dialog-title>State &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button>
     </h2>
-</div> -->
+</div>
 <div class="container"
      fxLayout
      fxLayout.xs="column"
@@ -12,7 +12,17 @@
   <div class="mat-dialog-title" fxFlex fxFlexOrder="1">State</div>
   <div fxFlex="20px" fxFlexOrder="3" style="text-align:right;"><button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button></div>
   <div fxFlex="15px" fxFlexOrder="2"></div>
+</div> -->
+<div class="ml-xs mr-xs" style="width: 100%;" 
+fxLayout="row"
+fxLayoutAlign="center">
+<h2 mat-dialog-title style="width: 30%;"> State &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h2>
+<div style="width: 40%;"></div>
+<div style="width: 30%;text-align:right;">
+      <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button>
 </div>
+</div>
+
 
 
   <form [formGroup]="_statesForm" (submit)="onSubmit()">
@@ -20,7 +30,7 @@
       <div class="form-group">
             <mat-dialog-content>
 
-                  <div class="mb-1"> 
+                  <div class="ml-xs mr-xs"> 
                         <mat-form-field>
                               <mat-select placeholder="Pick Up Region Name" required [formControl]="_statesForm.controls['fk_region_id']">
                                                <mat-option  *ngFor="let sd of regionDatas"  [value]="sd.region_id">{{ sd.name }}</mat-option>
@@ -29,14 +39,14 @@
                         </mat-form-field>
                   </div>
                   
-              <div class="mb-1"> 
+              <div class="ml-xs mr-xs"> 
                     <mat-form-field style="width: 100%">
                           <input matInput type="text" placeholder="Name" required [formControl]="_statesForm.controls['name']">
                           <mat-error *ngIf="!_statesForm.controls['name'].valid && _statesForm.controls['name'].touched" class="mat-text-warn">You must include a Name.</mat-error>
                     </mat-form-field>
               
               </div>
-              <div class="mb-1"> 
+              <div class="ml-xs mr-xs"> 
                   <!-- <mat-form-field style="width: 100%">
                                     <mat-select placeholder="Pick up Region" required [formControl]="_statesForm.controls['fk_region_id']">
                                         <mat-option *ngFor="let RD of RegionData" [value]="RD.region_id">
@@ -45,7 +55,7 @@
                                     </mat-select>
                   </mat-form-field> -->            
             </div>
-            <div class="mb-1"> 
+            <div class="ml-xs mr-xs"> 
                 <mat-form-field style="width: 100%">
                       <input matInput type="text" placeholder="Code" required [formControl]="_statesForm.controls['code']">
                       <mat-error *ngIf="!_statesForm.controls['code'].valid && _statesForm.controls['code'].touched" class="mat-text-warn">You must include a Code.</mat-error>

ng6-seed/src/app/settings/masters/component/states/states-list/states-list.component.html

@@ -6,7 +6,7 @@
     <div *ngIf="loader">
         <mat-progress-bar mode="indeterminate" color="accent" class="mb-1"></mat-progress-bar>
     </div> 
-    <div datatable>
+    <!-- <div datatable>
         <table style="border-collapse: collapse">  
                    <thead>
                       <th style="text-align:  center;">#</th>
@@ -100,6 +100,56 @@
           </div>
           
           <br>-->
+
+          <div class="example-header">
+            <mat-form-field>
+              <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
+            </mat-form-field>
+          </div>
+          
+          <div class="example-container mat-elevation-z8">
+          
+            <mat-table [dataSource]="dataSource" matSort >
+          
+               <ng-container matColumnDef="SerialNo">
+                   <mat-header-cell *matHeaderCellDef mat-sort-header>Sl </mat-header-cell>
+                   <mat-cell *matCellDef="let row; let i = index;"> {{i+1}} </mat-cell>
+               </ng-container>
+       
+              <ng-container matColumnDef="CityName">
+                <mat-header-cell *matHeaderCellDef mat-sort-header> City Name </mat-header-cell>
+                <mat-cell *matCellDef="let row"> {{row.name}} </mat-cell>
+              </ng-container>
+          
+              <ng-container matColumnDef="StateName">
+                <mat-header-cell *matHeaderCellDef mat-sort-header> State Name </mat-header-cell>
+                <mat-cell *matCellDef="let row"> {{row.cityname}} </mat-cell>
+              </ng-container>
+              
+              <ng-container matColumnDef="IsActive">
+                <mat-header-cell *matHeaderCellDef mat-sort-header> Is Active </mat-header-cell>
+                <mat-cell *matCellDef="let row"><!--{{row.isactive}}-->
+                   <mat-icon *ngIf="row.isactive == 1;else notactive;" class="hover-icon" matTooltip="Active" matTooltipPosition="above">done</mat-icon>
+                   <ng-template #notactive ><mat-icon class="hover-icon" matTooltip="Inactive" matTooltipPosition="above">clear</mat-icon></ng-template> 
+                </mat-cell>
+              </ng-container>
+       
+              <ng-container matColumnDef="Actions">
+                <mat-header-cell *matHeaderCellDef>   Actions </mat-header-cell>
+                <mat-cell *matCellDef="let row"> 
+                   <button mat-icon-button class="hover-icon" matTooltip="Edit" matTooltipPosition="above" (click)="editCity(row)"><mat-icon>edit</mat-icon></button>
+                   <button *ngIf="row.isactive == 1;" mat-icon-button class="hover-icon" matTooltip="Delete" matTooltipPosition="above" (click)="deleteBranch(row.city_id)"><mat-icon>delete_outline</mat-icon></button>
+                 </mat-cell>
+              </ng-container>
+          
+              <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+              <mat-row *matRowDef="let row; columns: displayedColumns;">
+              </mat-row>
+            </mat-table>
+          
+            <mat-paginator [pageSizeOptions]="[5, 10, 25, 50, 100]"></mat-paginator>
+          </div>
+
           
   
 </mat-card-content>

ng6-seed/src/app/settings/masters/component/states/states-list/states-list.component.scss

@@ -55,7 +55,7 @@
   overflow: auto;
   max-height: 500px;
 }*/
-/* Structure */
+/* Structure *
 .example-container {
     display: flex;
     flex-direction: column;
@@ -91,3 +91,25 @@
     text-align: left;
   }
 
+
+*/
+.example-container {
+  display: flex;
+  flex-direction: column;
+  min-width: 300px;
+}
+
+.example-header {  
+  min-height: 64px;
+  padding: 8px 24px 0;
+}
+
+.mat-form-field {
+  font-size: 14px;
+  width: 100%;
+}
+
+.mat-table {
+  overflow: auto;
+  max-height: 500px;
+}

ng6-seed/src/app/settings/masters/component/states/states-list/states-list.component.ts

@@ -28,9 +28,15 @@ export class StatesListComponent implements OnInit {
   //displayedColumns = ['states_id', 'fk_city_id', 'name', 'createdon', 'fk_createdby', 'updatedon', 'fk_updatedby', 'isactive','actions'];
   displayedColumns = ['state_id', 'fk_region_id','region_name', 'name', 'code', 'isactive','actions'];
 
+  userData = null;
+
+  public dataLength: number;
+  public dataSource = new MatTableDataSource();
+//  displayedColumns = ['SerialNo','BranchName','CityName', 'IsActive','Actions'];
+
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
- 
+
   
   constructor(private dialog: MatDialog,
     private _statesService: MastersService) { }
@@ -39,7 +45,7 @@ export class StatesListComponent implements OnInit {
   //    return this._statesService.getAllStates();
   //  }
 
-  dataSource = new UserDataSource(this._statesService);
+  //dataSource = new UserDataSource(this._statesService);
   
   ngOnInit() {
     this.getState();

ng6-seed/src/app/settings/masters/component/sub-product/sub-product-dialog/sub-product-dialog.component.html

@@ -1,9 +1,9 @@
 
-<!-- <div class="mb-1">
+<!-- <div class="ml-xs mr-xs">
     <h2> Sub Product Details &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <button mat-raised-button mat-icon-button class="mr-1 mb-1  hover-icon" matTooltip="Close" matTooltipPosition="above" (click)="onNoClick()"><mat-icon>close</mat-icon></button>
     </h2>
-</div> -->
+</div> 
 <div class="container"
      fxLayout
      fxLayout.xs="column"
@@ -13,7 +13,17 @@
   <div class="mat-dialog-title" fxFlex fxFlexOrder="1">Sub Product Details</div>
   <div fxFlex="20px" fxFlexOrder="3" style="text-align:right;"><button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button></div>
   <div fxFlex="15px" fxFlexOrder="2"></div>
+</div> -->
+<div class="ml-xs mr-xs" style="width: 100%;" 
+fxLayout="row"
+fxLayoutAlign="center">
+<h2 mat-dialog-title style="width: 30%;"> Sub Product Details &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h2>
+<div style="width: 40%;"></div>
+<div style="width: 30%;text-align:right;">
+      <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button>
 </div>
+</div>
+
 
   
   <form [formGroup]="_subProductMasterForm" (submit)="onSubmit()">
@@ -21,7 +31,7 @@
       <div class="form-group">
           <mat-dialog-content>
 
-               <div class="mb-1"> 
+               <div class="ml-xs mr-xs"> 
                     <!-- <mat-form-field>
                             <input matInput placeholder="Pick Up Product Name" [matAutocomplete]="tdAuto" [(ngModel)]="currentState" #modelDir="ngModel" required
                               (ngModelChange)="this.tdStates = filterStates(currentState)" [disabled]="tdDisabled">
@@ -31,7 +41,7 @@
                                     </mat-option>
                                </mat-autocomplete>
                        </mat-form-field>  -->
-                       <div class="mb-1"> 
+                       <div class="ml-xs mr-xs"> 
                             <mat-form-field>
                                   <mat-select placeholder="Pick Up Product Name" required [formControl]="_subProductMasterForm.controls['fk_product_id']">
                                                    <mat-option  *ngFor="let sd of productDatas"  [value]="sd.product_id">{{ sd.name }}</mat-option>
@@ -46,7 +56,7 @@
               
                 </div>
               
-                <div class="mb-1"> 
+                <div class="ml-xs mr-xs"> 
                     <mat-form-field style="width: 100%">
                         <input matInput type="text" placeholder="Sub Product Name" required [formControl]="_subProductMasterForm.controls['name']">
                         <mat-error *ngIf="!_subProductMasterForm.controls['name'].valid && _subProductMasterForm.controls['name'].touched" class="mat-text-warn">You must include a Sub Product name.</mat-error>
@@ -55,7 +65,7 @@
                 </div>
                 
   
-                <div class="mb-1"> 
+                <div class="ml-xs mr-xs"> 
                     <mat-form-field style="width: 100%">
                         <input matInput type="text" placeholder="Sub Product Abbrevation" required [formControl]="_subProductMasterForm.controls['abbr']">
                         <mat-error *ngIf="!_subProductMasterForm.controls['abbr'].valid && _subProductMasterForm.controls['abbr'].touched" class="mat-text-warn">You must include a Sub Product Abbrevation.</mat-error>

ng6-seed/src/app/settings/masters/component/sub-product/sub-product-list/sub-product-list.component.html

@@ -7,7 +7,7 @@
         <mat-progress-bar mode="indeterminate" color="accent" class="mb-1"></mat-progress-bar>
     </div> 
 
-    <div datatable>
+    <!-- <div datatable>
         <table style="border-collapse: collapse">  
                    <thead>
                       <th style="text-align:  center;">#</th>
@@ -90,6 +90,56 @@
           </div>-->
           
           <br>
+
+          <div class="example-header">
+            <mat-form-field>
+              <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
+            </mat-form-field>
+          </div>
+          
+          <div class="example-container mat-elevation-z8">
+          
+            <mat-table [dataSource]="dataSource" matSort >
+          
+               <ng-container matColumnDef="SerialNo">
+                   <mat-header-cell *matHeaderCellDef mat-sort-header>Sl </mat-header-cell>
+                   <mat-cell *matCellDef="let row; let i = index;"> {{i+1}} </mat-cell>
+               </ng-container>
+       
+              <ng-container matColumnDef="CityName">
+                <mat-header-cell *matHeaderCellDef mat-sort-header> City Name </mat-header-cell>
+                <mat-cell *matCellDef="let row"> {{row.name}} </mat-cell>
+              </ng-container>
+          
+              <ng-container matColumnDef="StateName">
+                <mat-header-cell *matHeaderCellDef mat-sort-header> State Name </mat-header-cell>
+                <mat-cell *matCellDef="let row"> {{row.cityname}} </mat-cell>
+              </ng-container>
+              
+              <ng-container matColumnDef="IsActive">
+                <mat-header-cell *matHeaderCellDef mat-sort-header> Is Active </mat-header-cell>
+                <mat-cell *matCellDef="let row"><!--{{row.isactive}}-->
+                   <mat-icon *ngIf="row.isactive == 1;else notactive;" class="hover-icon" matTooltip="Active" matTooltipPosition="above">done</mat-icon>
+                   <ng-template #notactive ><mat-icon class="hover-icon" matTooltip="Inactive" matTooltipPosition="above">clear</mat-icon></ng-template> 
+                </mat-cell>
+              </ng-container>
+       
+              <ng-container matColumnDef="Actions">
+                <mat-header-cell *matHeaderCellDef>   Actions </mat-header-cell>
+                <mat-cell *matCellDef="let row"> 
+                   <button mat-icon-button class="hover-icon" matTooltip="Edit" matTooltipPosition="above" (click)="editCity(row)"><mat-icon>edit</mat-icon></button>
+                   <button *ngIf="row.isactive == 1;" mat-icon-button class="hover-icon" matTooltip="Delete" matTooltipPosition="above" (click)="deleteBranch(row.city_id)"><mat-icon>delete_outline</mat-icon></button>
+                 </mat-cell>
+              </ng-container>
+          
+              <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+              <mat-row *matRowDef="let row; columns: displayedColumns;">
+              </mat-row>
+            </mat-table>
+          
+            <mat-paginator [pageSizeOptions]="[5, 10, 25, 50, 100]"></mat-paginator>
+          </div>
+
           
 
 </mat-card-content>

ng6-seed/src/app/settings/masters/component/sub-product/sub-product-list/sub-product-list.component.scss

@@ -82,7 +82,7 @@
   overflow: auto;
   max-height: 500px;
 }*/
-/* Structure */
+/* Structure *
 .example-container {
   display: flex;
   flex-direction: column;
@@ -118,3 +118,25 @@ th {
   text-align: left;
 }
 
+
+*/
+.example-container {
+  display: flex;
+  flex-direction: column;
+  min-width: 300px;
+}
+
+.example-header {  
+  min-height: 64px;
+  padding: 8px 24px 0;
+}
+
+.mat-form-field {
+  font-size: 14px;
+  width: 100%;
+}
+
+.mat-table {
+  overflow: auto;
+  max-height: 500px;
+}

ng6-seed/src/app/settings/masters/component/sub-product/sub-product-list/sub-product-list.component.ts

@@ -39,10 +39,16 @@ export class SubProductListComponent implements OnInit {
   displayedColumns = ['subproduct_id','fk_product_id','product_name','name','abbr','createdon','fk_createdby','updatedon','isactive','fk_updatedby','actions'];
   //subproduct_id, fk_product_id, name, abbr, createdon, fk_createdby, updatedon, fk_updatedby, isactive
   
+  userData = null;
+
+  public dataLength: number;
+  public dataSource = new MatTableDataSource();
+//  displayedColumns = ['SerialNo','BranchName','CityName', 'IsActive','Actions'];
+
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
-  
+ 
-  dataSource = new UserDataSource(this._MastersService);
+  //dataSource = new UserDataSource(this._MastersService);
 
   
   ngOnInit() {

ng6-seed/src/app/settings/masters/component/title/title-dialog/title-dialog.component.html

@@ -1,8 +1,8 @@
-<!-- <div class="mb-1">
+<!-- <div class="ml-xs mr-xs">
     <h2 mat-dialog-title>Title &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button>
     </h2>
-</div> -->
+</div> 
 <div class="container"
      fxLayout
      fxLayout.xs="column"
@@ -12,7 +12,17 @@
   <div class="mat-dialog-title" fxFlex fxFlexOrder="1">Title</div>
   <div fxFlex="20px" fxFlexOrder="3" style="text-align:right;"><button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button></div>
   <div fxFlex="15px" fxFlexOrder="2"></div>
+</div>-->
+<div class="ml-xs mr-xs" style="width: 100%;" 
+fxLayout="row"
+fxLayoutAlign="center">
+<h2 mat-dialog-title style="width: 30%;">Title &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h2>
+<div style="width: 40%;"></div>
+<div style="width: 30%;text-align:right;">
+      <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button>
 </div>
+</div>
+
 
   
   
@@ -21,7 +31,7 @@
       <div class="form-group">
             <mat-dialog-content>
 
-              <div class="mb-1"> 
+              <div class="ml-xs mr-xs"> 
                     <mat-form-field style="width: 100%">
                           <input matInput type="text" placeholder="Title" required [formControl]="_titleForm.controls['name']">
                           <mat-error *ngIf="!_titleForm.controls['name'].valid && _titleForm.controls['name'].touched" class="mat-text-warn">You must include a Title.</mat-error>

ng6-seed/src/app/settings/masters/component/title/title-list/title-list.component.html

@@ -6,7 +6,7 @@
     <div *ngIf="loader">
         <mat-progress-bar mode="indeterminate" color="accent" class="mb-1"></mat-progress-bar>
     </div>      
-    <div datatable>
+   <!-- <div datatable>
         <table style="border-collapse: collapse">  
                    <thead>
                       <th style="text-align:  center;">#</th>
@@ -80,6 +80,56 @@
           </div>-->
           
           <br>
+
+          <div class="example-header">
+            <mat-form-field>
+              <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
+            </mat-form-field>
+          </div>
+          
+          <div class="example-container mat-elevation-z8">
+          
+            <mat-table [dataSource]="dataSource" matSort >
+          
+               <ng-container matColumnDef="SerialNo">
+                   <mat-header-cell *matHeaderCellDef mat-sort-header>Sl </mat-header-cell>
+                   <mat-cell *matCellDef="let row; let i = index;"> {{i+1}} </mat-cell>
+               </ng-container>
+       
+              <ng-container matColumnDef="CityName">
+                <mat-header-cell *matHeaderCellDef mat-sort-header> City Name </mat-header-cell>
+                <mat-cell *matCellDef="let row"> {{row.name}} </mat-cell>
+              </ng-container>
+          
+              <ng-container matColumnDef="StateName">
+                <mat-header-cell *matHeaderCellDef mat-sort-header> State Name </mat-header-cell>
+                <mat-cell *matCellDef="let row"> {{row.cityname}} </mat-cell>
+              </ng-container>
+              
+              <ng-container matColumnDef="IsActive">
+                <mat-header-cell *matHeaderCellDef mat-sort-header> Is Active </mat-header-cell>
+                <mat-cell *matCellDef="let row"><!--{{row.isactive}}-->
+                   <mat-icon *ngIf="row.isactive == 1;else notactive;" class="hover-icon" matTooltip="Active" matTooltipPosition="above">done</mat-icon>
+                   <ng-template #notactive ><mat-icon class="hover-icon" matTooltip="Inactive" matTooltipPosition="above">clear</mat-icon></ng-template> 
+                </mat-cell>
+              </ng-container>
+       
+              <ng-container matColumnDef="Actions">
+                <mat-header-cell *matHeaderCellDef>   Actions </mat-header-cell>
+                <mat-cell *matCellDef="let row"> 
+                   <button mat-icon-button class="hover-icon" matTooltip="Edit" matTooltipPosition="above" (click)="editCity(row)"><mat-icon>edit</mat-icon></button>
+                   <button *ngIf="row.isactive == 1;" mat-icon-button class="hover-icon" matTooltip="Delete" matTooltipPosition="above" (click)="deleteBranch(row.city_id)"><mat-icon>delete_outline</mat-icon></button>
+                 </mat-cell>
+              </ng-container>
+          
+              <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+              <mat-row *matRowDef="let row; columns: displayedColumns;">
+              </mat-row>
+            </mat-table>
+          
+            <mat-paginator [pageSizeOptions]="[5, 10, 25, 50, 100]"></mat-paginator>
+          </div>
+
           
   
 </mat-card-content>

ng6-seed/src/app/settings/masters/component/title/title-list/title-list.component.scss

@@ -81,7 +81,7 @@
   overflow: auto;
   max-height: 500px;
 }*/
-/* Structure */
+/* Structure *
 .example-container {
   display: flex;
   flex-direction: column;
@@ -117,3 +117,25 @@ th {
   text-align: left;
 }
 
+
+*/
+.example-container {
+  display: flex;
+  flex-direction: column;
+  min-width: 300px;
+}
+
+.example-header {  
+  min-height: 64px;
+  padding: 8px 24px 0;
+}
+
+.mat-form-field {
+  font-size: 14px;
+  width: 100%;
+}
+
+.mat-table {
+  overflow: auto;
+  max-height: 500px;
+}

ng6-seed/src/app/settings/masters/component/title/title-list/title-list.component.ts

@@ -36,10 +36,15 @@ export class TitleListComponent implements OnInit {
   displayedColumns = ['title_id','name','createdon','fk_createdby','updatedon','isactive','fk_updatedby','actions'];
 
   //title_id, name, createdon, fk_createdby, updatedon, fk_updatedby, isactive
+  userData = null;
+
+  public dataLength: number;
+  public dataSource = new MatTableDataSource();
+//  displayedColumns = ['SerialNo','BranchName','CityName', 'IsActive','Actions'];
+
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
-  
+
-  dataSource = new UserDataSource(this._MastersService);
 
 
   //  get TitleList() {

ng6-seed/src/app/settings/masters/component/type-of-activity/activity-dialog/activity-dialog.component.html

@@ -13,7 +13,17 @@
   <div class="mat-dialog-title" fxFlex fxFlexOrder="1">Type of activity</div>
   <div fxFlex="20px" fxFlexOrder="3" style="text-align:right;"><button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button></div>
   <div fxFlex="15px" fxFlexOrder="2"></div>
+</div>-->
+<div class="ml-xs mr-xs" style="width: 100%;" 
+fxLayout="row"
+fxLayoutAlign="center">
+<h2 mat-dialog-title style="width: 30%;"> Company &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h2>
+<div style="width: 40%;"></div>
+<div style="width: 30%;text-align:right;">
+      <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button>
 </div>
+</div>
+
 
   
   <form [formGroup]="_activityMasterForm" (submit)="onSubmit()">

ng6-seed/src/app/settings/masters/component/type-of-activity/activity-list/activity-list.component.html

@@ -7,7 +7,7 @@
         <mat-progress-bar mode="indeterminate" color="accent" class="mb-1"></mat-progress-bar>
     </div> 
        
-    <div datatable>
+    <!-- <div datatable>
         <table style="border-collapse: collapse">  
                    <thead>
                       <th style="text-align:  center;">#</th>
@@ -73,7 +73,55 @@
               <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
             </mat-table>
           </div>-->
+          <div class="example-header">
+            <mat-form-field>
+              <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
+            </mat-form-field>
+          </div>
           
+          <div class="example-container mat-elevation-z8">
+          
+            <mat-table [dataSource]="dataSource" matSort >
+          
+               <ng-container matColumnDef="SerialNo">
+                   <mat-header-cell *matHeaderCellDef mat-sort-header>Sl </mat-header-cell>
+                   <mat-cell *matCellDef="let row; let i = index;"> {{i+1}} </mat-cell>
+               </ng-container>
+       
+              <ng-container matColumnDef="CityName">
+                <mat-header-cell *matHeaderCellDef mat-sort-header> City Name </mat-header-cell>
+                <mat-cell *matCellDef="let row"> {{row.name}} </mat-cell>
+              </ng-container>
+          
+              <ng-container matColumnDef="StateName">
+                <mat-header-cell *matHeaderCellDef mat-sort-header> State Name </mat-header-cell>
+                <mat-cell *matCellDef="let row"> {{row.cityname}} </mat-cell>
+              </ng-container>
+              
+              <ng-container matColumnDef="IsActive">
+                <mat-header-cell *matHeaderCellDef mat-sort-header> Is Active </mat-header-cell>
+                <mat-cell *matCellDef="let row"><!--{{row.isactive}}-->
+                   <mat-icon *ngIf="row.isactive == 1;else notactive;" class="hover-icon" matTooltip="Active" matTooltipPosition="above">done</mat-icon>
+                   <ng-template #notactive ><mat-icon class="hover-icon" matTooltip="Inactive" matTooltipPosition="above">clear</mat-icon></ng-template> 
+                </mat-cell>
+              </ng-container>
+       
+              <ng-container matColumnDef="Actions">
+                <mat-header-cell *matHeaderCellDef>   Actions </mat-header-cell>
+                <mat-cell *matCellDef="let row"> 
+                   <button mat-icon-button class="hover-icon" matTooltip="Edit" matTooltipPosition="above" (click)="editCity(row)"><mat-icon>edit</mat-icon></button>
+                   <button *ngIf="row.isactive == 1;" mat-icon-button class="hover-icon" matTooltip="Delete" matTooltipPosition="above" (click)="deleteBranch(row.city_id)"><mat-icon>delete_outline</mat-icon></button>
+                 </mat-cell>
+              </ng-container>
+          
+              <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+              <mat-row *matRowDef="let row; columns: displayedColumns;">
+              </mat-row>
+            </mat-table>
+          
+            <mat-paginator [pageSizeOptions]="[5, 10, 25, 50, 100]"></mat-paginator>
+          </div>
+ 
 
         
 </mat-card-content>

ng6-seed/src/app/settings/masters/component/type-of-activity/activity-list/activity-list.component.scss

@@ -80,7 +80,7 @@
   overflow: auto;
   max-height: 500px;
 }*/
-/* Structure */
+/* Structure *
 .example-container {
   display: flex;
   flex-direction: column;
@@ -116,3 +116,25 @@ th {
   text-align: left;
 }
 
+
+*/
+.example-container {
+  display: flex;
+  flex-direction: column;
+  min-width: 300px;
+}
+
+.example-header {  
+  min-height: 64px;
+  padding: 8px 24px 0;
+}
+
+.mat-form-field {
+  font-size: 14px;
+  width: 100%;
+}
+
+.mat-table {
+  overflow: auto;
+  max-height: 500px;
+}

ng6-seed/src/app/settings/masters/component/type-of-activity/activity-list/activity-list.component.ts

@@ -27,13 +27,20 @@ export class ActivityListComponent implements OnInit {
 
   displayedColumns = ['type_of_activity_id', 'name', 'createdon', 'fk_createdby', 'updatedon', 'fk_updatedby', 'isactive','actions'];
   
+  userData = null;
+
+  public dataLength: number;
+  public dataSource = new MatTableDataSource();
+//  displayedColumns = ['SerialNo','BranchName','CityName', 'IsActive','Actions'];
+
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
+
  
   constructor(private dialog: MatDialog,
     private _MastersService: MastersService) { }
 
-    dataSource = new UserDataSource(this._MastersService);
+  //  dataSource = new UserDataSource(this._MastersService);
    
   ngOnInit() {
     this.getActivity();

ng6-seed/src/app/settings/masters/component/uom/uom-dialog/uom-dialog.component.html

@@ -2,7 +2,7 @@
     <h2 mat-dialog-title>Unit of Measurement &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button>
     </h2>
-</div> -->
+</div>
 <div class="container"
 fxLayout
 fxLayout.xs="column"
@@ -12,7 +12,17 @@ fxLayoutGap.xs="0">
 <div class="mat-dialog-title" fxFlex fxFlexOrder="1">Unit of Measurement</div>
 <div fxFlex="20px" fxFlexOrder="3" style="text-align:right;"><button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button></div>
 <div fxFlex="15px" fxFlexOrder="2"></div>
+</div>-->
+<div class="ml-xs mr-xs" style="width: 100%;" 
+fxLayout="row"
+fxLayoutAlign="center">
+<h2 mat-dialog-title style="width: 30%;"> Unit of Measurement &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h2>
+<div style="width: 40%;"></div>
+<div style="width: 30%;text-align:right;">
+      <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button>
 </div>
+</div>
+
 
   
   <form [formGroup]="_uomForm" (submit)="onSubmit()">

ng6-seed/src/app/settings/masters/component/uom/uom-list/uom-list.component.html

@@ -7,7 +7,7 @@
         <mat-progress-bar mode="indeterminate" color="accent" class="mb-1"></mat-progress-bar>
     </div> 
           
-    <div datatable>
+    <!-- <div datatable>
         <table style="border-collapse: collapse">  
                    <thead>
                       <th style="text-align:  center;">#</th>
@@ -75,5 +75,54 @@
               <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
             </mat-table>
           </div>-->
+          <div class="example-header">
+            <mat-form-field>
+              <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
+            </mat-form-field>
+          </div>
+          
+          <div class="example-container mat-elevation-z8">
+          
+            <mat-table [dataSource]="dataSource" matSort >
+          
+               <ng-container matColumnDef="SerialNo">
+                   <mat-header-cell *matHeaderCellDef mat-sort-header>Sl </mat-header-cell>
+                   <mat-cell *matCellDef="let row; let i = index;"> {{i+1}} </mat-cell>
+               </ng-container>
+       
+              <ng-container matColumnDef="CityName">
+                <mat-header-cell *matHeaderCellDef mat-sort-header> City Name </mat-header-cell>
+                <mat-cell *matCellDef="let row"> {{row.name}} </mat-cell>
+              </ng-container>
+          
+              <ng-container matColumnDef="StateName">
+                <mat-header-cell *matHeaderCellDef mat-sort-header> State Name </mat-header-cell>
+                <mat-cell *matCellDef="let row"> {{row.cityname}} </mat-cell>
+              </ng-container>
+              
+              <ng-container matColumnDef="IsActive">
+                <mat-header-cell *matHeaderCellDef mat-sort-header> Is Active </mat-header-cell>
+                <mat-cell *matCellDef="let row"><!--{{row.isactive}}-->
+                   <mat-icon *ngIf="row.isactive == 1;else notactive;" class="hover-icon" matTooltip="Active" matTooltipPosition="above">done</mat-icon>
+                   <ng-template #notactive ><mat-icon class="hover-icon" matTooltip="Inactive" matTooltipPosition="above">clear</mat-icon></ng-template> 
+                </mat-cell>
+              </ng-container>
+       
+              <ng-container matColumnDef="Actions">
+                <mat-header-cell *matHeaderCellDef>   Actions </mat-header-cell>
+                <mat-cell *matCellDef="let row"> 
+                   <button mat-icon-button class="hover-icon" matTooltip="Edit" matTooltipPosition="above" (click)="editCity(row)"><mat-icon>edit</mat-icon></button>
+                   <button *ngIf="row.isactive == 1;" mat-icon-button class="hover-icon" matTooltip="Delete" matTooltipPosition="above" (click)="deleteBranch(row.city_id)"><mat-icon>delete_outline</mat-icon></button>
+                 </mat-cell>
+              </ng-container>
+          
+              <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+              <mat-row *matRowDef="let row; columns: displayedColumns;">
+              </mat-row>
+            </mat-table>
+          
+            <mat-paginator [pageSizeOptions]="[5, 10, 25, 50, 100]"></mat-paginator>
+          </div>
+
   
 </mat-card-content>

ng6-seed/src/app/settings/masters/component/uom/uom-list/uom-list.component.scss

@@ -81,7 +81,7 @@
   overflow: auto;
   max-height: 500px;
 }*/
-/* Structure */
+/* Structure *
 .example-container {
   display: flex;
   flex-direction: column;
@@ -115,4 +115,25 @@ table {
 
 th { 
   text-align: left;
+}
+*/
+.example-container {
+  display: flex;
+  flex-direction: column;
+  min-width: 300px;
+}
+
+.example-header {  
+  min-height: 64px;
+  padding: 8px 24px 0;
+}
+
+.mat-form-field {
+  font-size: 14px;
+  width: 100%;
+}
+
+.mat-table {
+  overflow: auto;
+  max-height: 500px;
 }

ng6-seed/src/app/settings/masters/component/uom/uom-list/uom-list.component.ts

@@ -44,10 +44,17 @@ export class UomListComponent implements OnInit {
   displayedColumns = ['uom_id','name','createdon','fk_createdby','updatedon','isactive','fk_updatedby','actions'];
   //uom_id, name, createdon, fk_createdby, updatedon, fk_updatedby, isactive
   
+  userData = null;
+
+  public dataLength: number;
+  public dataSource = new MatTableDataSource();
+//  displayedColumns = ['SerialNo','BranchName','CityName', 'IsActive','Actions'];
+
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
+
   
-  dataSource = new UserDataSource(this._MastersService);
+  //dataSource = new UserDataSource(this._MastersService);
 
 
   addUOM() {