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

Apartment Maintenance Account Tracking Application - Client Side in Angular

<h2>List of Residents</h2>

<table summary="Residents">
	<caption>{{caption}}</caption>
	<thead>
		<tr>
			<th title="User Name" scope="col">User Name</th>
			<th title="First Name" scope="col">First Name</th>
			<th title="Last Name" scope="col">Last Name</th>
			<th title="Resident Type" scope="col">Type</th>
			<th title="Occupied On" scope="col">Occupied On</th>
			<th title="Vacated On" scope="col">Vacated On</th>
			<th title="Delete" scope="col">{{deleteAllowed?'Actions':''}}</th>
		</tr>
	</thead>
	<tbody>
		<tr [hidden]="!addAllowed">
			<td>
				<select
					class="form-control"
					id="userNm"
					required
					[(ngModel)]="model.owner_id"
					name="userNm"
					#userNm="ngModel">
					<option value="" disabled selected>
						--Select User--
					</option>
					<option
						*ngFor="let user of users"
						[value]="user.id"
					 >{{user.name}}</option>
				</select>
			</td>
			<td>
				<input
					type="text"
					required
					[(ngModel)]="model.first_name"
					placeholder="<first name here>"
					#firstName="ngModel" />
			</td>
			<td>
				<input
					type="text"
					required
					[(ngModel)]="model.last_name"
					placeholder="<last name here>"
					#lastName="ngModel" />
			</td>
			<td>
					<select
						class="form-control"
						id="isa"
						required
						[(ngModel)]="model.is_a"
						name="isa"
						#isa="ngModel">
						<option value="" disabled selected>
							-Type-
						</option>
						<option
							*ngFor="let type of types"
							[value]="type"
						 >{{type}}</option>
					</select>
			</td>
			<td>
				<input
					type="date"
					[(ngModel)]="model.occupied_on"
					placeholder="<Occupy Date>"
					#lastName="ngModel" />
			</td>
			<td>
				<input
					type="date"
					[(ngModel)]="model.vacated_on"
					placeholder="<Vacated date>"
					#lastName="ngModel" />
			</td>
			<td>
				<button
					class="btn btn-link"
					(click)="save()"
					title="Add New Resident"
					[disabled]="!(model.first_name && model.is_a && model.owner_id)"
					><i class="fa fa-plus" aria-hidden="true"></i></button>
			</td>
		</tr>
		<tr *ngFor="let model of models | async">

			<th scope="row" (click)="rowSelected($event, model)" *ngIf="!canEdit[model.id]">
				{{ userName(model.owner_id) }}
			</th>
			<th scope="row" *ngIf="canEdit[model.id]">
				<select	[(ngModel)]="editModel.owner_id">
					<option
						*ngFor="let user of users"
						[value]="user.id"
					 >{{user.name}}</option>
				</select>
			</th>

			<td scope="row" (click)="rowSelected($event, model)" *ngIf="!canEdit[model.id]">
				{{ model.first_name }}
			</td>
			<td scope="row" *ngIf="canEdit[model.id]">
				<input
					type="text"
					[(ngModel)]="editModel.first_name"
					placeholder="<first name here>"
				/>
			</td>

			<td (click)="rowSelected($event, model)" *ngIf="!canEdit[model.id]">
				{{ model.last_name }}
			</td>
			<td *ngIf="canEdit[model.id]">
				<input
					type="text"
					[(ngModel)]="editModel.last_name"
					placeholder="<last name here>"
				/>
			</td>

			<td (click)="rowSelected($event, model)" *ngIf="!canEdit[model.id]">
				{{ model.is_a }}
			</td>
			<td *ngIf="canEdit[model.id]">
				<select	[(ngModel)]="editModel.is_a">
					<option
						*ngFor="let type of types"
						[value]="type"
					 >{{type}}</option>
				</select>
			</td>

			<td (click)="rowSelected($event, model)" *ngIf="!canEdit[model.id]">
				{{ model.occupied_on }}
			</td>
			<td *ngIf="canEdit[model.id]">
				<input
					type="date"
					[(ngModel)]="editModel.occupied_on"
					value=""
					placeholder="<Occupy Date>"
				/>
			</td>

			<td (click)="rowSelected($event, model)" *ngIf="!canEdit[model.id]">
				{{ model.vacated_on }}
			</td>
			<td *ngIf="canEdit[model.id]">
				<input
					type="date"
					[(ngModel)]="editModel.vacated_on"
					placeholder="<Vacated Date>"
				/>
			</td>


			<td>
				<button
					class="btn btn-link"
					(click)="saveChanges(editModel, model)"
					title="Save Changes"
					*ngIf="canEdit[model.id]"
					><i class="fa fa-floppy-o" aria-hidden="true"></i></button>

				<button
					class="btn btn-link"
					(click)="cancelChanges(editModel)"
					title="Cancel changes"
					*ngIf="canEdit[model.id]"
					><i class="fa fa-times" aria-hidden="true"></i></button>

				<button
					class="delete1 btn btn-link"
					(click)="delete(model, models); $event.stopPropagation()"
					title="Delete Resident"
					*ngIf="authzn.allowsDelete(model.owner_id) && !canEdit[model.id]"
				><i class="fa fa-trash" aria-hidden="true"></i></button>
			</td>

		</tr>

	</tbody>

	<tfoot>
		<tr>
			<th scope="row" colspan="6">Total Residents</th>
			<td colspan="1">{{totalRecords}}</td>
		</tr>
	</tfoot>
</table>