datastake-daf 0.6.168 → 0.6.170

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

@@ -1,78 +1,10 @@
-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>
-		</>
-	);
+import { Label } from "../style";
+import SDGIcons from "../../../../UI/SDGIcon/index.jsx";
+export default function SdgList({ sdgList = [], t }) {
+  return (
+    <>
+      <Label>SDGs:</Label>
+      <SDGIcons sdgList={sdgList} t={t} />
+    </>
+  );
 }

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

@@ -1,5 +1,5 @@
 import React, { useMemo } from "react";
-import { Card, theme } from "antd";
+import { Card, theme, Empty } from "antd";
 import { ImageContainer, ProjectWidgetItems, Label } from "./style.js";
 import CustomIcon from "../../../Icon/CustomIcon.jsx";
 import SdgList from "./components/SdgList.jsx";
@@ -7,87 +7,85 @@ 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();
+  const [isHovered, setIsHovered] = React.useState(false);
+  const { token } = useToken();
 
-	const cardRef = React.useRef(null);
-	const [cardWidth, setCardWidth] = React.useState(0);
+  return (
+    <Card
+      style={{
+        flex: 1,
+        width: "100%",
+        minWidth: "200px",
+      }}
+      hoverable
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+      onClick={onCardClick}
+      cover={
+        <ImageContainer>
+          {image ? (
+            <div
+              className="image"
+              style={{
+                backgroundImage: `url(${image})`,
+              }}
+            />
+          ) : (
+            <div
+              style={{
+                height: "103px",
+              }}
+            >
+              <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
+            </div>
+          )}
 
-	React.useEffect(() => {
-		const resizeObserver = new ResizeObserver((entries) => {
-			setCardWidth(entries[0].contentRect.width);
-		});
+          {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>
 
-		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",
-					}}
-					ref={cardRef}
-				>
-					<SdgList sdgList={sdgList} t={t} cardWidth={cardWidth} />
-				</div>
-			)}
-		</Card>
-	);
+      {!hideSDGList && (
+        <div
+          style={{
+            borderTop: "1px solid var(--base-gray-30)",
+            paddingTop: "10px",
+          }}
+        >
+          <SdgList sdgList={sdgList} t={t} />
+        </div>
+      )}
+    </Card>
+  );
 }

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

@@ -1,84 +1,57 @@
 import styled from "styled-components";
 
 export const ImageContainer = styled.div`
-	overflow: hidden;
-	position: relative;
-
-	.image {
-		width: 100%;
-		height: 151px;
-		background-size: cover;
-		background-position: center;
-		background-repeat: no-repeat;
-
-		border-bottom-left-radius: 3px;
-		border-bottom-right-radius: 3px;
-	}
-
-	.icon-container {
-		position: absolute;
-		top: 10px;
-		right: 10px;
-		background: white;
-		padding: 10px;
-		border-radius: 6px;
-		cursor: pointer;
-	}
+  overflow: hidden;
+  position: relative;
+
+  .image {
+    width: 100%;
+    height: 151px;
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+
+  .icon-container {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    background: white;
+    padding: 10px;
+    border-radius: 6px;
+    cursor: pointer;
+  }
 `;
 
 export const ProjectWidgetItems = styled.ul`
-	list-style: none;
-	padding: 0;
-	padding-top: 10px;
-	margin: 0;
-
-	.project-widget-item {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		border-bottom: 1px solid var(--base-gray-30);
-		padding: 10px 0;
-
-		&:last-of-type {
-			border-bottom: 0;
-		}
-	}
-`;
-
-export const SDGList = styled.ul`
-	list-style: none;
-	padding: 0;
-	width: 100%;
-	overflow-x: hidden;
-	display: flex;
-	flex-wrap: nowrap;
-	gap: 4px;
-	margin: 0;
-
-	.sdg-item-image {
-		width: 24px;
-		height: 24px;
-		background-size: cover;
-		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);
-	}
+  list-style: none;
+  padding: 0;
+  padding-top: 10px;
+  margin: 0;
+
+  .project-widget-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid var(--base-gray-30);
+    padding: 10px 0;
+
+    &:last-of-type {
+      border-bottom: 0;
+    }
+  }
 `;
 
 export const Label = styled.span`
-	font-family: SF UI Display;
-	font-weight: 500;
-	font-style: Medium;
-	font-size: 14px;
-	leading-trim: NONE;
-	line-height: 26px;
-	letter-spacing: 0%;
-	color: #6c737f;
+  font-family: SF UI Display;
+  font-weight: 500;
+  font-style: Medium;
+  font-size: 14px;
+  leading-trim: NONE;
+  line-height: 26px;
+  letter-spacing: 0%;
+  color: #6c737f;
 `;

package/src/@daf/core/components/EditForm/_index.scss

@@ -164,7 +164,7 @@
       flex-direction: column;
       overflow-y: auto;
       height: 100%; // Ensure content takes full height
-      padding: 20px 20px 20px 20px; // Add bottom padding for better scrolling
+      padding: 20px 20px 60px 20px; // Increased bottom padding for better scrolling
 
       &.risk-template.no-padding {
         padding: 0;
@@ -354,7 +354,7 @@
       padding-top: var(--size-lg);
       overflow: auto;
       flex-direction: column;
-      padding: 20px 100px 0 100px;
+      padding: 20px 100px 60px 100px; // Added bottom padding for better scrolling
       &.has-section {
         width: calc(100% - 200px);
       }
@@ -1229,7 +1229,7 @@
       padding-top: var(--size-lg);
       overflow: auto;
       flex-direction: column;
-      padding: var(--size-lg) var(--size-lg) 0 var(--size-lg);
+      padding: var(--size-lg) var(--size-lg) 60px var(--size-lg); // Added bottom padding for better scrolling
 
       .main-form {
         min-width: 400px;