@visns-studio/visns-components 1.2.10 → 1.3.2

package/components/crm/visns-data-grid.jsx

@@ -25,8 +25,13 @@ import {
 	CloudDownload,
 	Copy,
 	Edit,
+	Folder,
+	Inbox,
+	Network,
 	Ribbon,
 	Search,
+	ShippingBoxV1,
+	TriangleAlert,
 } from "akar-icons";
 
 import "@inovua/reactdatagrid-community/index.css";
@@ -95,6 +100,7 @@ const DataGrid = forwardRef(
 			form,
 			columns,
 			settings,
+			setFilterData,
 			style,
 			tableFilters,
 			historySearch,
@@ -336,7 +342,15 @@ const DataGrid = forwardRef(
 					<button
 						className="btn"
 						onClick={() => {
-							modalOpen("create", 0);
+							if (form.url) {
+								window.open(
+									form.url,
+									"",
+									"width=1440,height=1024,menubar=1,resizable=1,status=1,titlebar=1,toolbar=1"
+								);
+							} else {
+								modalOpen("create", 0);
+							}
 						}}
 					>
 						<div className="icon-plus"></div> Create
@@ -372,36 +386,72 @@ const DataGrid = forwardRef(
 					? import.meta.env.REACT_APP_ASSET_PATH
 					: "";
 
-			const addIcon = (src, alt, tooltipContent, key) => {
-				icons.push(
-					<img
-						src={`${assetPath}${src}`}
-						alt={alt}
-						data-tooltip-id="system-tooltip"
-						data-tooltip-content={tooltipContent}
-						key={key}
-					/>
-				);
+			const addIcon = (src, icon, alt, tooltipContent, key) => {
+				if (src && src !== "") {
+					icons.push(
+						<img
+							src={`${assetPath}${src}`}
+							alt={alt}
+							data-tooltip-id="system-tooltip"
+							data-tooltip-content={tooltipContent}
+							key={key}
+						/>
+					);
+				} else {
+					let IconComponent = null;
+
+					if (icon === "archive") {
+						IconComponent = ShippingBoxV1;
+					} else if (icon === "folder") {
+						IconComponent = Folder;
+					} else if (icon === "inbox") {
+						IconComponent = Inbox;
+					} else if (icon === "network") {
+						IconComponent = Network;
+					} else if (icon === "urgent") {
+						IconComponent = TriangleAlert;
+					}
+
+					if (IconComponent) {
+						icons.push(
+							<IconComponent
+								data-tooltip-id="system-tooltip"
+								data-tooltip-content={tooltipContent}
+								strokeWidth={2}
+								size={18}
+								className="tdaction"
+								key={key}
+							/>
+						);
+					}
+				}
 			};
 
 			c.config.forEach((config) => {
-				const [section, field] = config.id;
-				const fieldValue = data[section][field];
+				const fieldValue = config.id.reduce((acc, id) => {
+					if (acc === "") {
+						return data[id];
+					} else {
+						return acc[id];
+					}
+				}, "");
 
 				const iconData = config.icons.find(
 					(icon) => icon.value === fieldValue
 				);
+
 				if (
 					iconData &&
-					iconData.src &&
+					(iconData.src || iconData.icon) &&
 					iconData.alt &&
 					iconData.tooltipContent
 				) {
 					addIcon(
-						iconData.src,
+						iconData.src ? iconData.src : null,
+						iconData.icon ? iconData.icon : null,
 						iconData.alt,
 						iconData.tooltipContent,
-						`coding-${field}-${data.id}`
+						`coding-${config.id[0]}`
 					);
 				}
 			});
@@ -468,12 +518,16 @@ const DataGrid = forwardRef(
 			);
 
 			switch (s.id) {
+				case "archive":
+					return getIconComponent(ShippingBoxV1);
 				case "complete":
 					return getIconComponent(Check);
 				case "copy":
 					return getIconComponent(Copy);
 				case "delete":
 					return getIconComponent(Backspace);
+				case "family":
+					return getIconComponent(Network);
 				case "primary":
 					return getIconComponent(Ribbon);
 				case "ssa":
@@ -511,6 +565,7 @@ const DataGrid = forwardRef(
 				let icons = [];
 				let relationName;
 				let stage;
+				let style;
 				let value;
 
 				const commonProps = {
@@ -636,13 +691,29 @@ const DataGrid = forwardRef(
 							filterEditorProps: filterEditorProps,
 							render: ({ data }) => {
 								if (data && data[column.id]) {
-									data = moment(data[column.id]).format(
-										column.format
-											? column.format
-											: "DD-MM-YYYY"
-									);
+									const value = moment(
+										data[column.id]
+									).format(column.format || "DD-MM-YYYY");
+									style = {};
 
-									return <span>{data}</span>;
+									if (
+										column.active &&
+										column.active.id &&
+										column.active.value === "expired"
+									) {
+										if (
+											data[column.active.id] &&
+											moment(
+												data[column.active.id]
+											).isBefore(moment())
+										) {
+											style = {
+												color: column.active.colour,
+											};
+										}
+									}
+
+									return <span style={style}>{value}</span>;
 								} else {
 									return null;
 								}
@@ -970,11 +1041,46 @@ const DataGrid = forwardRef(
 										.filter((value) => value !== "");
 
 									if (values.length > 0) {
-										return (
-											<span>
-												{parse(values.join("<br />"))}
-											</span>
-										);
+										let result = "";
+
+										if (
+											column.relation?.id &&
+											column.relation?.key
+										) {
+											const relationValue =
+												column.relation.key.reduce(
+													(acc, id) =>
+														acc === ""
+															? data[id]
+															: acc && acc[id]
+															? acc[id]
+															: "",
+													""
+												);
+
+											result = `${
+												relationValue[
+													column.relation.id
+												]
+											}<br />`;
+										}
+
+										if (
+											column.where &&
+											column.where.id &&
+											column.where.value
+										) {
+											if (
+												data[column.where.id] ===
+												column.where.value
+											) {
+												result += values.join("<br />");
+											}
+										} else {
+											result += values.join("<br />");
+										}
+
+										return <span>{parse(result)}</span>;
 									}
 								}
 
@@ -987,9 +1093,13 @@ const DataGrid = forwardRef(
 							name: column.id,
 							render: ({ data }) => {
 								if (data && data[column.id]) {
-									return (
-										<span>{parse(data[column.id])}</span>
-									);
+									value = data[column.id].split("<br />");
+
+									if (value[0]) {
+										return <span>{parse(value[0])}</span>;
+									} else {
+										return null;
+									}
 								} else {
 									return null;
 								}
@@ -1144,6 +1254,12 @@ const DataGrid = forwardRef(
 			setFilterValue(newFilterValue);
 		}, [columns, filterDataSource]);
 
+		useEffect(() => {
+			if (setFilterData) {
+				setFilterData(filterValue);
+			}
+		}, [filterValue]);
+
 		useEffect(() => {
 			columns.forEach((column) => {
 				if (column.filter && column.filter.url) {
@@ -1242,6 +1358,7 @@ const DataGrid = forwardRef(
 					defaultSortInfo={sortInfo}
 					enableColumnAutosize={false}
 					enableColumnFilterContextMenu={false}
+					enableSelection={false}
 					headerProps={headerProps}
 					idProperty={`visns-datagrid-${ajaxSetting.url.replace(
 						/\//g,

package/package.json

@@ -34,7 +34,7 @@
 		"react-dom": "^17.0.1"
 	},
 	"name": "@visns-studio/visns-components",
-	"version": "1.2.10",
+	"version": "1.3.2",
 	"description": "Various packages to assist in the development of our Custom Applications.",
 	"main": "index.js",
 	"devDependencies": {},