@webitel/ui-sdk 0.1.13 → 0.1.100

package/src/modules/CSVExport/CSVExport.js

@@ -0,0 +1,88 @@
+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) {
+    saveAs(csv, `${this.filename}.csv`);
+  }
+
+  async stringify(params = {}) {
+    let csv = 'data:text/csv;charset=utf-8,';
+    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.ids = 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;
+      }
+    },
+  },
+};

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

@@ -0,0 +1,7 @@
+const generateMediaURL = (id) => {
+  const token = localStorage.getItem('access-token');
+  const BASE_URL = process.env.VUE_APP_API_URL;
+  return `${BASE_URL}/storage/recordings/${id}/stream?access_token=${token}`;
+};
+
+export default generateMediaURL;

package/src/modules/QueryFilters/api/__tests__/defaults.spec.js

@@ -0,0 +1,18 @@
+import { listResponseHandler } from '../defaults';
+
+describe('filter api Defaults', () => {
+  it('listResponseHandler returns only lookups from response', () => {
+    const response = {
+      items: [
+        { name: 'jest1', id: 1, myField: '1' },
+        { name: 'jest2', id: 2, obj: [] },
+      ],
+      next: true,
+    };
+    const expectedResult = [
+      { name: 'jest1', id: 1 },
+      { name: 'jest2', id: 2 },
+    ];
+    expect(listResponseHandler(response)).toEqual(expectedResult);
+  });
+});

package/src/modules/QueryFilters/api/defaults.js

@@ -0,0 +1,16 @@
+const PAGE = 1;
+const SIZE = 20;
+const FIELDS = ['id', 'name'];
+
+export const defaultParams = {
+  page: PAGE,
+  size: SIZE,
+  fields: FIELDS,
+};
+
+export const listResponseHandler = (response) => (
+  response.items.map((item) => ({
+    name: item.name,
+    id: item.id,
+  }))
+);

package/src/modules/QueryFilters/classes/ApiFilterSchema.js

@@ -0,0 +1,32 @@
+import BaseFilterSchema from './BaseFilterSchema';
+
+export default class ApiFilterSchema extends BaseFilterSchema {
+  constructor(params = {}) {
+    const {
+      value = [],
+      defaultValue = [],
+    } = params;
+    super({ value, defaultValue });
+    const {
+      locale = { label: 'filter' },
+      storedProp = 'id',
+      multiple = true,
+      closeOnSelect = false,
+      API,
+    } = params;
+    this.locale = locale;
+    this.storedProp = storedProp;
+    this.multiple = multiple;
+    this.closeOnSelect = closeOnSelect;
+    this.API = API;
+  }
+
+  search(params) {
+    return this.API(params);
+  }
+
+  fetchSelected(idsList) {
+    const params = { size: idsList.length, ids: idsList };
+    return this.API(params);
+  }
+}

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

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

package/src/modules/QueryFilters/classes/EnumFilterSchema.js

@@ -0,0 +1,23 @@
+import BaseFilterSchema from './BaseFilterSchema';
+
+export default class EnumFilterSchema extends BaseFilterSchema {
+  constructor(params = {}) {
+    const {
+      value = [],
+      defaultValue = [],
+    } = params;
+    super({ value, defaultValue });
+    const {
+      locale = { label: 'filter' },
+      storedProp = 'value',
+      multiple = true,
+      closeOnSelect = false,
+      options = [],
+    } = params;
+    this.locale = locale;
+    this.storedProp = storedProp;
+    this.multiple = multiple;
+    this.closeOnSelect = closeOnSelect;
+    this.options = options;
+  }
+}

package/src/modules/QueryFilters/classes/__tests__/ApiFilterSchema.spec.js

@@ -0,0 +1,25 @@
+import ApiFilterSchema from '../ApiFilterSchema';
+
+describe('Api Filter Schema', () => {
+  const APIMock = jest.fn();
+  beforeEach(() => {
+    APIMock.mockClear();
+  });
+  it('creates default class without passed params', () => {
+    const filter = new ApiFilterSchema();
+    expect(filter).toBeTruthy();
+  });
+  it('calls API getList() method at search()', () => {
+    const params = { page: 1 };
+    const filter = new ApiFilterSchema({ API: APIMock });
+    filter.search(params);
+    expect(APIMock).toHaveBeenCalledWith(params);
+  });
+  it('calls API getList() method at fetchSelected()', () => {
+    const idsList = [1];
+    const expectedParams = { size: 1, ids: [1] };
+    const filter = new ApiFilterSchema({ API: APIMock });
+    filter.fetchSelected(idsList);
+    expect(APIMock).toHaveBeenCalledWith(expectedParams);
+  });
+});

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

@@ -0,0 +1,54 @@
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import Vuex from 'vuex';
+import VueRouter 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();
+
+describe('Abstract Api Filter', () => {
+  const namespace = 'jest';
+  const filterQuery = 'jest';
+  const filterSchema = new ApiFilterSchema({ locale: {} });
+  const searchMock = jest.fn();
+  const fetchSelectedMock = jest.fn();
+  jest.spyOn(filterSchema, 'search').mockImplementation(searchMock);
+  jest.spyOn(filterSchema, 'fetchSelected').mockImplementation(fetchSelectedMock);
+  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(AbstractApiFilter, mountOptions);
+    expect(wrapper.exists()).toBe(true);
+  });
+  it('calls filter schema API search()', () => {
+    const wrapper = shallowMount(AbstractApiFilter, mountOptions);
+    wrapper.vm.search();
+    expect(searchMock).toHaveBeenCalled();
+  });
+  it(' filter schema API fetchSelected()', () => {
+    const wrapper = shallowMount(AbstractApiFilter, mountOptions);
+    wrapper.vm.fetchSelected();
+    expect(fetchSelectedMock).toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,40 @@
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import Vuex from 'vuex';
+import VueRouter 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();
+
+describe('Abstract Enum Filter', () => {
+  const namespace = 'jest';
+  const filterQuery = 'jest';
+  const filterSchema = new EnumFilterSchema({ locale: {} });
+  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(AbstractEnumFilter, mountOptions);
+    expect(wrapper.exists()).toBe(true);
+  });
+});