@webitel/ui-sdk 24.10.2 → 24.10.4

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

@@ -1,14 +1,6 @@
-import {
-  localStorageGetter,
-  queryGetter,
-  valueGetter,
-} from '../scripts/getters/index.js';
+import { localStorageGetter, queryGetter, valueGetter } from '../scripts/getters/index.js';
 import { localStorageRestore, queryRestore } from '../scripts/restores/index.js';
-import {
-  localStorageSetter,
-  querySetter,
-  valueSetter,
-} from '../scripts/setters/index.js';
+import { localStorageSetter, querySetter, valueSetter } from '../scripts/setters/index.js';
 
 const convertGetterArray = (context) => (getters) => {
   const availableGetters = ['value', 'query', 'localStorage'];
@@ -80,21 +72,27 @@ const convertRestoreArray = (context) => (restores) => {
 
 export default class BaseFilterSchema {
   constructor({
-                name,
-                value = '',
-                defaultValue = '',
-                get = ['value', 'query'],
-                set = ['value', 'query'],
-                restore = ['query'],
-                ...rest
-              } = {}) {
+    name,
+    value = '',
+    defaultValue = '',
+    get = ['value', 'query'],
+    set = ['value', 'query'],
+    restore = ['query'],
+    multiple = false,
+    ...rest
+  } = {}) {
     if (!name) throw new Error('Filter name is required');
 
-    Object.assign(this, {
-      name,
-      value,
-      defaultValue,
-    }, rest);
+    Object.assign(
+      this,
+      {
+        name,
+        value,
+        defaultValue,
+        multiple,
+      },
+      rest,
+    );
 
     this.setupGetters(get);
     this.setupSetters(set);

package/src/modules/Filters/components/filter-pagination.vue

@@ -49,9 +49,13 @@ function setSize(value) {
   return setFilter({ value, name: sizeFilterName });
 }
 
-watch(size, () => {
-  localSize.value = size.value;
-}, { immediate: true });
+watch(
+  size,
+  () => {
+    localSize.value = size.value;
+  },
+  { immediate: true },
+);
 </script>
 
 <style lang="scss" scoped>

package/src/modules/Filters/components/filter-search.vue

@@ -49,21 +49,27 @@ function setValue(payload) {
 
 const filterName = ref(props.multisearch ? props.searchModeOpts[0].value : props.name);
 
-const currentSearchMode = computed(
-  () => props.searchModeOpts.find(({ value }) => value === filterName.value),
+const currentSearchMode = computed(() =>
+  props.searchModeOpts.find(({ value }) => value === filterName.value),
 );
 
 const filterValue = computed(() => getValue(filterName.value));
 
 const localValue = ref(filterValue.value);
 
-const v$ = props.multisearch && useVuelidate(computed(() => {
-  return {
-    localValue: {
-      ...currentSearchMode.value.v || {},
-    },
-  };
-}), { localValue }, { $autoDirty: true });
+const v$ =
+  props.multisearch &&
+  useVuelidate(
+    computed(() => {
+      return {
+        localValue: {
+          ...(currentSearchMode.value.v || {}),
+        },
+      };
+    }),
+    { localValue },
+    { $autoDirty: true },
+  );
 
 v$.value.$touch();
 
@@ -86,9 +92,12 @@ subscribe({
   callback: restoreSearchMode,
 });
 
-watch(() => filterValue.value, () => {
-  localValue.value = filterValue.value;
-});
+watch(
+  () => filterValue.value,
+  () => {
+    localValue.value = filterValue.value;
+  },
+);
 </script>
 
 <style lang="scss" scoped>

package/src/modules/Filters/components/filter-table-fields.vue

@@ -24,9 +24,7 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits([
-  'change',
-]);
+const emit = defineEmits(['change']);
 
 const filterQuery = 'fields';
 

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

@@ -2,8 +2,4 @@ import localStorageGetter from './localStorageGetter.js';
 import queryGetter from './queryGetter.js';
 import valueGetter from './valueGetter.js';
 
-export {
-  localStorageGetter,
-  queryGetter,
-  valueGetter,
-};
+export { localStorageGetter, queryGetter, valueGetter };

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

@@ -2,10 +2,15 @@
 const queryGetter = (context) => (router) => () => {
   if (!router) throw new Error('Router is required for queryGetter!');
 
-  const query = router.currentRoute.value?.query || router.currentRoute.query ||
-    {};
+  const query = router.currentRoute.value?.query || router.currentRoute.query || {};
 
-  return query[context.name];
+  const value = query[context.name];
+
+  if (value && context?.multiple && !Array.isArray(value)) {
+    return [value];
+  }
+
+  return value;
 };
 
 export default queryGetter;

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

@@ -1,7 +1,6 @@
 // context === filter "this"
 const valueGetter = (context) => () => {
-  const { value, storedProp, multiple } = context;
-  if (multiple) return value.map((item) => item[storedProp]); // if arr, map
+  const { value, storedProp } = context;
   if (storedProp) return value[storedProp]; // if object and has specific prop, return this prop
   return value; // else return val
 };

package/src/modules/Filters/scripts/restores/index.js

@@ -1,7 +1,4 @@
 import localStorageRestore from './localStorageRestore.js';
 import queryRestore from './queryRestore.js';
 
-export {
-  localStorageRestore,
-  queryRestore,
-};
+export { localStorageRestore, queryRestore };

package/src/modules/Filters/scripts/setters/index.js

@@ -2,8 +2,4 @@ import localStorageSetter from './localStorageSetter.js';
 import querySetter from './querySetter.js';
 import valueSetter from './valueSetter.js';
 
-export {
-  localStorageSetter,
-  querySetter,
-  valueSetter,
-};
+export { localStorageSetter, querySetter, valueSetter };

package/src/modules/Filters/scripts/setters/querySetter.js

@@ -1,7 +1,6 @@
 import changeRouteQuery from '../utils/changeRouteQuery.js';
 
-const isObject = (value) => typeof value === 'object' &&
-  !Array.isArray(value) && value !== null;
+const isObject = (value) => typeof value === 'object' && !Array.isArray(value) && value !== null;
 
 const handlePrimitive = ({ value }) => value;
 
@@ -17,25 +16,28 @@ const handleArray = ({ value, storedProp }) => {
   }
 };
 
-const querySetter = (context) => (router) => async (rawValue = context.value) => {
-  const { name: filterQuery, storedProp } = context;
-
-  let value = '';
-
-  if (Array.isArray(rawValue)) {
-    value = handleArray({ value: rawValue, storedProp });
-  } else if (isObject(rawValue)) {
-    value = handleObject({ value: rawValue, storedProp });
-  } else {
-    value = handlePrimitive({ value: rawValue });
-  }
-
-  await changeRouteQuery(router)({
-    filterQuery,
-    value,
-  });
-
-  return context;
-};
+const querySetter =
+  (context) =>
+  (router) =>
+  async (rawValue = context.value) => {
+    const { name: filterQuery, storedProp } = context;
+
+    let value = '';
+
+    if (Array.isArray(rawValue)) {
+      value = handleArray({ value: rawValue, storedProp });
+    } else if (isObject(rawValue)) {
+      value = handleObject({ value: rawValue, storedProp });
+    } else {
+      value = handlePrimitive({ value: rawValue });
+    }
+
+    await changeRouteQuery(router)({
+      filterQuery,
+      value,
+    });
+
+    return context;
+  };
 
 export default querySetter;

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

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

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

@@ -1,7 +1,6 @@
 import mitt from 'mitt';
 import isEmpty from '../../../scripts/isEmpty.js';
-import BaseStoreModule
-  from '../../../store/BaseStoreModules/BaseStoreModule.js';
+import BaseStoreModule from '../../../store/BaseStoreModules/BaseStoreModule.js';
 import BaseFilterSchema from '../classes/BaseFilterSchema.js';
 import FilterEvent from '../enums/FilterEvent.enum.js';
 
@@ -15,17 +14,19 @@ export default class FiltersStoreModule extends BaseStoreModule {
     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"');
+        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) => {
-      return Object.values(state)
-      .reduce((names, prop) => prop.value || prop.name
-        ? [...names, prop.name]
-        : names, []);
+      return Object.values(state).reduce(
+        (names, prop) => (prop.value || prop.name ? [...names, prop.name] : names),
+        [],
+      );
     },
 
     // get value of specific filter
@@ -45,23 +46,27 @@ export default class FiltersStoreModule extends BaseStoreModule {
 
     // get all filters values
     GET_FILTERS: (state, getters) => () => {
-      return getters._STATE_FILTER_NAMES
-      .reduce((values, filterName) => {
+      return getters._STATE_FILTER_NAMES.reduce((values, filterName) => {
         const filterValue = getters.GET_FILTER(filterName);
-        return isEmpty(filterValue) ? values : {
-          ...values,
-          [filterName]: filterValue,
-        };
+        return isEmpty(filterValue)
+          ? values
+          : {
+              ...values,
+              [filterName]: filterValue,
+            };
       }, {});
     },
   };
 
   actions = {
-    SET_FILTER: async (context, {
-      name,
-      value,
-      silent = false, // if true, don't call ON_FILTER_SET event
-    }) => {
+    SET_FILTER: async (
+      context,
+      {
+        name,
+        value,
+        silent = false, // if true, don't call ON_FILTER_SET event
+      },
+    ) => {
       const filter = context.state[name];
 
       await filter.set(value, {
@@ -74,13 +79,14 @@ export default class FiltersStoreModule extends BaseStoreModule {
         value: context.getters.GET_FILTER(name),
       });
 
-      if (!silent) await context.dispatch('EMIT', {
-        event: FilterEvent.FILTER_SET,
-        payload: {
-          name,
-          value: context.getters.GET_FILTER(name),
-        },
-      });
+      if (!silent)
+        await context.dispatch('EMIT', {
+          event: FilterEvent.FILTER_SET,
+          payload: {
+            name,
+            value: context.getters.GET_FILTER(name),
+          },
+        });
     },
 
     RESTORE_FILTER: async (context, { name }) => {
@@ -90,18 +96,20 @@ export default class FiltersStoreModule extends BaseStoreModule {
       });
 
       if (value) {
-        await context.dispatch('SET_FILTER', ({
+        await context.dispatch('SET_FILTER', {
           name,
           value,
           silent: true,
-        }));
+        });
       }
     },
 
     RESTORE_FILTERS: async (context) => {
-      await Promise.allSettled(context.getters._STATE_FILTER_NAMES.map((name) => {
-        return context.dispatch('RESTORE_FILTER', { name });
-      }));
+      await Promise.allSettled(
+        context.getters._STATE_FILTER_NAMES.map((name) => {
+          return context.dispatch('RESTORE_FILTER', { name });
+        }),
+      );
 
       return context.dispatch('EMIT', {
         event: FilterEvent.RESTORED,
@@ -109,16 +117,17 @@ export default class FiltersStoreModule extends BaseStoreModule {
       });
     },
 
-    RESET_FILTERS: (context) => Promise.allSettled(
-      context.getters._FILTER_NAMES.map((name) => {
-        const filter = context.state[name];
+    RESET_FILTERS: (context) =>
+      Promise.allSettled(
+        context.getters._FILTER_NAMES.map((name) => {
+          const filter = context.state[name];
 
-        return context.dispatch('SET_FILTER', {
-          filter,
-          value: filter.defaultValue,
-        });
-      }),
-    ),
+          return context.dispatch('SET_FILTER', {
+            filter,
+            value: filter.defaultValue,
+          });
+        }),
+      ),
 
     SUBSCRIBE: (context, { event, callback }) => {
       const subscribe = () => context.state._emitter.on(event, callback);
@@ -135,10 +144,7 @@ export default class FiltersStoreModule extends BaseStoreModule {
         const wildcardListeners = context.state._emitter.all.get('*');
         const eventListeners = context.state._emitter.all.get(event);
 
-        const listeners = [
-          ...(wildcardListeners || []),
-          ...(eventListeners || []),
-        ];
+        const listeners = [...(wildcardListeners || []), ...(eventListeners || [])];
 
         if (!listeners) {
           console.info(`No listeners for ${event} event`);
@@ -175,4 +181,4 @@ export default class FiltersStoreModule extends BaseStoreModule {
 
     return this;
   }
-};
+}

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

@@ -7,16 +7,18 @@ import FiltersStoreModule from '../FiltersStoreModule.js';
 
 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 filters = new FiltersStoreModule()
+      .addFilter([
+        {
+          name: 'vi',
+          value: 1,
+          defaultValue: 1,
+          get: ['value'],
+          set: ['value'],
+          restore: [],
+        },
+      ])
+      .getModule();
 
     const store = createStore({
       state: {
@@ -41,15 +43,15 @@ describe('FiltersStoreModule', () => {
     const localStorageKey = 'vivivi';
 
     const filters = new FiltersStoreModule()
-    .addFilter({
-      name: 'vi',
-      value: 1,
-      localStorageKey,
-      get: ['value'],
-      set: ['value', 'localStorage'],
-      restore: ['localStorage'],
-    })
-    .getModule();
+      .addFilter({
+        name: 'vi',
+        value: 1,
+        localStorageKey,
+        get: ['value'],
+        set: ['value', 'localStorage'],
+        restore: ['localStorage'],
+      })
+      .getModule();
 
     const store = createStore({
       state: {
@@ -87,23 +89,27 @@ describe('FiltersStoreModule', () => {
     await router.push({ name: 'home' });
 
     const filters = new FiltersStoreModule()
-    .addFilter({
-      name: 'vi',
-      value: 1,
-      requireRouter: true,
-      get: (context) => () => {
-        return valueGetter(context)();
-      },
-      set: (context) => async (v, { router }) => {
-        valueSetter(context)(v);
-        await querySetter(context)(router)(v);
-        return context;
-      },
-      restore: (context) => ({ router }) => {
-        return queryRestore(context)(router)();
-      },
-    })
-    .getModule();
+      .addFilter({
+        name: 'vi',
+        value: 1,
+        requireRouter: true,
+        get: (context) => () => {
+          return valueGetter(context)();
+        },
+        set:
+          (context) =>
+          async (v, { router }) => {
+            valueSetter(context)(v);
+            await querySetter(context)(router)(v);
+            return context;
+          },
+        restore:
+          (context) =>
+          ({ router }) => {
+            return queryRestore(context)(router)();
+          },
+      })
+      .getModule();
 
     const store = createStore({
       state: {
@@ -139,15 +145,15 @@ describe('FiltersStoreModule', () => {
     await router.push({ name: 'home' });
 
     const filters = new FiltersStoreModule()
-    .addFilter({
-      name: 'vi',
-      value: 1,
-      get: ['value'],
-      set: ['value', 'query'],
-      restore: ['query'],
-      router,
-    })
-    .getModule();
+      .addFilter({
+        name: 'vi',
+        value: 1,
+        get: ['value'],
+        set: ['value', 'query'],
+        restore: ['query'],
+        router,
+      })
+      .getModule();
 
     const store = createStore({
       state: {