@webitel/ui-sdk 0.1.0 → 0.1.1-vite

package/src/modules/DeleteConfirmationPopup/components/delete-confirmation-popup.vue

@@ -0,0 +1,87 @@
+<template>
+  <wt-popup
+    class="delete-confirmation-popup"
+    min-width="480"
+    @close="close"
+  >
+    <template v-slot:title>{{ $t('webitelUI.deleteConfirmationPopup.title') }}</template>
+    <template v-slot:main>
+      <p>
+        {{ deleteMessage }}
+        {{ $t('webitelUI.deleteConfirmationPopup.undoneActionAlert') }}
+      </p>
+    </template>
+    <template v-slot:actions>
+      <wt-button
+        color="secondary"
+        :disabled="isDeleting"
+        @click="close"
+      >{{ $t('reusable.cancel') }}
+      </wt-button>
+      <wt-button
+        color="danger"
+        :loading="isDeleting"
+        @click="confirm"
+      >{{ $t('reusable.delete') }}
+      </wt-button>
+    </template>
+  </wt-popup>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const props = defineProps({
+  deleteCount: {
+    type: Number,
+    required: true,
+  },
+  callback: {
+    type: Function,
+    required: true,
+  },
+});
+
+const emit = defineEmits([
+  'close',
+]);
+
+const { t } = useI18n();
+
+const isDeleting = ref(false);
+
+const deleteMessage = computed(() => {
+  if (props.deleteCount === 0) {
+    return t(
+      'webitelUI.deleteConfirmationPopup.askingAlert',
+      2,
+      null,
+      { count: t('webitelUI.deleteConfirmationPopup.deleteAll') },
+    );
+  }
+  return t(
+    'webitelUI.deleteConfirmationPopup.askingAlert',
+    { count: props.deleteCount },
+    null,
+  );
+});
+
+function close() {
+  emit('close');
+}
+
+async function confirm() {
+  try {
+    isDeleting.value = true;
+    await props.callback();
+    close();
+  } finally {
+    isDeleting.value = false;
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

package/src/modules/DeleteConfirmationPopup/composables/useDeleteConfirmationPopup.js

@@ -0,0 +1,28 @@
+import { ref } from 'vue';
+
+// eslint-disable-next-line import/prefer-default-export
+export const useDeleteConfirmationPopup = () => {
+  const isVisible = ref(false);
+  const deleteCount = ref(null);
+  const deleteCallback = ref(null);
+
+  function askDeleteConfirmation({ deleted, callback }) {
+    if (Array.isArray(deleted)) deleteCount.value = deleted.length;
+    else deleteCount.value = 1;
+    isVisible.value = true;
+    deleteCallback.value = callback;
+  }
+
+  function closeDelete() {
+    isVisible.value = false;
+  }
+
+  return {
+    isVisible,
+    deleteCount,
+    deleteCallback,
+
+    askDeleteConfirmation,
+    closeDelete,
+  };
+};

package/src/modules/FilesExport/FilesExport.js

@@ -0,0 +1,113 @@
+import jszipUtils from 'jszip-utils';
+import { saveAs } from 'file-saver';
+import JSZip from 'jszip';
+import path from 'path';
+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();
+        // itemName needed to remove extension from item.name https://stackoverflow.com/a/31615711
+        const itemName = path.parse(item.name).name;
+        zip.file(`${itemName}.${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 || import.meta.env.VITE_API_URL;
+  return `${BASE_URL}/storage/recordings/${id}/stream?access_token=${token}`;
+};
+
+export default generateMediaURL;

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

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

package/src/modules/Filters/components/filter-pagination.vue

@@ -0,0 +1,61 @@
+<template>
+  <wt-pagination
+    :next="isNext"
+    :prev="page > 1"
+    :size="localSize"
+    debounce
+    @input="localSize = $event"
+    @change="setSize(localSize)"
+    @next="setPage(+page + 1)"
+    @prev="setPage(page - 1)"
+  ></wt-pagination>
+</template>
+
+<script setup>
+import { computed, ref, watch } from 'vue';
+import { useStore } from 'vuex';
+import getNamespacedState from '../../../store/helpers/getNamespacedState';
+
+const props = defineProps({
+  namespace: {
+    type: String,
+    required: true,
+  },
+  isNext: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const pageFilterName = 'page';
+const sizeFilterName = 'size';
+
+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);
+
+function setFilter(payload) {
+  return store.dispatch(`${props.namespace}/SET_FILTER`, payload);
+}
+
+function setPage(value) {
+  return setFilter({ value, filter: pageFilterName });
+}
+
+function setSize(value) {
+  if (value === size.value) return;
+  // eslint-disable-next-line consistent-return
+  return setFilter({ value, filter: sizeFilterName });
+}
+
+watch(size, () => {
+  localSize.value = size.value;
+}, { immediate: true });
+</script>
+
+<style lang="scss" scoped>
+
+</style>

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

@@ -0,0 +1,61 @@
+<template>
+  <wt-table-column-select
+    :headers="headers"
+    :static-headers="staticHeaders"
+    @change="handleChange"
+  ></wt-table-column-select>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { useStore } from 'vuex';
+import getNamespacedState from '../../../store/helpers/getNamespacedState';
+
+const props = defineProps({
+  namespace: {
+    type: String,
+    required: true,
+  },
+  headers: {
+    type: Array,
+    required: true,
+  },
+  staticHeaders: {
+    type: Array,
+  },
+});
+
+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,
+    value,
+  };
+  setToLocalStorage(params);
+  setValue(params);
+  emit('change', headers);
+}
+</script>
+
+<style scoped>
+
+</style>

package/src/modules/Filters/composables/useTableFilters.js

@@ -0,0 +1,17 @@
+import { useStore } from 'vuex';
+
+export const useTableFilters = (namespace) => {
+  const store = useStore();
+
+  const filtersNamespace = `${namespace}/filters`;
+
+  function restoreFilters(payload) {
+    return store.dispatch(`${filtersNamespace}/RESTORE_FILTERS`, payload);
+  }
+
+  restoreFilters();
+
+  return {
+    filtersNamespace,
+  };
+};

package/src/modules/Filters/restores/filterFieldsRestore.js

@@ -0,0 +1,9 @@
+const restore = (localStorageKey) => ({ query }) => {
+  if (!query) {
+    const value = localStorage.getItem(localStorageKey);
+    return value ? value.split(',') : null;
+  }
+  return query;
+};
+
+export default restore;

package/src/modules/Filters/restores/readme.md

@@ -0,0 +1 @@
+"restore" functions for filters

package/src/modules/Filters/store/FiltersStoreModule.js

@@ -0,0 +1,181 @@
+import deepEqual from 'deep-equal';
+import debounce from '../../../scripts/debounce';
+import isEmpty from '../../../scripts/isEmpty';
+import BaseStoreModule from '../../../store/BaseStoreModules/BaseStoreModule';
+
+const SET_FILTER_SOURCE = Object.freeze({
+  RESTORE: 'restore', // when filter is restored at session start
+  DEFAULT: 'default',
+});
+
+export default class FiltersStoreModule extends BaseStoreModule {
+  getters = {
+    ROUTER: () => console.error('setup ROUTER getter for filters store'),
+    TABLE_NAMESPACE: () => console.error('setup TABLE_NAMESPACE getter for filters store'),
+
+    // get value of specific filter
+    GET_FILTER: (state) => (filter) => {
+      if (!state[filter]) return null;
+      const { value, storedProp, multiple } = state[filter];
+      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
+    },
+
+    // get all filters values
+    GET_FILTERS: (state, getters) => Object.keys(state)
+    .reduce((filters, filterKey) => {
+      const filterValue = getters.GET_FILTER(filterKey);
+      return isEmpty(filterValue) ? filters : {
+        ...filters,
+        [filterKey]: filterValue,
+      };
+    }, {}),
+
+    // get value of filter from query string by query key
+    GET_VALUE_FROM_QUERY: (state, getters) => ({ filterQuery }) => (
+      getters.ROUTER.currentRoute.value.query[filterQuery]
+    ),
+  };
+
+  actions = {
+    SET_FILTER: async (context, {
+      filter,
+      value,
+      source = SET_FILTER_SOURCE.DEFAULT,
+      silent = false, // if true, don't call ON_FILTER_SET event
+    }) => {
+      const { multiple, defaultValue } = context.state[filter];
+
+      let newValue = value;
+
+      if (value) {
+        if (multiple && !Array.isArray(value)) newValue = [value];
+      } else if (value === null || value === undefined) {
+        newValue = defaultValue;
+      }
+
+      await context.dispatch('SET_VALUE_TO_QUERY', {
+        filterQuery: filter,
+        value,
+        storedProp: context.state[filter].storedProp,
+      });
+      context.commit('SET_FILTER', { filter, value: newValue });
+
+      if (source !== SET_FILTER_SOURCE.RESTORE && filter !== 'page') {
+        await context.dispatch('SET_FILTER', {
+          filter: 'page',
+          value: 1,
+          silent: true,
+        });
+      }
+
+      if (!silent) await context.dispatch('ON_FILTER_SET', { filter, value });
+    },
+    SET_VALUE_TO_QUERY: async (
+      context,
+      { filterQuery, value, storedProp = 'id' },
+    ) => {
+      let newValue = '';
+      if (Array.isArray(value)) {
+        if (value.length && typeof value[0] !== 'object') {
+          newValue = value;
+        } else {
+          newValue = value.map((item) => item[storedProp]);
+        }
+      } else if (typeof value === 'object' && value !== null) {
+        newValue = value[storedProp];
+      } else {
+        newValue = value;
+      }
+
+      return context.dispatch('CHANGE_ROUTE_QUERY', ({
+        value: newValue,
+        filterQuery,
+      }));
+    },
+
+    CHANGE_ROUTE_QUERY: (context, { value, filterQuery }) => {
+      if (deepEqual(context.getters.GET_VALUE_FROM_QUERY({ filterQuery }), value)) return;
+      const query = { ...context.getters.ROUTER.currentRoute.value.query };
+      query[filterQuery] = value;
+      // eslint-disable-next-line consistent-return
+      return context.getters.ROUTER.replace({
+        name: context.getters.ROUTER.currentRoute.value.name,
+        query,
+      });
+    },
+
+    RESTORE_FILTER: async (context, { filter }) => {
+      const query = context.getters.GET_VALUE_FROM_QUERY({ filterQuery: filter });
+      // note: restore fn may still return value even if there's no query value
+      // from localStorage, for instance
+      const value = context.state[filter].restore
+        ? context.state[filter].restore({ query })
+        : query;
+      if (value) {
+        if (filter
+          === 'sort') await context.dispatch('RESTORE_SORT', { value });
+        else if (filter
+          === 'fields') await context.dispatch('RESTORE_FIELDS', { value });
+        await context.dispatch('SET_FILTER', ({
+          filter,
+          value,
+          source: SET_FILTER_SOURCE.RESTORE,
+        }));
+        return true;
+      }
+      return false;
+    },
+
+    RESTORE_FILTERS: async (context) => {
+      const restores = [];
+      for (const filter of Object.keys(context.state)) {
+        // collect restores in order to check if there were actually any restores
+        // empty restore returns "false"
+        const result = await context.dispatch('RESTORE_FILTER', { filter });
+        restores.push(result);
+      }
+
+      // if no filters to restore, call LOAD_LIST manually
+      if (restores.every((restore) => restore === false)) {
+        context.dispatch('LOAD_DATA_LIST');
+      }
+    },
+
+    RESET_FILTERS: (context) => Promise.allSettled(Object.keys(context.state)
+    .map((filter) => {
+      return context.dispatch('SET_FILTER', {
+        filter,
+        value: context.state[filter].defaultValue,
+      });
+    })),
+
+    ON_FILTER_SET: (
+      context,
+      { filter, value },
+    ) => context.dispatch('LOAD_DATA_LIST'),
+
+    LOAD_DATA_LIST: (context) => context.dispatch(
+      `${context.getters.TABLE_NAMESPACE}/LOAD_DATA_LIST`,
+      { filters: context.getters.GET_FILTERS },
+      { root: true },
+    ),
+    RESTORE_SORT: (context, { value }) => context.dispatch(
+      `${context.getters.TABLE_NAMESPACE}/RESTORE_SORT_FROM_FILTER`,
+      { value },
+      { root: true },
+    ),
+    RESTORE_FIELDS: (context, { value }) => context.dispatch(
+      `${context.getters.TABLE_NAMESPACE}/RESTORE_FIELDS_FROM_FILTER`,
+      { value },
+      { root: true },
+    ),
+  };
+
+  mutations = {
+    SET_FILTER: (state, { filter, value }) => {
+      state[filter].value = value;
+    },
+  };
+}