@webitel/ui-sdk 24.6.0 → 24.6.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "24.6.0",
+  "version": "24.6.2",
   "private": false,
   "scripts": {
     "dev": "vite",
@@ -40,7 +40,7 @@
     "@vuelidate/validators": "^2.0.4",
     "@vuepic/vue-datepicker": "^4.4.0",
     "@vueuse/components": "^10.7.2",
-    "axios": "^1.6.8",
+    "axios": "^1.7.1",
     "clipboard-copy": "^4.0.1",
     "csv-stringify": "^5.5.3",
     "deep-copy": "^1.4.2",
@@ -51,6 +51,7 @@
     "jszip": "^3.5.0",
     "jszip-utils": "^0.1.0",
     "lodash": "^4.17.21",
+    "mitt": "^3.0.1",
     "plyr": "3.6.3",
     "query-string": "^8.1.0",
     "sortablejs": "^1.15.0",
@@ -70,7 +71,7 @@
     "eslint": "^8.53.0",
     "eslint-plugin-vue": "^9.18.1",
     "globby": "^14.0.0",
-    "happy-dom": "^12.9.1",
+    "happy-dom": "^14.11.0",
     "markdown-it": "^13.0.2",
     "markdown-table": "^3.0.3",
     "postcss": "^8.4.31",
@@ -86,8 +87,5 @@
     "vitest": "^1.4.0",
     "vue": "^3.4.15",
     "vuex": "^4.1.0"
-  },
-  "overrides": {
-    "axios": "^1.6.8"
   }
 }

package/src/components/wt-table/wt-table.vue

@@ -63,8 +63,8 @@
             class="wt-table__td wt-table__td--checkbox"
           >
             <wt-checkbox
-              :selected="row._isSelected"
-              @change="row._isSelected = !row._isSelected"
+              :selected="_selected.includes(row)"
+              @change="handleSelection(row, $event)"
             />
           </td>
 
@@ -147,17 +147,30 @@ export default {
       type: Boolean,
       default: true,
     },
+    selected: {
+      type: Array,
+      // no default! because we need to know if it's passed or not
+    },
     gridActions: {
       type: Boolean,
       default: true,
     },
   },
+  emits: [
+    'sort',
+    'update:selected',
+  ],
 
   data: () => ({}),
 
   computed: {
+    _selected() {
+      // _isSelected for backwards compatibility
+      return this.selected || this.data.filter((item) => item._isSelected);
+    },
+
     isAllSelected() {
-      return this.data.every((item) => item._isSelected);
+      return this._selected.length === this.data.length && this.data.length > 0;
     },
 
     dataHeaders() {
@@ -206,11 +219,33 @@ export default {
       return this.sortable && sort !== undefined;
     },
     selectAll() {
-      const { isAllSelected } = this;
-      // eslint-disable-next-line no-param-reassign,no-return-assign
-      this.data.forEach((item) => item._isSelected = !isAllSelected);
+      if (this.selected) {
+        if (this.isAllSelected) {
+          this.$emit('update:selected', []);
+        } else {
+          this.$emit('update:selected', [...this.data]);
+        }
+      } else {
+        // for backwards compatibility
+        this.data.forEach((item) => {
+          item._isSelected = !this.isAllSelected;
+        });
+      }
     },
+    handleSelection(row, remove) {
+      if (this.selected) {
+        if (remove) {
+          this.$emit('update:selected', this._selected.filter((item) => item !== row));
+        } else {
+          this.$emit('update:selected', [...this._selected, row]);
+        }
+      } else {
+        // for backwards compatibility
+        row._isSelected = !row._isSelected;
+      }
+    }
   },
+
 };
 </script>
 

package/src/components/wt-table-column-select/wt-table-column-select.vue

@@ -10,7 +10,7 @@
       {{ $t('webitelUI.tableColumnSelect.title') }}
     </wt-tooltip>
     <wt-popup
-      v-if="isColumnSelectPopup"
+      :shown="isColumnSelectPopup"
       class="wt-table-column-select__popup"
       @close="close"
     >

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

