fix: Correction recherche et page
This commit is contained in:
parent
6d338bbacb
commit
4febea92db
3 changed files with 40 additions and 10 deletions
|
@ -1,5 +1,5 @@
|
|||
<script lang="ts" setup>
|
||||
import { computed, reactive, onMounted, ref } from "vue";
|
||||
import { computed, reactive, onMounted } from "vue";
|
||||
import PaginatedFilteredTable from "@/utils/tables/PaginatedFilteredTable";
|
||||
import type { TableField, TableItem } from "@/utils/tables/types";
|
||||
import type { PropType } from "vue";
|
||||
|
@ -21,8 +21,6 @@ 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;
|
||||
});
|
||||
|
@ -32,11 +30,7 @@ const displayedFieldKeys = computed(() => {
|
|||
});
|
||||
|
||||
const paginatedList = computed(() => {
|
||||
if (textSearch.value !== "") {
|
||||
return table?.search(textSearch.value);
|
||||
} else {
|
||||
return table?.items;
|
||||
}
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
|
@ -69,7 +63,11 @@ function goTo(page: number) {
|
|||
<template>
|
||||
<div class="d-flex f-between">
|
||||
<div>
|
||||
<input v-model="textSearch" class="btn-small" placeholder="Rechercher" />
|
||||
<input
|
||||
v-model="table.textSearch"
|
||||
class="btn-small"
|
||||
placeholder="Rechercher"
|
||||
/>
|
||||
</div>
|
||||
<div class="d-flex f-end">
|
||||
<TagList
|
||||
|
|
|
@ -5,6 +5,7 @@ import type { FilterFieldsMap, Filters, TableField, TableItem } from "./types";
|
|||
export default class FilteredHtmlTable {
|
||||
table: SimpleHtmlTable;
|
||||
filtersFieldMap: FilterFieldsMap = {};
|
||||
textSearch = "";
|
||||
|
||||
constructor() {
|
||||
this.table = new SimpleHtmlTable();
|
||||
|
@ -48,6 +49,19 @@ export default class FilteredHtmlTable {
|
|||
}
|
||||
}
|
||||
|
||||
if (this.textSearch !== "") {
|
||||
filteredItem = filteredItem.filter((row) => {
|
||||
for (const field of this.table.fields) {
|
||||
if (field.canBeSearched) {
|
||||
if ((row[field.key] as string).includes(this.textSearch)) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
return false;
|
||||
});
|
||||
}
|
||||
|
||||
return filteredItem;
|
||||
}
|
||||
|
||||
|
|
|
@ -1,7 +1,16 @@
|
|||
import FilteredHtmlTable from "./FilteredHtmlTable";
|
||||
import type { TableField, TableItem } from "./types";
|
||||
|
||||
export default class PaginatedFilteredTable {
|
||||
export interface PaginatedTable {
|
||||
filteredTable: FilteredHtmlTable;
|
||||
pageLenght: number;
|
||||
currentPage: number;
|
||||
pageNumber: number;
|
||||
items: TableItem[];
|
||||
textSearch: string;
|
||||
}
|
||||
|
||||
export default class PaginatedFilteredTable implements PaginatedTable {
|
||||
filteredTable: FilteredHtmlTable;
|
||||
pageLenght: number;
|
||||
currentPage = 0;
|
||||
|
@ -30,6 +39,15 @@ export default class PaginatedFilteredTable {
|
|||
this.filteredTable.fields = fields;
|
||||
}
|
||||
|
||||
set textSearch(textSearch: string) {
|
||||
this.currentPage = 0;
|
||||
this.filteredTable.textSearch = textSearch;
|
||||
}
|
||||
|
||||
get textSearch() {
|
||||
return this.filteredTable.textSearch;
|
||||
}
|
||||
|
||||
public addItems(items: TableItem[]) {
|
||||
this.filteredTable.addItems(items);
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue