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

Apartment Maintenance Account Tracking Application - Client Side in Angular

<h2>Account List</h2>

<div class="grid-form">
	<div data-row-span="6">
		<div data-field-span="1">
			<label>From</label>
			<input
				type="date"
				[ngModel]="fromDate | date: 'yyyy-MM-dd'"
				(ngModelChange)="fromDate = $event; getList()" />
		</div>

		<div data-field-span="1">
			<label>To</label>
			<input
				type="date"
				[ngModel]="toDate | date: 'yyyy-MM-dd'"
				(ngModelChange)="toDate = $event; getList()" />
		</div>

		<div data-field-span="1">
			<label>Field Names</label>
			<ss-multiselect-dropdown
				[options]="myOptions"
				[texts]="myTexts"
				[settings]="mySettings"
				[(ngModel)]="optionsModel">
			</ss-multiselect-dropdown>
		</div>
	</div>
</div>
<br />

<table class="table table-responsive">
	<thead>
		<tr>
			<th *ngIf="optionsModel.includes(1)" title="Transaction Date">Txn Date</th>
			<th *ngIf="optionsModel.includes(2)" title="Flat Number (optional)">Flat#</th>
			<th *ngIf="optionsModel.includes(3)" title="Transacting Person">Name</th>
			<th *ngIf="optionsModel.includes(4)" title="Transaction Month (belongs to)">Mth</th>
			<th *ngIf="optionsModel.includes(5)" title="Transaction Year (belongs to)">Yr</th>
			<th *ngIf="optionsModel.includes(6)" title="Credit / Debit">Cr/Dr</th>
			<th *ngIf="optionsModel.includes(7)" title="Transaction Amount">Amt in &#8377;</th>
			<th *ngIf="optionsModel.includes(8)" title="Balance Amount">&#8377; Balance</th>
			<th *ngIf="optionsModel.includes(9)" title="Transaction Category">Category</th>
			<th title="View/Edit/Delete">Actions
				<span *ngIf="addAllowed">
						<button
							class="btn btn-link"
							(click)="add()"
							title="Add Account"
						><i class="fa fa-plus" aria-hidden="true"></i></button>
				</span>
			</th>
		</tr>
	</thead>
	<tbody>
		<tr *ngFor="let model of models | async">
			<td *ngIf="optionsModel.includes(1)">{{ model.recorded_at }}</td>
			<td *ngIf="optionsModel.includes(2)">{{ model.flat_number }}</td>
			<td *ngIf="optionsModel.includes(3)">{{ model.name }}</td>
			<td *ngIf="optionsModel.includes(4)">{{ months[model.for_month - 1].shortName }}</td>
			<td *ngIf="optionsModel.includes(5)">{{ model.for_year }}</td>
			<td *ngIf="optionsModel.includes(6)">{{ model.crdr }}</td>
			<td *ngIf="optionsModel.includes(7)">{{ model.amount }}</td>
			<td *ngIf="optionsModel.includes(8)">{{ model.balance }}</td>
			<td *ngIf="optionsModel.includes(9)">{{ model.category }}</td>
			<td>
				<button
					class="view1 btn btn-link"
					(click)="onSelect(model)"
					title="View details"
					*ngIf="authzn.allowsView(model.owner_id)"
				><i class="fa fa-eye" aria-hidden="true"></i></button>
				<button
					class="delete1 btn btn-link"
					(click)="delete(model); $event.stopPropagation()"
					title="Delete record"
					*ngIf="authzn.allowsDelete(model.owner_id)"
				><i class="fa fa-trash" aria-hidden="true"></i></button>
			</td>
		</tr>
	</tbody>

	<tfoot>
		<tr>
			<th scope="row" [colSpan]="optionsModel.length">Total Records</th>
			<td colspan="1">{{totalRecords}}</td>
		</tr>
	</tfoot>

</table>