@webitel/ui-sdk 3.1.56 → 3.1.58

package/package.json

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

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

@@ -0,0 +1,101 @@
+<template>
+  <wt-table-column-select
+    :headers="headers"
+    :static-headers="staticHeaders"
+    @change="change"
+  ></wt-table-column-select>
+</template>
+
+<script>
+import baseFilterMixin from '../mixins/baseFilterMixin/baseFilterMixin';
+
+export default {
+  name: 'filter-table-fields',
+  mixins: [baseFilterMixin],
+  props: {
+    entity: {
+      type: String,
+      required: true,
+    },
+    headers: {
+      type: Array,
+      required: true,
+    },
+    staticHeaders: {
+      type: Array,
+    },
+  },
+
+  data: () => ({
+    storedProp: 'value',
+    filterQuery: 'fields',
+  }),
+
+  model: {
+    prop: 'headers',
+    event: 'change',
+  },
+
+  methods: {
+    change(headers) {
+      this.setValue(headers);
+    },
+
+    // overrides baseFilterMixin method
+    restore({ filterQuery }) {
+      const queryValue = this.getValueFromQuery({ filterQuery });
+      const storageValue = this.getFromLocalStorage({ filterQuery });
+      if (!queryValue && storageValue) {
+        this.setValueToQuery({
+          filterQuery,
+          value: storageValue,
+          storedProp: this.storedProp,
+        });
+      }
+      if (queryValue || storageValue) {
+        this.restoreValue(queryValue || storageValue);
+      }
+    },
+
+    restoreValue(value) {
+      const headers = this.headers.map((header) => ({
+        ...header,
+        show: !!value.includes(header.value),
+      }));
+      this.$emit('change', headers);
+    },
+
+    setValue(headers) {
+      const value = headers.filter((item) => item.show);
+      const params = {
+        filterQuery: this.filterQuery,
+        value,
+        storedProp: this.storedProp,
+      };
+      this.setValueToQuery(params);
+      this.setToLocalStorage(params);
+      this.$emit('change', headers);
+    },
+
+    getFromLocalStorage({ filterQuery }) {
+      const value = localStorage.getItem(`${this.entity}-${filterQuery}`);
+      return value ? value.split(',') : null;
+    },
+
+    // copy-pasted params from "setValueArrayToQuery method
+    // for easier future refactors, if method should be abstract
+    setToLocalStorage({
+                        filterQuery,
+                        value,
+                        storedProp = 'id',
+                      }) {
+      const filter = value.map((item) => item[storedProp]);
+      localStorage.setItem(`${this.entity}-${filterQuery}`, filter);
+    },
+  },
+};
+</script>
+
+<style scoped>
+
+</style>

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

@@ -17,19 +17,54 @@ export default class TableStoreModule extends BaseStoreModule {
     isNextPage: false,
   };
 
+  getters = {
+    // required fields to send as "fields" param with GET_LIST
+    REQUIRED_FIELDS: () => ['id'],
+
+    // fields to send with GET_LIST
+    FIELDS: (state) => {
+      let fields = state.headers
+      .filter((header) => header.show)
+      .map((header) => header.field);
+      fields = [...new Set(fields)];
+      return fields;
+    },
+    // GET_DATA_FIELDS_BY_VALUE: (state) => (headerValues) => state.headers
+    // .reduce((fields, header) => {
+    //   if (headerValues.includes(header.value)) return fields.concat(header.field);
+    //   return [...new Set(fields)];
+    // }, []),
+
+    // main GET_LIST params collector
+    GET_LIST_PARAMS: (state, getters) => (query) => {
+      // const fields = (query.fields
+      //   ? getters.GET_DATA_FIELDS_BY_VALUE(query.fields)
+      //   : getters.FIELDS).concat(getters.REQUIRED_FIELDS);
+      const fields = getters.FIELDS.concat(getters.REQUIRED_FIELDS);
+
+      const filters = getters.GET_FILTERS || getters['filters/GET_FILTERS'];
+
+      return {
+        ...query,
+        ...filters,
+        fields,
+      };
+    },
+  };
+
   actions = {
     // HOOKS TO BE OVERRIDEN, IF NEEDED
     BEFORE_SET_DATA_LIST_HOOK: (context, { items, next }) => ({ items, next }),
     AFTER_SET_DATA_LIST_HOOK: (context, { items, next }) => ({ items, next }),
 
-    LOAD_DATA_LIST: async (context, _query) => {
-      const query = { ...context.getters['filters/GET_FILTERS'], ..._query };
+    LOAD_DATA_LIST: async (context, query) => {
+      const params = context.getters.GET_LIST_PARAMS(query);
       try {
         context.commit('SET_LOADING', true);
         let {
           items = [],
           next = false,
-        } = await context.dispatch('api/GET_LIST', { context, params: query });
+        } = await context.dispatch('api/GET_LIST', { context, params });
         /* we should set _isSelected property to all items in tables cause their checkbox selection
         * is based on this property. Previously, this prop was set it api consumers, but now
         * admin-specific were replaced by webitel-sdk consumers and i supposed it will be