@webitel/ui-sdk 0.1.2 → 0.1.3-vue3

package/src/mixins/dataFilterMixins/enumFilterMixin.js

@@ -0,0 +1,30 @@
+import baseFilterMixin from './baseFilterMixin/baseFilterMixin';
+
+export default {
+  mixins: [baseFilterMixin],
+
+  data: () => ({
+    value: [],
+    defaultValue: [],
+    trackBy: 'value',
+    storedProp: 'value',
+  }),
+
+  computed: {
+    options() {
+      return [];
+    },
+  },
+
+  methods: {
+    restoreValue(value) {
+      if (Array.isArray(value)) {
+        this.value = this.options
+        .filter((option) => value.some((value) => `${value}` === option[this.storedProp]));
+      } else {
+        this.value = this.options
+        .find((option) => option[this.storedProp] === value) || this.defaultValue;
+      }
+    },
+  },
+};

package/src/mixins/dataFilterMixins/paginationFilterMixin.js

@@ -0,0 +1,79 @@
+import baseFilterMixin from './baseFilterMixin/baseFilterMixin';
+
+export default {
+  mixins: [baseFilterMixin],
+
+  props: {
+    isNext: {
+      type: Boolean,
+      default: true,
+    },
+  },
+
+  data: () => ({
+    page: '1',
+    size: '10',
+  }),
+
+  watch: {
+    '$route.query': {
+      handler(newValue, oldValue) {
+        if (newValue.page !== oldValue.page
+          || newValue.size !== oldValue.size) {
+          this.restore();
+        }
+      },
+    },
+  },
+
+  computed: {
+    isPrev() {
+      return +this.page > 1;
+    },
+  },
+
+  methods: {
+    restore() {
+      this.restorePage();
+      this.restoreSize();
+    },
+
+    restorePage() {
+      const page = '1';
+      this.page = this.getValueFromQuery({ filterQuery: 'page' }) || page;
+    },
+
+    restoreSize() {
+      const size = '10';
+      this.size = this.getValueFromQuery({ filterQuery: 'size' }) || size;
+    },
+
+    next() {
+      this.$emit('input');
+      const value = `${+this.page + 1}`;
+      this.page = value;
+      this.setValueToQuery({
+        filterQuery: 'page',
+        value,
+      });
+    },
+
+    prev() {
+      this.$emit('input');
+      const value = `${+this.page - 1}`;
+      this.page = value;
+      this.setValueToQuery({
+        filterQuery: 'page',
+        value,
+      });
+    },
+
+    sizeChange(value) {
+      this.$emit('input');
+      this.setValueToQuery({
+        filterQuery: 'size',
+        value,
+      });
+    },
+  },
+};

package/src/mixins/dataFilterMixins/sortFilterMixin.js

@@ -0,0 +1,75 @@
+import baseFilterMixin from './baseFilterMixin/baseFilterMixin';
+
+const SortSymbols = Object.freeze({
+  ASC: 'asc',
+  DESC: 'desc',
+  NONE: null,
+});
+
+const getNextSortOrder = (sort) => {
+  switch (sort) {
+    case SortSymbols.NONE: return SortSymbols.ASC;
+    case SortSymbols.ASC: return SortSymbols.DESC;
+    case SortSymbols.DESC: return SortSymbols.NONE;
+    default: return SortSymbols.ASC;
+  }
+};
+
+const sortToQueryAdapter = (order) => {
+  switch (order) {
+    case SortSymbols.ASC: return '+';
+    case SortSymbols.DESC: return '-';
+    default: return '';
+  }
+};
+
+const queryToSortAdapter = (order) => {
+  switch (order) {
+    case '+': return SortSymbols.ASC;
+    case '-': return SortSymbols.DESC;
+    default: return SortSymbols.NONE;
+  }
+};
+
+const encodeSortQuery = ({ column, order }) => (`${sortToQueryAdapter(order)}${column.field}`);
+
+const decodeSortQuery = ({ value }) => {
+  const sort = queryToSortAdapter(value.slice(0, 1));
+  const sortedColumn = sort ? value.slice(1) : value;
+  return {
+    [sortedColumn]: sort,
+  };
+};
+
+export default {
+  mixins: [baseFilterMixin],
+  data: () => ({
+    filterQuery: 'sort',
+  }),
+  methods: {
+    sort(column) {
+      const order = getNextSortOrder(column.sort);
+      this.setValue({ column, order });
+    },
+
+    setValue({ column, order }) {
+      this.headers = this.headers.map((col) => ({
+        ...col,
+        sort: col === column ? order : null,
+      }));
+      const value = encodeSortQuery({ column, order });
+      this.setValueToQuery({
+        value,
+        filterQuery: this.filterQuery,
+      });
+    },
+
+    restoreValue(value) {
+      const sortedColumns = decodeSortQuery({ value });
+      this.headers = this.headers.map((header) => ({
+        ...header,
+        sort: sortedColumns[header.field] || null,
+      }));
+    },
+  },
+};

