filter added

src/bower.json

@@ -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",

src/css/style.less

@@ -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 {

src/js/yunohost/controllers/apps.js

@@ -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 });
+                });
+              });
             });
         });
     });

src/views/app/app_list_install.ms

@@ -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>
+              <span class="label label-{{stateColor}} label-as-badge app-state">{{state}}</span>
-              {{#displayLicense}}<span class="label label-default">{{license}}</span>{{/displayLicense}}
+              {{#displayLicense}}<span class="label label-default app-license">{{license}}</span>{{/displayLicense}}
             </div>
             <div class="app-card-desc">{{description}}</div>
         </div>