diff --git a/ng-seed/src/app/appoinment/appoinments/appoinments-list/appoinments-list.component.ts b/ng-seed/src/app/appoinment/appoinments/appoinments-list/appoinments-list.component.ts index 3ff14f9..e0596a3 100644 --- a/ng-seed/src/app/appoinment/appoinments/appoinments-list/appoinments-list.component.ts +++ b/ng-seed/src/app/appoinment/appoinments/appoinments-list/appoinments-list.component.ts @@ -161,7 +161,7 @@ export class AppoinmentsListComponent implements OnInit { openDialog(action,obj) { obj.action = action; const dialogRef = this.dialog.open(DialogBoxComponent, { - width: '45%', + width: '55%', height: '100%', // maxWidth: '38vw', position: { right: '0' }, diff --git a/ng-seed/src/app/appoinment/appoinments/dialog-box/dialog-box.component.html b/ng-seed/src/app/appoinment/appoinments/dialog-box/dialog-box.component.html index 1982a72..5c37321 100644 --- a/ng-seed/src/app/appoinment/appoinments/dialog-box/dialog-box.component.html +++ b/ng-seed/src/app/appoinment/appoinments/dialog-box/dialog-box.component.html @@ -9,6 +9,159 @@
+ +
+ + + + -- + + {{business.busname}} + + + Please choose an Business + Please choose any other + +
+ +
+ + + + -- + + {{business.service}} + + + Please choose an Service + Please choose any other + +
+ +
+ + + + -- + + {{business.practitioner}} + + + Please choose an Practitioner + Please choose any other + +
+ +
+ + + + + + + + + + + + +
+
+ Wed, 12 Apr 2023 +
+
+
+ +
+
+ MORNING +
+
+ + + +
+
+
+
+ AFTERNOON +
+
+ + +
+
+
+
+ EVENING +
+
+ + +
+
+
+
+ NIGHT +
+
+ +
+
+
+
+
+
+ + + +
+ + + + + Add customer + + {{business.customer}} + + + Please choose an Customer + Please choose any other + +
+ + + +
+ + +
+ +
+ + +
-
- - - - -- - - {{business.service}} - - - Please choose an Service - Please choose any other - -
+ -
+ - - - - - -
- -
- - -
+ + +
diff --git a/ng-seed/src/app/appoinment/appoinments/dialog-box/dialog-box.component.scss b/ng-seed/src/app/appoinment/appoinments/dialog-box/dialog-box.component.scss index 420c3de..07a69a4 100644 --- a/ng-seed/src/app/appoinment/appoinments/dialog-box/dialog-box.component.scss +++ b/ng-seed/src/app/appoinment/appoinments/dialog-box/dialog-box.component.scss @@ -1,9 +1,9 @@ // ::ng-deep .cdk-overlay-pane{ // width: 60%!important; // } -// .mat-pane{ -// width: 20rem; -// } +.mat-pane{ + width: 20rem; +} .button{ margin-bottom: 1rem; background-color: #ffff!important; @@ -64,15 +64,18 @@ line-height: 15px; font-size: 14px; } +.Date-container{ + margin-right: 40px!important; +} // ::ng-deep .mat-form-field-appearance-outline .mat-form-field-wrapper { // margin: 0.25em 0; // width: 175%!important; // } .mate{ - width: 15% !important; + width: 22% !important; } .date-marge{ - margin-left: 5.5rem; + margin-left: 1.5rem; } .field-inline{ display: inline-flex; @@ -90,4 +93,49 @@ } .scrollHV { height: calc(100vh - 190px); +} +.notes{ + margin-left: 7.5rem; + margin-top: 2rem; + color: #666; +} +//popup +.card { + box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); + transition: 0.3s; + width: 100%; + // padding: 10px; + } + .topnav { + overflow: hidden; + background: #52518F; + color: #ffff; + text-align: center; + padding: 15px; + // display: flex; + } + .days{ + font-size: 12px; + color: #666; + border-bottom: 1px solid #ccc; + padding: 5px; + } +// .flexxx{ + +// display: flex; +// // margin-top: 1rem; +// // border-top:1px solid #ccc; +// } +// .date-time{ +// position: absolute; +// // top: -11px; +// bottom: 0px; +// } +// .date-position{ +// position: relative; +// } +.add-customer{ + padding: 5px; + font-size: 12px; + color: #666; } \ No newline at end of file diff --git a/ng-seed/src/app/appoinment/appoinments/dialog-box/dialog-box.component.ts b/ng-seed/src/app/appoinment/appoinments/dialog-box/dialog-box.component.ts index 4751e66..46d3426 100644 --- a/ng-seed/src/app/appoinment/appoinments/dialog-box/dialog-box.component.ts +++ b/ng-seed/src/app/appoinment/appoinments/dialog-box/dialog-box.component.ts @@ -4,15 +4,18 @@ import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; import { Router } from '@angular/router'; export interface UsersData { // id: number; + busname: string; + service: string; + practitioner: string; + appoinmentDate: Date; appoinmentTime: string; + customer: string; + booking: string; // workspace: string; - service: string; staff: string; - customer: string; payment: string; status: string; - appoinmentDate: Date; appoinmentSlots: string; } @Component({ @@ -21,12 +24,46 @@ export interface UsersData { styleUrls: ['./dialog-box.component.scss'] }) export class DialogBoxComponent implements OnInit { + public show:boolean = false; + public buttonName:any = 'Show'; form: FormGroup; // fileToUpload: any; // imageUrl: any; action:string; local_data:any; url: string | ArrayBuffer; + heroes = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado']; + + + busname = new FormControl('', [Validators.required]); + name = [ + {busname: 'Hospital'}, + {busname: 'School'}, + {busname: 'Sports'}, + ]; + + service = new FormControl('', [Validators.required]); + select = [ + {service: 'Liver Test'}, + {service: 'Blood Test'}, + {service: 'Blood Count Test '}, + ]; + + practitioner = new FormControl('', [Validators.required]); + practitioners = [ + {practitioner: 'Hospital'}, + {practitioner: 'School'}, + {practitioner: 'Sports'}, + ]; + + customer = new FormControl('', [Validators.required]); + customers = [ + {customer: 'A'}, + {customer: 'B'}, + {customer: 'C'}, + {customer: 'B'}, + ]; + workspace = new FormControl('', [Validators.required]); selects = [ @@ -34,12 +71,7 @@ export class DialogBoxComponent implements OnInit { {workspace: 'Sample'}, {workspace: 'Test'}, ]; - service = new FormControl('', [Validators.required]); - select = [ - {service: 'Hospital'}, - {service: 'School'}, - {service: 'Sports'}, - ]; + staff = new FormControl('', [Validators.required]); staffs = [ {staff: 'Kumar.S'}, @@ -60,13 +92,7 @@ export class DialogBoxComponent implements OnInit { {appoinmentSlots: '07PM - 07.30PM'}, ]; - customer = new FormControl('', [Validators.required]); - customers = [ - {customer: 'A'}, - {customer: 'B'}, - {customer: 'C'}, - {customer: 'B'}, - ]; + constructor(private router: Router,private formBuilder: FormBuilder, public dialogRef: MatDialogRef, @Optional() @Inject(MAT_DIALOG_DATA) public data: UsersData) { @@ -101,18 +127,32 @@ export class DialogBoxComponent implements OnInit { this.dialogRef.close(); } +toggle() { + this.show = !this.show; + + // Change the name of the button. + if(this.show) + this.buttonName = "Hide"; + else + this.buttonName = "Show"; +} + + ngOnInit() { this.form = new FormGroup({ - - workspace: new FormControl('', [Validators.required]), + busname: new FormControl('', [Validators.required]), service: new FormControl('', [Validators.required]), - staff: new FormControl('', [Validators.required]), - slot: new FormControl('', [Validators.required]), + practitioner: new FormControl('', [Validators.required]), appoinmentDate: new FormControl('', [Validators.required]), appoinmentTime: new FormControl('', [Validators.required]), - appoinmentSlots: new FormControl('', [Validators.required]), customer: new FormControl('', [Validators.required]), note: new FormControl('', [Validators.required]), + + workspace: new FormControl('', [Validators.required]), + staff: new FormControl('', [Validators.required]), + slot: new FormControl('', [Validators.required]), + appoinmentSlots: new FormControl('', [Validators.required]), + }); console.log(this.local_data, this.selects) // this.form.controls['note'].setValue('Sample')