package/src/mixins/validationMixin/__tests__/validationMixin.spec.js

@@ -0,0 +1,47 @@
+import { shallowMount } from '@vue/test-utils';
+import validationMixin from '../validationMixin';
+
+describe('Validation mixin', () => {
+  let wrapper;
+  const Component = {
+    render() {
+    },
+    mixins: [validationMixin],
+  };
+
+  it('detects validation prop', () => {
+    wrapper = shallowMount(Component, {
+      propsData: {
+        v: {
+          $error: true,
+        },
+      },
+    });
+    expect(wrapper.vm.isValidation).toBeTruthy();
+    expect(wrapper.vm.invalid).toBeTruthy();
+  });
+
+  it('computes error message on validation error', () => {
+    wrapper = shallowMount(Component, {
+      propsData: {
+        v: {
+          $error: true,
+          email: false,
+        },
+      },
+    });
+    expect(wrapper.vm.validationText).toBe('validation.email');
+  });
+
+  it('prioritizes error messages', () => {
+    wrapper = shallowMount(Component, {
+      propsData: {
+        v: {
+          $error: true,
+          required: false,
+        },
+      },
+    });
+    expect(wrapper.vm.validationText).toBe('validation.required');
+  });
+});

package/src/mixins/validationMixin/validationMixin.js

@@ -4,6 +4,10 @@ export default {
     v: {
       type: Object,
     },
+    customValidators: {
+      type: Array,
+      default: () => [],
+    },
   },
   computed: {
     isValidation() {
@@ -13,18 +17,25 @@ export default {
       return this.isValidation && this.v.$error;
     },
     validationText() {
+      let validationText = '';
       if (this.isValidation && this.invalid) {
-        if (this.v.required === false) {
-          return this.$t('validation.required');
-        }
-        if (this.v.numeric === false) {
-          return this.$t('validation.numeric');
-        }
-        if (this.v.email === false) {
-          return this.$t('validation.email');
-        }
+        if (this.v.required === false) validationText = this.$t('validation.required');
+        else if (this.v.numeric === false) validationText = this.$t('validation.numeric');
+        else if (this.v.email === false) validationText = this.$t('validation.email');
+        else if (this.v.gatewayHostValidator === false) validationText = this.$t('validation.gatewayHostValidator');
+        else if (this.v.ipValidator === false) validationText = this.$t('validation.ipValidator');
+        else if (this.v.macValidator === false) validationText = this.$t('validation.macValidator');
+        else if (this.v.minValue === false) validationText = `${this.$t('validation.minValue')} ${this.v.$params.minValue.min}`;
+        else if (this.v.maxValue === false) validationText = `${this.$t('validation.maxValue')} ${this.v.$params.maxValue.max}`;
+        else if (this.v.sipAccountValidator === false) validationText = this.$t('validation.sipAccountValidator');
+        else if (this.v.minLength === false) validationText = `${this.$t('validation.minLength')} ${this.v.$params.minLength.min}`;
+        else if (this.v.url === false) validationText = `${this.$t('validation.url')}`;
+      }
+      // eslint-disable-next-line no-restricted-syntax
+      for (const { name, text } of this.customValidators) {
+        if (this.v[name] === false) validationText = text;
       }
-      return '';
+      return validationText;
     },
   },
 };

package/src/modules/CSVExport/CSVExport.js

