datastake-daf 0.6.459 → 0.6.461

package/dist/components/index.js

@@ -14630,7 +14630,7 @@ function PdfView(_ref2) {
       });
       setPages(_pages);
     }
-  }, [sectionsConfig, isEvaluation, config === null || config === void 0 ? void 0 : config.length]);
+  }, [sectionsConfig, customMarginBottom, config === null || config === void 0 ? void 0 : config.length]);
   React.useEffect(() => {
     doSizing();
   }, [doSizing]);
@@ -26579,8 +26579,8 @@ function DataLinkFlat$1({
     return (dataLinkFormData || []).map(d => {
       const dataLinkData = d[dataLinkKey];
       return {
-        ...dataLinkData,
         ...d,
+        ...dataLinkData,
         dataLinkKey: undefined
       };
     });

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "datastake-daf",
-	"version": "0.6.459",
+	"version": "0.6.461",
 	"dependencies": {
 		"@ant-design/icons": "^5.2.5",
 		"@antv/g2": "^5.1.1",
@@ -18,7 +18,10 @@
 		"datastake-daf": "^0.6.378",
 		"dayjs": "^1.11.12",
 		"deepmerge": "^4.3.1",
+		"docx": "^9.5.1",
+		"docx-preview": "^0.3.7",
 		"dot-object": "^2.1.5",
+		"file-saver": "^2.0.5",
 		"leaflet": "^1.0.3",
 		"leaflet-editable": "^1.3.0",
 		"leaflet-geosearch": "^3.1.0",

package/src/@daf/core/components/Dashboard/PdfView/index.jsx

@@ -98,7 +98,7 @@ export default function PdfView({
       })
       setPages(_pages);
     }
-  }, [sectionsConfig, isEvaluation, config?.length]);
+  }, [sectionsConfig, customMarginBottom, config?.length]);
 
   useEffect(() => {
     doSizing();

package/src/@daf/core/components/Document/WordDocument/Preview/WordDocument.stories.js

@@ -0,0 +1,491 @@
+import WordDocumentPreview from "./index";
+
+export default {
+	title: "Core/Document/WordDocument",
+	component: WordDocumentPreview,
+	tags: ["autodocs"],
+};
+
+export const Primary = {
+	name: "WordDocument",
+	args: {
+		title: "React Word Document Example",
+		content: "This is a sample Word document created with docx library.",
+		fileName: "document.docx",
+		config: [
+			{
+				type: 'paragraph',
+				data: "This is a sample Word document created with docx library.",
+				meta: { bold: true, size: 32 },
+				style: {
+					spacing: { before: 200 }
+				}
+			}
+		]
+	}
+};
+
+export const CustomTitle = {
+	name: "Custom Title",
+	args: {
+		title: "My Custom Document Title",
+		content: "This document has a custom title and content. You can modify these props in Storybook!",
+		fileName: "custom-document.docx"
+	}
+};
+
+export const AllTypes = {
+	name: "All Element Types",
+	args: {
+		title: "Document with All Element Types",
+		content: "A comprehensive example showing all supported element types.",
+		fileName: "all-types-example.docx",
+		config: [
+			// Heading Example
+			{
+				type: 'heading',
+				data: 'Main Document Title',
+				style: {
+					heading: 'HEADING_1', // HeadingLevel.HEADING_1
+					spacing: { after: 200 }
+				}
+			},
+			// Paragraph Example
+			{
+				type: 'paragraph',
+				data: 'This is a regular paragraph with normal text. It demonstrates the paragraph type.',
+				meta: { size: 24 },
+				style: {
+					spacing: { after: 100 }
+				}
+			},
+			// Paragraph with Bold Text
+			{
+				type: 'paragraph',
+				data: 'This is a bold paragraph.',
+				meta: { bold: true, size: 24 },
+				style: {
+					spacing: { after: 100 }
+				}
+			},
+			// TextRun Example
+			{
+				type: 'textRun',
+				data: 'This is a text run with italic styling.',
+				meta: { italic: true, size: 22, color: '0000FF' },
+				style: {
+					spacing: { after: 100 }
+				}
+			},
+			// Heading Level 2
+			{
+				type: 'heading',
+				data: 'Lists Section',
+				style: {
+					heading: 'HEADING_2',
+					spacing: { before: 300, after: 200 }
+				}
+			},
+			// Bullet List Example
+			{
+				type: 'bulletList',
+				data: 'First bullet point',
+				style: {
+					level: 0,
+					spacing: { after: 50 }
+				}
+			},
+			{
+				type: 'bulletList',
+				data: 'Second bullet point',
+				style: {
+					level: 0,
+					spacing: { after: 50 }
+				}
+			},
+			{
+				type: 'bulletList',
+				data: 'Nested bullet point',
+				style: {
+					level: 1,
+					spacing: { after: 100 }
+				}
+			},
+			// Numbered List Example
+			{
+				type: 'numberedList',
+				data: 'First numbered item',
+				style: {
+					reference: 'default-numbering',
+					level: 0,
+					spacing: { after: 50 }
+				}
+			},
+			{
+				type: 'numberedList',
+				data: 'Second numbered item',
+				style: {
+					reference: 'default-numbering',
+					level: 0,
+					spacing: { after: 100 }
+				}
+			},
+			// Heading for Table Section
+			{
+				type: 'heading',
+				data: 'Table Section',
+				style: {
+					heading: 'HEADING_2',
+					spacing: { before: 300, after: 200 }
+				}
+			},
+			// Table Example
+			{
+				type: 'table',
+				data: [
+					['Header 1', 'Header 2', 'Header 3'],
+					['Row 1, Cell 1', 'Row 1, Cell 2', 'Row 1, Cell 3'],
+					['Row 2, Cell 1', 'Row 2, Cell 2', 'Row 2, Cell 3'],
+					['Row 3, Cell 1', 'Row 3, Cell 2', 'Row 3, Cell 3']
+				],
+				style: {
+					width: {
+						size: 100,
+						type: 'pct'
+					}
+				}
+			},
+			// Page Break Example
+			{
+				type: 'pageBreak'
+			},
+			// Content after page break
+			{
+				type: 'heading',
+				data: 'Page 2 - After Page Break',
+				style: {
+					heading: 'HEADING_1',
+					spacing: { after: 200 }
+				}
+			},
+			{
+				type: 'paragraph',
+				data: 'This content appears on a new page after the page break.',
+				meta: { size: 24 },
+				style: {
+					spacing: { after: 100 }
+				}
+			}
+		]
+	}
+};
+
+export const HeadingExample = {
+	name: "Heading Types",
+	args: {
+		title: "Heading Examples",
+		fileName: "headings-example.docx",
+		config: [
+			{
+				type: 'heading',
+				data: 'Heading Level 1',
+				style: { heading: 'HEADING_1', spacing: { after: 200 } }
+			},
+			{
+				type: 'heading',
+				data: 'Heading Level 2',
+				style: { heading: 'HEADING_2', spacing: { after: 200 } }
+			},
+			{
+				type: 'heading',
+				data: 'Heading Level 3',
+				style: { heading: 'HEADING_3', spacing: { after: 200 } }
+			}
+		]
+	}
+};
+
+export const TableExample = {
+	name: "Table Example",
+	args: {
+		title: "Table Document",
+		fileName: "table-example.docx",
+		config: [
+			{
+				type: 'heading',
+				data: 'Employee Data',
+				style: { heading: 'HEADING_1', spacing: { after: 200 } }
+			},
+			{
+				type: 'table',
+				data: [
+					['Employee ID', 'Name', 'Department', 'Salary'],
+					['001', 'John Doe', 'Engineering', '$75,000'],
+					['002', 'Jane Smith', 'Marketing', '$65,000'],
+					['003', 'Bob Johnson', 'Sales', '$70,000']
+				]
+			}
+		]
+	}
+};
+
+export const ListsExample = {
+	name: "Lists Example",
+	args: {
+		title: "Lists Document",
+		fileName: "lists-example.docx",
+		config: [
+			{
+				type: 'heading',
+				data: 'Shopping List (Bullets)',
+				style: { heading: 'HEADING_2', spacing: { after: 200 } }
+			},
+			{
+				type: 'bulletList',
+				data: 'Milk',
+				style: { level: 0 }
+			},
+			{
+				type: 'bulletList',
+				data: 'Bread',
+				style: { level: 0 }
+			},
+			{
+				type: 'bulletList',
+				data: 'Eggs',
+				style: { level: 0 }
+			},
+			{
+				type: 'heading',
+				data: 'Instructions (Numbered)',
+				style: { heading: 'HEADING_2', spacing: { before: 300, after: 200 } }
+			},
+			{
+				type: 'numberedList',
+				data: 'Preheat oven to 350°F',
+				style: { reference: 'default-numbering', level: 0 }
+			},
+			{
+				type: 'numberedList',
+				data: 'Mix ingredients in a bowl',
+				style: { reference: 'default-numbering', level: 0 }
+			},
+			{
+				type: 'numberedList',
+				data: 'Bake for 25 minutes',
+				style: { reference: 'default-numbering', level: 0 }
+			}
+		]
+	}
+};
+
+export const ReportTemplate = {
+	name: "Report Template (Like Image)",
+	args: {
+		title: "Inspection Report",
+		fileName: "inspection-report.docx",
+		config: [
+			// Image with Text Section 1
+			{
+				type: 'imageWithText',
+				data: {
+					imageTitle: 'Facility Overview - Main Entrance',
+					// Sample industrial facility image from Unsplash
+					imageUrl: 'https://images.unsplash.com/photo-1581094794329-c8112a89af12?w=600&h=400&fit=crop',
+					image: null, // Will be populated from imageUrl
+					imageWidth: 280,
+					imageHeight: 200,
+					text: 'Main entrance facility showing security gates and access control points. Observation date: 2025-10-13. Weather conditions: Clear. Temperature: 22°C.'
+				}
+			},
+			// Image with Text Section 2 - Image on RIGHT side
+			{
+				type: 'imageWithText',
+				data: {
+					imageTitle: 'Storage Area - Chemical Warehouse',
+					// Sample warehouse image from Unsplash
+					imageUrl: 'https://images.unsplash.com/photo-1553413077-190dd305871c?w=600&h=400&fit=crop',
+					image: null, // Will be populated from imageUrl
+					imageWidth: 280,
+					imageHeight: 200,
+					imagePosition: 'right', // Image on the right, text on the left
+					text: 'Chemical storage warehouse with proper ventilation and safety signage. All containers are properly labeled. Emergency equipment is accessible and well-maintained.'
+				}
+			},
+			// Main Takeaways Section with Border
+			{
+				type: 'borderedSection',
+				data: {
+					title: 'Provide your main takeaways here',
+					content: 'Editable - to be filled by the user\n\nThis is a bordered section where the user can add their main observations and conclusions from the inspection.'
+				},
+				style: {
+					margins: {
+						top: 300,
+						bottom: 300
+					}
+				}
+			},
+			// Mercury Management Section with percentage
+			{
+				type: 'commentSection',
+				data: {
+					title: 'Mercury management',
+					percentage: 51,
+					description: 'Automatic filled by comments contained in associated sub-criteria - editable',
+					comments: [
+						'Mercury storage areas are properly labeled and secured with restricted access',
+						'Safety protocols are documented and clearly displayed in work areas',
+						'Regular monitoring of mercury levels is conducted with weekly reports',
+						'Emergency response kits are available and inspected monthly',
+						'Staff training records are up to date for all personnel handling mercury'
+					]
+				}
+			},
+			// Cyanide Management Section with percentage
+			{
+				type: 'commentSection',
+				data: {
+					title: 'Cyanide management',
+					percentage: 51,
+					description: 'Automatic filled by comments contained in associated sub-criteria - editable',
+					comments: [
+						'Cyanide storage facilities meet international safety standards',
+						'Emergency response procedures are documented and regularly tested',
+						'Staff training on cyanide safety is up to date and comprehensive',
+						'Proper ventilation systems are installed and functioning correctly',
+						'Neutralization agents are stored nearby and easily accessible'
+					]
+				}
+			},
+			// Page Break
+			// {
+			// 	type: 'pageBreak'
+			// },
+			// Climate Change Section on new page
+			{
+				type: 'commentSection',
+				data: {
+					title: 'Climate change',
+					percentage: 51,
+					description: 'Automatic filled by comments contained in associated sub-criteria - editable',
+					comments: [
+						'Carbon emission reduction strategies are actively implemented',
+						'Energy efficiency measures have reduced consumption by 15% year-over-year',
+						'Renewable energy sources provide 30% of total energy requirements',
+						'Water conservation programs are in place with recycling systems',
+						'Environmental impact assessments are conducted quarterly'
+					]
+				}
+			}
+		]
+	}
+};
+
+export const ImageWithTextExample = {
+	name: "Image With Text Layout",
+	args: {
+		title: "Image and Text Layout Example",
+		fileName: "image-text-layout.docx",
+		config: [
+			{
+				type: 'imageWithText',
+				data: {
+					imageTitle: 'Image on Left Side',
+					// Sample office/building image from Unsplash
+					imageUrl: 'https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?w=600&h=400&fit=crop',
+					image: null,
+					imageWidth: 300,
+					imageHeight: 200,
+					imagePosition: 'left', // Default: image on left
+					text: 'This is a two-column layout with the image on the LEFT side and text on the right. Both columns have borders.'
+				}
+			},
+			{
+				type: 'imageWithText',
+				data: {
+					imageTitle: 'Image on Right Side',
+					// Sample technology image from Unsplash
+					imageUrl: 'https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=600&h=400&fit=crop',
+					image: null,
+					imageWidth: 300,
+					imageHeight: 200,
+					imagePosition: 'right', // Image on right
+					text: 'This shows the same two-column layout but with the image on the RIGHT side and text on the left. You can alternate the positions for visual variety.'
+				}
+			}
+		]
+	}
+};
+
+export const BorderedSectionExample = {
+	name: "Bordered Section Example",
+	args: {
+		title: "Bordered Section Example",
+		fileName: "bordered-section.docx",
+		config: [
+			{
+				type: 'borderedSection',
+				data: {
+					title: 'Important Notice',
+					content: 'This is a bordered section with a gray background. It can be used for editable areas, important notices, or user input fields.'
+				}
+			}
+		]
+	}
+};
+
+export const CommentSectionExample = {
+	name: "Comment Section Example",
+	args: {
+		title: "Comment Section Example",
+		fileName: "comment-section.docx",
+		config: [
+			{
+				type: 'commentSection',
+				data: {
+					title: 'Legitimacy of ASM',
+					percentage: 51,
+					description: 'Automatic filled by comments contained in associated sub-criteria - editable',
+					comments: []
+				}
+			},
+			{
+				type: 'commentSection',
+				data: {
+					title: 'Ensure traceability',
+					percentage: 51,
+					comments: [
+						'Comment 1',
+						'Comment 2',
+						'Comment 3',
+						'...'
+					]
+				}
+			},
+			{
+				type: 'commentSection',
+				data: {
+					title: 'ASM Companies',
+					percentage: 51,
+					description: 'Automatic filled by comments contained in associated sub-criteria - editable',
+					comments: [
+						'Comment 1',
+						'Comment 2',
+						'Comment 3',
+						'...'
+					]
+				}
+			},
+			{
+				type: 'commentSection',
+				data: {
+					title: 'Armed conflict',
+					percentage: 51,
+					description: 'Automatic filled by comments contained in associated sub-criteria - editable',
+					comments: []
+				}
+			}
+		]
+	}
+};

package/src/@daf/core/components/Document/WordDocument/Preview/index.js

@@ -0,0 +1,104 @@
+import React, { useEffect, useRef } from 'react';
+import { Packer } from 'docx';
+import { saveAs } from 'file-saver';
+import { renderAsync } from 'docx-preview';
+import createDocument from '../createDocument';
+
+const WordDocumentPreview = ({ title = "React Word Document Example", content = "This is a sample Word document created with docx library.", fileName = "document.docx", config = [] }) => {
+    const previewRef = useRef(null);
+
+    // Helper function to fetch image from URL and convert to buffer
+    const fetchImageAsBuffer = async (url) => {
+        try {
+            const response = await fetch(url);
+            const arrayBuffer = await response.arrayBuffer();
+            return arrayBuffer;
+        } catch (error) {
+            console.error('Error fetching image:', error);
+            return null;
+        }
+    };
+
+    // Process config to fetch images from URLs
+    const processConfig = async (configArray) => {
+        const processedConfig = await Promise.all(
+            configArray.map(async (item) => {
+                if (item.type === 'imageWithText' && item.data?.imageUrl && !item.data.image) {
+                    const imageBuffer = await fetchImageAsBuffer(item.data.imageUrl);
+                    return {
+                        ...item,
+                        data: {
+                            ...item.data,
+                            image: imageBuffer
+                        }
+                    };
+                }
+                return item;
+            })
+        );
+        return processedConfig;
+    };
+
+    const downloadDocument = async () => {
+        const processedConfig = await processConfig(config);
+        const doc = createDocument({ title, content, config: processedConfig });
+        const blob = await Packer.toBlob(doc);
+        saveAs(blob, fileName);
+    };
+
+    useEffect(() => {
+        const renderPreview = async () => {
+            if (previewRef.current) {
+                const processedConfig = await processConfig(config);
+                const doc = createDocument({ title, content, config: processedConfig });
+                const blob = await Packer.toBlob(doc);
+                
+                await renderAsync(blob, previewRef.current, null, {
+                    className: "docx-preview",
+                    inWrapper: true,
+                    ignoreWidth: false,
+                    ignoreHeight: false,
+                    renderHeaders: true,
+                    renderFooters: true,
+                });
+            }
+        };
+
+        renderPreview();
+    }, [title, content, config]);
+
+    return (
+        <div style={{ padding: '20px' }}>
+            <div style={{ marginBottom: '20px' }}>
+                <button 
+                    onClick={downloadDocument}
+                    style={{
+                        padding: '10px 20px',
+                        fontSize: '16px',
+                        backgroundColor: '#4CAF50',
+                        color: 'white',
+                        border: 'none',
+                        borderRadius: '4px',
+                        cursor: 'pointer'
+                    }}
+                >
+                    Download Word Document
+                </button>
+            </div>
+            
+            <div 
+                ref={previewRef}
+                style={{
+                    border: '1px solid #ddd',
+                    borderRadius: '4px',
+                    padding: '20px',
+                    backgroundColor: 'white',
+                    minHeight: '400px',
+                    maxWidth: '800px'
+                }}
+            />
+        </div>
+    );
+};
+
+export default WordDocumentPreview;