Merge pull request #72 from qlik-oss/DEB-211/ContextMenuExportExcel

Moved Excel export to context menu
qlik-oss · Jun 27, 2019 · 1e0a7c1 · 1e0a7c1
2 parents 64b778b + 17b5df2
commit 1e0a7c1
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 66 deletions.
diff --git a/assets/Excel.png b/assets/Excel.png
diff --git a/src/export-button.jsx b/src/export-button.jsx
diff --git a/src/headers-table/export-column-header.jsx → src/headers-table/dim1-header.jsx b/src/headers-table/export-column-header.jsx → src/headers-table/dim1-header.jsx
@@ -1,9 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import ExportButton from '../export-button.jsx';
 import { HEADER_FONT_SIZE } from '../initialize-transformed';
+import Tooltip from '../tooltip/index.jsx';
 
-const ExportColumnHeader = ({ component, baseCSS, general, title, allowExcelExport, hasSecondDimension, styling }) => {
+const Dim1Header = ({ component, baseCSS, title, hasSecondDimension, styling }) => {
+  const inEditState = component.inEditState();
   const rowSpan = hasSecondDimension ? 2 : 1;
   const isMediumFontSize = styling.headerOptions.fontSizeAdjustment === HEADER_FONT_SIZE.MEDIUM;
   const style = {
@@ -21,21 +22,20 @@ const ExportColumnHeader = ({ component, baseCSS, general, title, allowExcelExpo
       rowSpan={rowSpan}
       style={style}
     >
-      <ExportButton
-        component={component}
-        excelExport={allowExcelExport}
-        general={general}
-      />
-      {title}
+      <Tooltip
+        isTooltipActive={!inEditState}
+        styling={styling}
+        tooltipText={title}
+      >
+        {title}
+      </Tooltip>
     </th>
   );
 };
 
-ExportColumnHeader.propTypes = {
-  component: PropTypes.shape({}).isRequired,
-  allowExcelExport: PropTypes.bool.isRequired,
+Dim1Header.propTypes = {
   baseCSS: PropTypes.shape({}).isRequired,
-  general: PropTypes.shape({}).isRequired,
+  component: PropTypes.shape({}).isRequired,
   hasSecondDimension: PropTypes.bool.isRequired,
   styling: PropTypes.shape({
     headerOptions: PropTypes.shape({
@@ -45,4 +45,4 @@ ExportColumnHeader.propTypes = {
   title: PropTypes.string.isRequired
 };
 
-export default ExportColumnHeader;
+export default Dim1Header;
diff --git a/src/headers-table/index.jsx b/src/headers-table/index.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import ExportColumnHeader from './export-column-header.jsx';
+import Dim1Header from './dim1-header.jsx';
 import ColumnHeader from './column-header.jsx';
 import MeasurementColumnHeader from './measurement-column-header.jsx';
 import { injectSeparators } from '../utilities';
@@ -12,7 +12,6 @@ class HeadersTable extends React.PureComponent {
       columnSeparatorWidth,
       component,
       data,
-      general,
       isKpi,
       styling
     } = this.props;
@@ -43,11 +42,9 @@ class HeadersTable extends React.PureComponent {
           <tbody>
             <tr>
               {isKpi ?
-                <ExportColumnHeader
-                  allowExcelExport={general.allowExcelExport}
+                <Dim1Header
                   baseCSS={baseCSS}
                   component={component}
-                  general={general}
                   hasSecondDimension={hasSecondDimension}
                   styling={styling}
                   title={dimension1[0].name}
@@ -129,7 +126,6 @@ HeadersTable.propTypes = {
       measurements: PropTypes.array
     })
   }).isRequired,
-  general: PropTypes.shape({}).isRequired,
   component: PropTypes.shape({}).isRequired,
   styling: PropTypes.shape({
     headerOptions: PropTypes.shape({}),

diff --git a/src/index.js b/src/index.js
@@ -1,6 +1,8 @@
 import definition from './definition';
+import { exportXLS } from './excel-export';
 import { initializeDataCube, initializeDesignList } from './dataset';
 import initializeStore from './store';
+import qlik from 'qlik';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import Root from './root.jsx';
@@ -11,11 +13,6 @@ if (!window._babelPolyfill) { // eslint-disable-line no-underscore-dangle
 }
 
 export default {
-  controller: [
-    '$scope',
-    '$timeout',
-    function controller () {}
-  ],
   design: {
     dimensions: {
       max: 1,
@@ -88,5 +85,26 @@ export default {
     snapshotLayout.snapshotData.designList = await initializeDesignList(this, snapshotLayout);
     return snapshotLayout;
   },
+  getContextMenu: async function (obj, menu) {
+    const app = qlik.currApp(this);
+    const isPersonalResult = await app.global.isPersonalMode();
+    if (!this.$scope.layout.allowexportxls || (isPersonalResult && isPersonalResult.qReturn)) {
+      return menu;
+    }
+
+    menu.addItem({
+      translation: "Export as XLS",
+      tid: "export-excel",
+      icon: "export",
+      select: () => {
+        exportXLS(
+          this.$element,
+          this.$scope.layout.title,
+          this.$scope.layout.subtitle,
+          this.$scope.layout.footnote);
+      }
+    });
+    return menu;
+  },
   version: 1.0
 };