ui-changes

ng-seed/src/app/appoinment/appoinments/appoinments-list/appoinments-list.component.html

@@ -14,6 +14,7 @@
             <mat-accordion>
                <mat-expansion-panel>
                   <mat-expansion-panel-header >
+                     <div class="example-container mat-elevation-z8 ">
                      <table mat-table [dataSource]="dataSource" #mytable class="my-table mat-elevation-z8 len-table">
                         <!-- <ng-container matColumnDef="id">
                         <th mat-header-cell *matHeaderCellDef class="font-color"> S.NO </th>
@@ -25,7 +26,7 @@
                         </ng-container> -->
                      <ng-container matColumnDef="time">
                         <th mat-header-cell *matHeaderCellDef class="font-color">Time </th>
-                        <td mat-cell *matCellDef="let element"> <div class="label">{{element.date}}</div> <br> {{element.time}}  </td>
+                        <td mat-cell *matCellDef="let element"> <div class="label">{{element.date | date:'mediumDate'}}</div> <br> {{element.time}}  </td>
                      </ng-container>
                      <ng-container matColumnDef="booking">
                         <th mat-header-cell *matHeaderCellDef class="font-color"> Booking ID </th>
@@ -62,9 +63,12 @@
                            <a (click)="confirmBox('Delete',element)"><span class="material-icons edit-color delete">delete</span></a> 
                         </td>
                      </ng-container>
-                     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+                     <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
                      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+                     <!-- <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+                     <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> -->
                      </table>
+                     </div>
                   </mat-expansion-panel-header>
                </mat-expansion-panel>
             </mat-accordion>

ng-seed/src/app/appoinment/appoinments/appoinments-list/appoinments-list.component.scss

