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>
|
<script lang="ts" setup>
|
||||||
import { computed, reactive, onMounted, ref } from "vue";
|
import { computed, reactive, onMounted } from "vue";
|
||||||
import PaginatedFilteredTable from "@/utils/tables/PaginatedFilteredTable";
|
import PaginatedFilteredTable from "@/utils/tables/PaginatedFilteredTable";
|
||||||
import type { TableField, TableItem } from "@/utils/tables/types";
|
import type { TableField, TableItem } from "@/utils/tables/types";
|
||||||
import type { PropType } from "vue";
|
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 table = reactive(new PaginatedFilteredTable(DEFAULT_MAX_ITEM_BY_PAGE));
|
||||||
|
|
||||||
const textSearch = ref("");
|
|
||||||
|
|
||||||
const filtersFieldMap = computed(() => {
|
const filtersFieldMap = computed(() => {
|
||||||
return table?.filteredTable?.filtersFieldMap;
|
return table?.filteredTable?.filtersFieldMap;
|
||||||
});
|
});
|
||||||
|
@ -32,11 +30,7 @@ const displayedFieldKeys = computed(() => {
|
||||||
});
|
});
|
||||||
|
|
||||||
const paginatedList = computed(() => {
|
const paginatedList = computed(() => {
|
||||||
if (textSearch.value !== "") {
|
return table?.items;
|
||||||
return table?.search(textSearch.value);
|
|
||||||
} else {
|
|
||||||
return table?.items;
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
|
@ -69,7 +63,11 @@ function goTo(page: number) {
|
||||||
<template>
|
<template>
|
||||||
<div class="d-flex f-between">
|
<div class="d-flex f-between">
|
||||||
<div>
|
<div>
|
||||||
<input v-model="textSearch" class="btn-small" placeholder="Rechercher" />
|
<input
|
||||||
|
v-model="table.textSearch"
|
||||||
|
class="btn-small"
|
||||||
|
placeholder="Rechercher"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="d-flex f-end">
|
<div class="d-flex f-end">
|
||||||
<TagList
|
<TagList
|
||||||
|
|
|
@ -5,6 +5,7 @@ import type { FilterFieldsMap, Filters, TableField, TableItem } from "./types";
|
||||||
export default class FilteredHtmlTable {
|
export default class FilteredHtmlTable {
|
||||||
table: SimpleHtmlTable;
|
table: SimpleHtmlTable;
|
||||||
filtersFieldMap: FilterFieldsMap = {};
|
filtersFieldMap: FilterFieldsMap = {};
|
||||||
|
textSearch = "";
|
||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
this.table = new SimpleHtmlTable();
|
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;
|
return filteredItem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,7 +1,16 @@
|
||||||
import FilteredHtmlTable from "./FilteredHtmlTable";
|
import FilteredHtmlTable from "./FilteredHtmlTable";
|
||||||
import type { TableField, TableItem } from "./types";
|
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;
|
filteredTable: FilteredHtmlTable;
|
||||||
pageLenght: number;
|
pageLenght: number;
|
||||||
currentPage = 0;
|
currentPage = 0;
|
||||||
|
@ -30,6 +39,15 @@ export default class PaginatedFilteredTable {
|
||||||
this.filteredTable.fields = fields;
|
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[]) {
|
public addItems(items: TableItem[]) {
|
||||||
this.filteredTable.addItems(items);
|
this.filteredTable.addItems(items);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue