fixes #1482 badges added on plugin filters to know how many plugins are in each categories

admin/themes/default/js/plugins_installated.js

@@ -61,6 +61,13 @@ function normalTitle() {
     }
 }
 
+function actualizeFilterBadges() {
+  $("label[for='seeAll'] .filter-badge").html(nb_plugin.all);
+  $("label[for='seeActive'] .filter-badge").html(nb_plugin.active);
+  $("label[for='seeInactive'] .filter-badge").html(nb_plugin.inactive);
+  $("label[for='seeOther'] .filter-badge").html(nb_plugin.other);
+}
+
 function activatePlugin(id) {
     console.log("Plugin activated");
     console.log(id);
@@ -82,6 +89,10 @@ function activatePlugin(id) {
                 $("#" + id + " .pluginNotif").stop(false, true);
                 $("#" + id + " .AddPluginSuccess label span:first").html(plugin_added_str.replace("%s", pluginName));
                 $("#" + id + " .AddPluginSuccess").css("display", "flex");
+
+                nb_plugin.active += 1;
+                nb_plugin.inactive -= 1;
+                actualizeFilterBadges();
             }
         }, 
         error: function () {
@@ -119,6 +130,10 @@ function disactivatePlugin(id) {
                 $("#" + id + " .pluginNotif").stop(false, true);
                 $("#" + id + " .DeactivatePluginSuccess label span:first").html(plugin_deactivated_str.replace("%s", pluginName));
                 $("#" + id + " .DeactivatePluginSuccess").css("display", "flex");
+
+                nb_plugin.inactive += 1;
+                nb_plugin.active -= 1;
+                actualizeFilterBadges(nb_plugin.all, nb_plugin.active, nb_plugin.inactive, nb_plugin.other)
             }
         }, 
         error: function () {
@@ -158,6 +173,9 @@ function deletePlugin(id, name) {
                             $("#"+id).remove();  
                             actualizeFilter();
                         }
+                        nb_plugin.inactive -=1;
+                        nb_plugin.all -=1;
+                        actualizeFilterBadges();
                     }, 
                     error: function (e) {
                         console.log(e);
@@ -225,6 +243,9 @@ function uninstallPlugin(id) {
         success: function (data) {
             console.log(data);
             console.log("it works (uninstallated)");
+            nb_plugin.other -=1;
+            nb_plugin.all -=1;
+            actualizeFilterBadges();
         }, 
         error: function (e) {
             console.log(e);
@@ -238,7 +259,6 @@ function actualizeFilter() {
     $(".pluginMiniBox").each(function () {
         if ($(this).hasClass("plugin-active")) {
             $("label[for='seeActive']").show();
-            console.log("BLEU");
         }
         if ($(this).hasClass("plugin-inactive")) {
             $("label[for='seeInactive']").show();
@@ -251,6 +271,7 @@ function actualizeFilter() {
 
 $(document).ready(function () {
     actualizeFilter();
+    actualizeFilterBadges();
 
     if (!$.cookie("pwg_plugin_manager_view")) {
         $.cookie("pwg_plugin_manager_view", "classic");
@@ -320,6 +341,7 @@ $(document).ready(function () {
         })
     })
 
+    console.log(nb_plugin);
 
     /* Plugin Actions */ 
     /**

admin/themes/default/template/plugins_installed.tpl

@@ -16,6 +16,12 @@ var showInactivePlugins = function() {
 
 /* group action */
 const pwg_token = '{$PWG_TOKEN}';
+var nb_plugin = {
+  'all' : {$count_types_plugins["active"]} + {$count_types_plugins["inactive"]} + {$count_types_plugins["missing"]} + {$count_types_plugins["merged"]},
+  'active' : {$count_types_plugins["active"]},
+  'inactive' : {$count_types_plugins["inactive"]},
+  'other' : {$count_types_plugins["missing"]} + {$count_types_plugins["merged"]},
+}
 const are_you_sure_msg  = '{'Are you sure?'|@translate|@escape:'javascript'}';
 const confirm_msg = '{"Yes, I am sure"|@translate}';
 const cancel_msg = "{"No, I have changed my mind"|@translate}";
@@ -221,7 +227,7 @@ jQuery(".pluginMiniBox").each(function(index){
 {counter start=0 assign=i} {* <!-- counter for 'deactivate all' link --> *}
 
 <div class="pluginTypeFilter">
-  <input type="radio" name="p-filter" class="filter" id="seeAll" checked><label for="seeAll">{'All'|@translate}</label><input type="radio" name="p-filter" class="filter" id="seeActive"><label class="filterLabel" for="seeActive">{'Activated'|@translate}</label><input type="radio" name="p-filter" class="filter" id="seeInactive"><label class="filterLabel" for="seeInactive">{'Deactivated'|@translate}</label><input type="radio" name="p-filter" class="filter" id="seeOther"><label class="filterLabel" for="seeOther">{'Other'|@translate}</label>
+  <input type="radio" name="p-filter" class="filter" id="seeAll" checked><label for="seeAll">{'All'|@translate}<span class="filter-badge">X</span></label><input type="radio" name="p-filter" class="filter" id="seeActive"><label class="filterLabel" for="seeActive">{'Activated'|@translate}<span class="filter-badge">X</span></label><input type="radio" name="p-filter" class="filter" id="seeInactive"><label class="filterLabel" for="seeInactive">{'Deactivated'|@translate}<span class="filter-badge">X</span></label><input type="radio" name="p-filter" class="filter" id="seeOther"><label class="filterLabel" for="seeOther">{'Other'|@translate}<span class="filter-badge">X</span></label>
 </div>
 
 <div class="pluginFilter"> 
@@ -700,4 +706,12 @@ jQuery(".pluginMiniBox").each(function(index){
 
   align-items: center;
 }
+
+.filter-badge {
+  border-radius: 20px;
+  text-align: center;
+  padding: 0px 7px;
+  margin-left: 10px;
+  font-weight: bold;
+}
 </style>

admin/themes/default/theme.css

@@ -2112,8 +2112,9 @@ h2:lang(en) { text-transform:capitalize; }
   justify-content: center;
   align-items: center;
 
-  width: 70px;
+  width: auto;
   height: 30px;
+  padding: 0 10px;
 
   color: #898989;
   background: #f3f3f3;
@@ -2126,6 +2127,16 @@ h2:lang(en) { text-transform:capitalize; }
   box-shadow: 0 2px #d18800;
 }
 
+.pluginTypeFilter input:checked + label .filter-badge {
+  background-color: #d18800;
+  color: white;
+}
+
+.pluginTypeFilter input + label .filter-badge {
+  background-color: #dbdbdb;
+  color: #8c8c8c;
+}
+
 .pluginContainer.line .pluginMiniBox:hover .pluginContent{
   transition: 0.4s;
   background: #ffe5cc;

admin/themes/roma/theme.css

@@ -1147,8 +1147,9 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important;
   justify-content: center;
   align-items: center;
 
-  width: 70px;
+  width: auto;
   height: 30px;
+  padding: 0 10px;
 
   color: #c1c1c1;
   background: #555555;
@@ -1161,6 +1162,17 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important;
   box-shadow: 0 2px #925f00;
 }
 
+.pluginTypeFilter input:checked + label .filter-badge {
+  background-color: #d18800;
+  color: #444;
+}
+
+.pluginTypeFilter input + label .filter-badge {
+  background-color: #3f3f3f;
+  color: #bababa;
+}
+
+
 .pluginContainer.line .pluginMiniBox:hover .pluginContent{
   transition: 0.4s;
   background: #333333;