@eeacms/volto-tableau 3.0.5 → 3.0.6

package/CHANGELOG.md

@@ -4,6 +4,8 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+### [3.0.6](https://github.com/eea/volto-tableau/compare/3.0.5...3.0.6) - 30 January 2023
+
 ### [3.0.5](https://github.com/eea/volto-tableau/compare/3.0.4...3.0.5) - 26 January 2023
 
 #### :hammer_and_wrench: Others

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-tableau",
-  "version": "3.0.5",
+  "version": "3.0.6",
   "description": "@eeacms/volto-tableau: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/DownloadExtras/TableauDownload.jsx

@@ -1,22 +1,64 @@
 import React from 'react';
-import { Popup, Button, Modal } from 'semantic-ui-react';
+import { Popup, Button, Modal, Dropdown } from 'semantic-ui-react';
 import { Icon } from '@plone/volto/components';
 import downloadSVG from '@plone/volto/icons/download.svg';
 
 const TableauDownload = (props) => {
-  const [open, setOpen] = React.useState(false);
   const viz = props.viz || {};
 
+  const [open, setOpen] = React.useState(false);
+  const [
+    isSheetSelectorCsvVisible,
+    setIsSheetSelectorCsvVisible,
+  ] = React.useState(false);
+  const [
+    isSheetSelectorExcelVisible,
+    setIsSheetSelectorExcelVisible,
+  ] = React.useState(false);
+  const [availableSheets, setAvailableSheets] = React.useState([]);
+
+  const initializeDropdown = () => {
+    const sheets = viz
+      ?.getWorkbook()
+      ?.getActiveSheet()
+      ?.getWorksheets()
+      .map((sheet, index) => ({
+        key: index,
+        text: sheet.getName(),
+        value: sheet.getName(),
+      }));
+    setAvailableSheets(sheets);
+  };
+
   const exportImage = () => {
+    setIsSheetSelectorCsvVisible(false);
+    setIsSheetSelectorExcelVisible(false);
     viz.showExportImageDialog();
   };
 
   const exportToCSV = () => {
-    viz.showExportCrossTabDialog();
+    setIsSheetSelectorExcelVisible(false);
+    initializeDropdown();
+    setIsSheetSelectorCsvVisible(true);
   };
 
   const exportToExcel = () => {
-    viz.exportCrossTabToExcel();
+    setIsSheetSelectorCsvVisible(false);
+    initializeDropdown();
+    setIsSheetSelectorExcelVisible(true);
+  };
+
+  const handleSheetSelectionCsvChange = (e, data) => {
+    viz.showExportCrossTabDialog(data.value);
+  };
+
+  const handleSheetSelectionExcelChange = (e, data) => {
+    viz.exportCrossTabToExcel(data.value);
+  };
+
+  const hideDropdowns = () => {
+    setIsSheetSelectorCsvVisible(false);
+    setIsSheetSelectorExcelVisible(false);
   };
 
   return (
@@ -28,7 +70,11 @@ const TableauDownload = (props) => {
         on="click"
         trigger={
           <div className="toolbar-button-wrapper">
-            <Button className="toolbar-button" title="Download">
+            <Button
+              className="toolbar-button"
+              title="Download"
+              onClick={hideDropdowns}
+            >
               <Icon name={downloadSVG} size="26px" />
             </Button>
             <span className="btn-text">Save</span>
@@ -40,7 +86,23 @@ const TableauDownload = (props) => {
           <p>Select your file format.</p>
           <Button onClick={exportImage}>Image</Button>
           <Button onClick={exportToCSV}>CSV</Button>
+          {isSheetSelectorCsvVisible ? (
+            <Dropdown
+              placeholder="Sheet"
+              selection
+              options={availableSheets}
+              onChange={handleSheetSelectionCsvChange}
+            />
+          ) : null}
           <Button onClick={exportToExcel}>Excel</Button>
+          {isSheetSelectorExcelVisible ? (
+            <Dropdown
+              placeholder="Sheet"
+              selection
+              options={availableSheets}
+              onChange={handleSheetSelectionExcelChange}
+            />
+          ) : null}
         </Popup.Content>
       </Popup>