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

fix: some bugs and modify Table with Paginator

parent f2b696d1

package.json

+1 −1
Original line number Diff line number Diff line 
{

  "name": "@d.malygin/UI_storybook",

  "version": "1.0.18",

  "version": "1.0.19",

  "type": "module",

  "scripts": {

    "dev": "vite",

src/common/interfaces/componentsProp.ts

+3 −0
Original line number Diff line number Diff line
@@ -5,6 +5,7 @@ import type { 
  IProgressBarProps,

  IRatingProps,

  ISelectProps,

  ITagProps,

} from '../interfaces/componentsProps';



export interface ITableColumn {
@@ -21,6 +22,7 @@ export interface ITableColumn { 


export interface ITableColumnOptions

  extends ICheckboxProps,

    ITagProps,

    ISelectProps,

    IRatingProps,

    IProgressBarProps,
@@ -30,6 +32,7 @@ export type TTableColumnType = 
  | 'checkbox'

  | 'number'

  | 'text'

  | 'tag'

  | 'date'

  | 'select'

  | 'rating'

src/components/Paginator/Paginator.vue

+1 −1
Original line number Diff line number Diff line
@@ -52,7 +52,7 @@ const color = computed(() => convertThemeToColor(props.theme, props.darknessThem 
const textColor = computed(() => convertThemeToTextColor(props.theme, props.darknessTheme));



watch(itemsPerPage, (cur, prev) => {

  if (cur > prev) current.value = Math.round((current.value * prev) / cur);

  if (cur > prev) current.value = Math.round((current.value * prev) / cur) ?? 1;

  else current.value = Math.ceil((prev * (current.value - 1) + +cur) / cur);

});

</script>

src/components/Table/Table.vue

+18 −13
Original line number Diff line number Diff line 
<script setup lang="ts">

import type { ITableProps } from '../../common/interfaces/componentsProps';

import { computed, type Ref, ref } from 'vue';

import { computed, type Ref, ref, watchEffect } from 'vue';

import {

  convertThemeToColor,

  convertThemeToSecondaryColor,
@@ -11,6 +11,7 @@ import TableHeader from './components/TableHeader.vue'; 
import TableCell from './components/TableCell.vue';

import Paginator from '../Paginator/Paginator.vue';

import ToggleSwitch from '../ToggleSwitch/ToggleSwitch.vue';

import type { ITableColumn } from '@interfaces/componentsProp';



const props = withDefaults(defineProps<ITableProps>(), {

  size: 'normal',
@@ -24,10 +25,9 @@ const emit = defineEmits(['updateData']); 


const table = ref();

const currentPage = ref<number>(1);

const itemsPerPage = ref<number>(10);

const itemsPerPage = ref<number>(9999);

const isEditMode = ref<boolean>(props.editable);



const columns = ref(props.columns);

const sortStateActive = ref<[number, string] | []>([]);

const indexColumnToFilter = ref<number>(0);

const isFilterPopup = ref<boolean>(false);
@@ -37,12 +37,11 @@ const isRegisterSensitive = ref<boolean>(false); 
if (props.data) {

  data.value = props.data;

}

if (props.columns) {

  columns.value = props.columns;

}



const columnToSortIndex = props.columns.findIndex((column) => column.initSort && column.initSort !== 'none');

if (~columnToSortIndex) sortStateActive.value = [columnToSortIndex, props.columns[columnToSortIndex].initSort!];

const columns = computed(() => props.columns);



const columnToSortIndex = columns.value.findIndex((column) => column.initSort && column.initSort !== 'none');

if (~columnToSortIndex) sortStateActive.value = [columnToSortIndex, columns.value[columnToSortIndex].initSort!];



const initGap = computed(() => calcGap(props.gap ?? '5px', props.fontSize));

const additionalHeightFromSize = computed(() => calcAdditionalHeight(props.size, props.fontSize));
@@ -62,12 +61,12 @@ const rows = computed<unknown[][]>(() => 
    sortStateActive.value,

    props.multipleSort,

    indexColumnToFilter.value,

    props.columns[sortStateActive.value?.[0] ?? -1]?.type ?? 'text',

    columns.value[sortStateActive.value?.[0] ?? -1]?.type ?? 'text',

    filterValue.value,

    isRegisterSensitive.value,

  ),

);

const types = computed(() => props.columns.map((column) => column.type));

const types = computed(() => columns.value.map((column: ITableColumn) => column.type));

const paginatorContainerHeight = computed(() => (props.paginator || props.editable ? '50px' : '0'));

const themeColor = computed(() => convertThemeToColor(props.theme, props.darknessTheme));

const color = computed(() =>
@@ -114,6 +113,12 @@ const updateData = (newValue: Ref<unknown>, rowIndex: number, columnIndex: numbe 
    emit('updateData', data.value);

  }

};



watchEffect(() => {

  if (!props.paginator) {

    itemsPerPage.value = 9999;

  }

});

</script>



<template>
@@ -181,7 +186,7 @@ const updateData = (newValue: Ref<unknown>, rowIndex: number, columnIndex: numbe 
              :item="item"

              :types="types"

              :column="columns[columnIndex]"

              :rowIndex="rowIndex"

              :rowIndex="itemsPerPage * (currentPage - 1) + rowIndex"

              :columnIndex="columnIndex"

              :center="center"

              :isEditMode="isEditMode"
@@ -199,13 +204,13 @@ const updateData = (newValue: Ref<unknown>, rowIndex: number, columnIndex: numbe 
        </tr>

      </tbody>

    </table>

    <div class="paginatorContainer">

    <div v-if="editable || paginator" class="paginatorContainer">

      <section v-if="editable" class="editMenu">

        <p class="editText">Edit mode:</p>

        <ToggleSwitch v-model="isEditMode" negativeTheme="red" />

      </section>

      <Paginator

        v-show="paginator"

        v-if="paginator"

        v-model:current="currentPage"

        v-model:itemsPerPage="itemsPerPage"

        :theme="theme"

src/components/Table/components/TableCell.vue

+9 −1
Original line number Diff line number Diff line
@@ -2,6 +2,7 @@ 
import { filterCheckboxProps, filterSelectProps } from '../helpers';

import type { ITableColumn, TTableColumnType } from '../../../common/interfaces/componentsProp';

import Checkbox from '../../Checkbox/Checkbox.vue';

import Tag from '../../Tag/Tag.vue';

import Select from '../../Select/Select.vue';

import Rating from '../../Rating/Rating.vue';

import ProgressBar from '../../ProgressBar/ProgressBar.vue';
@@ -29,7 +30,7 @@ defineEmits(['updateData']); 


<template>

  <div

    :style="`width: calc(${column.width ?? 'auto'} - 2 * ${initGap})`"

    :style="`width: calc(${column?.width ?? 'auto'} - 2 * ${initGap})`"

    :class="[

      'cell',

      {
@@ -57,6 +58,12 @@ defineEmits(['updateData']); 
        :active="item as boolean"

        @update="$emit('updateData', $event, rowIndex, columnIndex)"

      />

      <Tag

        v-if="types[columnIndex] === 'tag'"

        v-bind="column.options"

        :value="item as string"

        @update="$emit('updateData', $event, rowIndex, columnIndex)"

      />

      <Select

        v-else-if="types[columnIndex] === 'select'"

        noBorder
@@ -94,6 +101,7 @@ defineEmits(['updateData']); 
        v-bind="filterCheckboxProps(column.options)"

        :active="item as boolean"

      />

      <Tag v-if="types[columnIndex] === 'tag'" v-bind="column.options" :value="item as string" />

      <Select

        v-else-if="types[columnIndex] === 'select'"

        noBorder