apt-maintenance-account/src/app/permissions/list.component.html

Apartment Maintenance Account Tracking Application - Client Side in Angular

<h2>List of Permissions</h2>

<table summary="Permission list">
	<caption>{{caption}}</caption>
	<thead>
		<tr>
			<th title="Permitted Operations" scope="col">Operations</th>
			<th title="Resource Name" scope="col">Resource</th>
			<th title="Conditions / constriaints" scope="col">Conditions</th>
			<th title="Describe the permission" scope="col">Description</th>
			<th title="View/Edit/Delete">Actions
				<span>
						<button
							class="btn btn-link"
							(click)="add()"
							title="Add New Permission"
							*ngIf="addAllowed"
						><i class="fa fa-plus" aria-hidden="true"></i></button>
				</span>
			</th>
		</tr>
	</thead>
	<tbody>
		<tr *ngFor="let model of models | async">
			<th scope="row">{{ model.operations }}</th>
			<td>{{ model.resource }}</td>
			<td>{{ model.condition }}</td>
			<td>{{ model.description }}</td>
			<td>
				<button
					class="btn btn-link"
					(click)="onSelect(model)"
					title="View details"
					*ngIf="viewAllowed || editAllowed"
				><i class="fa fa-eye" aria-hidden="true"></i></button>
				<button
					class="btn btn-link"
					(click)="delete(model); $event.stopPropagation()"
					title="Delete record"
					*ngIf="deleteAllowed"
				><i class="fa fa-trash" aria-hidden="true"></i></button>
			</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<th scope="row" colspan="4">Total Permissions</th>
			<td colspan="1">{{totalRecords}}</td>
		</tr>
	</tfoot>
</table>