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

dashboard: make filter bar persistent and inline instead of popover

Browse Source
This commit is contained in:
Johannes Zellner
2024-04-10 12:24:45 +02:00
parent f1679f1614
commit 6612f48d0a
3 changed files with 27 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dashboard/src/views/apps.html
+12 -11
View File
@@ -130,30 +130,31 @@
</div>
</div>
<h1 class="view-header" ng-show="installedApps.length > 0">
<h1 class="view-header" ng-show="installedApps.length > 0" style="padding-right: 0;">
{{ 'apps.title' | tr }}
<div class="view-header-search-bar">
<form class="form-inline">
<div class="input-group">
<input type="text" class="form-control" style="width: 300px" placeholder="{{ 'apps.searchPlaceholder' | tr }} ( / )" id="appSearch" ng-model="appSearch"/>
<span class="input-group-btn">
<button class="btn btn-default" type="button" ng-class="{ 'active': showFilter }" ng-click="showFilter = !showFilter"><i class="fas fa-filter"></i> <span ng-show="selectedTags.length || selectedState.state || !selectedGroup._unset || !selectedDomain._alldomains">{{ !!selectedTags.length + !!selectedState.state + !selectedGroup._unset + !selectedDomain._alldomains }}</span></button>
<button class="btn btn-default" type="button" ng-class="{ 'active': showFilter }" ng-click="toggleFilter()"><i class="fas fa-filter"></i> <span ng-show="selectedTags.length || selectedState.state || !selectedGroup._unset || !selectedDomain._alldomains">{{ !!selectedTags.length + !!selectedState.state + !selectedGroup._unset + !selectedDomain._alldomains }}</span></button>
</span>
</div>
<button class="btn btn-default" type="button" ng-click="toggleView()"><i class="fas" ng-class="{ 'fa-list': view === 'grid', 'fa-grip': view === 'list' }"></i></button>
</form>
</div>
<div ng-show="showFilter" class="view-header-filter-bar">
<form class="form-inline">
<multiselect ng-model="selectedGroup" ng-show="user.isAtLeastAdmin && groups.length > 1" ms-header="{{ selectedGroup.name }}" options="group.name for group in groups" data-multiple="false" filter-after-rows="5" scroll-after-rows="10"></multiselect>
<multiselect ng-model="selectedState" ng-show="user.isAtLeastAdmin" ms-header="{{ 'apps.stateFilterHeader' | tr }}" ms-selected="{{ selectedState }}" options="state.label for state in states" data-multiple="false"></multiselect>
<multiselect ng-model="selectedTags" ng-show="user.isAtLeastAdmin && tags.length > 0" ms-header="{{ 'apps.tagsFilterHeaderAll' | tr }}" ms-selected="{{ 'apps.tagsFilterHeader' | tr:{ tags: selectedTags.join(', ') } }}" options="tag for tag in tags" data-multiple="true" filter-after-rows="5" scroll-after-rows="10"></multiselect>
<multiselect ng-model="selectedDomain" data-compare-by="domain" ms-selected="{{ selectedDomain.domain }}" options="domain.domain for domain in filterDomains" data-multiple="false" filter-after-rows="5" scroll-after-rows="10"></multiselect>
<button class="btn btn-primary" ng-disabled="!selectedTags.length && !selectedState.state && selectedGroup._unset && selectedDomain._alldomains" ng-click="clearAllFilter()">{{ 'apps.filter.clearAll' | tr }}</button>
</form>
</div>
</h1>
<div ng-show="showFilter" class="view-header-filter-bar">
<form class="form-inline">
<multiselect ng-model="selectedGroup" ng-show="user.isAtLeastAdmin && groups.length > 1" ms-header="{{ selectedGroup.name }}" options="group.name for group in groups" data-multiple="false" filter-after-rows="5" scroll-after-rows="10"></multiselect>
<multiselect ng-model="selectedState" ng-show="user.isAtLeastAdmin" ms-header="{{ 'apps.stateFilterHeader' | tr }}" ms-selected="{{ selectedState }}" options="state.label for state in states" data-multiple="false"></multiselect>
<multiselect ng-model="selectedTags" ng-show="user.isAtLeastAdmin && tags.length > 0" ms-header="{{ 'apps.tagsFilterHeaderAll' | tr }}" ms-selected="{{ 'apps.tagsFilterHeader' | tr:{ tags: selectedTags.join(', ') } }}" options="tag for tag in tags" data-multiple="true" filter-after-rows="5" scroll-after-rows="10"></multiselect>
<multiselect ng-model="selectedDomain" data-compare-by="domain" ms-selected="{{ selectedDomain.domain }}" options="domain.domain for domain in filterDomains" data-multiple="false" filter-after-rows="5" scroll-after-rows="10"></multiselect>
<!-- <button class="btn btn-primary" ng-disabled="!selectedTags.length && !selectedState.state && selectedGroup._unset && selectedDomain._alldomains" ng-click="clearAllFilter()">{{ 'apps.filter.clearAll' | tr }}</button> -->
</form>
</div>
<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:orderByFilter">
dashboard/src/views/apps.js
+14 -7
View File
@@ -80,6 +80,19 @@ angular.module('Application').controller('AppsController', ['$scope', '$translat
localStorage.appsView = $scope.view;
};
$scope.toggleFilter = function () {
$scope.showFilter = !$scope.showFilter;
localStorage.appsShowFilter = $scope.showFilter;
// clear on hide
if (!$scope.showFilter) {
$scope.selectedState = $scope.states[0];
$scope.selectedTags = [];
$scope.selectedGroup = GROUP_ACCESS_UNSET;
$scope.selectedDomain = ALL_DOMAINS_DOMAIN;
}
};
$scope.$watch('selectedTags', function (newVal, oldVal) {
if (newVal === oldVal) return;
@@ -109,13 +122,6 @@ angular.module('Application').controller('AppsController', ['$scope', '$translat
$scope.onAppClick = function (app, $event) { onAppClick(app, $event, $scope.isOperator(app), $scope); };
$scope.clearAllFilter = function () {
$scope.selectedState = $scope.states[0];
$scope.selectedTags = [];
$scope.selectedGroup = GROUP_ACCESS_UNSET;
$scope.selectedDomain = ALL_DOMAINS_DOMAIN;
};
$scope.appPostInstallConfirm = {
app: {},
message: '',
@@ -290,6 +296,7 @@ angular.module('Application').controller('AppsController', ['$scope', '$translat
$scope.orderBy = localStorage.appsOrderBy;
$scope.orderByReverse = !!localStorage.appsOrderByReverse;
$scope.showFilter = !!localStorage.appsShowFilter;
if (!$scope.user.isAtLeastAdmin) return;