Commit 33bc3924 authored by Дмитрий Малюгин's avatar Дмитрий Малюгин 🕓
Browse files

fix: bug in 'Table'

parent 1e2fd85b

src/Playground.vue

+2 −2
Original line number Diff line number Diff line
@@ -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.

src/components/Table/Table.vue

+9 −10
Original line number Diff line number Diff line
@@ -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"

src/components/Table/TableHeader.vue

+5 −5
Original line number Diff line number Diff line
@@ -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">

src/components/Table/helpers.ts

+6 −5
Original line number Diff line number Diff line
@@ -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,

      );