portainer/app/portainer/components/group-association-table/groupAssociationTable.html

83 lines
2.9 KiB
HTML

<div class="datatable">
<table class="table table-hover" data-cy="{{ $ctrl.cyValue }}">
<div class="col-sm-12 vertical-center mb-1">
<pr-icon icon="'search'" feather="true"></pr-icon>
<input
type="text"
class="searchInput"
ng-model="$ctrl.paginationState.filter"
ng-change="$ctrl.onTextFilterChange()"
ng-model-options="{ debounce: 300 }"
placeholder="Search..."
/>
</div>
<thead>
<tr>
<th> Name </th>
<th ng-if="$ctrl.showGroups"> Group </th>
<th ng-if="$ctrl.showTags"> Tags </th>
</tr>
</thead>
<tbody>
<tr
ng-if="!$ctrl.hasBackendPagination"
ng-click="$ctrl.entryClick(item)"
class="interactive"
dir-paginate="item in $ctrl.dataset | filter:$ctrl.paginationState.filter | itemsPerPage: $ctrl.paginationState.limit"
pagination-id="$ctrl.tableType"
>
<td>
{{ item.Name | truncate: 64 }}
</td>
<td ng-if="$ctrl.showGroups">
{{ $ctrl.groupIdToGroupName(item.GroupId) | truncate: 64 }}
</td>
<td ng-if="$ctrl.showTags">
{{ $ctrl.tagIdsToTagNames(item.TagIds) | arraytostr | truncate: 64 }}
</td>
</tr>
<tr
ng-if="$ctrl.hasBackendPagination"
ng-click="$ctrl.entryClick(item)"
class="interactive"
dir-paginate="item in $ctrl.dataset | itemsPerPage: $ctrl.paginationState.limit"
pagination-id="$ctrl.tableType"
total-items="$ctrl.paginationState.totalCount"
>
<td>
{{ item.Name | truncate: 64 }}
</td>
<td ng-if="$ctrl.showGroups">
{{ $ctrl.groupIdToGroupName(item.GroupId) | truncate: 64 }}
</td>
<td ng-if="$ctrl.showTags">
{{ $ctrl.tagIdsToTagNames(item.TagIds) | truncate: 64 }}
</td>
</tr>
<tr ng-if="!$ctrl.dataset">
<td colspan="3" class="text-center text-muted">Loading...</td>
</tr>
<tr ng-if="$ctrl.dataset.length === 0">
<td colspan="3" class="text-center text-muted">{{ $ctrl.emptyDatasetMessage }}</td>
</tr>
</tbody>
</table>
<div class="footer" ng-if="$ctrl.dataset">
<div class="paginationControls">
<form class="form-inline">
<span class="limitSelector">
<span class="space-right"> Items per page </span>
<select ng-model="$ctrl.paginationState.limit" ng-change="$ctrl.onPaginationLimitChanged()">
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
</span>
<dir-pagination-controls pagination-id="$ctrl.tableType" max-size="5" on-page-change="$ctrl.onPageChanged(newPageNumber, oldPageNumber)"></dir-pagination-controls>
</form>
</div>
</div>
</div>