From f745656b4cc56ddd6a3661df200d36150ea320b4 Mon Sep 17 00:00:00 2001
From: Albert Backenhof <EXT_BPD@qlik.com>
Date: Mon, 20 May 2019 13:20:01 +0200
Subject: [PATCH] Excel export inside container

-No tid-element available when inside native container.
 Therefore, use root element to find table cells instead.

Issue: DEB-242
---
 src/excel-export.js                        | 11 +++++------
 src/export-button.jsx                      |  6 +++---
 src/headers-table/export-column-header.jsx |  6 +++---
 src/headers-table/index.jsx                |  2 +-
 4 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/src/excel-export.js b/src/excel-export.js
index 1e2bb66..43b945c 100644
--- a/src/excel-export.js
+++ b/src/excel-export.js
@@ -7,13 +7,12 @@ function cleanupNodes (node) {
   });
 }
 
-function buildTableHTML (id, title, subtitle, footnote) {
+function buildTableHTML (containerElement, title, subtitle, footnote) {
   const titleHTML = `<p style="font-size:15pt"><b>${title}</b></p>`;
   const subtitleHTML = `<p style="font-size:11pt">${subtitle}</p>`;
   const footnoteHTML = `<p style="font-size:11pt">${footnote}</p>`;
-  const container = document.querySelector(`[tid="${id}"]`);
-  const kpiTableClone = container.querySelector('.kpi-table').cloneNode(true);
-  const dataTableClone = container.querySelector('.data-table').cloneNode(true);
+  const kpiTableClone = containerElement[0].querySelector('.kpi-table').cloneNode(true);
+  const dataTableClone = containerElement[0].querySelector('.data-table').cloneNode(true);
   cleanupNodes(kpiTableClone);
   cleanupNodes(kpiTableClone);
 
@@ -100,8 +99,8 @@ function downloadXLS (html) {
   return true;
 }
 
-export function exportXLS (id, title, subtitle, footnote) {
+export function exportXLS (containerElement, title, subtitle, footnote) {
   // original was removing icon when starting export, disable and some spinner instead, shouldn't take enough time to warrant either..?
-  const table = buildTableHTML(id, title, subtitle, footnote);
+  const table = buildTableHTML(containerElement, title, subtitle, footnote);
   downloadXLS(table);
 }
diff --git a/src/export-button.jsx b/src/export-button.jsx
index 1f1093e..fcd177f 100644
--- a/src/export-button.jsx
+++ b/src/export-button.jsx
@@ -9,10 +9,10 @@ class ExportButton extends React.PureComponent {
   }
 
   handleExport () {
-    const { id, excelExport, general } = this.props;
+    const { component, excelExport, general } = this.props;
     const { title, subtitle, footnote } = general;
     if (excelExport) {
-      exportXLS(id, title, subtitle, footnote);
+      exportXLS(component.$element, title, subtitle, footnote);
     }
   }
 
@@ -34,7 +34,7 @@ ExportButton.defaultProps = {
 };
 
 ExportButton.propTypes = {
-  id: PropTypes.string.isRequired,
+  component: PropTypes.shape({}).isRequired,
   excelExport: PropTypes.bool,
   general: PropTypes.shape({}).isRequired
 };
diff --git a/src/headers-table/export-column-header.jsx b/src/headers-table/export-column-header.jsx
index 8e09724..61775ea 100644
--- a/src/headers-table/export-column-header.jsx
+++ b/src/headers-table/export-column-header.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import ExportButton from '../export-button.jsx';
 import { HEADER_FONT_SIZE } from '../initialize-transformed';
 
-const ExportColumnHeader = ({ id, baseCSS, general, title, allowExcelExport, hasSecondDimension, styling }) => {
+const ExportColumnHeader = ({ component, baseCSS, general, title, allowExcelExport, hasSecondDimension, styling }) => {
   const rowSpan = hasSecondDimension ? 2 : 1;
   const isMediumFontSize = styling.headerOptions.fontSizeAdjustment === HEADER_FONT_SIZE.MEDIUM;
   const style = {
@@ -22,7 +22,7 @@ const ExportColumnHeader = ({ id, baseCSS, general, title, allowExcelExport, has
       style={style}
     >
       <ExportButton
-        id={id}
+        component={component}
         excelExport={allowExcelExport}
         general={general}
       />
@@ -32,7 +32,7 @@ const ExportColumnHeader = ({ id, baseCSS, general, title, allowExcelExport, has
 };
 
 ExportColumnHeader.propTypes = {
-  id: PropTypes.string.isRequired,
+  component: PropTypes.shape({}).isRequired,
   allowExcelExport: PropTypes.bool.isRequired,
   baseCSS: PropTypes.shape({}).isRequired,
   general: PropTypes.shape({}).isRequired,
diff --git a/src/headers-table/index.jsx b/src/headers-table/index.jsx
index 6d259b5..2b7a87e 100644
--- a/src/headers-table/index.jsx
+++ b/src/headers-table/index.jsx
@@ -28,7 +28,7 @@ const HeadersTable = ({ data, general, component, styling, isKpi }) => {
           <tr>
             {isKpi ?
               <ExportColumnHeader
-                id={component.$scope.layout.qInfo.qId}
+                component={component}
                 allowExcelExport={general.allowExcelExport}
                 baseCSS={baseCSS}
                 general={general}