@webitel/ui-sdk 24.10.31 → 24.10.33

package/package.json

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

package/src/components/wt-intersection-observer/__tests__/WtIntersectionObserver.spec.js

@@ -0,0 +1,12 @@
+import { shallowMount } from '@vue/test-utils';
+import WtIntersectionObserver from '../wt-intersection-observer.vue';
+
+describe('WtIntersectionObserver', () => {
+  const next = () => true;
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtIntersectionObserver, {
+      props: { next }
+    });
+    expect(wrapper.exists()).toBe(true);
+  });
+});

package/src/components/wt-intersection-observer/wt-intersection-observer.vue

@@ -0,0 +1,56 @@
+<template>
+  <wt-loader
+    v-if="loading"
+    size="sm"
+  />
+  <div ref="intersectionTarget" />
+</template>
+
+<script setup>
+import { useIntersectionObserver } from '@vueuse/core';
+import { onMounted, onUnmounted, ref } from 'vue';
+
+const props = defineProps({
+  next: {
+    type: Function,
+    required: true,
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits([
+  'next',
+]);
+
+const intersectionTarget = ref(null);
+
+let stopObs;
+
+onMounted(() => {
+  /**
+   *
+   * Note, observer triggers at init, so it should be used also as init function
+   * however, current filters module version is initializing list by itself, so we need to refactor filters ASAP
+   */
+  const { stop } = useIntersectionObserver(intersectionTarget.value, ([{ isIntersecting }]) => {
+    if (isIntersecting && props.next) {
+      emit('next');
+    }
+  });
+
+  stopObs = stop;
+});
+
+onUnmounted(() => {
+  stopObs();
+});
+</script>
+
+<style scoped lang="scss">
+.wt-loader {
+  margin: var(--spacing-lg) auto;
+}
+</style>

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

@@ -1,6 +1,17 @@
-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 {
+  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';
 
 const convertGetterArray = (context) => (getters) => {
   const availableGetters = ['value', 'query', 'localStorage'];
@@ -88,8 +99,8 @@ export default class BaseFilterSchema {
       {
         name,
         value,
-        defaultValue,
         multiple,
+        defaultValue: defaultValue || value,
       },
       rest,
     );
@@ -97,8 +108,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"
+    :search-method="search"
+    :track-by="trackBy"
+    :value="value"
+    v-bind="attrs"
+    @input="setValue"
+  />
+</template>
+
+<script setup>
+
+import { computed, reactive, useAttrs } 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,22 @@ 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 +190,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);
       };
     };