@webitel/ui-sdk 24.10.31 → 24.10.32

package/package.json

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

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

@@ -88,8 +88,8 @@ export default class BaseFilterSchema {
       {
         name,
         value,
-        defaultValue,
         multiple,
+        defaultValue: defaultValue || value,
       },
       rest,
     );
@@ -97,8 +97,6 @@ export default class BaseFilterSchema {
     this.setupGetters(get);
     this.setupSetters(set);
     this.setupRestores(restore);
-
-    return this;
   }
 
   setupGetters(getters) {

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

@@ -0,0 +1,118 @@
+<template>
+  <wt-select
+    :close-on-select="!filterSchema.multiple"
+    :multiple="filterSchema.multiple"
+    :options="options"
+    :track-by="trackBy"
+    :value="value"
+    :search-method="search"
+    v-bind="attrs"
+    @input="setValue"
+  />
+</template>
+
+<script setup>
+
+import { computed, reactive, ref, useAttrs, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useStore } from 'vuex';
+import isEmpty from '../../../scripts/isEmpty.js';
+import getNamespacedState from '../../../store/helpers/getNamespacedState.js';
+
+const props = defineProps({
+  namespace: {
+    type: String,
+    required: true,
+  },
+  filterQuery: {
+    type: String,
+    required: true,
+  },
+});
+
+const attrs = useAttrs();
+const store = useStore();
+const { t } = useI18n();
+
+const filterSchema = computed(() => getNamespacedState(store.state, props.namespace)[props.filterQuery]);
+
+const trackBy = computed(() => {
+  if (filterSchema.value.storedProp !== undefined) {
+    return filterSchema.value.storedProp;
+  }
+
+  if (filterSchema.value.search) {
+    return 'id';
+  }
+
+  if (filterSchema.value.options) {
+    return 'value';
+  }
+
+  return 'id';
+});
+
+const rawValue = computed(() => store.getters[`${props.namespace}/FILTER_${props.filterQuery}`]);
+
+const cachedSearchOpts = reactive({});
+
+const search = filterSchema.value.search && (async (selectParams) => {
+  const params = {
+    ...selectParams,
+  };
+
+  if (trackBy.value === 'id') {
+    params.ids = Array.isArray(rawValue.value) ? rawValue.value : [rawValue.value];
+  }
+
+  const { items, ...rest } = await filterSchema.value.search(params);
+
+  items.forEach((item) => {
+    cachedSearchOpts[item.id] = item;
+  });
+
+  return {
+    items,
+    ...rest,
+  };
+});
+
+const options = computed(() => {
+  const options = filterSchema.value.options;
+
+  return options;
+});
+
+const value = computed(() => {
+  if (options.value) {
+    if (filterSchema.value.multiple) {
+      return options.value.filter((option) => rawValue.value.includes(option[trackBy.value]));
+    }
+
+    return options.value.find((option) => option[trackBy.value] === rawValue.value);
+  }
+
+  if (filterSchema.value.search) {
+    if (filterSchema.value.multiple) {
+      return rawValue.value.map((value) => cachedSearchOpts[value]);
+    }
+
+    return cachedSearchOpts[rawValue.value];
+  }
+
+  return rawValue.value;
+});
+
+const setValue = (value) => {
+  const payload = {
+    value: isEmpty(value) ? value : value[trackBy.value],
+    name: props.filterQuery,
+  };
+
+  return store.dispatch(`${props.namespace}/SET_FILTER`, payload);
+};
+</script>
+
+<style scoped>
+
+</style>

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

@@ -8,14 +8,12 @@ import FilterEvent from '../enums/FilterEvent.enum.js';
 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(
+        console.warn(
           '"rootState.router" is needed for filters to work properly.' +
             ' Please, provide to root state, or setup it in filters module as getter "ROUTER"',
         );
@@ -36,10 +34,6 @@ export default class FiltersStoreModule extends BaseStoreModule {
 
       if (!filter) throw new Error(`Unknown filter: ${filterName}`);
 
-      if (state._requireRouter && !getters.ROUTER) {
-        throw new Error(`Router is required for filter: ${filterName}`);
-      }
-
       return filter.get({
         router: getters.ROUTER,
       });
@@ -137,13 +131,15 @@ export default class FiltersStoreModule extends BaseStoreModule {
 
       // clean up query params
       const router = context.getters.ROUTER;
-      const query = Object.entries(router.currentRoute.query)
-      .reduce((filteredQuery, [qKey, qValue]) => {
-        if (context.state[qKey]) {
-          return filteredQuery;
-        }
-        return { ...filteredQuery, [qKey]: qValue };
-      }, {});
+      const query = Object.entries(router.currentRoute.query).reduce(
+        (filteredQuery, [qKey, qValue]) => {
+          if (context.state[qKey]) {
+            return filteredQuery;
+          }
+          return { ...filteredQuery, [qKey]: qValue };
+        },
+        {},
+      );
 
       await router.push({
         ...router.currentRoute,
@@ -167,26 +163,19 @@ export default class FiltersStoreModule extends BaseStoreModule {
     },
 
     EMIT: async (context, { event, payload }) => {
-      return new Promise(async (resolve, reject) => {
-        const wildcardListeners = context.state._emitter.all.get('*');
-        const eventListeners = context.state._emitter.all.get(event);
+      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`);
-          resolve();
-        }
+      if (!listeners) {
+        console.info(`No listeners for ${event} event`);
+        return;
+      }
 
-        try {
-          for (const listener of listeners) {
-            await listener({ event, payload });
-          }
-          resolve();
-        } catch (err) {
-          reject(err);
-        }
-      });
+      for (const listener of listeners) {
+        await listener({ event, payload });
+      }
     },
   };
 
@@ -198,13 +187,13 @@ export default class FiltersStoreModule extends BaseStoreModule {
 
   addFilter(filter) {
     const setup = (filter) => {
-      const stateFilter = new BaseFilterSchema(filter);
-      if (stateFilter.requireRouter) this.state._requireRouter = true;
-      this.state[filter.name] = stateFilter;
+      this.state[filter.name] = new BaseFilterSchema(filter);
+
       this.getters[`FILTER_${filter.name}`] = (state, getters) => {
         // if is used as watcher for getter to recompute,
         // because GET_FILTER is function ==> it's not reactive
-        if (state[filter.name].value) {}
+        if (state[filter.name].value) {
+        }
         return getters.GET_FILTER(filter.name);
       };
     };