ui-soxo-bootstrap-core 2.6.40-dev.17 → 2.6.40-dev.18

package/core/lib/modules/generic/generic-list/ExportReactCSV.js

@@ -122,17 +122,20 @@ export const ExportReactCSV = ({
     const pdfDoc = await PDFDocument.create();
     const font = await pdfDoc.embedFont(StandardFonts.Helvetica);
     const boldFont = await pdfDoc.embedFont(StandardFonts.HelveticaBold);
-    const pageSize = [842, 595];
-    const margin = 30;
-    const rowHeight = 20;
-    const titleHeight = 38;
-    const fontSize = 8;
-    const headerFontSize = 8;
     const headersToUse = headers?.length
       ? headers
       : Object.keys(csvData?.[0] || {}).map((key) => ({ label: key, key }));
+    const pageSize = headersToUse.length > 12 ? [1190, 842] : [842, 595];
+    const margin = 30;
+    const minRowHeight = 20;
+    const titleHeight = 38;
+    const fontSize = headersToUse.length > 12 ? 7 : 8;
+    const headerFontSize = headersToUse.length > 12 ? 7 : 8;
+    const lineHeight = fontSize + 2;
+    const headerLineHeight = headerFontSize + 2;
+    const cellPaddingX = 4;
+    const cellPaddingY = 5;
     const availableWidth = pageSize[0] - margin * 2;
-    const columnWidth = headersToUse.length ? availableWidth / headersToUse.length : availableWidth;
     let page;
     let y;
 
@@ -142,15 +145,173 @@ export const ExportReactCSV = ({
       return String(value);
     };
 
-    const fitText = (text, width, textFont, size) => {
-      const sanitizedText = sanitizeValue(text);
-      if (textFont.widthOfTextAtSize(sanitizedText, size) <= width) return sanitizedText;
+    const getTextWidth = (text, textFont, size) => textFont.widthOfTextAtSize(sanitizeValue(text), size);
+
+    const splitLongWord = (word, maxWidth, textFont, size) => {
+      const characters = Array.from(word);
+      const chunks = [];
+      let chunk = '';
+
+      characters.forEach((character) => {
+        const nextChunk = `${chunk}${character}`;
+
+        if (chunk && getTextWidth(nextChunk, textFont, size) > maxWidth) {
+          chunks.push(chunk);
+          chunk = character;
+        } else {
+          chunk = nextChunk;
+        }
+      });
+
+      if (chunk) chunks.push(chunk);
+      return chunks;
+    };
+
+    const wrapText = (value, maxWidth, textFont, size) => {
+      const text = sanitizeValue(value);
+      const usableWidth = Math.max(maxWidth, 1);
+      const paragraphs = text.split(/\r?\n/);
+
+      return paragraphs.flatMap((paragraph) => {
+        const words = paragraph.split(/\s+/).filter(Boolean);
+        const lines = [];
+        let line = '';
+
+        if (!words.length) return [''];
+
+        words.forEach((word) => {
+          if (getTextWidth(word, textFont, size) > usableWidth) {
+            if (line) {
+              lines.push(line);
+              line = '';
+            }
+
+            const chunks = splitLongWord(word, usableWidth, textFont, size);
+            chunks.forEach((chunk, chunkIndex) => {
+              if (chunkIndex === chunks.length - 1) {
+                line = chunk;
+              } else {
+                lines.push(chunk);
+              }
+            });
+
+            return;
+          }
+
+          const nextLine = line ? `${line} ${word}` : word;
+          if (getTextWidth(nextLine, textFont, size) <= usableWidth) {
+            line = nextLine;
+          } else {
+            if (line) lines.push(line);
+            line = word;
+          }
+        });
+
+        if (line) lines.push(line);
+        return lines;
+      });
+    };
+
+    const getColumnWidths = () => {
+      if (!headersToUse.length) return [availableWidth];
+
+      const sampleRows = (csvData || []).slice(0, 100);
+      const minWidths = [];
+      const preferredWidths = headersToUse.map((header, index) => {
+        const label = sanitizeValue(header.label);
+        const compactColumn = label === '#' || ['slno', 'sl no'].includes(label.toLowerCase());
+        const minWidth = compactColumn ? 28 : 36;
+        const values = [label, ...sampleRows.map((row) => sanitizeValue(row[header.key]))];
+        const longestValueWidth = values.reduce((maxWidth, value) => Math.max(maxWidth, getTextWidth(value, font, fontSize)), 0);
+        const longestWordWidth = values.reduce((maxWidth, value) => {
+          const words = value.split(/\s+/).filter(Boolean);
+          return words.reduce((wordMaxWidth, word) => Math.max(wordMaxWidth, getTextWidth(word, font, fontSize)), maxWidth);
+        }, 0);
+        const headerWidth = getTextWidth(label, boldFont, headerFontSize);
+        const preferredWidth = Math.max(
+          minWidth,
+          Math.min(longestValueWidth + cellPaddingX * 2, compactColumn ? 48 : 130),
+          Math.min(longestWordWidth + cellPaddingX * 2, compactColumn ? 48 : 95),
+          headerWidth + cellPaddingX * 2
+        );
+
+        minWidths[index] = minWidth;
+        return preferredWidth;
+      });
+
+      const minTotal = minWidths.reduce((total, width) => total + width, 0);
+      const preferredTotal = preferredWidths.reduce((total, width) => total + width, 0);
+
+      if (preferredTotal <= availableWidth) {
+        const extraWidth = availableWidth - preferredTotal;
+        return preferredWidths.map((width) => width + (extraWidth * width) / preferredTotal);
+      }
 
-      let fittedText = sanitizedText;
-      while (fittedText.length && textFont.widthOfTextAtSize(`${fittedText}...`, size) > width) {
-        fittedText = fittedText.slice(0, -1);
+      if (minTotal >= availableWidth) {
+        return minWidths.map((width) => (width * availableWidth) / minTotal);
       }
-      return fittedText ? `${fittedText}...` : '';
+
+      const flexibleTotal = preferredWidths.reduce((total, width, index) => total + (width - minWidths[index]), 0);
+      const extraWidth = availableWidth - minTotal;
+
+      return preferredWidths.map((width, index) => {
+        const flexibleWidth = width - minWidths[index];
+        return minWidths[index] + (extraWidth * flexibleWidth) / flexibleTotal;
+      });
+    };
+
+    const columnWidths = getColumnWidths();
+
+    const getMaxLineCount = (cellLines) => Math.max(1, ...cellLines.map((lines) => lines.length));
+
+    const getRowHeight = (cellLines, rowLineHeight) =>
+      Math.max(minRowHeight, getMaxLineCount(cellLines) * rowLineHeight + cellPaddingY * 2);
+
+    const drawTableRow = (cellLines, rowHeight, options) => {
+      let x = margin;
+
+      cellLines.forEach((lines, index) => {
+        const width = columnWidths[index] || availableWidth;
+        page.drawRectangle({
+          x,
+          y: y - rowHeight,
+          width,
+          height: rowHeight,
+          color: options.backgroundColor,
+          borderColor: options.borderColor,
+          borderWidth: 0.5,
+        });
+
+        lines.forEach((line, lineIndex) => {
+          page.drawText(line, {
+            x: x + cellPaddingX,
+            y: y - cellPaddingY - options.fontSize - lineIndex * options.lineHeight,
+            size: options.fontSize,
+            font: options.font,
+            color: options.textColor,
+          });
+        });
+
+        x += width;
+      });
+
+      y -= rowHeight;
+    };
+
+    const headerCellLines = headersToUse.map((header, index) =>
+      wrapText(header.label, columnWidths[index] - cellPaddingX * 2, boldFont, headerFontSize)
+    );
+    const headerRowHeight = getRowHeight(headerCellLines, headerLineHeight);
+
+    const drawHeader = () => {
+      drawTableRow(headerCellLines, headerRowHeight, {
+        backgroundColor: rgb(0.92, 0.94, 0.96),
+        borderColor: rgb(0.72, 0.75, 0.78),
+        font: boldFont,
+        fontSize: headerFontSize,
+        lineHeight: headerLineHeight,
+        textColor: rgb(0.1, 0.1, 0.1),
+      });
     };
 
     const addPage = () => {
@@ -166,57 +327,67 @@ export const ExportReactCSV = ({
       });
 
       y -= titleHeight;
+      drawHeader();
+    };
 
-      headersToUse.forEach((header, index) => {
-        const x = margin + index * columnWidth;
-        page.drawRectangle({
-          x,
-          y: y - 5,
-          width: columnWidth,
-          height: rowHeight,
-          color: rgb(0.92, 0.94, 0.96),
-          borderColor: rgb(0.72, 0.75, 0.78),
-          borderWidth: 0.5,
-        });
-        page.drawText(fitText(header.label, columnWidth - 8, boldFont, headerFontSize), {
-          x: x + 4,
-          y: y + 1,
-          size: headerFontSize,
-          font: boldFont,
-          color: rgb(0.1, 0.1, 0.1),
+    const drawDataRow = (row) => {
+      const rowFont = row.isSummaryRow ? boldFont : font;
+      const cellLines = headersToUse.map((header, index) =>
+        wrapText(row[header.key], columnWidths[index] - cellPaddingX * 2, rowFont, fontSize)
+      );
+      let remainingCellLines = cellLines.map((lines) => (lines.length ? lines : ['']));
+      const fullPageDataHeight = pageSize[1] - margin * 2 - titleHeight - headerRowHeight;
+
+      while (remainingCellLines.some((lines) => lines.length)) {
+        const rowHeight = getRowHeight(remainingCellLines, lineHeight);
+        const availableHeight = y - margin;
+
+        if (rowHeight > availableHeight && rowHeight <= fullPageDataHeight) {
+          addPage();
+          continue;
+        }
+
+        const maxLinesOnPage =
+          rowHeight > availableHeight
+            ? Math.max(1, Math.floor((availableHeight - cellPaddingY * 2) / lineHeight))
+            : getMaxLineCount(remainingCellLines);
+        const segmentCellLines = remainingCellLines.map((lines) => lines.slice(0, maxLinesOnPage));
+        const segmentHeight = getRowHeight(segmentCellLines, lineHeight);
+
+        if (segmentHeight > availableHeight && availableHeight < fullPageDataHeight) {
+          addPage();
+          continue;
+        }
+
+        drawTableRow(segmentCellLines, segmentHeight, {
+          backgroundColor: row.isSummaryRow ? rgb(0.97, 0.97, 0.97) : rgb(1, 1, 1),
+          borderColor: rgb(0.82, 0.84, 0.86),
+          font: rowFont,
+          fontSize,
+          lineHeight,
+          textColor: rgb(0.12, 0.12, 0.12),
         });
-      });
 
-      y -= rowHeight;
+        remainingCellLines = remainingCellLines.map((lines) => lines.slice(maxLinesOnPage));
+        if (remainingCellLines.some((lines) => lines.length)) addPage();
+      }
     };
 
     addPage();
 
     (csvData || []).forEach((row) => {
-      if (y < margin + rowHeight) addPage();
+      drawDataRow(row);
+    });
 
-      headersToUse.forEach((header, index) => {
-        const x = margin + index * columnWidth;
-        page.drawRectangle({
-          x,
-          y: y - 5,
-          width: columnWidth,
-          height: rowHeight,
-          color: row.isSummaryRow ? rgb(0.97, 0.97, 0.97) : rgb(1, 1, 1),
-          borderColor: rgb(0.82, 0.84, 0.86),
-          borderWidth: 0.5,
-        });
-        page.drawText(fitText(row[header.key], columnWidth - 8, row.isSummaryRow ? boldFont : font, fontSize), {
-          x: x + 4,
-          y: y + 1,
-          size: fontSize,
-          font: row.isSummaryRow ? boldFont : font,
-          color: rgb(0.12, 0.12, 0.12),
-        });
+    if (!csvData?.length) {
+      page.drawText('No records found', {
+        x: margin,
+        y: y + 1,
+        size: fontSize,
+        font,
+        color: rgb(0.12, 0.12, 0.12),
       });
-
-      y -= rowHeight;
-    });
+    }
 
     const pdfBytes = await pdfDoc.save();
     const blob = new Blob([pdfBytes], { type: 'application/pdf' });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui-soxo-bootstrap-core",
-  "version": "2.6.40-dev.17",
+  "version": "2.6.40-dev.18",
   "description": "All the Core Components for you to start",
   "keywords": [
     "all in one"