business and user details bugs fixed

ng-seed/package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "optima",
   "version": "3.0.0",
-  "lockfileVersion": 2,
+  "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
     "@agm/core": {
@@ -6203,7 +6203,6 @@
       "version": "0.1.8",
       "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz",
       "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==",
-      "devOptional": true,
       "requires": {
         "prr": "~1.0.1"
       }
@@ -7182,8 +7181,7 @@
     "graceful-fs": {
       "version": "4.2.10",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
-      "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==",
+      "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA=="
-      "devOptional": true
     },
     "hammerjs": {
       "version": "2.0.8",
@@ -9015,7 +9013,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
       "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
-      "devOptional": true,
       "requires": {
         "pify": "^4.0.1",
         "semver": "^5.6.0"
@@ -9253,8 +9250,7 @@
     "mime": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
-      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
+      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg=="
-      "devOptional": true
     },
     "mime-db": {
       "version": "1.52.0",
@@ -9716,6 +9712,14 @@
         }
       }
     },
+    "ngx-spinner": {
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/ngx-spinner/-/ngx-spinner-10.0.1.tgz",
+      "integrity": "sha512-3fkzS4t+oKg1jobUmWxeGD3zLymdIOMijib517tgrDnW4Q2fKKwZPVCfTR5ztm9G0/l9G/DRoOoBcHPPupUBdg==",
+      "requires": {
+        "tslib": "^2.0.0"
+      }
+    },
     "nice-try": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
@@ -10845,8 +10849,7 @@
     "pify": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
-      "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
+      "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g=="
-      "devOptional": true
     },
     "pinkie": {
       "version": "2.0.4",
@@ -11717,8 +11720,7 @@
     "prr": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
-      "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==",
+      "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw=="
-      "devOptional": true
     },
     "psl": {
       "version": "1.9.0",
@@ -13733,15 +13735,6 @@
         }
       }
     },
-    "string_decoder": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
-      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
-      "dev": true,
-      "requires": {
-        "safe-buffer": "~5.2.0"
-      }
-    },
     "string-width": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
@@ -13752,6 +13745,15 @@
         "strip-ansi": "^6.0.1"
       }
     },
+    "string_decoder": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+      "dev": true,
+      "requires": {
+        "safe-buffer": "~5.2.0"
+      }
+    },
     "strip-ansi": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
@@ -15761,15 +15763,6 @@
           "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
           "dev": true
         },
-        "string_decoder": {
-          "version": "1.1.1",
-          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
-          "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
-          "dev": true,
-          "requires": {
-            "safe-buffer": "~5.1.0"
-          }
-        },
         "string-width": {
           "version": "3.1.0",
           "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
@@ -15798,6 +15791,15 @@
             }
           }
         },
+        "string_decoder": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+          "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+          "dev": true,
+          "requires": {
+            "safe-buffer": "~5.1.0"
+          }
+        },
         "strip-ansi": {
           "version": "3.0.1",
           "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",

ng-seed/package.json

@@ -53,6 +53,7 @@
     "ngx-perfect-scrollbar": "10.1.0",
     "ngx-scrollbar": "^7.5.6",
     "ngx-sortablejs": "^3.1.4",
+    "ngx-spinner": "^10.0.1",
     "ornamentum": "^8.1.4",
     "perfect-scrollbar": "^1.5.0",
     "primeflex": "^3.3.0",

ng-seed/src/app/app.component.html

@@ -1,3 +1,5 @@
 <h1>
   {{title}}
 </h1>
+
+

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

@@ -13,17 +13,20 @@
     </mat-form-field>  
   
     <mat-form-field  appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
-      <input placeholder=" Email" matInput [(ngModel)]="local_data.email" formControlName="email">
+      <input type="email" placeholder=" Email" matInput [(ngModel)]="local_data.email" formControlName="email">
       <mat-error *ngIf="!form.get('email')?.errors?.required && (form.get('email')?.errors?.pattern)">
         Please enter a valid email address
      </mat-error>
+     <mat-error *ngIf="myError('email', 'required')">email is required</mat-error>
      <mat-error *ngIf="form.get('email')?.invalid && (form.get('email')?.dirty || form.get('email')?.touched) && form.get('email')?.errors?.required">
         Email is required
      </mat-error>
     </mat-form-field>
     <mat-form-field  appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
-      <input placeholder="Phone No" matInput [(ngModel)]="local_data.contactNo" formControlName="contactNo">
+      <input   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', 'required')">Contact No is required</mat-error>
+      <mat-error *ngIf="myError('contactNo', 'pattern')">Invalid Contact No  </mat-error>
+      <mat-error *ngIf="myError('contactNo', 'minlength')"> Contact No must be at least 10 characters</mat-error>
       <mat-error *ngIf="myError('contactNo', 'maxlength')">Limit exceed</mat-error>
     </mat-form-field> 
     <mat-form-field  appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
@@ -46,8 +49,8 @@
       <mat-error *ngIf="myError('workingHrsJson', 'required')">Working Hrs is required</mat-error>
       <mat-error *ngIf="myError('workingHrsJson', 'maxlength')">Limit exceed</mat-error>
     </mat-form-field>  -->
-    <img *ngIf="imageViewStatus == true" class="image mb-2" [src]="url" height="50" width="50">
+    <img *ngIf="imageViewStatus == true" class="image mb-2" [src]="url" height="50" width="50"><br />
-    <input type='file' (change)="onSelectFile($event)" formControlName="logo">  
+    <input type='file'accept="image/*" data-max-size="2048" style="    width: 35%;" (change)="onSelectFile($event)" formControlName="logo">  
     <mat-checkbox class="example-margin mt-2" formControlName="admin_checked" (change)="showOptions($event)">Add Admin</mat-checkbox> 
   
   </div>

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

@@ -59,4 +59,20 @@
 }
 :ng-deep .ng-scroll-viewport-wrapper{
     right: -25px !important;
-}
+}
+
+input[type=file]::file-selector-button {
+    margin-right: 20px;
+    border: none;
+    background: #084cdf;
+    padding: 10px 20px;
+    border-radius: 10px;
+
+    color: #fff;
+    cursor: pointer;
+    transition: background .2s ease-in-out;
+  }
+  
+  input[type=file]::file-selector-button:hover {
+    background: #0d45a5;
+  }

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

