Merge branch 'master' of bitbucket.org:venbainformationtechnology/appointments_frontend
This commit is contained in:
bitbucket
commit
9ff289a1b1
@ -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' },
|
||||
|
||||
@ -9,6 +9,159 @@
|
||||
<ng-scrollbar class="scrollHV">
|
||||
<div mat-dialog-content class="my-table">
|
||||
<form [formGroup]="form" (ngSubmit)="submit()">
|
||||
|
||||
<div class="field">
|
||||
<label for="name-field" class="label-container">
|
||||
Business
|
||||
</label>
|
||||
<mat-form-field appearance="outline" class="mat-pane">
|
||||
<mat-select placeholder="Select Business" formControlName="busname" required>
|
||||
<mat-option>--</mat-option>
|
||||
<mat-option *ngFor="let business of name" [value]="business.busname">
|
||||
{{business.busname}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
<mat-error *ngIf="service.hasError('required')">Please choose an Business</mat-error>
|
||||
<mat-error *ngIf="service.hasError('invalidValue')">Please choose any other</mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label for="name-field" class="label-container">
|
||||
Service
|
||||
</label>
|
||||
<mat-form-field appearance="outline" class="mat-pane">
|
||||
<mat-select placeholder="Select Service" formControlName="service" required>
|
||||
<mat-option>--</mat-option>
|
||||
<mat-option *ngFor="let business of select" [value]="business.service">
|
||||
{{business.service}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
<mat-error *ngIf="service.hasError('required')">Please choose an Service</mat-error>
|
||||
<mat-error *ngIf="service.hasError('invalidValue')">Please choose any other</mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label for="name-field" class="label-container">
|
||||
Practitioner
|
||||
</label>
|
||||
<mat-form-field appearance="outline" class="mat-pane">
|
||||
<mat-select placeholder="Select Practitioner" formControlName="practitioner" required>
|
||||
<mat-option>--</mat-option>
|
||||
<mat-option *ngFor="let business of practitioners" [value]="business.practitioner">
|
||||
{{business.practitioner}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
<mat-error *ngIf="service.hasError('required')">Please choose an Practitioner</mat-error>
|
||||
<mat-error *ngIf="service.hasError('invalidValue')">Please choose any other</mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div class="mb-4 date-position">
|
||||
<label for="name-field" class="label-container Date-container">
|
||||
Date & Time
|
||||
</label>
|
||||
<mat-form-field appearance="outline" class="mate">
|
||||
<mat-datepicker #picker4></mat-datepicker>
|
||||
<mat-datepicker-toggle matPrefix [for]="picker4"></mat-datepicker-toggle>
|
||||
<input matInput [matDatepicker]="picker4" placeholder="Choose a date" formControlName="appoinmentDate" >
|
||||
<!-- {{business.appoinmentDate}} -->
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="outline" class="mate date-marge" (click)="toggle()" id="bt">
|
||||
<input matInput name="week" formControlName="appoinmentTime">
|
||||
</mat-form-field>
|
||||
<!-- <mat-form-field appearance="outline" class="mate date-marge" (click)="toggle()" id="bt">
|
||||
<input type="time" matInput name="week" min="09:00" max="18:00" formControlName="appoinmentTime" />
|
||||
</mat-form-field> -->
|
||||
|
||||
<div class="date-time" *ngIf="show">
|
||||
<div class="topnav">
|
||||
Wed, 12 Apr 2023
|
||||
</div>
|
||||
<div class="card">
|
||||
<div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="95" fxFlex.lg="95" fxFlex.xl="95" class="m-gap p-gap flx">
|
||||
|
||||
<div fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25" class="p-gap">
|
||||
<div class="mt-1 days">
|
||||
MORNING
|
||||
</div>
|
||||
<div class="flexxx d-flex mt-2">
|
||||
<button mat-raised-button mat-button-sm class="mr-1 mt-1 hoverButton buttontimeline" >09:00am</button>
|
||||
<button mat-raised-button mat-button-sm class="mr-1 mt-1 hoverButton buttontimeline" >09:15am</button>
|
||||
<!-- <button mat-raised-button mat-button-sm class="mr-1 mt-1 hoverButton buttontimeline" >09:30am</button>
|
||||
<button mat-raised-button mat-button-sm class="mr-1 mt-1 hoverButton buttontimeline" >09:45am</button>
|
||||
<button mat-raised-button mat-button-sm class="mr-1 mt-1 hoverButton buttontimeline" >10:00am</button>
|
||||
<button mat-raised-button mat-button-sm class="mr-1 mt-1 hoverButton buttontimeline" >10:15am</button>
|
||||
<button mat-raised-button mat-button-sm class="mr-1 mt-1 hoverButton buttontimeline" >10:30am</button>
|
||||
<button mat-raised-button mat-button-sm class="mr-1 mt-1 hoverButton buttontimeline" >10:45am</button>
|
||||
<button mat-raised-button mat-button-sm class="mr-1 mt-1 hoverButton buttontimeline" >11:00am</button>
|
||||
<button mat-raised-button mat-button-sm class="mr-1 mt-1 hoverButton buttontimeline" >11:15am</button>
|
||||
<button mat-raised-button mat-button-sm class="mr-1 mt-1 hoverButton buttontimeline" >11:30am</button>
|
||||
<button mat-raised-button mat-button-sm class="mr-1 mt-1 hoverButton buttontimeline" >11:45am</button> -->
|
||||
</div>
|
||||
</div>
|
||||
<div fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25" class="p-gap">
|
||||
<div class="mt-1 days">
|
||||
AFTERNOON
|
||||
</div>
|
||||
<div class="flexxx d-flex mt-2">
|
||||
<button mat-raised-button mat-button-sm class="mr-1 mt-1 hoverButton buttontimeline" >12:00pm</button>
|
||||
<button mat-raised-button mat-button-sm class="mr-1 mt-1 hoverButton buttontimeline" >12:15pm</button>
|
||||
</div>
|
||||
</div>
|
||||
<div fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25" class="p-gap">
|
||||
<div class="mt-1 days">
|
||||
EVENING
|
||||
</div>
|
||||
<div class="flexxx d-flex mt-2">
|
||||
<button mat-raised-button mat-button-sm class="mr-1 mt-1 hoverButton buttontimeline" >04:00pm</button>
|
||||
<button mat-raised-button mat-button-sm class="mr-1 mt-1 hoverButton buttontimeline" >04:00pm</button>
|
||||
</div>
|
||||
</div>
|
||||
<div fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25" class="p-gap">
|
||||
<div class="mt-1 days">
|
||||
NIGHT
|
||||
</div>
|
||||
<div class="flexxx mt-2">
|
||||
<button mat-raised-button mat-button-sm class="mr-1 mt-1 hoverButton buttontimeline" >No Slots</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="field">
|
||||
<label for="name-field" class="label-container">
|
||||
Customer
|
||||
</label>
|
||||
<mat-form-field appearance="outline" class="mat-pane">
|
||||
<mat-select placeholder="Select Customer" formControlName="customer" required>
|
||||
<!-- <div class="add-customer"> Add customer</div> -->
|
||||
<mat-option >Add customer</mat-option>
|
||||
<mat-option *ngFor="let business of customers" [value]="business.customer">
|
||||
{{business.customer}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
<mat-error *ngIf="customer.hasError('required')">Please choose an Customer</mat-error>
|
||||
<mat-error *ngIf="customer.hasError('invalidValue')">Please choose any other</mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="field-inline">
|
||||
<label for="name-field" class="label-container">Notes</label>
|
||||
<textarea rows="5" cols="41" name="comment" formControlName="note"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="notes">
|
||||
<input type="checkbox" id="scales" name="scales" checked>
|
||||
<label for="scales">Send notifications for customer</label>
|
||||
</div>
|
||||
<!-- <div class="field">
|
||||
<label for="name-field" class="label-container">
|
||||
Workspace
|
||||
@ -24,21 +177,7 @@
|
||||
<mat-error *ngIf="workspace.hasError('invalidValue')">Please choose any other</mat-error>
|
||||
</mat-form-field>
|
||||
</div> -->
|
||||
<div class="field">
|
||||
<label for="name-field" class="label-container">
|
||||
Service
|
||||
</label>
|
||||
<mat-form-field appearance="outline" class="mat-pane">
|
||||
<mat-select placeholder="Select Service" formControlName="service" required>
|
||||
<mat-option>--</mat-option>
|
||||
<mat-option *ngFor="let business of select" [value]="business.service">
|
||||
{{business.service}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
<mat-error *ngIf="service.hasError('required')">Please choose an Service</mat-error>
|
||||
<mat-error *ngIf="service.hasError('invalidValue')">Please choose any other</mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<!-- <div class="field">
|
||||
<label for="name-field" class="label-container">
|
||||
Assign Staff
|
||||
@ -54,7 +193,7 @@
|
||||
<mat-error *ngIf="staff.hasError('invalidValue')">Please choose any other</mat-error>
|
||||
</mat-form-field>
|
||||
</div> -->
|
||||
<div class="field">
|
||||
<!-- <div class="field">
|
||||
<label for="name-field" class="label-container">
|
||||
Slots
|
||||
</label>
|
||||
@ -68,41 +207,10 @@
|
||||
<mat-error *ngIf="appoinmentSlots.hasError('required')">Please choose an Slots</mat-error>
|
||||
<mat-error *ngIf="appoinmentSlots.hasError('invalidValue')">Please choose any other</mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="name-field" class="label-container">
|
||||
Date & Time
|
||||
</label>
|
||||
<mat-form-field appearance="outline" class="mate">
|
||||
<mat-datepicker #picker4></mat-datepicker>
|
||||
<mat-datepicker-toggle matPrefix [for]="picker4"></mat-datepicker-toggle>
|
||||
<input matInput [matDatepicker]="picker4" placeholder="Choose a date" formControlName="appoinmentDate" >
|
||||
<!-- {{business.appoinmentDate}} -->
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="outline" class="mate date-marge">
|
||||
<input type="time" matInput name="week" min="09:00" max="18:00" formControlName="appoinmentTime" />
|
||||
<!-- {{business.appoinmentTime}} -->
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<!-- <div class="field">
|
||||
<label for="name-field" class="label-container">
|
||||
Customer
|
||||
</label>
|
||||
<mat-form-field appearance="outline" class="mat-pane">
|
||||
<mat-select placeholder="Select Customer" formControlName="customer" required>
|
||||
<mat-option>--</mat-option>
|
||||
<mat-option *ngFor="let business of customers" [value]="business.customer">
|
||||
{{business.customer}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
<mat-error *ngIf="customer.hasError('required')">Please choose an Customer</mat-error>
|
||||
<mat-error *ngIf="customer.hasError('invalidValue')">Please choose any other</mat-error>
|
||||
</mat-form-field>
|
||||
</div> -->
|
||||
<div class="field-inline">
|
||||
<label for="name-field" class="label-container">Notes</label>
|
||||
<textarea rows="5" cols="41" name="comment" formControlName="note"></textarea>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</ng-scrollbar>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
@ -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<DialogBoxComponent>,
|
||||
@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')
|
||||
|
||||
Loading…
Reference in New Issue
Block a user