@@ -1,13 +1,146 @@
+import { valueSetter, querySetter, localStorageSetter } from '../scripts/setters';
+import { queryRestore, localStorageRestore } from '../scripts/restores';
+import { valueGetter, queryGetter, localStorageGetter } from '../scripts/getters';
+
+const convertGetterArray = (context) => (router) => (getters) => {
+  const availableGetters = ['value', 'query', 'localStorage'];
+
+  getters.forEach((getter) => {
+    if (!availableGetters.includes(getter)) throw new Error(`Unknown getter: ${getter}`);
+  });
+
+  const getter = () => {
+    if (getters.includes('value')) {
+      const value = valueGetter(context)();
+      if (value) return value;
+    }
+    if (getters.includes('query')) {
+      const value = queryGetter(context)(router)();
+      if (value) return value;
+    }
+    if (getters.includes('localStorage')) {
+      const value = localStorageGetter(context)();
+      if (value) return value;
+    }
+
+    console.error(`No value found for ${context.name} filter!`);
+
+    return undefined;
+  };
+
+  return getter;
+};
+
+const convertSetterArray = (context) => (router) => (setters) => {
+  const availableSetters = ['value', 'query', 'localStorage'];
+  setters.forEach((setter) => {
+    if (!availableSetters.includes(setter)) throw new Error(`Unknown setter: ${setter}`);
+  });
+
+  const setter = async (value) => {
+    if (setters.includes('value')) valueSetter(context)(value);
+    if (setters.includes('query')) await querySetter(context)(router)(value);
+    if (setters.includes('localStorage')) localStorageSetter(context)(value);
+
+    return context;
+  };
+
+  return setter;
+};
+
+const convertRestoreArray = (context) => (router) => (restores) => {
+  const availableRestores = ['query', 'localStorage'];
+
+  restores.forEach((restore) => {
+    if (!availableRestores.includes(restore)) throw new Error(`Unknown restore: ${restore}`);
+  });
+
+  const restore = () => {
+    if (restores.includes('query')) {
+      const restoredValue = queryRestore(context)(router)();
+      if (restoredValue) return restoredValue;
+    }
+
+    if (restores.includes('localStorage')) {
+      const restoredValue = localStorageRestore(context)();
+      if (restoredValue) return restoredValue;
+    }
+  };
+
+  return restore;
+};
+
 export default class BaseFilterSchema {
   constructor({
-                value = '',
-                defaultValue = '',
+                name,
+                value,
+                get,
+                set,
                 restore,
-                localStorageKey,
+                router, // is required for query get/set, if getters/setters are passed as strings
+                ...rest
               } = {}) {
-    this.value = value;
-    this.defaultValue = defaultValue;
-    if (restore) this.restore = restore;
-    if (localStorageKey) this.localStorageKey = localStorageKey;
+    if (!name) throw new Error('Filter name is required');
+    if (value === undefined) throw new Error(`Filter value is required: ${name}`);
+
+    if (!get) throw new Error(`Filter getter is required: ${name}`);
+    if (!set) throw new Error(`Filter setter is required: ${name}`);
+    if (!restore) throw new Error(`Filter restore is required: ${name}`);
+
+    Object.assign(this, {
+      name,
+      value,
+      get,
+      set,
+      restore,
+    }, rest);
+
+    this.setupGetters(get, { router });
+    this.setupSetters(set, { router });
+    this.setupRestores(restore, { router });
+
+    return this;
+  }
+
+  setupGetters(getters, { router }) {
+    let getter;
+
+    if (Array.isArray(getters)) {
+      getter = convertGetterArray(this)(router)(getters);
+    } else if (typeof getters === 'function') {
+      getter = getters(this);
+    } else {
+      throw new Error('Getter should be a function or an array of available getters');
+    }
+
+    this.get = getter;
+  }
+
+  setupSetters(setters, { router }) {
+    let setter;
+
+    if (Array.isArray(setters)) {
+      setter = convertSetterArray(this)(router)(setters);
+    } else if (typeof setters === 'function') {
+      setter = setters(this);
+    } else {
+      throw new Error('Setter should be a function or an array of available setters');
+    }
+
+    this.set = setter;
+  }
+
+  setupRestores(restores, { router }) {
+    let restore;
+
+    if (Array.isArray(restores)) {
+     restore = convertRestoreArray(this)(router)(restores);
+    } else if (typeof restores === 'function') {
+      restore = restores(this);
+    } else {
+      throw new Error('Restore should be a function or an array of available restores');
+    }
+
+    this.restore = restore;
   }
 }

package/src/modules/Filters/components/__tests__/filter-pagination.spec.js

