Add a custom search function to the tables capable of excluding some pills

static/scripts/table.js

@@ -0,0 +1,69 @@
+class BrickTable {
+    constructor(id, per_page, no_sort = [], number = []) {
+        const columns = [];
+
+        if (no_sort.length) {
+            columns.push({ select: no_sort, sortable: false, searchable: false });
+        }
+
+        if (number.length) {
+            columns.push({ select: number, type: "number", searchable: false });
+        }
+
+        this.table = new simpleDatatables.DataTable(`#${id}`, {
+            columns: columns,
+            pagerDelta: 1,
+            perPage: per_page,
+            perPageSelect: [10, 25, 50, 100, 500, 1000],
+            searchable: true,
+            searchMethod: (table => (terms, cell, row, column, source) => table.search(terms, cell, row, column, source))(this),
+            searchQuerySeparator: "",
+            tableRender: () => {
+              baguetteBox.run("[data-lightbox]");
+            },
+            pagerRender: () => {
+              baguetteBox.run("[data-lightbox]");
+            }
+        });
+    }
+
+    // Custom search method
+    // Very simplistic but will exclude pill links
+    search(terms, cell, row, column, source) {
+        // Create a searchable string from the data stack ignoring data-search="exclude"
+        const search = this.buildSearch(cell.data).filter(data => data != "").join(" ");
+
+        // Search it
+        for (const term of terms) {
+            if (search.includes(term)) {
+                return true;
+            }
+        }
+
+        return false;
+    }
+
+    // Build the search string
+    buildSearch(dataList) {
+        let search = [];
+
+        for (const data of dataList) {
+            // Exclude
+            if (data.attributes && data.attributes['data-search'] && data.attributes['data-search'] == 'exclude') {
+                continue;
+            }
+
+            // Childnodes
+            if (data.childNodes) {
+                search = search.concat(this.buildSearch(data.childNodes));
+            }
+
+            // Data
+            if(data.data) {
+                search.push(data.data.trim().toLowerCase());
+            }
+        }
+
+        return search;
+    }
+}

templates/instructions.html

@@ -22,4 +22,8 @@
       {% endwith %}
     </div>
   {% endif %}
+{% endblock %}
+
+{% block scripts %}
+<script src="{{ url_for('static', filename='scripts/table.js') }}"></script>
 {% endblock %}

templates/instructions/table.html

@@ -23,8 +23,8 @@
           {%- if item.allowed -%}
             </a>
           {% endif %}
-          <span class="badge rounded-pill text-bg-info fw-normal"><i class="ri-hard-drive-line"></i> {{ item.human_size() }}</span>
-          <span class="badge rounded-pill text-bg-light border fw-normal"><i class="ri-calendar-line"></i> {{ item.human_time() }}</span>
+          <span data-search="exclude" class="badge rounded-pill text-bg-info fw-normal"><i class="ri-hard-drive-line"></i> {{ item.human_size() }}</span>
+          <span data-search="exclude" class="badge rounded-pill text-bg-light border fw-normal"><i class="ri-calendar-line"></i> {{ item.human_time() }}</span>
         </td>
         <td>
           {% if item.set %}<span class="badge text-bg-secondary fw-normal"><i class="ri-hashtag"></i> {{ item.set }}</span>{% endif %}
@@ -47,5 +47,9 @@
   </table>
 </div>
 {% if all %}
-  {{ table.dynamic('instructions', no_sort='2,3')}}
+  <script type="text/javascript">
+    document.addEventListener("DOMContentLoaded", () => {
+      new BrickTable('instructions', {{ config['DEFAULT_TABLE_PER_PAGE'] }}, [2, 3]);
+    });
+  </script>
 {% endif %}

templates/macro/table.html

@@ -28,7 +28,7 @@
 {% macro bricklink(item) %}
   {% set url=item.url_for_bricklink() %}
   {% if url %}
-    <a href="{{ url }}" target="_blank" class="badge rounded-pill text-bg-light border fw-normal">
+    <a data-search="exclude" href="{{ url }}" target="_blank" class="badge rounded-pill text-bg-light border fw-normal">
       <i class="ri-external-link-line"></i> Bricklink
     </a>
   {% endif %}
@@ -45,32 +45,8 @@
 {% macro rebrickable(item) %}
   {% set url=item.url_for_rebrickable() %}
   {% if url %}
-    <a href="{{ url }}" target="_blank" class="badge rounded-pill text-bg-light border fw-normal">
+    <a data-search="exclude" href="{{ url }}" target="_blank" class="badge rounded-pill text-bg-light border fw-normal">
       <i class="ri-external-link-line"></i> Rebrickable
     </a>
   {% endif %}
 {% endmacro %}
-
-{% macro dynamic(id, no_sort=none, number=none) %}
-  <script type="text/javascript">
-    document.addEventListener("DOMContentLoaded", () => {
-      new simpleDatatables.DataTable("#{{ id }}", {
-        columns: [
-          {% if no_sort %}{ select: [{{ no_sort }}], sortable: false, searchable: false },{% endif %}
-          {% if number %}{ select: [{{ number }}], type: "number", searchable: false },{% endif %}
-        ],
-        pagerDelta: 1,
-        perPage: {{ config['DEFAULT_TABLE_PER_PAGE'] }},
-        perPageSelect: [10, 25, 50, 100, 500, 1000],
-        searchable: true,
-        searchQuerySeparator: "",
-        tableRender: () => {
-          baguetteBox.run('[data-lightbox]')
-        },
-        pagerRender: () => {
-          baguetteBox.run('[data-lightbox]')
-        }
-      });
-    });
-  </script>
-{% endmacro %}

templates/minifigure/table.html

@@ -22,5 +22,9 @@
   </table>
 </div>
 {% if all %}
-  {{ table.dynamic('minifigures', no_sort='0', number='2, 3, 4')}}
+  <script type="text/javascript">
+    document.addEventListener("DOMContentLoaded", () => {
+      new BrickTable('minifigures', {{ config['DEFAULT_TABLE_PER_PAGE'] }}, [0], [2, 3, 4]);
+    });
+  </script>
 {% endif %}

templates/minifigures.html

@@ -8,4 +8,8 @@
     {% include 'minifigure/table.html' %}
   {% endwith %}
 </div>
+{% endblock %}
+
+{% block scripts %}
+<script src="{{ url_for('static', filename='scripts/table.js') }}"></script>
 {% endblock %}

templates/missing.html

@@ -8,4 +8,8 @@
     {% include 'part/table.html' %}
   {% endwith %}
 </div>
+{% endblock %}
+
+{% block scripts %}
+<script src="{{ url_for('static', filename='scripts/table.js') }}"></script>
 {% endblock %}

templates/part/table.html

@@ -52,5 +52,9 @@
   </table>
 </div>
 {% if all %}
-  {{ table.dynamic('parts', no_sort='0', number='3, 4, 5, 6')}}
+  <script type="text/javascript">
+    document.addEventListener("DOMContentLoaded", () => {
+      new BrickTable('parts', {{ config['DEFAULT_TABLE_PER_PAGE'] }}, [0], [3, 4, 5, 6]);
+    });
+  </script>
 {% endif %}

templates/parts.html

@@ -8,4 +8,8 @@
     {% include 'part/table.html' %}
   {% endwith %}
 </div>
+{% endblock %}
+
+{% block scripts %}
+<script src="{{ url_for('static', filename='scripts/table.js') }}"></script>
 {% endblock %}

templates/wish/table.html

@@ -41,5 +41,9 @@
   </table>
 </div>
 {% if all %}
-  {{ table.dynamic('wish', no_sort='0,7')}}
+  <script type="text/javascript">
+    document.addEventListener("DOMContentLoaded", () => {
+      new BrickTable('wish', {{ config['DEFAULT_TABLE_PER_PAGE'] }}, [0, 7]);
+    });
+  </script>
 {% endif %}

templates/wishes.html

@@ -28,4 +28,8 @@
     {% include 'wish/table.html' %}
   {% endwith %}
 </div>
+{% endblock %}
+
+{% block scripts %}
+<script src="{{ url_for('static', filename='scripts/table.js') }}"></script>
 {% endblock %}