Merge pull request #15 from qlik-oss/feature/QPE-484

[QPE-484] Edit mode interactions
Merge pull request #10 from qlik-oss/QPE-477
2019-02-22 11:28:35 +01:00 · 2019-02-22 10:41:36 +01:00 · 2019-02-21 17:37:00 +01:00 · 2019-02-21 16:48:34 +01:00 · 2019-02-21 12:02:42 +01:00 · 2019-02-19 14:55:50 +01:00
12 changed files with 169 additions and 97 deletions
--- a/src/data-table/data-cell.jsx
+++ b/src/data-table/data-cell.jsx
@@ -90,12 +90,17 @@ class DataCell extends React.PureComponent {
    if (styleBuilder.hasComments()) {
      formattedMeasurementValue = '.';
    }
+    let textAlignment = 'Right';
+    const textAlignmentProp = styling.options.textAlignment;
+    if (textAlignmentProp) {
+      textAlignment = textAlignmentProp;
+    }

    let cellStyle = {
      fontFamily: styling.options.fontFamily,
      ...styleBuilder.getStyle(),
      paddingLeft: '4px',
-      textAlign: 'right'
+      textAlign: textAlignment

    };
    const { semaphoreColors } = styling;
@@ -109,7 +114,7 @@ class DataCell extends React.PureComponent {
        fontFamily: styling.options.fontFamily,
        fontSize: styleBuilder.getStyle().fontSize,
        paddingLeft: '4px',
-        textAlign: 'right'
+        textAlign: textAlignment
      };
    }

--- a/src/definition/formatted.js
+++ b/src/definition/formatted.js
@@ -187,6 +187,26 @@ const formatted = {
      ],
      defaultValue: 1
    },