@@ -0,0 +1,94 @@
+import { mount } from '@vue/test-utils';
+import { createStore } from 'vuex';
+import FiltersStoreModule from '../../store/FiltersStoreModule';
+import FilterPagination from '../filter-pagination.vue';
+
+const filtersSchema = [
+  {
+    name: 'page',
+    value: 1,
+    get: ['value'],
+    set: ['value'],
+    restore: () => {},
+  },
+  {
+    name: 'size',
+    value: 11,
+    get: ['value'],
+    set: ['value'],
+    restore: () => {},
+  },
+];
+
+describe('FilterPagination', () => {
+  it('renders a component', () => {
+    const store = createStore({
+      modules: {
+        filters: new FiltersStoreModule().addFilter(filtersSchema).getModule(),
+      },
+    });
+
+    const wrapper = mount(FilterPagination, {
+      props: {
+        namespace: 'filters',
+      },
+      global: {
+        plugins: [store],
+      },
+    });
+    expect(wrapper.exists()).toBe(true);
+  });
+
+  it('size change dispatches SET_FILTER action', async () => {
+    const store = createStore({
+      modules: {
+        filters: new FiltersStoreModule().addFilter(filtersSchema).getModule(),
+      },
+    });
+
+    const wrapper = mount(FilterPagination, {
+      shallow: true,
+      props: {
+        namespace: 'filters',
+      },
+      global: {
+        plugins: [store],
+        stubs: {
+          WtPagination: false,
+        },
+      },
+    });
+
+    const pagination = wrapper.findComponent('.wt-pagination');
+    pagination.vm.$emit('input', 321);
+    pagination.vm.$emit('change');
+    await wrapper.vm.$nextTick();
+    expect(store.getters['filters/GET_FILTER']('size')).toBe(321);
+  });
+
+  it('page change dispatches SET_FILTER action', async () => {
+    const store = createStore({
+      modules: {
+        filters: new FiltersStoreModule().addFilter(filtersSchema).getModule(),
+      },
+    });
+
+    const wrapper = mount(FilterPagination, {
+      shallow: true,
+      props: {
+        namespace: 'filters',
+      },
+      global: {
+        plugins: [store],
+        stubs: {
+          WtPagination: false,
+        },
+      },
+    });
+
+    const pagination = wrapper.findComponent('.wt-pagination');
+    pagination.vm.$emit('next');
+    await wrapper.vm.$nextTick();
+    expect(store.getters['filters/GET_FILTER']('page')).toBe(2);
+  });
+});

package/src/modules/Filters/components/__tests__/filter-table-fields.spec.js

@@ -0,0 +1,71 @@
+import { createStore } from 'vuex';
+import { mount } from '@vue/test-utils';
+import FiltersStoreModule from '../../store/FiltersStoreModule';
+import FilterTableFields from '../filter-table-fields.vue';
+
+const filterSchema = {
+  name: 'fields',
+  value: ['field2'],
+  get: ['value'],
+  set: ['value'],
+  restore: () => {},
+};
+
+describe('FilterTableFields', () => {
+  it('renders a component', () => {
+    const store = createStore({
+      modules: {
+        filters: new FiltersStoreModule().addFilter(filterSchema).getModule(),
+      },
+    });
+
+    const headers = [
+      { value: 'f1', field: 'field1', show: false },
+      { value: 'f2', field: 'field2', show: true },
+    ];
+
+    const wrapper = mount(FilterTableFields, {
+      props: {
+        namespace: 'filters',
+        headers,
+      },
+      global: {
+        plugins: [store],
+      },
+    });
+    expect(wrapper.exists()).toBe(true);
+  });
+
+  it('fields change dispatches SET_FILTER action', async () => {
+    const store = createStore({
+      modules: {
+        filters: new FiltersStoreModule().addFilter(filterSchema).getModule(),
+      },
+    });
+
+    const headers = [
+      { value: 'f1', field: 'field1', show: false },
+      { value: 'f2', field: 'field2', show: true },
+    ];
+
+    const wrapper = mount(FilterTableFields, {
+      shallow: true,
+      props: {
+        namespace: 'filters',
+        headers,
+      },
+      global: {
+        plugins: [store],
+      },
+    });
+
+    wrapper.findComponent({ name: 'WtTableColumnSelect' }).vm.$emit('change', [
+      { value: 'f1', field: 'field1', show: true },
+      { value: 'f2', field: 'field2', show: false },
+    ]);
+
+    await wrapper.vm.$nextTick();
+
+    expect(store.getters['filters/GET_FILTER']('fields')).toEqual(['f1']);
+  });
+});

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

@@ -34,26 +34,26 @@ 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);
+const page = computed(() => store.getters[`${props.namespace}/GET_FILTER`](pageFilterName));
+const size = computed(() => store.getters[`${props.namespace}/GET_FILTER`](sizeFilterName));
 
 function setFilter(payload) {
   return store.dispatch(`${props.namespace}/SET_FILTER`, payload);
 }
 
 function setPage(value) {
-  return setFilter({ value, filter: pageFilterName });
+  return setFilter({ value, name: pageFilterName });
 }
 
 function setSize(value) {
   if (value === size.value) return;
-  // eslint-disable-next-line consistent-return
-  return setFilter({ value, filter: sizeFilterName });
+  return setFilter({ value, name: sizeFilterName });
 }
 
-watch(size, () => {
-  localSize.value = size.value;
-}, { immediate: true });
+// TF?
+// watch(size, () => {
+//   localSize.value = size.value;
+// }, { immediate: true });
 </script>
 
 <style lang="scss" scoped>

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

@@ -22,35 +22,28 @@ const props = defineProps({
   },
   staticHeaders: {
     type: Array,
+    default: () => [],
   },
 });
 
