Files
familytree/UI/src/app/staff/staff.component.html
T
2025-08-10 22:01:36 +10:00

64 lines
2.4 KiB
HTML

<div class="shadow-2xl rounded p-2 mt-2">
<h3>Staff List</h3>
<div>
<form>
<div class="grid grid-cols-4 gap-2">
<div class="">
<label for="login">Email</label>
<input id="login" pInputText name="login" type="text" [(ngModel)]="email"
class="inputfield w-full p-inputtext-sm">
</div>
<div class="">
<label for="lastname1">Surname</label>
<input id="lastname1" pInputText name="lastname" type="text" [(ngModel)]="lastname"
class="inputfield w-full p-inputtext-sm">
</div>
<div class="">
<label for="firstname">First Name</label>
<input id="firstname" name="firstname" pInputText type="text" [(ngModel)]="firstname"
class="inputfield w-full p-inputtext-sm">
</div>
<div class="flex items-end">
<button pButton pRipple class="p-button-sm mr-2 " type="submit" icon="pi pi-search" iconPos="left" label="Search"
(click)="search()"></button>
<button pButton pRipple class="p-button-sm " type="button" icon="pi pi-user-plus" iconPos="left" label="New Staff"
(click)="newUser()"></button>
</div>
</div>
</form>
</div>
<div>
<p-table [value]="userList" sortMode="multiple" styleClass="p-datatable-sm"
styleClass="p-datatable-sm" responsiveLayout="stack" [loading]="loading">
<ng-template pTemplate="header">
<tr>
<th pSortableColumn="email">Email<p-sortIcon field="email"></p-sortIcon>
</th>
<th pSortableColumn="lastname">Surname <p-sortIcon field="lastname"></p-sortIcon>
</th>
<th pSortableColumn="firstname">First Name <p-sortIcon field="firstname"></p-sortIcon>
</th>
<th >Active </th>
<th>Edit</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-user>
<tr>
<td>{{user.email}}</td>
<td>{{user.lastname}}</td>
<td>{{user.firstname}}</td>
<td>
<i class="pi" [ngClass]="{'true-icon pi-check-circle': user.active, 'false-icon pi-times-circle': !user.active}"></i>
</td>
<td>
<button pButton type="button" icon="pi pi-pencil" class="p-button-rounded p-button-text"
(click)="edit(user.id)"></button>
</td>
</tr>
</ng-template>
</p-table>
</div>