YunoHost/yunohost-admin
1
0
Fork 0
mirror of https://github.com/YunoHost/yunohost-admin.git synced 2024-09-03 20:06:15 +02:00
Code Issues Projects Releases Packages Wiki Activity

fix ccs bug and improve filters WIP

Browse source
This commit is contained in:
e-lie 2018-08-31 18:47:36 +00:00 committed by elie
parent 35ecb94d99
commit 9fa5ecd854
3 changed files with 64 additions and 69 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
src/css/style.less
View file

@ -563,6 +563,23 @@ input[type='radio'].nice-radio {
width: 96%; 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 { .grid {
display: grid; display: grid;
grid-auto-rows: minmax(125px, auto); grid-auto-rows: minmax(125px, auto);

69
src/js/yunohost/controllers/apps.js
View file

@ -21,7 +21,7 @@
if (level > 6) { if (level > 6) {
return 'success'; return 'success';
} }
else if (level > 2) { else if (level >= 2) {
return 'warning'; return 'warning';
} }
else if (isNaN(level)) { else if (isNaN(level)) {
@ -77,11 +77,11 @@
c.api('/apps?raw', function (dataraw) { // http://api.yunohost.org/#!/app/app_list_get_8 c.api('/apps?raw', function (dataraw) { // http://api.yunohost.org/#!/app/app_list_get_8
var apps = [] var apps = []
$.each(data['apps'], function(k, v) { $.each(data['apps'], function(k, v) {
// Keep only the first instance of each app // Keep only the first instance of each app and remove community not working apps
if (!v['id'].match(/__[0-9]{1,5}$/)) { if (!v['id'].match(/__[0-9]{1,5}$/) && (dataraw[v['id']]['repository'] === 'yunohost' || dataraw[v['id']]['state'] !== 'notworking')) {
// Check app source // Check app source
dataraw[v['id']]['installable'] = (!v['installed'] || dataraw[v['id']].manifest.multi_instance) 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']); levelFormatted = parseInt(dataraw[v['id']]['level']);
dataraw[v['id']]['levelFormatted'] = isNaN(levelFormatted) ? '?' : levelFormatted; dataraw[v['id']]['levelFormatted'] = isNaN(levelFormatted) ? '?' : levelFormatted;
dataraw[v['id']]['levelColor'] = levelToColor(levelFormatted); dataraw[v['id']]['levelColor'] = levelToColor(levelFormatted);
@ -99,54 +99,43 @@
// Sort app list // Sort app list
c.arraySortById(apps); c.arraySortById(apps);
c.view('app/app_list_install', {apps: apps}, function(){
// 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({ var cardGrid = jQuery('.grid').isotope({
itemSelector: '.app-card', itemSelector: '.app-card',
layoutMode: 'fitRows', layoutMode: 'fitRows',
transitionDuration: 200, transitionDuration: 200
getSortData: {
name: '.app-level',
symbol: '.app-state'
}
}); });
// filter functions filterByClassAndName = function(filterClass) {
var filterFns = { var input = jQuery("#filter-app-cards").val().toLowerCase();
levelSufficient: function() { var stringMatch = (jQuery(this).find('.app-title').text().toLowerCase().indexOf(input) > -1);
var level = jQuery(this).find('.app-level').text(); var classMatch = jQuery(this).hasClass(filterClass);
return (parseInt( level ) > 2); return stringMatch && classMatch;
}, },
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;
}
};
// bind filter button click // Keep only official apps at render
jQuery('#appFilters').on('click', 'button', function() { cardGrid.isotope({ filter: '.official' });
var filterValue = jQuery( this ).attr('data-filter');
filterValue = filterFns[ filterValue ] || filterValue; jQuery('.dropdownFilter').on('click', function() {
cardGrid.isotope({ filter: filterValue }); 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() { jQuery("#filter-app-cards").on("keyup", function() {
// var filterValue = 'nameContains' cardGrid.isotope({ filter: filterByClassAndName });
// 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);
}
});
});
}); });
};
// render
c.view('app/app_list_install', {apps: apps}, setupFilterEvents);
}); });
}); });
}); });

31
src/views/app/app_list_install.ms
View file

@ -15,43 +15,32 @@
<div class="separator"></div> <div class="separator"></div>
<div class="input-group"> <div class="input-group" id="app-filter-input">
<span class="input-group-addon" id="basic-addon0"><i class="fas fa-search"></i></span> <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"/> <input type="text" id="filter-app-cards" class="form-control" placeholder="Search for apps..." aria-describedby="basic-addon0"/>
<div class="input-group-btn"> <div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <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> <span id="app-cards-list-filter-text">Only official apps</span> <span class="caret"></span>
</button> </button>
<ul class="dropdown-menu"> <ul id="dropdownFilter" class="dropdown-menu" role="menu">
<li><a href="#" id="app-cards-list-validated">Only official apps</a></li> <li class="button dropdownFilter" data-filter="official"><a class="menu-item" role="menu-item" tabindex="-1">Only official apps</a></li>
<li><a href="#" id="app-cards-list-working">Only working 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><a href="#" id="app-cards-list-working-inprogress">In progress/not 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>
<li><a href="#" id="app-cards-list-all-apps">All apps</a></li>
</ul> </ul>
</div> </div>
</div> </div>
<div class="separator"></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"> <div class="list-group grid">
{{#apps}} {{#apps}}
<div class="app-card panel panel-default"> <div class="app-card panel panel-default {{status}} {{state}} {{level}}-level">
<div class="panel-body"> <div class="panel-body">
<h3 class="app-title">{{name}}</h3> <h2 class="app-title">{{name}}</h2>
<div class="category"> <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> <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}} <span class="label label-info label-as-badge app-status">{{t status}}</span>
{{#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">{{t state}}</span>
<span class="label label-{{stateColor}} label-as-badge app-state">{{state}}</span>
{{#displayLicense}}<span class="label label-default app-license">{{license}}</span>{{/displayLicense}} {{#displayLicense}}<span class="label label-default app-license">{{license}}</span>{{/displayLicense}}
</div> </div>
<div class="app-card-desc">{{description}}</div> <div class="app-card-desc">{{description}}</div>