apt-maintenance-account/src/app/users-roles/component.html

Apartment Maintenance Account Tracking Application - Client Side in Angular

<h2>Users-to-Roles</h2>

<div class="list-to-list">

		<label class="llabel">Users</label>
		<select class="lselect" size="20" [(ngModel)]="lId">
			<option
				*ngFor="let lmodel of lstream | async"
				value={{lmodel.id}}
				(click)="onlSelect(lmodel)"
				title={{lmodel.email}}
			>{{lmodel.name}}</option>
		</select>

		<label class="alabel">Granted Roles</label>
		<select class="aselect" size="20" multiple [(ngModel)]="aIds">
			<option
				*ngFor="let amodel of attachedStream | async"
				value={{amodel.id}}
				(click)="onaSelect()"
				title={{amodel.description}}
			>{{amodel.name}}</option>
		</select>
		<button
			class="dbutton"
			(click)="detach()"
			title="Revoke Roles"
			[disabled]="!canDetach"
			[hidden]="!editAllowed"
			>>></button>

		<label class="dlabel">Available Roles</label>
		<select class="dselect" size="20" multiple [(ngModel)]="dIds">
			<option
				*ngFor="let dmodel of detachedStream | async"
				value={{dmodel.id}}
				(click)="ondSelect()"
				title={{dmodel.description}}
			>{{dmodel.name}}</option>
		</select>
		<button
			class="abutton"
			(click)="attach()"
			title="Grant Roles"
			[disabled]="!canAttach"
			[hidden]="!editAllowed"
			><<</button>

		<button
			class="homeButton"
			(click)="goHome()"
			title="Return to Home page"
			><i class="fa fa-home" aria-hidden="true"></i> Home</button>
</div>