datastake-daf 0.6.767 → 0.6.768

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "datastake-daf",
-	"version": "0.6.767",
+	"version": "0.6.768",
 	"dependencies": {
 		"@ant-design/icons": "^5.2.5",
 		"@antv/g2": "^5.1.1",

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

@@ -90,7 +90,7 @@ export default function StakeholderIcon({
 	useEffect(() => {
 		linkNodesData.map((node) => {
 			const isConnectingToStakeholder = node.isStakeholder;
-			const id = `${data.datastakeId}-${node.stakeholderId}`;
+			const id = `${data.datastakeId}-${node.stakeholderId || node.datastakeId}`;
 			const targetsParentId = node.parentId;
 			const targetMarkerIndex = node.stakeholdersIndex;
 			const isSibling = targetsParentId === parentId;
@@ -234,7 +234,10 @@ export default function StakeholderIcon({
 						onClickLink(data);
 					},
 				})}
-				getPopupContainer={() => document.getElementById("map")}
+				getPopupContainer={(triggerNode) => {
+					const mapElement = document.getElementById("map");
+					return mapElement || triggerNode.parentElement || document.body;
+				}}
 			>
 				<StakeholderMarker
 					className={`${data.type} ${

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

@@ -32,7 +32,8 @@ export default function LocationIcon({
 	activeMarker,
 	setActiveMarker,
 }) {
-	const root = useRef(null);
+	const rootsMapRef = useRef(new Map());
+	const markersRef = useRef([])
 	const isSelected = selectedMarkersId.includes(data.datastakeId);
 	const Marker = useMemo(() => {
 		if (isMineSite(data.type)) {
@@ -75,7 +76,22 @@ export default function LocationIcon({
 	}, [data.stakeholders, zoom]);
 
 	useEffect(() => {
-		stakeholdersOfLocation.map((stakeholder, index) => {
+		const currentRoots = rootsMapRef.current;
+		const currentMarkers = markersRef.current;
+
+		currentMarkers.forEach(marker => {
+			if (mapRef.hasLayer(marker)) {
+				mapRef.removeLayer(marker);
+			}
+		});
+		currentRoots.forEach(root => {
+			root.unmount();
+		});
+		currentRoots.clear();
+		markersRef.current = [];
+
+		// Create new markers
+		stakeholdersOfLocation.forEach((stakeholder, index) => {
 			const markerId = `${stakeholder.datastakeId}`;
 			const { x, y, radius, center } = getStakeholderPosition({
 				zoom,
@@ -94,6 +110,7 @@ export default function LocationIcon({
 			const pathLocLatLng = mapRef.layerPointToLatLng(pathLocPoint);
 			const isForceOpen = activeMarker?.datastakeId === data.datastakeId;
 			const iconSize = isSmallMarker(zoom) || isExtraSmallMarker(zoom) ? [11, 11] : [25, 25];
+			
 			const marker = L.marker(stakeholderLatLng, {
 				icon: L.divIcon({
 					html: `<div id="${markerId}"></div>`,
@@ -102,31 +119,38 @@ export default function LocationIcon({
 				}),
 			}).addTo(mapRef);
 
-			const div = document.getElementById(markerId);
-			root.current = createRoot(div);
+			markersRef.current.push(marker);
 
-			root.current.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}
-				/>,
-			);
+			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);
 
 			setMapMarkers((prev) => {
 				const array = [
@@ -162,6 +186,19 @@ export default function LocationIcon({
 				listOfPolylines: polylinesRef.current,
 			});
 		});
+
+		return () => {
+			markersRef.current.forEach(marker => {
+				if (mapRef.hasLayer(marker)) {
+					mapRef.removeLayer(marker);
+				}
+			});
+			rootsMapRef.current.forEach(root => {
+				root.unmount();
+			});
+			rootsMapRef.current.clear();
+			markersRef.current = [];
+		};
 	}, [stakeholdersOfLocation, selectedMarkersId, activeMarker]);
 
 	linkedNodesData.map((node) => {
@@ -213,7 +250,10 @@ export default function LocationIcon({
 			// 	(!openPopupIdRef.current || openPopupIdRef.current === data.datastakeId) &&
 			// 	isHovering
 			// }
-			getPopupContainer={() => document.getElementById("map")}
+			getPopupContainer={(triggerNode) => {
+				const mapElement = document.getElementById("map");
+				return mapElement || triggerNode.parentElement || document.body;
+			}}
 		>
 			<div style={{ position: "relative", display: "inline-block" }}>
 				{(isSelected || selectedMarkersId.length === 0) && (

package/src/@daf/core/components/Dashboard/Map/hook.js

@@ -82,43 +82,37 @@ export const useMap = ({
 		const highlightTable = {};
 
 		for (const [node] of graph) {
-			const visited = new Set();
-			const queue = [node];
-
-			while (queue.length) {
-				const current = queue.shift();
-				if (visited.has(current)) continue;
-
-				const currentType = nodeTypes.get(current);
-
-				if (current !== node && isLocation(currentType)) continue;
-
-				visited.add(current);
-
-				for (const neighbor of graph.get(current)) {
-					if (!visited.has(neighbor)) queue.push(neighbor);
-				}
+			const highlighted = new Set();
+			
+			highlighted.add(node);
+			
+			const nodeIsStakeholder = !isLocation(nodeTypes.get(node));
+			if (nodeIsStakeholder && stakeToLoc.has(node)) {
+				const parentLoc = stakeToLoc.get(node);
+				highlighted.add(parentLoc);
 			}
-
-			if (!isLocation(nodeTypes.get(node)) && stakeToLoc.has(node)) {
-				visited.add(stakeToLoc.get(node));
-			}
-
-			visited.add(node);
-
-			const extraLocs = new Set();
-			for (const n of visited) {
-				for (const neighbor of graph.get(n) || []) {
-					if (isLocation(nodeTypes.get(neighbor))) {
-						extraLocs.add(neighbor);
+			
+			for (const neighbor of graph.get(node) || []) {
+				const neighborIsStakeholder = !isLocation(nodeTypes.get(neighbor));
+				
+				if (neighborIsStakeholder && stakeToLoc.has(neighbor)) {
+					const neighborParent = stakeToLoc.get(neighbor);
+					
+					if (
+						(isLocation(nodeTypes.get(node)) && neighborParent === node) ||
+						(nodeIsStakeholder && stakeToLoc.get(node) === neighborParent)
+					) {
+						highlighted.add(neighbor);
+					} else {
+						highlighted.add(neighbor);
+						highlighted.add(neighborParent);
 					}
+				} else {
+					highlighted.add(neighbor);
 				}
 			}
-			for (const loc of extraLocs) {
-				visited.add(loc);
-			}
 
-			highlightTable[node] = [...visited];
+			highlightTable[node] = [...highlighted];
 		}
 
 		return highlightTable;

package/src/@daf/core/components/Screens/BaseScreen/index.jsx

@@ -134,7 +134,7 @@ const BaseScreen = ({
 				<div className="daf-table-wrapper pagination-w-padding">
 					<DAFTable
 						columns={columns}
-						data={data?.data}
+						data={Array.isArray(data?.data) ? data?.data : data?.data?.data}
 						loading={loading}
 						hideOnLoading={false}
 						pagination={pagination}

package/src/@daf/core/components/Screens/TableScreen/TablePageWithTabs/index.jsx

@@ -90,7 +90,7 @@ const TablePageWithTabs = ({
                 checkboxConfig={checkboxConfig}
                 defaultTableFilters={{}}
                 columns={columns}
-                data={data}
+                data={data?.data}
                 loading={loading}
                 location={location}
                 goTo={goTo}

package/src/@daf/core/components/UI/MissingTagButton/index.jsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import { Tag, Tooltip } from 'antd'
+import { formatClassname } from '../../../../../helpers/ClassesHelper.js'
+
+function MissingTagButton({
+    hasMissing,
+    setHighlightMandatory,
+    highlightMandatory,
+    t,
+}) {
+  return (
+    <>
+        {hasMissing ? (
+            <Tag
+                onClick={() => setHighlightMandatory(!highlightMandatory)}
+                className={formatClassname(['ml-2 highlight-tag', highlightMandatory && 'highlighted'])}
+                style={{textAlign: "center"}}
+            >
+                {t('missing-inputs')}
+            </Tag>
+        ) : (
+            <Tooltip title={t('all-inputs-fullfilled')}>
+                <Tag
+                    onClick={() => setHighlightMandatory(!highlightMandatory)}
+                    className={formatClassname(['ml-2 highlight-tag disabled'])}
+                    style={{textAlign: "center"}}
+                >
+                    {t('missing-inputs')}
+                </Tag>
+            </Tooltip>
+        )}
+    </>
+  )
+}
+
+export default MissingTagButton;

package/src/@daf/pages/Dashboards/SupplyChain/components/SupplyChainMap/index.js

@@ -24,8 +24,6 @@ function SupplyChainMap({selectedSources = {}, t = () => {}, goTo = () => {}, op
 
     const { loading, data } = useWidgetFetch({config: defaultConfig});
 
-	console.log('data', data);
-
     return (
         <Widget
             title={t("Supply Chain Map")}

package/src/@daf/pages/Documents/config.js

@@ -1,8 +1,3 @@
-export const checkboxConfig = {
-	name: 'Name',
-	datastakeId: 'ID'
-}
-
 export const getFiltersConfig = ({t}) => {
     return {
    timeframe: {
@@ -13,11 +8,6 @@ export const getFiltersConfig = ({t}) => {
     }
 }
 
-export const filtersConfig = {
-	name: '',
-	datastakeId: '',
-};
-
 export const getFilterOptions = (options, t) => {
 	const { timeframe = []	 } = options || {};
 	const _default  = {

package/src/@daf/pages/Documents/index.jsx

@@ -1,11 +1,6 @@
-import React, { useMemo, useState, useEffect, useCallback } from 'react'
-import TablePageWithTabs from '../../core/components/Screens/TableScreen/TablePageWithTabs/index.jsx'
+import React from 'react'
 import { getColumns } from './columns.js';
-import { checkboxConfig, getFiltersConfig, filtersConfig, getFilterOptions } from './config.js';
-import { useGetQueryParams } from '../../hooks/useGetQueryParams.js';
-import StakeholdersCreate from './create.jsx';
-import { displayMessage } from '../../../helpers/messages.js';
-import { useFetchData } from '../hook.js';
+import TablePage from '../TablePage/index.jsx';
 
 const DocumentsTable = ({
     t = () => {},
@@ -37,109 +32,57 @@ const DocumentsTable = ({
     subjectClear = () => {},
     breadcrumbs = [],
     extendingFilters = {},
+    createDefaultValues = {},
 }) => {
-    const [selectOptions, setSelectOptions] = useState();
-    const [activeTab, setActiveTab] = useState("own");
-    const columns = useMemo(() => getColumns({
-        t, 
-        goTo, 
-        user,
-        options,
-        activeTab,
-        getRedirectLink, 
-        theme,
-        subject: 'documents',
-        applications,
-    }), [t, goTo, user, options, activeTab, getRedirectLink, theme, applications]);
-
-    useFetchData({
-        location,
-        getData,
-        activeTab,
-        extendingFilters,
-        subject: 'documents',
-    })
-
-    const selectFiltersConfig = useMemo(() => {
-        return getFiltersConfig({t});
-    }, [t]);
-
-    useEffect(() => {
-        setSelectOptions((prev) => ({
-          ...prev,
-          ...getFilterOptions(options, t),
-        }))
-      }, [options, t])
-
-    const handleActiveTabChange = useCallback((value) => {
-        setActiveTab(value);
-    }, []);
-
-    useEffect(
-		() => () => {
-			subjectClear();
-		},
-		[],
-	);
-
     return (
-        <TablePageWithTabs 
-           t={t}
-           title={t("Documents")}
-           breadCrumbs={breadcrumbs}
-           location={location}
-           loading={loading}
-           goTo={goTo}
-           defaultActiveTab={"own"}
-           columns={columns}
-           data={data}
-           checkboxConfig={checkboxConfig}
-           APP={APP}
-           getApiBaseUrl={getApiBaseUrl}
-           selectOptions={selectOptions}
-           selectFiltersConfig={selectFiltersConfig}
-           getRedirectLink={getRedirectLink}
-           filtersConfig={filtersConfig}
-           isMobile={isMobile}
-           view="documents"
-           getActiveTab={handleActiveTabChange}
-           onDownload={() => {
-            console.log("download");
-           }}
-           drawerTitle={t("Create Document")}
-        >
-            {({onDrawerClose}) => (
-                <StakeholdersCreate 
-                    t={t}
-                    goTo={goTo}
-                    user={user}
-                    APP={APP}
-                    getApiBaseUrl={getApiBaseUrl}
-                    getAppHeader={getAppHeader}
-                    getData={getFormData}
-                    saveData={saveFormData}
-                    loading={formLoading}
-                    onSubmitted={(type, m, data) => {
-                        if (data.datastakeId) {
-                            displayMessage(
-                                type,
-                                t("affirmations::subject-created-successfully") || m,
-                            );
-                            goTo(`/app/edit/documents/${data.datastakeId}`);
-                        }
-                    }}
-                    onCancel={onDrawerClose}
-                    query={query}
-                    ajaxForms={ajaxForms}
-                    changeAjaxForms={changeAjaxForms}
-                    ajaxOptions={ajaxOptions}
-                    changeAjaxOptions={changeAjaxOptions}
-                    formData={formData}
-                    formValue={formValue}
-                    form={form}
-                />
-            )}
-        </TablePageWithTabs>
+        <TablePage
+            t={t}
+            goTo={goTo}
+            user={user}
+            options={options}
+            getRedirectLink={getRedirectLink}
+            theme={theme}
+            loading={loading}
+            data={data}
+            isMobile={isMobile}
+            APP={APP}
+            location={location}
+            applications={applications}
+            
+            subject="documents"
+            getData={getData}
+            getApiBaseUrl={getApiBaseUrl}
+            getAppHeader={getAppHeader}
+            subjectClear={subjectClear}
+            getColumns={getColumns}
+            
+            viewConfig={{
+                title: "Documents",
+                breadcrumbs: breadcrumbs,
+                createTitle: "Create Document",
+            }}
+                        
+            formConfig={{
+                getFormData,
+                saveFormData,
+                formLoading,
+                query,
+                ajaxForms,
+                changeAjaxForms,
+                ajaxOptions,
+                changeAjaxOptions,
+                formData,
+                formValue,
+                form,
+                namespace: 'document',
+                view: 'scoping',
+                scope: 'create',
+                formType: 'document',
+                defaultValues: createDefaultValues,
+            }}
+            
+            onDownload={() => console.log("download")}
+        />
     )
 }
 

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

@@ -1,8 +1,3 @@
-export const checkboxConfig = {
-	name: 'Name',
-	datastakeId: 'ID'
-}
-
 export const getFiltersConfig = ({t}) => {
     return {
 
@@ -129,11 +124,6 @@ timeframe: {
 	}
 }
 
-export const filtersConfig = {
-	name: '',
-	datastakeId: '',
-};
-
 export const getFilterOptions = (options, t) => {
 	const {
 		timeframe = [],
@@ -166,7 +156,7 @@ export const getFilterOptions = (options, t) => {
 		category: stakeholderCategoryOptions || categoryOptions,
 		country: countries,
 		subCategory: subCategoriesOptions,
-		category: category,
+		// category: category,
 		administrativeLevel1,
 		administrativeLevel2,
 		positionInTheMineralSupplyChain: positionInMineralSupplyChainOptions,