From ca82e06ad79e467d1cf09df4c6ab81c9de7012dc Mon Sep 17 00:00:00 2001
From: Smart <kamali@watermelon.us>
Date: Thu, 20 Apr 2023 10:06:24 +0530
Subject: [PATCH] table

---
 .../appoinments-list.component.html           | 62 ++++++++++++++++---
 .../add-business/add-business.component.html  |  1 +
 .../business-list.component.html              |  2 +-
 .../business-list.component.scss              |  3 +
 .../customers-list.component.html             | 58 ++++++++++++++---
 5 files changed, 106 insertions(+), 20 deletions(-)

diff --git a/ng-seed/src/app/appoinment/appoinments/appoinments-list/appoinments-list.component.html b/ng-seed/src/app/appoinment/appoinments/appoinments-list/appoinments-list.component.html
index 042e1bc..b16b7b6 100644
--- a/ng-seed/src/app/appoinment/appoinments/appoinments-list/appoinments-list.component.html
+++ b/ng-seed/src/app/appoinment/appoinments/appoinments-list/appoinments-list.component.html
@@ -20,8 +20,51 @@
              <!-- <mat-expansion-panel>
                 <mat-expansion-panel-header > -->
                   <!-- <div class="example-container mat-elevation-z8 "> -->
+                    <table  mat-table  [dataSource]="appointmentListSource" #mytable class="my-table mat-elevation-z8 len-table">
+                      <ng-container matColumnDef="ClientName">
+                        <th mat-header-cell *matHeaderCellDef class="font-color mat-no"> Client Name</th>
+                        <td mat-cell *matCellDef="let row" class="element-spc"> {{row.customer[0].cusName || null  }}</td>
+                      </ng-container>
 
-                    <table mat-table [dataSource]="appointmentListSource" matSort *ngIf="appointmentListLength > 0" class="my-table mat-elevation-z8 len-table">
+                      <ng-container matColumnDef="datetime">
+                        <th mat-header-cell *matHeaderCellDef class="font-color th-mat"> Date and Time </th>
+                        <td mat-cell *matCellDef="let row"> {{row.appoinmentDate | date:'dd-MMM-YYYY'}}, {{row.appoinmentSlots[0] | date:'shortTime'}} </td>
+                      </ng-container>
+
+                      <ng-container matColumnDef="phoneNo">
+                        <th mat-header-cell *matHeaderCellDef class="font-color mat-mob"> Mobile no </th>
+                        <td mat-cell *matCellDef="let row" class="element-spc"> {{row.customer[0].phoneNo}} </td>
+                      </ng-container>
+
+                      <ng-container matColumnDef="email">
+                        <th mat-header-cell *matHeaderCellDef class="font-color mat-mob"> Email </th>
+                        <td mat-cell *matCellDef="let row" class="element-spc"> {{row.customer[0].email}} </td>
+                      </ng-container>
+
+                      <ng-container matColumnDef="address">
+                        <th mat-header-cell *matHeaderCellDef class="font-color">  Client Address </th>
+                        <td mat-cell *matCellDef="let row" class="element-spc"> {{row.customer[0].address_1}}, {{row.customer[0].city}}, {{row.customer[0].state}}</td>
+                      </ng-container>
+
+                      <ng-container matColumnDef="status">
+                        <th mat-header-cell *matHeaderCellDef class="font-color mat-mob"> Status </th>
+                        <td mat-cell *matCellDef="let row" class="element-spc"> {{row.status == 0 ? 'Booked':'Cancelled'}}</td>
+                      </ng-container>
+
+                      <ng-container matColumnDef="action">
+                        <th mat-header-cell *matHeaderCellDef class="font-color"> Action </th>
+                        <td mat-cell *matCellDef="let row" class="action-link"> 
+                          <a (click)="openDialog('Update',row)"><span class="material-icons edit-color">edit</span></a> 
+                          <a (click)="confirmBox('Delete',row)"><span class="material-icons edit-color2 delete">delete</span></a> 
+                        </td>
+                      </ng-container>
+
+                      <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
+                     <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+                    </table>
+
+
+                    <!-- <table mat-table [dataSource]="appointmentListSource" matSort *ngIf="appointmentListLength > 0" class="my-table mat-elevation-z8 len-table"> -->
                   
                       <!-- ID Column -->
                       <!-- <ng-container matColumnDef="id">
@@ -29,43 +72,43 @@
                         <mat-cell *matCellDef="let row; let i = index;"> {{row.id}} </mat-cell>
                       </ng-container> -->
                   
-                      <!-- Progress Column -->
+<!--                     
                       <ng-container matColumnDef="ClientName">
                         <mat-header-cell *matHeaderCellDef mat-sort-header> Client Name </mat-header-cell>
                         <mat-cell *matCellDef="let row"> {{row.customer[0].cusName || null  }}</mat-cell>
                       </ng-container> 
                   
