@webitel/ui-sdk 3.2.21 → 3.2.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "3.2.21",
+  "version": "3.2.23",
   "private": false,
   "scripts": {
     "serve-lib": "vue-cli-service serve",

package/src/components/organisms/wt-pagination/wt-pagination.vue

@@ -64,6 +64,7 @@ export default {
       default: 1000,
     },
   },
+  emits: ['change', 'input', 'prev', 'next'],
   model: {
     prop: 'size',
     event: 'change',

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

@@ -0,0 +1,61 @@
+<template>
+  <wt-pagination
+    :next="isNext"
+    :prev="page > 1"
+    :size="localSize"
+    debounce
+    @input="localSize = $event"
+    @change="setSize(localSize)"
+    @next="setPage(+page + 1)"
+    @prev="setPage(page - 1)"
+  ></wt-pagination>
+</template>
+
+<script setup>
+import { computed, ref, watch } from 'vue';
+import { useStore } from 'vuex';
+import getNamespacedState from '../../../store/helpers/getNamespacedState';
+
+const props = defineProps({
+  namespace: {
+    type: String,
+    required: true,
+  },
+  isNext: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const pageFilterName = 'page';
+const sizeFilterName = 'size';
+
+const store = useStore();
+
+const localSize = ref(0);
+
+const page = computed(() => getNamespacedState(store.state, props.namespace)[pageFilterName].value);
+const size = computed(() => getNamespacedState(store.state, props.namespace)[sizeFilterName].value);
+
+function setFilter(payload) {
+  return store.dispatch(`${props.namespace}/SET_FILTER`, payload);
+}
+
+function setPage(value) {
+  return setFilter({ value, filter: pageFilterName });
+}
+
+function setSize(value) {
+  if (value === size.value) return;
+  // eslint-disable-next-line consistent-return
+  return setFilter({ value, filter: sizeFilterName });
+}
+
+watch(size, () => {
+  localSize.value = size.value;
+}, { immediate: true });
+</script>
+
+<style lang="scss" scoped>
+
+</style>

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

@@ -0,0 +1,101 @@
+import deepEqual from 'deep-equal';
+import isEmpty from '../../../scripts/isEmpty';
+import BaseStoreModule from '../../../store/BaseStoreModules/BaseStoreModule';
+
+export default class FiltersStoreModule extends BaseStoreModule {
+  getters = {
+    GET_FILTERS: (state, getters) => Object.keys(state)
+    .reduce((filters, filterKey) => {
+      const filterValue = getters.GET_FILTER(filterKey);
+      return isEmpty(filterValue) ? filters : {
+        ...filters,
+        [filterKey]: filterValue,
+      };
+    }, {}),
+    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_VALUE_FROM_QUERY: (state, getters) => ({ filterQuery }) => (
+      getters.ROUTER.currentRoute.value.query[filterQuery]
+    ),
+  };
+
+  actions = {
+    SET_FILTER: async (context, { filter, value }) => {
+      const { multiple, defaultValue } = context.state[filter];
+      let newValue = value;
+      if (newValue) {
+        if (multiple && !Array.isArray(newValue)) newValue = [newValue];
+      } else if (newValue === null || newValue
+        === undefined) newValue = defaultValue;
+      await context.dispatch('SET_VALUE_TO_QUERY', {
+        filterQuery: filter,
+        value,
+        storedProp: context.state[filter].storedProp,
+      });
+      context.commit('SET_FILTER', { filter, value: newValue });
+      return 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,
+      }));
+    },
+    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,
+      });
+    },
+    // eslint-disable-next-line consistent-return
+    RESTORE_FILTER: (context, { filter }) => {
+      const value = context.getters.GET_VALUE_FROM_QUERY({ filterQuery: filter });
+      if (value) return context.dispatch('SET_FILTER', ({ filter, value }));
+    },
+    RESTORE_FILTERS: (context) => {
+      Object.keys(context.state)
+      .forEach((filter) => context.dispatch('RESTORE_FILTER', { filter }));
+    },
+    RESET_FILTERS: (context) => {
+      context.commit('RESET_FILTERS');
+    },
+    ON_FILTER_SET: (context, { filter, value }) => context.dispatch('LOAD_DATA_LIST'),
+    LOAD_DATA_LIST: () => console.error('please override LOAD_DATA_LIST action in filters store'),
+  };
+
+  mutations = {
+    SET_FILTER: (state, { filter, value }) => {
+      state[filter].value = value;
+    },
+    RESET_FILTERS: (state) => {
+      Object.keys(state).forEach((filter) => {
+        state[filter].value = state[filter].defaultValue;
+      });
+    },
+  };
+}

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

@@ -8,10 +8,6 @@ export default class TableStoreModule extends BaseStoreModule {
   state = {
     headers: [],
     dataList: [],
-    size: 10,
-    search: '',
-    page: 1,
-    sort: '',
     error: {},
     isLoading: false,
     isNextPage: false,
@@ -31,15 +27,15 @@ export default class TableStoreModule extends BaseStoreModule {
     },
 
     // main GET_LIST params collector
-    GET_LIST_PARAMS: (state, getters) => (query) => {
+    GET_LIST_PARAMS: (state, getters) => (overrideFilters) => {
       const fields = getters.FIELDS.concat(getters.REQUIRED_FIELDS);
 
       const filters = getters.GET_FILTERS || getters['filters/GET_FILTERS'];
 
       return {
-        ...query,
         ...filters,
         fields,
+        ...overrideFilters,
       };
     },
   };
@@ -50,13 +46,6 @@ export default class TableStoreModule extends BaseStoreModule {
     AFTER_SET_DATA_LIST_HOOK: (context, { items, next }) => ({ items, next }),
 
     LOAD_DATA_LIST: async (context, query) => {
-      /*
-   https://my.webitel.com/browse/WTEL-3560
-   preventively disable isNext to handle case when user is clicking
-    "next" faster than actual request is made
-  */
-      context.commit('SET_IS_NEXT', false);
-
       const params = context.getters.GET_LIST_PARAMS(query);
       try {
         context.commit('SET_LOADING', true);