@@ -0,0 +1,89 @@
+import { saveAs } from 'file-saver';
+import stringify from 'csv-stringify/lib/sync';
+import { objSnakeToCamel } from '../../scripts/caseConverters';
+
+const cast = {
+  object: (separator) => {
+    const cast = (object) => {
+      if (Array.isArray(object)) {
+        return object.map((item) => cast(item))
+          .join(separator);
+      }
+      return object.name || JSON.stringify(object);
+    };
+    return cast;
+  },
+};
+
+export default class CSVExport {
+  filename = 'export';
+
+  fetchMethod = null;
+
+  downloadProgress = { count: 0 };
+
+  constructor(fetchMethod, { filename }) {
+    if (!fetchMethod) throw new Error('fetch method should be specified!');
+    this.fetchMethod = fetchMethod;
+    this.filename = filename;
+  }
+
+  static _getStringifyOptions() {
+    const defaultOptions = {
+      header: true,
+      delimiter: ',',
+    };
+    const localStorageOptions = JSON.parse(localStorage.getItem('csv-export-options')) || {};
+    return {
+      ...defaultOptions,
+      ...localStorageOptions,
+      cast: {
+        object: cast.object(localStorageOptions.valueDelimiter || ' | '),
+      },
+    };
+  }
+
+  resetProgress() {
+    this.downloadProgress = { count: 0 };
+    this.zippingProgress = { percent: 0 };
+  }
+
+  save(csv) {
+    const blob = new Blob([csv], { type: 'data:text/csv;charset=utf-8' });
+    saveAs(blob, `${this.filename}.csv`);
+  }
+
+  async stringify(params = {}) {
+    let csv = '';
+    let isNext = false;
+    let columns = params?.fields ? objSnakeToCamel(params?.fields) : [];
+    let page = 1;
+
+    do {
+      // eslint-disable-next-line no-await-in-loop
+      const { items, next } = await this.fetchMethod({
+        ...params,
+        page,
+      });
+      if (!columns.length && items.length) columns = Object.keys(items[0]);
+
+      const options = {
+        ...CSVExport._getStringifyOptions(),
+        columns,
+      };
+
+      csv += stringify(items, options);
+      this.downloadProgress.count += items.length;
+
+      isNext = next;
+      page += 1;
+    } while (isNext);
+    return csv;
+  }
+
+  async export(params) {
+    const csv = await this.stringify(params);
+    this.save(csv);
+    this.resetProgress();
+  }
+}

package/src/modules/CSVExport/__tests__/CSVExport.spec.js

@@ -0,0 +1,63 @@
+import { shallowMount } from '@vue/test-utils';
+import * as fileSaver from 'file-saver';
+import stringify from 'csv-stringify/lib/sync';
+import CSVExportMixin from '../mixins/exportCSVMixin';
+import '../../../../tests/mocks/localStorageMock';
+
+jest.mock('csv-stringify/lib/sync');
+jest.mock('file-saver');
+const dataList = [
+  { _isSelected: true, id: 1 },
+  { _isSelected: true, id: 2 },
+  { _isSelected: true, id: 3 },
+];
+
+describe('CSV Export', () => {
+  let wrapper;
+  const Component = {
+    render() {
+    },
+    mixins: [CSVExportMixin],
+    created() {
+      this.initCSVExport(() => ({ items: dataList }), { filename: 'jest' });
+    },
+    data: () => ({ dataList }),
+  };
+
+  it('goes through all important steps to generate and save csv', async () => {
+    wrapper = shallowMount(Component);
+    await wrapper.vm.exportCSV();
+    expect(stringify).toHaveBeenCalled();
+    expect(fileSaver.saveAs).toHaveBeenCalled();
+  });
+
+  it('mixin correctly computes empty export progress from class data', () => {
+    wrapper = shallowMount(Component);
+    expect(wrapper.vm.CSVDownloadProgress).toBe(0);
+  });
+
+  it('computes selected ids and isAnySelected', async () => {
+    wrapper = shallowMount(Component);
+    const selectedIds = [1, 2, 3];
+    expect(wrapper.vm.selectedIds).toEqual(selectedIds);
+    expect(wrapper.vm.isAnySelected).toBe(true);
+  });
+
+  it('correctly generates csv headers from passed fields', async () => {
+    wrapper = shallowMount(Component);
+    const params = { fields: ['id', 'col1', 'columnTwo'] };
+    await wrapper.vm.exportCSV(params);
+    expect(stringify.mock.calls.pop()[1].columns).toEqual(params.fields); // last mock call, 2nd param, columns obj param
+  });
+
+  it('config csv export from localStorage', async () => {
+    wrapper = shallowMount(Component);
+    const csvExportOptions = {
+      header: false,
+      delimiter: ';',
+    };
+    localStorage.setItem('csv-export-options', JSON.stringify(csvExportOptions));
+    await wrapper.vm.exportCSV();
+    expect(stringify.mock.calls.pop()[1]).toMatchObject(csvExportOptions);
+  });
+});