@@ -77,8 +77,8 @@ export class AddBusinessComponent implements OnInit {
   ngOnInit() {
     let userrole = localStorage.getItem('user_role')
     this.form = new FormGroup({
-    admin_checked: new FormControl('', [Validators.required]),
+    admin_checked: new FormControl('',null),
-    workingHrsJson: new FormControl('', [Validators.required]),
+     
     logo: new FormControl('', null),
     busName: new FormControl('', [Validators.required, Validators.maxLength(20)]),
     address: new FormControl('', [Validators.required, Validators.maxLength(50)]),
@@ -87,7 +87,7 @@ export class AddBusinessComponent implements OnInit {
     email: new FormControl('', [Validators.required, Validators.email,Validators.pattern(
       '[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,63}$',
     ),]),
-    contactNo: new FormControl('', [Validators.required, Validators.maxLength(10)]),
+    contactNo: new FormControl('', [Validators.required,  Validators.minLength(10),Validators.maxLength(10),  Validators.pattern('^[0-9]{10}$')]),
     createdBy:new FormControl(userrole,[Validators.required]),
     });
     
@@ -101,7 +101,11 @@ export class AddBusinessComponent implements OnInit {
     submit(){
         let tmp = this.form.value
         tmp.id = this.local_data.id
-     console.log(tmp)
+     console.log(tmp,this.form)
+     if (!this.form.valid) {
+      console.log("check")
+      return;
+  }
       //  this.formData.append('image', this.currentFileUpload);
         // console.log(this.formData.getAll('image'));
         if(this.action == 'Update'){

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

@@ -1,24 +1,25 @@
 <h3>Business Details</h3>
-<mat-form-field>
+<mat-form-field style="width:30%">
   <mat-label>Filter</mat-label>
-  <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Ex. Mia" #input>
+  <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Type Here" #input>
 </mat-form-field>
 <button mat-button (click)="openDialog('Add',{})"   class="button">Add Business</button>
+    <!-- <div class="example-container mat-elevation-z8 "> -->
 <mat-sidenav-container class="app-inner background-none shadow-none mail-db">
   <div class="main-content" fxLayout="row" fxLayoutAlign="center start">
     <div fxFlex.gt-sm="90" fxFlex.gt-xs="95" fxFlex="100">
        <div class="messages-list material fullscreen">
           <mat-accordion>
-             <mat-expansion-panel>
+             <!-- <mat-expansion-panel>
-                <mat-expansion-panel-header >
+                <mat-expansion-panel-header > -->
-                  <div class="example-container mat-elevation-z8 ">
+                  <!-- <div class="example-container mat-elevation-z8 "> -->
 
                     <table mat-table [dataSource]="businessListSource" matSort *ngIf="businessListLength > 0" class="my-table mat-elevation-z8 len-table">
                   
                       <!-- ID Column -->
                       <ng-container matColumnDef="id">
                         <mat-header-cell *matHeaderCellDef mat-sort-header> S.No </mat-header-cell>
-                        <mat-cell *matCellDef="let row; let i = index;"> {{i+1}} </mat-cell>
+                        <mat-cell *matCellDef="let row; let i = index;"> {{row.id}} </mat-cell>
                       </ng-container>
                   
                       <!-- Progress Column -->
@@ -55,25 +56,26 @@
                       <ng-container matColumnDef="action">
                         <mat-header-cell *matHeaderCellDef mat-sort-header> Action </mat-header-cell>
                         <mat-cell *matCellDef="let row">
-                          <a (click)="openDialog('Update',element)"><span class="material-icons edit-color">edit</span></a> 
+                          <a (click)="openDialog('Update',row)"><span class="material-icons edit-color">edit</span></a> 
-                          <a (click)="confirmBox('Delete',element)"><span class="material-icons edit-color delete">delete</span></a>   
+                          <a (click)="confirmBox('Delete',row)"><span class="material-icons edit-color delete">delete</span></a>   
                         </mat-cell>
                       </ng-container>
                   
                       <mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
                       <mat-row *matRowDef="let row; columns: displayedColumns;">
                       </mat-row>
+                      
                     </table>
-                  
+                    <div [hidden]="recordStatus">
+                      <mat-paginator  #paginator class="mat-elevation-z1" [length]="businessListLength" [pageIndex]="pageIndex" [pageSize]="pageSize"
+                      [pageSizeOptions]="[5, 10, 25,50, 100]" (page)="pageEvent = $event; pageChange($event)" showFirstLastButtons>
+                    </mat-paginator>      
                   </div>
-                  </mat-expansion-panel-header>
+                  <!-- </div> -->
-                  </mat-expansion-panel>
+                  <!-- </mat-expansion-panel-header>
+                  </mat-expansion-panel> -->
                   </mat-accordion>
-                  <div [hidden]="recordStatus">
+                 
-                    <mat-paginator  #paginator class="mat-elevation-z1" [length]="businessListLength" [pageIndex]="pageIndex" [pageSize]="pageSize"
-                    [pageSizeOptions]="[5, 10, 25,50, 100]" (page)="pageEvent = $event; pageChange($event)" showFirstLastButtons>
-                  </mat-paginator>      
-                </div>
                 <mat-card-content *ngIf="recordStatus">
                       <h5 align="center" style="font-weight: bold;
                       color: brown;">No Data Available</h5>

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

@@ -27,8 +27,8 @@ th.mat-header-cell, td.mat-cell, td.mat-footer-cell {
     box-shadow: none!important;
 }
 img {
-    width: 30px;
+    width: 40px;
-    height: 30px;
+    height: 40px;
     border-radius: 50%;
   }
   .fullscreen{
@@ -82,4 +82,31 @@ img {
     /* overflow: auto; */
     overflow-x: hidden;
     overflow-y: auto;
-  }
+  }
+
+  .mat-table {
+    overflow: auto;
+    max-height: 500px;
+  }
+
+  .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;
+  }
+  

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

@@ -24,6 +24,7 @@ export class BusinessListComponent implements OnInit {
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
   recordStatus: boolean;
+ 
   @ViewChild(MatTable,{static:true}) table: MatTable<any>
   // pagination variable details
   length = 5;

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

@@ -2,16 +2,17 @@
   <h5 mat-dialog-title> <strong>{{action}}  Users</strong> 
       <button mat-icon-button  type="button" matTooltip="Close" class="button" matTooltipPosition="above" (click)="close()"
       ><mat-icon>close</mat-icon></button></h5>
-      <ng-scrollbar class="scrollHV">
+
     <div mat-dialog-content class="my-table">
       <form [formGroup]="form" (ngSubmit)="submit()">
-        <mat-form-field  appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
+        <ng-scrollbar class="scrollHV">
+        <!-- <mat-form-field  appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
           <mat-label>Business</mat-label>
           <input placeholder="Name" matInput formControlName="businessselect" >
           <mat-error *ngIf="myError('businessselect', 'required')">Username is required</mat-error>
           <mat-error *ngIf="myError('businessselect', 'maxlength')">Limit exceed</mat-error>
-        </mat-form-field>
+        </mat-form-field> -->
-        <!-- <mat-form-field appearance="outline" class="mat-pane">
+        <mat-form-field appearance="outline" class="mat-pane">
           <mat-label>Business</mat-label>
           <mat-select placeholder="Select Business" formControlName="businessselect" required>
               <mat-option>--</mat-option>
@@ -19,9 +20,9 @@
                   {{business.busName}}
               </mat-option>
           </mat-select>
-          <mat-error *ngIf="myError('businessselect', 'required')">role is required</mat-error>
+          <mat-error *ngIf="myError('businessselect', 'required')">business is required</mat-error>
           
-      </mat-form-field> -->
+      </mat-form-field>
         <mat-form-field  appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane" [readonly]="true">
           <mat-label>Role</mat-label>
           <mat-select placeholder="Select Role" formControlName="role" required>
@@ -51,8 +52,10 @@
       </mat-form-field>
       <mat-form-field appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
         <mat-label>Phone No</mat-label>
-        <input matInput type="text" placeholder="Enter Phone No" formControlName="contactNo" id="contactNo">
+        <input matInput  placeholder="Enter Phone No" formControlName="contactNo" id="contactNo">
         <mat-error *ngIf="myError('contactNo', 'required')">Contact No is required</mat-error>
+        <mat-error *ngIf="myError('contactNo', 'pattern')">Invalid Contact No  </mat-error>
+        <mat-error *ngIf="myError('contactNo', 'minlength')"> Contact No must be at least 10 characters</mat-error>
         <mat-error *ngIf="myError('contactNo', 'maxlength')">Limit exceed</mat-error>
      </mat-form-field>
       <mat-form-field  appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
@@ -62,20 +65,21 @@
         <mat-error *ngIf="myError('password', 'maxlength')">Limit exceed</mat-error>
       </mat-form-field>  
       <img *ngIf="imageViewStatus == true" class="image mb-2" [src]="url" height="50" width="50">
-      <input type='file' (change)="onSelectFile($event)" formControlName="logo">  
+      <input type='file'accept="image/*" data-max-size="2048" style="    width: 35%;"  (change)="onSelectFile($event)" formControlName="logo">  
     
       <!-- <mat-form-field  appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
         <input placeholder="ConfirmPassword" matInput  formControlName="confirmPassword">
         <mat-error *ngIf="myError('confirmPassword', 'required')">confirmPassword is required</mat-error>
         <mat-error *ngIf="myError('confirmPassword', 'maxlength')">Limit exceed</mat-error>
       </mat-form-field>    -->
+    </ng-scrollbar>
       <div mat-dialog-actions>
         <button mat-button type="submit" class="mat-green"  mat-raised-button >{{action}}</button>
         <button mat-button (click)="closeDialog()" >Cancel</button>
       </div>
     </form>
     </div>
-  </ng-scrollbar>
+
     <ng-template #elseTemplate>
       Sure to delete <b>{{local_data.name}}</b>?
     </ng-template><br>

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

@@ -34,4 +34,21 @@
 }
 .scrollHV {
     height: calc(100vh - 190px);
-}
+}
+
+
+input[type=file]::file-selector-button {
+    margin-right: 20px;
+    border: none;
+    background: #084cdf;
+    padding: 10px 20px;
+    border-radius: 10px;
+
+    color: #fff;
+    cursor: pointer;
+    transition: background .2s ease-in-out;
+  }
+  
+  input[type=file]::file-selector-button:hover {
+    background: #0d45a5;
+  }

ng-seed/src/app/appoinment/user/add-user/add-user.component.ts

@@ -3,6 +3,7 @@ import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms'
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { Router } from '@angular/router';
 import { BusinessService } from 'app/appoinment/business/business-service/business.service';
+ 
 export interface UsersData {
   userName: string;
   id: number;
@@ -31,6 +32,7 @@ export class AddUserComponent implements OnInit {
     @Optional() @Inject(MAT_DIALOG_DATA) public data: UsersData,public _bus:BusinessService) {
     console.log(data);
     this.local_data = {...data};
+   
     this.action = this.local_data.action;
     this.formData= new FormData();
     this.getBusinessList()
@@ -43,9 +45,12 @@ export class AddUserComponent implements OnInit {
             let businessFilter = res['data'].filter(val => val.busName)
             this.businessList = businessFilter; 
             let data = localStorage.getItem('busName')
-            this.form.controls['businessselect'].setValue(data)
+          //  this.form.controls['businessselect'].setValue(data)
             console.log(this.businessList)   
             console.log(this.form['value'].businessselect)    
+            this.local_data.businessselect =   this.local_data.busId
+ 
+            this.form.patchValue(this.local_data)
           } 
         }
         // , error => {this.errorMessage = <any> error});
@@ -74,7 +79,8 @@ export class AddUserComponent implements OnInit {
     businessselect: new FormControl('',[Validators.required]),
     role: new FormControl('', [Validators.required, Validators.maxLength(20)]),
     userName: new FormControl('', [Validators.required, Validators.maxLength(20)]),
-    contactNo: new FormControl('', [Validators.required, Validators.maxLength(20)]),
+    // contactNo: new FormControl('', [Validators.required, Validators.maxLength(20)]),
+    contactNo: new FormControl('', [Validators.required,  Validators.minLength(10),Validators.maxLength(10),  Validators.pattern('^[0-9]{10}$')]),
     // lastName: new FormControl('', [Validators.required, Validators.maxLength(20)]),
     email: new FormControl('', [Validators.required, Validators.email,Validators.pattern(
       '[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,63}$',
@@ -84,7 +90,13 @@ export class AddUserComponent implements OnInit {
     // confirmPassword: new FormControl('', [Validators.required, Validators.minLength(6)]),
     createdBy:new FormControl(userrole,[Validators.required]),
     });
+    console.log(this.local_data);
+    this.local_data.businessselect =   this.local_data.busId
+ 
     this.form.patchValue(this.local_data)
+    setTimeout(() => {
+      this.form.patchValue(this.local_data)
+    }, 500);
     }
     public myError = (controlName: string, errorName: string) =>{
       return this.form.controls[controlName].hasError(errorName);
@@ -113,6 +125,9 @@ export class AddUserComponent implements OnInit {
       }
       submit(){
         console.log(this.form.value);
+        if (!this.form.valid) {
+          return;
+      }
         let tmp = this.form.value
             tmp.id = this.local_data.id
            console.log(this.formData.getAll('image'));

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

@@ -1,26 +1,43 @@
-<!-- <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-form-field style="width:30%">
-    <mat-label>Filter</mat-label>
+  <mat-label>Filter</mat-label>
-    <input matInput (keyup)="applyFilter($event)" placeholder="Ex. Mia" #input>
+  <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Type Here" #input>
-  </mat-form-field>
+</mat-form-field>
+<mat-form-field appearance="outline"  style="width:20%;margin-left: 5%;">
+  <mat-label>Business</mat-label>
+  <mat-select placeholder="Select Business" formControlName="businessselect" required>
+      <mat-option  (click)="applyFilter(null)">All</mat-option>
+      <mat-option *ngFor="let business of businessList"  (click)="applyFilter(business.busName)" [value]="business.busId">
+          {{business.busName}}
+      </mat-option>
+  </mat-select>
+  
+  
+</mat-form-field>
+<mat-form-field appearance="outline"  style="width:20%;margin-left: 5%;">
+  <mat-label>Role</mat-label>
+  <mat-select placeholder="Select Business" formControlName="businessselect" required>
+      <mat-option  (click)="applyFilter(null)">All</mat-option>
+      <mat-option  (click)="applyFilter('SADMIN')">SADMIN</mat-option>
+      <mat-option  (click)="applyFilter('PRACTITIONER')">	PRACTITIONER</mat-option>
+      <mat-option  (click)="applyFilter('BADMIN')">BADMIN</mat-option>
+      
+      
+  </mat-select>
+  
+  
+</mat-form-field>
 <button mat-button (click)="openDialog('Add',{})"   class="button">Add Users</button>
+    <!-- <div class="example-container mat-elevation-z8 "> -->
 <mat-sidenav-container class="app-inner background-none shadow-none mail-db">
-    <div class="main-content" fxLayout="row" fxLayoutAlign="center start">
+  <div class="main-content" fxLayout="row" fxLayoutAlign="center start">
-      <div fxFlex.gt-sm="90" fxFlex.gt-xs="95" fxFlex="100">
+    <div fxFlex.gt-sm="90" fxFlex.gt-xs="95" fxFlex="100">
-         <div class="messages-list material fullscreen">
+       <div class="messages-list material fullscreen">
-            <mat-accordion>
+          <mat-accordion>
-               <mat-expansion-panel>
+             <!-- <mat-expansion-panel>
-                  <mat-expansion-panel-header >
+                <mat-expansion-panel-header > -->
-                    <div class="example-container  ">
+                  <!-- <div class="example-container mat-elevation-z8 "> -->
-                    <table mat-table [dataSource]="usersList" #mytable class="my-table mat-elevation-z8 len-table">
+                    <table  mat-table  [dataSource]="usersList" #mytable class="my-table mat-elevation-z8 len-table">
       
                       <ng-container matColumnDef="id">
                         <th mat-header-cell *matHeaderCellDef class="font-color"> S.No</th>
@@ -35,11 +52,12 @@
                         <td mat-cell *matCellDef="let element"> {{element.role}} </td>
                       </ng-container>
 
-                      <!-- <ng-container matColumnDef="logo">
+                      <ng-container matColumnDef="busId">
-                        <th mat-header-cell *matHeaderCellDef class="font-color"> Logo </th>
+                        <th mat-header-cell *matHeaderCellDef class="font-color"> Business Name </th>
-                        <td mat-cell *matCellDef="let element"> <img [src]="element.logo" /> </td>
+                        <td mat-cell *matCellDef="let element"> {{element.BusinessDetails.length>0 ? element.BusinessDetails[0].busName : null }}</td>
+                        
                       </ng-container>
-                       -->
+                      
                       <ng-container matColumnDef="Username">
                         <th mat-header-cell *matHeaderCellDef class="font-color"> User Name </th>
                         <td mat-cell *matCellDef="let element" class="element-spc"> {{element.userName}} </td>
@@ -86,13 +104,24 @@
                       <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
                      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
                     </table>
-                    </div>
+                    <div [hidden]="recordStatus">
-                    </mat-expansion-panel-header>
+                      <mat-paginator  #paginator class="mat-elevation-z1" [length]="usersListLength" [pageIndex]="pageIndex" [pageSize]="pageSize"
-                    </mat-expansion-panel>
+                      [pageSizeOptions]="[5, 10, 25,50, 100]" (page)="pageEvent = $event; pageChange($event)" showFirstLastButtons>
-                    </mat-accordion>
+                    </mat-paginator>      
-                    <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" aria-label="Select page of users"></mat-paginator>
+                  </div>
-                    </div>
+                  <!-- </div> -->
-                    </div>
+                  <!-- </mat-expansion-panel-header>
-                    </div>
+                  </mat-expansion-panel> -->
-  </mat-sidenav-container>
+                  </mat-accordion>
-  <notifier-container></notifier-container>
+                 
+                <mat-card-content *ngIf="recordStatus">
+                      <h5 align="center" style="font-weight: bold;
+                      color: brown;">No Data Available</h5>
+                  </mat-card-content>
+                  </div>
+                  </div>
+                  </div>
+</mat-sidenav-container>
+
+
+<notifier-container></notifier-container>

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

@@ -85,4 +85,117 @@ img {
   }
   .mat-elevation-z8 {
     box-shadow: none!important;
-}
+}
+
+.my-table{
+    width: 100%;
+}
+.button{
+    float: right;
+    background-color: #4caf50;
+    color: #ffff;
+}
+th.mat-header-cell, td.mat-cell, td.mat-footer-cell {
+    padding: 6px;
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
+}
+.mat-expansion-panel-header {
+    display: inline!important;
+}
+::ng-deep .mat-drawer-content {
+    overflow: hidden!important;
+    background-color: #ffff;
+}
+// ::ng-deep .body-container {
+//     overflow-x: hidden;
+//     overflow-y: hidden;
+//     background-color: #ffff;
+// }
+::ng-deep  .mat-expansion-panel:not([class*='mat-elevation-z']) {
+    box-shadow: none!important;
+}
+img {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+  }
+  .fullscreen{
+    position: absolute !important;
+    height: auto !important;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+  tr.mat-header-row {
+    height: 30px!important;
+}
+.font-color{
+    font-weight: 600;
+    font-size: 14px;
+}
+.edit-color{
+    color: rgba(0, 0, 0, 0.54);
+}
+.edit-color:hover {
+    color: #4caf50;
+  }
+  .delete:hover {
+    color:#ff0000;
+  }
+//   ::ng-deep .mat-form-field-appearance-legacy .mat-form-field-wrapper {
+//     width: 180%;
+// }
+
+::ng-deep .mat-content {
+    display: block!important;
+    flex: 1;
+    /* flex-direction: row; */
+    /* overflow: hidden; */
+    overflow-x: auto!important;
+    overflow-y: auto!important;
+}
+::ng-deep .mat-select-arrow {
+    margin: 0 15px!important;
+}
+::ng-deep .mat-paginator {
+    margin-top: -10px!important;
+}
+::ng-deep  body.swal2-height-auto {
+    height: 100% !important
+  }
+  .example-container {
+    display: block;
+    height: 348px;
+    /* overflow: auto; */
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+
+  .mat-table {
+    overflow: auto;
+    max-height: 500px;
+  }
+
+  .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;
+  }
+  

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

@@ -1,6 +1,6 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
-import { MatPaginator } from '@angular/material/paginator';
+import { MatPaginator, PageEvent } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { MatTable, MatTableDataSource } from '@angular/material/table';
 import { NotifierService } from 'angular-notifier';
@@ -8,6 +8,7 @@ import Swal from 'sweetalert2/dist/sweetalert2.js';
 import { AddUserComponent } from '../add-user/add-user.component';
 import { UserService } from '../user-service/user.service';
 import { environment } from 'environments/environment';
+import { BusinessService } from 'app/appoinment/business/business-service/business.service';
 
 export interface UsersData {
   id: number;
@@ -43,14 +44,23 @@ const ELEMENT_DATA: UsersData[] = [
 })
 export class UserListComponent implements OnInit {
   push: any;
-  displayedColumns: string[] = ['id','logo', 'role', 'Username', 'Password', 'mobile_no', 'email', 'action'];
+  displayedColumns: string[] = ['id','logo', 'role', 'busId','Username', 'Password', 'mobile_no', 'email', 'action'];
   dataSource: any;
   addFormData: any;
-  public usersList:any = new MatTableDataSource();
+  length = 5;
+  pageIndex = 0;
+  pageSize = 5;
+  pageEvent: PageEvent;
+  public usersList = new MatTableDataSource();
+  
   @ViewChild(MatTable,{static:true}) table: MatTable<any>;
+ 
   @ViewChild(MatPaginator) paginator: MatPaginator;
   private apiUrl = environment.apiEndpoint;
-  constructor(private notifierService: NotifierService,public dialog: MatDialog, public _use:UserService) { 
+  recordStatus: boolean= true;
+  usersListLength: any=5;
+  businessList: any;
+  constructor(private notifierService: NotifierService,public dialog: MatDialog, public _use:UserService,public _bus:BusinessService) { 
     let open_go_admin = localStorage.getItem('go_admin')
     if(open_go_admin == '0'){
       this.openDialog('Add',{})
@@ -62,23 +72,21 @@ export class UserListComponent implements OnInit {
   ngOnInit(): void {
     // this.dataSource = new MatTableDataSource(ELEMENT_DATA)
     this.getUsersList()
+    this.getBusinessList()
   }
   getUsersList() {
     //this._pd.getTabStatusPdDetails(this.tabStatus)
     this._use.getUsersListDetails().subscribe(res => {
           if (res.status == 200) {
-            this.usersList = res.data; 
+             let usersList = res.data
-            // console.log(this.usersList)
+            this.usersList['data'] = usersList;
-            // this.dataSource = res.data.length;
+            this.usersListLength = res.data.length;
-            // console.log(this.dataSource)
+            this.recordStatus=false;
-            // this.dataSource.data = this.usersList;
-            // console.log(this.dataSource.data)
-            // this.recordStatus=false;
           }
           else{
             // this.usersList=[];
             // this.dataSource = null;
-            // this.recordStatus=true;
+         this.recordStatus=true;
           }
         }
         ,error => {
@@ -87,16 +95,41 @@ export class UserListComponent implements OnInit {
           // alert(error.html_format);
         });
   }
+  getBusinessList() {
+    //this._pd.getTabStatusPdDetails(this.tabStatus)
+    this._bus.getBusinessListDetails().subscribe(res => {
+          if (res.status == 200) {
+            let businessFilter = res['data'].filter(val => val.busName)
+            this.businessList = businessFilter; 
+          } 
+        }
+        // , error => {this.errorMessage = <any> error});
+        ,error => {
+          // this.errorMessage.push(error);
+          // this.notifier.notify('error', 'Something Went Wrong Try Again.! \t\"' + (error.error_type == 2 ? error.error_status + ' ( ' + error.error_text + ' ) '  : ' ( ' + error.error_text + ' ) ') +'\" Error Occur.!');
+          // alert(error.html_format);
+        })
+  }
 
   ngAfterViewInit() {
+    console.log(this.usersList,this.paginator)
     this.usersList.paginator = this.paginator;
+ 
+      this.usersList.paginator = this.paginator;
+      console.log(this.usersList,this.paginator)
+      //this.usersList.sort = this.sort;
+    
   }
-  applyFilter(event: Event) {
+  applyFilter(filterValue: string) {
-    const filterValue = (event.target as HTMLInputElement).value;
+    console.log(filterValue)
-    this.usersList.filter = filterValue.trim().toLowerCase();
+    if(filterValue == null){
-    if (this.usersList.paginator) {
+      this.usersList.filter = null;
-      this.usersList.paginator.firstPage();
+    }else{
+      filterValue = filterValue.trim(); // Remove whitespace
+      filterValue = filterValue.toLowerCase(); // Datasource defaults to lowercase matches
+      this.usersList.filter = filterValue;
     }
+    
   }
 
   pageChange(e) {

ng-seed/src/app/layouts/admin/admin-layout.component.html

@@ -22,7 +22,7 @@
                   <div> <span>{{getUser}}</span></div>
                 </div>
               </div>
-              <div class="most-used text-center">
+              <!-- <div class="most-used text-center">
                 <a class="most-link" color="primary">
                   <mat-icon>home</mat-icon>
                 </a>
@@ -32,7 +32,7 @@
                 <a class="most-link" color="primary">
                   <mat-icon>settings</mat-icon>
                 </a>
-              </div>
+              </div> -->
             </div>
             <mat-nav-list appAccordion class="navigation relative">
               <mat-list-item appAccordionLink *ngFor="let menuitem of menuItems.getAll() | roleMenuItems:'1'">
@@ -188,9 +188,9 @@
         </div>
       </div>
       <div class="vertical-menu w-100">
-        <button (click)="menuToggleFunc()" mat-icon-button class="lines-btn">
+        <!-- <button (click)="menuToggleFunc()" mat-icon-button class="lines-btn">
           <mat-icon>menu</mat-icon>
-        </button>
+        </button> -->
         <div class="search-bar" fxFlex [class.search-active]="searchFocus">
           <form class="search-form">
             <mat-icon>search</mat-icon>

ng-seed/src/environments/environment.prod.ts

@@ -1,7 +1,8 @@
 export const environment = {
   production: true,
   environmentName: 'Production Environment',//Localhost Environment.
-  apiEndpoint:'http://venbainfotech.com:5000/',
+  // apiEndpoint:'http://venbainfotech.com:5000/',
+  apiEndpoint:'https://192.168.159.24:8080/api/',
   firebase : {
     apiKey: "AIzaSyBVPQ6C7cg5l8I-o7WSmmXdioMa4C0ZKNM",
     authDomain: "phone-otp-5d22e.firebaseapp.com",

ng-seed/src/environments/environment.ts

@@ -6,18 +6,19 @@
 export const environment = {
   production: false,
   environmentName: 'Testing Environment',//Localhost Environment.
-apiEndpoint:'http://venbainfotech.com:5000/api/', 
+// apiEndpoint:'http://venbainfotech.com:5000/api/', 
-  //  apiEndpoint:'http://192.168.1.20:8080/api/',
+// apiEndpoint:'http://192.168.159.24:8080/api/',
+   apiEndpoint:'http://192.168.1.20:8080/api/',
 // apiEndpoint:'https://api.venbait.in/api/', 
 
  firebase: {
-  apiKey: "AIzaSyBVPQ6C7cg5l8I-o7WSmmXdioMa4C0ZKNM",
+  apiKey: "AIzaSyCKbfDJ5Qf0rDP3WKppa94u9xuVaVabaDw",
-  authDomain: "phone-otp-5d22e.firebaseapp.com",
+  authDomain: "venba-appointment.firebaseapp.com",
-  projectId: "phone-otp-5d22e",
+  projectId: "venba-appointment",
-  storageBucket: "phone-otp-5d22e.appspot.com",
+  storageBucket: "venba-appointment.appspot.com",
-  messagingSenderId: "207025211598",
+  messagingSenderId: "513912226817",
-  appId: "1:207025211598:web:f2e4ebfb2e4ca5d5d8a89f",
+  appId: "1:513912226817:web:eebcec6f7c6407a1dd2c00",
-  measurementId: "G-LJFTVZSP38"
+  measurementId: "G-48RM8BFRFK"
 },
   
 };