connect-admin/src/app/pages/managers/managers.component.html

54 lines
2.4 KiB
HTML

<div class="uk-card uk-card-default uk-card-body">
<div *ngIf="error" class="uk-alert uk-alert-danger uk-flex uk-flex-top">
<span class="uk-margin-small-right uk-icon" uk-icon="warning"></span>
<div>
{{error}}
</div>
</div>
<div *ngIf="loadManagers || loadPending" class="loading-gif"></div>
<div *ngIf="!loadManagers && !loadPending">
<div class="uk-text-large uk-text-bold uk-text-center uk-margin-medium-bottom">Managers</div>
<div class="uk-flex uk-flex-right">
<button class="uk-button uk-button-primary" (click)="openInviteModal()">Invite a Manager</button>
</div>
<ul uk-tab class="uk-tab links">
<li *ngIf="managers" [class.uk-active]="showManagers" (click)="showManagers = true">
<a>Managers <span class="uk-badge space">{{managers.length | number}}</span></a>
</li>
<li *ngIf="pending" [class.uk-active]="!showManagers" (click)="showManagers = false">
<a>Pending Managers <span class="uk-badge space">{{pending.length | number}}</span></a>
</li>
</ul>
<div class="custom-dataTable-content">
<div class="uk-overflow-container">
<table class="uk-table uk-table-striped divider-table" id="dpTable">
<thead>
<tr>
<th class="uk-text-center">Email</th>
<th class="uk-text-center">Action</th>
</tr>
</thead>
<tbody>
<tr class="uk-table-middle" *ngFor="let item of (showManagers)?managers:pending">
<td class="uk-text-center uk-width-1-2">
{{(showManagers)?item.email:item}}
</td>
<td class="uk-text-center uk-width-1-2">
<a (click)="openDeleteModal(item)" class="uk-icon-button remove uk-button-danger" uk-icon="icon: close; ratio: 1" title="Remove"></a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<modal-alert #inviteManagerModal (alertOutput)="inviteManager()" [okDisabled]="invited && invited.invalid">
<div *ngIf="invited" class="uk-padding uk-text-center">
<span class="uk-text-bold">Email: </span>
<input class="uk-input space uk-width-medium" [class.uk-form-danger]="invited.invalid" [formControl]="invited">
</div>
</modal-alert>
<modal-alert #deleteManagerModal (alertOutput)="deleteManager()"></modal-alert>
<modal-alert #deletePendingModal (alertOutput)="deletePendingManager()"></modal-alert>