datastake-daf 0.6.816 → 0.6.818

package/src/@daf/core/components/Dashboard/Map/ChainIcon/index.js

@@ -1,4 +1,5 @@
 import { useMemo, useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
 import {
 	isMineSite,
 	getStakeholderPosition,
@@ -10,7 +11,6 @@ import {
 import MineSiteMarker from "./Markers/SVG/MinesiteMarker.js";
 import VillageMarker from "./Markers/SVG/VillageMarker.js";
 import StakeholderIcon from "./Markers/StakeholderMarker.js";
-import { createRoot } from "react-dom/client";
 import * as L from "leaflet";
 import { Popover } from "antd";
 import { renderTooltipJsx } from "../../../../../utils/tooltip.js";
@@ -32,8 +32,8 @@ export default function LocationIcon({
 	activeMarker,
 	setActiveMarker,
 }) {
-	const rootsMapRef = useRef(new Map());
-	const markersRef = useRef([])
+	const markersRef = useRef([]);
+	const [portalContainers, setPortalContainers] = useState([]);
 	const isSelected = selectedMarkersId.includes(data.datastakeId);
 	const Marker = useMemo(() => {
 		if (isMineSite(data.type)) {
@@ -114,25 +114,31 @@ export default function LocationIcon({
 	}, [JSON.stringify(allData), JSON.stringify(data.links), JSON.stringify(data.stakeholders), zoom]);
 
 	const stakeholdersOfLocation = useMemo(() => {
-		return data?.stakeholders || [];
-	}, [data.stakeholders, zoom]);
+		return (data?.stakeholders || []).filter(stakeholder => {
+			if (!stakeholder.links || stakeholder.links.length === 0) {
+				return true;
+			}
+			
+			const locationsWithThisStakeholder = allData
+				.filter(loc => 
+					loc.stakeholders?.some(s => s.datastakeId === stakeholder.datastakeId)
+				)
+				.map(loc => loc.datastakeId);
+			
+			const primaryLocation = locationsWithThisStakeholder.sort()[0];
+			return data.datastakeId === primaryLocation;
+		});
+	}, [data.stakeholders, data.datastakeId, allData, zoom]);
 
 	useEffect(() => {
-		const currentRoots = rootsMapRef.current;
-		const currentMarkers = markersRef.current;
-
-		currentMarkers.forEach(marker => {
-			if (mapRef.hasLayer(marker)) {
+		markersRef.current.forEach(marker => {
+			if (mapRef && mapRef.hasLayer(marker)) {
 				mapRef.removeLayer(marker);
 			}
 		});
-		currentRoots.forEach(root => {
-			root.unmount();
-		});
-		currentRoots.clear();
 		markersRef.current = [];
+		setPortalContainers([]);
 
-		// Only create stakeholder markers if this location or any of its stakeholders are selected
 		const shouldShowStakeholders = isSelected || stakeholdersOfLocation.some(stk => 
 			selectedMarkersId.includes(stk.datastakeId)
 		);
@@ -141,9 +147,11 @@ export default function LocationIcon({
 			return;
 		}
 
-		// Create new markers only when selected
+		// Create markers and store their container references
+		const containers = [];
+		
 		stakeholdersOfLocation.forEach((stakeholder, index) => {
-			const markerId = `${stakeholder.datastakeId}`;
+			const markerId = `${data.datastakeId}-${stakeholder.datastakeId}`;
 			const { x, y, radius, center } = getStakeholderPosition({
 				zoom,
 				totalMarkers: stakeholdersOfLocation.length,
@@ -162,46 +170,30 @@ export default function LocationIcon({
 			const isForceOpen = activeMarker?.datastakeId === data.datastakeId;
 			const iconSize = isSmallMarker(zoom) || isExtraSmallMarker(zoom) ? [11, 11] : [25, 25];
 			
+			// Create container div
+			const containerDiv = document.createElement('div');
+			containerDiv.id = markerId;
+			
 			const marker = L.marker(stakeholderLatLng, {
 				icon: L.divIcon({
-					html: `<div id="${markerId}"></div>`,
+					html: containerDiv.outerHTML,
 					className: "marker-chain",
 					iconSize: iconSize,
 				}),
 			}).addTo(mapRef);
 
 			markersRef.current.push(marker);
-
-			setTimeout(() => {
-				const div = document.getElementById(markerId);
-				if (div && !rootsMapRef.current.has(markerId)) {
-					const root = createRoot(div);
-					rootsMapRef.current.set(markerId, root);
-					
-					root.render(
-						<StakeholderIcon
-							data={stakeholder}
-							zoom={zoom}
-							allData={allData}
-							link={link}
-							parentId={data.datastakeId}
-							renderTooltip={renderTooltip}
-							onClickLink={onClickLink}
-							selectedMarkersId={selectedMarkersId}
-							handleSelectMarker={handleSelectMarker}
-							mapRef={mapRef}
-							radius={radius}
-							index={index}
-							x={x}
-							y={y}
-							openPopupIdRef={openPopupIdRef}
-							polylinesRef={polylinesRef}
-							isForceOpen={isForceOpen}
-							activeMarker={activeMarker}
-						/>,
-					);
-				}
-			}, 0);
+			
+			// Store container info for portal rendering
+			containers.push({
+				markerId,
+				stakeholder,
+				x,
+				y,
+				radius,
+				index,
+				isForceOpen,
+			});
 
 			setMapMarkers((prev) => {
 				const array = [
@@ -236,21 +228,23 @@ export default function LocationIcon({
 				isForceOpen,
 				listOfPolylines: polylinesRef.current,
 				stakeholderType: stakeholder.type,
-				animated: true,                     
+				animated: true,
 			});
 		});
 
+		// Update portal containers after markers are created
+		setTimeout(() => {
+			setPortalContainers(containers);
+		}, 0);
+
 		return () => {
 			markersRef.current.forEach(marker => {
-				if (mapRef.hasLayer(marker)) {
+				if (mapRef && mapRef.hasLayer(marker)) {
 					mapRef.removeLayer(marker);
 				}
 			});
-			rootsMapRef.current.forEach(root => {
-				root.unmount();
-			});
-			rootsMapRef.current.clear();
 			markersRef.current = [];
+			setPortalContainers([]);
 		};
 	}, [stakeholdersOfLocation, selectedMarkersId, activeMarker, zoom]);
 
@@ -344,56 +338,81 @@ useEffect(() => {
 }, [linkedNodesData, selectedMarkersId, zoom, stakeholdersOfLocation, isSelected]);
 
 	return (
-		<Popover
-			content={renderTooltipJsx({
-				title: data.name,
-				subTitle: data.subTitle,
-				total: data.sources,
-				className: "pt-0 pb-0",
-				items: renderTooltip(data),
-				link,
-				onClickLink: () => onClickLink(data),
-				isNewTab: true,
-			})}
-			// open={
-			// 	(!openPopupIdRef.current || openPopupIdRef.current === data.datastakeId) &&
-			// 	isHovering
-			// }
-			getPopupContainer={(triggerNode) => {
-				const mapElement = document.getElementById("map");
-				return mapElement || triggerNode.parentElement || document.body;
-			}}
-		>
-			<div style={{ position: "relative", display: "inline-block" }}>
-				{(isSelected || selectedMarkersId.length === 0) && (
-					<div
-						style={{
-							position: "absolute",
-							bottom: "0",
-							left: "50%",
-							transform: "translateX(-50%)",
-							width: "12px",
-							height: "6px",
-							background: "rgba(0,0,0,0.15)",
-							borderRadius: "50%",
-							filter: "blur(3px)",
+		<>
+			<Popover
+				content={renderTooltipJsx({
+					title: data.name,
+					subTitle: data.subTitle,
+					total: data.sources,
+					className: "pt-0 pb-0",
+					items: renderTooltip(data),
+					link,
+					onClickLink: () => onClickLink(data),
+					isNewTab: true,
+				})}
+				getPopupContainer={(triggerNode) => {
+					const mapElement = document.getElementById("map");
+					return mapElement || triggerNode.parentElement || document.body;
+				}}
+			>
+				<div style={{ position: "relative", display: "inline-block" }}>
+					{(isSelected || selectedMarkersId.length === 0) && (
+						<div
+							style={{
+								position: "absolute",
+								bottom: "0",
+								left: "50%",
+								transform: "translateX(-50%)",
+								width: "12px",
+								height: "6px",
+								background: "rgba(0,0,0,0.15)",
+								borderRadius: "50%",
+								filter: "blur(3px)",
+							}}
+						/>
+					)}
+					<Marker
+						isSelected={isSelected}
+						onClick={() => {
+							handleSelectMarker(data);
+							setActiveMarker(isSelected ? null : data);
 						}}
+						zoom={zoom}
+						selectedMarkersId={selectedMarkersId}
 					/>
-				)}
-				<Marker
-					isSelected={isSelected}
-					onClick={() => {
-						handleSelectMarker(data);
-						setActiveMarker(isSelected ? null : data);
-					}}
-					zoom={zoom}
-					onMouseEnter={() => setIsHovering(true)}
-					onMouseLeave={() => {
-						setIsHovering(false);
-					}}
-					selectedMarkersId={selectedMarkersId}
-				/>
-			</div>
-		</Popover>
+				</div>
+			</Popover>
+			
+			{/* Render stakeholder icons via portals */}
+			{portalContainers.map(({markerId, stakeholder, x, y, radius, index, isForceOpen}) => {
+				const container = document.getElementById(markerId);
+				if (!container) return null;
+				
+				return createPortal(
+					<StakeholderIcon
+						key={markerId}
+						data={stakeholder}
+						zoom={zoom}
+						allData={allData}
+						link={link}
+						parentId={data.datastakeId}
+						renderTooltip={renderTooltip}
+						onClickLink={onClickLink}
+						selectedMarkersId={selectedMarkersId}
+						handleSelectMarker={handleSelectMarker}
+						mapRef={mapRef}
+						radius={radius}
+						index={index}
+						x={x}
+						y={y}
+						openPopupIdRef={openPopupIdRef}
+						polylinesRef={polylinesRef}
+						isForceOpen={isForceOpen}
+						activeMarker={activeMarker}
+					/>,
+					container
+				);
+			})}
+		</>
 	);
 }

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

@@ -36,7 +36,12 @@ export default function DAFTable({
   doEmptyRows,
   ...rest
 }) {
-  const [source, setSource] = useState([]);
+  const source = useMemo(() => {
+    if (data && Array.isArray(data)) {
+      return data;
+    }
+    return [];
+  }, [data]);
   const projectData = (projects || []).find(p => p.id === selectedProject);
   const [filtersInit, setFiltersInit] = useState(!loading);
 
@@ -85,11 +90,11 @@ export default function DAFTable({
     } : filtersConfig;
   }, [sourcesKey, sources, filtersConfig, t]);
 
-  useEffect(() => {
-    if (data && Array.isArray(data)) {
-      setSource(data);
-    }
-  }, [data, data.length]);
+  // useEffect(() => {
+  //   if (data && Array.isArray(data)) {
+  //     setSource(data);
+  //   }
+  // }, [data, data.length]);
 
   const paginationPageSize = pagination?.pageSize;
   const dataSource = useMemo(() => {

package/src/@daf/pages/Events/Activities/columns.js

@@ -117,19 +117,23 @@ export const getColumns = ({t, goTo, user, options, activeTab, getRedirectLink,
         },
     },              
     {
-        title: t("Sources"),
-        dataIndex: "sources",
-        key: "sources",
-        show: activeTab !== "own",
-        render: (val, all) => {
-            if (all.empty) {
-                return <div className="daf-default-cell" />;
-            }
+      title: t("Sources"),
+      dataIndex: "sources",
+      key: "sources",
+      show: activeTab !== "own",
+      render: (val, all) => {
+          if (all.empty) {
+              return <div className="daf-default-cell" />;
+          }
 
-            const sources = sourceAvatarConfig(val, user, applications);
+        if (!val || val?.length === 0) {
+          return "-";
+        }
 
-            return <AvatarGroup items={sources}></AvatarGroup>;
-        },
+        const sources = sourceAvatarConfig(val, user, applications);
+
+        return <AvatarGroup items={sources} />;
+      },
     },
     {
         title: t("Status"),

package/src/@daf/pages/Events/Incidents/columns.js

@@ -117,19 +117,23 @@ export const getColumns = ({t, goTo, user, options, activeTab, getRedirectLink,
         },
     },              
     {
-        title: t("Sources"),
-        dataIndex: "sources",
-        key: "sources",
-        show: activeTab !== "own",
-        render: (val, all) => {
-            if (all.empty) {
-                return <div className="daf-default-cell" />;
-            }
+      title: t("Sources"),
+      dataIndex: "sources",
+      key: "sources",
+      show: activeTab !== "own",
+      render: (val, all) => {
+          if (all.empty) {
+              return <div className="daf-default-cell" />;
+          }
 
-            const sources = sourceAvatarConfig(val, user, applications);
+        if (!val || val?.length === 0) {
+          return "-";
+        }
 
-            return <AvatarGroup items={sources}></AvatarGroup>;
-        },
+        const sources = sourceAvatarConfig(val, user, applications);
+
+        return <AvatarGroup items={sources} />;
+      },
     },
     {
         title: t("Status"),

package/src/@daf/pages/Events/Testimonials/columns.js

@@ -0,0 +1,173 @@
+import React from 'react';
+import { Tooltip, Tag } from 'antd';
+import { findOptions, getLinkValue } from '../../../../helpers/StringHelper.js';
+import { renderDateFormatted } from '../../../../helpers/Forms.js';
+import AvatarGroup from '../../../core/components/AvatarGroup/index.jsx';
+import sourceAvatarConfig from '../../../../helpers/sourceAvatarConfig.js';
+import { getEventCategoryBySubject } from '../helper.js';
+import { renderStatusTag } from '../../../utils/tags.js';
+import NavigationAction from '../../../core/components/Table/NavigationAction/index.jsx';
+
+export const getColumns = ({t, goTo, user, options, activeTab, getRedirectLink, theme, subject, data, applications}) => [
+    {
+        dataIndex: 'datastakeId',
+        title: t('ID'),
+        ellipsis: true,
+        show: true,
+        key: "datastakeId",
+        sorter: () => 0 + 0,
+        render: (v, all) => {
+          if (all.empty) {
+            return <div className="daf-default-cell" />
+          }
+    
+          return <Tooltip title={v}>{v}</Tooltip>;
+        },
+    },
+    {
+        dataIndex: 'name',
+        title: t('Title'),
+        ellipsis: true,
+        show: true,
+        key: "name",
+        sorter: () => 0 + 0,
+        render: (v, all) => {
+          if (all.empty) {
+            return <div className="daf-default-cell" />
+          }
+    
+          return <Tooltip title={v}>{v}</Tooltip>;
+        },
+    },   
+    {
+        title: t("type"),
+        dataIndex: "typeOfTestimonials",
+        key: "typeOfTestimonials",
+        sorter: () => 0 + 0,
+        show: true,
+        render: (title, all) => {
+            if (all.empty) {
+                return <div className="daf-default-cell" />;
+            }
+
+            const type = findOptions(title, data?.options?.testimonialsType);
+
+            return type ? <Tooltip title={type}>{type}</Tooltip> : '-';
+        },
+        ellipsis: true,
+    },
+    {
+      title: t("Date"),
+      dataIndex: "date",
+      key: "date",
+      sorter: () => 0 + 0,
+      render: (date, all) => {
+          if (all.empty) {
+              return <div className="daf-default-cell" />;
+          }
+
+          const _date = date ? renderDateFormatted(date, "DD MMM YYYY", user?.language || 'en') : "-";
+          return <Tooltip title={_date}>{_date}</Tooltip>;
+      },
+      ellipsis: true,
+  },  
+    {
+        dataIndex: 'mineSite',
+        title: t('Location'),
+        ellipsis: true,
+        show: true,
+        render: (v, all) => {
+          if (all.empty) {
+            return <div className="daf-default-cell" />
+          }
+
+          // const country = findOptions(v, data?.options?.positionSupplyChainOptions);
+          const mineSite = all?.location?.name
+
+          return mineSite ? <Tooltip title={mineSite}>{mineSite}</Tooltip> : '-';
+        },
+    },  
+    {
+        dataIndex: 'eventCategory',
+        title: t('Category'),
+        ellipsis: true,
+        show: true,
+        render: (v, all) => {
+          if (all.empty) {
+            return <div className="daf-default-cell" />
+          }
+
+          const eventCategory = findOptions(v, data?.options?.eventCategoryOptions || data?.options?.categoryOptions);
+          const categoryValue = getEventCategoryBySubject(eventCategory, subject);
+          
+          return categoryValue ? <Tooltip title={categoryValue}>{categoryValue}</Tooltip> : '-';
+        },
+    },              
+    {
+      title: t("Sources"),
+      dataIndex: "sources",
+      key: "sources",
+      show: activeTab !== "own",
+      render: (val, all) => {
+          if (all.empty) {
+              return <div className="daf-default-cell" />;
+          }
+
+        if (!val || val?.length === 0) {
+          return "-";
+        }
+
+        const sources = sourceAvatarConfig(val, user, applications);
+
+        return <AvatarGroup items={sources} />;
+      },
+    },
+    {
+        title: t("Status"),
+        dataIndex: "status",
+        key: "status",
+        show: activeTab === "own",
+        render: (val, all) => {
+          if (all.empty) {
+            return <div className="daf-default-cell" />
+          }
+
+          const _val = all?.published || all?.status === "submitted" ? "submitted" : val;
+
+          return renderStatusTag({ value: _val, t });
+        },
+    },
+    {
+      title: t("Last Update"),
+      dataIndex: "updatedAt",
+      key: "updatedAt",
+      render: (date, all) => {
+          if (all.empty) {
+              return <div className="daf-default-cell" />;
+          }
+
+          const _date = date ? renderDateFormatted(date, "DD MMM YYYY", user?.language || 'en') : "-";
+          return <Tooltip title={_date}>{_date}</Tooltip>;
+      },
+      ellipsis: true,
+    },      
+    {
+      id: 'actions',
+      title: "",
+      width: 60,
+      render: (_, all) => {
+        if (all.empty) {
+          return <div className="daf-default-cell" />;
+        }
+        const onClick = () => {
+          let link = `/app/view/${subject}/${all.datastakeId}`;
+          if (activeTab === "shared") {
+            link += `?sourceId=${all?.authorId?.id}`;
+          }
+          goTo(getRedirectLink(link));
+        };
+
+        return <NavigationAction onClick={onClick} theme={theme} />;
+      }
+    }
+].filter((column) => column.show !== false);