package/src/modules/CSVExport/mixins/exportCSVMixin.js

@@ -0,0 +1,46 @@
+import CSVExport from '../CSVExport';
+
+export default {
+  data: () => ({
+    CSVExport: null,
+  }),
+
+  computed: {
+    isCSVLoading() {
+      return !!this.CSVDownloadProgress;
+    },
+
+    CSVDownloadProgress() {
+      return this.CSVExport ? this.CSVExport.downloadProgress.count : 0;
+    },
+    selectedIds() {
+      return this.dataList
+        .filter((item) => item._isSelected)
+        .map((item) => item.id);
+    },
+    isAnySelected() {
+      return !!this.selectedIds.length;
+    },
+  },
+
+  methods: {
+    initCSVExport(fetchMethod, options) {
+      this.CSVExport = new CSVExport(fetchMethod, options);
+    },
+
+    async exportCSV(exportParams) {
+      const routeQuery = this.$route?.query;
+      const params = {
+        ...exportParams || routeQuery,
+        size: 5000,
+      };
+      if (this.isAnySelected) params.id = this.selectedIds;
+
+      try {
+        await this.CSVExport.export(params);
+      } catch (err) {
+        throw err;
+      };
+    },
+  },
+};

package/src/modules/FilesExport/FilesExport.js

@@ -0,0 +1,110 @@
+import jszipUtils from 'jszip-utils';
+import { saveAs } from 'file-saver';
+import JSZip from 'jszip';
+import generateMediaURL from './scripts/generateMediaURL';
+
+/* eslint-disable no-await-in-loop, no-restricted-syntax */
+export default class FilesExport {
+  filename = 'files';
+
+  fetchMethod = null;
+
+  isLoading = false;
+
+  downloadProgress = { count: 0 };
+
+  zippingProgress = { percent: 0 };
+
+  filesURL = generateMediaURL;
+
+  constructor({ fetchMethod, filename, filesURL }) {
+    if (fetchMethod) this.fetchMethod = fetchMethod;
+    if (filename) this.filename = filename;
+    if (filesURL) this.filesURL = filesURL;
+  }
+
+  _fetchFileBinary(fileId) {
+    const url = this.filesURL(fileId);
+    return new Promise((resolve, reject) => (
+      jszipUtils.getBinaryContent(url, (err, data) => {
+        if (err) {
+          reject(err);
+        } else {
+          resolve(data);
+        }
+      })));
+  }
+
+  resetProgress() {
+    this.downloadProgress = { count: 0 };
+    this.zippingProgress = { percent: 0 };
+  }
+
+  async _addFilesToZip(items, zip) {
+    for (const item of items) {
+      if (item.files) {
+        await this._addFilesToZip(item.files, zip);
+      } else {
+        const binary = await this._fetchFileBinary(item.id);
+        const ext = item.mimeType.split('/').pop();
+        zip.file(`${item.name}.${ext}`, binary);
+        this.downloadProgress.count += 1;
+      }
+    }
+  }
+
+  async _generateZip(zip) {
+    try {
+      return await zip.generateAsync({ type: 'blob' }, (progress) => {
+        this.zippingProgress = progress;
+      });
+    } catch (err) {
+      throw new Error('Failed to generate zip file');
+    }
+  }
+
+  async _saveZip(file) {
+    try {
+      saveAs(file, `${this.filename}.zip`);
+    } catch (err) {
+      throw new Error('Failed to save a file');
+    }
+  }
+
+  async _fetchAndZip(zip, requestParams) {
+    const params = {
+      from: 0,
+      size: 5000,
+      fields: ['files'],
+      ...requestParams,
+    };
+
+    let page = 1;
+    let isNext = false;
+    do {
+      const { items, next } = await this.fetchMethod({ ...params, page });
+      await this._addFilesToZip(items, zip);
+
+      isNext = next;
+      page += 1;
+    } while (isNext);
+  }
+
+  async exportFiles(files, { reqParams }) {
+    try {
+      this.isLoading = true;
+      const zip = new JSZip();
+      if (files && files.length) await this._addFilesToZip(files, zip);
+      else {
+        await this._fetchAndZip(zip, reqParams);
+      }
+      const file = await this._generateZip(zip);
+      await this._saveZip(file);
+      this.resetProgress();
+    } catch (err) {
+      throw err;
+    } finally {
+      this.isLoading = false;
+    }
+  }
+}

