mirror of
https://github.com/YunoHost/yunohost-admin.git
synced 2024-09-03 20:06:15 +02:00
fix ccs bug and improve filters WIP
This commit is contained in:
e-lie
elie
parent
35ecb94d99
commit
9fa5ecd854
3 changed files with 64 additions and 69 deletions
|
|
@ -563,6 +563,23 @@ input[type='radio'].nice-radio {
|
|||
width: 96%;
|
||||
}
|
||||
|
||||
#app-filter-input{
|
||||
margin: 1%;
|
||||
.dropdown-menu{
|
||||
min-width: 120px;
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
.menu-item{
|
||||
padding: 3px 10px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.app-title {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-auto-rows: minmax(125px, auto);
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
if (level > 6) {
|
||||
return 'success';
|
||||
}
|
||||
else if (level > 2) {
|
||||
else if (level >= 2) {
|
||||
return 'warning';
|
||||
}
|
||||
else if (isNaN(level)) {
|
||||
|
|
@ -77,11 +77,11 @@
|
|||
c.api('/apps?raw', function (dataraw) { // http://api.yunohost.org/#!/app/app_list_get_8
|
||||
var apps = []
|
||||
$.each(data['apps'], function(k, v) {
|
||||
// Keep only the first instance of each app
|
||||
if (!v['id'].match(/__[0-9]{1,5}$/)) {
|
||||
// Keep only the first instance of each app and remove community not working apps
|
||||
if (!v['id'].match(/__[0-9]{1,5}$/) && (dataraw[v['id']]['repository'] === 'yunohost' || dataraw[v['id']]['state'] !== 'notworking')) {
|
||||
// Check app source
|
||||
dataraw[v['id']]['installable'] = (!v['installed'] || dataraw[v['id']].manifest.multi_instance)
|
||||
dataraw[v['id']]['official'] = (dataraw[v['id']]['repository'] === 'yunohost');
|
||||
dataraw[v['id']]['status'] = (dataraw[v['id']]['repository'] === 'yunohost') ? 'official' : 'community';
|
||||
levelFormatted = parseInt(dataraw[v['id']]['level']);
|
||||
dataraw[v['id']]['levelFormatted'] = isNaN(levelFormatted) ? '?' : levelFormatted;
|
||||
dataraw[v['id']]['levelColor'] = levelToColor(levelFormatted);
|
||||
|
|
@ -99,54 +99,43 @@
|
|||
|
||||
// Sort app list
|
||||
c.arraySortById(apps);
|
||||
c.view('app/app_list_install', {apps: apps}, function(){
|
||||
|
||||
var cardGrid = jQuery('.grid').isotope({
|
||||
itemSelector: '.app-card',
|
||||
layoutMode: 'fitRows',
|
||||
transitionDuration: 200,
|
||||
getSortData: {
|
||||
name: '.app-level',
|
||||
symbol: '.app-state'
|
||||
}
|
||||
});
|
||||
|
||||
// filter functions
|
||||
var filterFns = {
|
||||
levelSufficient: function() {
|
||||
var level = jQuery(this).find('.app-level').text();
|
||||
return (parseInt( level ) > 2);
|
||||
},
|
||||
stateWorking: function() {
|
||||
return (jQuery(this).find('.app-state').text() === 'working');
|
||||
},
|
||||
nameContains: function() {
|
||||
var inputTitle = jQuery(this).find("#filter-app-cards").text().toLowerCase();
|
||||
var res = (jQuery(this).find('.app-title').text().toLowerCase().indexOf(inputTitle) > -1);
|
||||
console.log(inputTitle);
|
||||
return res;
|
||||
}
|
||||
};
|
||||
// setup filtering of apps once the view is loaded
|
||||
function setupFilterEvents () {
|
||||
// Uses plugin isotope to filter apps (we could had ordering to)
|
||||
var cardGrid = jQuery('.grid').isotope({
|
||||
itemSelector: '.app-card',
|
||||
layoutMode: 'fitRows',
|
||||
transitionDuration: 200
|
||||
});
|
||||
|
||||
// bind filter button click
|
||||
jQuery('#appFilters').on('click', 'button', function() {
|
||||
var filterValue = jQuery( this ).attr('data-filter');
|
||||
filterValue = filterFns[ filterValue ] || filterValue;
|
||||
cardGrid.isotope({ filter: filterValue });
|
||||
});
|
||||
filterByClassAndName = function(filterClass) {
|
||||
var input = jQuery("#filter-app-cards").val().toLowerCase();
|
||||
var stringMatch = (jQuery(this).find('.app-title').text().toLowerCase().indexOf(input) > -1);
|
||||
var classMatch = jQuery(this).hasClass(filterClass);
|
||||
return stringMatch && classMatch;
|
||||
},
|
||||
|
||||
// Keep only official apps at render
|
||||
cardGrid.isotope({ filter: '.official' });
|
||||
|
||||
jQuery('.dropdownFilter').on('click', function() {
|
||||
cardGrid.isotope({ filter: filterByClassAndName });
|
||||
|
||||
// change dropdown label
|
||||
jQuery('#app-cards-list-filter-text').text(jQuery(this).find('.menu-item').text());
|
||||
});
|
||||
|
||||
jQuery("#filter-app-cards").on("keyup", function() {
|
||||
cardGrid.isotope({ filter: filterByClassAndName });
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
// render
|
||||
c.view('app/app_list_install', {apps: apps}, setupFilterEvents);
|
||||
|
||||
jQuery("#filter-app-cards").on("keyup", function() {
|
||||
// var filterValue = 'nameContains'
|
||||
// filterValue = filterFns[ filterValue ] || filterValue;
|
||||
// console.log(filterValue);
|
||||
// console.log(input)
|
||||
cardGrid.isotope({ filter: function(){
|
||||
var input = jQuery("#filter-app-cards").val().toLowerCase();
|
||||
return (jQuery(this).find('.app-title').text().toLowerCase().indexOf(input) > -1);
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -15,43 +15,32 @@
|
|||
|
||||
<div class="separator"></div>
|
||||
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon" id="basic-addon0"><i class="fas fa-search"></i></span>
|
||||
<div class="input-group" id="app-filter-input">
|
||||
<span class="input-group-addon"><i class="fas fa-search"></i></span>
|
||||
<input type="text" id="filter-app-cards" class="form-control" placeholder="Search for apps..." aria-describedby="basic-addon0"/>
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span id="app-cards-list-filter-text">Only official apps</span> <span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#" id="app-cards-list-validated">Only official apps</a></li>
|
||||
<li><a href="#" id="app-cards-list-working">Only working apps</a></li>
|
||||
<li><a href="#" id="app-cards-list-working-inprogress">In progress/not working apps</a></li>
|
||||
<li><a href="#" id="app-cards-list-all-apps">All apps</a></li>
|
||||
<ul id="dropdownFilter" class="dropdown-menu" role="menu">
|
||||
<li class="button dropdownFilter" data-filter="official"><a class="menu-item" role="menu-item" tabindex="-1">Only official apps</a></li>
|
||||
<li role="presentation" class="button dropdownFilter" data-filter="working"><a class="menu-item" role="menu-item" tabindex="-1">Only working apps</a></li>
|
||||
<li role="presentation" class="button dropdownFilter" data-filter="*"><a class="menu-item" role="menu-item" tabindex="-1">All apps</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="separator"></div>
|
||||
|
||||
<h1>Filter</h1>
|
||||
<div id="appFilters" class="button-group">
|
||||
<button class="button is-checked" data-filter="*">show all</button>
|
||||
<button class="button" data-filter="levelSufficient">level</button>
|
||||
<button class="button" data-filter="stateWorking">state</button>
|
||||
</div>
|
||||
|
||||
<div class="separator"></div>
|
||||
|
||||
<div class="list-group grid">
|
||||
{{#apps}}
|
||||
<div class="app-card panel panel-default">
|
||||
<div class="app-card panel panel-default {{status}} {{state}} {{level}}-level">
|
||||
<div class="panel-body">
|
||||
<h3 class="app-title">{{name}}</h3>
|
||||
<h2 class="app-title">{{name}}</h2>
|
||||
<div class="category">
|
||||
<a href="https://yunohost.org/#/packaging_apps_levels_fr"><span class="label label-{{levelColor}} label-as-badge app-level" title="{{t 'app_level'}}">{{levelFormatted}}</span></a>
|
||||
{{^official}}<span class="label label-info label-as-badge app-validated">{{t 'community'}}</span>{{/official}}
|
||||
{{#official}}<span class="label label-success label-as-badge app-validated">{{t 'official'}}</span>{{/official}}
|
||||
<span class="label label-{{stateColor}} label-as-badge app-state">{{state}}</span>
|
||||
<span class="label label-info label-as-badge app-status">{{t status}}</span>
|
||||
<span class="label label-{{stateColor}} label-as-badge app-state">{{t state}}</span>
|
||||
{{#displayLicense}}<span class="label label-default app-license">{{license}}</span>{{/displayLicense}}
|
||||
</div>
|
||||
<div class="app-card-desc">{{description}}</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue