add pagination and filter panel to users view
This commit is contained in:
Johannes Zellner
@@ -295,52 +295,67 @@
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<div class="card card-large">
|
||||
<div class="grid-item-top">
|
||||
<div class="row ng-hide" ng-show="!ready">
|
||||
<div class="col-lg-12 text-center">
|
||||
<h2><i class="fa fa-circle-notch fa-spin"></i></h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row animateMeOpacity ng-hide" ng-show="ready">
|
||||
<div class="col-lg-12">
|
||||
<table class="table table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 0.5%;"></th>
|
||||
<th style="width:45%">User</th>
|
||||
<th style="width:49.5%" class="hidden-xs hidden-sm">Groups</th>
|
||||
<th style="width: 5%" class="text-right">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr ng-repeat="user in users">
|
||||
<td>
|
||||
<i class="fa fa-briefcase arrow" ng-show="user.admin" uib-tooltip="This user can manage apps, groups and other users"></i>
|
||||
</td>
|
||||
<td class="hand elide-table-cell" ng-click="useredit.show(user)" ng-show="user.username">
|
||||
{{ user.displayName }} <span class="text-muted">{{ user.username }}</span>
|
||||
</td>
|
||||
<td class="hand elide-table-cell" ng-click="useredit.show(user)" ng-hide="user.username">
|
||||
<span class="text-muted" uib-tooltip="User is not activated yet">{{ user.fallbackEmail }}</span>
|
||||
</td>
|
||||
<td class="text-left hand elide-table-cell hidden-xs hidden-sm" ng-click="useredit.show(user)">
|
||||
<span class="group-badge" ng-repeat="groupId in user.groupIds">
|
||||
{{ groupsById[groupId].name }}
|
||||
</span>
|
||||
</td>
|
||||
|
||||
<td class="text-right no-wrap" style="vertical-align: bottom">
|
||||
<button ng-show="!isMe(user)" class="btn btn-xs btn-default" ng-click="invitation.show(user)" uib-tooltip="Create setup link"><i class="fa fa-paper-plane"></i></button>
|
||||
<button class="btn btn-xs btn-default" ng-click="useredit.show(user)" uib-tooltip="Edit User"><i class="fa fa-pencil-alt"></i></button>
|
||||
<button ng-show="!isMe(user)" class="btn btn-xs btn-danger" ng-click="userremove.show(user)" uib-tooltip="Remove User"><i class="far fa-trash-alt"></i></button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="filter">
|
||||
<input type="text" class="form-control" style="min-width: 350px;" ng-model="search" ng-model-options="{ debounce: 1000 }" ng-change="updateFilter()" placeholder="Search"/>
|
||||
<select class="form-control" ng-model="pageItems" ng-options="a.name for a in pageItemCount" ng-change="updateFilter(true)"></select>
|
||||
</div>
|
||||
<div class="pagination pull-right">
|
||||
<button class="btn btn-default btn-outline" ng-click="showPrevPage()" ng-disabled="userRefreshBusy || currentPage <= 1"><i class="fa fa-angle-double-left"></i> prev</button>
|
||||
<button class="btn btn-default btn-outline" ng-click="showNextPage()" ng-disabled="userRefreshBusy || users.length < pageItems.value">next <i class="fa fa-angle-double-right"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="card card-large">
|
||||
<div class="grid-item-top">
|
||||
<div class="row ng-hide" ng-show="!ready">
|
||||
<div class="col-lg-12 text-center">
|
||||
<h2><i class="fa fa-circle-notch fa-spin"></i></h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row animateMeOpacity ng-hide" ng-show="ready">
|
||||
<div class="col-lg-12">
|
||||
<table class="table table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 0.5%;"></th>
|
||||
<th style="width:45%">User</th>
|
||||
<th style="width:49.5%" class="hidden-xs hidden-sm">Groups</th>
|
||||
<th style="width: 5%" class="text-right">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr ng-repeat="user in users">
|
||||
<td>
|
||||
<i class="fa fa-briefcase arrow" ng-show="user.admin" uib-tooltip="This user can manage apps, groups and other users"></i>
|
||||
</td>
|
||||
<td class="hand elide-table-cell" ng-click="useredit.show(user)" ng-show="user.username">
|
||||
{{ user.displayName }} <span class="text-muted">{{ user.username }}</span>
|
||||
</td>
|
||||
<td class="hand elide-table-cell" ng-click="useredit.show(user)" ng-hide="user.username">
|
||||
<span class="text-muted" uib-tooltip="User is not activated yet">{{ user.fallbackEmail }}</span>
|
||||
</td>
|
||||
<td class="text-left hand elide-table-cell hidden-xs hidden-sm" ng-click="useredit.show(user)">
|
||||
<span class="group-badge" ng-repeat="groupId in user.groupIds">
|
||||
{{ groupsById[groupId].name }}
|
||||
</span>
|
||||
</td>
|
||||
|
||||
<td class="text-right no-wrap" style="vertical-align: bottom">
|
||||
<button ng-show="!isMe(user)" class="btn btn-xs btn-default" ng-click="invitation.show(user)" uib-tooltip="Create setup link"><i class="fa fa-paper-plane"></i></button>
|
||||
<button class="btn btn-xs btn-default" ng-click="useredit.show(user)" uib-tooltip="Edit User"><i class="fa fa-pencil-alt"></i></button>
|
||||
<button ng-show="!isMe(user)" class="btn btn-xs btn-danger" ng-click="userremove.show(user)" uib-tooltip="Remove UserRemove UserRemove UserRemove UserRemove UserRemove UserRemove UserRemove UserRemove UserRemove UserRemove UserRemove UserRemove UserRemove UserRemove UserRemove UserRemove UserRemove UserRemove UserRemove UserRemove UserRemove User"><i class="far fa-trash-alt"></i></button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
|
||||
Reference in New Issue
Block a user