jjkiers/cloudron-box
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

dashboard: Make app list columns sortable

Browse Source
This commit is contained in:
Johannes Zellner
2024-04-09 13:51:43 +02:00
parent 62faf616c5
commit 5460a64951
3 changed files with 33 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dashboard/src/views/apps.html
+7 -7
View File
@@ -156,7 +156,7 @@
<div class="animateMeOpacity ng-hide" ng-show="installedApps.length > 0">
<div class="app-grid" ng-show="view === 'grid'">
<div class="grid-item" ng-class="{ 'stopped': app.runState === 'stopped' }" ng-repeat="app in installedApps | selectedGroupAccessFilter:selectedGroup | selectedStateFilter:selectedState | selectedTagFilter:selectedTags | selectedDomainFilter:selectedDomain | appSearchFilter:appSearch | orderBy:labelOrFQDN">
<div class="grid-item" ng-class="{ 'stopped': app.runState === 'stopped' }" ng-repeat="app in installedApps | selectedGroupAccessFilter:selectedGroup | selectedStateFilter:selectedState | selectedTagFilter:selectedTags | selectedDomainFilter:selectedDomain | appSearchFilter:appSearch | orderBy:orderByFilter">
<div class="grid-item-content" uib-tooltip="{{ app.fqdn }}">
<a ng-show="app.type !== APP_TYPES.LINK && isOperator(app)" ng-href="#/app/{{ app.id}}/display" class="btn btn-lg btn-default grid-item-action"><i class="fas fa-cog"></i></a>
<div ng-show="app.type === APP_TYPES.LINK && isOperator(app)" ng-click="applinksEdit.show(app)" class="btn btn-lg btn-default grid-item-action"><i class="fas fa-cog"></i></div>
@@ -205,15 +205,15 @@
<thead>
<tr>
<th style="width: 32px">&nbsp;</th>
<th style="width: 95%">Location</th>
<th style="width: 95%" class="hide-mobile">App</th>
<th style="width: 32px" class="hide-mobile">&nbsp;</th>
<th style="width: 95%" class="hide-mobile">Status</th>
<th style="width: 95%" class="hand" ng-click="setOrderBy('location')">Location <i ng-show="orderBy === 'location'" class="fas fa-arrow-{{ orderByReverse ? 'up' : 'down' }}-long"></i></th>
<th style="width: 95%" class="hand hide-mobile" ng-click="setOrderBy('app')">App <i ng-show="orderBy === 'app'" class="fas fa-arrow-{{ orderByReverse ? 'up' : 'down' }}-long"></i></th>
<th style="width: 32px" class="hand hide-mobile" ng-click="setOrderBy('sso')"><i class="fas fa-user-lock"></i> <i ng-show="orderBy === 'sso'" class="fas fa-arrow-{{ orderByReverse ? 'up' : 'down' }}-long"></i></th>
<th style="width: 95%" class="hand hide-mobile" ng-click="setOrderBy('status')">Status <i ng-show="orderBy === 'status'" class="fas fa-arrow-{{ orderByReverse ? 'up' : 'down' }}-long"></i></th>
<th style="width: 5%" class="text-right">{{ 'main.actions' | tr }}</th>
</tr>
</thead>
<tbody>
<tr class="app-list-item" ng-repeat="app in installedApps | selectedGroupAccessFilter:selectedGroup | selectedStateFilter:selectedState | selectedTagFilter:selectedTags | selectedDomainFilter:selectedDomain | appSearchFilter:appSearch | orderBy:labelOrFQDN" uib-tooltip="{{ app | appProgressMessage }}">
<tr class="app-list-item" ng-repeat="app in installedApps | selectedGroupAccessFilter:selectedGroup | selectedStateFilter:selectedState | selectedTagFilter:selectedTags | selectedDomainFilter:selectedDomain | appSearchFilter:appSearch | orderBy:orderByFilter:orderByReverse" uib-tooltip="{{ app | appProgressMessage }}">
<td class="elide-table-cell app-list-app-link-cell">
<a ng-href="{{ app | applicationLink }}" ng-click="onAppClick(app, $event)" target="_blank" class="app-list-app-link">
<img ng-src="{{ app.iconUrl || 'img/appicon_fallback.png' }}" fallback-icon="img/appicon_fallback.png" onerror="imageErrorHandler(this)" class="app-list-item-icon"/>
@@ -228,7 +228,7 @@
<div class="progress-bar progress-bar-success" role="progressbar" style="width: {{ app.progress }}%"></div>
</div>
</td>
<td class="elide-table-cell hide-mobile">{{ app.manifest.title || 'App Link'}}</td>
<td class="elide-table-cell hide-mobile">{{ app.manifest.title || 'App Link' }}</td>
<td class="elide-table-cell hide-mobile">
<div ng-show="app.type !== APP_TYPES.LINK">
<i class="fa-brands fa-openid" ng-show="app.ssoAuth && app.manifest.addons.oidc" uib-tooltip="{{ 'apps.auth.openid' | tr }}"></i>
dashboard/src/views/apps.js
+22 -2
View File
@@ -32,6 +32,8 @@ angular.module('Application').controller('AppsController', ['$scope', '$translat
$scope.showFilter = false;
$scope.filterActive = false;
$scope.view = 'list';
$scope.orderBy = 'location'; // or app, status, sso
$scope.orderByReverse = false;
$scope.allUsers = [];
$scope.allGroups = [];
@@ -46,8 +48,23 @@ angular.module('Application').controller('AppsController', ['$scope', '$translat
if (tr['app.states.updateAvailable']) $scope.states[3].label = tr['app.states.updateAvailable'];
});
// for sorting of the app grid items
$scope.labelOrFQDN = function (item) {
$scope.setOrderBy = function (by) {
if (by === $scope.orderBy) {
$scope.orderByReverse = !$scope.orderByReverse;
} else {
$scope.orderBy = by;
$scope.orderByReverse = false;
}
localStorage.appsOrderBy = by;
localStorage.appsOrderByReverse = $scope.orderByReverse ? 'true' : '';
};
// for sorting/grouping
$scope.orderByFilter = function (item) {
if ($scope.orderBy === 'app') return item.manifest.title || 'App Link';
if ($scope.orderBy === 'status') return item.installationState + '-' + item.runState;
if ($scope.orderBy === 'sso') return item.sso;
return item.label || item.fqdn;
};
@@ -271,6 +288,9 @@ angular.module('Application').controller('AppsController', ['$scope', '$translat
$scope.setView(localStorage.appsView);
$scope.orderBy = localStorage.appsOrderBy;
$scope.orderByReverse = !!localStorage.appsOrderByReverse;
if (!$scope.user.isAtLeastAdmin) return;
// load local settings and apply tag filter