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

filter added

Browse source
This commit is contained in:
elie 2018-08-31 01:47:18 +02:00
parent 24e15b714f
commit 7294947ed7
4 changed files with 67 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/bower.json
View file

@ -4,7 +4,7 @@
"license": "AGPL-3.0",
"private": true,
"dependencies": {
"bootstrap": "3.3.6",
"bootstrap": "4.1.3",
"font-awesome": "4.5.0",
"handlebars-helper-intl": "1.1.2",
"handlebars": "4.0.11",

8
src/css/style.less
View file

@ -558,13 +558,9 @@ input[type='radio'].nice-radio {
}
.app-card {
// margin-bottom: 20px;
// width: 30%;
// float: left;
// min-height: 1px;
// margin-right: 10px;
// margin-left: 10px;
border-radius: .5rem;
width: 30%;
margin: 1%;
}
.grid {

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

@ -96,9 +96,42 @@
apps.push(dataraw[v['id']]);
}
});
// Sort app list
c.arraySortById(apps);
c.view('app/app_list_install', {apps: apps});
c.view('app/app_list_install', {apps: apps}, function(){
var cardGrid = jQuery('.grid').isotope({
itemSelector: '.app-card',
layoutMode: 'fitRows',
getSortData: {
name: '.app-level',
symbol: '.app-state'
}
});
// filter functions
var filterFns = {
// show if number is greater than 50
levelSufficient: function() {
var level = jQuery(this).find('.app-level').text();
return (parseInt( level ) > 2);
},
// show if name ends with -ium
stateWorking: function() {
return (jQuery(this).find('.app-state').text() === 'working');
}
};
// bind filter button click
jQuery('#appFilters').on( 'click', 'button', function() {
var filterValue = jQuery( this ).attr('data-filter');
console.log('mouahahahaha')
// use filterFn if matches value
filterValue = filterFns[ filterValue ] || filterValue;
cardGrid.isotope({ filter: filterValue });
});
});
});
});
});

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

@ -15,17 +15,44 @@
<div class="separator"></div>
<div class="input-group">
<span class="input-group-addon" id="basic-addon0"><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>
</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="panel-body">
<h3>{{name}}</h3>
<div class="category">
<a href="https://yunohost.org/#/packaging_apps_levels_fr"><span class="label label-{{levelColor}} label-as-badge" 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}}
{{#official}}<span class="label label-success label-as-badge app-validated">{{t 'official'}}</span>{{/official}}
<span class="label label-{{stateColor}} label-as-badge app-validated">{{state}}</span>
{{#displayLicense}}<span class="label label-default">{{license}}</span>{{/displayLicense}}
<span class="label label-{{stateColor}} label-as-badge app-state">{{state}}</span>
{{#displayLicense}}<span class="label label-default app-license">{{license}}</span>{{/displayLicense}}
</div>
<div class="app-card-desc">{{description}}</div>
</div>