@webitel/ui-sdk 0.1.2-vue3 → 0.1.3-vite

package/src/modules/FilesExport/FilesExport.js

@@ -1,6 +1,7 @@
 import jszipUtils from 'jszip-utils';
 import { saveAs } from 'file-saver';
 import JSZip from 'jszip';
+import path from 'path';
 import generateMediaURL from './scripts/generateMediaURL';
 
 /* eslint-disable no-await-in-loop, no-restricted-syntax */
@@ -47,7 +48,9 @@ export default class FilesExport {
       } else {
         const binary = await this._fetchFileBinary(item.id);
         const ext = item.mimeType.split('/').pop();
-        zip.file(`${item.name}.${ext}`, binary);
+        // itemName needed to remove extension from item.name https://stackoverflow.com/a/31615711
+        const itemName = path.parse(item.name).name;
+        zip.file(`${itemName}.${ext}`, binary);
         this.downloadProgress.count += 1;
       }
     }

package/src/modules/FilesExport/scripts/generateMediaURL.js

@@ -1,6 +1,6 @@
 const generateMediaURL = (id) => {
   const token = localStorage.getItem('access-token');
-  const BASE_URL = process.env.VUE_APP_API_URL;
+  const BASE_URL = process?.env?.VUE_APP_API_URL || import.meta.env.VITE_API_URL;
   return `${BASE_URL}/storage/recordings/${id}/stream?access_token=${token}`;
 };
 

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

@@ -0,0 +1,13 @@
+export default class BaseFilterSchema {
+  constructor({
+                value = '',
+                defaultValue = '',
+                restore,
+                localStorageKey,
+              } = {}) {
+    this.value = value;
+    this.defaultValue = defaultValue;
+    if (restore) this.restore = restore;
+    if (localStorageKey) this.localStorageKey = localStorageKey;
+  }
+}

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/components/filter-table-fields.vue

@@ -0,0 +1,61 @@
+<template>
+  <wt-table-column-select
+    :headers="headers"
+    :static-headers="staticHeaders"
+    @change="handleChange"
+  ></wt-table-column-select>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { useStore } from 'vuex';
+import getNamespacedState from '../../../store/helpers/getNamespacedState';
+
+const props = defineProps({
+  namespace: {
+    type: String,
+    required: true,
+  },
+  headers: {
+    type: Array,
+    required: true,
+  },
+  staticHeaders: {
+    type: Array,
+  },
+});
+
+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,
+    value,
+  };
+  setToLocalStorage(params);
+  setValue(params);
+  emit('change', headers);
+}
+</script>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,17 @@
+import { useStore } from 'vuex';
+
+export const useTableFilters = (namespace) => {
+  const store = useStore();
+
+  const filtersNamespace = `${namespace}/filters`;
+
+  function restoreFilters(payload) {
+    return store.dispatch(`${filtersNamespace}/RESTORE_FILTERS`, payload);
+  }
+
+  restoreFilters();
+
+  return {
+    filtersNamespace,
+  };
+};

package/src/modules/Filters/restores/filterFieldsRestore.js

@@ -0,0 +1,9 @@
+const restore = (localStorageKey) => ({ query }) => {
+  if (!query) {
+    const value = localStorage.getItem(localStorageKey);
+    return value ? value.split(',') : null;
+  }
+  return query;
+};
+
+export default restore;

package/src/modules/Filters/restores/readme.md

@@ -0,0 +1 @@
+"restore" functions for filters

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