-                      <!-- Name Column -->
+                    
                       <ng-container matColumnDef="datetime">
                         <mat-header-cell *matHeaderCellDef mat-sort-header> Date and Time </mat-header-cell>
                         <mat-cell *matCellDef="let row"> {{row.appoinmentDate | date:'dd-MMM-YYYY'}}, {{row.appoinmentSlots[0] | date:'shortTime'}} </mat-cell>
                       </ng-container> 
 
-                      <!-- Color Column -->
+                     
                       <ng-container matColumnDef="phoneNo">
                         <mat-header-cell *matHeaderCellDef mat-sort-header> Mobile No  </mat-header-cell>
                         <mat-cell *matCellDef="let row" > {{row.customer[0].phoneNo}} </mat-cell>
                       </ng-container>                  
   
-                      <!-- Color Column -->
+                     
                       <ng-container matColumnDef="email">
                         <mat-header-cell *matHeaderCellDef mat-sort-header> Email </mat-header-cell>
                         <mat-cell *matCellDef="let row" > {{row.customer[0].email}} </mat-cell>
                       </ng-container>    
 
-                      <!-- Color Column -->
+                     
                       <ng-container matColumnDef="address">
                         <mat-header-cell *matHeaderCellDef mat-sort-header> Client Address </mat-header-cell>
                         <mat-cell *matCellDef="let row">  {{row.customer[0].address_1}} <br> {{row.customer[0].city}} <br>  {{row.customer[0].state}} </mat-cell>
                       </ng-container >
 
-                       <!-- Color Column -->
+                     
                        <ng-container matColumnDef="status">
                         <mat-header-cell *matHeaderCellDef mat-sort-header> Status </mat-header-cell>
                         <mat-cell *matCellDef="let row"> <span style="font-weight: 700;" [ngStyle] = "{'color':row.status == '0'  ? '#4caf50' : '#ffd740'}">{{row.status == 0 ? 'Booked':'Cancelled'}} </span> </mat-cell>
                       </ng-container>
                   
-                      <!-- Color Column -->
+                  
                       <ng-container matColumnDef="action">
                         <mat-header-cell *matHeaderCellDef mat-sort-header> Action </mat-header-cell>
                         <mat-cell *matCellDef="let row">
@@ -77,8 +120,7 @@
                       <mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
                       <mat-row *matRowDef="let row; columns: displayedColumns;">
                       </mat-row>
-                      
-                    </table>
+                    </table> -->
                     <mat-card *ngIf="isLoading" style="display: flex; justify-content: center; align-items: center">
                       <mat-progress-spinner 
                         color="primary" 
diff --git a/ng-seed/src/app/appoinment/business/add-business/add-business.component.html b/ng-seed/src/app/appoinment/business/add-business/add-business.component.html
index b806b3c..47a1428 100644
--- a/ng-seed/src/app/appoinment/business/add-business/add-business.component.html
+++ b/ng-seed/src/app/appoinment/business/add-business/add-business.component.html
@@ -25,6 +25,7 @@
      </mat-error>
     </mat-form-field>
     <mat-form-field  appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
+      <mat-label>Phone No</mat-label>
       <input type="text" appMobileNumberPattern maxlength="10" minlength="10" placeholder="Phone No" matInput [(ngModel)]="local_data.contactNo" formControlName="contactNo">
         <mat-error *ngIf="myError('contactNo', 'required')">Contact No is required</mat-error>
       <mat-error *ngIf="myError('contactNo', 'pattern')">Invalid Contact No  </mat-error>
diff --git a/ng-seed/src/app/appoinment/business/business-list/business-list.component.html b/ng-seed/src/app/appoinment/business/business-list/business-list.component.html
index 3de8b1a..2ad63d9 100644
--- a/ng-seed/src/app/appoinment/business/business-list/business-list.component.html
+++ b/ng-seed/src/app/appoinment/business/business-list/business-list.component.html
@@ -49,7 +49,7 @@
                       </ng-container>
 
                       <ng-container matColumnDef="action">
-                        <th mat-header-cell *matHeaderCellDef class="font-color"> Action </th>
+                        <th mat-header-cell *matHeaderCellDef class="font-color mat-action"> Action </th>
                         <td mat-cell *matCellDef="let row" class="action-link"> 
                           <a (click)="openDialog('Update',row)"><span class="material-icons edit-color">edit</span></a> 
                           <a (click)="confirmBox('Delete',row)"><span class="material-icons edit-color2 delete">delete</span></a> 
diff --git a/ng-seed/src/app/appoinment/business/business-list/business-list.component.scss b/ng-seed/src/app/appoinment/business/business-list/business-list.component.scss
index fd9c48f..a14f574 100644
--- a/ng-seed/src/app/appoinment/business/business-list/business-list.component.scss
+++ b/ng-seed/src/app/appoinment/business/business-list/business-list.component.scss
@@ -123,4 +123,7 @@ img {
   }
   .mat-mob{
     width: 15%;
+  }
+  .mat-action{
+    width: 10%; 
   }
