@webitel/ui-sdk 3.2.11 → 3.2.12

package/package.json

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

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,102 @@
+import deepEqual from 'deep-equal';
+import isEmpty from '../../../scripts/isEmpty';
+import BaseStoreModule from '../../../store/BaseStoreModules/BaseStoreModule';
+
+export default class FiltersStoreModule extends BaseStoreModule {
+  constructor({ router }) {
+    super();
+    this.router = router;
+  }
+
+  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) => {
+      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: () => ({ filterQuery }) => (
+      this.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 });
+    },
+    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 = { ...this.router.currentRoute.value.query };
+      query[filterQuery] = value;
+      // eslint-disable-next-line consistent-return
+      return this.router.replace({
+        name: this.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');
+    },
+  };
+
+  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

@@ -31,15 +31,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 +50,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);