@webitel/ui-sdk 24.6.44 → 24.6.46

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "24.6.44",
+  "version": "24.6.46",
   "private": false,
   "scripts": {
     "dev": "vite",

package/src/components/wt-table/wt-table.vue

@@ -227,9 +227,20 @@ export default {
         }
       } else {
         // for backwards compatibility
-        this.data.forEach((item) => {
-          item._isSelected = !this.isAllSelected;
-        });
+
+        // https://webitel.atlassian.net/browse/WTEL-4634
+        // Value for _isSelected must be assigned explicitly.
+        // Because allSelected recomputes after each change
+
+        if (this.isAllSelected) {
+          this.data.forEach((item) => {
+            item._isSelected = false;
+          });
+        } else {
+          this.data.forEach((item) => {
+            item._isSelected = true;
+          });
+        }
       }
     },
     handleSelection(row, select) {

package/src/modules/CSVExport/XLSExport.js

@@ -1,5 +1,6 @@
 import * as XLSX from 'xlsx';
 import { saveAs } from 'file-saver-es';
+import { objSnakeToCamel } from '../../scripts/caseConverters.js';
 
 export default class XLSExport {
   filename = 'export';
@@ -18,8 +19,42 @@ export default class XLSExport {
     this.downloadProgress = { count: 0 };
   }
 
-  save(data) {
-    const ws = XLSX.utils.json_to_sheet(data);
+  // NOTE: if the value is an object with a name property, extract the name to display it in the EXEL file
+  extractNameFromObject(value) {
+    if (value && typeof value === 'object' && value.name) {
+      return value.name;
+    }
+    return value;
+  }
+
+  // NOTE: creates a new object that only includes the properties specified in the columns array
+  filterDataByColumns(data, columns) {
+    return data.map(item => {
+      let filteredItem = {};
+      columns.forEach(column => {
+        const value = item.hasOwnProperty(column) ? this.extractNameFromObject(item[column]) : ''; // '' needed to display column that has no data
+        filteredItem[column] = value;
+      });
+      return filteredItem;
+    });
+  }
+
+  // NOTE: calculates the width of the columns based on the data to display it in the EXEL file
+  calculateColumnWidths(data, columns) {
+    return columns.map(column => {
+      const maxLength = data.reduce((max, item) => {
+        const value = item[column] || '';
+        return Math.max(max, value.toString().length);
+      }, column.length);
+      return { wch: maxLength + 2 }; // Adding some padding
+    });
+  }
+
+  save(data, columns) {
+    const filteredData = this.filterDataByColumns(data, columns);
+    const ws = XLSX.utils.json_to_sheet(filteredData);
+    const columnWidths = this.calculateColumnWidths(filteredData, columns);
+    ws['!cols'] = columnWidths;
     const wb = XLSX.utils.book_new();
     XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
     const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'array' });
@@ -27,10 +62,12 @@ export default class XLSExport {
     saveAs(blob, `${this.filename}.xlsx`);
   }
 
-  async export(params) {
+  async fetchAndPrepareData(params) {
     let data = [];
     let isNext = false;
     let page = 1;
+    let columns = params._columns ||
+      (params?.fields ? objSnakeToCamel(params?.fields) : []);
 
     do {
       const { items, next } = await this.fetchMethod({
@@ -43,8 +80,12 @@ export default class XLSExport {
       isNext = next;
       page += 1;
     } while (isNext);
+    return { data, columns };
+  }
 
-    this.save(data);
+  async export(params) {
+    const { data, columns } = await this.fetchAndPrepareData(params);
+    this.save(data, columns);
     this.resetProgress();
   }
 }

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

@@ -4,6 +4,7 @@ export default {
   data: () => ({
     XLSExport: null,
   }),
+
   computed: {
     isXLSLoading() {
       return !!this.XLSDownloadProgress;
@@ -12,7 +13,14 @@ export default {
     XLSDownloadProgress() {
       return this.XLSExport ? this.XLSExport.downloadProgress.count : 0;
     },
-
+    selectedIds() {
+      return this.dataList
+      .filter((item) => item._isSelected)
+      .map((item) => item.id);
+    },
+    isAnySelected() {
+      return !!this.selectedIds.length;
+    },
   },
   methods: {
     initXLSExport(fetchMethod, options) {
@@ -33,6 +41,5 @@ export default {
         throw err;
       }
     },
-
   },
 };