Implement category and subtags filtering

src/css/style.less

@@ -707,7 +707,7 @@ input[type='radio'].nice-radio {
 }
 
 .app-category-title {
-    line-height: 0.5em;
+    line-height: 1em;
 }
 
 /** Groups View **/

src/js/yunohost/controllers/apps.js

@@ -164,35 +164,102 @@
                   transitionDuration: 200
                 });
 
-                var categoryGrid = jQuery('#app-categories').isotope({
+                // Default filter is 'decent quality apps'
+                cardGrid.isotope({ filter: '.decentQuality' });
+
+                var categoryGrid = jQuery('#category-selector').isotope({
                   itemSelector: '.app-category-card',
                   layoutMode: 'fitRows',
                   transitionDuration: 200
                 });
 
-                filterByClassAndName = function () {
+                $("#category-selector").show();
+                $("#current-category-filter").hide();
+                $("#current-category-separator").hide();
+                $("#back-to-category-selection").hide();
+                $(".subtag-selector").hide();
+
+                $("#category-selector button").on("click", function() {
+                    var category = $(this).data("category");
+                    var title = $("h2", this).html();
+
+                    // Feed info and display the selecter category next to the search bar
+                    $("#current-category-filter").html(title);
+                    $("#current-category-filter").data("category", category);
+                    $("#current-category-filter").show();
+                    $("#back-to-category-selection").show();
+                    $("#current-category-separator").show();
+
+                    // Hide the category selector
+                    $("#category-selector").hide();
+
+                    // Display the subtags selector
+                    $(".subtag-selector").hide();
+                    $(".subtag-selector[data-app-category='"+category+"']").show();
+                    cardGrid.isotope({ filter: filterApps });
+                });
+
+                $("#back-to-category-selection").on("click", function() {
+
+                    // Hide / reset selected cateory next to the search bar
+                    $("#current-category-filter").hide();
+                    $("#current-category-filter").data("category", "");
+                    $("#back-to-category-selection").hide();
+                    $("#current-category-separator").hide();
+
+                    // Display the category selector
+                    $("#category-selector").show();
+
+                    // Hide subtag selector
+                    $(".subtag-selector").hide();
+                    cardGrid.isotope({ filter: filterApps });
+                });
+
+                $(".subtag-selector button").on("click", function() {
+                    var selector = $(this).parent();
+                    var category = selector.data("app-category");
+                    $("button", selector).removeClass("active");
+                    $(this).addClass("active");
+                    cardGrid.isotope({ filter: filterApps });
+                });
+
+
+                filterApps = function () {
+
+                  // Check text search
                   var input = jQuery("#filter-app-cards").val().toLowerCase();
-                  var inputMatch = (jQuery(this).find('.app-title').text().toLowerCase().indexOf(input) > -1);
+                  if (jQuery(this).find('.app-title').text().toLowerCase().indexOf(input) <= -1) return false;
 
-                  var filterClass = jQuery("#dropdownFilter").attr("data-filter");
-                  var classMatch = (filterClass === '*') ? true : jQuery(this).hasClass(filterClass);
-                  return inputMatch && classMatch;
+                  // Check category
+                  var category = $("#current-category-filter").data("category");
+                  if ((category !== '') && (jQuery(this).data("category") !== category)) return false;
+
+                  // Check subtags
+                  var subtag = $(".subtag-selector[data-app-category='"+category+"'] button.active").data("subtag");
+                  var this_subtags = jQuery(this).data("subtags");
+                  if ((subtag !== undefined) && (subtag !== "all")) {
+                      if ((subtag === "others") && (this_subtags !== "")) return false;
+                      if ((subtag !== "others") && (this_subtags.split(",").indexOf(subtag) <= -1)) return false;
+                  }
+
+                  // Check quality criteria
+                  var class_ = jQuery("#dropdownFilter").data("filter");
+                  if ((class_ !== '*') && (! jQuery(this).hasClass(class_))) return false;
+
+                  return true;
                 },
 
-                // Default filter is 'decent quality apps'
-                cardGrid.isotope({ filter: '.decentQuality' });
-
                 jQuery('.dropdownFilter').on('click', function() {
                     // change dropdown label
                     jQuery('#app-cards-list-filter-text').text(jQuery(this).find('.menu-item').text());
                      // change filter attribute
-                    jQuery('#dropdownFilter').attr("data-filter", jQuery(this).attr("data-filter"));
+                    jQuery('#dropdownFilter').data("filter", jQuery(this).data("filter"));
                     // filter !
-                    cardGrid.isotope({ filter: filterByClassAndName });
+                    cardGrid.isotope({ filter: filterApps });
                 });
 
                 jQuery("#filter-app-cards").on("keyup", function() {
-                    cardGrid.isotope({ filter: filterByClassAndName });
+                    cardGrid.isotope({ filter: filterApps });
                 });
             };
 

src/views/app/app_catalog.ms

@@ -1,16 +1,19 @@
 <div class="btn-breadcrumb">
     <a href="#/" ><i class="fa-home"></i><span class="sr-only">{{t 'home'}}</span></a>
     <a href="#/apps">{{t 'applications'}}</a>
-    <a href="#/apps/install">{{t 'install'}}</a>
+    <a href="#/apps/catalog">{{t 'install'}}</a>
 </div>
 
 <div class="separator"></div>
 
 <div class="input-group" id="app-filter-input">
-    <span class="input-group-addon"><i class="fas fa-search"></i></span>
+    <div id="back-to-category-selection" class="input-group-btn"><button class="btn btn-primary"><i class="fa-arrow-left"></i></button></div>
+    <span id="current-category-filter" class="input-group-addon"></span>
+    <span id="current-category-separator" class="input-group-addon" style="background: white;border: none;">&nbsp;</span>
+    <span class="input-group-addon"><i class="fa-search"></i></span>
     <input type="text" id="filter-app-cards" class="form-control" role="textbox"  placeholder="{{t 'search_for_apps'}}" aria-describedby="basic-addon0"/>
     <div class="input-group-btn">
-        <button type="button" role="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+        <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
             <span id="app-cards-list-filter-text">{{t 'only_decent_quality_apps'}}</span> <span class="caret"></span>
         </button>
         <ul id="dropdownFilter" class="dropdown-menu" data-filter="decentQuality" role="menu">
@@ -24,22 +27,37 @@
 
 <div class="separator"></div>
 
-<div id="app-categories" class="list-group grid">
+<div id="category-selector" class="list-group grid">
   {{#categories}}
-  <div class="app-category-card panel panel-default">
+  <button class="app-category-card panel panel-default" data-category="{{id}}">
         <div class="panel-body">
-            <h2 class="app-category-title"><span class="fa-fw fa-{{icon}}"></span> {{title}}</h2>
-            <h3 class="app-category-card-desc">{{description}}</h3>
+            <h2 class="app-category-title" style="white-space: normal"><span class="fa-fw fa-{{icon}}"></span> {{title}}</h2>
+            <h3 class="app-category-card-desc" style="white-space: normal">{{description}}</h3>
         </div>
-  </div>
+  </button>
   {{/categories}}
 </div>
 
+{{#categories}}
+<div class="subtag-selector" data-app-category="{{id}}" style="text-align: center">
+    {{#if subtags}}
+    <button class="btn btn-default active" data-subtag="all">All</button>
+    {{/if}}
+    {{#subtags}}
+    <button class="btn btn-default" data-subtag="{{.}}">{{.}}</button>
+    {{/subtags}}
+    {{#if subtags}}
+    <button class="btn btn-default" data-subtag="others">Others</button>
+    {{/if}}
+</div>
+{{/categories}}
+
+
 <div class="separator"></div>
 
 <div id="apps" class="list-group grid">
 {{#apps}}
-  <div class="app-card panel panel-default {{status}} {{state}} {{isWorking}} {{isHighQuality}} {{decentQuality}} {{level}}-level">
+  <div class="app-card panel panel-default {{status}} {{state}} {{isWorking}} {{isHighQuality}} {{decentQuality}} {{level}}-level" data-category="{{category}}" data-subtags="{{#subtags}}{{.}}{{#unless @last}},{{/unless}}{{/subtags}}">
         <div class="panel-body">
             <h2 class="app-title">{{manifest.name}}</h2>
             <div class="category">

src/views/app/app_install.ms

@@ -1,7 +1,7 @@
 <div class="btn-breadcrumb">
     <a href="#/" ><i class="fa-home"></i><span class="sr-only">{{t 'home'}}</span></a>
     <a href="#/apps">{{t 'applications'}}</a>
-    <a href="#/apps/install">{{t 'install'}}</a>
+    <a href="#/apps/catalog">{{t 'install'}}</a>
     <a href="#/apps/install/{{id}}">{{manifest.name}}</a>
 </div>