@webitel/ui-sdk 0.1.3 → 0.1.4-vite

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

@@ -0,0 +1,63 @@
+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 router = createRouter({
+  history: createWebHistory(),
+  routes: [{ path: '/', name: 'jest' }],
+});
+
+describe('FilterFromTo Filter', () => {
+  const namespace = 'jest';
+  const filterQuery = 'jest';
+  const filterSchema = new BaseFilterSchema();
+  const store = createStore({
+    modules: {
+      [namespace]: {
+        namespaced: true,
+        state: {
+          [filterQuery]: filterSchema,
+        },
+      },
+    },
+  });
+
+  const mountOptions = {
+    global: { plugins: [store, router] },
+    props: {
+      namespace,
+      filterQuery,
+    },
+  };
+  it('renders a component', () => {
+    const wrapper = shallowMount(FilterFromTo, mountOptions);
+    expect(wrapper.exists()).toBe(true);
+  });
+  it('initial restoreValue() triggers setValue() method: From case', async () => {
+    const value = 10;
+    await router.replace({ query: { [`${filterQuery}From`]: value } });
+    const setValueMock = jest.fn();
+    jest.spyOn(baseFilterMixin.methods, 'setValue')
+    .mockImplementation(setValueMock);
+    shallowMount(FilterFromTo, mountOptions);
+    expect(setValueMock).toHaveBeenNthCalledWith(1, {
+      filter: filterQuery,
+      value: { to: undefined, from: value },
+    });
+  });
+  it('initial restoreValue() triggers setValue() method: To case', async () => {
+    const value = 10;
+    await router.replace({ query: { [`${filterQuery}To`]: value } });
+    const setValueMock = jest.fn();
+    jest.spyOn(baseFilterMixin.methods, 'setValue')
+    .mockImplementation(setValueMock);
+    shallowMount(FilterFromTo, mountOptions);
+    expect(setValueMock).toHaveBeenNthCalledWith(2, {
+      filter: filterQuery,
+      value: { to: value, from: undefined },
+    });
+  });
+});

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

@@ -0,0 +1,47 @@
+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 router = createRouter({
+  history: createWebHistory(),
+  routes: [{ path: '/', name: 'jest' }],
+});
+
+describe('Search Filter', () => {
+  const namespace = 'jest';
+  const filterQuery = 'jest';
+  const filterSchema = new BaseFilterSchema();
+  const store = createStore({
+    modules: {
+      [namespace]: {
+        namespaced: true,
+        state: {
+          [filterQuery]: filterSchema,
+        },
+      },
+    },
+  });
+
+  const mountOptions = {
+    global: { plugins: [store, router] },
+    props: {
+      namespace,
+      filterQuery,
+    },
+  };
+  it('renders a component', () => {
+    const wrapper = shallowMount(SearchFilter, mountOptions);
+    expect(wrapper.exists()).toBe(true);
+  });
+  it('initial restoreValue() triggers setValue() method', async () => {
+    const search = 'jest';
+    await router.replace({ query: { [filterQuery]: search } });
+    const setValueMock = jest.fn();
+    jest.spyOn(baseFilterMixin.methods, 'setValue').mockImplementationOnce(setValueMock);
+    shallowMount(SearchFilter, mountOptions);
+    expect(setValueMock).toHaveBeenCalledWith({ filter: filterQuery, value: search });
+  });
+});

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

