mirror of
https://github.com/portainer/portainer.git
synced 2025-08-08 15:25:22 +02:00
feat(ui): add sorting icon component and table header cell styling EE-3626 (#7165)
* feat(ui): add sorting icons EE-3626 feat(ui): Add react component for sorting icons feat(ui) make component usable in angular * feat(ui): update angular example EE-3626
This commit is contained in:
Ali
GitHub
parent
712207e69f
commit
14a8b1d897
17 changed files with 272 additions and 136 deletions
|
|
@ -1,5 +1,7 @@
|
|||
<span class="setting" ng-class="{ 'setting-active': $ctrl.state.isOpen }" uib-dropdown dropdown-append-to-body auto-close="disabled" is-open="$ctrl.state.isOpen">
|
||||
<span uib-dropdown-toggle aria-label="Columns"><i class="fa fa-columns space-right" aria-hidden="true"></i></span>
|
||||
<span uib-dropdown-toggle aria-label="Columns">
|
||||
<pr-icon icon="'columns'" feather="true"></pr-icon>
|
||||
</span>
|
||||
<div class="dropdown-menu dropdown-menu-right" uib-dropdown-menu>
|
||||
<div class="tableMenu">
|
||||
<div class="menuHeader"> Show / Hide Columns </div>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
.datatable .toolBar {
|
||||
background-color: var(--bg-card-color);
|
||||
overflow: auto;
|
||||
padding: 20px 10px;
|
||||
padding: 20px;
|
||||
font-size: 16px;
|
||||
border-radius: 8px;
|
||||
|
||||
|
|
@ -26,7 +26,7 @@
|
|||
|
||||
.datatable .toolBar .settings {
|
||||
float: right;
|
||||
margin-right: 5px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.datatable .toolBar .setting {
|
||||
|
|
@ -38,23 +38,29 @@
|
|||
@apply text-blue-7;
|
||||
}
|
||||
|
||||
.datatable tr > td a {
|
||||
color: var(--ui-blue-8);
|
||||
}
|
||||
|
||||
.datatable tr > td a:hover,
|
||||
.datatable tr > td a:focus {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.toolBar .actionBar {
|
||||
margin-right: 10px;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.toolBar .settings {
|
||||
width: 60px;
|
||||
text-align: right;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.datatable .searchBar {
|
||||
border: 1px solid var(--border-searchbar);
|
||||
padding: 5px;
|
||||
background: var(--bg-searchbar) !important;
|
||||
border-radius: 5px;
|
||||
padding: 4px 10px !important;
|
||||
padding: 4px 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
|
|
@ -67,7 +73,6 @@
|
|||
.toolBar .searchBar {
|
||||
flex: right;
|
||||
margin-right: 10px;
|
||||
width: 500px;
|
||||
height: 30px;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
|
@ -146,6 +151,15 @@
|
|||
padding: 15px 0;
|
||||
}
|
||||
|
||||
.table > tbody > tr > td {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.table > tbody > tr {
|
||||
height: 50px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
[data-reach-menu-list],
|
||||
[data-reach-menu-items] {
|
||||
padding: 0px;
|
||||
|
|
@ -172,7 +186,7 @@
|
|||
}
|
||||
|
||||
.datatable .table-filters thead tr > th {
|
||||
height: 32px;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
|
|
@ -316,16 +330,14 @@
|
|||
width: 30px;
|
||||
}
|
||||
|
||||
.table th button.sortable {
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
color: var(--text-link-color);
|
||||
.table tr > th:first-child,
|
||||
.table tr > td:first-child {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.table th button.sortable:hover .sortable-label {
|
||||
text-decoration: underline;
|
||||
.table tr > th:last-child,
|
||||
.table tr > last-child {
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.datatable .table-setting-menu-btn {
|
||||
|
|
|
|||
|
|
@ -1,37 +1,52 @@
|
|||
<div class="datatable">
|
||||
<rd-widget>
|
||||
<rd-widget-body classes="no-padding">
|
||||
<div class="toolBar">
|
||||
<div class="toolBarTitle"><i class="fa" ng-class="$ctrl.titleIcon" aria-hidden="true" style="margin-right: 2px"></i> {{ $ctrl.titleText }} </div>
|
||||
|
||||
<datatable-searchbar value="$ctrl.state.textFilter" placeholder="'Search...'" on-change="($ctrl.onTextFilterChange)" data-cy="stack-searchInput"></datatable-searchbar>
|
||||
|
||||
<div class="actionBar" ng-if="!$ctrl.offlineMode" authorization="PortainerStackCreate, PortainerStackDelete">
|
||||
<div class="toolBar vertical-center !gap-x-5 !gap-y-1 flex-wrap">
|
||||
<div class="toolBarTitle vertical-center">
|
||||
<pr-icon icon="'layers'" feather="true" class-name="'icon-nested-blue vertical-center'" mode="'primary'"></pr-icon>
|
||||
{{ $ctrl.titleText }}
|
||||
</div>
|
||||
<div class="searchBar vertical-center">
|
||||
<pr-icon icon="'search'" feather="true"></pr-icon>
|
||||
<input
|
||||
type="text"
|
||||
class="searchInput"
|
||||
ng-model="$ctrl.state.textFilter"
|
||||
ng-change="$ctrl.onTextFilterChange()"
|
||||
placeholder="Search for a stack..."
|
||||
auto-focus
|
||||
ng-model-options="{ debounce: 300 }"
|
||||
data-cy="stack-searchInput"
|
||||
/>
|
||||
</div>
|
||||
<div class="actionBar !gap-3" ng-if="!$ctrl.offlineMode" authorization="PortainerStackCreate, PortainerStackDelete">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-danger"
|
||||
class="btn btn-sm btn-dangerlight h-fit vertical-center !ml-0"
|
||||
authorization="PortainerStackDelete"
|
||||
ng-disabled="$ctrl.state.selectedItemCount === 0"
|
||||
ng-click="$ctrl.removeAction($ctrl.state.selectedItems)"
|
||||
data-cy="stack-removeStackButton"
|
||||
>
|
||||
<i class="fa fa-trash-alt space-right" aria-hidden="true"></i>Remove
|
||||
<pr-icon icon="'trash'" feather="true" mode="'danger'"></pr-icon>Remove
|
||||
</button>
|
||||
<button
|
||||
ng-disabled="!$ctrl.createEnabled"
|
||||
type="button"
|
||||
class="btn btn-sm btn-primary"
|
||||
class="btn btn-sm btn-primary h-fit vertical-center !ml-0"
|
||||
ui-sref="docker.stacks.newstack"
|
||||
authorization="PortainerStackCreate"
|
||||
data-cy="stack-addStackButton"
|
||||
>
|
||||
<i class="fa fa-plus space-right" aria-hidden="true"></i>Add stack
|
||||
<pr-icon icon="'plus'" feather="true"></pr-icon>Add stack
|
||||
</button>
|
||||
</div>
|
||||
<div class="settings">
|
||||
<datatable-columns-visibility columns="$ctrl.columnVisibility.columns" on-change="($ctrl.onColumnVisibilityChange)"></datatable-columns-visibility>
|
||||
<span class="setting" ng-class="{ 'setting-active': $ctrl.settings.open }" uib-dropdown dropdown-append-to-body auto-close="disabled" is-open="$ctrl.settings.open">
|
||||
<span uib-dropdown-toggle aria-label="Settings"><i class="fa fa-cog" aria-hidden="true"></i></span>
|
||||
<span class="setting ml-2" ng-class="{ 'setting-active': $ctrl.settings.open }" uib-dropdown dropdown-append-to-body auto-close="disabled" is-open="$ctrl.settings.open">
|
||||
<span uib-dropdown-toggle aria-label="Settings">
|
||||
<pr-icon icon="'settings'" feather="true"></pr-icon>
|
||||
</span>
|
||||
<div class="dropdown-menu dropdown-menu-right" uib-dropdown-menu>
|
||||
<div class="tableMenu">
|
||||
<div class="menuHeader"> Table settings </div>
|
||||
|
|
@ -55,7 +70,7 @@
|
|||
<option value="300">5min</option>
|
||||
</select>
|
||||
<span>
|
||||
<i id="refreshRateChange" class="fa fa-check green-icon" aria-hidden="true" style="margin-top: 7px; display: none"></i>
|
||||
<pr-icon id="refreshRateChange" icon="'check'" feather="true" mode="'success'" size="'sm'"></pr-icon>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -74,68 +89,81 @@
|
|||
<thead>
|
||||
<tr>
|
||||
<th uib-dropdown dropdown-append-to-body auto-close="disabled" is-open="$ctrl.filters.state.open">
|
||||
<span class="md-checkbox" ng-if="!$ctrl.offlineMode" authorization="PortainerStackCreate, PortainerStackDelete">
|
||||
<input id="select_all" type="checkbox" ng-model="$ctrl.state.selectAll" ng-change="$ctrl.selectAll()" />
|
||||
<label for="select_all"></label>
|
||||
</span>
|
||||
<a ng-click="$ctrl.changeOrderBy('Name')">
|
||||
Name
|
||||
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Name' && !$ctrl.state.reverseOrder"></i>
|
||||
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"></i>
|
||||
</a>
|
||||
<div>
|
||||
<span uib-dropdown-toggle ng-class="['table-filter', { 'filter-active': $ctrl.filters.state.enabled }]">
|
||||
Filter
|
||||
<i ng-class="['fa', { 'fa-filter': !$ctrl.filters.state.enabled, 'fa-check': $ctrl.filters.state.enabled }]" aria-hidden="true"></i>
|
||||
<div class="flex flex-row flex-no-wrap gap-1">
|
||||
<span class="md-checkbox" ng-if="!$ctrl.offlineMode" authorization="PortainerStackCreate, PortainerStackDelete">
|
||||
<input id="select_all" type="checkbox" ng-model="$ctrl.state.selectAll" ng-change="$ctrl.selectAll()" />
|
||||
<label for="select_all"></label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="dropdown-menu" uib-dropdown-menu>
|
||||
<div class="tableMenu">
|
||||
<div class="menuHeader"> Filter by activity </div>
|
||||
<div class="menuContent">
|
||||
<div class="md-checkbox">
|
||||
<input id="filter_usage_activeStacks" type="checkbox" ng-model="$ctrl.filters.state.showActiveStacks" ng-change="$ctrl.onFilterChange()" />
|
||||
<label for="filter_usage_activeStacks">Active stacks</label>
|
||||
<table-column-header
|
||||
col-title="'Name'"
|
||||
can-sort="true"
|
||||
is-sorted="$ctrl.state.orderBy === 'Name'"
|
||||
is-sorted-desc="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"
|
||||
ng-click="$ctrl.changeOrderBy('Name')"
|
||||
></table-column-header>
|
||||
<div>
|
||||
<span uib-dropdown-toggle ng-class="['table-filter vertical-center !ml-1', { 'filter-active': $ctrl.filters.state.enabled }]">
|
||||
Filter
|
||||
<pr-icon ng-if="$ctrl.filters.state.enabled" icon="'check'" feather="true" size="'sm'"></pr-icon>
|
||||
<pr-icon ng-if="!$ctrl.filters.state.enabled" icon="'filter'" feather="true" size="'sm'"></pr-icon>
|
||||
</span>
|
||||
</div>
|
||||
<div class="dropdown-menu" uib-dropdown-menu>
|
||||
<div class="tableMenu">
|
||||
<div class="menuHeader"> Filter by activity </div>
|
||||
<div class="menuContent">
|
||||
<div class="md-checkbox">
|
||||
<input id="filter_usage_activeStacks" type="checkbox" ng-model="$ctrl.filters.state.showActiveStacks" ng-change="$ctrl.onFilterChange()" />
|
||||
<label for="filter_usage_activeStacks">Active stacks</label>
|
||||
</div>
|
||||
<div class="md-checkbox">
|
||||
<input id="filter_usage_unactiveStacks" type="checkbox" ng-model="$ctrl.filters.state.showUnactiveStacks" ng-change="$ctrl.onFilterChange()" />
|
||||
<label for="filter_usage_unactiveStacks">Inactive stacks</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md-checkbox">
|
||||
<input id="filter_usage_unactiveStacks" type="checkbox" ng-model="$ctrl.filters.state.showUnactiveStacks" ng-change="$ctrl.onFilterChange()" />
|
||||
<label for="filter_usage_unactiveStacks">Inactive stacks</label>
|
||||
<div>
|
||||
<a type="button" class="btn btn-default btn-sm" ng-click="$ctrl.filters.state.open = false;">Close</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<a type="button" class="btn btn-default btn-sm" ng-click="$ctrl.filters.state.open = false;">Close</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</th>
|
||||
<th>
|
||||
<a ng-click="$ctrl.changeOrderBy('Type')">
|
||||
Type
|
||||
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Type' && !$ctrl.state.reverseOrder"></i>
|
||||
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Type' && $ctrl.state.reverseOrder"></i>
|
||||
</a>
|
||||
<table-column-header
|
||||
col-title="'Type'"
|
||||
can-sort="true"
|
||||
is-sorted="$ctrl.state.orderBy === 'Type'"
|
||||
is-sorted-desc="$ctrl.state.orderBy === 'Type' && $ctrl.state.reverseOrder"
|
||||
ng-click="$ctrl.changeOrderBy('Type')"
|
||||
></table-column-header>
|
||||
</th>
|
||||
<th>Control</th>
|
||||
<th><table-column-header col-title="'Control'" can-sort="false"></table-column-header></th>
|
||||
<th>
|
||||
<a ng-click="$ctrl.changeOrderBy('ResourceControl.CreationDate')">
|
||||
Created
|
||||
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'ResourceControl.CreationDate' && !$ctrl.state.reverseOrder"></i>
|
||||
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'ResourceControl.CreationDate' && $ctrl.state.reverseOrder"></i>
|
||||
</a>
|
||||
<table-column-header
|
||||
col-title="'Created'"
|
||||
can-sort="true"
|
||||
is-sorted="$ctrl.state.orderBy === 'ResourceControl.CreationDate'"
|
||||
is-sorted-desc="$ctrl.state.orderBy === 'ResourceControl.CreationDate' && $ctrl.state.reverseOrder"
|
||||
ng-click="$ctrl.changeOrderBy('ResourceControl.CreationDate')"
|
||||
></table-column-header>
|
||||
</th>
|
||||
<th ng-if="$ctrl.columnVisibility.columns.updated.display">
|
||||
<a ng-click="$ctrl.changeOrderBy('ResourceControl.UpdateDate')">
|
||||
Updated
|
||||
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'ResourceControl.UpdateDate' && !$ctrl.state.reverseOrder"></i>
|
||||
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'ResourceControl.UpdateDate' && $ctrl.state.reverseOrder"></i>
|
||||
</a>
|
||||
<table-column-header
|
||||
col-title="'Updated'"
|
||||
can-sort="true"
|
||||
is-sorted="$ctrl.state.orderBy === 'ResourceControl.UpdateDate'"
|
||||
is-sorted-desc="$ctrl.state.orderBy === 'ResourceControl.UpdateDate' && $ctrl.state.reverseOrder"
|
||||
ng-click="$ctrl.changeOrderBy('ResourceControl.UpdateDate')"
|
||||
></table-column-header>
|
||||
</th>
|
||||
<th>
|
||||
<a ng-click="$ctrl.changeOrderBy('ResourceControl.Ownership')">
|
||||
Ownership
|
||||
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'ResourceControl.Ownership' && !$ctrl.state.reverseOrder"></i>
|
||||
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'ResourceControl.Ownership' && $ctrl.state.reverseOrder"></i>
|
||||
</a>
|
||||
<table-column-header
|
||||
col-title="'Ownership'"
|
||||
can-sort="true"
|
||||
is-sorted="$ctrl.state.orderBy === 'ResourceControl.Ownership'"
|
||||
is-sorted-desc="$ctrl.state.orderBy === 'ResourceControl.Ownership' && $ctrl.state.reverseOrder"
|
||||
ng-click="$ctrl.changeOrderBy('ResourceControl.Ownership')"
|
||||
></table-column-header>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
|
@ -155,29 +183,31 @@
|
|||
>{{ item.Name }}</a
|
||||
>
|
||||
<span ng-if="$ctrl.offlineMode">{{ item.Name }}</span>
|
||||
<span ng-if="item.Regular && item.Status == 2" style="margin-left: 10px" class="label label-warning image-tag space-left">Inactive</span>
|
||||
<span ng-if="item.Regular && item.Status == 2" class="label label-warning image-tag ml-2">Inactive</span>
|
||||
</td>
|
||||
<td>{{ item.Type === 1 ? 'Swarm' : 'Compose' }}</td>
|
||||
<td>
|
||||
<span
|
||||
ng-if="item.Orphaned"
|
||||
class="interactive"
|
||||
class="interactive vertical-center"
|
||||
tooltip-append-to-body="true"
|
||||
tooltip-placement="bottom"
|
||||
tooltip-class="portainer-tooltip"
|
||||
uib-tooltip="This stack was created inside an environment that is no longer registered inside Portainer."
|
||||
>
|
||||
Orphaned <i class="fa fa-exclamation-circle orange-icon" aria-hidden="true" style="margin-left: 2px"></i>
|
||||
Orphaned
|
||||
<pr-icon icon="'alert-circle'" feather="true" class-name="'ml-0.5'" mode="'warning'"></pr-icon>
|
||||
</span>
|
||||
<span
|
||||
ng-if="item.External"
|
||||
class="interactive"
|
||||
class="interactive vertical-center"
|
||||
tooltip-append-to-body="true"
|
||||
tooltip-placement="bottom"
|
||||
tooltip-class="portainer-tooltip"
|
||||
uib-tooltip="This stack was created outside of Portainer. Control over this stack is limited."
|
||||
>
|
||||
Limited <i class="fa fa-exclamation-circle orange-icon" aria-hidden="true" style="margin-left: 2px"></i>
|
||||
Limited
|
||||
<pr-icon icon="'alert-circle'" feather="true" class-name="'ml-0.5'" mode="'warning'"></pr-icon>
|
||||
</span>
|
||||
<span ng-if="item.Regular">Total</span>
|
||||
</td>
|
||||
|
|
@ -190,8 +220,8 @@
|
|||
<span ng-if="!item.UpdateDate"> - </span>
|
||||
</td>
|
||||
<td>
|
||||
<span>
|
||||
<i ng-class="item.ResourceControl.Ownership | ownershipicon" aria-hidden="true"></i>
|
||||
<span class="vertical-center">
|
||||
<pr-icon ng-attr-icon="item.ResourceControl.Ownership | ownershipicon" feather="true" class-name="'icon ml-0.5'"></pr-icon>
|
||||
{{ item.ResourceControl.Ownership ? item.ResourceControl.Ownership : item.ResourceControl.Ownership = $ctrl.RCO.ADMINISTRATORS }}
|
||||
</span>
|
||||
</td>
|
||||
|
|
@ -213,7 +243,7 @@
|
|||
<div class="paginationControls">
|
||||
<form class="form-inline">
|
||||
<span class="limitSelector">
|
||||
<span style="margin-right: 5px"> Items per page </span>
|
||||
<span class="mr-1"> Items per page </span>
|
||||
<select class="form-control" ng-model="$ctrl.state.paginatedItemLimit" ng-change="$ctrl.changePaginationLimit()" data-cy="component-paginationSelect">
|
||||
<option value="0">All</option>
|
||||
<option value="10">10</option>
|
||||
|
|
|
|||
|
|
@ -33,13 +33,6 @@ angular.module('portainer.app').controller('StacksDatatableController', [
|
|||
DatatableService.setColumnVisibilitySettings(this.tableKey, this.columnVisibility);
|
||||
}
|
||||
|
||||
this.onTextFilterChange = onTextFilterChange.bind(this);
|
||||
|
||||
function onTextFilterChange(value) {
|
||||
this.state.textFilter = value;
|
||||
this.onTextFilterChangeGeneric();
|
||||
}
|
||||
|
||||
/**
|
||||
* Do not allow external items
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -106,13 +106,13 @@ export function environmentTypeIcon(type) {
|
|||
export function ownershipIcon(ownership) {
|
||||
switch (ownership) {
|
||||
case RCO.PRIVATE:
|
||||
return 'fa fa-eye-slash';
|
||||
return 'eye-off';
|
||||
case RCO.ADMINISTRATORS:
|
||||
return 'fa fa-eye-slash';
|
||||
return 'eye-off';
|
||||
case RCO.RESTRICTED:
|
||||
return 'fa fa-users';
|
||||
return 'users';
|
||||
default:
|
||||
return 'fa fa-eye';
|
||||
return 'eye';
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ import { Loading } from '@@/Widget/Loading';
|
|||
import { PasswordCheckHint } from '@@/PasswordCheckHint';
|
||||
import { ViewLoading } from '@@/ViewLoading';
|
||||
import { Tooltip } from '@@/Tip/Tooltip';
|
||||
import { TableColumnHeaderAngular } from '@@/datatables/TableHeaderCell';
|
||||
import { DashboardItem } from '@@/DashboardItem';
|
||||
import { SearchBar } from '@@/datatables/SearchBar';
|
||||
|
||||
|
|
@ -31,6 +32,15 @@ export const componentsModule = angular
|
|||
r2a(PasswordCheckHint, ['forceChangePassword', 'passwordValid'])
|
||||
)
|
||||
.component('rdLoading', r2a(Loading, []))
|
||||
.component(
|
||||
'tableColumnHeader',
|
||||
r2a(TableColumnHeaderAngular, [
|
||||
'colTitle',
|
||||
'canSort',
|
||||
'isSorted',
|
||||
'isSortedDesc',
|
||||
])
|
||||
)
|
||||
.component('viewLoading', r2a(ViewLoading, ['message']))
|
||||
.component(
|
||||
'pageHeader',
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue