@webitel/ui-sdk 24.4.39 → 24.6.1

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

@@ -1,181 +1,130 @@
-import deepEqual from 'deep-equal';
-import debounce from '../../../scripts/debounce';
+import mitt from 'mitt';
 import isEmpty from '../../../scripts/isEmpty';
 import BaseStoreModule from '../../../store/BaseStoreModules/BaseStoreModule';
-
-const SET_FILTER_SOURCE = Object.freeze({
-  RESTORE: 'restore', // when filter is restored at session start
-  DEFAULT: 'default',
-});
+import BaseFilterSchema from '../classes/BaseFilterSchema';
+import FilterEvent from '../enums/FilterEvent.enum';
 
 export default class FiltersStoreModule extends BaseStoreModule {
+  state = {
+    _emitter: mitt(),
+  };
+
   getters = {
-    ROUTER: () => console.error('setup ROUTER getter for filters store'),
-    TABLE_NAMESPACE: () => console.error('setup TABLE_NAMESPACE getter for filters store'),
+    _STATE_FILTER_NAMES: (state) => Object.keys(state)
+    .filter((key) => !key.startsWith('_')),
 
     // get value of specific filter
-    GET_FILTER: (state) => (filter) => {
-      if (!state[filter]) return null;
-      const { value, storedProp, multiple } = state[filter];
-      if (multiple) return value.map((item) => item[storedProp]); // if arr, map
-      if (storedProp) return value[storedProp]; // if object and has specific prop, return this prop
-      return value; // else return val
+    GET_FILTER: (state) => (filterName) => {
+      const filter = state[filterName];
+      if (!filter) throw new Error(`Unknown filter: ${filterName}`);
+
+      return filter.get();
     },
 
     // get all filters values
-    GET_FILTERS: (state, getters) => Object.keys(state)
-    .reduce((filters, filterKey) => {
-      const filterValue = getters.GET_FILTER(filterKey);
+    GET_FILTERS: (state, getters) => getters._STATE_FILTER_NAMES
+    .reduce((values, filterName) => {
+      const filterValue = getters.GET_FILTER(filterName);
       return isEmpty(filterValue) ? filters : {
-        ...filters,
-        [filterKey]: filterValue,
+        ...values,
+        [filterName]: filterValue,
       };
     }, {}),
-
-    // get value of filter from query string by query key
-    GET_VALUE_FROM_QUERY: (state, getters) => ({ filterQuery }) => (
-      getters.ROUTER.currentRoute.value.query[filterQuery]
-    ),
   };
 
   actions = {
     SET_FILTER: async (context, {
-      filter,
+      name,
       value,
-      source = SET_FILTER_SOURCE.DEFAULT,
       silent = false, // if true, don't call ON_FILTER_SET event
     }) => {
-      const { multiple, defaultValue } = context.state[filter];
+      const filter = context.state[name];
 
-      let newValue = value;
+      await filter.set(value);
 
-      if (value) {
-        if (multiple && !Array.isArray(value)) newValue = [value];
-      } else if (value === null || value === undefined) {
-        newValue = defaultValue;
-      }
-
-      await context.dispatch('SET_VALUE_TO_QUERY', {
-        filterQuery: filter,
-        value,
-        storedProp: context.state[filter].storedProp,
+      if (!silent) await context.dispatch('EMIT', {
+        event: FilterEvent.FILTER_SET,
+        payload: {
+          name,
+          value: context.getters.GET_FILTER(name),
+        },
       });
-      context.commit('SET_FILTER', { filter, value: newValue });
-
-      if (source !== SET_FILTER_SOURCE.RESTORE && filter !== 'page') {
-        await context.dispatch('SET_FILTER', {
-          filter: 'page',
-          value: 1,
-          silent: true,
-        });
-      }
-
-      if (!silent) await context.dispatch('ON_FILTER_SET', { filter, value });
     },
-    SET_VALUE_TO_QUERY: async (
-      context,
-      { filterQuery, value, storedProp = 'id' },
-    ) => {
-      let newValue = '';
-      if (Array.isArray(value)) {
-        if (value.length && typeof value[0] !== 'object') {
-          newValue = value;
-        } else {
-          newValue = value.map((item) => item[storedProp]);
-        }
-      } else if (typeof value === 'object' && value !== null) {
-        newValue = value[storedProp];
-      } else {
-        newValue = value;
-      }
 
-      return context.dispatch('CHANGE_ROUTE_QUERY', ({
-        value: newValue,
-        filterQuery,
-      }));
-    },
+    RESTORE_FILTER: async (context, { name }) => {
+      const filter = context.state[name];
+      const value = filter.restore();
 
-    CHANGE_ROUTE_QUERY: (context, { value, filterQuery }) => {
-      if (deepEqual(context.getters.GET_VALUE_FROM_QUERY({ filterQuery }), value)) return;
-      const query = { ...context.getters.ROUTER.currentRoute.value.query };
-      query[filterQuery] = value;
-      // eslint-disable-next-line consistent-return
-      return context.getters.ROUTER.replace({
-        name: context.getters.ROUTER.currentRoute.value.name,
-        query,
-      });
-    },
-
-    RESTORE_FILTER: async (context, { filter }) => {
-      const query = context.getters.GET_VALUE_FROM_QUERY({ filterQuery: filter });
-      // note: restore fn may still return value even if there's no query value
-      // from localStorage, for instance
-      const value = context.state[filter].restore
-        ? context.state[filter].restore({ query, defaultValue: context.state[filter].defaultValue })
-        : query;
       if (value) {
-        if (filter
-          === 'sort') await context.dispatch('RESTORE_SORT', { value });
-        else if (filter
-          === 'fields') await context.dispatch('RESTORE_FIELDS', { value });
         await context.dispatch('SET_FILTER', ({
-          filter,
+          name,
           value,
-          source: SET_FILTER_SOURCE.RESTORE,
+          silent: true,
         }));
-        return true;
       }
-      return false;
     },
 
     RESTORE_FILTERS: async (context) => {
-      const restores = [];
-      for (const filter of Object.keys(context.state)) {
-        // collect restores in order to check if there were actually any restores
-        // empty restore returns "false"
-        const result = await context.dispatch('RESTORE_FILTER', { filter });
-        restores.push(result);
-      }
-
-      // if no filters to restore, call LOAD_LIST manually
-      if (restores.every((restore) => restore === false)) {
-        context.dispatch('LOAD_DATA_LIST');
-      }
-    },
+      await Promise.allSettled(context.getters._STATE_FILTER_NAMES.map((name) => {
+        return context.dispatch('RESTORE_FILTER', { name });
+      }));
 
-    RESET_FILTERS: (context) => Promise.allSettled(Object.keys(context.state)
-    .map((filter) => {
-      return context.dispatch('SET_FILTER', {
-        filter,
-        value: context.state[filter].defaultValue,
+      return context.dispatch('EMIT', {
+        event: FilterEvent.RESTORED,
+        payload: context.getters.GET_FILTERS,
       });
-    })),
+    },
 
-    ON_FILTER_SET: (
-      context,
-      { filter, value },
-    ) => context.dispatch('LOAD_DATA_LIST'),
+    RESET_FILTERS: (context) => Promise.allSettled(
+      context.getters._FILTER_NAMES.map((name) => {
+        const filter = context.state[name];
 
-    LOAD_DATA_LIST: (context) => context.dispatch(
-      `${context.getters.TABLE_NAMESPACE}/LOAD_DATA_LIST`,
-      { filters: context.getters.GET_FILTERS },
-      { root: true },
-    ),
-    RESTORE_SORT: (context, { value }) => context.dispatch(
-      `${context.getters.TABLE_NAMESPACE}/RESTORE_SORT_FROM_FILTER`,
-      { value },
-      { root: true },
-    ),
-    RESTORE_FIELDS: (context, { value }) => context.dispatch(
-      `${context.getters.TABLE_NAMESPACE}/RESTORE_FIELDS_FROM_FILTER`,
-      { value },
-      { root: true },
+        return context.dispatch('SET_FILTER', {
+          filter,
+          value: filter.defaultValue,
+        });
+      }),
     ),
-  };
 
-  mutations = {
-    SET_FILTER: (state, { filter, value }) => {
-      state[filter].value = value;
+    SUBSCRIBE: (context, { event, callback }) => {
+      const subscribe = () => context.state._emitter.on(event, callback);
+      if (Array.isArray(event)) event.forEach((e) => subscribe(e, callback));
+      else subscribe(event, callback);
+    },
+
+    FLUSH_SUBSCRIBERS: (context) => {
+      return context.state._emitter.off('*');
+    },
+
+    EMIT: async (context, { event, payload }) => {
+      return new Promise(async (resolve, reject) => {
+        const listeners = context.state._emitter.all.get(event);
+
+        if (!listeners) {
+          console.info(`No listeners for ${event} event`);
+          resolve();
+        }
+
+        try {
+          for (const listener of listeners) {
+            await listener({ event, payload });
+          }
+          resolve();
+        } catch (err) {
+          reject(err);
+        }
+      });
     },
   };
-}
+
+  addFilter(filter) {
+    const setup = (filter) => {
+      this.state[filter.name] = new BaseFilterSchema(filter);
+    };
+
+    if (Array.isArray(filter)) filter.forEach((f) => setup(f));
+    else setup(filter);
+
+    return this;
+  }
+};

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

@@ -0,0 +1,157 @@
+import { createRouter, createWebHistory } from 'vue-router';
+import { createStore } from 'vuex';
+import { valueGetter } from '../../scripts/getters';
+import { queryRestore } from '../../scripts/restores';
+import { querySetter, valueSetter } from '../../scripts/setters';
+import FiltersStoreModule from '../FiltersStoreModule';
+
+describe('FiltersStoreModule', () => {
+  it('get/sets primitive type filter', async () => {
+    const filters = new FiltersStoreModule().addFilter([
+      {
+        name: 'vi',
+        value: 1,
+        defaultValue: 1,
+        get: ['value'],
+        set: ['value'],
+        restore: [],
+      },
+    ]).getModule();
+
+    const store = createStore({
+      modules: {
+        filters,
+      },
+    });
+
+    const newValue = 2;
+
+    await store.dispatch('filters/SET_FILTER', {
+      name: 'vi',
+      value: newValue,
+    });
+
+    expect(store.getters['filters/GET_FILTER']('vi')).toBe(newValue);
+  });
+
+  it('sets/restores primitive type filter', async () => {
+    const localStorageKey = 'vivivi';
+
+    const filters = new FiltersStoreModule()
+    .addFilter({
+      name: 'vi',
+      value: 1,
+      localStorageKey,
+      get: ['value'],
+      set: ['value', 'localStorage'],
+      restore: ['localStorage'],
+    })
+    .getModule();
+
+    const store = createStore({
+      modules: {
+        filters,
+      },
+    });
+
+    await store.dispatch('filters/SET_FILTER', {
+      name: 'vi',
+      value: '2',
+    });
+
+    expect(localStorage.getItem(localStorageKey)).toBe('2');
+
+    await store.dispatch('filters/RESTORE_FILTER', { name: 'vi' });
+
+    expect(store.getters['filters/GET_FILTER']('vi')).toBe('2');
+  });
+
+  it('sets/restores primitive value from query using getters/setters as functions', async () => {
+    const router = createRouter({
+      history: createWebHistory(),
+      routes: [
+        {
+          name: 'home',
+          path: '/home',
+          component: {},
+        },
+      ],
+    });
+
+    await router.push({ name: 'home' });
+
+    const filters = new FiltersStoreModule()
+    .addFilter({
+      name: 'vi',
+      value: 1,
+      get: (context) => () => {
+        return valueGetter(context)();
+      },
+      set: (context) => async (v) => {
+        valueSetter(context)(v);
+        await querySetter(context)(router)(v);
+        return context;
+      },
+      restore: (context) => () => {
+        return queryRestore(context)(router)();
+      },
+    })
+    .getModule();
+
+    const store = createStore({
+      modules: {
+        filters,
+      },
+    });
+
+    await store.dispatch('filters/SET_FILTER', {
+      name: 'vi',
+      value: '2',
+    });
+
+    await store.dispatch('filters/RESTORE_FILTER', { name: 'vi' });
+
+    expect(store.getters['filters/GET_FILTER']('vi')).toBe('2');
+  });
+
+  it('sets/restores primitive value from query using getters/setters as strings', async () => {
+    const router = createRouter({
+      history: createWebHistory(),
+      routes: [
+        {
+          name: 'home',
+          path: '/home',
+          component: {},
+        },
+      ],
+    });
+
+    await router.push({ name: 'home' });
+
+    const filters = new FiltersStoreModule()
+    .addFilter({
+      name: 'vi',
+      value: 1,
+      get: ['value'],
+      set: ['value', 'query'],
+      restore: ['query'],
+      router,
+    })
+    .getModule();
+
+    const store = createStore({
+      modules: {
+        filters,
+      },
+    });
+
+    await store.dispatch('filters/SET_FILTER', {
+      name: 'vi',
+      value: '2',
+    });
+
+    await store.dispatch('filters/RESTORE_FILTER', { name: 'vi' });
+
+    expect(store.getters['filters/GET_FILTER']('vi')).toBe('2');
+  });
+});

package/src/modules/Notifications/store/__tests__/NotificationsStoreModule.actions.spec.js

@@ -69,7 +69,7 @@ describe('features/notifications store: actions', () => {
   it('_SUBSCRIBE_TAB_CLOSING action commits SET_CURRENT_TAB_ID mutation', async () => {
     await notificationsModule.actions._SUBSCRIBE_TAB_CLOSING(context);
     window.dispatchEvent(new Event('storage'));
-    expect(context.commit).toHaveBeenCalledWith('SET_CURRENT_TAB_ID', null);
+    expect(context.commit).toHaveBeenCalledWith('SET_CURRENT_TAB_ID', 'null');
   });
 
   it('PLAY_SOUND action commits SET_CURRENTLY_PLAYING mutation with sound', async () => {

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

@@ -10,6 +10,8 @@ export const useTableStore = (namespace) => {
 
   const dataList = computed(() => getNamespacedState(store.state, tableNamespace).dataList);
 
+  const selected = computed(() => getNamespacedState(store.state, tableNamespace).selected);
+
   const isLoading = computed(() => getNamespacedState(store.state, tableNamespace).isLoading);
 
   const headers = computed(() => getNamespacedState(store.state, tableNamespace).headers);
@@ -17,33 +19,35 @@ export const useTableStore = (namespace) => {
   const isNext = computed(() => getNamespacedState(store.state, tableNamespace).isNextPage);
 
   const error = computed(() => getNamespacedState(store.state, tableNamespace).errors);
-  async function loadData(payload) {
+
+  function loadData(payload) {
     return store.dispatch(`${tableNamespace}/LOAD_DATA_LIST`, payload);
   }
 
-  async function patchProperty(payload) {
+  function patchProperty(payload) {
     return store.dispatch(`${tableNamespace}/PATCH_ITEM_PROPERTY`, payload);
   }
 
-  async function deleteData(payload) {
+  function deleteData(payload) {
     return store.dispatch(`${tableNamespace}/DELETE`, payload);
   }
 
-  async function sort(...params) {
+  function sort([header, nextSortOrder]) {
     return store.dispatch(`${tableNamespace}/SORT`, {
-      header: params[0],
-      nextSortOrder: params[1],
+      header,
+      nextSortOrder,
     });
   }
 
-  async function setHeaders(payload) {
-    return store.dispatch(`${tableNamespace}/SET_HEADERS`, payload);
+  function setSelected(payload) {
+    return store.dispatch(`${tableNamespace}/SET_SELECTED`, payload);
   }
 
   return {
     namespace: tableNamespace,
 
     dataList,
+    selected,
     isLoading,
     headers,
     isNext,
@@ -53,6 +57,6 @@ export const useTableStore = (namespace) => {
     patchProperty,
     deleteData,
     sort,
-    setHeaders,
+    setSelected,
   };
 };