datastake-daf 0.6.161 → 0.6.163

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

@@ -332,15 +332,23 @@ export const useMap = ({
 			}
 			addAllDataToMap();
 		}
+	}, [data, mapRef, activeStakeholder]);
+
+	useEffect(() => {
+		if (mapRef && data && type === "chain") {
+			if (!initialMarkerSetIsDone) {
+				setInitialMarkerSetIsDone(true);
+			} else {
+				clearMapMarkers();
+			}
+			addAllDataToMap();
+		}
 	}, [
-		data,
-		mapRef,
 		zoom,
 		selectedMarkersId,
 		markerWithPopup,
 		openPopupIdRef.current,
 		polylinesRef.current.length,
-		activeStakeholder,
 	]);
 
 	useEffect(() => {

package/src/@daf/core/components/Dashboard/Widget/ProjectWidget/ProjectWidget.stories.jsx

@@ -23,7 +23,6 @@ export const Primary = {
   args: {
     image:
       "https://images.squarespace-cdn.com/content/v1/606d4deb4db8c15ea53b3624/1618824875786-3V9HT8BLB1L5PEEJC6ZQ/124.jpg",
-    title: "ProjectWidgetTitle",
     onLinkClick: () => {},
     linkIcon: "Link",
     sdgList: [
@@ -56,14 +55,15 @@ export const Primary = {
       <DashboardLayout>
         <Widget title="Project Catalogue" className="with-border-header">
           <section>
-            <ProjectWidget {...args} />
+            <ProjectWidget {...args} title="ALL SDGS" />
 
             <ProjectWidget
               {...args}
+              title="SOME SDGS"
               sdgList={["noPoverty", "lifeBelowWater"]}
             />
 
-            <ProjectWidget {...args} sdgList={[]} />
+            <ProjectWidget {...args} sdgList={[]} title="No SDGS" />
           </section>
         </Widget>
       </DashboardLayout>

package/src/@daf/core/components/Dashboard/Widget/ProjectWidget/components/SdgList.jsx

@@ -0,0 +1,78 @@
+import { Label, SDGList } from "../style";
+import { Tooltip, Popover } from "antd";
+import { SDG_IMAGES } from "../../../../../../../constants/SDGs";
+import { useMemo } from "react";
+
+const SDG_IMAGE_WIDTH = 24;
+const GAP_BETWEEN_SDGS = 4;
+const TOTAL_SPACE_FOR_SDG = SDG_IMAGE_WIDTH + GAP_BETWEEN_SDGS;
+
+export default function SdgList({ sdgList = [], t, cardWidth }) {
+	const maxSdgToShow = useMemo(() => {
+		return Math.floor(cardWidth / TOTAL_SPACE_FOR_SDG);
+	}, [cardWidth]);
+
+	const { visibleSdgs, hiddenCount } = useMemo(() => {
+		if (sdgList.length <= maxSdgToShow) {
+			return { visibleSdgs: sdgList, hiddenCount: 0 };
+		}
+		return {
+			visibleSdgs: sdgList.slice(0, maxSdgToShow - 1),
+			hiddenCount: sdgList.length - (maxSdgToShow - 1),
+		};
+	}, [sdgList, maxSdgToShow]);
+
+	return (
+		<>
+			<Label>SDGs:</Label>
+			<SDGList>
+				{visibleSdgs.map((sdg, index) => (
+					<li key={index} className="project-widget-item">
+						<Tooltip title={t(`SDGS::${sdg}`)}>
+							<div
+								style={{
+									backgroundImage: `url(${SDG_IMAGES[sdg].img})`,
+								}}
+								className="sdg-item-image"
+							/>
+						</Tooltip>
+					</li>
+				))}
+				{hiddenCount > 0 && (
+					<li className="project-widget-item">
+						<Popover
+							placement="top"
+							content={
+								<div
+									style={{
+										display: "flex",
+										gap: "4px",
+										flexWrap: "wrap",
+										maxWidth: 200,
+									}}
+								>
+									{sdgList.slice(visibleSdgs.length).map((sdg, idx) => (
+										<Tooltip key={idx} title={t(`SDGS::${sdg}`)}>
+											<div
+												style={{
+													width: SDG_IMAGE_WIDTH,
+													height: SDG_IMAGE_WIDTH,
+													backgroundImage: `url(${SDG_IMAGES[sdg].img})`,
+													backgroundSize: "cover",
+													borderRadius: 4,
+												}}
+												title={t(`SDGS::${sdg}`)}
+											/>
+										</Tooltip>
+									))}
+								</div>
+							}
+						>
+							<div className="sdg-item-image sdg-item-more">+{hiddenCount}</div>
+						</Popover>
+					</li>
+				)}
+			</SDGList>
+		</>
+	);
+}

package/src/@daf/core/components/Dashboard/Widget/ProjectWidget/index.jsx

@@ -1,94 +1,93 @@
-import React from "react";
-import { Card, Tooltip, theme } from "antd";
-import { ImageContainer, ProjectWidgetItems, SDGList, Label } from "./style.js";
+import React, { useMemo } from "react";
+import { Card, theme } from "antd";
+import { ImageContainer, ProjectWidgetItems, Label } from "./style.js";
 import CustomIcon from "../../../Icon/CustomIcon.jsx";
-import { SDG_IMAGES } from "../../../../../../constants/SDGs.js";
-
+import SdgList from "./components/SdgList.jsx";
 const { Meta } = Card;
 const { useToken } = theme;
 
 export default function ProjectWidget({
-  title,
-  description,
-  onLinkClick,
-  image,
-  linkIcon = "Link",
-  sdgList,
-  items,
-  onCardClick,
-  hideSDGList = false,
-  t = (x) => x,
-  ...props
+	title,
+	description,
+	onLinkClick,
+	image,
+	linkIcon = "Link",
+	sdgList,
+	items,
+	onCardClick,
+	hideSDGList = false,
+	t = (x) => x,
+	...props
 }) {
-  const [isHovered, setIsHovered] = React.useState(false);
-  const { token } = useToken();
-  return (
-    <Card
-      style={{
-        flex: 1,
-      }}
-      hoverable
-      onMouseEnter={() => setIsHovered(true)}
-      onMouseLeave={() => setIsHovered(false)}
-      onClick={onCardClick}
-      cover={
-        <ImageContainer>
-          <div
-            className="image"
-            style={{
-              backgroundImage: `url(${image})`,
-            }}
-          />
-          {onLinkClick && (
-            <div className="icon-container" onClick={onLinkClick}>
-              <CustomIcon
-                name={linkIcon}
-                width={16}
-                height={16}
-                color={isHovered ? token.colorPrimary7 : "black"}
-              />
-            </div>
-          )}
-        </ImageContainer>
-      }
-      {...props}
-    >
-      <Meta title={title || undefined} description={description || undefined} />
-      <ProjectWidgetItems>
-        {items.map((item, index) => (
-          <li key={index} className="project-widget-item">
-            <Label>{item.label}</Label>
-            {item.render()}
-          </li>
-        ))}
-      </ProjectWidgetItems>
+	const [isHovered, setIsHovered] = React.useState(false);
+	const { token } = useToken();
+
+	const cardRef = React.useRef(null);
+	const [cardWidth, setCardWidth] = React.useState(0);
+
+	React.useEffect(() => {
+		const resizeObserver = new ResizeObserver((entries) => {
+			setCardWidth(entries[0].contentRect.width);
+		});
+
+		resizeObserver.observe(cardRef.current);
+		return () => resizeObserver.disconnect();
+	}, [cardRef]);
+
+	return (
+		<Card
+			style={{
+				flex: 1,
+				width: "100%",
+				minWidth: "200px",
+			}}
+			hoverable
+			onMouseEnter={() => setIsHovered(true)}
+			onMouseLeave={() => setIsHovered(false)}
+			onClick={onCardClick}
+			cover={
+				<ImageContainer>
+					<div
+						className="image"
+						style={{
+							backgroundImage: `url(${image})`,
+						}}
+					/>
+					{onLinkClick && (
+						<div className="icon-container" onClick={onLinkClick}>
+							<CustomIcon
+								name={linkIcon}
+								width={16}
+								height={16}
+								color={isHovered ? token.colorPrimary7 : "black"}
+							/>
+						</div>
+					)}
+				</ImageContainer>
+			}
+			{...props}
+		>
+			<Meta title={title || undefined} description={description || undefined} />
+			<ProjectWidgetItems>
+				{items.map((item, index) => (
+					<li key={index} className="project-widget-item">
+						<Label>{item.label}</Label>
+						{item.render()}
+					</li>
+				))}
+			</ProjectWidgetItems>
 
-      {!hideSDGList && (
-        <div
-          style={{
-            borderTop: "1px solid var(--base-gray-30)",
-            paddingTop: "10px",
-          }}
-        >
-          <Label>SDGs:</Label>
-          <SDGList>
-            {sdgList.map((sdg, index) => {
-              return (
-                <li key={index} className="project-widget-item">
-                  <Tooltip title={t(`SDGS::${sdg}`)}>
-                    <div
-                      style={{
-                        backgroundImage: `url(${SDG_IMAGES[sdg].img})`,
-                      }}
-                      className="sdg-item-image"
-                    />
-                  </Tooltip>
-                </li>
-              );
-            })}
-          </SDGList>
-        </div>
-      )}
-    </Card>
-  );
+			{!hideSDGList && (
+				<div
+					style={{
+						borderTop: "1px solid var(--base-gray-30)",
+						paddingTop: "10px",
+					}}
+					ref={cardRef}
+				>
+					<SdgList sdgList={sdgList} t={t} cardWidth={cardWidth} />
+				</div>
+			)}
+		</Card>
+	);
 }

package/src/@daf/core/components/Dashboard/Widget/ProjectWidget/style.js

@@ -48,8 +48,10 @@ export const ProjectWidgetItems = styled.ul`
 export const SDGList = styled.ul`
 	list-style: none;
 	padding: 0;
+	width: 100%;
+	overflow-x: hidden;
 	display: flex;
-	flex-wrap: wrap;
+	flex-wrap: nowrap;
 	gap: 4px;
 	margin: 0;
 
@@ -60,6 +62,14 @@ export const SDGList = styled.ul`
 		background-position: center;
 		background-repeat: no-repeat;
 	}
+
+	.sdg-item-more {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background: var(--base-gray-30);
+		color: var(--base-gray-90);
+	}
 `;
 
 export const Label = styled.span`

package/src/@daf/core/components/PdfForm/components/dataLinkHandler.js

@@ -90,13 +90,13 @@ export const handleDataLinkWithTableKeys = ({
             inputs[tableKey].label = resolvedLabel || Object.values(formInputConfig.label)[0] || 
               (uploadTypeFields.includes(tableKey) ? uploadTypeLabels[tableKey] : tableKey);
           }
-          values[tableKey] = item?.linking?.SCL?.[item?.[tableKey]]?.name || item?.[formInputConfig?.tableLabel?.toLowerCase()] || item?.[tableKey]; 
+          values[tableKey] = item?.linking?.SCL?.[item?.[tableKey]]?.name || item[formInputConfig?.meta?.onNewSetValueKey] || item?.[formInputConfig?.tableLabel?.toLowerCase()] || item?.[tableKey]; 
         } else {
           inputs[tableKey] = {
             label: uploadTypeFields.includes(tableKey) ? uploadTypeLabels[tableKey] : tableKey,
             type: inputConfig?.type
           };
-          values[tableKey] = item?.[tableKey];
+          values[tableKey] = item?.linking?.SCL?.[item?.[tableKey]]?.name || item?.[tableKey];
         }
       });
 

package/src/@daf/core/components/PdfForm/index.js

@@ -413,7 +413,19 @@ const PdfForm = ({
   const organizeFormByHeaders = (formData) => {
     const organizedSections = {};
     
-    Object.keys(formData).forEach((sectionKey) => {
+    // Sort sections by position before processing
+    const sortedSectionKeys = Object.keys(formData)
+      .filter(sectionKey => {
+        const section = formData[sectionKey];
+        return typeof section === 'object' && section.label;
+      })
+      .sort((a, b) => {
+        const positionA = formData[a]?.position || 0;
+        const positionB = formData[b]?.position || 0;
+        return positionA - positionB;
+      });
+    
+    sortedSectionKeys.forEach((sectionKey) => {
       const section = formData[sectionKey];
       
       if (typeof section !== 'object' || !section.label) {