@@ -0,0 +1,42 @@
+<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"
+    @input="setValue({ filter: filterQuery, value: $event })"
+    @reset="setValueToQuery({ value, filterQuery, storedProp: filterSchema.storedProp })"
+    @closed="setValueToQuery({ value, filterQuery, storedProp: filterSchema.storedProp })"
+  ></wt-select>
+</template>
+
+<script>
+import apiFilterMixin from '../mixins/apiFilterMixin';
+
+export default {
+  name: 'abstract-api-filter',
+  mixins: [apiFilterMixin],
+  props: {
+    filterQuery: {
+      type: String,
+      required: true,
+    },
+  },
+  methods: {
+    search(params) {
+      return this.filterSchema.search(params);
+    },
+    async fetchSelected(...args) {
+      const { items = [] } = await this.filterSchema.fetchSelected(...args);
+      return items;
+    },
+  },
+};
+</script>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,32 @@
+<template>
+  <wt-select
+    v-bind="$attrs"
+    :value="value"
+    :options="localizedOptions"
+    :label="label"
+    :track-by="filterSchema.storedProp"
+    :multiple="filterSchema.multiple"
+    @input="setValue({ filter: filterQuery, value: $event })"
+    @reset="setValueToQuery({ value, filterQuery, storedProp: filterSchema.storedProp })"
+    @closed="setValueToQuery({ value, filterQuery, storedProp: filterSchema.storedProp })"
+  ></wt-select>
+</template>
+
+<script>
+import enumFilterMixin from '../mixins/enumFilterMixin';
+
+export default {
+  name: 'abstract-enum-filter',
+  mixins: [enumFilterMixin],
+  props: {
+    filterQuery: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,40 @@
+<template>
+  <wt-datepicker
+    :value="filterSchema.value"
+    :label="label"
+    mode="datetime"
+    @input="handleChange"
+  ></wt-datepicker>
+</template>
+
+<script>
+import baseFilterMixin from '../mixins/baseFilterMixin/baseFilterMixin';
+
+export default {
+  name: 'filter-from',
+  mixins: [baseFilterMixin],
+  props: {
+    filterQuery: {
+      type: String,
+      required: true,
+    },
+    label: {
+      type: String,
+    },
+  },
+
+  methods: {
+    handleChange(value) {
+      this.setValue({ filter: this.filterQuery, value });
+      this.setValueToQuery({ filterQuery: this.filterQuery, value });
+    },
+    restoreValue(value) {
+      this.setValue({ filter: this.filterQuery, value: +value });
+    },
+  },
+};
+</script>
+
+<style scoped>
+
+</style>

package/src/modules/QueryFilters/components/filter-from-to.vue

@@ -0,0 +1,143 @@
+<template>
+  <div class="filter-from-to">
+    <wt-label>{{ label }}</wt-label>
+    <div class="filter-from-to__inputs-wrapper">
+      <div class="filter-from-to__input-wrapper">
+        <wt-label
+          class="filter-from-to__input-label"
+          for="filter-from-to-from"
+        >{{ $t('reusable.from') }}
+        </wt-label>
+        <wt-input
+          class="filter-from-to-input"
+          name="filter-from-to-from"
+          :value="filterSchema.value.from"
+          type="number"
+          :number-min="0"
+          :number-max="numberMax"
+          @input="setFrom"
+        ></wt-input>
+      </div>
+      <div class="filter-from-to__input-wrapper">
+        <wt-label
+          class="filter-from-to__input-label"
+          for="filter-from-to-to"
+        >{{ $t('reusable.to') }}
+        </wt-label>
+        <wt-input
+          class="filter-from-to-input"
+          name="filter-from-to-to"
+          :value="filterSchema.value.to"
+          type="number"
+          :number-min="0"
+          :number-max="numberMax"
+          @input="setTo"
+        ></wt-input>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import debounce from '../../../scripts/debounce';
+import baseFilterMixin from '../mixins/baseFilterMixin/baseFilterMixin';
+
+export default {
+  name: 'filter-from-to',
+  mixins: [baseFilterMixin],
+  props: {
+    filterQuery: {
+      type: String,
+      required: true,
+    },
+    label: {
+      type: String,
+    },
+    numberMax: {
+      type: Number,
+    },
+  },
+  methods: {
+    restore() {
+      this.restoreFrom();
+      this.restoreTo();
+    },
+
+    restoreFrom() {
+      const from = 0;
+      const queryValue = this.$route.query[`${this.filterQuery}From`];
+      // this.value.from = +queryValue || from;
+      const value = { from: +queryValue || from, to: this.value.to };
+      return this.setValue({ filter: this.filterQuery, value });
+    },
+
+    restoreTo() {
+      const to = null;
+      const queryValue = this.$route.query[`${this.filterQuery}To`];
+      // this.value.to = +queryValue || to;
+      const value = { from: this.value.from, to: +queryValue || to };
+      return this.setValue({ filter: this.filterQuery, value });
+    },
+
+    async setFrom(value) {
+      const filterValue = { from: value, to: this.value.to };
+      await this.setValue({ filter: this.filterQuery, value: filterValue });
+      await this.setValueToQuery({
+        filterQuery: `${this.filterQuery}From`,
+        value,
+      });
+    },
+
+    async setTo(value) {
+      const filterValue = { from: this.value.from, to: value };
+      await this.setValue({ filter: this.filterQuery, value: filterValue });
+      await this.setValueToQuery({
+        filterQuery: `${this.filterQuery}To`,
+        value,
+      });
+    },
+  },
+
+  created() {
+    this.setFrom = debounce(this.setFrom);
+    this.setTo = debounce(this.setTo);
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.filter-from-to {
+  &:hover > .wt-label {
+    color: var(--form-label--hover-color);
+  }
+
+  &:focus-within > .wt-label {
+    color: var(--form-label--active-color);
+  }
+}
+
+.filter-from-to__inputs-wrapper,
+.filter-from-to__input-wrapper {
+  display: flex;
+  align-items: center;
+}
+
+.filter-from-to__input-label {
+  @extend %typo-subtitle-1;
+  margin-right: 5px;
+}
+
+.filter-from-to__input-wrapper {
+  &:focus-within .wt-label {
+    color: var(--form-label--active-color)
+  }
+
+  .filter-from-to-input {
+    width: 70px;
+  }
+
+  &:first-child {
+    margin-right: 10px;
+  }
+}
+</style>

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

@@ -0,0 +1,33 @@
+<template>
+  <wt-search-bar
+    :value="filterSchema.value"
+    debounce
+    @input="setValue({ filter: filterQuery, value: $event })"
+    @search="setValueToQuery({ filterQuery, value: $event })"
+    :placeholder="$t('reusable.search')"
+  />
+</template>
+
+<script>
+import baseFilterMixin from '../mixins/baseFilterMixin/baseFilterMixin';
+
+export default {
+  name: 'filter-search',
+  mixins: [baseFilterMixin],
+  props: {
+    filterQuery: {
+      type: String,
+      default: 'search',
+    },
+  },
+  methods: {
+    restoreValue(value) {
+      this.setValue({ filter: this.filterQuery, value });
+    },
+  },
+};
+</script>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,101 @@
+<template>
+  <wt-table-column-select
+    :headers="headers"
+    :static-headers="staticHeaders"
+    @change="change"
+  ></wt-table-column-select>
+</template>
+
+<script>
+import baseFilterMixin from '../mixins/baseFilterMixin/baseFilterMixin';
+
+export default {
+  name: 'filter-table-fields',
+  mixins: [baseFilterMixin],
+  props: {
+    entity: {
+      type: String,
+      required: true,
+    },
+    headers: {
+      type: Array,
+      required: true,
+    },
+    staticHeaders: {
+      type: Array,
+    },
+  },
+
+  data: () => ({
+    storedProp: 'value',
+    filterQuery: 'fields',
+  }),
+
+  model: {
+    prop: 'headers',
+    event: 'change',
+  },
+
+  methods: {
+    change(headers) {
+      this.setValue(headers);
+    },
+
+    // overrides baseFilterMixin method
+    restore({ filterQuery }) {
+      const queryValue = this.getValueFromQuery({ filterQuery });
+      const storageValue = this.getFromLocalStorage({ filterQuery });
+      if (!queryValue && storageValue) {
+        this.setValueToQuery({
+          filterQuery,
+          value: storageValue,
+          storedProp: this.storedProp,
+        });
+      }
+      if (queryValue || storageValue) {
+        this.restoreValue(queryValue || storageValue);
+      }
+    },
+
+    restoreValue(value) {
+      const headers = this.headers.map((header) => ({
+        ...header,
+        show: !!value.includes(header.value),
+      }));
+      this.$emit('change', headers);
+    },
+
+    setValue(headers) {
+      const value = headers.filter((item) => item.show);
+      const params = {
+        filterQuery: this.filterQuery,
+        value,
+        storedProp: this.storedProp,
+      };
+      this.setValueToQuery(params);
+      this.setToLocalStorage(params);
+      this.$emit('change', headers);
+    },
+
+    getFromLocalStorage({ filterQuery }) {
+      const value = localStorage.getItem(`${this.entity}-${filterQuery}`);
+      return value ? value.split(',') : null;
+    },
+
+    // copy-pasted params from "setValueArrayToQuery method
+    // for easier future refactors, if method should be abstract
+    setToLocalStorage({
+                        filterQuery,
+                        value,
+                        storedProp = 'id',
+                      }) {
+      const filter = value.map((item) => item[storedProp]);
+      localStorage.setItem(`${this.entity}-${filterQuery}`, filter);
+    },
+  },
+};
+</script>
+
+<style scoped>
+
+</style>

package/src/modules/QueryFilters/mixins/__tests__/apiFilterMixin.spec.js

@@ -0,0 +1,48 @@
+import { shallowMount } from '@vue/test-utils';
+import { createRouter, createWebHistory } from 'vue-router';
+import ApiFilterSchema from '../../classes/ApiFilterSchema';
+import apiFilterMixin from '../apiFilterMixin';
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes: [{ path: '/', name: 'jest' }],
+});
+
+const team = ['1', '2'];
+const filterSchema = new ApiFilterSchema();
+
+describe('API filter mixin', () => {
+  const setValue = jest.fn();
+  const Component = {
+    render() {},
+    mixins: [apiFilterMixin],
+    data: () => ({
+      filterQuery: 'team',
+    }),
+    computed: {
+      filterSchema() { return filterSchema; },
+    },
+    methods: { setValue },
+  };
+
+  beforeEach(async () => {
+    setValue.mockClear();
+    await router.replace({ query: null });
+  });
+
+  it('Correctly sets value from $route query', async () => {
+    await router.replace({ query: { team } });
+    const wrapper = shallowMount(Component, {
+      global: { plugins: [router] },
+    });
+    expect(setValue).toHaveBeenCalledWith({ filter: 'team', value: [{ id: team[0] }, { id: team[1] }] });
+  });
+
+  it('Sets empty array value if $route query is empty', async () => {
+    const wrapper = shallowMount(Component, {
+      global: { plugins: [router] },
+      data: () => ({ filterQuery: 'queue' }),
+    });
+    expect(setValue).not.toHaveBeenCalled();
+  });
+});

package/src/modules/QueryFilters/mixins/__tests__/enumFilterMixin.spec.js

@@ -0,0 +1,68 @@
+import { shallowMount } from '@vue/test-utils';
+import { createRouter, createWebHistory } from 'vue-router';
+import enumFilterMixin from '../enumFilterMixin';
+
+const options = [{
+    name: 'Inbound',
+    value: 'inbound',
+  },
+  {
+    name: 'Outbound',
+    value: 'outbound',
+  }];
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes: [{ path: '/', name: 'jest' }],
+});
+
+describe('Enum filter mixin', () => {
+  const setValue = jest.fn();
+  const Component = {
+    render() {
+    },
+    mixins: [enumFilterMixin],
+    data: () => ({
+      filterQuery: 'direction',
+      storedProp: 'value',
+      options,
+    }),
+    methods: { setValue },
+  };
+
+  beforeEach(async () => {
+    setValue.mockClear();
+    await router.replace({ query: null });
+  });
+
+  it('Correctly sets value from $route query', async () => {
+    await router.replace({ query: { direction: options[0].value } });
+    const wrapper = shallowMount(Component, {
+      global: { plugins: [router] },
+    });
+    await wrapper.vm.$nextTick();
+    expect(setValue).toHaveBeenCalledWith({ filter: 'direction', value: options[0] });
+  });
+
+  it('Sets empty array value if $route query is empty', async () => {
+    shallowMount(Component, {
+      global: { plugins: [router] },
+    });
+    expect(setValue).not.toHaveBeenCalled();
+  });
+
+  it('Attaches locales to options, if they have "locale" key', async () => {
+    const options = [{
+      locale: 'jest.locale',
+    }];
+    const expectedOptions = [{
+      locale: options[0].locale,
+      name: options[0].locale,
+    }];
+    const wrapper = shallowMount(Component, {
+      global: { plugins: [router] },
+      data: () => ({ options }),
+    });
+    expect(wrapper.vm.localizedOptions).toEqual(expectedOptions);
+  });
+});

