feat: make table searchable

src/components/tableaux/TableRenderer.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed, reactive, onMounted } from "vue";
+import { computed, reactive, onMounted, ref } from "vue";
 import PaginatedFilteredTable from "@/utils/tables/PaginatedFilteredTable";
 import type { TableField, TableItem } from "@/utils/tables/types";
 import type { PropType } from "vue";
@@ -21,6 +21,8 @@ const DEFAULT_MAX_ITEM_BY_PAGE = 10;
 
 const table = reactive(new PaginatedFilteredTable(DEFAULT_MAX_ITEM_BY_PAGE));
 
+const textSearch = ref("");
+
 const filtersFieldMap = computed(() => {
   return table?.filteredTable?.filtersFieldMap;
 });
@@ -30,7 +32,11 @@ const displayedFieldKeys = computed(() => {
 });
 
 const paginatedList = computed(() => {
-  return table?.items;
+  if (textSearch.value !== "") {
+    return table?.search(textSearch.value);
+  } else {
+    return table?.items;
+  }
 });
 
 onMounted(() => {
@@ -62,7 +68,9 @@ function goTo(page: number) {
 
 <template>
   <div class="d-flex f-between">
-    <div></div>
+    <div>
+      <input v-model="textSearch" class="btn-small" placeholder="Rechercher" />
+    </div>
     <div class="d-flex f-end">
       <TagList
         :filtersFieldMap="filtersFieldMap"
@@ -110,4 +118,11 @@ table:not(:last-child) {
 .pages {
   font-weight: 600;
 }
+
+input {
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  margin-bottom: 0.5rem;
+  margin-left: 0;
+  margin-right: 0;
+}
 </style>

src/data/fields.ts

@@ -1,51 +1,51 @@
 const objectFields = [
-  { key: "nom", label: "Nom" },
+  { key: "nom", label: "Nom", canBeSearched: true },
   { key: "type", label: "Type", canBeFiltered: true },
   { key: "rarete", label: "Rareté", canBeFiltered: true },
-  { key: "effet", label: "Effet" },
+  { key: "effet", label: "Effet", canBeSearched: true },
   { key: "cout", label: "Cout" },
 ];
 
 const equipMainsFields = [
-  { key: "nom", label: "Nom" },
+  { key: "nom", label: "Nom", canBeSearched: true },
   { key: "type", label: "Type", canBeFiltered: true },
   { key: "mains", label: "Mains", canBeFiltered: true },
-  { key: "effet", label: "Effet" },
+  { key: "effet", label: "Effet", canBeSearched: true },
   { key: "force", label: "Force" },
   { key: "cout", label: "Cout" },
 ];
 
 const tenuesFields = [
-  { key: "nom", label: "Nom" },
+  { key: "nom", label: "Nom", canBeSearched: true },
-  { key: "effet", label: "Effet" },
+  { key: "effet", label: "Effet", canBeSearched: true },
   { key: "armure", label: "Armure" },
   { key: "cout", label: "cout" },
 ];
 
 const effetsFields = [
-  { key: "nom", label: "Nom" },
+  { key: "nom", label: "Nom", canBeSearched: true },
-  { key: "effet", label: "Effet" },
+  { key: "effet", label: "Effet", canBeSearched: true },
   { key: "surcout", label: "Surcout" },
 ];
 
 const accessoiresFields = [
-  { key: "nom", label: "Nom" },
+  { key: "nom", label: "Nom", canBeSearched: true },
-  { key: "effet", label: "Effet" },
+  { key: "effet", label: "Effet", canBeSearched: true },
   { key: "cout", label: "Cout" },
 ];
 
 const elementsFields = [
-  { key: "nom", label: "Nom" },
+  { key: "nom", label: "Nom", canBeSearched: true },
   { key: "type", label: "Type", canBeFiltered: true },
-  { key: "effet", label: "Effet" },
+  { key: "effet", label: "Effet", canBeSearched: true },
   { key: "oppose", label: "Opposé" },
 ];
 
 const terrainsFields = [
-  { key: "nom", label: "Nom" },
+  { key: "nom", label: "Nom", canBeSearched: true },
   { key: "type", label: "Type", canBeFiltered: true },
-  { key: "nomTerrain", label: "Nom du Terrain" },
+  { key: "nomTerrain", label: "Nom du Terrain", canBeSearched: true },
-  { key: "effetTerrain", label: "Effet" },
+  { key: "effetTerrain", label: "Effet", canBeSearched: true },
   { key: "oppose", label: "Affaibli" },
 ];
 

src/utils/tables/FilteredHtmlTable.ts

@@ -51,6 +51,19 @@ export default class FilteredHtmlTable {
     return filteredItem;
   }
 
+  search(query: string) {
+    return this.items.filter((row) => {
+      for (const field of this.table.fields) {
+        if (field.canBeSearched) {
+          if ((row[field.key] as string).includes(query)) {
+            return true;
+          }
+        }
+      }
+      return false;
+    });
+  }
+
   private setFilterableValue(fieldKey: string, filterableValue: string) {
     const filters = this.getFiltersForField(fieldKey);
     if (filters) {

src/utils/tables/PaginatedFilteredTable.ts

@@ -34,6 +34,10 @@ export default class PaginatedFilteredTable {
     this.filteredTable.addItems(items);
   }
 
+  public search(query: string) {
+    return this.filteredTable.search(query);
+  }
+
   public canGo(rel: number) {
     return (
       this.currentPage + rel >= 0 && this.currentPage + rel <= this.pageNumber

src/utils/tables/types.ts

@@ -7,6 +7,7 @@ interface TableField {
   key: string;
   label: string;
   canBeFiltered?: boolean;
+  canBeSearched?: boolean;
 }
 
 interface Filters {