end user flow

ng-seed/src/app/appoinment/appoinment-routing.module.ts

@@ -1,13 +1,22 @@
 import { Component, NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+<<<<<<< HEAD
 import { AddBusinessListComponent } from './business/add-business-list/add-business-list.component'; 
+=======
+import { AppoinmentsListComponent } from './appoinments/appoinments-list/appoinments-list.component';
+import { BusinessListComponent } from './business/business-list/business-list.component';
+import { CalendarListComponent } from './calendars/calendar-list/calendar-list.component';
+import { CustomersListComponent } from './customers/customers-list/customers-list.component';
+import { ServiceListComponent } from './service-list-details/service-list/service-list.component';
+>>>>>>> ad201609bd8dc2d9a939bf24f4eb3c1b0107e912
 import { UserListComponent } from './user/user-list/user-list.component';
 
 
-const routes: Routes = [ {
+const routes: Routes = [ 
-  path: 'add-business-list',
+//   {
-  component: AddBusinessListComponent
+//   path: 'add-business-list',
-},
+//   component: AddBusinessListComponent
+// },
 
 {
   path: 'add-user-list',

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

@@ -1,64 +0,0 @@
-<mat-card class="login-session">
-    <div>
-       <h2 class=""> Add Business</h2>
-       <form [formGroup]="form" (ngSubmit)="submit()">
-       <div fxLayout="column" fxLayoutAlign="start stretch">
-
-        <mat-form-field>
-            <mat-select placeholder="Select Business" [formControl]="businessselect" required>
-                <mat-option>--</mat-option>
-                <mat-option *ngFor="let business of selects" [value]="business.name">
-                    {{business.name}}
-                </mat-option>
-            </mat-select>
-            <mat-error *ngIf="businessselect.hasError('required')">Please Business</mat-error>
-            <mat-error *ngIf="businessselect.hasError('invalidValue')">Please choose any other</mat-error>
-        </mat-form-field>
-          <mat-form-field>
-             <input matInput type="text" placeholder="Enter Name" formControlName="bus_name" id="bus_name">
-             <mat-error *ngIf="myError('bus_name', 'required')">Name is required</mat-error>
-             <mat-error *ngIf="myError('bus_name', 'maxlength')">Limit exceed</mat-error>
-          </mat-form-field>
-          <mat-form-field>
-            <input matInput  type="text" placeholder="Email" formControlName="email" id="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="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>
-            <input matInput type="text" placeholder="Enter Phone No" formControlName="contact_no" id="contact_no">
-            <mat-error *ngIf="myError('contact_no', 'required')">Contact No is required</mat-error>
-            <mat-error *ngIf="myError('contact_no', 'maxlength')">Limit exceed</mat-error>
-         </mat-form-field>
-          <mat-form-field>
-             <input matInput type="text" placeholder="Enter Address" formControlName="address" id="address">
-             <mat-error *ngIf="myError('address', 'required')">Address is required</mat-error>
-             <mat-error *ngIf="myError('address', 'maxlength')">Limit exceed</mat-error>
-          </mat-form-field>
-          <mat-form-field>
-             <input matInput type="text" placeholder="Enter State" formControlName="state" id="state">
-             <mat-error *ngIf="myError('state', 'required')">City is required</mat-error>
-             <mat-error *ngIf="myError('state', 'maxlength')">Limit exceed</mat-error>
-          </mat-form-field>
-          <mat-form-field>
-             <input matInput type="text" placeholder="Enter City" formControlName="city" id="city">
-             <mat-error *ngIf="myError('city', 'required')">City is required</mat-error>
-             <mat-error *ngIf="myError('city', 'maxlength')">Limit exceed</mat-error>
-          </mat-form-field>
-          <mat-checkbox color="primary" formControlName="go_Admin"></mat-checkbox>
-          <div class="vertical-center">
-            <button class="mat-green"  mat-raised-button type="submit">Submit</button>
-          </div>
-          
-       </div>
-       <!-- <div>
-          <p>Sign Up Using</p>
-          <a href="#" class="shared-icon mr-1 mat-blue"><i class="fa fa-facebook fa-lg mr-1"></i> Facebook</a>
-          <a href="#" class="shared-icon mat-red"><i class="fa fa-google fa-lg mr-1"></i>Google</a>
-       </div> -->
-       </form>
-    </div>
- </mat-card>

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

@@ -1,7 +0,0 @@
-.vertical-center {
-    margin: 0;
-    // position: absolute;
-    // top: 50%;
-    // -ms-transform: translateY(-50%);
-    // transform: translateY(-50%);
-  }

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

@@ -1,25 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { AddBusinessListComponent } from './add-business-list.component';
-
-describe('AddBusinessListComponent', () => {
-  let component: AddBusinessListComponent;
-  let fixture: ComponentFixture<AddBusinessListComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ AddBusinessListComponent ]
-    })
-    .compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(AddBusinessListComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

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

@@ -1,66 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
-import { Router } from '@angular/router';
-
-@Component({
-  selector: 'app-add-business-list',
-  templateUrl: './add-business-list.component.html',
-  styleUrls: ['./add-business-list.component.scss']
-})
-export class AddBusinessListComponent implements OnInit {
-  form: FormGroup;
-  fileToUpload: any;
-  imageUrl: any;
-
-  businessselect = new FormControl('', [Validators.required]);
-  selects = [
-    {name: 'A'},
-    {name: 'B'},
-    {name: 'C'},
-    {name: 'D'},
-  ];
-
-  constructor(private router: Router,private formBuilder: FormBuilder) { }
-
-  get f(){
-    return this.form.controls;
-  }
-
-ngOnInit() {
-  this.form = new FormGroup({
-  businessselect: new FormControl('', [Validators.required]),
-  bus_name: new FormControl('', [Validators.required, Validators.maxLength(20)]),
-  address: new FormControl('', [Validators.required, Validators.maxLength(50)]),
-  city: new FormControl('', [Validators.required, Validators.maxLength(10)]),
-  state: new FormControl('', [Validators.required, Validators.maxLength(10)]),
-  email: new FormControl('', [Validators.required, Validators.email,Validators.pattern(
-    '[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,63}$',
-  ),]),
-  contact_no: new FormControl('', [Validators.required, Validators.maxLength(10)]),
-  });
-  }
-
-  public myError = (controlName: string, errorName: string) =>{
-    return this.form.controls[controlName].hasError(errorName);
-    }
-
-  submit(){
-    console.log(this.form.value);
-  }
-  register() {
-    this.router.navigate(['/']);
-  }
-
-  handleFileInput(file: FileList) {
-    this.fileToUpload = file.item(0);
-
-    //Show image preview
-    let reader = new FileReader();
-    reader.onload = (event: any) => {
-      this.imageUrl = event.target.result;
-    }
-    reader.readAsDataURL(this.fileToUpload);
-  }
-	
-
-}

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

@@ -0,0 +1,66 @@
+<!-- <mat-card class="settings-panel" > -->
+    <h5 mat-dialog-title> <strong>{{action}}  Business</strong> 
+        <button mat-icon-button  type="button" matTooltip="Close" class="button" matTooltipPosition="above" (click)="close()"
+        ><mat-icon>close</mat-icon></button></h5>
+        <form [formGroup]="form" (ngSubmit)="submit()">
+        <ng-scrollbar class="scrollHV">
+      <div mat-dialog-content class="my-table">
+       
+        <mat-form-field  appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
+          <input placeholder=" Name" matInput  formControlName="busName">
+          <mat-error *ngIf="myError('busName', 'required')">Name is required</mat-error>
+          <mat-error *ngIf="myError('busName', 'maxlength')">Limit exceed</mat-error>
+        </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">
+          <mat-error *ngIf="!form.get('email')?.errors?.required && (form.get('email')?.errors?.pattern)">
+            Please enter a valid email address
+         </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">
+          <mat-error *ngIf="myError('contactNo', 'required')">Contact No is required</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">
+          <input placeholder=" Address" matInput [(ngModel)]="local_data.address" formControlName="address">
+          <mat-error *ngIf="myError('address', 'required')">Address is required</mat-error>
+          <mat-error *ngIf="myError('address', 'maxlength')">Limit exceed</mat-error>
+        </mat-form-field> 
+        <mat-form-field  appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
+          <input placeholder=" State" matInput [(ngModel)]="local_data.state" formControlName="state">
+          <mat-error *ngIf="myError('state', 'required')">State is required</mat-error>
+          <mat-error *ngIf="myError('state', 'maxlength')">Limit exceed</mat-error>
+        </mat-form-field> 
+        <mat-form-field  appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
+          <input placeholder=" City" matInput [(ngModel)]="local_data.city" formControlName="city">
+          <mat-error *ngIf="myError('city', 'required')">City is required</mat-error>
+          <mat-error *ngIf="myError('city', 'maxlength')">Limit exceed</mat-error>
+        </mat-form-field>
+        <!-- <mat-form-field  appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
+          <input placeholder="Working Hrs" matInput  formControlName="workingHrsJson">
+          <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  class="image mb-2" [src]="url" height="50">
+        <input type='file' (change)="onSelectFile($event)" formControlName="logo">  
+        <!-- <mat-checkbox class="example-margin mt-2" formControlName="admin_checked" (change)="showOptions($event)">Add Admin</mat-checkbox>  -->
+      
+      </div>
+        </ng-scrollbar>
+        <ng-template #elseTemplate>
+          Sure to delete <b>{{local_data.name}}</b>?
+        </ng-template>
+        <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>
+      
+      <!-- </mat-card> -->
+      
+      

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

@@ -1,20 +1,20 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { AddUserListComponent } from './add-user-list.component';
+import { AddBusinessComponent } from './add-business.component';
 
-describe('AddUserListComponent', () => {
+describe('AddBusinessComponent', () => {
-  let component: AddUserListComponent;
+  let component: AddBusinessComponent;
-  let fixture: ComponentFixture<AddUserListComponent>;
+  let fixture: ComponentFixture<AddBusinessComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ AddUserListComponent ]
+      declarations: [ AddBusinessComponent ]
     })
     .compileComponents();
   });
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(AddUserListComponent);
+    fixture = TestBed.createComponent(AddBusinessComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

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

@@ -7,12 +7,14 @@ export interface UsersData {
   name: string;
   id: number;
 }
+
 @Component({
-  selector: 'app-dialog-box',
+  selector: 'app-add-business',
-  templateUrl: './dialog-box.component.html',
+  templateUrl: './add-business.component.html',
-  styleUrls: ['./dialog-box.component.scss']
+  styleUrls: ['./add-business.component.scss']
 })
-export class DialogBoxComponent implements OnInit {
+export class AddBusinessComponent implements OnInit {
+
   form: FormGroup;
   fileToUpload: any;
   imageUrl: any;
@@ -21,7 +23,7 @@ export class DialogBoxComponent implements OnInit {
   url: string | ArrayBuffer;
   imageViewStatus: boolean = false;
   constructor(private router: Router,private formBuilder: FormBuilder,
-    public dialogRef: MatDialogRef<DialogBoxComponent>,
+    public dialogRef: MatDialogRef<AddBusinessComponent>,
     @Optional() @Inject(MAT_DIALOG_DATA) public data: UsersData) {
     console.log(data);
     this.local_data = {...data};
@@ -88,4 +90,5 @@ export class DialogBoxComponent implements OnInit {
         console.log(this.form.value);
         console.log(this.action,this.local_data)
     }
+
 }

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

@@ -5,8 +5,9 @@ import { MatSort } from '@angular/material/sort';
 import { MatTable, MatTableDataSource } from '@angular/material/table';
 import { Router } from '@angular/router';
 import Swal from 'sweetalert2/dist/sweetalert2.js';
+import { AddBusinessComponent } from '../add-business/add-business.component';
 import { BusinessService } from '../business-service/business.service';
-import { DialogBoxComponent } from '../dialog-box/dialog-box.component';
+
 
 export interface UsersData {
   id: number;
@@ -108,8 +109,13 @@ export class BusinessListComponent implements OnInit {
   } 
   openDialog(action,obj) {
     obj.action = action;
+<<<<<<< HEAD
     const dialogRef = this.dialog.open(DialogBoxComponent, {
       width: '30%',
+=======
+    const dialogRef = this.dialog.open(AddBusinessComponent, {
+      width: '39%',
+>>>>>>> ad201609bd8dc2d9a939bf24f4eb3c1b0107e912
       height: '100%',
       // maxWidth: '38vw',
       position: { right: '0' },

ng-seed/src/app/appoinment/business/business.module.ts

@@ -3,21 +3,19 @@ import { CommonModule } from '@angular/common';
 
 import { BusinessRoutingModule } from './business-routing.module';
 import { BusinessListComponent } from './business-list/business-list.component';
-import { AddBusinessListComponent } from './add-business-list/add-business-list.component';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import { DialogBoxComponent } from './dialog-box/dialog-box.component';
 import { ScrollingModule } from '@angular/cdk/scrolling';
 import { DemoMaterialModule } from 'app/shared/demo.module';
 import { NgScrollbarModule } from 'ngx-scrollbar';
+import { AddBusinessComponent } from './add-business/add-business.component';
 
 
 
 @NgModule({
   declarations: [
     BusinessListComponent,
-    AddBusinessListComponent,
+    AddBusinessComponent
-    DialogBoxComponent
   
   ],
   imports: [

ng-seed/src/app/appoinment/consultant-setting/consultant-setting/consultant-setting.component.html

@@ -1,10 +1,19 @@
-<mat-tab-group [@.disabled]="true">
+<!-- <div class="user-pro-wrap">
-    <div class="mb-1 label-hgt">
+   <div class="user-profile-thumb ">
-       <img src="assets/images/userpic.jpg" width="100" height="100" alt="" class="radius-circle">
+     <div class="user-i">
+       <img src="assets/images/userpic.png" class="rad-full mb-1" width="100" height="100" alt="">
+       <div> <span class="userpic">Sample</span></div>
+       <div> <span class="admin">Super Admin</span></div>
      </div>
+   </div>
+</div> -->
+
+<mat-tab-group [@.disabled]="true">
+
     <mat-tab>
        <ng-template mat-tab-label>
-         <i class="material-icons">&#xe7fd;</i>  Staff Information
+         <!-- <i class="material-icons">&#xe7fd;</i>  -->
+          Staff Information
        </ng-template>
        <div class="staff">
           <span class="staff-title">
@@ -85,9 +94,9 @@
                    <div *ngIf="f.information.errors.required">First Name is required</div>
                 </div>
              </div>
-             <div class="form-group">
+             <!-- <div class="form-group">
                 <button class="btn btn-primary">Register</button>
-             </div>
+             </div> -->
              </form>
           </div>
        </ng-scrollbar>
@@ -95,13 +104,14 @@
 
     <mat-tab>
        <ng-template mat-tab-label>
-        <i class="material-icons">&#xe192;</i>  Working Hours
+        <!-- <i class="material-icons">&#xe192;</i>  -->
+         Working Hours
        </ng-template>
        <div class="staff">
           <span class="staff-title">
           Working Hours
           </span>
-          <button mat-button   class="button">Edit</button>
+          <button mat-button (click)="openDialog('Add',{})"  class="button">Edit</button>
        </div>
        <div class="working-hours">
           <ng-scrollbar class="scrollHV">
@@ -210,6 +220,7 @@
           </div>
        </div>
     </mat-tab>
+
     <mat-tab>
        <ng-template mat-tab-label>
           Staff Booking URL
@@ -238,4 +249,6 @@
           </div>
        </div>
     </mat-tab>
+
     </mat-tab-group>
+   

ng-seed/src/app/appoinment/consultant-setting/consultant-setting/consultant-setting.component.scss

@@ -24,6 +24,7 @@
     flex-direction: column;
     background-color: white;
     margin-left: 2rem;
+    // margin-top: -9rem;
   }
   
   mat-tab-body {
@@ -324,4 +325,23 @@ margin-bottom: 10rem;
 
 }  
 
-
+// .user-pro-wrap{
+//   background-color: #fff;
+//   // height: 100%;
+//   width: 18%;
+// }
+// .userpic{
+//   font-size: 17px;
+//   display: block;
+//   overflow: hidden;
+//   text-overflow: ellipsis;
+//   white-space: nowrap;
+//   color: #4C4C4C;
+//   text-align: center;
+// }
+// .admin{
+//   display: inline-block;
+//   font-size: 12px;
+//   color: #4C4C4C;
+//   text-align: center;
+// }

ng-seed/src/app/appoinment/consultant-setting/consultant-setting/consultant-setting.component.ts

@@ -1,5 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { MatDialog } from '@angular/material/dialog';
+import { EditWorkingHoursComponent } from '../edit-working-hours/edit-working-hours.component';
 
 @Component({
   selector: 'app-consultant-setting',
@@ -19,7 +21,7 @@ export class ConsultantSettingComponent implements OnInit {
     status: 'Active',
   },
  ];
- constructor(private formBuilder: FormBuilder) {}
+ constructor(private formBuilder: FormBuilder, public dialog: MatDialog) {}
 
  
  ngOnInit() {
@@ -47,5 +49,22 @@ onSubmit() {
   }
  console.log(JSON.stringify(this.registerForm.value, null, 2));
 }
+openDialog(action,obj) {
+  obj.action = action;
+  const dialogRef = this.dialog.open(EditWorkingHoursComponent, {
+    width: '48%',
+    height: '100%',
+    // maxWidth: '38vw',
+    position: { right: '0' },
+    data:obj
+  });
+  // dialogRef.afterClosed().subscribe(result => {
+  //   if(result != undefined){
+  //     console.log(result)
+  //     this.formAddUpdateAndDelete(result,result.data)
+  //   }      
+  // });
+}
+
 
 }

ng-seed/src/app/appoinment/consultant-setting/edit-working-hours/edit-working-hours.component.html

@@ -1 +1,271 @@
-<p>edit-working-hours works!</p>
+<div class="edit-working">
+    <!-- <ng-scrollbar class="scrollHV"> -->
+   <div class="popup-header">
+<h5>
+    Edit Working Hours
+    <button mat-icon-button  type="button" matTooltip="Close" class="button" matTooltipPosition="above" (click)="close()"
+    ><mat-icon>close</mat-icon></button>
+</h5>
+   </div>
+  
+    <div day="Sunday" class="label-container">
+       <div class="label-name">
+        <input id="color-toggle" type="checkbox" >
+          <span class="labelname checkbox-default-blue checked">
+          <label>Sunday</label>
+          </span>
+       </div>
+          <div class="dis-flex">
+            <div class="content-container">
+                <div class="content-area">
+                  <form [formGroup]="datainputForm" novalidate>
+                    <section class="form-block">
+                      <div class="form-group dis-flex">
+                        <div class="select pr-1 ml-1">
+                          <select formControlName="dropDownTest" (change)="onSelectChange()" id="dropDownTestId" class="selectBox select-drop-box ">
+                           <option *ngFor="let dropDownTestx of timing" [ngValue]="dropDownTestx" [disabled]="dropDownTestx === 'vmnic2'">
+                              {{ dropDownTestx }}
+                            </option>
+                          </select>
+                        </div>
+                        <div class="select pr-2">
+                            <select formControlName="dropDownTest" (change)="onSelectChange()" id="dropDownTestId" class="selectBox select-drop-box ">
+                             <option *ngFor="let dropDownTestx of timing" [ngValue]="dropDownTestx" [disabled]="dropDownTestx === 'vmnic2'">
+                                {{ dropDownTestx }}
+                              </option>
+                            </select>
+                          </div>
+                      </div>
+                    </section>
+                  </form>
+                </div>
+              </div>
+             <span class="addbreak">+</span>
+          </div>
+       <div  class="applyToAll addbreak">Apply To All</div>
+    </div>
+    <div day="Monday" class="label-container">
+        <div class="label-name">
+         <input id="color-toggle" type="checkbox" >
+           <span class="labelname checkbox-default-blue checked">
+           <label>Monday</label>
+           </span>
+        </div>
+           <div class="dis-flex">
+             <div class="content-container">
+                 <div class="content-area">
+                   <form [formGroup]="datainputForm" novalidate>
+                     <section class="form-block">
+                       <div class="form-group dis-flex">
+                         <div class="select pr-1 ml-1">
+                           <select formControlName="dropDownTest" (change)="onSelectChange()" id="dropDownTestId" class="selectBox select-drop-box ">
+                            <option *ngFor="let dropDownTestx of timing" [ngValue]="dropDownTestx" [disabled]="dropDownTestx === 'vmnic2'">
+                               {{ dropDownTestx }}
+                             </option>
+                           </select>
+                         </div>
+                         <div class="select pr-2">
+                             <select formControlName="dropDownTest" (change)="onSelectChange()" id="dropDownTestId" class="selectBox select-drop-box ">
+                              <option *ngFor="let dropDownTestx of timing" [ngValue]="dropDownTestx" [disabled]="dropDownTestx === 'vmnic2'">
+                                 {{ dropDownTestx }}
+                               </option>
+                             </select>
+                           </div>
+                       </div>
+                     </section>
+                   </form>
+                 </div>
+               </div>
+              <span class="addbreak">+</span>
+           </div>
+        <div  class="applyToAll addbreak">Apply To All</div>
+     </div>
+     <div day="Tuesday" class="label-container">
+        <div class="label-name">
+         <input id="color-toggle" type="checkbox" >
+           <span class="labelname checkbox-default-blue checked">
+           <label>Tuesday</label>
+           </span>
+        </div>
+           <div class="dis-flex">
+             <div class="content-container">
+                 <div class="content-area">
+                   <form [formGroup]="datainputForm" novalidate>
+                     <section class="form-block">
+                       <div class="form-group dis-flex">
+                         <div class="select pr-1 ml-1">
+                           <select formControlName="dropDownTest" (change)="onSelectChange()" id="dropDownTestId" class="selectBox select-drop-box ">
+                            <option *ngFor="let dropDownTestx of timing" [ngValue]="dropDownTestx" [disabled]="dropDownTestx === 'vmnic2'">
+                               {{ dropDownTestx }}
+                             </option>
+                           </select>
+                         </div>
+                         <div class="select pr-2">
+                             <select formControlName="dropDownTest" (change)="onSelectChange()" id="dropDownTestId" class="selectBox select-drop-box ">
+                              <option *ngFor="let dropDownTestx of timing" [ngValue]="dropDownTestx" [disabled]="dropDownTestx === 'vmnic2'">
+                                 {{ dropDownTestx }}
+                               </option>
+                             </select>
+                           </div>
+                       </div>
+                     </section>
+                   </form>
+                 </div>
+               </div>
+              <span class="addbreak">+</span>
+           </div>
+        <div  class="applyToAll addbreak">Apply To All</div>
+     </div>
+     <div day="Wednesday" class="label-container">
+        <div class="label-name">
+         <input id="color-toggle" type="checkbox" >
+           <span class="labelname checkbox-default-blue checked">
+           <label>Wednesday</label>
+           </span>
+        </div>
+           <div class="dis-flex">
+             <div class="content-container">
+                 <div class="content-area">
+                   <form [formGroup]="datainputForm" novalidate>
+                     <section class="form-block">
+                       <div class="form-group dis-flex">
+                         <div class="select pr-1 ml-1">
+                           <select formControlName="dropDownTest" (change)="onSelectChange()" id="dropDownTestId" class="selectBox select-drop-box ">
+                            <option *ngFor="let dropDownTestx of timing" [ngValue]="dropDownTestx" [disabled]="dropDownTestx === 'vmnic2'">
+                               {{ dropDownTestx }}
+                             </option>
+                           </select>
+                         </div>
+                         <div class="select pr-2">
+                             <select formControlName="dropDownTest" (change)="onSelectChange()" id="dropDownTestId" class="selectBox select-drop-box ">
+                              <option *ngFor="let dropDownTestx of timing" [ngValue]="dropDownTestx" [disabled]="dropDownTestx === 'vmnic2'">
+                                 {{ dropDownTestx }}
+                               </option>
+                             </select>
+                           </div>
+                       </div>
+                     </section>
+                   </form>
+                 </div>
+               </div>
+              <span class="addbreak">+</span>
+           </div>
+        <div  class="applyToAll addbreak">Apply To All</div>
+     </div>
+     <div day="Thursday" class="label-container">
+        <div class="label-name">
+         <input id="color-toggle" type="checkbox" >
+           <span class="labelname checkbox-default-blue checked">
+           <label>Thursday</label>
+           </span>
+        </div>
+           <div class="dis-flex">
+             <div class="content-container">
+                 <div class="content-area">
+                   <form [formGroup]="datainputForm" novalidate>
+                     <section class="form-block">
+                       <div class="form-group dis-flex">
+                         <div class="select pr-1 ml-1">
+                           <select formControlName="dropDownTest" (change)="onSelectChange()" id="dropDownTestId" class="selectBox select-drop-box ">
+                            <option *ngFor="let dropDownTestx of timing" [ngValue]="dropDownTestx" [disabled]="dropDownTestx === 'vmnic2'">
+                               {{ dropDownTestx }}
+                             </option>
+                           </select>
+                         </div>
+                         <div class="select pr-2">
+                             <select formControlName="dropDownTest" (change)="onSelectChange()" id="dropDownTestId" class="selectBox select-drop-box ">
+                              <option *ngFor="let dropDownTestx of timing" [ngValue]="dropDownTestx" [disabled]="dropDownTestx === 'vmnic2'">
+                                 {{ dropDownTestx }}
+                               </option>
+                             </select>
+                           </div>
+                       </div>
+                     </section>
+                   </form>
+                 </div>
+               </div>
+              <span class="addbreak">+</span>
+           </div>
+        <div  class="applyToAll addbreak">Apply To All</div>
+     </div>
+     <div day="Friday" class="label-container">
+        <div class="label-name">
+         <input id="color-toggle" type="checkbox" >
+           <span class="labelname checkbox-default-blue checked">
+           <label>Friday</label>
+           </span>
+        </div>
+           <div class="dis-flex">
+             <div class="content-container">
+                 <div class="content-area">
+                   <form [formGroup]="datainputForm" novalidate>
+                     <section class="form-block">
+                       <div class="form-group dis-flex">
+                         <div class="select pr-1 ml-1">
+                           <select formControlName="dropDownTest" (change)="onSelectChange()" id="dropDownTestId" class="selectBox select-drop-box ">
+                            <option *ngFor="let dropDownTestx of timing" [ngValue]="dropDownTestx" [disabled]="dropDownTestx === 'vmnic2'">
+                               {{ dropDownTestx }}
+                             </option>
+                           </select>
+                         </div>
+                         <div class="select pr-2">
+                             <select formControlName="dropDownTest" (change)="onSelectChange()" id="dropDownTestId" class="selectBox select-drop-box ">
+                              <option *ngFor="let dropDownTestx of timing" [ngValue]="dropDownTestx" [disabled]="dropDownTestx === 'vmnic2'">
+                                 {{ dropDownTestx }}
+                               </option>
+                             </select>
+                           </div>
+                       </div>
+                     </section>
+                   </form>
+                 </div>
+               </div>
+              <span class="addbreak">+</span>
+           </div>
+        <div  class="applyToAll addbreak">Apply To All</div>
+     </div>
+     <div day="Saturday" class="label-container">
+        <div class="label-name">
+         <input id="color-toggle" type="checkbox" >
+           <span class="labelname checkbox-default-blue checked">
+           <label>Saturday</label>
+           </span>
+        </div>
+           <div class="dis-flex">
+             <div class="content-container">
+                 <div class="content-area">
+                   <form [formGroup]="datainputForm" novalidate>
+                     <section class="form-block">
+                       <div class="form-group dis-flex">
+                         <div class="select pr-1 ml-1">
+                           <select formControlName="dropDownTest" (change)="onSelectChange()" id="dropDownTestId" class="selectBox select-drop-box ">
+                            <option *ngFor="let dropDownTestx of timing" [ngValue]="dropDownTestx" [disabled]="dropDownTestx === 'vmnic2'">
+                               {{ dropDownTestx }}
+                             </option>
+                           </select>
+                         </div>
+                         <div class="select pr-2">
+                             <select formControlName="dropDownTest" (change)="onSelectChange()" id="dropDownTestId" class="selectBox select-drop-box ">
+                              <option *ngFor="let dropDownTestx of timing" [ngValue]="dropDownTestx" [disabled]="dropDownTestx === 'vmnic2'">
+                                 {{ dropDownTestx }}
+                               </option>
+                             </select>
+                           </div>
+                       </div>
+                     </section>
+                   </form>
+                 </div>
+               </div>
+              <span class="addbreak">+</span>
+           </div>
+        <div  class="applyToAll addbreak">Apply To All</div>
+     </div>
+<!-- </ng-scrollbar> -->
+<div class="popup-button mb-2">
+    <span class="buttons cancel">Cancel</span>
+    <span class="buttons add">Save</span>
+    </div>
+ </div>
+
+
+    

ng-seed/src/app/appoinment/consultant-setting/edit-working-hours/edit-working-hours.component.scss

@@ -0,0 +1,96 @@
+.edit-working{
+    .popup-header {
+        background: #FFF;
+        padding: 5px 5px 5px 5px;
+    }
+    .button{
+        // float: right; 
+        margin-bottom: 1rem;
+        background-color: #ffff;
+        margin-top: -1rem;
+        // margin-left: 6rem;
+        float: right;
+    }
+    .label-container {
+        display: flex;
+        width: 100%;
+        border-bottom: 1px solid #F5F6F8;
+        box-sizing: border-box;
+        min-height: 40px;
+        padding: 13px 0;
+    }
+    .label-name{
+    color: #666;
+    position: relative;
+    text-transform: capitalize;
+    width: 100px;
+    flex: none;
+    margin-right: 15px;
+    align-self: flex-start;
+    padding-top: 13px;
+    box-sizing: border-box;
+    line-height: 15px;
+    }
+    .labelname label {
+        color: #666;
+        font-size: 14px;
+        // padding: 10px 10px 10px 10px;
+        width: 150px;
+    }
+    .dis-flex {
+        display: flex!important;
+    }
+    .width-10px {
+        width: 10px!important;
+    }
+ .select-drop-box {
+    padding-right: 30px;
+    height: 40px;
+    background-color: #FFF;
+    font-size: 13px;
+    color: #111;
+    border-radius: 4px;
+    border-color: #666;
+    }
+    .addbreak{
+        margin-top: 0.5rem;
+        margin-right: 2rem;
+        color: #FFF;
+        &:hover {
+            cursor: pointer;
+            color: #111;
+        }
+    }
+    // .scrollHV {
+    //     height: calc(100vh - 190px);
+    //   }
+
+    .popup-button {
+      margin-top: 2rem;
+        width: 100%;
+    }
+    .cancel {
+        background: #F5F5F5;
+        color: #111;
+        float: left;
+    }
+    .buttons {
+        width: 50%;
+        background: #FFF;
+        color: #111;
+        font-size: 13px;
+        font-family: zohopuvi-medium;
+        text-align: center;
+        border-top: 1px solid #E2E2E2;
+        padding: 20px;
+        -webkit-transition: all .2s ease-in;
+        -moz-transition: all .2s ease-in;
+        transition: all .2s ease-in;
+    }
+    .add {
+        background: #52518F;
+        color: #FFF;
+        border-top: 1px solid #52518F;
+        float: left;
+    }
+}

ng-seed/src/app/appoinment/consultant-setting/edit-working-hours/edit-working-hours.component.ts

@@ -1,4 +1,6 @@
 import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { MatDialogRef } from '@angular/material/dialog';
 
 @Component({
   selector: 'app-edit-working-hours',
@@ -7,10 +9,30 @@ import { Component, OnInit } from '@angular/core';
 })
 export class EditWorkingHoursComponent implements OnInit {
 
+  datainputForm: FormGroup;
+  timing: any[] = ['09:00am','09:30am','10:00am','10:30am','11:00am','11:30am','12:00am','12:30am','01:00pm','01:00pm','01:30pm', '02:00pm', '02:30pm', '03:00pm', '03:30pm', '04:00pm', '04:30pm', '05:00pm', '05:30pm', '06:00pm', '06:30pm', '07:00pm', '07:30pm', '08:00pm','08:30pm', '09:00pm',]
 
-  constructor() { }
+  constructor(public dialogRef: MatDialogRef<EditWorkingHoursComponent>, private fb: FormBuilder) { }
+
+
+  close() {
+    this.dialogRef.close();
+}
 
 ngOnInit(): void {
+  this.datainputForm = this.fb.group({
+  dropDownTest: '09:00am',
+  dropDownTest1:''
+  })
+}
+onSelectChange(){
+  console.log(this.datainputForm.get('dropDownTest').value);
+      if( this.datainputForm.get('dropDownTest').value === 'vmnic3'){
+  
+  this.datainputForm.get('dropDownTest1').disable();
+      }else{
+        this.datainputForm.get('dropDownTest1').enable();
+      }
   }
 
 }

ng-seed/src/app/appoinment/customers/add-customers/add-customers.component.spec.ts

@@ -1,20 +1,20 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { UserDialogBoxComponent } from './user-dialog-box.component';
+import { AddCustomersComponent } from './add-customers.component';
 
-describe('UserDialogBoxComponent', () => {
+describe('AddCustomersComponent', () => {
-  let component: UserDialogBoxComponent;
+  let component: AddCustomersComponent;
-  let fixture: ComponentFixture<UserDialogBoxComponent>;
+  let fixture: ComponentFixture<AddCustomersComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ UserDialogBoxComponent ]
+      declarations: [ AddCustomersComponent ]
     })
     .compileComponents();
   });
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(UserDialogBoxComponent);
+    fixture = TestBed.createComponent(AddCustomersComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

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

@@ -6,12 +6,14 @@ export interface UsersData {
   cusName: string;
   id: number;
 }
+
 @Component({
-  selector: 'app-dialog-box',
+  selector: 'app-add-customers',
-  templateUrl: './dialog-box.component.html',
+  templateUrl: './add-customers.component.html',
-  styleUrls: ['./dialog-box.component.scss']
+  styleUrls: ['./add-customers.component.scss']
 })
-export class DialogBoxComponent implements OnInit {
+export class AddCustomersComponent implements OnInit {
+
   form: FormGroup;
   fileToUpload: any;
   imageUrl: any;
@@ -19,7 +21,7 @@ export class DialogBoxComponent implements OnInit {
   local_data:any;
   url: string | ArrayBuffer;
   constructor(private router: Router,private formBuilder: FormBuilder,
-    public dialogRef: MatDialogRef<DialogBoxComponent>,
+    public dialogRef: MatDialogRef<AddCustomersComponent>,
     @Optional() @Inject(MAT_DIALOG_DATA) public data: UsersData) {
     console.log(data);
     this.local_data = {...data};
@@ -73,4 +75,5 @@ export class DialogBoxComponent implements OnInit {
         console.log(this.form.value);
         console.log(this.action,this.local_data)
       }
+
 }

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

@@ -3,8 +3,9 @@ import { MatDialog } from '@angular/material/dialog';
 import { MatPaginator, PageEvent } from '@angular/material/paginator';
 import { MatTable, MatTableDataSource } from '@angular/material/table';
 import Swal from 'sweetalert2';
+import { AddCustomersComponent } from '../add-customers/add-customers.component';
 import { CustomersService } from '../customers-service/customers.service';
-import { DialogBoxComponent } from '../dialog-box/dialog-box.component';
+
 
 export interface UsersData {
   id: number;
@@ -128,7 +129,7 @@ export class CustomersListComponent implements OnInit {
   } 
   openDialog(action,obj) {
     obj.action = action;
-    const dialogRef = this.dialog.open(DialogBoxComponent, {
+    const dialogRef = this.dialog.open(AddCustomersComponent, {
       width: '39%',
       height: '100%',
       // maxWidth: '38vw',

ng-seed/src/app/appoinment/customers/customers.module.ts

@@ -5,15 +5,15 @@ import { CustomersRoutingModule } from './customers-routing.module';
 import { CustomersListComponent } from './customers-list/customers-list.component';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import { DialogBoxComponent } from './dialog-box/dialog-box.component';
 import { DemoMaterialModule } from 'app/shared/demo.module';
 import { NgScrollbarModule } from 'ngx-scrollbar';
+import { AddCustomersComponent } from './add-customers/add-customers.component';
 
 
 @NgModule({
   declarations: [
     CustomersListComponent,
-    DialogBoxComponent
+    AddCustomersComponent
   ],
   imports: [
     DemoMaterialModule,

ng-seed/src/app/appoinment/service-list-details/add-service/add-service.component.html

@@ -0,0 +1,20 @@
+<h5 mat-dialog-title> <strong>{{action}}  Services</strong> 
+    <button mat-icon-button  type="button" matTooltip="Close" class="button" matTooltipPosition="above" (click)="close()"
+    ><mat-icon>close</mat-icon></button></h5>
+    <form [formGroup]="form" (ngSubmit)="submit()">
+        <div mat-dialog-content class="my-table">
+
+            <mat-form-field  appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
+                <input placeholder="servicesName" matInput  formControlName="servicesName">
+                <mat-error *ngIf="myError('servicesName', 'required')">ServiceName is required</mat-error>
+                <mat-error *ngIf="myError('servicesName', 'maxlength')">Limit exceed</mat-error>
+              </mat-form-field> 
+              <ng-template #elseTemplate>
+                Sure to delete <b>{{local_data.servicesName}}</b>?
+              </ng-template>
+            </div>
+            <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>

ng-seed/src/app/appoinment/service-list-details/add-service/add-service.component.scss

@@ -0,0 +1,11 @@
+.button{
+    // float: right; 
+    margin-bottom: 1rem;
+    background-color: #ffff;
+    margin-top: -1rem;
+    // margin-left: 6rem;
+    float: right;
+}
+.mat-pane{
+    width: 20rem;
+}

ng-seed/src/app/appoinment/service-list-details/add-service/add-service.component.spec.ts

@@ -1,20 +1,20 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { DialogBoxComponent } from './dialog-box.component';
+import { AddServiceComponent } from './add-service.component';
 
-describe('DialogBoxComponent', () => {
+describe('AddServiceComponent', () => {
-  let component: DialogBoxComponent;
+  let component: AddServiceComponent;
-  let fixture: ComponentFixture<DialogBoxComponent>;
+  let fixture: ComponentFixture<AddServiceComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ DialogBoxComponent ]
+      declarations: [ AddServiceComponent ]
     })
     .compileComponents();
   });
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(DialogBoxComponent);
+    fixture = TestBed.createComponent(AddServiceComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

ng-seed/src/app/appoinment/service-list-details/add-service/add-service.component.ts

@@ -0,0 +1,58 @@
+import { Component, Inject, OnInit, Optional } from '@angular/core';
+import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { Router } from '@angular/router';
+export interface UsersData {
+  servicesName: string;
+  id: number;
+}
+
+@Component({
+  selector: 'app-add-service',
+  templateUrl: './add-service.component.html',
+  styleUrls: ['./add-service.component.scss']
+})
+export class AddServiceComponent implements OnInit {
+
+  form: FormGroup;
+  local_data:any;
+  action:string;
+  constructor(private router: Router,private formBuilder: FormBuilder,
+    public dialogRef: MatDialogRef<AddServiceComponent>,
+    @Optional() @Inject(MAT_DIALOG_DATA) public data: UsersData) {
+    console.log(data);
+    this.local_data = {...data};
+    this.action = this.local_data.action;
+  }
+  get f(){
+    return this.form.controls;
+  }
+
+close() {
+    this.dialogRef.close();
+}
+closeDialog(){
+  this.dialogRef.close({event:'Cancel'});
+}
+
+ngOnInit() {
+  this.form = new FormGroup({
+    servicesName: new FormControl('', [Validators.required, Validators.maxLength(20)]),
+ });
+  this.form.patchValue(this.local_data)
+  }
+
+  public myError = (controlName: string, errorName: string) =>{
+    return this.form.controls[controlName].hasError(errorName);
+ }
+
+    submit(){
+      console.log(this.form.value);
+      let tmp = this.form.value
+      tmp.serviceId = this.local_data.serviceId
+      this.dialogRef.close({event:this.action,data:tmp});
+      console.log(this.form.value);
+      console.log(this.action,this.local_data)
+    }
+
+}

ng-seed/src/app/appoinment/service-list-details/service-list.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { ServiceListRoutingModule } from './service-list-routing.module';
+import { ServiceListComponent } from './service-list/service-list.component'; 
+import { DemoMaterialModule } from 'app/shared/demo.module';
+import { AddServiceComponent } from './add-service/add-service.component';
+
+
+@NgModule({
+  declarations: [
+    ServiceListComponent,
+    AddServiceComponent
+  ],
+  imports: [
+    DemoMaterialModule,
+    CommonModule,
+    ServiceListRoutingModule,
+  ],
+  
+})
+export class ServiceListModule { }

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

@@ -1 +0,0 @@
-<p>add-user-list works!</p>

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

@@ -1,66 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
-import { Router } from '@angular/router';
-
-@Component({
-  selector: 'app-add-user-list',
-  templateUrl: './add-user-list.component.html',
-  styleUrls: ['./add-user-list.component.scss']
-})
-export class AddUserListComponent implements OnInit {
-
-  form: FormGroup;
-  fileToUpload: any;
-  imageUrl: any;
-
-  businessselect = new FormControl('', [Validators.required]);
-  selects = [
-    {name: 'A'},
-    {name: 'B'},
-    {name: 'C'},
-    {name: 'D'},
-  ];
-
-  constructor(private router: Router,private formBuilder: FormBuilder) { }
-
-  get f(){
-    return this.form.controls;
-  }
-
-ngOnInit() {
-  this.form = new FormGroup({
-  businessselect: new FormControl('', [Validators.required]),
-  bus_name: new FormControl('', [Validators.required, Validators.maxLength(20)]),
-  address: new FormControl('', [Validators.required, Validators.maxLength(50)]),
-  city: new FormControl('', [Validators.required, Validators.maxLength(10)]),
-  state: new FormControl('', [Validators.required, Validators.maxLength(10)]),
-  email: new FormControl('', [Validators.required, Validators.email,Validators.pattern(
-    '[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,63}$',
-  ),]),
-  contact_no: new FormControl('', [Validators.required, Validators.maxLength(10)]),
-  });
-  }
-
-  public myError = (controlName: string, errorName: string) =>{
-    return this.form.controls[controlName].hasError(errorName);
-    }
-
-  submit(){
-    console.log(this.form.value);
-  }
-  register() {
-    this.router.navigate(['/']);
-  }
-
-  handleFileInput(file: FileList) {
-    this.fileToUpload = file.item(0);
-
-    //Show image preview
-    let reader = new FileReader();
-    reader.onload = (event: any) => {
-      this.imageUrl = event.target.result;
-    }
-    reader.readAsDataURL(this.fileToUpload);
-  }
-
-}

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

@@ -0,0 +1,67 @@
+<mat-card class="settings-panel" >
+    <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" class="mat-pane">
+            <mat-select placeholder="Select Business" formControlName="businessselect" required>
+                <mat-option>--</mat-option>
+                <mat-option *ngFor="let business of businessList" [value]="business.busId">
+                    {{business.busName}}
+                </mat-option>
+            </mat-select>
+            <mat-error *ngIf="myError('businessselect', 'required')">role is required</mat-error>
+            <!-- <mat-error *ngIf="businessselect.hasError('required')">Please Business</mat-error>
+            <mat-error *ngIf="businessselect.hasError('invalidValue')">Please choose any other</mat-error> -->
+        </mat-form-field>
+          <mat-form-field  appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane" [disabled]="true">
+            <input placeholder="Role" matInput  formControlName="role">
+            <mat-error *ngIf="myError('role', 'required')">role is required</mat-error>
+            <mat-error *ngIf="myError('role', 'maxlength')">Limit exceed</mat-error>
+          </mat-form-field>
+    
+        <mat-form-field  appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
+          <input placeholder="Name" matInput  formControlName="userName">
+          <mat-error *ngIf="myError('userName', 'required')">Username is required</mat-error>
+          <mat-error *ngIf="myError('userName', 'maxlength')">Limit exceed</mat-error>
+        </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">
+          <mat-error *ngIf="!form.get('email')?.errors?.required && (form.get('email')?.errors?.pattern)">
+            Please enter a valid email address
+         </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>
+          <input matInput type="text" 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', 'maxlength')">Limit exceed</mat-error>
+       </mat-form-field>
+        <mat-form-field  appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
+          <input placeholder="Password" matInput  formControlName="password">
+          <mat-error *ngIf="myError('password', 'required')">Password is required</mat-error>
+          <mat-error *ngIf="myError('password', 'maxlength')">Limit exceed</mat-error>
+        </mat-form-field>  
+    
+        <!-- <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>    -->
+      </form>
+      </div>
+    </ng-scrollbar>
+      <ng-template #elseTemplate>
+        Sure to delete <b>{{local_data.name}}</b>?
+      </ng-template><br>
+      <div mat-dialog-actions>
+        <button mat-button (click)="doAction()" class="mat-green"  mat-raised-button >{{action}}</button>
+        <button mat-button (click)="closeDialog()" >Cancel</button>
+      </div>
+    </mat-card>
+      
+      

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

@@ -1,20 +1,20 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { DialogBoxComponent } from './dialog-box.component';
+import { AddUserComponent } from './add-user.component';
 
-describe('DialogBoxComponent', () => {
+describe('AddUserComponent', () => {
-  let component: DialogBoxComponent;
+  let component: AddUserComponent;
-  let fixture: ComponentFixture<DialogBoxComponent>;
+  let fixture: ComponentFixture<AddUserComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ DialogBoxComponent ]
+      declarations: [ AddUserComponent ]
     })
     .compileComponents();
   });
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(DialogBoxComponent);
+    fixture = TestBed.createComponent(AddUserComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

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

@@ -7,12 +7,14 @@ export interface UsersData {
   userName: string;
   id: number;
 }
+
 @Component({
-  selector: 'app-user-dialog-box',
+  selector: 'app-add-user',
-  templateUrl: './user-dialog-box.component.html',
+  templateUrl: './add-user.component.html',
-  styleUrls: ['./user-dialog-box.component.scss']
+  styleUrls: ['./add-user.component.scss']
 })
-export class UserDialogBoxComponent implements OnInit {
+export class AddUserComponent implements OnInit {
+
   hide: boolean;
   form: FormGroup;
   fileToUpload: any;
@@ -23,7 +25,7 @@ export class UserDialogBoxComponent implements OnInit {
   businessList: any;
   public role = [{'name':'BADMIN'},{'name':'CONSULT'},{'name':'FRONTDESK'}]
   constructor(private router: Router,private formBuilder: FormBuilder,
-    public dialogRef: MatDialogRef<UserDialogBoxComponent>,
+    public dialogRef: MatDialogRef<AddUserComponent>,
     @Optional() @Inject(MAT_DIALOG_DATA) public data: UsersData,public _bus:BusinessService) {
     console.log(data);
     this.local_data = {...data};

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

@@ -4,7 +4,7 @@ import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { MatTable, MatTableDataSource } from '@angular/material/table';
 import Swal from 'sweetalert2/dist/sweetalert2.js';
-import { UserDialogBoxComponent } from '../user-dialog-box/user-dialog-box.component';
+import { AddUserComponent } from '../add-user/add-user.component';
 import { UserService } from '../user-service/user.service';
 
 export interface UsersData {
@@ -132,7 +132,7 @@ export class UserListComponent implements OnInit {
   } 
   openDialog(action,obj) {
     obj.action = action;
-    const dialogRef = this.dialog.open(UserDialogBoxComponent, {
+    const dialogRef = this.dialog.open(AddUserComponent, {
       // width: '30%',
       height: '100%',
       // maxWidth: '38vw',

ng-seed/src/app/appoinment/user/user.module.ts

@@ -1,21 +1,19 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { UserRoutingModule } from './user-routing.module';
-import { AddUserListComponent } from './add-user-list/add-user-list.component';
 import { UserListComponent } from './user-list/user-list.component';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import { UserDialogBoxComponent } from './user-dialog-box/user-dialog-box.component';
 import { DemoMaterialModule } from 'app/shared/demo.module';
 import { NgScrollbarModule } from 'ngx-scrollbar';
+import { AddUserComponent } from './add-user/add-user.component';
 
 
 
 @NgModule({
   declarations: [
-    AddUserListComponent,
     UserListComponent,
-    UserDialogBoxComponent
+    AddUserComponent
   ],
   imports: [
     DemoMaterialModule,

ng-seed/src/app/end-user/service-list-details/dialog-box/dialog-box.component.spec.ts

@@ -1,20 +1,20 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { DialogBoxComponent } from './dialog-box.component';
+import { AddUserComponent } from './add-user.component';
 
-describe('DialogBoxComponent', () => {
+describe('AddUserComponent', () => {
-  let component: DialogBoxComponent;
+  let component: AddUserComponent;
-  let fixture: ComponentFixture<DialogBoxComponent>;
+  let fixture: ComponentFixture<AddUserComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ DialogBoxComponent ]
+      declarations: [ AddUserComponent ]
     })
     .compileComponents();
   });
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(DialogBoxComponent);
+    fixture = TestBed.createComponent(AddUserComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

ng-seed/src/app/end-user/service-list-details/dialog-box/dialog-box.component.ts

@@ -6,17 +6,19 @@ export interface UsersData {
   servicesName: string;
   id: number;
 }
+
 @Component({
-  selector: 'app-dialog-box',
+  selector: 'app-add-service',
-  templateUrl: './dialog-box.component.html',
+  templateUrl: './add-service.component.html',
-  styleUrls: ['./dialog-box.component.scss']
+  styleUrls: ['./add-service.component.scss']
 })
-export class DialogBoxComponent implements OnInit {
+export class AddServiceComponent implements OnInit {
+
   form: FormGroup;
   local_data:any;
   action:string;
   constructor(private router: Router,private formBuilder: FormBuilder,
-    public dialogRef: MatDialogRef<DialogBoxComponent>,
+    public dialogRef: MatDialogRef<AddServiceComponent>,
     @Optional() @Inject(MAT_DIALOG_DATA) public data: UsersData) {
     console.log(data);
     this.local_data = {...data};
@@ -52,4 +54,5 @@ ngOnInit() {
       console.log(this.form.value);
       console.log(this.action,this.local_data)
     }
+
 }

ng-seed/src/app/end-user/service-list-details/service-list.component.ts

@@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { MatTableDataSource } from '@angular/material/table';
 import Swal from 'sweetalert2';
-import { DialogBoxComponent } from '../dialog-box/dialog-box.component';
+import { AddServiceComponent } from '../add-service/add-service.component';
 import { ApiServiceService } from '../service-api-services/api-service.service';
 
 @Component({
@@ -101,7 +101,7 @@ export class ServiceListComponent implements OnInit {
 
   openDialog(action,obj) {
     obj.action = action;
-    const dialogRef = this.dialog.open(DialogBoxComponent, {
+    const dialogRef = this.dialog.open(AddServiceComponent, {
       width: '39%',
       height: '100%',
       // maxWidth: '38vw',