@@ -1,5 +1,5 @@
 .my-table{
-    width: 120%;
+    width: 100%;
 }
 .button{
     float: right;
@@ -20,7 +20,7 @@ th.mat-header-cell, td.mat-cell, td.mat-footer-cell {
 }
 ::ng-deep .body-container {
     overflow-x: hidden;
-    overflow-y: auto;
+    overflow-y: hidden;
     background-color: #ffff;
 }
 ::ng-deep  .mat-expansion-panel:not([class*='mat-elevation-z']) {
@@ -60,7 +60,7 @@ img {
 }
 
 ::ng-deep .mat-content {
-    display: flex;
+    display: block!important;
     flex: 1;
     /* flex-direction: row; */
     /* overflow: hidden; */
@@ -92,3 +92,10 @@ img {
 ::ng-deep  body.swal2-height-auto {
     height: 100% !important
   }
+  .example-container {
+    display: block;
+    height: 365px;
+    /* overflow: auto; */
+    overflow-x: hidden;
+    overflow-y: auto;
+  }

ng-seed/src/app/appoinment/appoinments/dialog-box/dialog-box.component.scss

@@ -15,7 +15,7 @@
      position: inherit; 
      bottom: 0px; 
      right: 0px; 
-     width: 350px; 
+     width: 100%; 
     z-index: 9;
      top: 58px; 
 }
@@ -47,8 +47,6 @@
     }
 }
 
-//25/02/2023
-
 .field{
     display: flex;
 }
@@ -71,7 +69,7 @@
     width: 175%!important;
 }
 .mate{
-    width: 27%!important;
+    width: 18%!important;
 }
 .date-marge{
     margin-left: 6rem;
@@ -82,3 +80,10 @@
 ::ng-deep .swal2-height-auto {
     // height: auto!important;
 }
+::ng-deep .mat-dialog-content {
+    max-height: 75vh!important;
+    overflow: hidden!important;
+}
+::ng-deep .mat-dialog-container{
+    overflow: hidden!important;
+}

ng-seed/src/app/appoinment/business/business-list/business-list.component.html

@@ -11,6 +11,7 @@
           <mat-accordion>
              <mat-expansion-panel>
                 <mat-expansion-panel-header >
+                  <div class="example-container mat-elevation-z8 ">
                   <table mat-table [dataSource]="dataSource" #mytable class="my-table mat-elevation-z8 len-table">
     
                     <ng-container matColumnDef="id">
@@ -60,9 +61,10 @@
                         <a (click)="confirmBox('Delete',element)"><span class="material-icons edit-color delete">delete</span></a> 
                       </td>
                     </ng-container>
-                    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+                    <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
                      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
                   </table>
+                  </div>
                   </mat-expansion-panel-header>
                   </mat-expansion-panel>
                   </mat-accordion>

ng-seed/src/app/appoinment/business/business-list/business-list.component.scss

@@ -1,5 +1,5 @@
 .my-table{
-    width: 120%;
+    width: 100%;
 }
 .button{
     float: right;
@@ -20,7 +20,7 @@ th.mat-header-cell, td.mat-cell, td.mat-footer-cell {
 }
 ::ng-deep .body-container {
     overflow-x: hidden;
-    overflow-y: auto;
+    overflow-y: hidden;
     background-color: #ffff;
 }
 ::ng-deep  .mat-expansion-panel:not([class*='mat-elevation-z']) {
@@ -60,7 +60,7 @@ img {
 }
 
 ::ng-deep .mat-content {
-    display: flex;
+    display: block!important;
     flex: 1;
     /* flex-direction: row; */
     /* overflow: hidden; */
@@ -76,3 +76,10 @@ img {
 ::ng-deep  body.swal2-height-auto {
     height: 100% !important
   }
+  .example-container {
+    display: block;
+    height: 348px;
+    /* overflow: auto; */
+    overflow-x: hidden;
+    overflow-y: auto;
+  }

ng-seed/src/app/appoinment/business/business-list/business-list.component.ts

@@ -84,7 +84,7 @@ export class BusinessListComponent implements OnInit {
   openDialog(action,obj) {
     obj.action = action;
     const dialogRef = this.dialog.open(DialogBoxComponent, {
-      // width: '30%',
+      width: '32%',
       height: '100%',
       // maxWidth: '38vw',
       position: { right: '0' },

ng-seed/src/app/appoinment/business/dialog-box/dialog-box.component.scss

@@ -9,7 +9,8 @@
     margin-bottom: 1rem;
     background-color: #ffff;
     margin-top: -1rem;
-    margin-left: 6rem;
+    // margin-left: 6rem;
+    float: right;
 }
 ::ng-deep .mat-card.settings-panel {
      position: inherit; 
@@ -46,3 +47,10 @@
         width: 90%!important;
     }
 }
+::ng-deep .mat-dialog-content {
+    max-height: 75vh!important;
+    overflow: hidden!important;
+}
+::ng-deep .mat-dialog-container{
+    overflow: hidden!important;
+}

ng-seed/src/app/appoinment/calendars/calendar-list/calendar-list.component.ts

@@ -105,7 +105,7 @@ export class CalendarListComponent implements OnInit {
     draggable: true
   }];
 
-  activeDayIsOpen = true;
+  activeDayIsOpen = false;
   table: any;
 
   constructor(public dialog: MatDialog) {
@@ -171,6 +171,8 @@ export class CalendarListComponent implements OnInit {
 
   dayClicked({date, events}: {date: Date, events: CalendarEvent[]}): void {
 console.log(date, events)
+this.openDialog('Add',  {date:date})
+// this.openDialog('calender',  {date:date})
 this.addEvent(date)
     if (isSameMonth(date, this.viewDate)) {
       if (
@@ -202,9 +204,15 @@ this.addEvent(date)
     });
   }
   openDialog(action,obj) {
+    console.log(obj, action)
+    if(action=='calender'){
+      
+    }else{
       obj.action = action;
+    }
+   
     const dialogRef = this.dialog.open(DialogBoxComponent, {
-      width: '45%',
+      width: '40%',
       height: '100%',
       // maxWidth: '38vw',
       position: { right: '0' },

ng-seed/src/app/appoinment/customers/customers-list/customers-list.component.html

@@ -11,6 +11,7 @@
           <mat-accordion>
              <mat-expansion-panel>
                 <mat-expansion-panel-header >
+                  <div class="example-container mat-elevation-z8 ">
                   <table mat-table [dataSource]="dataSource" #mytable class="my-table mat-elevation-z8 len-table">
     
                     <ng-container matColumnDef="id">
@@ -65,9 +66,10 @@
                         <a (click)="confirmBox('Delete',element)"><span class="material-icons edit-color delete">delete</span></a> 
                       </td>
                     </ng-container>
-                    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+                    <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
                     <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
                   </table>
+                  </div>
                   </mat-expansion-panel-header>
                   </mat-expansion-panel>
                   </mat-accordion>

ng-seed/src/app/appoinment/customers/customers-list/customers-list.component.scss

@@ -1,5 +1,5 @@
 .my-table{
-    width: 120%;
+    width: 100%;
 }
 .button{
     float: right;
@@ -20,7 +20,7 @@ th.mat-header-cell, td.mat-cell, td.mat-footer-cell {
 }
 ::ng-deep .body-container {
     overflow-x: hidden;
-    overflow-y: auto;
+    overflow-y: hidden;
     background-color: #ffff;
 }
 ::ng-deep  .mat-expansion-panel:not([class*='mat-elevation-z']) {
@@ -60,7 +60,7 @@ img {
 }
 
 ::ng-deep .mat-content {
-    display: flex;
+    display: block!important;
     flex: 1;
     /* flex-direction: row; */
     /* overflow: hidden; */
@@ -74,7 +74,7 @@ img {
     margin: 0 15px!important;
 }
 mat-paginator{
-    margin-top: -8px;
+    margin-top: -5px;
 }
 ::ng-deep .mat-paginator {
     margin-top: -10px!important;
@@ -82,3 +82,10 @@ mat-paginator{
 ::ng-deep  body.swal2-height-auto {
     height: 100% !important
   }
+  .example-container {
+    display: block;
+    height: 365px;
+    /* overflow: auto; */
+    overflow-x: hidden;
+    overflow-y: auto;
+  }

ng-seed/src/app/appoinment/customers/dialog-box/dialog-box.component.scss

@@ -9,7 +9,8 @@
     margin-bottom: 1rem;
     background-color: #ffff;
     margin-top: -1rem;
-    margin-left: 6rem;
+    // margin-left: 6rem;
+    float: right;
 }
 ::ng-deep .mat-card.settings-panel {
      position: inherit; 
@@ -46,3 +47,8 @@
         width: 90%!important;
     }
 }
+::ng-deep .mat-dialog-content {
+    max-height: 80vh!important;
+    overflow: hidden!important;
+
+}

ng-seed/src/app/appoinment/user/user-dialog-box/user-dialog-box.component.scss

@@ -9,7 +9,8 @@
     margin-bottom: 1rem;
     background-color: #ffff;
     margin-top: -1rem;
-    margin-left: 6rem;
+    // margin-left: 6rem;
+    float: right;
 }
 ::ng-deep .mat-card.settings-panel {
      position: inherit; 
@@ -23,4 +24,10 @@
 ::ng-deep body .mat-card {
     box-shadow:none!important; 
 }
-
+::ng-deep .mat-dialog-content {
+    max-height: 75vh!important;
+    overflow: hidden!important;
+}
+::ng-deep .mat-dialog-container{
+    overflow: hidden!important;
+}

ng-seed/src/app/appoinment/user/user-list/user-list.component.html

@@ -1,3 +1,11 @@
+<!-- <mat-card class="mb-2 example-card" >
+  <mat-card-title-group>
+  <img width="60"  src="assets/images/curve.jpg">
+  <mat-card-title></mat-card-title>
+  <mat-card-subtitle>Dr. Saravanan</mat-card-subtitle>
+  </mat-card-title-group>
+</mat-card> -->
+
 <h3>Users Details</h3>
 <mat-form-field>
     <mat-label>Filter</mat-label>
@@ -11,6 +19,7 @@
             <mat-accordion>
                <mat-expansion-panel>
                   <mat-expansion-panel-header >
+                    <div class="example-container  ">
                     <table mat-table [dataSource]="dataSource" #mytable class="my-table mat-elevation-z8 len-table">
       
                       <ng-container matColumnDef="id">
@@ -70,9 +79,10 @@
                           <a (click)="confirmBox('Delete',element)"><span class="material-icons edit-color delete">delete</span></a> 
                         </td>
                       </ng-container>
-                      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+                      <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
                      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
                     </table>
+                    </div>
                     </mat-expansion-panel-header>
                     </mat-expansion-panel>
                     </mat-accordion>

ng-seed/src/app/appoinment/user/user-list/user-list.component.scss

@@ -1,5 +1,5 @@
 .my-table{
-    width: 120%;
+    width: 100%;
 }
 .button{
     float: right;
@@ -20,7 +20,7 @@ th.mat-header-cell, td.mat-cell, td.mat-footer-cell {
 }
 ::ng-deep .body-container {
     overflow-x: hidden;
-    overflow-y: auto;
+    overflow-y: hidden;
     background-color: #ffff;
 }
 ::ng-deep  .mat-expansion-panel:not([class*='mat-elevation-z']) {
@@ -60,7 +60,7 @@ img {
 }
 
 ::ng-deep .mat-content {
-    display: flex;
+    display: block!important;
     flex: 1;
     /* flex-direction: row; */
     /* overflow: hidden; */
@@ -68,7 +68,7 @@ img {
     overflow-y: auto!important;
 }
 ::ng-deep .mat-paginator {
-    margin-top: -15px!important;
+    margin-top: -22px!important;
 }
 ::ng-deep .mat-select-arrow {
     margin: 0 15px!important;
@@ -76,3 +76,13 @@ img {
 ::ng-deep  body.swal2-height-auto {
     height: 100% !important
   }
+  .example-container {
+    display: block;
+    height: 300px;
+    /* overflow: auto; */
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+  .mat-elevation-z8 {
+    box-shadow: none!important;
+}