@webitel/ui-sdk 24.6.4 → 24.6.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "24.6.4",
+  "version": "24.6.6",
   "private": false,
   "scripts": {
     "dev": "vite",

package/src/modules/Filters/classes/BaseFilterSchema.js

@@ -1,15 +1,23 @@
-import { valueSetter, querySetter, localStorageSetter } from '../scripts/setters';
-import { queryRestore, localStorageRestore } from '../scripts/restores';
-import { valueGetter, queryGetter, localStorageGetter } from '../scripts/getters';
-
-const convertGetterArray = (context) => (router) => (getters) => {
+import {
+  localStorageGetter,
+  queryGetter,
+  valueGetter,
+} from '../scripts/getters';
+import { localStorageRestore, queryRestore } from '../scripts/restores';
+import {
+  localStorageSetter,
+  querySetter,
+  valueSetter,
+} from '../scripts/setters';
+
+const convertGetterArray = (context) => (getters) => {
   const availableGetters = ['value', 'query', 'localStorage'];
 
   getters.forEach((getter) => {
     if (!availableGetters.includes(getter)) throw new Error(`Unknown getter: ${getter}`);
   });
 
-  const getter = () => {
+  const getter = ({ router }) => {
     if (getters.includes('value')) {
       const value = valueGetter(context)();
       if (value) return value;
@@ -31,13 +39,13 @@ const convertGetterArray = (context) => (router) => (getters) => {
   return getter;
 };
 
-const convertSetterArray = (context) => (router) => (setters) => {
+const convertSetterArray = (context) => (setters) => {
   const availableSetters = ['value', 'query', 'localStorage'];
   setters.forEach((setter) => {
     if (!availableSetters.includes(setter)) throw new Error(`Unknown setter: ${setter}`);
   });
 
-  const setter = async (value) => {
+  const setter = async (value, { router }) => {
     if (setters.includes('value')) valueSetter(context)(value);
     if (setters.includes('query')) await querySetter(context)(router)(value);
     if (setters.includes('localStorage')) localStorageSetter(context)(value);
@@ -48,14 +56,14 @@ const convertSetterArray = (context) => (router) => (setters) => {
   return setter;
 };
 
-const convertRestoreArray = (context) => (router) => (restores) => {
+const convertRestoreArray = (context) => (restores) => {
   const availableRestores = ['query', 'localStorage'];
 
   restores.forEach((restore) => {
     if (!availableRestores.includes(restore)) throw new Error(`Unknown restore: ${restore}`);
   });
 
-  const restore = () => {
+  const restore = ({ router }) => {
     if (restores.includes('query')) {
       const restoredValue = queryRestore(context)(router)();
       if (restoredValue) return restoredValue;
@@ -73,40 +81,35 @@ const convertRestoreArray = (context) => (router) => (restores) => {
 export default class BaseFilterSchema {
   constructor({
                 name,
-                value,
-                get,
-                set,
-                restore,
-                router, // is required for query get/set, if getters/setters are passed as strings
+                value = '',
+                defaultValue = '',
+                get = ['value', 'query'],
+                set = ['value', 'query'],
+                restore = ['query'],
                 ...rest
               } = {}) {
     if (!name) throw new Error('Filter name is required');
-    if (value === undefined) throw new Error(`Filter value is required: ${name}`);
-
-    if (!get) throw new Error(`Filter getter is required: ${name}`);
-    if (!set) throw new Error(`Filter setter is required: ${name}`);
-    if (!restore) throw new Error(`Filter restore is required: ${name}`);
 
     Object.assign(this, {
       name,
       value,
-      get,
-      set,
-      restore,
+      defaultValue,
     }, rest);
 
-    this.setupGetters(get, { router });
-    this.setupSetters(set, { router });
-    this.setupRestores(restore, { router });
+    this.setupGetters(get);
+    this.setupSetters(set);
+    this.setupRestores(restore);
 
     return this;
   }
 
-  setupGetters(getters, { router }) {
+  setupGetters(getters) {
     let getter;
 
     if (Array.isArray(getters)) {
-      getter = convertGetterArray(this)(router)(getters);
+      if (getters.includes('query')) this.requireRouter = true;
+
+      getter = convertGetterArray(this)(getters);
     } else if (typeof getters === 'function') {
       getter = getters(this);
     } else {
@@ -116,11 +119,13 @@ export default class BaseFilterSchema {
     this.get = getter;
   }
 
-  setupSetters(setters, { router }) {
+  setupSetters(setters) {
     let setter;
 
     if (Array.isArray(setters)) {
-      setter = convertSetterArray(this)(router)(setters);
+      if (setters.includes('query')) this.requireRouter = true;
+
+      setter = convertSetterArray(this)(setters);
     } else if (typeof setters === 'function') {
       setter = setters(this);
     } else {
@@ -130,11 +135,13 @@ export default class BaseFilterSchema {
     this.set = setter;
   }
 
-  setupRestores(restores, { router }) {
+  setupRestores(restores) {
     let restore;
 
     if (Array.isArray(restores)) {
-     restore = convertRestoreArray(this)(router)(restores);
+      if (restores.includes('query')) this.requireRouter = true;
+
+      restore = convertRestoreArray(this)(restores);
     } else if (typeof restores === 'function') {
       restore = restores(this);
     } else {

package/src/modules/Filters/scripts/getters/queryGetter.js

@@ -2,9 +2,10 @@
 // context === filter "this"
 const queryGetter = (context) => (router) => () => {
   if (!router) throw new Error('Router is required for queryGetter!');
-  if (!router) throw new Error('Router is required for queryGetter!');
 
-  return router.currentRoute.value.query[context.name];
+  const query = router.currentRoute.value?.query || router.currentRoute.query || {};
+
+  return query[context.name];
 };
 
 export default queryGetter;

package/src/modules/Filters/scripts/utils/changeRouteQuery.js

@@ -1,15 +1,18 @@
 import deepEqual from 'deep-equal';
 
 const changeRouteQuery = (router) => ({ filterQuery, value }) => {
-  if (deepEqual(router.currentRoute.value.query[filterQuery], value)) return;
+  const name = router.currentRoute?.value?.name || router.currentRoute?.name;
+  const query = router.currentRoute?.value?.query || router.currentRoute?.query || {};
+
+  if (deepEqual(query[filterQuery], value)) return;
 
   const newQuery = {
-    ...router.currentRoute.value.query,
+    ...query,
     [filterQuery]: value,
   };
 
   return router.replace({
-    name: router.currentRoute.value.name,
+    name,
     query: newQuery,
   });
 };

package/src/modules/Filters/store/FiltersStoreModule.js

@@ -7,9 +7,19 @@ import FilterEvent from '../enums/FilterEvent.enum';
 export default class FiltersStoreModule extends BaseStoreModule {
   state = {
     _emitter: mitt(),
+    _requireRouter: false,
   };
 
   getters = {
+    ROUTER: (state, g, rootState) => {
+      if (!state._requireRouter) return null;
+      if (rootState.router === undefined) {
+        throw new Error('"rootState.router" is needed for filters to work properly.' +
+          ' Please, provide to root state, or setup it in filters module as getter "ROUTER"');
+      }
+      return rootState.router;
+    },
+
     _STATE_FILTER_NAMES: (state) => Object.keys(state)
     .filter((key) => !key.startsWith('_')),
 
@@ -18,7 +28,9 @@ export default class FiltersStoreModule extends BaseStoreModule {
       const filter = state[filterName];
       if (!filter) throw new Error(`Unknown filter: ${filterName}`);
 
-      return filter.get();
+      return filter.get({
+        router: this.getters.ROUTER,
+      });
     },
 
     // get all filters values
@@ -40,7 +52,9 @@ export default class FiltersStoreModule extends BaseStoreModule {
     }) => {
       const filter = context.state[name];
 
-      await filter.set(value);
+      await filter.set(value, {
+        router: context.getters.ROUTER,
+      });
 
       if (!silent) await context.dispatch('EMIT', {
         event: FilterEvent.FILTER_SET,
@@ -53,7 +67,9 @@ export default class FiltersStoreModule extends BaseStoreModule {
 
     RESTORE_FILTER: async (context, { name }) => {
       const filter = context.state[name];
-      const value = filter.restore();
+      const value = filter.restore({
+        router: context.getters.ROUTER,
+      });
 
       if (value) {
         await context.dispatch('SET_FILTER', ({
@@ -119,7 +135,9 @@ export default class FiltersStoreModule extends BaseStoreModule {
 
   addFilter(filter) {
     const setup = (filter) => {
-      this.state[filter.name] = new BaseFilterSchema(filter);
+      const stateFilter = new BaseFilterSchema(filter);
+      if (stateFilter.requireRouter) this.state._requireRouter = true;
+      this.state[filter.name] = stateFilter;
     };
 
     if (Array.isArray(filter)) filter.forEach((f) => setup(f));

package/src/modules/Filters/store/__tests__/FiltersStoreModule.spec.js

@@ -19,6 +19,9 @@ describe('FiltersStoreModule', () => {
     ]).getModule();
 
     const store = createStore({
+      state: {
+        router: null,
+      },
       modules: {
         filters,
       },
@@ -49,6 +52,9 @@ describe('FiltersStoreModule', () => {
     .getModule();
 
     const store = createStore({
+      state: {
+        router: null,
+      },
       modules: {
         filters,
       },
@@ -84,21 +90,25 @@ describe('FiltersStoreModule', () => {
     .addFilter({
       name: 'vi',
       value: 1,
+      requireRouter: true,
       get: (context) => () => {
         return valueGetter(context)();
       },
-      set: (context) => async (v) => {
+      set: (context) => async (v, { router }) => {
         valueSetter(context)(v);
         await querySetter(context)(router)(v);
         return context;
       },
-      restore: (context) => () => {
+      restore: (context) => ({ router }) => {
         return queryRestore(context)(router)();
       },
     })
     .getModule();
 
     const store = createStore({
+      state: {
+        router,
+      },
       modules: {
         filters,
       },
@@ -140,6 +150,9 @@ describe('FiltersStoreModule', () => {
     .getModule();
 
     const store = createStore({
+      state: {
+        router,
+      },
       modules: {
         filters,
       },

package/src/modules/TableStoreModule/composables/useTableStore.js

@@ -24,6 +24,10 @@ export const useTableStore = (namespace) => {
     return store.dispatch(`${tableNamespace}/LOAD_DATA_LIST`, payload);
   }
 
+  function onFilterEvent(payload) {
+    return store.dispatch(`${tableNamespace}/ON_FILTER_EVENT`, payload);
+  }
+
   function patchProperty(payload) {
     return store.dispatch(`${tableNamespace}/PATCH_ITEM_PROPERTY`, payload);
   }
@@ -54,6 +58,7 @@ export const useTableStore = (namespace) => {
     error,
 
     loadData,
+    onFilterEvent,
     patchProperty,
     deleteData,
     sort,

package/src/modules/TableStoreModule/store/__tests__/TableStoreModule.spec.js

@@ -1,3 +1,4 @@
+import { createRouter, createWebHistory } from 'vue-router';
 import { createStore } from 'vuex';
 import { SortSymbols } from '../../../../scripts/sortQueryAdapters';
 import FilterEvent from '../../../Filters/enums/FilterEvent.enum';
@@ -20,6 +21,11 @@ describe('TableStoreModule', () => {
 });
 
 describe('TableStoreModule integration with FiltersStoreModule', () => {
+  const router = createRouter({
+    history: createWebHistory(),
+    routes: [],
+  });
+
   it('filters restore event triggers LOAD_DATA_LIST', async () => {
     const filters = new FiltersStoreModule()
     .addFilter({
@@ -42,6 +48,7 @@ describe('TableStoreModule integration with FiltersStoreModule', () => {
     .mockImplementationOnce(mock);
 
     const store = createStore({
+      state: { router },
       modules: { table },
     });
 
@@ -79,6 +86,7 @@ describe('TableStoreModule integration with FiltersStoreModule', () => {
     .mockImplementationOnce(mock);
 
     const store = createStore({
+      state: { router },
       modules: { table },
     });
 
@@ -130,6 +138,7 @@ describe('TableStoreModule integration with FiltersStoreModule', () => {
     .mockImplementationOnce(vi.fn());
 
     const store = createStore({
+      state: { router },
       modules: { table },
     });
 
@@ -174,6 +183,7 @@ describe('TableStoreModule integration with FiltersStoreModule', () => {
     .mockImplementationOnce(vi.fn());
 
     const store = createStore({
+      state: { router },
       modules: { table },
     });
 
@@ -219,6 +229,7 @@ describe('TableStoreModule integration with FiltersStoreModule', () => {
     .mockImplementationOnce(vi.fn());
 
     const store = createStore({
+      state: { router },
       modules: { table },
     });