@@ -0,0 +1,181 @@
+import deepEqual from 'deep-equal';
+import debounce from '../../../scripts/debounce';
+import isEmpty from '../../../scripts/isEmpty';
+import BaseStoreModule from '../../../store/BaseStoreModules/BaseStoreModule';
+
+const SET_FILTER_SOURCE = Object.freeze({
+  RESTORE: 'restore', // when filter is restored at session start
+  DEFAULT: 'default',
+});
+
+export default class FiltersStoreModule extends BaseStoreModule {
+  getters = {
+    ROUTER: () => console.error('setup ROUTER getter for filters store'),
+    TABLE_NAMESPACE: () => console.error('setup TABLE_NAMESPACE getter for filters store'),
+
+    // get value of specific filter
+    GET_FILTER: (state) => (filter) => {
+      if (!state[filter]) return null;
+      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 all filters values
+    GET_FILTERS: (state, getters) => Object.keys(state)
+    .reduce((filters, filterKey) => {
+      const filterValue = getters.GET_FILTER(filterKey);
+      return isEmpty(filterValue) ? filters : {
+        ...filters,
+        [filterKey]: filterValue,
+      };
+    }, {}),
+
+    // get value of filter from query string by query key
+    GET_VALUE_FROM_QUERY: (state, getters) => ({ filterQuery }) => (
+      getters.ROUTER.currentRoute.value.query[filterQuery]
+    ),
+  };
+
+  actions = {
+    SET_FILTER: async (context, {
+      filter,
+      value,
+      source = SET_FILTER_SOURCE.DEFAULT,
+      silent = false, // if true, don't call ON_FILTER_SET event
+    }) => {
+      const { multiple, defaultValue } = context.state[filter];
+
+      let newValue = value;
+
+      if (value) {
+        if (multiple && !Array.isArray(value)) newValue = [value];
+      } else if (value === null || value === 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 });
+
+      if (source !== SET_FILTER_SOURCE.RESTORE && filter !== 'page') {
+        await context.dispatch('SET_FILTER', {
+          filter: 'page',
+          value: 1,
+          silent: true,
+        });
+      }
+
+      if (!silent) await context.dispatch('ON_FILTER_SET', { filter, value });
+    },
+    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 = { ...context.getters.ROUTER.currentRoute.value.query };
+      query[filterQuery] = value;
+      // eslint-disable-next-line consistent-return
+      return context.getters.ROUTER.replace({
+        name: context.getters.ROUTER.currentRoute.value.name,
+        query,
+      });
+    },
+
+    RESTORE_FILTER: async (context, { filter }) => {
+      const query = context.getters.GET_VALUE_FROM_QUERY({ filterQuery: filter });
+      // note: restore fn may still return value even if there's no query value
+      // from localStorage, for instance
+      const value = context.state[filter].restore
+        ? context.state[filter].restore({ query })
+        : query;
+      if (value) {
+        if (filter
+          === 'sort') await context.dispatch('RESTORE_SORT', { value });
+        else if (filter
+          === 'fields') await context.dispatch('RESTORE_FIELDS', { value });
+        await context.dispatch('SET_FILTER', ({
+          filter,
+          value,
+          source: SET_FILTER_SOURCE.RESTORE,
+        }));
+        return true;
+      }
+      return false;
+    },
+
+    RESTORE_FILTERS: async (context) => {
+      const restores = [];
+      for (const filter of Object.keys(context.state)) {
+        // collect restores in order to check if there were actually any restores
+        // empty restore returns "false"
+        const result = await context.dispatch('RESTORE_FILTER', { filter });
+        restores.push(result);
+      }
+
+      // if no filters to restore, call LOAD_LIST manually
+      if (restores.every((restore) => restore === false)) {
+        context.dispatch('LOAD_DATA_LIST');
+      }
+    },
+
+    RESET_FILTERS: (context) => Promise.allSettled(Object.keys(context.state)
+    .map((filter) => {
+      return context.dispatch('SET_FILTER', {
+        filter,
+        value: context.state[filter].defaultValue,
+      });
+    })),
+
+    ON_FILTER_SET: (
+      context,
+      { filter, value },
+    ) => context.dispatch('LOAD_DATA_LIST'),
+
+    LOAD_DATA_LIST: (context) => context.dispatch(
+      `${context.getters.TABLE_NAMESPACE}/LOAD_DATA_LIST`,
+      { filters: context.getters.GET_FILTERS },
+      { root: true },
+    ),
+    RESTORE_SORT: (context, { value }) => context.dispatch(
+      `${context.getters.TABLE_NAMESPACE}/RESTORE_SORT_FROM_FILTER`,
+      { value },
+      { root: true },
+    ),
+    RESTORE_FIELDS: (context, { value }) => context.dispatch(
+      `${context.getters.TABLE_NAMESPACE}/RESTORE_FIELDS_FROM_FILTER`,
+      { value },
+      { root: true },
+    ),
+  };
+
+  mutations = {
+    SET_FILTER: (state, { filter, value }) => {
+      state[filter].value = value;
+    },
+  };
+}

package/src/modules/QueryFilters/components/__tests__/abstract-api-filter.spec.js

