@webitel/ui-sdk 24.4.39 → 24.6.1

package/src/modules/AuditForm/components/questions/options/__tests__/audit-form-question-options-write-row.spec.js

@@ -16,7 +16,7 @@ describe('AuditFormQuestionOptionsWriteRow', () => {
         option: {},
       },
     });
-    const deleteBtn = wrapper.findComponent('.audit-form-question-options-write-row__tooltip .wt-icon-btn');
+    const deleteBtn = wrapper.findComponent({ name: 'wt-icon-btn' });
     expect(deleteBtn.attributes().icon).toBe('bucket');
     deleteBtn.vm.$emit('click');
     expect(wrapper.emitted().delete).toBeTruthy();

package/src/modules/AuditForm/components/questions/options/audit-form-question-options-write-row.vue

@@ -9,13 +9,10 @@
     />
     <wt-input
       :label="$t('webitelUI.auditForm.score', 1)"
-      :label-props="{ hint: $t('webitelUI.auditForm.scoreInputTooltip', { min: minScore, max: maxScore}), hintPosition: 'right' }"
       :value="option.score"
       :v="v$.option.score"
-      :number-min="minScore"
-      :number-max="maxScore"
       type="number"
-      @input="changeScore"
+      @input="emit('update:option', { name: option.name, score: $event })"
     />
     <wt-tooltip class="audit-form-question-options-write-row__tooltip">
       <template #activator>
@@ -58,9 +55,6 @@ const emit = defineEmits([
 // is needed for useVuelidate, because props.question/props.result isn't reactive
 const { option } = toRefs(props);
 
-const minScore = 0;
-const maxScore = 10;
-
 const v$ = useVuelidate(
   computed(() => (
     {
@@ -68,8 +62,8 @@ const v$ = useVuelidate(
         name: { required },
         score: {
           required,
-          minValue: minValue(minScore),
-          maxValue: maxValue(maxScore),
+          minValue: minValue(0),
+          maxValue: maxValue(10),
           decimalValidator: decimalValidator(2),
         },
       },
@@ -78,12 +72,6 @@ const v$ = useVuelidate(
   { $autoDirty: true },
 );
 
-
-function changeScore(value) {
-  const score = value > maxScore ? maxScore : Number(Math.abs(value)); // to prevent -1, 000 or string value because of this task https://webitel.atlassian.net/browse/WTEL-4505
-  emit('update:option', { name: props.option.name, score });
-}
-
 // init validation
 onMounted(() => v$.value.$touch());
 </script>

package/src/modules/AuditForm/components/questions/score/audit-form-question-score.vue

@@ -8,9 +8,8 @@
         :value="question.min"
         :v="v$.question.min"
         :number-min="0"
-        :number-max="9"
+        :number-max="19"
         :label="$t('reusable.from')"
-        :label-props="{ hint: $t('webitelUI.auditForm.scoreInputTooltip', { min: '0', max: '9'}), hintPosition: 'right' }"
         type="number"
         required
         @input="updateQuestion({ path: 'min', value: $event })"
@@ -19,9 +18,8 @@
         :value="question.max"
         :v="v$.question.max"
         :number-min="1"
-        :number-max="10"
+        :number-max="20"
         :label="$t('reusable.to')"
-        :label-props="{ hint: $t('webitelUI.auditForm.scoreInputTooltip', { min: '1', max: '10'}), hintPosition: 'right' }"
         type="number"
         required
         @input="updateQuestion({ path: 'max', value: $event })"
@@ -111,8 +109,7 @@ const scoreRange = computed(() => {
 const isResult = computed(() => !isEmpty(props.result));
 
 function updateQuestion({ path, value }) {
-  const number = value > 10 ? 10 : Number(Math.abs(value)); // to prevent -1, 000 or string value because of this task https://webitel.atlassian.net/browse/WTEL-4505
-  emit('change:question', updateObject({ obj: props.question, path, value: number }));
+  emit('change:question', updateObject({ obj: props.question, path, value }));
 }
 
 // init validation

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;

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

@@ -0,0 +1,41 @@
+import changeRouteQuery from '../utils/changeRouteQuery';
+
+const isObject = (value) => typeof value === 'object' &&
+  !Array.isArray(value) && value !== null;
+
+const handlePrimitive = ({ value }) => value;
+
+const handleObject = ({ value, storedProp }) => value[storedProp];
+
+const handleArray = ({ value, storedProp }) => {
+  if (!value.length) return [];
+
+  if (isObject(value[0])) {
+    value.map((item) => item[storedProp]);
+  } else {
+    return value;
+  }
+};
+
+const querySetter = (context) => (router) => async (rawValue = context.value) => {
+  const { name: filterQuery, storedProp } = this;
+
+  let value = '';
+
+  if (Array.isArray(rawValue)) {
+    value = handleArray({ value: rawValue, storedProp });
+  } else if (isObject(rawValue)) {
+    value = handleObject({ value: rawValue, storedProp });
+  } else {
+    value = handlePrimitive({ value });
+  }
+
+  await changeRouteQuery(router)({
+    filterQuery,
+    value,
+  });
+
+  return context;
+};
+
+export default querySetter;

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

@@ -0,0 +1,6 @@
+const valueSetter = (context) => (newValue) => {
+  context.value = newValue;
+  return context;
+}
+
+export default valueSetter;

package/src/modules/Filters/scripts/utils/changeRouteQuery.js

@@ -0,0 +1,17 @@
+import deepEqual from 'deep-equal';
+
+const changeRouteQuery = (router) => ({ filterQuery, value }) => {
+  if (deepEqual(router.currentRoute.value.query[filterQuery], value)) return;
+
+  const newQuery = {
+    ...router.currentRoute.value.query,
+    [filterQuery]: value,
+  };
+
+  return router.replace({
+    name: router.currentRoute.value.name,
+    query: newQuery,
+  });
+};
+
+export default changeRouteQuery;