commit a13b1c2dc817c63ae4e9023086a0fa0e4999a25b
Author: Jan Pašek <janpasek97@gmail.com>
Date:   Mon May 3 17:13:04 2021 +0200

    Re #8706 - Certificate list filtering

diff --git a/static/index.html b/static/index.html
index 04a4a99..38b332a 100644
--- a/static/index.html
+++ b/static/index.html
@@ -33,25 +33,25 @@
                                     <div class="form-group mb-0">
                                         <h5>Usage:</h5>
                                         <div class="form-check ml-4">
-                                            <input class="form-check-input" type="checkbox" id="usageCA">
+                                            <input class="form-check-input" type="checkbox" id="usageCA" v-model="filtering.usage.CA">
                                             <label class="form-check-label" for="usageCA">
                                                 CA
                                             </label>
                                         </div>
                                         <div class="form-check ml-4">
-                                            <input class="form-check-input" type="checkbox" id="usageSignature">
+                                            <input class="form-check-input" type="checkbox" id="usageSignature" v-model="filtering.usage.digitalSignature">
                                             <label class="form-check-label" for="usageSignature">
                                                 Digital signature
                                             </label>
                                         </div>
                                         <div class="form-check ml-4">
-                                            <input class="form-check-input" type="checkbox" id="usageAuth">
+                                            <input class="form-check-input" type="checkbox" id="usageAuth" v-model="filtering.usage.authentication">
                                             <label class="form-check-label" for="usageAuth">
                                                 Authentication
                                             </label>
                                         </div>
                                         <div class="form-check ml-4">
-                                            <input class="form-check-input" type="checkbox" id="usageSSL">
+                                            <input class="form-check-input" type="checkbox" id="usageSSL" v-model="filtering.usage.SSL">
                                             <label class="form-check-label" for="usageSSL">
                                                 SSL/TLS
                                             </label>
@@ -62,19 +62,19 @@
                                     <div class="form-group mb-0">
                                         <h5>Type:</h5>
                                         <div class="form-check ml-4">
-                                            <input class="form-check-input" type="checkbox" id="rootCA">
+                                            <input class="form-check-input" type="checkbox" id="rootCA" v-model="filtering.type.RootCA">
                                             <label class="form-check-label" for="rootCA">
                                                 Root CA
                                             </label>
                                         </div>
                                         <div class="form-check ml-4">
-                                            <input class="form-check-input" type="checkbox" id="intermediateCA">
+                                            <input class="form-check-input" type="checkbox" id="intermediateCA" v-model="filtering.type.IntermediateCA">
                                             <label class="form-check-label" for="intermediateCA">
                                                 Intermediate CA
                                             </label>
                                         </div>
                                         <div class="form-check ml-4">
-                                            <input class="form-check-input" type="checkbox" id="endCertificate">
+                                            <input class="form-check-input" type="checkbox" id="endCertificate" v-model="filtering.type.EndCertificate">
                                             <label class="form-check-label" for="endCertificate">
                                                 End certificate
                                             </label>
@@ -85,12 +85,13 @@
                                     <div class="form-group mb-0">
                                         <h5>Common name:</h5>
                                         <div>
-                                            <input class="form-control" type="text" id="commonName" placeholder="Enter common name">
+                                            <input class="form-control" type="text" id="commonName" placeholder="Enter common name"  v-model="filtering.CN">
                                         </div>
                                     </div>
                                 </div>
                                 <div class="col-3">
-                                    <button class="btn btn-primary">Apply filters</button>
+                                    <button class="btn btn-primary mb-2" style="width: 115px;" v-on:click="reloadData">Apply filters</button>
+                                    <button class="btn btn-secondary mb-2" style="width: 115px;" v-on:click="clearFilters">Clear filters</button>
                                 </div>
                             </div>
                         </div>
diff --git a/static/js/index.js b/static/js/index.js
index f007318..4f5aad9 100644
--- a/static/js/index.js
+++ b/static/js/index.js
@@ -5,20 +5,37 @@ Vue.component('loading', VueLoading)
 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,11 +43,14 @@ var certificateListingApp = new Vue({
         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,6 +62,48 @@ var certificateListingApp = new Vue({
                 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", {