+    textAlignment: {
+      ref: 'cellTextAlignment',
+      label: 'Cell Text alignment',
+      component: 'buttongroup',
+      options: [
+        {
+          value: 'left',
+          label: 'Left'
+        },
+        {
+          value: 'center',
+          label: 'Center'
+        },
+        {
+          value: 'right',
+          label: 'Right'
+        }
+      ],
+      defaultValue: 'right'
+    },
    ColumnWidthSlider: {
      type: 'number',
      component: 'slider',
--- a/src/definition/header.js
+++ b/src/definition/header.js
@@ -27,7 +27,7 @@ const header = {
      ref: 'HeaderColorSchema',
      type: 'string',
      component: 'dropdown',
-      label: 'BackGround Header Color',
+      label: 'Background Header Color',
      options: [
        {
          value: 'Clean',
--- a/src/definition/index.js
+++ b/src/definition/index.js
@@ -9,15 +9,16 @@ import pijamaColorLibrary from './pijama-color-library';
 const definition = {
  component: 'accordion',
  items: {
-    dimensions: {
-      max: 2,
-      min: 1,
-      uses: 'dimensions'
-    },
-    measures: {
-      max: 9,
-      min: 1,
-      uses: 'measures'
+    data: {
+      items: {
+        dimensions: {
+          disabledRef: ''
+        },
+        measures: {
+          disabledRef: ''
+        }
+      },
+      uses: 'data'
    },
    settings: {
      items: {
--- a/src/excel-export.js
+++ b/src/excel-export.js
@@ -1,73 +1,86 @@
-import $ from 'jquery';
-
-const isIE = /* @cc_on!@*/false || Boolean(document.documentMode);
-const isChrome = Boolean(window.chrome) && Boolean(window.chrome.webstore);
-const isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
-const isFirefox = typeof InstallTrigger !== 'undefined';
-
-export function enableExcelExport (layout, f) {
-  let myTitle = '';
-  let mySubTitle = '';
-  let myFootNote = '';
-  if (layout.title.length > 0) {
-    myTitle += '<p style="font-size:15pt"><b>';
-    myTitle += layout.title;
-    myTitle += '</b></p>';
-  }
-  if (layout.subtitle.length > 0) {
-    mySubTitle += '<p style="font-size:11pt">';
-    mySubTitle += layout.subtitle;
-    mySubTitle += '</p>';
-  }
-  if (layout.footnote.length > 0) {
-    myFootNote += '<p style="font-size:11pt"><i>Note:</i>';
-    myFootNote += layout.footnote;
-    myFootNote += '</p>';
-  }
-
-  $('.icon-xls').on('click', () => {
-    $('.header-wrapper th').children('.tooltip')
-      .remove(); // remove some popup effects when exporting
-    $('.header-wrapper th').children('.icon-xls')
-      .remove(); // remove the xls icon when exporting
-    if (isChrome || isSafari) {
-      const $clonedDiv = $('.data-table').clone(true); // .kpi-table a secas exporta la 1ªcol
-      let vEncodeHead = '<html><head><meta charset="UTF-8"></head>';
-      vEncodeHead += myTitle + mySubTitle + myFootNote;
-      const vEncode = encodeURIComponent($clonedDiv.html());
-      let vDecode = `${vEncodeHead + vEncode}</html>`;
-
-      $clonedDiv.find('tr.header');
-      vDecode = vDecode.split('%3E.%3C').join('%3E%3C');
-      window.open(`data:application/vnd.ms-excel,${vDecode}`);
-      $.preventDefault();
-    }
-    if (isIE) {
-      let a = '<html><head><meta charset="UTF-8"></head>';
-      a += myTitle + mySubTitle + myFootNote;
-      a += f;
-      a = a.split('>.<').join('><');
-      a += '</html>';
-
-      const w = window.open();
-      w.document.open();
-      w.document.write(a);
-      w.document.close();
-      w.document.execCommand('SaveAs', true, 'Analysis.xls' || 'c:\TMP');
-      w.close();
-    }
-
-    if (isFirefox) {
-      const $clonedDiv = $('.data-table').clone(true);// .kpi-table a secas exporta la 1ªcol
-      let vEncodeHead = '<html><head><meta charset="UTF-8"></head>';
-      vEncodeHead += myTitle + mySubTitle + myFootNote;
-      const vEncode = encodeURIComponent($clonedDiv.html());
-      let vDecode = `${vEncodeHead + vEncode}</html>`;
-
-      $clonedDiv.find('tr.header');
-      vDecode = vDecode.split('>.<').join('><');
-      window.open(`data:application/vnd.ms-excel,${vDecode}`);
-      $.preventDefault();
+function removeAllTooltips (node) {
+  const tooltips = node.querySelectorAll('.tooltip');
+  [].forEach.call(tooltips, tooltip => {
+    if (tooltip.parentNode) {
+      tooltip.parentNode.removeChild(tooltip);
    }
  });
 }
+
+function buildTableHTML (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"><i>Note:</i>${footnote}</p>`;
+  const dataTableClone = document.querySelector('.data-table').cloneNode(true);
+
+  removeAllTooltips(dataTableClone);
+
+  const tableHTML = `
+    <html
+      xmlns:o="urn:schemas-microsoft-com:office:office"
+      xmlns:x="urn:schemas-microsoft-com:office:excel"
+      xmlns="http://www.w3.org/TR/REC-html40"
+    >
+      <head>
+        <meta charset="UTF-8">
+        <!--[if gte mso 9]>
+          <xml>
+            <x:ExcelWorkbook>
+              <x:ExcelWorksheets>
+                <x:ExcelWorksheet>
+                  <x:Name>${title || 'Analyze'}</x:Name>
+                  <x:WorksheetOptions>
+                    <x:DisplayGridlines/>
+                  </x:WorksheetOptions>
+                </x:ExcelWorksheet>
+              </x:ExcelWorksheets>
+            </x:ExcelWorkbook>
+          </xml>
+        <![endif]-->
+      </head>
+      <body>
+        ${titleHTML.length > 0 ? titleHTML : ''}
+        ${subtitleHTML.length > 0 ? subtitleHTML : ''}
+        ${footnoteHTML.length > 0 ? footnoteHTML : ''}
+        ${dataTableClone.outerHTML}
+      </body>
+    </html>
+    `.split('>.<')
+    .join('><')
+    .split('>*<')
+    .join('><');
+
+  return tableHTML;
+}
+
+function downloadXLS (html) {
+  const filename = 'analysis.xls';
+  // IE/Edge
+  if (window.navigator.msSaveOrOpenBlob) {
+    const blobObject = new Blob([html]);
+    return window.navigator.msSaveOrOpenBlob(blobObject, filename);
+  }
+
+  const dataURI = generateDataURI(html);
+  const link = window.document.createElement('a');
+  link.href = dataURI;
+  link.download = filename;
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+
+  return true;
+}
+
+function generateDataURI (html) {
+  const dataType = 'data:application/vnd.ms-excel;base64,';
+  const data = window.btoa(unescape(encodeURIComponent(html)));
+
+  return `${dataType}${data}`;
+}
+
+export function exportXLS (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(title, subtitle, footnote);
+  downloadXLS(table);
+}
--- a/src/export-button.jsx
+++ b/src/export-button.jsx
@@ -1,13 +1,27 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { exportXLS } from './excel-export';

-// TODO: move interaction logic in here from excel-export.js
 class ExportButton extends React.PureComponent {
+  constructor (props) {
+    super(props);
+    this.handleExport = this.handleExport.bind(this);
+  }
+
+  handleExport () {
+    const { excelExport, general } = this.props;
+    const { title, subtitle, footnote } = general;
+    if (excelExport) {
+      exportXLS(title, subtitle, footnote);
+    }
+  }
+
  render () {
    const { excelExport } = this.props;
    return excelExport === true && (
      <input
        className="icon-xls"
+        onClick={this.handleExport}
        src="/Extensions/qlik-smart-pivot/Excel.png"
        type="image"
      />
@@ -20,7 +34,8 @@ ExportButton.defaultProps = {
 };

 ExportButton.propTypes = {
-  excelExport: PropTypes.bool
+  excelExport: PropTypes.bool,
+  general: PropTypes.shape({}).isRequired
 };

 export default ExportButton;
--- a/src/headers-table/export-column-header.jsx
+++ b/src/headers-table/export-column-header.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import ExportButton from '../export-button.jsx';

-const ExportColumnHeader = ({ baseCSS, title, allowExcelExport, hasSecondDimension, styling }) => {
+const ExportColumnHeader = ({ baseCSS, general, title, allowExcelExport, hasSecondDimension, styling }) => {
  const rowSpan = hasSecondDimension ? 2 : 1;
  const style = {
    ...baseCSS,
@@ -19,7 +19,10 @@ const ExportColumnHeader = ({ baseCSS, title, allowExcelExport, hasSecondDimensi
      rowSpan={rowSpan}
      style={style}
    >
-      <ExportButton excelExport={allowExcelExport} />
+      <ExportButton
+        excelExport={allowExcelExport}
+        general={general}
+      />
      {title}
    </th>
  );
@@ -28,6 +31,7 @@ const ExportColumnHeader = ({ baseCSS, title, allowExcelExport, hasSecondDimensi
 ExportColumnHeader.propTypes = {
  allowExcelExport: PropTypes.bool.isRequired,
  baseCSS: PropTypes.shape({}).isRequired,
+  general: PropTypes.shape({}).isRequired,
  hasSecondDimension: PropTypes.bool.isRequired,
  styling: PropTypes.shape({
    headerOptions: PropTypes.shape({
--- a/src/headers-table/index.jsx
+++ b/src/headers-table/index.jsx
@@ -29,6 +29,7 @@ const HeadersTable = ({ data, general, qlik, styling }) => {
            <ExportColumnHeader
              allowExcelExport={general.allowExcelExport}
              baseCSS={baseCSS}
+              general={general}
              hasSecondDimension={hasSecondDimension}
              styling={styling}
              title={dimension1[0].name}
--- a/src/index.js
+++ b/src/index.js
@@ -12,6 +12,18 @@ export default {
    '$timeout',
    function () { }
  ],
+  data: {
+    dimensions: {
+      max: 2,
+      min: 1,
+      uses: 'dimensions'
+    },
+    measures: {
+      max: 9,
+      min: 1,
+      uses: 'measures'
+    }
+  },
  definition,
  initialProperties: {
    qHyperCubeDef: {
--- a/src/initialize-transformed.js
+++ b/src/initialize-transformed.js
@@ -255,7 +255,10 @@ async function initializeTransformed ({ $element, layout, component }) {
      allowFilteringByClick: layout.filteroncellclick,
      cellSuffix: getCellSuffix(layout.columnwidthslider), // TOOD: move to matrix cells or is it headers.measurements?
      errorMessage: layout.errormessage,
-      maxLoops
+      footnote: layout.footnote,
+      maxLoops,
+      subtitle: layout.subtitle,
+      title: layout.title
    },
    selection: {
      dimensionSelectionCounts: dimensionsInformation.map(dimensionInfo => dimensionInfo.qStateCounts.qSelected)
@@ -279,7 +282,8 @@ async function initializeTransformed ({ $element, layout, component }) {
        backgroundColorOdd: colors[`vColLib${layout.ColorSchemaP}`],
        color: layout.BodyTextColorSchema,
        fontFamily: layout.FontFamily,
-        fontSizeAdjustment: getFontSizeAdjustment(layout.lettersize)
+        fontSizeAdjustment: getFontSizeAdjustment(layout.lettersize),
+        textAlignment: layout.cellTextAlignment
      },
      semaphoreColors: {
        fieldsToApplyTo: {
--- a/src/main.less
+++ b/src/main.less
@@ -1,7 +1,9 @@
 .qv-object-qlik-smart-pivot {
  @TableBorder: 1px solid #d3d3d3;
  @KpiTableWidth: 230px;
-
+  .edit-mode{
+    pointer-events: none;
+  }
  ._cell(@Width: 50px) {
  	min-width: @Width!important;
  	max-width: @Width!important;
--- a/src/paint.jsx
+++ b/src/paint.jsx
@@ -11,10 +11,10 @@ export default async function paint ($element, layout, component) {
    component,
    layout
  });
-
+  const editmodeClass = component.inAnalysisState() ? '' : 'edit-mode';
  const jsx = (
    <React.Fragment>
-      <div className="kpi-table">
+      <div className={`kpi-table ${editmodeClass}`}>
        <HeadersTable
          data={state.data}
          general={state.general}
@@ -29,7 +29,7 @@ export default async function paint ($element, layout, component) {
          styling={state.styling}
        />
      </div>
-      <div className="data-table">
+      <div className={`data-table ${editmodeClass}`}>
        <HeadersTable
          data={state.data}
          general={state.general}
@@ -48,7 +48,6 @@ export default async function paint ($element, layout, component) {

  ReactDOM.render(jsx, $element[0]);

-
  // TODO: skipped the following as they weren't blockers for letting react handle rendering,
  // they are however the only reason we still depend on jQuery and should be removed as part of unnecessary dependencies issue
  $(`[tid="${layout.qInfo.qId}"] .data-table .row-wrapper`).on('scroll', function () {
@@ -82,8 +81,4 @@ export default async function paint ($element, layout, component) {
    $(`[tid="${layout.qInfo.qId}"] .tooltip`).delay(0)
      .hide(0);
  });
-
-  // TODO: excel export is broken in most browsers, fixing it has an issue of it's own (leaving it disabled for now)
-  // import { enableExcelExport } from './excel-export';
-  // enableExcelExport(layout, html);
 }
Author	SHA1	Message	Date
Christopher Lebond	47b4d1aa5b	Merge pull request #15 from qlik-oss/feature/QPE-484 [QPE-484] Edit mode interactions	2019-02-22 11:28:35 +01:00
Christopher Lebond	614d768eea	Merge pull request #10 from qlik-oss/QPE-477 [QPE-477] Definition object is Qlik standard	2019-02-22 10:41:36 +01:00
giovanni hanselius	0b3b7b3f57	Merge pull request #19 from qlik-oss/QPE-554 [QPE-554] text alignemt	2019-02-21 17:37:00 +01:00
giovanni hanselius	44b33b4c92	Merge pull request #16 from qlik-oss/feature/QPE-550 [QPE-550] fix excel export	2019-02-21 16:48:34 +01:00
ahmed-Bazzara	24edf1c6f4	values of text alignement property set to have lowercase	2019-02-21 12:02:42 +01:00
ahmed-Bazzara	bcb9d30237	sending the alignment value straight from props instead of numbers	2019-02-19 14:55:50 +01:00
ahmed-Bazzara	ec140efc56	Text alignment property added	2019-02-18 16:42:39 +01:00
Kristoffer Lind	b86806d4cd	cleanup tooltips (resulted in whatever header was last hovered to be appended to each column header in xls)	2019-02-14 15:14:23 +01:00
ahmed-Bazzara	db67b864ee	edit mode interaction prevented	2019-02-14 13:54:17 +01:00
Kristoffer Lind	c3651a37da	Merge branch 'master' into feature/QPE-550	2019-02-14 12:36:55 +01:00
Kristoffer Lind	8b843e028a	fix excel export	2019-02-14 11:08:34 +01:00
ahmed-Bazzara	c47b401a1d	typo in definiton object	2019-02-12 12:05:01 +01:00
ahmed-Bazzara	3c330465dd	Definition object is Qlik standard	2019-02-12 12:03:05 +01:00