372 lines
11 KiB
HTML
372 lines
11 KiB
HTML
<div>
|
|
<p-table
|
|
#dt2
|
|
dataKey="id"
|
|
[value]="appointments"
|
|
[paginator]="true"
|
|
[rows]="10"
|
|
[totalRecords]="totalRecords"
|
|
[lazy]="true"
|
|
(onLazyLoad)="loadappointments($event)"
|
|
[rowsPerPageOptions]="[10, 20, 50]"
|
|
[responsiveLayout]="'scroll'"
|
|
[globalFilterFields]="['id', 'name', 'status']"
|
|
[filters]="{ global: { value: '', matchMode: 'contains' } }"
|
|
class="table table-striped"
|
|
>
|
|
<ng-template pTemplate="caption">
|
|
<div class="flex align-items-center justify-content-between mb-3 gap-3">
|
|
<!-- Left: Title -->
|
|
<h2 class="m-0">Appointment List</h2>
|
|
|
|
<!-- Center: Search Bar with Icon Inside -->
|
|
<div class="flex-grow-1 flex justify-content-center">
|
|
<span class="p-input-icon-left w-100">
|
|
<i class="pi pi-search"></i>
|
|
<input
|
|
pInputText
|
|
type="text"
|
|
[(ngModel)]="globalFilter"
|
|
placeholder="Search Appointments"
|
|
(input)="dt2.filterGlobal(globalFilter, 'contains')"
|
|
class="w-full"
|
|
/>
|
|
</span>
|
|
</div>
|
|
<div>
|
|
<button
|
|
pButton
|
|
class="p-button-rounded p-button-secondary ml-2"
|
|
(click)="loadappointments($event)"
|
|
>
|
|
<i class="pi pi-refresh"></i>
|
|
</button>
|
|
<button
|
|
*ngIf="createPermission"
|
|
pButton
|
|
class="p-button-rounded p-button-success ml-2"
|
|
(click)="openNewAppointmentDialog()"
|
|
pTooltip="Add Appointment"
|
|
tooltipPosition="left"
|
|
>
|
|
<i class="pi pi-plus-circle"></i>
|
|
</button>
|
|
<button pButton class="p-button-rounded p-button-warning ml-2" (click)="exportPatient()">
|
|
<i class="pi pi-download"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</ng-template>
|
|
|
|
<ng-template pTemplate="header">
|
|
<tr>
|
|
<th pSortableColumn="firstName">Name <p-sortIcon field="firstName" /></th>
|
|
<th pSortableColumn="doctor">Doctor <p-sortIcon field="doctor" /></th>
|
|
<th pSortableColumn="gender">gender <p-sortIcon field="gender" /></th>
|
|
<th pSortableColumn="dateOfAppointment">Date <p-sortIcon field="dateOfAppointment" /></th>
|
|
<th pSortableColumn="timeOfAppointment">Time<p-sortIcon field="timeOfAppointment" /></th>
|
|
<th>Mobile No</th>
|
|
<th>Email</th>
|
|
<th pSortableColumn="appointmentStatus">Appointment Status<p-sortIcon field="appointmentStatus" /></th>
|
|
<th pSortableColumn="visitType">Visit Type<p-sortIcon field="visitType" /></th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</ng-template>
|
|
|
|
<ng-template pTemplate="body" let-appointment>
|
|
<tr>
|
|
<td>{{ appointment.firstName }} {{ appointment.lastName }}</td>
|
|
<td>{{ appointment.doctor }}</td>
|
|
<td>
|
|
<p-chip
|
|
[severity]="appointment.gender === 1 ? 'info' : 'danger'"
|
|
[styleClass]="'px-2 py-1 text-sm font-medium'"
|
|
>
|
|
|
|
{{ getGenderLabel(appointment.gender) }}
|
|
</p-chip>
|
|
|
|
</td>
|
|
<td>{{ appointment.dateOfAppointment | date }}</td>
|
|
<td>{{ appointment.timeOfAppointment }}</td>
|
|
<td>{{ appointment.mobile }}</td>
|
|
<td>{{ appointment.email }}</td>
|
|
<td>
|
|
<p-chip
|
|
[severity]="appointment.appointmentStatus === 1 ? 'info' : 'danger'"
|
|
[styleClass]="'px-2 py-1 text-sm font-medium'"
|
|
>
|
|
|
|
{{ getStatusLabel(appointment.appointmentStatus) }}
|
|
</p-chip>
|
|
</td>
|
|
<td>
|
|
|
|
<p-chip
|
|
[severity]="appointment.visitType === 1 ? 'info' : 'danger'"
|
|
[styleClass]="'px-2 py-1 text-sm font-medium'"
|
|
>
|
|
|
|
{{ getVisitTypeLabel(appointment.visitType) }}
|
|
</p-chip>
|
|
</td>
|
|
<td class="d-flex">
|
|
<button class="btn btn-warning btn-sm ml-1" (click)="editAppointment(appointment)">
|
|
<i class="pi pi-pencil"></i>
|
|
</button>
|
|
<button class="btn btn-danger btn-sm ml-1"
|
|
(click)="deleteAppointment(appointment.id)"><i class="pi pi-trash"></i></button>
|
|
</td>
|
|
</tr>
|
|
</ng-template>
|
|
</p-table>
|
|
</div>
|
|
|
|
<p-dialog
|
|
header="{{ isEditMode ? 'Edit Appointment' : 'New Appointment' }}"
|
|
[(visible)]="appointmentDialog"
|
|
[modal]="true"
|
|
[closable]="true"
|
|
[style]="{ width: '80%' }"
|
|
>
|
|
<form #appointmentForm="ngForm" (ngSubmit)="saveAppointment(appointmentForm)">
|
|
<div class="p-fluid grid justify-content-center">
|
|
<div class="field col-md-5">
|
|
<label for="fname">First Name</label>
|
|
<span class="p-input-icon-left">
|
|
<i class="pi pi-user"></i>
|
|
<input pInputText id="fname" name="fname" [(ngModel)]="appointment.firstName" required />
|
|
</span>
|
|
</div>
|
|
<div class="field col-md-1"></div>
|
|
|
|
<div class="field col-md-5">
|
|
<label for="lname">Last Name</label>
|
|
<span class="p-input-icon-left">
|
|
<i class="pi pi-user"></i>
|
|
<input pInputText id="lname" name="lname" [(ngModel)]="appointment.lastName" required />
|
|
</span>
|
|
</div>
|
|
|
|
<div class="field col-md-5">
|
|
<label>Gender</label>
|
|
<div class="flex align-items-center">
|
|
<p-radioButton
|
|
name="gender"
|
|
value="1"
|
|
[(ngModel)]="appointment.gender"
|
|
inputId="male"
|
|
required
|
|
></p-radioButton>
|
|
<label for="male" class="ml-2 mr-3">Male</label>
|
|
<p-radioButton
|
|
name="gender"
|
|
value="2"
|
|
[(ngModel)]="appointment.gender"
|
|
inputId="female"
|
|
required
|
|
></p-radioButton>
|
|
<label for="female" class="ml-2">Female</label>
|
|
</div>
|
|
</div>
|
|
<div class="field col-md-1"></div>
|
|
|
|
<div class="field col-md-5">
|
|
<label for="mobile">Mobile No</label>
|
|
<span class="p-input-icon-left">
|
|
<i class="pi pi-phone"></i>
|
|
<input pInputText id="mobile" name="mobile" [(ngModel)]="appointment.mobile" required />
|
|
</span>
|
|
<small
|
|
class="p-error"
|
|
*ngIf="
|
|
appointmentForm.controls.mobile?.invalid && appointmentForm.controls.mobile?.touched
|
|
"
|
|
>Mobile number Required</small
|
|
>
|
|
</div>
|
|
<div class="field col-md-11">
|
|
<label for="mobile">Address</label>
|
|
<span class="p-input-icon-left">
|
|
<i class="pi pi-map-marker"></i>
|
|
<input
|
|
pInputText
|
|
id="Address"
|
|
name="Address"
|
|
[(ngModel)]="appointment.address"
|
|
required
|
|
/>
|
|
</span>
|
|
</div>
|
|
|
|
<div class="field col-md-5">
|
|
<label for="email">Email ID</label>
|
|
<span class="p-input-icon-left">
|
|
<i class="pi pi-envelope"></i>
|
|
<input pInputText id="email" name="email" [(ngModel)]="appointment.email" required />
|
|
</span>
|
|
<small
|
|
class="p-error"
|
|
*ngIf="appointmentForm.controls.email?.invalid && appointmentForm.controls.email?.touched"
|
|
>Email address Required</small
|
|
>
|
|
</div>
|
|
<div class="field col-md-1"></div>
|
|
|
|
<div class="field col-md-5">
|
|
<label for="dob">Date of Birth</label>
|
|
<p-calendar
|
|
id="dob"
|
|
required
|
|
name="dob"
|
|
[(ngModel)]="appointment.dob"
|
|
[showIcon]="true"
|
|
required
|
|
></p-calendar>
|
|
<small
|
|
class="p-error"
|
|
*ngIf="appointmentForm.controls.dob?.invalid && appointmentForm.controls.dob?.touched"
|
|
>DOB Required</small
|
|
>
|
|
</div>
|
|
|
|
<div class="field col-md-5">
|
|
<label for="doctor">Consulting Doctor</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">Date of Appointment</label>
|
|
<p-calendar
|
|
id="date"
|
|
name="date"
|
|
[(ngModel)]="appointment.dateOfAppointment"
|
|
[showIcon]="true"
|
|
required
|
|
></p-calendar>
|
|
</div>
|
|
|
|
<div class="field col-md-5">
|
|
<label for="time">Time Of Appointment</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">Injury/Condition</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">Insurance Provider</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">Appointment Status</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">Visit Type</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">Payment Status</label>
|
|
<p-dropdown
|
|
id="paymentStatus"
|
|
name="paymentStatus"
|
|
[(ngModel)]="appointment.paymentStatus"
|
|
[options]="paymentStatuses"
|
|
optionLabel="label"
|
|
optionValue="value"
|
|
placeholder="Select Payment Status"
|
|
|
|
></p-dropdown>
|
|
</div>
|
|
|
|
<!-- Notes (Full Width) -->
|
|
<div class="field col-11">
|
|
<label for="notes">Notes</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"
|
|
class="p-button-success"
|
|
[disabled]="appointmentForm.invalid"
|
|
></button>
|
|
<button
|
|
pButton
|
|
type="button"
|
|
label="Cancel"
|
|
class="p-button-secondary ml-2"
|
|
(click)="closeDialog()"
|
|
></button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</p-dialog>
|