@webitel/ui-sdk 24.6.30 → 24.6.32

package/src/modules/CardStoreModule/store/CardStoreModule.js

@@ -1,6 +1,7 @@
 import deepCopy from 'deep-copy';
 import set from 'lodash/set.js';
-import BaseStoreModule from '../../../store/BaseStoreModules/BaseStoreModule.js';
+import BaseStoreModule
+  from '../../../store/BaseStoreModules/BaseStoreModule.js';
 
 export default class CardStoreModule extends BaseStoreModule {
   state = {

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

@@ -0,0 +1,80 @@
+<template>
+  <wt-search-bar
+    class="filter-search"
+    :search-mode="multisearch && filterName"
+    :search-mode-options="multisearch && searchModeOpts"
+    :value="localValue"
+    @input="localValue = $event"
+    @search="setValue({ name: filterName, value: localValue })"
+    @update:search-mode="changeMode"
+  />
+</template>
+
+<script setup>
+import { computed, ref, watch } from 'vue';
+import { useStore } from 'vuex';
+import FilterEvent from '../enums/FilterEvent.enum.js';
+
+const props = defineProps({
+  namespace: {
+    type: String,
+    required: true,
+  },
+  multisearch: {
+    type: Boolean,
+    default: false,
+  },
+  name: {
+    type: String,
+    default: 'q',
+  },
+  searchModeOpts: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const store = useStore();
+
+
+function getValue(filter) {
+  return store.getters[`${props.namespace}/GET_FILTER`](filter);
+}
+
+function setValue(payload) {
+  return store.dispatch(`${props.namespace}/SET_FILTER`, payload);
+}
+
+const filterName = ref(props.multisearch ? props.searchModeOpts[0].value : props.name);
+
+const filterValue = computed(() => getValue(filterName.value));
+
+const localValue = ref(filterValue.value);
+
+async function changeMode({ value }) {
+  await setValue({ name: filterName.value, value: '' });
+  filterName.value = value;
+}
+
+function restoreSearchMode() {
+  const mode = props.searchModeOpts.value.find(({ value }) => !!getValue(value));
+  if (mode) changeMode({ value: mode.value });
+}
+
+function subscribe(payload) {
+  store.dispatch(`${props.namespace}/SUBSCRIBE`, payload);
+}
+
+subscribe({
+  event: FilterEvent.RESTORED,
+  callback: restoreSearchMode,
+});
+
+watch(() => filterValue.value, () => {
+  localValue.value = filterValue.value;
+});
+</script>
+
+<style scoped lang="scss">
+
+</style>

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

@@ -1,6 +1,7 @@
 import mitt from 'mitt';
 import isEmpty from '../../../scripts/isEmpty.js';
-import BaseStoreModule from '../../../store/BaseStoreModules/BaseStoreModule.js';
+import BaseStoreModule
+  from '../../../store/BaseStoreModules/BaseStoreModule.js';
 import BaseFilterSchema from '../classes/BaseFilterSchema.js';
 import FilterEvent from '../enums/FilterEvent.enum.js';
 
@@ -104,7 +105,7 @@ export default class FiltersStoreModule extends BaseStoreModule {
 
       return context.dispatch('EMIT', {
         event: FilterEvent.RESTORED,
-        payload: context.getters.GET_FILTERS,
+        payload: context.getters.GET_FILTERS(),
       });
     },
 

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

@@ -3,7 +3,8 @@ import {
   queryToSortAdapter,
   sortToQueryAdapter,
 } from '../../../scripts/sortQueryAdapters.js';
-import BaseStoreModule from '../../../store/BaseStoreModules/BaseStoreModule.js';
+import BaseStoreModule
+  from '../../../store/BaseStoreModules/BaseStoreModule.js';
 import FilterEvent from '../../Filters/enums/FilterEvent.enum.js';
 
 export default class TableStoreModule extends BaseStoreModule {
@@ -66,7 +67,12 @@ export default class TableStoreModule extends BaseStoreModule {
     },
 
     // FIXME: maybe move to filters module?
-    HANDLE_FILTERS_RESTORE: (context) => {
+    HANDLE_FILTERS_RESTORE: async (context, {
+      fields,
+      sort,
+    }) => {
+      if (sort) await context.dispatch('HANDLE_SORT_CHANGE', { value: sort });
+      if (fields?.length) await context.dispatch('HANDLE_FIELDS_CHANGE', { value: fields });
       return context.dispatch('LOAD_DATA_LIST');
     },
 
@@ -78,7 +84,7 @@ export default class TableStoreModule extends BaseStoreModule {
         await context.dispatch('HANDLE_SORT_CHANGE', payload);
       }
 
-      if (context.getters.FILTERS.page && payload.value !== 'page') {
+      if (context.getters.FILTERS().page && payload.value !== 'page') {
         await context.dispatch('SET_FILTER', {
           name: 'page',
           value: 1,
@@ -90,19 +96,19 @@ export default class TableStoreModule extends BaseStoreModule {
     },
 
     // FIXME: maybe move to filters module?
-    HANDLE_FIELDS_CHANGE: (context, payload) => {
+    HANDLE_FIELDS_CHANGE: (context, { value }) => {
       const headers = context.state.headers.map((header) => ({
         ...header,
-        show: payload.value.includes(header.value),
+        show: value.includes(header.value),
       }));
 
       context.commit('SET', { path: 'headers', value: headers });
     },
 
     // FIXME: maybe move to filters module?
-    HANDLE_SORT_CHANGE: (context, payload) => {
-      const nextSort = queryToSortAdapter(payload.value?.slice(0, 1) || '');
-      const field = nextSort ? payload.value.slice(1) : payload.value;
+    HANDLE_SORT_CHANGE: (context, { value }) => {
+      const nextSort = queryToSortAdapter(value?.slice(0, 1) || '');
+      const field = nextSort ? value.slice(1) : value;
 
       const headers = context.state.headers.map(({
                                                    sort: currentSort,

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

@@ -147,14 +147,14 @@ describe('TableStoreModule integration with FiltersStoreModule', () => {
       callback: (payload) => store.dispatch('table/ON_FILTER_EVENT', payload),
     });
 
-    expect(store.getters['table/filters/GET_FILTER']('page')).toBe(12);
+    expect(store.getters['table/FILTERS']().page).toBe(12);
 
     await store.dispatch('table/filters/SET_FILTER', {
       name: 'vi',
       value: 24,
     });
 
-    expect(store.getters['table/filters/GET_FILTER']('page')).toBe(1);
+    expect(store.getters['table/FILTERS']().page).toBe(1);
 
     await store.dispatch('table/filters/FLUSH_SUBSCRIBERS');
   });