447 lines
16 KiB
HTML
447 lines
16 KiB
HTML
<div
|
|
class="modal fade show d-block"
|
|
tabindex="-1"
|
|
role="dialog"
|
|
style="background: rgba(0, 0, 0, 0.5)"
|
|
*ngIf="visible"
|
|
aria-label="l('name')"
|
|
>
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header py-4">
|
|
<h4 class="text-success mb-0 fs-3 fw-normal">
|
|
{{ isEditMode ? ('::edit' | abpLocalization) : ('::create' | abpLocalization) }}
|
|
{{ '::appointmentStatus' | abpLocalization }}
|
|
</h4>
|
|
<button
|
|
tabindex="0"
|
|
type="button"
|
|
(click)="onClose()"
|
|
class="btn-close"
|
|
aria-label="Close"
|
|
></button>
|
|
</div>
|
|
<form #appointmentForm="ngForm" (ngSubmit)="saveAppointment(appointmentForm)">
|
|
<div class="p-fluid grid justify-content-center">
|
|
<div class="field col-md-5">
|
|
<label for="fname"
|
|
>{{ '::firstName' | abpLocalization }}<span class="text-danger">*</span></label
|
|
>
|
|
<span class="p-input-icon-left p-input-icon-right">
|
|
<i class="pi pi-user"></i>
|
|
<input
|
|
autofocus
|
|
pInputText
|
|
id="fname"
|
|
name="fname"
|
|
[(ngModel)]="appointment.firstName"
|
|
#fnameCtrl="ngModel"
|
|
required
|
|
minlength="2"
|
|
maxlength="30"
|
|
[ngClass]="{
|
|
'is-valid': fnameCtrl.valid && fnameCtrl.touched,
|
|
'is-invalid': fnameCtrl.invalid && fnameCtrl.touched
|
|
}"
|
|
/>
|
|
<i *ngIf="fnameCtrl.valid && fnameCtrl.touched" class="pi pi-check text-success"></i>
|
|
<i *ngIf="fnameCtrl.invalid && fnameCtrl.touched" class="pi pi-times text-danger"></i>
|
|
</span>
|
|
|
|
<small class="text-danger" *ngIf="fnameCtrl.invalid && fnameCtrl.touched">
|
|
<span *ngIf="fnameCtrl.errors?.required">{{
|
|
'::firstNameRequired' | abpLocalization
|
|
}}</span>
|
|
<span *ngIf="fnameCtrl.errors?.minlength">
|
|
{{
|
|
'::minLength'
|
|
| abpLocalization : { length: fnameCtrl.errors?.minlength.requiredLength }
|
|
}}
|
|
</span>
|
|
<span *ngIf="fnameCtrl.errors?.maxlength">{{
|
|
'::maxLength'
|
|
| abpLocalization : { length: fnameCtrl.errors?.maxlength.requiredLength }
|
|
}}</span>
|
|
</small>
|
|
</div>
|
|
|
|
<div class="field col-md-1"></div>
|
|
|
|
<div class="field col-md-5">
|
|
<label for="lname"
|
|
>{{ '::lastName' | abpLocalization }}<span class="text-danger">*</span></label
|
|
>
|
|
<span class="p-input-icon-left p-input-icon-right">
|
|
<i class="pi pi-user"></i>
|
|
<input
|
|
pInputText
|
|
id="lname"
|
|
name="lname"
|
|
[(ngModel)]="appointment.lastName"
|
|
#lnameCtrl="ngModel"
|
|
required
|
|
minlength="2"
|
|
maxlength="30"
|
|
[ngClass]="{
|
|
'is-valid': lnameCtrl.valid && lnameCtrl.touched,
|
|
'is-invalid': lnameCtrl.invalid && lnameCtrl.touched
|
|
}"
|
|
/>
|
|
<i *ngIf="lnameCtrl.valid && lnameCtrl.touched" class="pi pi-check text-success"></i>
|
|
<i *ngIf="lnameCtrl.invalid && lnameCtrl.touched" class="pi pi-times text-danger"></i>
|
|
</span>
|
|
<small class="text-danger" *ngIf="lnameCtrl.invalid && lnameCtrl.touched">
|
|
<span *ngIf="lnameCtrl.errors?.required">{{
|
|
'::lastNameRequired' | abpLocalization
|
|
}}</span>
|
|
<span *ngIf="lnameCtrl.errors?.minlength">
|
|
{{
|
|
'::minLength'
|
|
| abpLocalization : { length: lnameCtrl.errors?.minlength.requiredLength }
|
|
}}
|
|
</span>
|
|
<span *ngIf="lnameCtrl.errors?.maxlength">
|
|
{{
|
|
'::maxLength'
|
|
| abpLocalization : { length: lnameCtrl.errors?.maxlength.requiredLength }
|
|
}}
|
|
</span>
|
|
</small>
|
|
</div>
|
|
|
|
<div class="field col-md-5">
|
|
<label>{{ '::gender' | abpLocalization }} <span class="text-danger">*</span></label>
|
|
<div class="flex align-items-center p-input-icon-right">
|
|
<p-radioButton
|
|
name="gender"
|
|
value="1"
|
|
[(ngModel)]="appointment.gender"
|
|
inputId="male"
|
|
#genderCtrl="ngModel"
|
|
required
|
|
></p-radioButton>
|
|
<label for="male" class="ml-2 mr-3">{{ '::male' | abpLocalization }}</label>
|
|
|
|
<p-radioButton
|
|
name="gender"
|
|
value="2"
|
|
[(ngModel)]="appointment.gender"
|
|
inputId="female"
|
|
required
|
|
></p-radioButton>
|
|
<label for="female" class="ml-2">{{ '::female' | abpLocalization }}</label>
|
|
|
|
<i
|
|
*ngIf="genderCtrl.valid && genderCtrl.touched"
|
|
class="pi pi-check text-success ml-2"
|
|
></i>
|
|
<i
|
|
*ngIf="genderCtrl.invalid && genderCtrl.touched"
|
|
class="pi pi-times text-danger ml-2"
|
|
></i>
|
|
</div>
|
|
<small class="text-danger d-block" *ngIf="genderCtrl.invalid && genderCtrl.touched">
|
|
{{ '::genderRequired' | abpLocalization }}
|
|
</small>
|
|
</div>
|
|
|
|
<div class="field col-md-1"></div>
|
|
|
|
<div class="field col-md-5">
|
|
<label for="mobile"
|
|
>{{ '::mobileNo' | abpLocalization }} <span class="text-danger">*</span></label
|
|
>
|
|
<span class="p-input-icon-left p-input-icon-right">
|
|
<i class="pi pi-phone"></i>
|
|
<input
|
|
pInputText
|
|
id="mobile"
|
|
name="mobile"
|
|
[(ngModel)]="appointment.mobile"
|
|
#mobileCtrl="ngModel"
|
|
required
|
|
pattern="^[0-9]{10}$"
|
|
[ngClass]="{
|
|
'is-valid': mobileCtrl.valid && mobileCtrl.touched,
|
|
'is-invalid': mobileCtrl.invalid && mobileCtrl.touched
|
|
}"
|
|
/>
|
|
<i
|
|
*ngIf="mobileCtrl.valid && mobileCtrl.touched"
|
|
class="pi pi-check text-success"
|
|
></i>
|
|
<i
|
|
*ngIf="mobileCtrl.invalid && mobileCtrl.touched"
|
|
class="pi pi-times text-danger"
|
|
></i>
|
|
</span>
|
|
<small class="text-danger d-block" *ngIf="mobileCtrl.invalid && mobileCtrl.touched">
|
|
<span *ngIf="mobileCtrl.errors?.required">{{
|
|
'::mobileNoRequired' | abpLocalization
|
|
}}</span>
|
|
<span *ngIf="mobileCtrl.errors?.pattern">{{
|
|
'::mobileNoInvalid' | abpLocalization
|
|
}}</span>
|
|
</small>
|
|
</div>
|
|
|
|
<div class="field col-md-11">
|
|
{{ '::address' | abpLocalization }} <span class="text-danger">*</span>
|
|
<span class="p-input-icon-left p-input-icon-right">
|
|
<i class="pi pi-map-marker"></i>
|
|
<input
|
|
pInputText
|
|
id="address"
|
|
name="address"
|
|
[(ngModel)]="appointment.address"
|
|
#addressCtrl="ngModel"
|
|
required
|
|
minlength="5"
|
|
maxlength="100"
|
|
[ngClass]="{
|
|
'is-valid': addressCtrl.valid && addressCtrl.touched,
|
|
'is-invalid': addressCtrl.invalid && addressCtrl.touched
|
|
}"
|
|
/>
|
|
<i
|
|
*ngIf="addressCtrl.valid && addressCtrl.touched"
|
|
class="pi pi-check text-success"
|
|
></i>
|
|
<i
|
|
*ngIf="addressCtrl.invalid && addressCtrl.touched"
|
|
class="pi pi-times text-danger"
|
|
></i>
|
|
</span>
|
|
<small class="text-danger d-block" *ngIf="addressCtrl.invalid && addressCtrl.touched">
|
|
<span *ngIf="addressCtrl.errors?.required">{{
|
|
'::addressRequired' | abpLocalization
|
|
}}</span>
|
|
<span *ngIf="addressCtrl.errors?.minlength">
|
|
{{
|
|
'::minLength'
|
|
| abpLocalization : { length: addressCtrl.errors?.minlength.requiredLength }
|
|
}}
|
|
</span>
|
|
<span *ngIf="addressCtrl.errors?.maxlength">
|
|
{{
|
|
'::maxLength'
|
|
| abpLocalization : { length: addressCtrl.errors?.maxlength.requiredLength }
|
|
}}
|
|
</span>
|
|
</small>
|
|
</div>
|
|
|
|
<div class="field col-md-5">
|
|
<label for="email"
|
|
>{{ '::emailId' | abpLocalization }} <span class="text-danger">*</span></label
|
|
>
|
|
<span class="p-input-icon-left p-input-icon-right">
|
|
<i class="pi pi-envelope"></i>
|
|
<input
|
|
pInputText
|
|
id="email"
|
|
name="email"
|
|
[(ngModel)]="appointment.email"
|
|
#emailCtrl="ngModel"
|
|
required
|
|
email
|
|
[ngClass]="{
|
|
'is-valid': emailCtrl.valid && emailCtrl.touched,
|
|
'is-invalid': emailCtrl.invalid && emailCtrl.touched
|
|
}"
|
|
/>
|
|
<i *ngIf="emailCtrl.valid && emailCtrl.touched" class="pi pi-check text-success"></i>
|
|
<i *ngIf="emailCtrl.invalid && emailCtrl.touched" class="pi pi-times text-danger"></i>
|
|
</span>
|
|
<small class="text-danger d-block" *ngIf="emailCtrl.invalid && emailCtrl.touched">
|
|
<span *ngIf="emailCtrl.errors?.required">{{
|
|
'::emailRequired' | abpLocalization
|
|
}}</span>
|
|
<span *ngIf="emailCtrl.errors?.email">{{ '::emailInvalid' | abpLocalization }}</span>
|
|
</small>
|
|
</div>
|
|
|
|
<div class="field col-md-1"></div>
|
|
|
|
<div class="field col-md-5">
|
|
<label for="dob"
|
|
>{{ '::dateOfBirth' | abpLocalization }} <span class="text-danger">*</span></label
|
|
>
|
|
<p-calendar
|
|
id="dob"
|
|
required
|
|
name="dob"
|
|
[(ngModel)]="Dateofbirth"
|
|
[showIcon]="true"
|
|
required
|
|
></p-calendar>
|
|
<small
|
|
class="p-error"
|
|
*ngIf="appointmentForm.controls.dob?.invalid && appointmentForm.controls.dob?.touched"
|
|
>
|
|
{{ '::dobRequired' | abpLocalization }}
|
|
</small>
|
|
</div>
|
|
|
|
<div class="field col-md-5">
|
|
<label for="doctor"
|
|
>{{ '::consultingDoctor' | abpLocalization }}
|
|
<span class="text-danger">*</span></label
|
|
>
|
|
<p-dropdown
|
|
id="doctor"
|
|
name="doctor"
|
|
[(ngModel)]="appointment.doctorId"
|
|
[options]="doctorOptions"
|
|
placeholder="Select Doctor"
|
|
optionLabel="label"
|
|
optionValue="value"
|
|
required
|
|
></p-dropdown>
|
|
</div>
|
|
<div class="field col-md-1"></div>
|
|
|
|
<div class="field col-md-5">
|
|
<label for="date"
|
|
>{{ '::dateOfAppointment' | abpLocalization }}
|
|
<span class="text-danger">*</span></label
|
|
>
|
|
<p-calendar
|
|
id="date"
|
|
name="date"
|
|
[(ngModel)]="AppointmentDate"
|
|
[showIcon]="true"
|
|
required
|
|
></p-calendar>
|
|
</div>
|
|
|
|
<div class="field col-md-5">
|
|
<label for="time"
|
|
>{{ '::timeOfAppointment' | abpLocalization }}
|
|
<span class="text-danger">*</span></label
|
|
>
|
|
<span class="p-input-icon-left">
|
|
<i class="pi pi-clock"></i>
|
|
<input
|
|
pInputText
|
|
id="time"
|
|
name="time"
|
|
type="time"
|
|
[(ngModel)]="appointment.timeOfAppointment"
|
|
required
|
|
/>
|
|
</span>
|
|
</div>
|
|
<div class="field col-md-1"></div>
|
|
|
|
<div class="field col-md-5">
|
|
<label for="injury">{{ '::injuryCondition' | abpLocalization }}</label>
|
|
<span class="p-input-icon-left">
|
|
<i class="pi pi-exclamation-triangle"></i>
|
|
<input
|
|
pInputText
|
|
id="injury"
|
|
name="injury"
|
|
[(ngModel)]="appointment.injuryORContion"
|
|
/>
|
|
</span>
|
|
</div>
|
|
|
|
<div class="field col-md-5">
|
|
<label for="insurance">
|
|
{{ '::insuranceProvider' | abpLocalization }}
|
|
</label>
|
|
<span class="p-input-icon-left">
|
|
<i class="pi pi-credit-card"></i>
|
|
<input
|
|
pInputText
|
|
id="insurance"
|
|
name="insuranceProvider"
|
|
[(ngModel)]="appointment.insuranceProvider"
|
|
/>
|
|
</span>
|
|
</div>
|
|
<div class="field col-md-1"></div>
|
|
|
|
<div class="field col-md-5">
|
|
<label for="status">
|
|
{{ '::appointmentStatus' | abpLocalization }}
|
|
</label>
|
|
<p-dropdown
|
|
id="status"
|
|
name="status"
|
|
[(ngModel)]="appointment.appointmentStatus"
|
|
[options]="appointmentStatuses"
|
|
optionLabel="label"
|
|
optionValue="value"
|
|
placeholder="Select Status"
|
|
></p-dropdown>
|
|
</div>
|
|
|
|
<div class="field col-md-5">
|
|
<label for="visitType">
|
|
{{ '::visitType' | abpLocalization }}
|
|
</label>
|
|
<p-dropdown
|
|
id="visitType"
|
|
name="visitType"
|
|
[(ngModel)]="appointment.visitType"
|
|
[options]="visitTypes"
|
|
optionLabel="label"
|
|
optionValue="value"
|
|
placeholder="Select Visit Type"
|
|
></p-dropdown>
|
|
</div>
|
|
<div class="field col-md-1"></div>
|
|
|
|
<div class="field col-md-5">
|
|
<label for="paymentStatus">
|
|
{{ '::paymentStatus' | abpLocalization }}
|
|
</label>
|
|
<p-dropdown
|
|
id="paymentStatus"
|
|
name="paymentStatus"
|
|
[(ngModel)]="appointment.paymentStatus"
|
|
[options]="paymentStatuses"
|
|
optionLabel="label"
|
|
optionValue="value"
|
|
placeholder="Select Payment Status"
|
|
></p-dropdown>
|
|
</div>
|
|
|
|
<div class="field col-11">
|
|
<label for="notes">
|
|
{{ '::notes' | abpLocalization }}
|
|
</label>
|
|
<textarea
|
|
id="notes"
|
|
name="notes"
|
|
[(ngModel)]="appointment.note"
|
|
rows="5"
|
|
cols="30"
|
|
pInputTextarea
|
|
></textarea>
|
|
</div>
|
|
|
|
<div class="field col-11 flex justify-content-end">
|
|
<button
|
|
pButton
|
|
type="submit"
|
|
[label]="'::save' | abpLocalization"
|
|
class="p-button-success"
|
|
[disabled]="appointmentForm.invalid"
|
|
></button>
|
|
<button
|
|
pButton
|
|
type="button"
|
|
[label]="'::cancel' | abpLocalization"
|
|
class="p-button-secondary ml-2"
|
|
(click)="onClose()"
|
|
></button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|