@webitel/ui-sdk 24.10.23 → 24.10.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "24.10.23",
+  "version": "24.10.24",
   "private": false,
   "scripts": {
     "dev": "vite",

package/src/modules/CSVExport/CSVExport.js

@@ -49,7 +49,10 @@ export default class CSVExport {
   }
 
   save(csv) {
-    const blob = new Blob([csv], { type: 'data:text/csv;charset=utf-8' });
+    // Prepending '\uFEFF' (the BOM) forces these applications to treat the file as UTF-8,
+    // ensuring that non-ASCII characters, such as Cyrillic, are displayed correctly.
+    const bom = '\uFEFF';
+    const blob = new Blob([bom + csv], { type: 'data:text/csv;charset=utf-8' });
     saveAs(blob, `${this.filename}.csv`);
   }
 

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

@@ -0,0 +1,40 @@
+<template>
+  <wt-datepicker
+    :label="filterSchema.label"
+    :value="value"
+    mode="datetime"
+    @input="setValue"
+  />
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { useStore } from 'vuex';
+import getNamespacedState from '../../../store/helpers/getNamespacedState.js';
+
+const props = defineProps({
+  namespace: {
+    type: String,
+    required: true,
+  },
+  filterQuery: {
+    type: String,
+    required: true,
+  },
+});
+
+const store = useStore();
+
+const filterSchema = computed(() => getNamespacedState(store.state, props.namespace)[props.filterQuery]);
+
+const value = computed(() => store.getters[`${props.namespace}/FILTER_${props.filterQuery}`]);
+
+const setValue = (value) => {
+  const payload = { value, name: props.filterQuery };
+  return store.dispatch(`${props.namespace}/SET_FILTER`, payload);
+};
+</script>
+
+<style scoped>
+
+</style>

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

@@ -17,9 +17,15 @@ export const useTableFilters = (namespace) => {
     return store.dispatch(`${filtersNamespace}/RESTORE_FILTERS`, payload);
   }
 
+  function resetFilters(payload) {
+    return store.dispatch(`${filtersNamespace}/RESET_FILTERS`, payload);
+  }
+
   return {
     namespace: filtersNamespace,
+
     restoreFilters,
+    resetFilters,
 
     subscribe,
     flushSubscribers,

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

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

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';
 
@@ -117,17 +118,43 @@ export default class FiltersStoreModule extends BaseStoreModule {
       });
     },
 
-    RESET_FILTERS: (context) =>
-      Promise.allSettled(
-        context.getters._FILTER_NAMES.map((name) => {
-          const filter = context.state[name];
+    RESET_FILTER: (context, { name }) => {
+      const filter = context.state[name];
+
+      return context.dispatch('SET_FILTER', {
+        name,
+        value: filter.defaultValue,
+        silent: true,
+      });
+    },
 
-          return context.dispatch('SET_FILTER', {
-            filter,
-            value: filter.defaultValue,
-          });
+    RESET_FILTERS: async (context) => {
+      await Promise.allSettled(
+        context.getters._STATE_FILTER_NAMES.map((name) => {
+          return context.dispatch('RESET_FILTER', { name });
         }),
-      ),
+      );
+
+      // clean up query params
+      const router = context.getters.ROUTER;
+      const query = Object.entries(router.currentRoute.query)
+      .reduce((filteredQuery, [qKey, qValue]) => {
+        if (context.state[qKey]) {
+          return filteredQuery;
+        }
+        return { ...filteredQuery, [qKey]: qValue };
+      }, {});
+
+      await router.push({
+        ...router.currentRoute,
+        query,
+      });
+
+      return context.dispatch('EMIT', {
+        event: FilterEvent.RESET,
+        payload: context.getters.GET_FILTERS(),
+      });
+    },
 
     SUBSCRIBE: (context, { event, callback }) => {
       const subscribe = () => context.state._emitter.on(event, callback);
@@ -174,6 +201,12 @@ export default class FiltersStoreModule extends BaseStoreModule {
       const stateFilter = new BaseFilterSchema(filter);
       if (stateFilter.requireRouter) this.state._requireRouter = true;
       this.state[filter.name] = stateFilter;
+      this.getters[`FILTER_${filter.name}`] = (state, getters) => {
+        // if is used as watcher for getter to recompute,
+        // because GET_FILTER is function ==> it's not reactive
+        if (state[filter.name].value) {}
+        return getters.GET_FILTER(filter.name);
+      };
     };
 
     if (Array.isArray(filter)) filter.forEach((f) => setup(f));

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

@@ -1,5 +1,9 @@
-import { queryToSortAdapter, sortToQueryAdapter } from '../../../scripts/sortQueryAdapters.js';
-import BaseStoreModule from '../../../store/BaseStoreModules/BaseStoreModule.js';
+import {
+  queryToSortAdapter,
+  sortToQueryAdapter,
+} from '../../../scripts/sortQueryAdapters.js';
+import BaseStoreModule
+  from '../../../store/BaseStoreModules/BaseStoreModule.js';
 import FilterEvent from '../../Filters/enums/FilterEvent.enum.js';
 
 export default class TableStoreModule extends BaseStoreModule {
@@ -53,6 +57,8 @@ export default class TableStoreModule extends BaseStoreModule {
           return context.dispatch('HANDLE_FILTERS_RESTORE', payload);
         case FilterEvent.FILTER_SET:
           return context.dispatch('HANDLE_FILTER_SET', payload);
+        case FilterEvent.RESET:
+          return context.dispatch('HANDLE_FILTER_RESET', payload);
         default:
           throw new Error(`Unknown filter event: ${event}`);
       }
@@ -65,6 +71,13 @@ export default class TableStoreModule extends BaseStoreModule {
       return context.dispatch('LOAD_DATA_LIST');
     },
 
+    // FIXME: maybe move to filters module?
+    HANDLE_FILTER_RESET: 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');
+    },
+
     // FIXME: maybe move to filters module?
     HANDLE_FILTER_SET: async (context, payload) => {
       if (payload.name === 'fields') {

package/src/store/new/modules/tableStoreModule/tableStoreModule.js

@@ -54,6 +54,8 @@ const actions = {
         return context.dispatch('HANDLE_FILTERS_RESTORE', payload);
       case FilterEvent.FILTER_SET:
         return context.dispatch('HANDLE_FILTER_SET', payload);
+      case FilterEvent.RESET:
+        return context.dispatch('HANDLE_FILTER_RESET', payload);
       default:
         throw new Error(`Unknown filter event: ${event}`);
     }
@@ -66,6 +68,13 @@ const actions = {
     return context.dispatch('LOAD_DATA_LIST');
   },
 
+  // FIXME: maybe move to filters module?
+  HANDLE_FILTER_RESET: 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');
+  },
+
   // FIXME: maybe move to filters module?
   HANDLE_FILTER_SET: async (context, payload) => {
     if (payload.name === 'fields') {