package/src/modules/QueryFilters/mixins/__tests__/paginationFilterMixin.spec.js

@@ -0,0 +1,79 @@
+import { shallowMount } from '@vue/test-utils';
+import { createRouter, createWebHistory } from 'vue-router';
+import paginationFilterMixin from '../paginationFilterMixin';
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes: [{ path: '/', name: 'jest' }],
+});
+
+const page = 2;
+const size = 20;
+
+describe('Pagination filter mixin', () => {
+  const setPage = jest.fn();
+  const setSize = jest.fn();
+  let wrapper;
+  const Component = {
+    render() {},
+    mixins: [paginationFilterMixin],
+    data: () => ({ page, size }),
+    methods: { setPage, setSize },
+  };
+
+  beforeEach(async () => {
+    setPage.mockClear();
+    setSize.mockClear();
+    await router.replace({ query: null });
+  });
+
+  it('Correctly sets value from $route query', async () => {
+    await router.replace({ query: { page, size } });
+    wrapper = shallowMount(Component, {
+      global: { plugins: [router] },
+    });
+    expect(setPage).toHaveBeenCalledWith(page);
+    expect(setSize).toHaveBeenCalledWith(size);
+  });
+
+  it('At "prev" page, changes query and emits event', async () => {
+    await router.replace({ query: { page, size } });
+    wrapper = shallowMount(Component, {
+      global: { plugins: [router] },
+    });
+    await wrapper.vm.prev();
+    expect(wrapper.emitted().input).toBeTruthy();
+    expect(wrapper.vm.$route.query.page).toBe(`${page - 1}`);
+  });
+
+  it('At "next" page, changes query and emits event', async () => {
+    await router.replace({ query: { page, size } });
+    wrapper = shallowMount(Component, {
+      global: { plugins: [router] },
+    });
+    await wrapper.vm.next();
+    expect(wrapper.emitted().input).toBeTruthy();
+    expect(wrapper.vm.$route.query.page).toBe(`${page + 1}`);
+  });
+
+  it('At "restPage" method, changes query and emits event', async () => {
+    await router.replace({ query: { page: 100, size } });
+    wrapper = shallowMount(Component, {
+      global: { plugins: [router] },
+    });
+    await wrapper.vm.resetPage();
+    expect(wrapper.emitted().input).toBeTruthy();
+    expect(wrapper.vm.$route.query.page).toBe('1');
+  });
+
+  it('At "sizeChange", changes query and emits event', async () => {
+    const newSize = 40;
+    await router.replace({ query: { page, size } });
+    wrapper = shallowMount(Component, {
+      global: { plugins: [router] },
+    });
+    await wrapper.vm.sizeChange(newSize);
+    expect(wrapper.emitted().input).toBeTruthy();
+    expect(wrapper.vm.$route.query.size).toBe(`${newSize}`);
+  });
+});