80 lines
3.3 KiB
HTML
80 lines
3.3 KiB
HTML
<div>
|
|
<p-table
|
|
#dt
|
|
dataKey="id"
|
|
[value]="doctors"
|
|
[paginator]="true"
|
|
[rows]="10"
|
|
[totalRecords]="totalRecords"
|
|
[lazy]="true"
|
|
(onLazyLoad)="loadDoctors($event)"
|
|
[rowsPerPageOptions]="[10, 20, 50]"
|
|
[responsiveLayout]="'scroll'"
|
|
[globalFilterFields]="['id', 'firstName', 'lastName', 'mobile', 'email', 'specialization']"
|
|
[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">
|
|
<h4 class="m-0">Doctor List</h4>
|
|
<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)="dt.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)="loadDoctors($event)">
|
|
<i class="pi pi-refresh"></i>
|
|
</button>
|
|
<button pButton class="p-button-rounded p-button-success ml-2" (click)="openNewDoctorDialog()" pTooltip="Add Doctor" tooltipPosition="left">
|
|
<i class="pi pi-plus-circle"></i>
|
|
</button>
|
|
<button pButton class="p-button-rounded p-button-warning ml-2" (click)="exportDoctors()">
|
|
<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="mobile">Mobile <p-sortIcon field="mobile" /></th>
|
|
<th pSortableColumn="email">Email <p-sortIcon field="email" /></th>
|
|
<th pSortableColumn="specialization">Specialization <p-sortIcon field="specialization" /></th>
|
|
<th pSortableColumn="experience">Experience <p-sortIcon field="experience" /></th>
|
|
<th pSortableColumn="rating">Rating <p-sortIcon field="rating" /></th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</ng-template>
|
|
<ng-template pTemplate="body" let-doctor>
|
|
<tr>
|
|
<td>Dr. {{ doctor.firstName }} {{ doctor.lastName }}</td>
|
|
<td>{{ doctor.mobile }}</td>
|
|
<td>{{ doctor.email }}</td>
|
|
<td>{{ doctor.specialization }}</td>
|
|
<td>{{ doctor.experience }} years</td>
|
|
<td>{{ doctor.rating }}</td>
|
|
<td class="d-flex">
|
|
<button class="btn btn-warning btn-sm ml-1" (click)="editDoctor(doctor)">
|
|
<i class="pi pi-pencil"></i>
|
|
</button>
|
|
<button class="btn btn-danger btn-sm ml-1" (click)="deleteDoctor(doctor.id)">
|
|
<i class="pi pi-trash"></i>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
</ng-template>
|
|
</p-table>
|
|
</div>
|
|
|
|
<app-doctor-dialog [Id]="DoctorIdToEdit"[isEditMode]="isEditMode"
|
|
[visible]="isModalVisible"*ngIf="isModalVisible" [name]="'Doctor'" (close)="closeDialog()"></app-doctor-dialog>
|