Adding filter-buttons in pod list view (#21)

* Filter buttons for Pod view
diaspora · Apr 6, 2024 · 4a4ee3a · 4a4ee3a
1 parent ae3b780
commit 4a4ee3a
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 10 deletions.
diff --git a/app/assets/javascripts/app/pages/admin_pods.js b/app/assets/javascripts/app/pages/admin_pods.js
@@ -4,10 +4,48 @@ app.pages.AdminPods = app.views.Base.extend({
   templateName: "pod_table",
 
   tooltipSelector: "th i",
+  events: {
+    "click #show_all_pods": "showAllPods",
+    "click #show_active_pods": "showActivePods",
+    "click #show_invalid_pods": "showInvalidPods"
+  },
 
   initialize: function() {
     this.pods = new app.collections.Pods(app.parsePreload("pods"));
     this.rows = []; // contains the table row views
+    this.podfilter = "active";
+  },
+
+  showAllPods: function() {
+    this.podfilter = "";
+    this.postRenderTemplate();
+    this.$("#show_all_pods").addClass("active");
+    this.$("#show_active_pods").removeClass("active");
+    this.$("#show_invalid_pods").removeClass("active");
+  },
+
+  showActivePods: function() {
+    this.podfilter = "active";
+    this.postRenderTemplate();
+    this.$("#show_all_pods").removeClass("active");
+    this.$("#show_active_pods").addClass("active");
+    this.$("#show_invalid_pods").removeClass("active");
+  },
+
+  showBlockedPods: function() {
+    this.podfilter = "blocked";
+    this.postRenderTemplate();
+    this.$("#show_all_pods").removeClass("active");
+    this.$("#show_active_pods").removeClass("active");
+    this.$("#show_invalid_pods").removeClass("active");
+  },
+
+  showInvalidPods: function() {
+    this.podfilter = "invalid";
+    this.postRenderTemplate();
+    this.$("#show_all_pods").removeClass("active");
+    this.$("#show_active_pods").removeClass("active");
+    this.$("#show_invalid_pods").addClass("active");
   },
 
   postRenderTemplate: function() {
@@ -16,11 +54,17 @@ app.pages.AdminPods = app.views.Base.extend({
 
     // avoid reflowing the page for every entry
     var fragment = document.createDocumentFragment();
+    this.$("tbody").empty();
+
     this.pods.each(function(pod) {
-      self.rows.push(new app.views.PodEntry({
-        parent: fragment,
-        model: pod
-      }).render());
+      if (self.podfilter === "" ||
+        self.podfilter === "active" && pod.get("status") === "no_errors" ||
+        self.podfilter === "invalid" && pod.get("status") !== "no_errors") {
+        self.rows.push(new app.views.PodEntry({
+          parent: fragment,
+          model: pod
+        }).render());
+      }
     });
     this.$("tbody").append(fragment);
 
@@ -29,6 +73,7 @@ app.pages.AdminPods = app.views.Base.extend({
 
   _showMessages: function() {
     var msgs = document.createDocumentFragment();
+
     if (gon.totalCount && gon.totalCount > 0) {
       let totalPods = $("<div class='alert alert-info' role='alert' />")
         .append(Diaspora.I18n.t("admin.pods.total", {count: gon.totalCount}));
@@ -48,20 +93,20 @@ app.pages.AdminPods = app.views.Base.extend({
       msgs.appendChild(totalPods[0]);
     }
 
-    if( gon.uncheckedCount && gon.uncheckedCount > 0 ) {
+    if (gon.uncheckedCount && gon.uncheckedCount > 0) {
       var unchecked = $("<div class='alert alert-info' role='alert' />")
         .append(Diaspora.I18n.t("admin.pods.unchecked", {count: gon.uncheckedCount}));
       msgs.appendChild(unchecked[0]);
     }
-    if( gon.versionFailedCount && gon.versionFailedCount > 0 ) {
+    if (gon.versionFailedCount && gon.versionFailedCount > 0) {
       var versionFailed = $("<div class='alert alert-warning' role='alert' />")
-          .append(Diaspora.I18n.t("admin.pods.version_failed", {count: gon.versionFailedCount}));
+        .append(Diaspora.I18n.t("admin.pods.version_failed", {count: gon.versionFailedCount.toLocaleString()}));
       msgs.appendChild(versionFailed[0]);
     }
-    if( gon.errorCount && gon.errorCount > 0 ) {
+    if (gon.errorCount && gon.errorCount > 0) {
       var errors = $("<div class='alert alert-danger' role='alert' />")
-        .append(Diaspora.I18n.t("admin.pods.errors", {count: gon.errorCount}));
-        msgs.appendChild(errors[0]);
+        .append(Diaspora.I18n.t("admin.pods.errors", {count: gon.errorCount.toLocaleString()}));
+      msgs.appendChild(errors[0]);
     }
 
     $("#pod-alerts").html(msgs);

diff --git a/app/assets/templates/pod_table_tpl.jst.hbs b/app/assets/templates/pod_table_tpl.jst.hbs
@@ -1,3 +1,6 @@
+<button type="button" class="btn btn-default" id="show_all_pods">Alle</button>
+<button type="button" class="btn btn-default active" id="show_active_pods">Nur verfügbare</button>
+<button type="button" class="btn btn-default" id="show_invalid_pods">Mit Fehlern</button>
 
 <table class="table">
   <thead>