Revize a13b1c2d

Re #8706 - Certificate list filtering

static/js/index.js

@@ -5 +5 @@
 var certificateListingApp = new Vue({
     el: "#certificateListingPage",
     data: {
-        certificatesPerPage: 2,
+        certificatesPerPage: 20,
         hasNextPage: false,
         hasPreviousPage: false,
         currentPage: 1,
         loading: true,
         // list of all certificates to be displayed in the list
         certificates: [],
-        successMessage: ''
+        successMessage: '',
+        filtering: {
+            type: {
+                RootCA: false,
+                IntermediateCA: false,
+                EndCertificate: false,
+            },
+            usage: {
+                CA: false,
+                authentication: false,
+                digitalSignature: false,
+                SSL: false,
+            },
+            CN: "",
+        }
     },
     methods: {
         onNextPage: async function () {
             this.currentPage++;
             await this.loadPage(this.currentPage, this.certificatesPerPage);
         },
+        reloadData: async function() {
+            await this.loadPage(this.currentPage, this.certificatesPerPage);
+        },
         onPreviousPage: async function () {
             this.currentPage--;
             await this.loadPage(this.currentPage, this.certificatesPerPage);
@@ -26 +43 @@
         loadPage: async function (page, perPage) {
             // download a list of all available certificates and display them in the table
             try {
+                var params = {
+                    page: page - 1,
+                    per_page: perPage
+                };
+                var filtering = this.getFilterParameter();
+                if (filtering != null) params.filtering = filtering;
                 const response = await axios.get(API_URL + "certificates", {
-                    params: {
-                        page: page - 1,
-                        per_page: perPage
-                    }
+                    params: params
                 });
                 if (response.data["success"]) {
                     this.certificates = [];
@@ -42 +62 @@
                 console.log(error);
             }
         },
+        getFilterParameter: function () {
+            var type = [];
+            if (this.filtering.type.EndCertificate) type.push("end");
+            if (this.filtering.type.RootCA) type.push("root");
+            if (this.filtering.type.IntermediateCA) type.push("inter");
+
+            var usage = [];
+            if (this.filtering.usage.CA) usage.push("CA");
+            if (this.filtering.usage.SSL) usage.push("SSL");
+            if (this.filtering.usage.digitalSignature) usage.push("digitalSignature");
+            if (this.filtering.usage.authentication) usage.push("authentication");
+
+            var filtering = {};
+            if (usage.length > 0) filtering.usage = usage;
+            if (type.length > 0) filtering.type = type;
+
+            if (this.filtering.CN.length > 0) filtering.CN = this.filtering.CN;
+
+            if (this.filtering.hasOwnProperty("type") ||
+                this.filtering.hasOwnProperty("usage") ||
+                this.filtering.hasOwnProperty("CN"))
+                return filtering;
+            else
+                return null;
+        },
+        clearFilters: async function () {
+            this.filtering = {
+                type: {
+                    RootCA: false,
+                    IntermediateCA: false,
+                    EndCertificate: false,
+                },
+                usage: {
+                    CA: false,
+                    authentication: false,
+                    digitalSignature: false,
+                    SSL: false,
+                },
+                CN: "",
+            }
+            await this.reloadData();
+        },
         checkIfNextPage: async function(page, perPage) {
             try {
                 const response = await axios.get(API_URL + "certificates", {