[MIM-1947] Mim 1947 table export refactor (#3073)

* Use newest version of SheetJS to replace tableExport.es6
Add feature toggling for table export utils
MIM-1947

* Convert string to numbers for cell value
MIM-1974

* Add .xlsx for sheets file name for correct file format
MIM-1947

* Add SheetJS package tarball to our vendors and npm install that instead for security measures etc

* Add conditional for old tableExport code to prevent double downloads when useNewTableExport feature toggle is on

* Add option to download table as csv and use table caption instead of display name for file name

* Minor code refactoring; use flatMap instead

* Destructure props and remove unused props

* Typo

* Minor code refactoring; if-guards for some conditional (wip)

* Fix file name for tables without caption content
More minor refactoring

package.json

@@ -149,7 +149,7 @@
     "webpack": "~5.96.1",
     "webpack-bundle-analyzer": "~4.10.2",
     "webpack-cli": "~5.1.4",
-    "xlsx": "~0.18.5"
+    "xlsx": "file:src/main/resources/lib/vendor/xlsx-0.20.3.tgz"
   },
   "browserslist": [
     "last 2 version",

src/main/resources/lib/ssb/utils/tableExportUtils.ts

@@ -0,0 +1,44 @@
+import * as XLSX from 'xlsx'
+import { Title } from '/lib/types/xmlParser'
+
+interface TableExport {
+  tableElement: HTMLTableElement
+  fileName?: Title | string
+}
+
+const sheetName = 'Sheet1'
+
+const createTableWorkbook = (tableElement: TableExport['tableElement']) => {
+  return XLSX.utils.table_to_book(tableElement, {
+    sheet: sheetName,
+    raw: true,
+  })
+}
+
+export const exportTableToExcel = ({ tableElement, fileName }: TableExport): void => {
+  const sheetFileName = fileName ? `${fileName}.xlsx` : 'tabell.xlsx'
+  const workbook = createTableWorkbook(tableElement)
+
+  const worksheet = workbook.Sheets[sheetName]
+  Object.keys(worksheet).flatMap((cell) => {
+    // Check if SheetJS worksheet cell object has a value and that the cell isn't a SheetJS special property/metadata
+    if (cell && cell[0] !== '!') {
+      const cellValue = worksheet[cell].v.replace(/\s/g, '').replace(/,/g, '.')
+      if (cellValue !== '') {
+        if (!isNaN(cellValue)) {
+          worksheet[cell].v = parseFloat(cellValue)
+          worksheet[cell].t = 'n'
+        }
+      }
+    }
+  })
+
+  XLSX.writeFile(workbook, sheetFileName)
+}
+
+export const exportTableToCSV = ({ tableElement, fileName }: TableExport): void => {
+  const sheetFileName = fileName ? `${fileName}.csv` : 'tabell.csv'
+  const workbook = createTableWorkbook(tableElement)
+
+  XLSX.writeFile(workbook, sheetFileName, { bookType: 'csv', type: 'string' })
+}

src/main/resources/lib/types/partTypes/table.ts

@@ -6,15 +6,13 @@ export interface TableProps {
   downloadTableLabel: string
   downloadTableTitle: object
   downloadTableOptions: DropdownItems
-  displayName: string
   table: Partial<TableView> & {
     language: string | undefined
   }
   tableDraft: Partial<TableView>
   standardSymbol: TableStandardSymbolLink | undefined
   sources: SourceList
   sourceLabel: string
-  iconUrl: string
   showPreviewDraft: boolean
   paramShowDraft: boolean
   draftExist: boolean | undefined
@@ -24,6 +22,7 @@ export interface TableProps {
   statBankWebUrl: string
   hiddenTitle: string | undefined
   checkIsOverflowing?: boolean
+  useNewTableExport: boolean
 }
 
 export interface TableStandardSymbolLink {

src/main/resources/main.es6

@@ -71,6 +71,10 @@ try {
           feature: 'show-popup-survey',
           enabled: false,
         },
+        {
+          feature: 'new-table-export',
+          enabled: false,
+        },
       ],
     },
   ])