Added search box

Author: dmytrotsko

src/assets/js/indicatorSetsTable.js

@@ -12,7 +12,7 @@ function calculate_table_height() {
 
 var table = new DataTable("#indicatorSetsTable", {
     fixedHeader: true,
-    searching: false,
+    searching: true,
     paging: false,
     scrollCollapse: true,
     scrollX: true,
@@ -23,25 +23,29 @@ var table = new DataTable("#indicatorSetsTable", {
     },
     ordering: false,
     mark: true,
-
-    language: {
-        buttons: {
-            colvis: "Toggle Columns",
-        },
-    },
+    // language: {
+    //     buttons: {
+    //         colvis: "Toggle Columns",
+    //     },
+    // },
+    dom: 'lrtip' // Hides the default search box
 });
 
-new DataTable.Buttons(table, {
-    buttons: [
-        {
-            extend: "colvis",
-            columns: "th:nth-child(n+3)",
-            prefixButtons: ["colvisRestore"],
-        },
-    ],
-});
+// new DataTable.Buttons(table, {
+//     buttons: [
+//         {
+//             extend: "colvis",
+//             columns: "th:nth-child(n+3)",
+//             prefixButtons: ["colvisRestore"],
+//         },
+//     ],
+// });
 
-table.buttons(0, null).container().appendTo("#colvis");
+// table.buttons(0, null).container().appendTo("#colvis");
+
+$('#myCustomSearchBox').on('keyup change', function() {
+    table.search(this.value).draw();
+});
 
 function format(indicatorSetId, relatedIndicators, indicatorSetDescription) {
     var indicators = relatedIndicators.filter(

src/templates/indicatorsets/indicatorSetsFilters.html

@@ -10,6 +10,36 @@
                 <div class="colvis" id="colvis"></div>
                 <h2 class="card-title font-size-25">Filters</h2>
                 <div class="accordion accordion-flush" id="accordionIndicatorSetFilters">
+                    <div class="accordion-item">
+                        <p class="accordion-header" id="flush-heading_search">
+                            Search:
+                            <a tabindex="0"
+                               type="button"
+                               class="info-button filter-description-popover"
+                               data-mdb-container="body"
+                               data-mdb-ripple-init
+                               data-mdb-popover-init
+                               data-mdb-trigger="hover"
+                               data-mdb-placement="right"
+                               data-mdb-content="{{ filters_descriptions|dict_get:"" }}">
+                                <i class="far fa-circle-question"></i>
+                            </a>
+                        </p>
+                        <div id="flush-collapse_search"
+                             aria-labelledby="flush-heading_search"
+                             data-mdb-parent="#accordionIndicatorSetFilters">
+                            <div class="accordion-body margin-top-1rem">
+                                <div class="input-group">
+                                    <div class="form-outline" data-mdb-input-init>
+                                        <input type="text"
+                                               id="myCustomSearchBox"
+                                               class="form-control form-control-lg" />
+                                        <label class="form-label" for="form12">Search ...</label>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
                     <div class="accordion-item">
                         <p class="accordion-header" id="flush-heading_location_search">
                             Location(s):