\ No newline at end of file
diff --git a/ng-seed/src/app/appoinment/customers/customers-list/customers-list.component.html b/ng-seed/src/app/appoinment/customers/customers-list/customers-list.component.html
index 34e9944..0037e8b 100644
--- a/ng-seed/src/app/appoinment/customers/customers-list/customers-list.component.html
+++ b/ng-seed/src/app/appoinment/customers/customers-list/customers-list.component.html
@@ -19,41 +19,77 @@
              <!-- <mat-expansion-panel>
                 <mat-expansion-panel-header > -->
                   <!-- <div class="example-container mat-elevation-z8 "> -->
+                    <table  mat-table  [dataSource]="customersListSource" #mytable class="my-table mat-elevation-z8 len-table">
+      
+                      <ng-container matColumnDef="id">
+                        <th mat-header-cell *matHeaderCellDef class="font-color mat-no"> S.No</th>
+                        <td mat-cell *matCellDef="let row; let i = index;" class="element-spc"> {{row.id}} </td>
+                      </ng-container>
 
-                    <table mat-table [dataSource]="customersListSource" matSort *ngIf="customersListLength > 0" class="my-table mat-elevation-z8 len-table">
-                  
-                      <!-- ID Column -->
+                      <ng-container matColumnDef="name">
+                        <th mat-header-cell *matHeaderCellDef class="font-color"> Name </th>
+                        <td mat-cell *matCellDef="let row"> {{row.cusName}} </td>
+                      </ng-container>
+
+                      <ng-container matColumnDef="email">
+                        <th mat-header-cell *matHeaderCellDef class="font-color th-mat"> Email </th>
+                        <td mat-cell *matCellDef="let row"> {{row.email}} </td>
+                      </ng-container>
+
+                      <ng-container matColumnDef="phone">
+                        <th mat-header-cell *matHeaderCellDef class="font-color mat-mob"> Mobile no </th>
+                        <td mat-cell *matCellDef="let row" class="element-spc"> {{row.phoneNo}} </td>
+                      </ng-container>
+
+                      <ng-container matColumnDef="address">
+                        <th mat-header-cell *matHeaderCellDef class="font-color"> Address </th>
+                        <td mat-cell *matCellDef="let row" class="element-spc"> {{row.address_1}}, {{row.city}}, {{row.state}} </td>
+                      </ng-container>
+
+                      <ng-container matColumnDef="action">
+                        <th mat-header-cell *matHeaderCellDef class="font-color"> Action </th>
+                        <td mat-cell *matCellDef="let row" class="action-link"> 
+                          <a (click)="openDialog('Update',row)"><span class="material-icons edit-color">edit</span></a> 
+                          <a (click)="confirmBox('Delete',row)"><span class="material-icons edit-color2 delete">delete</span></a> 
+                        </td>
+                      </ng-container>
+                      <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
+                     <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+                    </table>
+
+
+
+                    <!-- <table mat-table [dataSource]="customersListSource" matSort *ngIf="customersListLength > 0" class="my-table mat-elevation-z8 len-table">
                       <ng-container matColumnDef="id">
                         <mat-header-cell *matHeaderCellDef mat-sort-header> S.No </mat-header-cell>
                         <mat-cell *matCellDef="let row; let i = index;"> {{row.id}} </mat-cell>
                       </ng-container>
                   
-                      <!-- Progress Column -->
+                    
                       <ng-container matColumnDef="name">
                         <mat-header-cell *matHeaderCellDef mat-sort-header>Name </mat-header-cell>
                         <mat-cell *matCellDef="let row"> {{row.cusName}}</mat-cell>
                       </ng-container> 
                   
-                      <!-- Name Column -->
+                   
                       <ng-container matColumnDef="email">
                         <mat-header-cell *matHeaderCellDef mat-sort-header> Email </mat-header-cell>
                         <mat-cell *matCellDef="let row"> {{row.email}} </mat-cell>
                       </ng-container> 
 
-                      <!-- Color Column -->
                       <ng-container matColumnDef="phone">
                         <mat-header-cell *matHeaderCellDef mat-sort-header> Mobile No  </mat-header-cell>
                         <mat-cell *matCellDef="let row" > {{row.phoneNo}} </mat-cell>
                       </ng-container>                 
      
 
-                      <!-- Color Column -->
+                    
                       <ng-container matColumnDef="address">
                         <mat-header-cell *matHeaderCellDef mat-sort-header> Address </mat-header-cell>
                         <mat-cell *matCellDef="let row">  {{row.address_1}} <br> {{row.city}} <br>  {{row.state}} </mat-cell>
                       </ng-container > 
                   
-                      <!-- Color Column -->
+                     
                       <ng-container matColumnDef="action">
                         <mat-header-cell *matHeaderCellDef mat-sort-header> Action </mat-header-cell>
                         <mat-cell *matCellDef="let row">
@@ -66,7 +102,11 @@
                       <mat-row *matRowDef="let row; columns: displayedColumns;">
                       </mat-row>
                       
-                    </table>
+                    </table> -->
+
+
+
+
                     <mat-card *ngIf="isLoading" style="display: flex; justify-content: center; align-items: center">
                       <mat-progress-spinner 
                         color="primary"