@webitel/ui-sdk 24.6.40 → 24.6.43

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "24.6.40",
+  "version": "24.6.43",
   "private": false,
   "scripts": {
     "dev": "vite",
@@ -61,7 +61,8 @@
     "vue-multiselect": "^3.0.0-beta.3",
     "vue-observe-visibility": "^2.0.0-alpha.1",
     "vue-router": "^4.1.6",
-    "webitel-sdk": "^24.2.16"
+    "webitel-sdk": "^24.2.16",
+    "xlsx": "^0.18.5"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "5.0.4",

package/src/api/defaults/getDefaultInstance/getDefaultInstance.js

@@ -9,6 +9,7 @@ const getDefaultInstance = () => generateInstance({
     request: [updateTokenInterceptor],
     response: [handleUnauthorizedInterceptor],
   },
+  baseURL: import.meta.env.VITE_API_URL,
 });
 
 export default getDefaultInstance;

package/src/components/wt-button-select/wt-button-select.vue

@@ -105,25 +105,25 @@ function atClickaway() {
   display: inline-flex;
   align-items: center;
   gap: var(--button-select-buttons-gap);
-}
 
-.wt-button-select__button {
-  padding: var(--button-select-button-padding);
-  border-radius: var(--border-radius) 0 0 var(--border-radius);
-}
+  .wt-button-select__button {
+    padding: var(--button-select-button-padding);
+    border-radius: var(--border-radius) 0 0 var(--border-radius);
+  }
 
-.wt-button-select__select-btn {
-  min-width: auto;
-  padding: var(--button-select-icon-button-padding);
-  border-radius: 0 var(--border-radius) var(--border-radius) 0;
+  .wt-button-select__select-btn {
+    min-width: auto;
+    padding: var(--button-select-icon-button-padding);
+    border-radius: 0 var(--border-radius) var(--border-radius) 0;
 
-  // OPEN AND SHUT ARROW
-  .wt-button-select__select-arrow {
-    display: flex;
-    transform: rotate(0);
+    // OPEN AND SHUT ARROW
+    .wt-button-select__select-arrow {
+      display: flex;
+      transform: rotate(0);
 
-    &--active {
-      transform: rotate(180deg);
+      &--active {
+        transform: rotate(180deg);
+      }
     }
   }
 }

package/src/enums/TypesExportedSettings/TypesExportedSettings.enum.js

@@ -0,0 +1,4 @@
+export default Object.freeze({
+  CSV: 'csv',
+  XLS: 'xls',
+});

package/src/modules/CSVExport/CSVExport.js

@@ -22,16 +22,17 @@ export default class CSVExport {
 
   downloadProgress = { count: 0 };
 
-  constructor(fetchMethod, { filename }) {
+  constructor(fetchMethod, { filename, delimiter }) {
     if (!fetchMethod) throw new Error('fetch method should be specified!');
     this.fetchMethod = fetchMethod;
     this.filename = filename;
+    this.delimiter = delimiter || ',';
   }
 
-  static _getStringifyOptions() {
+  static _getStringifyOptions(delimiter) {
     const defaultOptions = {
       header: true,
-      delimiter: ',',
+      delimiter,
     };
     const localStorageOptions = JSON.parse(localStorage.getItem('csv-export-options')) ||
       {};
@@ -71,7 +72,7 @@ export default class CSVExport {
       if (!columns.length && items.length) columns = Object.keys(items[0]);
 
       const options = {
-        ...CSVExport._getStringifyOptions(),
+        ...CSVExport._getStringifyOptions(params.delimiter),
         columns,
       };
 

package/src/modules/CSVExport/XLSExport.js

@@ -0,0 +1,50 @@
+import * as XLSX from 'xlsx';
+import { saveAs } from 'file-saver-es';
+
+export default class XLSExport {
+  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;
+  }
+
+  resetProgress() {
+    this.downloadProgress = { count: 0 };
+  }
+
+  save(data) {
+    const ws = XLSX.utils.json_to_sheet(data);
+    const wb = XLSX.utils.book_new();
+    XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
+    const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'array' });
+    const blob = new Blob([wbout], { type: 'application/octet-stream' });
+    saveAs(blob, `${this.filename}.xlsx`);
+  }
+
+  async export(params) {
+    let data = [];
+    let isNext = false;
+    let page = 1;
+
+    do {
+      const { items, next } = await this.fetchMethod({
+        ...params,
+        page,
+      });
+      data = data.concat(items);
+      this.downloadProgress.count += items.length;
+
+      isNext = next;
+      page += 1;
+    } while (isNext);
+
+    this.save(data);
+    this.resetProgress();
+  }
+}

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

@@ -0,0 +1,38 @@
+import XLSExport from '../XLSExport.js';
+
+export default {
+  data: () => ({
+    XLSExport: null,
+  }),
+  computed: {
+    isXLSLoading() {
+      return !!this.XLSDownloadProgress;
+    },
+
+    XLSDownloadProgress() {
+      return this.XLSExport ? this.XLSExport.downloadProgress.count : 0;
+    },
+
+  },
+  methods: {
+    initXLSExport(fetchMethod, options) {
+      this.XLSExport = new XLSExport(fetchMethod, options);
+    },
+
+    async exportXLS(exportParams) {
+      const routeQuery = this.$route?.query;
+      const params = {
+        ...exportParams || routeQuery,
+        size: 5000,
+      };
+      if (this.isAnySelected) params.id = this.selectedIds;
+
+      try {
+        await this.XLSExport.export(params);
+      } catch (err) {
+        throw err;
+      }
+    },
+
+  },
+};