datastake-daf 0.6.183 → 0.6.185

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "datastake-daf",
-	"version": "0.6.183",
+	"version": "0.6.185",
 	"dependencies": {
 		"@ant-design/icons": "^5.2.5",
 		"@antv/g2": "^5.1.1",
@@ -15,7 +15,7 @@
 		"buffer": "^6.0.3",
 		"countries-list": "^2.6.1",
 		"country-city-location": "^1.0.13",
-		"datastake-daf": "^0.5.780",
+		"datastake-daf": "0.6.184",
 		"dayjs": "^1.11.12",
 		"deepmerge": "^4.3.1",
 		"dot-object": "^2.1.5",

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

@@ -8,6 +8,7 @@ import CustomIcon from "../../Icon/CustomIcon.jsx";
 import ComponentWithFocus from "../ComponentWithFocus/index.jsx";
 import { formatClassname } from "../../../../../helpers/ClassesHelper";
 import Filters from "../../Filters/FloatingFilters/index.js";
+import { useResizeContext } from "../../../context/Resize/index.js";
 
 /**
  * Globe Component
@@ -129,6 +130,9 @@ function Globe({
 		[data],
 	);
 
+	// Get resize context for sidebar state changes
+	const { isCollapsed } = useResizeContext();
+
 	// Use custom hook to configure globe functionality
 	const { container, activeMarker, mapOptionsButtonsConfig, forceResize } = useGlobe({
 		data: mappedData,
@@ -171,6 +175,36 @@ function Globe({
 		}
 	}, [forceResize]);
 
+	// Force resize when sidebar state changes (handles width changes)
+	useEffect(() => {
+		if (forceResize) {
+			// Trigger resize when sidebar collapses/expands
+			const timer = setTimeout(() => {
+				forceResize();
+			}, 100);
+
+			return () => clearTimeout(timer);
+		}
+	}, [isCollapsed, forceResize]);
+
+	// Add window resize listener as backup
+	useEffect(() => {
+		const handleWindowResize = () => {
+			if (forceResize) {
+				// Small delay to ensure DOM has updated
+				setTimeout(() => {
+					forceResize();
+				}, 100);
+			}
+		};
+
+		window.addEventListener('resize', handleWindowResize);
+		
+		return () => {
+			window.removeEventListener('resize', handleWindowResize);
+		};
+	}, [forceResize]);
+
 	return (
 		<ComponentWithFocus>
 			<Style className={formatClassname([showSider && activeMarker && "with-sider"])}>

package/src/@daf/core/components/Dashboard/Globe/style.js

@@ -5,7 +5,8 @@ const Style = styled.div`
   flex-direction: row;
   position: relative;
   width: 100%;
-  height: 472px;
+  height: 100%;
+  min-height: 400px;
 
   .filter-cont {
     position: absolute; 
@@ -96,6 +97,8 @@ const Style = styled.div`
     flex: 1;
     background: rgb(0, 0, 0);
     z-index: 1;
+    width: 100%;
+    height: 100%;
     
     /* Mapbox GL JS specific styles */
     .mapboxgl-ctrl-top-right {

package/src/@daf/core/components/ExcelTest/ExcelTest.stories.js

@@ -0,0 +1,38 @@
+import ExcelTest from "./index";
+import ThemeLayout from "../ThemeLayout";
+import { storyData } from "./storyconfig";
+import PlanningDemo from "./planningDemo";
+
+export default {
+	title: "Core/ExcelTest",
+	component: ExcelTest,
+	tags: ["autodocs"],
+	decorators: [
+		(Story) => (
+			<div style={{ margin: "2em" }}>
+				<ThemeLayout>
+					<Story />
+				</ThemeLayout>
+			</div>
+		),
+	],
+};
+
+export const Primary = {
+	name: "Form Test Default",
+	args: {
+		// Add any props your component needs here
+		// Currently your component doesn't accept props but you might want to pass data
+	},
+};
+
+export const Planning = {
+	name: "Planning Configuration",
+	render: () => (
+		<div style={{ margin: "2em" }}>
+			<ThemeLayout>
+				<PlanningDemo />
+			</ThemeLayout>
+		</div>
+	),
+};

package/src/@daf/core/components/ExcelTest/config.js

@@ -0,0 +1,254 @@
+import { showHideInput } from "../ViewForm/helper";
+import { renderDateFormatted } from "../../../../helpers/Forms";
+
+
+// Helper function to format references - show only one line to distinguish each
+const formatReferences = (description) => {
+    if (!description) return "";
+    return description.split("<br>")
+        .filter(line => line.trim())
+        .map(line => line.trim().replace(/^-+\s*/, '')) // Remove existing dashes
+        .filter(line => line) // Remove empty lines
+        .join("\n"); // Single line separation
+};
+
+// Helper function to format comments
+const formatComments = (comments) => {
+    if (!comments || !Array.isArray(comments)) return "";
+    return comments.map(comment => `- ${comment.text || comment.description || ""}`).join("\n");
+};
+
+// Helper function to format verification method - remove <br> and add appropriate separators
+const formatVerificationMethod = (description, forCSV = false) => {
+    if (!description) return "";
+    const lines = description.split("<br>")
+        .filter(line => line.trim())
+        .map(line => line.trim());
+    
+    // For CSV export, use semicolon separator to avoid newline issues
+    if (forCSV) {
+        return lines.join("; ");
+    }
+    
+    // For display, use newlines
+    return lines.join("\n");
+};
+
+// Helper function to get description by language
+const getDescriptionByLanguage = (descriptions, language = "en") => {
+    if (!descriptions) return "";
+    return descriptions[language] || descriptions.en || descriptions.sp || descriptions.fr || "";
+};
+
+const getAspectToVerify = (form, sectionKey, kidPosition, country) => {
+    const titlesSection = form?.titles?.[sectionKey];
+    if (!titlesSection) return "";
+    
+    const matchingTitles = Object.keys(titlesSection)
+        .filter(key => key.startsWith('title'))
+        .map(key => titlesSection[key])
+        .filter(title => {
+            if (!title.showIf) return false;
+            const condition = title.showIf.toLowerCase();
+            if (condition.includes('country is')) {
+                const requiredCountry = condition.replace('country is', '').trim();
+                return country && country.toLowerCase() === requiredCountry.toLowerCase();
+            }
+            return true;
+        })
+        .sort((a, b) => (a.position || 0) - (b.position || 0)); 
+    
+    if (matchingTitles.length === 0) return "";
+    
+    let selectedTitle = matchingTitles[0]; 
+    
+    for (let i = 0; i < matchingTitles.length; i++) {
+        const titlePosition = matchingTitles[i].position || 0;
+        if (titlePosition <= kidPosition) {
+            selectedTitle = matchingTitles[i];
+        } else {
+            break;
+        }
+    }
+    
+
+    const label = selectedTitle?.label || "";
+    return label.replace(/\\"/g, '"').replace(/\n/g, " ").replace(/\r/g, " ").replace(/\t/g, " ").trim();
+};
+
+export const fixDataForExcel = (originalData, stepParam = 1, module = "", t = (key) => key) => {
+    const {form, data} = originalData;
+    const language = data?.user?.language || "en";
+    const step = Number(stepParam);
+    // Table 1 data - Basic Information (vertical key-value format)
+    const table1Data = [
+        { key: t('mine'), value: data?.location?.name || "" },
+        { key: t('module'), value: module },
+        { key: t('sources'), value: "" }, // Leave blank as requested
+        { key: t('version'), value: data?.version || data?.location?.version || "" },
+        { key: t('date'), value: renderDateFormatted(new Date().toISOString(), 'DD MMM YYYY', (language === 'sp' ? 'es' : language) || 'en') } // Current date in YYYY-MM-DD format
+    ];
+    
+    console.log("Table 1 Data:", table1Data);
+
+    // Table 2 data - Detailed Evaluation Data
+    const table2Data = [];
+    
+    const sections = (form?.identification?.category?.options || [])?.map((option) => ({
+        group: option.label,
+        key: option.value,
+        criterias: (form?.identification?.subCategory?.options || [])
+            .filter((_option) => {
+                const categoryFilter = _option?.filters?.find((f) => f.name === "category");
+                const stepFilter = _option?.filters?.find((f) => f.name === "step");
+
+                return (
+                    (stepFilter?.value || 1) === step &&
+                    (categoryFilter?.value || []).includes(option.value) &&
+                    !!(data?.criteria || []).find(
+                        (c) => c.subCategory === _option.value,
+                    )
+                );
+            })
+            .map((_option) => {
+                const _criteria = (data?.criteria || []).find(
+                    (c) => c.subCategory === _option.value,
+                );
+                const subCategoryForm = form[_criteria.subCategory];
+
+                const kids = Object.keys(subCategoryForm)
+                    .filter((k) => {
+                        const val = subCategoryForm[k];
+                        if (val.showIf) {
+                            const show = showHideInput(val, data);
+                            return show;
+                        }
+                        return val?.type === "group";
+                    })
+                    .sort((a, b) => {
+                        const valA = subCategoryForm[a];
+                        const valB = subCategoryForm[b];
+                        return valA?.position - valB?.position;
+                    })
+                    .map((k) => {
+                        const formVal = subCategoryForm[k];
+                        const evalData = _criteria[k];
+                        const meta = (_criteria?.meta?.inputs || {})[k];
+
+                        // Get reference description from form object description field
+                        const referenceDescription = formVal.description || "";
+                        
+                        // Get verification method from form meta
+                        const verificationMethod = getDescriptionByLanguage(
+                            formVal?.meta?.groupInfo?.description,
+                            language
+                        );
+
+                        return {
+                            key: k,
+                            group: option.value,
+                            criteria: formVal.label,
+                            position: formVal.position || 0, // Include position for title mapping
+                            lastUpdate: _criteria.updatedAt,
+                            meta,
+                            referenceDescription,
+                            verificationMethod,
+                            ...evalData,
+                        };
+                    });
+
+                return {
+                    key: _option.value,
+                    group: option.value,
+                    criteria: _option.label,
+                    completion: _criteria.completion,
+                    evaluationScore: _criteria.evaluationScore,
+                    description: (form?.identification?.dscription?.options || []).find(
+                        (d) => d.value === _option.value,
+                    )?.label || "-",
+                    lastUpdate: _criteria.updatedAt,
+                    kids,
+                };
+            })
+    }));
+
+    // Process sections to create table 2 data
+    sections.forEach((section) => {
+        section.criterias.forEach((criteria) => {
+            criteria.kids.forEach((kid) => {
+                const row = {
+                    stage: `0${step}`,
+                    aspect: section.group, // From sections group
+                    criteria: criteria.criteria, // From criterias -> criteria key
+                    aspectToVerify: getAspectToVerify(form, criteria.key, kid.position, data?.location?.country), // Get from titles based on showIf condition and actual kid position
+                    reference: formatReferences(kid.referenceDescription), // Format references properly
+                    subcriteria: kid.criteria, // From kids -> criteria key
+                    verificationMethod: formatVerificationMethod(kid.verificationMethod || ""), // Remove <br> and add newlines
+                    valuation: (kid?.valuation === 'na' ? 'N/A' : `${kid.valuation}%`) ?? "", // Add % formatting
+                    comments: formatComments(kid.comment), // Format comments with - on each line
+                    totalValuation: (criteria?.evaluationScore === 'na' ? 'N/A' : `${criteria.evaluationScore}%`) ?? "" // Add % formatting
+                };
+                table2Data.push(row);
+            });
+        });
+    });
+
+    console.log("Table 2 Data:", table2Data);
+    console.log("Sections:", sections);
+
+    return {
+        table1: table1Data,
+        table2: table2Data,
+        sections: sections
+    };
+};
+
+
+export const exportToCSV = (data, filename = "evaluation_data.csv", t = (key) => key) => {
+    const { table1, table2 } = data;
+    
+    let csvContent = "";
+    
+    // Add Table 1 data (vertical key-value format, no title)
+    table1.forEach(item => {
+        csvContent += `"${item.key}","${item.value}"\n`;
+    });
+    csvContent += "\n"; // Empty line separator
+    
+    // Add Table 2 header and data (no title, use translation function for headers)
+    csvContent += `"${t('stage')}","${t('aspect')}","${t('criteria')}","${t('aspectToVerify')}","${t('reference')}","${t('subcriteria')}","${t('verificationMethod')}","${t('valuation')}","${t('comments')}","${t('totalValuation')}"\n`;
+    
+    table2.forEach(row => {
+        const csvRow = [
+            row.stage,
+            row.aspect,
+            row.criteria,
+            (row.aspectToVerify || "").replace(/"/g, '""'), // Escape quotes properly
+            (row.reference || "").replace(/"/g, '""'), // Escape quotes
+            row.subcriteria,
+            formatVerificationMethod(row.verificationMethod || "", true).replace(/"/g, '""'), // Format for CSV and escape quotes
+            row.valuation,
+            (row.comments || "").replace(/"/g, '""'), // Escape quotes
+            row.totalValuation
+        ].map(field => `"${field}"`).join(",");
+        
+        csvContent += csvRow + "\n";
+    });
+    
+    return csvContent;
+};
+
+// Utility function to download CSV file
+export const downloadCSV = (data, filename = "evaluation_data.csv", t = (key) => key) => {
+    const csvContent = exportToCSV(data, filename, t);
+    const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
+    const link = document.createElement("a");
+    const url = URL.createObjectURL(blob);
+    
+    link.setAttribute("href", url);
+    link.setAttribute("download", filename);
+    link.style.visibility = 'hidden';
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+};

package/src/@daf/core/components/ExcelTest/index.jsx

@@ -0,0 +1,139 @@
+import React, { useEffect, useState } from 'react'
+import { storyData } from './storyconfig'
+import { fixDataForExcel, downloadCSV } from './config'
+
+function ExcelTest() {
+    const [excelData, setExcelData] = useState(null);
+    
+    // Simple translation function for testing
+    const t = (key) => {
+        const translations = {
+            mine: "Mine",
+            module: "Module", 
+            sources: "Sources",
+            version: "Version",
+            date: "Date",
+            stage: "Stage",
+            aspect: "Aspect",
+            criteria: "Criteria",
+            aspectToVerify: "Aspect to Verify",
+            reference: "Reference",
+            subcriteria: "Subcriteria",
+            verificationMethod: "Verification Method",
+            valuation: "Valuation",
+            comments: "Comments",
+            totalValuation: "Total Valuation"
+        };
+        return translations[key] || key;
+    };
+    
+    useEffect(() => {
+        // Test the function with sample parameters including translation function
+        const response = fixDataForExcel(storyData, 1, "Sample Module", t);
+        setExcelData(response);
+        console.log("Excel Data Generated:", response);
+    }, []);
+
+    return (
+        <div style={{ padding: '20px', fontFamily: 'Arial, sans-serif' }}>
+            <h1>Form Test - Excel Data Mapping</h1>
+            
+            {excelData && (
+                <>
+                    <div style={{ marginBottom: '20px' }}>
+                        <button 
+                            onClick={() => downloadCSV(excelData, 'evaluation_data.csv', t)}
+                            style={{
+                                backgroundColor: '#4CAF50',
+                                color: 'white',
+                                padding: '10px 20px',
+                                border: 'none',
+                                borderRadius: '4px',
+                                cursor: 'pointer',
+                                fontSize: '16px'
+                            }}
+                        >
+                            📥 Download as CSV
+                        </button>
+                        <p style={{ marginTop: '5px', color: '#666', fontSize: '14px' }}>
+                            Click to download the data as CSV file for Excel import
+                            <br />
+                            <strong>Note:</strong> For duplicate values (like same Stage), manually merge cells in Excel after import.
+                        </p>
+                    </div>
+                
+                </>
+            )}
+            
+            {excelData && (
+                <>
+                    <h2>Basic Information</h2>
+                    <div style={{ marginBottom: '30px' }}>
+                        <table border="1" style={{ borderCollapse: 'collapse', width: '50%' }}>
+                            <thead>
+                                <tr>
+                                    <th style={{ padding: '8px', backgroundColor: '#f5f5f5' }}>Field</th>
+                                    <th style={{ padding: '8px', backgroundColor: '#f5f5f5' }}>Value</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {excelData.table1.map((item, index) => (
+                                    <tr key={index}>
+                                        <td style={{ padding: '8px', fontWeight: 'bold' }}>{item.key}</td>
+                                        <td style={{ padding: '8px' }}>{item.value}</td>
+                                    </tr>
+                                ))}
+                            </tbody>
+                        </table>
+                    </div>
+
+                    <h2>Detailed Evaluation Data</h2>
+                    <div style={{ overflowX: 'auto' }}>
+                        <table border="1" style={{ borderCollapse: 'collapse', width: '100%', minWidth: '1200px' }}>
+                            <thead>
+                                <tr>
+                                    <th style={{ padding: '8px', backgroundColor: '#f5f5f5' }}>{t('stage')}</th>
+                                    <th style={{ padding: '8px', backgroundColor: '#f5f5f5' }}>{t('aspect')}</th>
+                                    <th style={{ padding: '8px', backgroundColor: '#f5f5f5' }}>{t('criteria')}</th>
+                                    <th style={{ padding: '8px', backgroundColor: '#f5f5f5' }}>{t('aspectToVerify')}</th>
+                                    <th style={{ padding: '8px', backgroundColor: '#f5f5f5' }}>{t('reference')}</th>
+                                    <th style={{ padding: '8px', backgroundColor: '#f5f5f5' }}>{t('subcriteria')}</th>
+                                    <th style={{ padding: '8px', backgroundColor: '#f5f5f5' }}>{t('verificationMethod')}</th>
+                                    <th style={{ padding: '8px', backgroundColor: '#f5f5f5' }}>{t('valuation')}</th>
+                                    <th style={{ padding: '8px', backgroundColor: '#f5f5f5' }}>{t('comments')}</th>
+                                    <th style={{ padding: '8px', backgroundColor: '#f5f5f5' }}>{t('totalValuation')}</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {excelData.table2.map((row, index) => (
+                                    <tr key={index}>
+                                        <td style={{ padding: '8px' }}>{row.stage}</td>
+                                        <td style={{ padding: '8px' }}>{row.aspect}</td>
+                                        <td style={{ padding: '8px' }}>{row.criteria}</td>
+                                        <td style={{ padding: '8px' }}>{row.aspectToVerify}</td>
+                                        <td style={{ padding: '8px', whiteSpace: 'pre-line' }}>{row.reference}</td>
+                                        <td style={{ padding: '8px' }}>{row.subcriteria}</td>
+                                        <td style={{ padding: '8px', whiteSpace: 'pre-line' }}>{row.verificationMethod}</td>
+                                        <td style={{ padding: '8px' }}>{row.valuation}</td>
+                                        <td style={{ padding: '8px', whiteSpace: 'pre-line' }}>{row.comments}</td>
+                                        <td style={{ padding: '8px' }}>{row.totalValuation}</td>
+                                    </tr>
+                                ))}
+                            </tbody>
+                        </table>
+                    </div>
+
+                    <h3>Debug Information</h3>
+                    <details style={{ marginTop: '20px' }}>
+                        <summary>Raw Data Structure</summary>
+                        <pre style={{ background: '#f5f5f5', padding: '10px', overflow: 'auto', maxHeight: '400px' }}>
+                            {JSON.stringify(excelData, null, 2)}
+                        </pre>
+                    </details>
+                </>
+            )}
+        </div>
+    )
+}
+
+export default ExcelTest