package/src/modules/FilesExport/__tests__/FilesExport.spec.js

@@ -0,0 +1,66 @@
+import { shallowMount } from '@vue/test-utils';
+import * as fileSaver from 'file-saver';
+import jszip from 'jszip';
+import jszipUtils from 'jszip-utils';
+import FilesExportMixin from '../mixins/exportFilesMixin';
+import '../../../../tests/mocks/localStorageMock';
+
+jest.mock('jszip');
+jest.mock('jszip-utils');
+jest.mock('file-saver');
+const dataList = [
+  { files: [{ name: 'jest', id: '1', mimeType: 'mime/type' }] },
+];
+const selectedDataList = [
+  { _isSelected: true, files: [{ name: 'jest1', id: '1', mimeType: 'mime/type' }] },
+  { _isSelected: true, files: [{ name: 'jest2', id: '2', mimeType: 'mime/type' }] },
+];
+
+describe('File Export', () => {
+  jszipUtils.getBinaryContent.mockImplementation((url, callback) => callback(null, {}));
+  let wrapper;
+  const Component = {
+    render() {
+    },
+    mixins: [FilesExportMixin],
+    created() {
+      this.initFilesExport({ fetchMethod: () => ({ items: dataList }), filename: 'jest' });
+    },
+    data: () => ({ dataList }),
+  };
+
+  it('goes through all important steps to save file', async () => {
+    wrapper = shallowMount(Component);
+    await wrapper.vm.exportFiles();
+    expect(jszip).toHaveBeenCalled();
+    expect(jszipUtils.getBinaryContent).toHaveBeenCalled();
+    expect(fileSaver.saveAs).toHaveBeenCalled();
+  });
+
+  it('mixin correctly computes empty export progress from class data', () => {
+    wrapper = shallowMount(Component);
+    expect(wrapper.vm.filesDownloadProgress).toBe(0);
+    expect(wrapper.vm.filesZippingProgress).toBe(0);
+  });
+
+  it('mixin correctly computes selectedFiles()', () => {
+    wrapper = shallowMount(Component, {
+      computed: { selectedItems() { return selectedDataList; } },
+    });
+    expect(wrapper.vm.getSelectedFiles())
+      .toEqual([...selectedDataList[0].files, ...selectedDataList[1].files]);
+  });
+
+  it('mixin catches export error and resets isFilesLoading on export error', async () => {
+    wrapper = shallowMount(Component);
+    wrapper.vm.FilesExport = null; // like FilesExport wasn't initialized
+    // wrapper.vm.FilesExport.exportFiles = function () { throw new Error(); };
+    // await expect(async () => Promise.reject(await wrapper.vm.exportFiles())).rejects.toThrowError();
+    try {
+      await wrapper.vm.exportFiles();
+    } catch (err) {
+      expect(err).toBeTruthy();
+      expect(wrapper.vm.isFilesLoading).toBeFalsy();
+    }
+  });
+});

package/src/modules/FilesExport/mixins/exportFilesMixin.js

@@ -0,0 +1,46 @@
+import FilesExport from '../FilesExport';
+
+export default {
+  data: () => ({
+    FilesExport: null,
+  }),
+
+  computed: {
+    isFilesLoading() {
+      return this.FilesExport?.isLoading;
+    },
+
+    filesDownloadProgress() {
+      return this.FilesExport ? this.FilesExport.downloadProgress.count : 0;
+    },
+
+    filesZippingProgress() {
+      return this.FilesExport ? Math.floor(this.FilesExport.zippingProgress.percent) : 0;
+    },
+  },
+
+  methods: {
+    initFilesExport(options) {
+      this.FilesExport = new FilesExport(options);
+    },
+
+    getSelectedFiles() {
+      let files = null;
+      if (this.selectedItems?.length) {
+        files = this.selectedItems.reduce((filesAccumulator, next) => (
+          next.files ? [...filesAccumulator, ...next.files] : filesAccumulator), []);
+      }
+      return files;
+    },
+
+    async exportFiles(files, reqParams = {}) {
+      if (!this.FilesExport) throw new Error('FilesExport is not initialized');
+      const exportFiles = files || this.getSelectedFiles();
+      try {
+        await this.FilesExport.exportFiles(exportFiles, { reqParams });
+      } catch (err) {
+        throw err;
+      }
+    },
+  },
+};