@@ -1,13 +1,13 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils';
-import Vuex from 'vuex';
-import VueRouter from 'vue-router';
+import { shallowMount } from '@vue/test-utils';
+import { createStore } from 'vuex';
+import { createRouter, createWebHistory } from 'vue-router';
 import AbstractApiFilter from '../abstract-api-filter.vue';
 import ApiFilterSchema from '../../classes/ApiFilterSchema';
 
-const localVue = createLocalVue();
-localVue.use(Vuex);
-localVue.use(VueRouter);
-const router = new VueRouter();
+const router = createRouter({
+  history: createWebHistory(),
+  routes: [],
+});
 
 describe('Abstract Api Filter', () => {
   const namespace = 'jest';
@@ -17,7 +17,7 @@ describe('Abstract Api Filter', () => {
   const fetchSelectedMock = jest.fn(() => ({ items: [] }));
   jest.spyOn(filterSchema, 'search').mockImplementation(searchMock);
   jest.spyOn(filterSchema, 'fetchSelected').mockImplementation(fetchSelectedMock);
-  const store = new Vuex.Store({
+  const store = createStore({
     modules: {
       [namespace]: {
         namespaced: true,
@@ -29,10 +29,8 @@ describe('Abstract Api Filter', () => {
   });
 
   const mountOptions = {
-    localVue,
-    store,
-    router,
-    propsData: {
+    global: { plugins: [store, router] },
+    props: {
       namespace,
       filterQuery,
     },

package/src/modules/QueryFilters/components/__tests__/abstract-enum-filter.spec.js

@@ -1,19 +1,19 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils';
-import Vuex from 'vuex';
-import VueRouter from 'vue-router';
+import { shallowMount } from '@vue/test-utils';
+import { createStore } from 'vuex';
+import { createRouter, createWebHistory } from 'vue-router';
 import AbstractEnumFilter from '../abstract-enum-filter.vue';
 import EnumFilterSchema from '../../classes/EnumFilterSchema';
 
-const localVue = createLocalVue();
-localVue.use(Vuex);
-localVue.use(VueRouter);
-const router = new VueRouter();
+const router = createRouter({
+  history: createWebHistory(),
+  routes: [],
+});
 
 describe('Abstract Enum Filter', () => {
   const namespace = 'jest';
   const filterQuery = 'jest';
   const filterSchema = new EnumFilterSchema({ locale: {} });
-  const store = new Vuex.Store({
+  const store = createStore({
     modules: {
       [namespace]: {
         namespaced: true,
@@ -25,10 +25,8 @@ describe('Abstract Enum Filter', () => {
   });
 
   const mountOptions = {
-    localVue,
-    store,
-    router,
-    propsData: {
+    global: { plugins: [store, router] },
+    props: {
       namespace,
       filterQuery,
     },

package/src/modules/QueryFilters/components/__tests__/filter-datetime.spec.js

@@ -1,20 +1,20 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils';
-import Vuex from 'vuex';
-import VueRouter from 'vue-router';
+import { shallowMount } from '@vue/test-utils';
+import { createStore } from 'vuex';
+import { createRouter, createWebHistory } from 'vue-router';
 import DatetimeFilter from '../filter-datetime.vue';
 import BaseFilterSchema from '../../classes/BaseFilterSchema';
 import baseFilterMixin from '../../mixins/baseFilterMixin/baseFilterMixin';
 
-const localVue = createLocalVue();
-localVue.use(Vuex);
-localVue.use(VueRouter);
-const router = new VueRouter();
+const router = createRouter({
+  history: createWebHistory(),
+  routes: [{ path: '/', name: 'jest' }],
+});
 
 describe('DatetimeFilter Filter', () => {
   const namespace = 'jest';
   const filterQuery = 'jest';
   const filterSchema = new BaseFilterSchema();
-  const store = new Vuex.Store({
+  const store = createStore({
     modules: {
       [namespace]: {
         namespaced: true,
@@ -26,10 +26,10 @@ describe('DatetimeFilter Filter', () => {
   });
 
   const mountOptions = {
-    localVue,
-    store,
-    router,
-    propsData: {
+    global: {
+      plugins: [router, store],
+    },
+    props: {
       namespace,
       filterQuery,
     },

package/src/modules/QueryFilters/components/__tests__/filter-from-to.spec.js

@@ -1,20 +1,20 @@
-import { createLocalVue, shallowMount } from '@vue/test-utils';
-import VueRouter from 'vue-router';
-import Vuex from 'vuex';
+import { shallowMount } from '@vue/test-utils';
+import { createStore } from 'vuex';
+import { createRouter, createWebHistory } from 'vue-router';
 import BaseFilterSchema from '../../classes/BaseFilterSchema';
 import baseFilterMixin from '../../mixins/baseFilterMixin/baseFilterMixin';
 import FilterFromTo from '../filter-from-to.vue';
 
-const localVue = createLocalVue();
-localVue.use(Vuex);
-localVue.use(VueRouter);
-const router = new VueRouter();
+const router = createRouter({
+  history: createWebHistory(),
+  routes: [{ path: '/', name: 'jest' }],
+});
 
 describe('FilterFromTo Filter', () => {
   const namespace = 'jest';
   const filterQuery = 'jest';
   const filterSchema = new BaseFilterSchema();
-  const store = new Vuex.Store({
+  const store = createStore({
     modules: {
       [namespace]: {
         namespaced: true,
@@ -26,10 +26,8 @@ describe('FilterFromTo Filter', () => {
   });
 
   const mountOptions = {
-    localVue,
-    store,
-    router,
-    propsData: {
+    global: { plugins: [store, router] },
+    props: {
       namespace,
       filterQuery,
     },

package/src/modules/QueryFilters/components/__tests__/filter-search.spec.js

@@ -1,20 +1,20 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils';
-import Vuex from 'vuex';
-import VueRouter from 'vue-router';
+import { shallowMount } from '@vue/test-utils';
+import { createStore } from 'vuex';
+import { createRouter, createWebHistory } from 'vue-router';
 import SearchFilter from '../filter-search.vue';
 import BaseFilterSchema from '../../classes/BaseFilterSchema';
 import baseFilterMixin from '../../mixins/baseFilterMixin/baseFilterMixin';
 
-const localVue = createLocalVue();
-localVue.use(Vuex);
-localVue.use(VueRouter);
-const router = new VueRouter();
+const router = createRouter({
+  history: createWebHistory(),
+  routes: [{ path: '/', name: 'jest' }],
+});
 
 describe('Search Filter', () => {
   const namespace = 'jest';
   const filterQuery = 'jest';
   const filterSchema = new BaseFilterSchema();
-  const store = new Vuex.Store({
+  const store = createStore({
     modules: {
       [namespace]: {
         namespaced: true,
@@ -26,10 +26,8 @@ describe('Search Filter', () => {
   });
 
   const mountOptions = {
-    localVue,
-    store,
-    router,
-    propsData: {
+    global: { plugins: [store, router] },
+    props: {
       namespace,
       filterQuery,
     },

package/src/modules/QueryFilters/components/abstract-api-filter.vue

@@ -1,12 +1,12 @@
 <template>
   <wt-select
+    v-bind="$attrs"
     :value="filterSchema.value"
     :label="label"
     :track-by="filterSchema.storedProp"
     :multiple="filterSchema.multiple"
     :search-method="search"
     :close-on-select="filterSchema.closeOnSelect"
-    v-bind="$attrs"
     @input="setValue({ filter: filterQuery, value: $event })"
     @reset="setValueToQuery({ value, filterQuery, storedProp: filterSchema.storedProp })"
     @closed="setValueToQuery({ value, filterQuery, storedProp: filterSchema.storedProp })"

package/src/modules/QueryFilters/components/abstract-enum-filter.vue

@@ -1,11 +1,11 @@
 <template>
   <wt-select
+    v-bind="$attrs"
     :value="value"
     :options="localizedOptions"
     :label="label"
     :track-by="filterSchema.storedProp"
     :multiple="filterSchema.multiple"
-    v-bind="$attrs"
     @input="setValue({ filter: filterQuery, value: $event })"
     @reset="setValueToQuery({ value, filterQuery, storedProp: filterSchema.storedProp })"
     @closed="setValueToQuery({ value, filterQuery, storedProp: filterSchema.storedProp })"

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

@@ -1,9 +1,10 @@
 <template>
-  <wt-datetimepicker
+  <wt-datepicker
     :value="filterSchema.value"
     :label="label"
-    @change="handleChange"
-  ></wt-datetimepicker>
+    mode="datetime"
+    @input="handleChange"
+  ></wt-datepicker>
 </template>
 
 <script>