datastake-daf 0.6.462 → 0.6.464

package/dist/components/index.js

@@ -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.462",
+	"version": "0.6.464",
 	"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/Document/WordDocument/Preview/WordDocument.stories.js

@@ -0,0 +1,441 @@
+import WordDocumentPreview from "./index";
+
+export default {
+	title: "Core/Document/WordDocument",
+	component: WordDocumentPreview,
+	tags: ["autodocs"],
+};
+
+
+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.',
+					hasSpacing: true
+				}
+			},
+			// 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: []
+				}
+			}
+		]
+	}
+};
+
+export const DocumentHeaderExample = {
+	name: "Document Header (Dynamic)",
+	args: {
+		title: "Document with Custom Header",
+		fileName: "document-header-example.docx",
+		config: [
+			// Document Header with icon and dynamic info fields
+			{
+				type: 'documentHeader',
+				data: {
+					title: 'Executive Monitoring Report',
+					icon: '/logo192.png', // Path to image (will be fetched automatically)
+					iconWidth: 60,
+					iconHeight: 60,
+					titleTextColor: '000000', // Black text (default)
+					infoFields: [
+						{ label: 'Mine:', value: '<Mine Name>' },
+						{ label: 'Date:', value: 'DD Mmm YY' },
+						{ label: 'Step:', value: '<Step>' },
+						{ label: 'Code:', value: '<Code>' }
+					]
+				}
+			},
+			// Add some content below the header
+			{
+				type: 'paragraph',
+				data: 'This document demonstrates the new documentHeader type with dynamic fields.',
+				meta: { size: 24 },
+				style: { spacing: { after: 200 } }
+			},
+			{
+				type: 'heading',
+				data: 'Report Content',
+				style: {
+					heading: 'HEADING_2',
+					spacing: { before: 200, after: 200 }
+				}
+			},
+			{
+				type: 'paragraph',
+				data: 'The document header above is fully dynamic. You can customize the title, add a logo on the right, and pass any number of info fields with their own labels and values.',
+				meta: { size: 22 },
+				style: { spacing: { after: 100 } }
+			}
+		]
+	}
+};
+
+export const SectionTitlesExample = {
+	name: "Section Titles Demo",
+	args: {
+		title: "Document with Section Titles",
+		fileName: "section-titles-example.docx",
+		config: [
+			// Document Header
+			{
+				type: 'documentHeader',
+				data: {
+					title: 'Executive Monitoring Report',
+					icon: '/logo192.png',
+					iconWidth: 60,
+					iconHeight: 60,
+					titleTextColor: '000000',
+					infoFields: [
+						{ label: 'Mine:', value: 'Gold Valley Mine' },
+						{ label: 'Date:', value: '13 Oct 2025' },
+						{ label: 'Step:', value: 'Phase 2' },
+						{ label: 'Code:', value: 'EMR-001' }
+					]
+				}
+			},
+			// Section 1 with title
+			{
+				title: '1. Environmental Compliance', // Section title
+				type: 'commentSection',
+				data: {
+					title: 'Mercury management',
+					percentage: 85,
+					description: 'Automatic filled by comments contained in associated sub-criteria - editable',
+					comments: [
+						'Mercury storage areas are properly labeled and secured',
+						'Safety protocols are documented and clearly displayed',
+						'Regular monitoring of mercury levels is conducted',
+						'Emergency response kits are available'
+					]
+				}
+			},
+			{
+				type: 'commentSection',
+				data: {
+					title: 'Cyanide management',
+					percentage: 78,
+					description: 'Automatic filled by comments contained in associated sub-criteria - editable',
+					comments: [
+						'Cyanide storage facilities meet international standards',
+						'Emergency response procedures are regularly tested',
+						'Staff training on cyanide safety is comprehensive',
+						'Proper ventilation systems are functioning correctly'
+					]
+				}
+			},
+			// Section 3 with title
+			{
+				title: '3. Climate Action', // Section title
+				type: 'borderedSection',
+				data: {
+					title: 'Provide your main takeaways here',
+					content: 'Editable section for climate change action plans and observations.'
+				}
+			},
+			// Section 4 with title and custom paragraph
+			{
+				title: '4. Recommendations', // Section title
+				type: 'paragraph',
+				data: 'Based on the findings above, we recommend implementing additional safety measures and conducting quarterly reviews of all environmental protocols.',
+				meta: { size: 22 },
+				style: { spacing: { after: 200 } }
+			}
+		]
+	}
+};

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

@@ -0,0 +1,118 @@
+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) => {
+                // Handle imageWithText type
+                if (item.type === 'imageWithText' && item.data?.imageUrl && !item.data.image) {
+                    const imageBuffer = await fetchImageAsBuffer(item.data.imageUrl);
+                    return {
+                        ...item,
+                        data: {
+                            ...item.data,
+                            image: imageBuffer
+                        }
+                    };
+                }
+                
+                // Handle documentHeader type with icon URL
+                if (item.type === 'documentHeader' && item.data?.icon && typeof item.data.icon === 'string') {
+                    const iconBuffer = await fetchImageAsBuffer(item.data.icon);
+                    return {
+                        ...item,
+                        data: {
+                            ...item.data,
+                            icon: iconBuffer
+                        }
+                    };
+                }
+                
+                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;