-const emit = defineEmits(
+const emit = defineEmits([
   'change',
-);
+]);
 
-// const storedProp = 'value';
 const filterQuery = 'fields';
 
 const store = useStore();
 
-const filterSchema = computed(() => getNamespacedState(store.state, props.namespace)[filterQuery]);
-
 function setValue(payload) {
   return store.dispatch(`${props.namespace}/SET_FILTER`, payload);
 }
 
-function setToLocalStorage({ value }) {
-  localStorage.setItem(filterSchema.value.localStorageKey, value);
-}
-
 function handleChange(headers) {
   const value = headers.filter((item) => item.show).map(({ value }) => value);
   const params = {
-    filter: filterQuery,
+    name: filterQuery,
     value,
   };
-  setToLocalStorage(params);
   setValue(params);
   emit('change', headers);
 }

package/src/modules/Filters/composables/useTableFilters.js

@@ -9,9 +9,8 @@ export const useTableFilters = (namespace) => {
     return store.dispatch(`${filtersNamespace}/RESTORE_FILTERS`, payload);
   }
 
-  restoreFilters();
-
   return {
-    filtersNamespace,
+    namespace: filtersNamespace,
+    restoreFilters,
   };
 };

package/src/modules/Filters/enums/FilterEvent.enum.js

@@ -0,0 +1,6 @@
+const FilterEvent = Object.freeze({
+  FILTER_SET: 'FILTER_SET',
+  RESTORED: 'RESTORED',
+});
+
+export default FilterEvent;

package/src/modules/Filters/scripts/getters/index.js

@@ -0,0 +1,9 @@
+import localStorageGetter from './localStorageGetter';
+import queryGetter from './queryGetter';
+import valueGetter from './valueGetter';
+
+export {
+  localStorageGetter,
+  queryGetter,
+  valueGetter,
+};

package/src/modules/Filters/scripts/getters/localStorageGetter.js

@@ -0,0 +1,17 @@
+// context === filter "this"
+const localStorageGetter = (context) => () => {
+  if (!context) throw new Error('Filter context is required for localStorageGetter!');
+
+  const key = context.localStorageKey;
+
+  if (!key) throw new Error(`Please provide "localStorageKey" for ${context.name} filter!`);
+
+  const value = localStorage.getItem(key);
+  if (!value) return null;
+
+  const splitted = value.split(',');
+  if (splitted.length === 1) return splitted[0];
+  return splitted;
+}
+
+export default localStorageGetter;

package/src/modules/Filters/scripts/getters/queryGetter.js

@@ -0,0 +1,10 @@
+
+// context === filter "this"
+const queryGetter = (context) => (router) => () => {
+  if (!router) throw new Error('Router is required for queryGetter!');
+  if (!router) throw new Error('Router is required for queryGetter!');
+
+  return router.currentRoute.value.query[context.name];
+};
+
+export default queryGetter;

package/src/modules/Filters/scripts/getters/valueGetter.js

@@ -0,0 +1,9 @@
+// context === filter "this"
+const valueGetter = (context) => () => {
+  const { value, storedProp, multiple } = context;
+  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
+}
+
+export default valueGetter;

package/src/modules/Filters/scripts/restores/index.js

@@ -0,0 +1,7 @@
+import localStorageRestore from './localStorageRestore';
+import queryRestore from './queryRestore';
+
+export {
+  localStorageRestore,
+  queryRestore,
+};

package/src/modules/Filters/scripts/restores/localStorageRestore.js

@@ -0,0 +1,7 @@
+/**
+ * restore copies getter logic
+ */
+
+import localStorageGetter from '../getters/localStorageGetter';
+
+export default localStorageGetter;

package/src/modules/Filters/scripts/restores/queryRestore.js

@@ -0,0 +1,7 @@
+/**
+ * restore copies getter logic
+ */
+
+import queryGetter from '../getters/queryGetter';
+
+export default queryGetter;

package/src/modules/Filters/scripts/setters/index.js

@@ -0,0 +1,9 @@
+import localStorageSetter from './localStorageSetter';
+import querySetter from './querySetter';
+import valueSetter from './valueSetter';
+
+export {
+  localStorageSetter,
+  querySetter,
+  valueSetter,
+};

package/src/modules/Filters/scripts/setters/localStorageSetter.js

@@ -0,0 +1,16 @@
+// context === filter "this"
+
+const localStorageSetter = (context) => (rawValue) => {
+  if (!context) throw new Error('Filter context is required for localStorageSetter!');
+
+  const key = context.localStorageKey;
+
+  if (!key) throw new Error(`Please provide "localStorageKey" for ${context.name} filter!`);
+
+  const value = Array.isArray(rawValue) ? rawValue.join(',') : rawValue;
+  localStorage.setItem(key, value);
+
+  return context;
+}
+
+export default localStorageSetter;