@webitel/ui-datalist Table Store

Об'єднаний all-in-one стор для таблички.

В середині створює і використовує окремі стори:

• filters

• pagination

• headers (shown headers, sort, fields)

  Для того, щоб заховати всі складнощі підключення і нюанси, а на рівні клієнта (цього модуля) все було максимально простим і лаконічним: Підключили в компонент, і погнали.

TLDR; Usage

Source code link: cases.ts

Створити

// crm/.../stores/cases.ts

import { createTableStore } from '@webitel/ui-datalist'; 

// other imports: { CasesAPI, CasesNamespace, headers }

export const useCasesStore = createTableStore(CasesNamespace, { 
    apiModule: CasesAPI, 
    headers, 
});

Використати

Source code link: the-cases.vue

// crm/.../components/the-cases.vue

<template />

<script setup>
  // ...
  import { useCasesStore } from '../stores/cases'; 

  // ...
  const tableStore = useCasesStore(); 

  const {
    dataList,
    selected,
    error,
    isLoading,
    page,
    size,
    next,
    headers,
    shownHeaders,
    filtersManager,
  } = storeToRefs(tableStore); 

  const {
    initialize,
    loadDataList,
    updateSelected,
    updatePage,
    updateSize,
    updateSort,
    deleteEls,
    updateShownHeaders,
  } = tableStore; 
</script>

Features and configuration params

Config: isAppendDataList

Табличка працюватиме в режимі довантаження даних до dataList.

aka features:

• infinite scroll
• "load more"

Config: storeType

Pinia/Composable.

• Для "типових" сторінок-табличок використовуємо pinia (за замовчуванням).

• Для простішого (попапи, скажімо) - краще composable.

See Store Types.

Config: disablePersistence

Повністю вимкнути PersistenceStorage для цього стора. для стора і його чайлдів.

link

А якщо знадобиться вибіркове вимкнення?

Треба буде розширити цей параметр, щоб він міг приймати не тільки boolean, а й { ${store}: boolean }.

Або взагалі конфігурувати для окремих філдів.

Nested list: табличка в табі карточки

Store вкладеного списку — той самий, а от підключати його в компонент треба через useNestedTableList: карточка мусить володіти своїми списками, інакше таб покаже записи карточки, яку відкривали перед цією.

const tableStore = useNestedTableList({
  useTableStore: useQueueBucketsDatalistStore,
});

Деталі, lifecycle і правила — Nested Table List.

$reset

Чистить те, що належало одному батьківському запису: dataList, selected, error, isLoading, parentId, пагінацію і фільтри.

Не чистить headers (вибір колонок користувача) і isStoreSetUp (persistence відновлюється раз на життя апки).

Викликає його card store, у якому список зареєстрований — вручну не треба.

Design Considerations

Як watch'ити зміни фільтрів?

Наразі максимально примітивно, згідно KISS: використовуючи Vue watch.

На щастя, pinia вміє працювати з watch'ами, на відміну від vuex. Що дуже спрощує цю задачу.