129 lines
4.5 KiB
HTML
129 lines
4.5 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 -->
|
|
<h4 class="m-0">Appointment List</h4>
|
|
|
|
<!-- Center: Search Bar with Icon Inside -->
|
|
<div class="flex-grow-1 flex justify-content-center">
|
|
<div class="input-group">
|
|
<span class="input-group-text"><i class="pi pi-search"></i></span>
|
|
<input
|
|
pInputText
|
|
type="text"
|
|
class="form-control"
|
|
(input)="dt2.filterGlobal($event.target.value, 'contains')"
|
|
[(ngModel)]="globalFilter"
|
|
placeholder="Search keyword"
|
|
/>
|
|
</div>
|
|
</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)="exportAppointments()"
|
|
>
|
|
<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>
|
|
<span class="badge" [ngClass]="appointment.gender === 1 ? 'bg-primary' : 'bg-pink'">
|
|
{{ getGenderLabel(appointment.gender) }}
|
|
</span>
|
|
</td>
|
|
<td>{{ appointment.dateOfAppointment | date }}</td>
|
|
<td>{{ appointment.timeOfAppointment }}</td>
|
|
<td>{{ appointment.mobile }}</td>
|
|
<td>{{ appointment.email }}</td>
|
|
<td>
|
|
<span
|
|
class="badge"
|
|
[ngClass]="
|
|
appointment.appointmentStatus === 1
|
|
? 'bg-success'
|
|
: appointment.appointmentStatus === 2
|
|
? 'bg-primary'
|
|
: 'bg-danger'
|
|
"
|
|
>
|
|
{{ getStatusLabel(appointment.appointmentStatus) }}
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<span class="badge" [ngClass]="appointment.visitType === 1 ? 'bg-success' : 'bg-danger'">
|
|
{{ getVisitTypeLabel(appointment.visitType) }}
|
|
</span>
|
|
</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>
|
|
|
|
<app-appointment-dialog [appointmentId]="appointmentIdToEdit"[isEditMode]="isEditMode"
|
|
[visible]="isModalVisible"*ngIf="isModalVisible" [name]="'Appointment'" (close)="closeDialog()"></app-appointment-dialog>
|