@webitel/ui-sdk 2.0.2 → 2.0.3-1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "2.0.2",
+  "version": "2.0.3-1",
   "private": false,
   "scripts": {
     "serve-lib": "vue-cli-service serve",

package/src/locale/en/en.js

@@ -33,6 +33,8 @@ export default {
       ru: 'Русский',
       ua: 'Українська',
     },
+    from: 'From',
+    to: 'To',
   },
   // date-related texts
   date: {

package/src/locale/ru/ru.js

@@ -33,6 +33,8 @@ export default {
       ru: 'Русский',
       ua: 'Українська',
     },
+    from: 'От',
+    to: 'До',
   },
   // date-related texts
   date: {

package/src/locale/ua/ua.js

@@ -33,6 +33,8 @@ export default {
       ru: 'Русский',
       ua: 'Українська',
     },
+    from: 'Від',
+    to: 'До',
   },
   // date-related texts
   date: {

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

@@ -0,0 +1,49 @@
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import Vuex from 'vuex';
+import VueRouter 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();
+
+describe('DatetimeFilter Filter', () => {
+  const namespace = 'jest';
+  const filterQuery = 'jest';
+  const filterSchema = new BaseFilterSchema();
+  const store = new Vuex.Store({
+    modules: {
+      [namespace]: {
+        namespaced: true,
+        state: {
+          [filterQuery]: filterSchema,
+        },
+      },
+    },
+  });
+
+  const mountOptions = {
+    localVue,
+    store,
+    router,
+    propsData: {
+      namespace,
+      filterQuery,
+    },
+  };
+  it('renders a component', () => {
+    const wrapper = shallowMount(DatetimeFilter, mountOptions);
+    expect(wrapper.exists()).toBe(true);
+  });
+  it('initial restoreValue() triggers setValue() method', async () => {
+    const value = Date.now();
+    await router.replace({ query: { [filterQuery]: value } });
+    const setValueMock = jest.fn();
+    jest.spyOn(baseFilterMixin.methods, 'setValue').mockImplementationOnce(setValueMock);
+    shallowMount(DatetimeFilter, mountOptions);
+    expect(setValueMock).toHaveBeenCalledWith({ filter: filterQuery, value });
+  });
+});

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

@@ -0,0 +1,65 @@
+import { createLocalVue, shallowMount } from '@vue/test-utils';
+import VueRouter from 'vue-router';
+import Vuex from 'vuex';
+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();
+
+describe('FilterFromTo Filter', () => {
+  const namespace = 'jest';
+  const filterQuery = 'jest';
+  const filterSchema = new BaseFilterSchema();
+  const store = new Vuex.Store({
+    modules: {
+      [namespace]: {
+        namespaced: true,
+        state: {
+          [filterQuery]: filterSchema,
+        },
+      },
+    },
+  });
+
+  const mountOptions = {
+    localVue,
+    store,
+    router,
+    propsData: {
+      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')
+    .mockImplementationOnce(setValueMock);
+    shallowMount(FilterFromTo, mountOptions);
+    expect(setValueMock).toHaveBeenCalledWith({
+      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')
+  //   .mockImplementationOnce(setValueMock);
+  //   shallowMount(FilterFromTo, mountOptions);
+  //   expect(setValueMock).toHaveBeenCalledWith({
+  //     filter: filterQuery,
+  //     value: { to: value, from: 0 },
+  //   });
+  // });
+});

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

@@ -0,0 +1,39 @@
+<template>
+  <wt-datetimepicker
+    :value="filterSchema.value"
+    :label="label"
+    @change="handleChange"
+  ></wt-datetimepicker>
+</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,142 @@
+<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"
+          @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"
+          @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,
+    },
+  },
+  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 };
+      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 };
+      console.info(value);
+      this.setValue({ filter: this.filterQuery, value });
+    },
+
+    setFrom(value) {
+      this.setValueToQuery({
+        filterQuery: `${this.filterQuery}From`,
+        value,
+      });
+      this.restoreFrom();
+    },
+
+    setTo(value) {
+      this.setValueToQuery({
+        filterQuery: `${this.filterQuery}To`,
+        value,
+      });
+      this.restoreTo();
+    },
+  },
+
+  created() {
+    this.setFrom = debounce(this.setFrom);
+    this.setTo = debounce(this.setTo);
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.filter-from-to {
+
+  & > .wt-label {
+    margin-bottom: 10px;
+  }
+
+  &: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>