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

23
dashboard/src/views/apps.html
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">