Feature/Redesign exported pdf boards

src/components/Settings/Export/Export.helpers.js

@@ -282,7 +282,8 @@ function getPDFTileData(tile, intl) {
   const label = tile.label || tile.labelKey || '';
   return {
     label: label.length ? intl.formatMessage({ id: label }) : label,
-    image: tile.image || ''
+    image: tile.image || '',
+    backgroundColor: tile.backgroundColor || ''
   };
 }
 
@@ -292,7 +293,10 @@ async function toDataURL(url, styles = {}, outputFormat = 'image/jpeg') {
     imageElement.onload = function() {
       const canvas = document.createElement('CANVAS');
       const ctx = canvas.getContext('2d');
-      const backgroundColor = styles.backgroundColor || 'white';
+      const backgroundColor =
+        styles.backgroundColor === '#d9d9d9'
+          ? 'white'
+          : styles.backgroundColor || 'white';
       const borderColor = styles.borderColor || null;
       canvas.height = 150;
       canvas.width = 150;
@@ -351,6 +355,29 @@ async function toDataURL(url, styles = {}, outputFormat = 'image/jpeg') {
   });
 }
 
+pdfMake.tableLayouts = {
+  exampleLayout: {
+    hLineWidth: function(i, node) {
+      return 2;
+    },
+    vLineWidth: function(i) {
+      return 2;
+    },
+    hLineColor: function(i) {
+      return '#ffffff';
+    },
+    vLineColor: function(i) {
+      return '#ffffff';
+    },
+    paddingLeft: function(i) {
+      return 0;
+    },
+    paddingRight: function(i, node) {
+      return 0;
+    }
+  }
+};
+
 async function generatePDFBoard(board, intl, breakPage = true, picsee = false) {
   const header = board.name || '';
   const columns =
@@ -361,15 +388,15 @@ async function generatePDFBoard(board, intl, breakPage = true, picsee = false) {
       widths: '*',
       body: [{}]
     },
-    layout: 'noBorders'
+    layout: 'exampleLayout'
   };
 
   if (breakPage) {
-    table.pageBreak = 'after';
+    table.pageBreak = 'before';
   }
 
   if (!board.tiles || !board.tiles.length) {
-    return [header, table];
+    return picsee ? [table] : [header, table];
   }
 
   const grid = board.isFixed
@@ -385,7 +412,7 @@ async function generatePDFBoard(board, intl, breakPage = true, picsee = false) {
 
   table.table.body = grid;
 
-  return [header, table];
+  return picsee ? [table] : [header, table];
 }
 
 function chunks(array, size) {
@@ -436,10 +463,12 @@ async function generateFixedBoard(board, rows, columns, intl, picsee = false) {
         currentRow =
           cont >= (currentRow + 1) * columns ? currentRow + 1 : currentRow;
         let pageBreak = false;
+
         if (
-          (currentRow + 1) % rows === 0 &&
+          (currentRow + 1) % rows === 1 &&
           pages.length > 0 &&
-          currentRow + 1 < pages.length * rows
+          currentRow + 1 < pages.length * rows &&
+          currentRow !== 0
         ) {
           pageBreak = true;
         }
@@ -524,15 +553,37 @@ const addTileToGrid = async (
       dataURL = NOT_FOUND_IMAGE;
     }
   }
+
+  const rgbToHex = rgbBackgroundColor => {
+    return (
+      '#' +
+      rgbBackgroundColor
+        .slice(4, -1)
+        .split(',')
+        .map(x => (+x).toString(16).padStart(2, 0))
+        .join('')
+    );
+  };
+
+  const hexBackgroundColor = tile.backgroundColor.startsWith('#')
+    ? tile.backgroundColor === '#d9d9d9'
+      ? '#FFFFFF'
+      : tile.backgroundColor
+    : rgbToHex(tile.backgroundColor);
+
   imageData = {
     image: dataURL,
     alignment: 'center',
-    width: '100'
+    width: '100',
+    fillColor: hexBackgroundColor,
+    border: [true, true, true, false]
   };
 
   const labelData = {
     text: label,
-    alignment: 'center'
+    alignment: 'center',
+    fillColor: hexBackgroundColor,
+    border: [true, false, true, true]
   };
 
   if (picsee) {
@@ -589,7 +640,6 @@ const addTileToGrid = async (
       imageData.width = '90';
     }
   }
-
   const displaySettings = getDisplaySettings();
   let value1,
     value2 = {};
@@ -607,14 +657,15 @@ const addTileToGrid = async (
     value1 = labelData;
   } else {
     // Add an empty label to have more vertical space between tiles.
+
     value1 = { text: ' ' };
     value2 = imageData;
   }
 
   // Add a page break when we reach the maximum number of rows on the
   // current page.
   if (pageBreak) {
-    value2.pageBreak = 'after';
+    value1.pageBreak = 'before';
   }
 
   if (grid[fixedRow]) {