datastake-daf 0.6.463 → 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
       };
     });
@@ -42895,15 +42895,6 @@ const checkCondition = (condition, repeatValues, formsValue) => {
 };
 function showHideInput(input, formsValue, repeatIndex, repeatValues, setValues, ref) {
   if (input?.meta?.hidden === true) {
-    // Set default value for hidden fields
-    if (input?.meta?.defaultValue !== undefined && !propHasValue(formsValue[ref])) {
-      formsValue[ref] = input.meta.defaultValue;
-      if (setValues && typeof setValues === 'function') {
-        setValues({
-          ...formsValue
-        });
-      }
-    }
     return false;
   }
   if (input.showIf) {
@@ -45390,34 +45381,6 @@ function DynamicForm(_ref) {
       //   MainForm.resetFields();
     }
   }, [data]);
-
-  // Initialize default values for hidden fields
-  React.useEffect(() => {
-    if (Object.keys(form).length > 0) {
-      const updatedValues = _objectSpread2({}, values);
-      let hasChanges = false;
-
-      // Process all form fields to set default values for hidden fields
-      Object.keys(form).forEach(formKey => {
-        Object.keys(form[formKey]).forEach(fieldKey => {
-          var _field$meta, _field$meta2;
-          const field = form[formKey][fieldKey];
-          if ((field === null || field === void 0 || (_field$meta = field.meta) === null || _field$meta === void 0 ? void 0 : _field$meta.hidden) === true && (field === null || field === void 0 || (_field$meta2 = field.meta) === null || _field$meta2 === void 0 ? void 0 : _field$meta2.defaultValue) !== undefined) {
-            const fieldId = field.dataId || fieldKey;
-            if (!propHasValue(updatedValues[fieldId])) {
-              updatedValues[fieldId] = field.meta.defaultValue;
-              hasChanges = true;
-            }
-          }
-        });
-      });
-      if (hasChanges) {
-        setValues(updatedValues);
-        // Also set the values in the Ant Design form
-        MainForm.setFieldsValue(updatedValues);
-      }
-    }
-  }, [form]);
   const setSelectedForm = id => {
     setForms(Forms.map(form => {
       id === form.id ? form.selected = true : form.selected = false;
@@ -45454,7 +45417,7 @@ function DynamicForm(_ref) {
     }).every(key => key);
   };
   const getData = (name, input, value, commentValue, path, disabledPath) => {
-    var _input$meta, _input$meta2, _input$meta3, _input$meta4, _input$meta5, _input$meta6, _input$meta7, _input$meta8, _input$meta9, _input$meta10, _input$meta11, _input$meta12;
+    var _input$meta, _input$meta2, _input$meta3, _input$meta4, _input$meta5, _input$meta6, _input$meta7, _input$meta8, _input$meta9, _input$meta10;
     const props = {
       // placeholder: input.labelHint ? input.labelHint : getInputLabel(input, values, true),
       placeholder: input.labelHint,
@@ -45491,17 +45454,9 @@ function DynamicForm(_ref) {
       }
       value = fileList;
     }
-
-    // Handle default values for hidden fields
-    if ((input === null || input === void 0 || (_input$meta7 = input.meta) === null || _input$meta7 === void 0 ? void 0 : _input$meta7.hidden) === true && (input === null || input === void 0 || (_input$meta8 = input.meta) === null || _input$meta8 === void 0 ? void 0 : _input$meta8.defaultValue) !== undefined && !propHasValue(value)) {
-      value = input.meta.defaultValue;
-      if (typeof path === 'string') {
-        dot__default["default"].str(path, value, values);
-      }
-    }
     const config = {
       name,
-      call: input.call ? input.call : input === null || input === void 0 || (_input$meta9 = input.meta) === null || _input$meta9 === void 0 ? void 0 : _input$meta9.call,
+      call: input.call ? input.call : input === null || input === void 0 || (_input$meta7 = input.meta) === null || _input$meta7 === void 0 ? void 0 : _input$meta7.call,
       automaticallyLink: input.automaticallyLink,
       props,
       formsValue: values,
@@ -45513,8 +45468,8 @@ function DynamicForm(_ref) {
       updateOptions: input.updateOptions || false,
       options: input.options,
       optionGroup: input.optionGroup,
-      optionsFilter: input === null || input === void 0 || (_input$meta10 = input.meta) === null || _input$meta10 === void 0 ? void 0 : _input$meta10.optionsFilter,
-      filterCond: input === null || input === void 0 || (_input$meta11 = input.meta) === null || _input$meta11 === void 0 ? void 0 : _input$meta11.filterCond,
+      optionsFilter: input === null || input === void 0 || (_input$meta8 = input.meta) === null || _input$meta8 === void 0 ? void 0 : _input$meta8.optionsFilter,
+      filterCond: input === null || input === void 0 || (_input$meta9 = input.meta) === null || _input$meta9 === void 0 ? void 0 : _input$meta9.filterCond,
       disableOtherFields: input.disableOtherFields,
       updateOtherFields: input.updateOtherFields,
       repeatLabel: input.repeatLabel,
@@ -45524,7 +45479,7 @@ function DynamicForm(_ref) {
       restricted: input.restricted || false,
       totalMax: input.totalMax,
       country: input.country || undefined,
-      address: (input === null || input === void 0 || (_input$meta12 = input.meta) === null || _input$meta12 === void 0 ? void 0 : _input$meta12.address) || undefined,
+      address: (input === null || input === void 0 || (_input$meta10 = input.meta) === null || _input$meta10 === void 0 ? void 0 : _input$meta10.address) || undefined,
       stakeholderId: input.stakeholderId,
       preSelected,
       addressData,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "datastake-daf",
-	"version": "0.6.463",
+	"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;