From 33bc39246d11a569e2dde76f77ca938968a1c4a2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=94=D0=BC=D0=B8=D1=82=D1=80=D0=B8=D0=B9=20=D0=9C=D0=B0?=
=?UTF-8?q?=D0=BB=D1=8E=D0=B3=D0=B8=D0=BD?= <d.malygin@iqdev.digital>
Date: Wed, 22 Jan 2025 10:06:18 +0500
Subject: [PATCH] fix: bug in 'Table'
---
src/Playground.vue | 4 ++--
src/components/Table/Table.vue | 19 +++++++++----------
src/components/Table/TableHeader.vue | 10 +++++-----
src/components/Table/helpers.ts | 11 ++++++-----
4 files changed, 22 insertions(+), 22 deletions(-)
diff --git a/src/Playground.vue b/src/Playground.vue
index cdb68c0..c27834c 100644
--- a/src/Playground.vue
+++ b/src/Playground.vue
@@ -241,7 +241,7 @@ const knob = ref(0);
></Table>
<button class="testButton" @click="visibleDrawer = !visibleDrawer">Ðажми менÑ</button>
<div class="hui" style="width: 500px; height: 500px; background-color: gray"></div>
- <Popup v-model:active="popupActive" parentSelector=".hui" theme="sky">
+ <Popup v-model="popupActive" parentSelector=".hui" theme="sky">
<Button
@click="
() => {
@@ -252,7 +252,7 @@ const knob = ref(0);
label="Открыть модальное окно"
/>
</Popup>
- <Popup v-model:active="popupActive2" theme="sky"
+ <Popup v-model="popupActive2" theme="sky"
>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet fugiat harum maiores placeat soluta, vel velit
voluptas. Accusamus aut, error et minima neque praesentium, ratione, reprehenderit repudiandae saepe ut vero! Lorem
ipsum dolor sit amet, consectetur adipisicing elit. Amet fugiat harum maiores placeat soluta, vel velit voluptas.
diff --git a/src/components/Table/Table.vue b/src/components/Table/Table.vue
index 91c48bb..be0a5e2 100644
--- a/src/components/Table/Table.vue
+++ b/src/components/Table/Table.vue
@@ -12,13 +12,11 @@ const props = withDefaults(defineProps<ITableProps>(), {
darknessTheme: '500',
fontSize: '16px',
});
-const data = defineModel<ITableItem[][]>({
- required: false,
-});
+const data = defineModel<ITableItem[][]>();
const columns = ref(props.columns);
const sortStateActive = ref<[number, string] | []>([]);
-const columnToFilter = ref<number>(0);
+const indexColumnToFilter = ref<number>(0);
const isFilterPopup = ref<boolean>(false);
const filterValue = ref<string>('');
const isRegisterSensitive = ref<boolean>(false);
@@ -48,8 +46,8 @@ const rows = computed<ITableItem[][]>(() =>
data.value ?? props.data,
sortStateActive.value,
props.multipleSort,
- columnToFilter.value,
- props.columns[columnToFilter.value ?? 0].type ?? 'text',
+ indexColumnToFilter.value,
+ props.columns[sortStateActive.value?.[0] ?? -1]?.type ?? 'text',
filterValue.value,
isRegisterSensitive.value,
),
@@ -57,6 +55,7 @@ const rows = computed<ITableItem[][]>(() =>
const changeColumnSortMode = (index: number) => {
const cur = sortState.value[index];
+ console.log(index, cur);
const newValue = cur === 'none' ? 'down' : cur === 'down' ? 'up' : 'none';
if (cur === 'up') {
sortStateActive.value = [];
@@ -68,12 +67,12 @@ const changeColumnSortMode = (index: number) => {
columns.value[index].initSort = newValue;
};
const setFilter = (column: number) => {
- if (columnToFilter.value === column || !isFilterPopup.value) {
+ if (indexColumnToFilter.value === column || !isFilterPopup.value) {
isFilterPopup.value = !isFilterPopup.value;
}
- if (columnToFilter.value !== column) {
+ if (indexColumnToFilter.value !== column) {
filterValue.value = '';
- columnToFilter.value = column;
+ indexColumnToFilter.value = column;
}
};
const cancelFilter = () => {
@@ -98,7 +97,7 @@ const cancelFilter = () => {
v-model:isRegisterSensitive="isRegisterSensitive"
:columns="columns"
:sortState="sortState"
- :columnToFilter="columnToFilter"
+ :indexColumnToFilter="indexColumnToFilter"
:initGap="initGap"
:additionalHeightFromSize="additionalHeightFromSize"
:theme="theme"
diff --git a/src/components/Table/TableHeader.vue b/src/components/Table/TableHeader.vue
index c21051f..4ef4267 100644
--- a/src/components/Table/TableHeader.vue
+++ b/src/components/Table/TableHeader.vue
@@ -15,7 +15,7 @@ import { computed } from 'vue';
interface Props {
columns: ITableColumn[];
sortState: string[];
- columnToFilter: number;
+ indexColumnToFilter: number;
initGap: string;
additionalHeightFromSize: string;
theme: TThemeColor;
@@ -44,7 +44,7 @@ const calcLeft = (selector: string) => {
if (!el) return 0;
return el.getBoundingClientRect().left - table.getBoundingClientRect().left + +iconSize.value;
};
-const isColumnTypeText = computed(() => props.columns[props.columnToFilter].type === 'text');
+const isColumnTypeText = computed(() => props.columns[props.indexColumnToFilter].type === 'text');
</script>
<template>
@@ -87,12 +87,12 @@ const isColumnTypeText = computed(() => props.columns[props.columnToFilter].type
</div>
</th>
<Popup
- v-model:active="isFilterPopup"
- :parentSelector="`#filter${columnToFilter}`"
+ v-model="isFilterPopup"
+ :parentSelector="`#filter${indexColumnToFilter}`"
buttonMenu
:theme="theme"
:top="+iconSize + 10"
- :left="calcLeft(`#filter${columnToFilter}`)"
+ :left="calcLeft(`#filter${indexColumnToFilter}`)"
maxHeight="200px"
>
<article style="padding: 2px">
diff --git a/src/components/Table/helpers.ts b/src/components/Table/helpers.ts
index 172f864..47e87a7 100644
--- a/src/components/Table/helpers.ts
+++ b/src/components/Table/helpers.ts
@@ -5,18 +5,18 @@ export const calcRows = (
initRows: ITableItem[][] | undefined,
sortStateActive: [number, string] | [],
multipleSort: boolean,
- columnToFilter: number,
- columnToFilterType: TTableColumnType,
+ indexColumnToFilter: number,
+ columnToSortType: TTableColumnType,
filterValue: string,
isRegisterSensitive: boolean,
) => {
if (!initRows?.length) return [];
// ['up', 'down', ...]
let rows = [...initRows];
-
if (filterValue) {
+ console.log('oh...');
rows = rows.filter((row) => {
- const item = isRegisterSensitive ? row[columnToFilter].value : row[columnToFilter].value.toLowerCase();
+ const item = isRegisterSensitive ? row[indexColumnToFilter].value : row[indexColumnToFilter].value.toLowerCase();
return item.startsWith(isRegisterSensitive ? filterValue : filterValue.toLowerCase());
});
}
@@ -43,7 +43,8 @@ export const calcRows = (
} else {
const index = sortStateActive[0];
const value = sortStateActive[1];
- if (columnToFilterType === 'number')
+ console.log(value, index, columnToSortType);
+ if (columnToSortType === 'number')
return rows.sort((a, b) =>
value === 'down' ? +a[index].value - +b[index].value : +b[index].value - +a[index].value,
);
--
GitLab