feat: make table searchable

This commit is contained in:
Kazhnuz 2023-02-18 16:59:35 +01:00
parent cb1904cdad
commit af5f2983d3
5 changed files with 51 additions and 18 deletions

View file

@ -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(() => {
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>

View file

@ -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: "effet", label: "Effet" },
{ key: "nom", label: "Nom", canBeSearched: true },
{ key: "effet", label: "Effet", canBeSearched: true },
{ key: "armure", label: "Armure" },
{ key: "cout", label: "cout" },
];
const effetsFields = [
{ key: "nom", label: "Nom" },
{ key: "effet", label: "Effet" },
{ key: "nom", label: "Nom", canBeSearched: true },
{ key: "effet", label: "Effet", canBeSearched: true },
{ key: "surcout", label: "Surcout" },
];
const accessoiresFields = [
{ key: "nom", label: "Nom" },
{ key: "effet", label: "Effet" },
{ key: "nom", label: "Nom", canBeSearched: true },
{ 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: "effetTerrain", label: "Effet" },
{ key: "nomTerrain", label: "Nom du Terrain", canBeSearched: true },
{ key: "effetTerrain", label: "Effet", canBeSearched: true },
{ key: "oppose", label: "Affaibli" },
];

View file

@ -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) {

View file

@ -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

View file

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