57 lines
1.8 KiB
HTML
57 lines
1.8 KiB
HTML
<div class="container">
|
|
<div class="header">
|
|
<div class="dropdown position-absolute top-0 end-0 m-3">
|
|
<button class="btn align-items-center d-flex" type="button" id="userDropdown" data-bs-toggle="dropdown"
|
|
aria-expanded="false">
|
|
<img src="user.svg" alt="User Icon" class="rounded-circle" style="width: 30px; height: 30px;">
|
|
</button>
|
|
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userDropdown">
|
|
<li><a class="dropdown-item" href="/logout">Log out</a></li>
|
|
</ul>
|
|
</div>
|
|
<h1>Employees</h1>
|
|
</div>
|
|
|
|
<div class="header-actions">
|
|
<form [formGroup]="searchForm">
|
|
<div class="search-bar">
|
|
<input type="text" placeholder="Search employee" formControlName="search">
|
|
<button (click)="submit()">Search</button>
|
|
</div>
|
|
<p class="text-body-tertiary">Search for a propertiy of an Employee. eg. First Name</p>
|
|
</form>
|
|
<button class="add-button">Add employee</button>
|
|
</div>
|
|
|
|
<table class="employee-table">
|
|
<thead>
|
|
<tr>
|
|
<th><span class="sortable">First Name</span></th>
|
|
<th><span class="sortable">Last Name</span></th>
|
|
<th>Street</th>
|
|
<th>Postcode</th>
|
|
<th>City</th>
|
|
<th>Phone</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@if (employees) {
|
|
@for (employee of employees; track employee) {
|
|
<tr>
|
|
<td>{{ employee.firstName }}</td>
|
|
<td>{{ employee.lastName }}</td>
|
|
<td>{{ employee.street }}</td>
|
|
<td>{{ employee.postcode }}</td>
|
|
<td>{{ employee.city }}</td>
|
|
<td>{{ employee.phone }}</td>
|
|
<td>
|
|
<button (click)="editEmployee(employee.id)">Edit</button>
|
|
<button>Delete</button>
|
|
</td>
|
|
</tr>
|
|
}
|
|
}
|
|
</tbody>
|
|
</table>
|
|
</div>
|