datastake-daf 0.6.229 → 0.6.230

package/src/@daf/core/components/EditForm/components/DataLink/index.js

@@ -13,639 +13,586 @@ import { getLocales } from "../../../../../../helpers/Table";
 import ModalHeader from "../../../Header/ModalHeader/index.jsx";
 import { getToken } from "../../../../../../helpers/Token";
 import DynamicForm from "../../../DynamicForm/index.jsx";
-import { convertUndefinedToNull } from "../../../../../utils/object";
+import { convertUndefinedToNull } from '../../../../../utils/object';
 
-const changeErrors = () => {};
+const changeErrors = () => { };
 
 export default function DataLink({
-	form = {},
-	values,
-	formsValue,
-	maxRepeat,
-	onUpdate = () => {},
-	remove,
-	name,
-	add,
-	flat,
-	k,
-	isHighlighted,
+  form = {},
+  values,
+  formsValue,
+  maxRepeat,
+  onUpdate = () => { },
+  remove,
+  name,
+  add,
+  flat,
+  k,
+  isHighlighted,
 }) {
-	const {
-		t,
-		ajaxOptions,
-		user,
-		ajaxForms,
-		changeAjaxForms,
-		getApiBaseUrl,
-		getAppHeader,
-		app,
-		...rest
-	} = useEditContext();
-	const [rowToEdit, setRowToEdit] = useState();
-	const [linkingData, setLinkingData] = useState({});
-	const [addModalRow, setAddModalRow] = useState(null);
-	const { automaticallyLink } = useMemo(() => form, [form]);
-	const entity = useMemo(
-		() => automaticallyLink?.entity || form?.meta?.dataLinkEntity,
-		[automaticallyLink, form],
-	);
-	const isAjaxModal = useMemo(() => !!form?.meta?.namespace, [form]);
-	const isSingle = maxRepeat === 1;
-	const notAvailable = (values?.meta?.inputs || {})[k]?.notAvailable;
-	const notApplicable = (values?.meta?.inputs || {})[k]?.notApplicable;
-
-	// const formData = isSingle ? (values[name] ? [{ ...values[name] }] : []) : getArray(values[name] || []).map((v, i) => ({ ...v, key: i }));
-
-	const formData = isSingle
-		? Array.isArray(values[name])
-			? values[name].length === 0
-				? []
-				: [{ ...values[name] }]
-			: values[name]
-			? [{ ...values[name] }]
-			: []
-		: getArray(values[name] || []).map((v, i) => ({ ...v, key: i }));
-
-	const noBody = notApplicable || notAvailable;
-
-	const tableKeys = useMemo(() => {
-		let val = form?.meta?.tableKeys;
-		let toReturn = val;
-
-		if (val && !Array.isArray(val)) {
-			if (typeof val === "object") {
-				Object.keys(val).forEach((k) => {
-					const show = showHideInput({ showIf: k }, values);
-
-					if (show) {
-						toReturn = val[k];
-					}
-				});
-			}
-		}
-
-		return toReturn;
-	}, [form, values]);
-
-	const prefilledValues = useMemo(() => {
-		return Object.keys(form?.meta?.prefilledValues || {}).reduce((all, key) => {
-			const val = form.meta.prefilledValues[key];
-
-			if (typeof val === "object") {
-				Object.keys(val).forEach((k) => {
-					const show = showHideInput({ showIf: k }, values);
-
-					if (show) {
-						all[key] = val[k];
-					}
-				});
-			} else {
-				all[key] = val;
-			}
-
-			return all;
-		}, {});
-	}, [form, values]);
-
-	const formScope = useMemo(() => {
-		const val = form.meta.formScope;
-		let toReturn = val;
-
-		if (val) {
-			if (typeof val === "object") {
-				Object.keys(val).forEach((k) => {
-					const show = showHideInput({ showIf: k }, values);
-
-					if (show) {
-						toReturn = val[k];
-					}
-				});
-			}
-		}
-
-		return toReturn;
-	}, [form, values]);
-
-	useEffect(() => {
-		if (values.linking && values.linking[entity]) {
-			setLinkingData(values.linking[entity]);
-		}
-		if (values?.parent?.linking && values?.parent?.linking[entity]) {
-			setLinkingData(values?.parent?.linking[entity]);
-		}
-	}, [entity, values.linking]);
-
-	const ajaxModalValues = useAjaxModal({
-		name: k,
-		user,
-		namespace: form?.meta?.namespace,
-		skipFetch: form?.meta?.skipFetch,
-		isAjaxModal,
-		formScope,
-	});
-
-	const data = (formData || []).map((f, i) => {
-		if (isAjaxModal && typeof f === "string" && linkingData[f]) {
-			const value = linkingData[f];
-			return { ...value, key: i };
-		}
-
-		if (form?.meta?.ajaxOptionsKey) {
-			if (linkingData[f[form?.meta?.ajaxOptionsKey]]) {
-				const value = linkingData[f[form?.meta?.ajaxOptionsKey]];
-				const resData = { ...f, ...value, key: i };
-				if (resData.id && !linkingData[resData.id]) {
-					setLinkingData({
-						...linkingData,
-						[resData.id]: resData,
-					});
-				}
-			}
-
-			const options = ajaxOptions[form?.meta?.ajaxOptionsKey];
-
-			if (Array.isArray(options)) {
-				const value = options.find((v) => v.value === f[form?.meta?.ajaxOptionsKey]);
-				if (value) {
-					const resData = { ...f, ...value, key: i };
-					if (resData.id && !linkingData[resData.id]) {
-						setLinkingData({
-							...linkingData,
-							[resData.id]: resData,
-						});
-					}
-					return resData;
-				}
-			}
-		}
-
-		const resData = { ...f, key: i };
-		if (resData.id && !linkingData[resData.id]) {
-			setLinkingData({
-				...linkingData,
-				[resData.id]: resData,
-			});
-		}
-		return resData;
-	});
-
-	const getDataSource = () => {
-		if (notApplicable || notAvailable) {
-			return [];
-		}
-
-		if (data.length > 3) {
-			return data;
-		}
-
-		const max = isSingle ? 1 : 3;
-
-		const emptyDataSource = [];
-
-		for (let i = 0; i < max; i++) {
-			emptyDataSource.push({ key: i, isEmpty: true });
-		}
-
-		return data.length !== 0
-			? emptyDataSource.map((empty, i) => data[i] || empty)
-			: emptyDataSource;
-	};
-
-	const dataSource = getDataSource();
-
-	const preSelected = data
-		.map((d) => d.id)
-		.filter((d) => !!d)
-		.filter((d) => d !== rowToEdit?.id);
-
-	const onCloseModal = useCallback(() => {
-		setRowToEdit(null);
-		setAddModalRow(false);
-	}, []);
-
-	const inputs = useMemo(
-		() =>
-			Object.values(ajaxModalValues.form)[0]
-				? Object.values(ajaxModalValues.form)[0]
-				: form?.inputs || {},
-		[form, ajaxModalValues.form],
-	);
-
-	const mapKey = useCallback(
-		(val) => {
-			const key = Array.isArray(val.content) && val.content.length ? val.content[0].key : val;
-
-			const input = (inputs[key] || {}).tableLabel || inputs[key] || {};
-			const _input = inputs[key] || {};
-			const title =
-				typeof input === "string"
-					? input
-					: getInputLabel(
-							(inputs[key] || {}).tableLabel || inputs[key] || {},
-							values,
-							true,
-					  );
-
-			const getKey = (row) => {
-				if (Array.isArray(val.content) && val.content.length) {
-					for (let i = 0; i < val.content.length; i++) {
-						const config = val.content[i];
-						const show = showHideInput(config, row);
-						if (show) {
-							return config.key;
-						}
-					}
-				}
-
-				return key;
-			};
-
-			return {
-				title: <Tooltip title={title}>{title}</Tooltip>,
-				key: key,
-				dataIndex: key,
-				ellipsis: { showTitle: true },
-				render: (_, all) => {
-					if (all.isEmpty || ajaxModalValues.isFetching) {
-						return <div className="daf-default-cell" />;
-					}
-
-					const key = getKey(all);
-					const v = all[key] || all;
-					const type = inputs[key]?.type;
-
-					const render = (title) => {
-						if (tooltipInputs.includes(type)) {
-							return <Tooltip title={title}>{title} </Tooltip>;
-						}
-
-						return title;
-					};
-
-					const inputMeta = (all?.meta?.inputs || {})[key] || {};
-
-					if (key === "datastakeId" && (!all[key] || all[key] === "new")) {
-						return "";
-					}
-
-					if (
-						v ||
-						inputMeta?.notApplicable ||
-						inputMeta?.notAvailable ||
-						type === "ajaxSelect"
-					) {
-						if (type === "ajaxSelect") {
-							const data = all[key];
-
-							if (data === "new") {
-								return render(
-									<BasicInput
-										name={key}
-										key={key}
-										isModal
-										config={{
-											...inputs[key],
-											type: "text",
-										}}
-										valueOnlyString
-										data={{
-											...all,
-											[key]:
-												(all?.meta?.inputs || {})[key]?.name ||
-												all[_input?.meta?.onNewSetValueKey],
-											scope: formScope,
-										}}
-										t={t}
-										ajaxForms={ajaxForms}
-										changeAjaxForms={changeAjaxForms}
-										getApiBaseUrl={getApiBaseUrl}
-										getAppHeader={getAppHeader}
-										user={user}
-										getToken={getToken}
-										app={app}
-									/>,
-								);
-							}
-
-							const { meta } = inputs[key];
-
-							if (meta.onNewSetValueKey) {
-								if (!all[meta.onNewSetValueKey]) {
-									return render(
-										<BasicInput
-											t={t}
-											isModal
-											app={app}
-											ajaxForms={ajaxForms}
-											changeAjaxForms={changeAjaxForms}
-											getApiBaseUrl={getApiBaseUrl}
-											getAppHeader={getAppHeader}
-											user={user}
-											getToken={getToken}
-											name={key}
-											key={key}
-											config={{
-												...inputs[key],
-												type: "ajaxSelect",
-											}}
-											valueOnlyString
-											data={{ ...all, scope: data?.scope }}
-											linkingData={all?.linking}
-										/>,
-									);
-								}
-								return render(
-									<BasicInput
-										isModal
-										name={key}
-										key={key}
-										config={{
-											...inputs[key],
-											type: "text",
-										}}
-										t={t}
-										ajaxForms={ajaxForms}
-										changeAjaxForms={changeAjaxForms}
-										getApiBaseUrl={getApiBaseUrl}
-										getAppHeader={getAppHeader}
-										user={user}
-										getToken={getToken}
-										app={app}
-										valueOnlyString
-										data={{
-											...all,
-											[key]: all[meta.onNewSetValueKey],
-											scope: formScope,
-										}}
-									/>,
-								);
-							}
-						}
-
-						return render(
-							<BasicInput
-								isModal
-								name={key}
-								key={key}
-								t={t}
-								ajaxForms={ajaxForms}
-								changeAjaxForms={changeAjaxForms}
-								getApiBaseUrl={getApiBaseUrl}
-								getAppHeader={getAppHeader}
-								user={user}
-								getToken={getToken}
-								app={app}
-								config={inputs[key]}
-								valueOnlyString
-								data={{ ...all, scope: formScope }}
-							/>,
-						);
-					}
-
-					if ((inputs[key] || {}).noValue) {
-						return render(inputs[key] || {}).noValue[user?.language];
-					}
-				},
-			};
-		},
-		[inputs, ajaxModalValues, formScope],
-	);
-
-	const onEditClick = useCallback(
-		(all) => {
-			if (form?.meta?.ajaxOptionsKey) {
-				const _all = Object.keys(all).reduce((val, key) => {
-					val[key] = all[key];
-					return val;
-				}, {});
-
-				setRowToEdit(
-					form?.meta?.linkingKey
-						? {
-								..._all,
-								key: all.key,
-								meta: all.meta,
-								scope: formScope,
-								[form?.meta?.ajaxOptionsKey]:
-									all.id || all.value || all[form?.meta?.ajaxOptionsKey],
-								[form?.meta?.linkingKey]:
-									all._id ||
-									all.id ||
-									all.value ||
-									all[form?.meta?.ajaxOptionsKey] ||
-									all[form?.meta?.linkingKey],
-						  }
-						: {
-								..._all,
-								scope: formScope,
-								key: all.key,
-								meta: all.meta,
-								[form?.meta?.ajaxOptionsKey]:
-									all.id || all.value || all[form?.meta?.ajaxOptionsKey],
-						  },
-				);
-				return;
-			}
-
-			setRowToEdit({ ...all, scope: formScope });
-		},
-		[form, formScope],
-	);
-
-	const canAdd = (maxRepeat ? formData.length < maxRepeat : true) && !noBody;
-
-	const columns = [
-		...(Array.isArray(tableKeys)
-			? tableKeys.map(mapKey)
-			: Object.keys(inputs || {}).map(mapKey)),
-		{
-			key: "actions",
-			dataIndex: "actions",
-			title: (
-				<Button
-					size="small"
-					className="add-btn"
-					disabled={!canAdd || (isAjaxModal ? ajaxModalValues?.isFetching : false)}
-					onClick={() => {
-						const _values = (form?.meta?.subjectPrefilledValuesKeys || []).reduce(
-							(all, key) => {
-								if (values[key]) {
-									all[key] = values[key];
-								}
-								return all;
-							},
-							{},
-						);
-
-						const _prefilled = {};
-
-						Object.keys(_form?.inputs || {}).forEach((key) => {
-							if (_form?.inputs?.[key]?.meta?.defaultValue) {
-								_prefilled[key] = _form?.inputs?.[key]?.meta?.defaultValue;
-							}
-						});
-
-						setAddModalRow({
-							...(_values || {}),
-							...(prefilledValues || {}),
-							..._prefilled,
-							scope: formScope,
-						});
-					}}
-				>
-					<CustomIcon name="Add" width={16} height={16} />
-				</Button>
-			),
-			width: 70,
-			render: (_, all) => {
-				if (all.isEmpty || ajaxModalValues.isFetching) {
-					return <div className="daf-default-cell" />;
-				}
-
-				const items = [];
-
-				const canEdit =
-					form?.meta?.allowedActions?.edit === false
-						? false
-						: form?.meta?.allowedActions?.edit || (isSingle && formData.length === 1);
-
-				if (canEdit) {
-					items.push({
-						label: t("Edit"),
-						key: "edit",
-						onClick: () => onEditClick(all),
-					});
-				}
-
-				if (form?.meta?.allowedActions?.remove) {
-					items.push({
-						label: t("Delete"),
-						key: "remove",
-						onClick: () => {
-							Modal.confirm({
-								title: t("Delete information"),
-								content: t("Are you sure you want to delete this information?"),
-								okText: t("Yes"),
-								cancelText: t("Cancel"),
-								onOk: () => {
-									remove(all);
-								},
-							});
-						},
-					});
-				}
-
-				if (items.length) {
-					return <MoreMenu items={items} />;
-				}
-
-				return null;
-			},
-		},
-	];
-
-	const unsortedForm = { inputs };
-
-	const _form = Object.keys(unsortedForm).reduce((all, key) => {
-		const _this = Object.keys(unsortedForm[key])
-			.sort((a, b) => unsortedForm[key][a].position - unsortedForm[key][b].position)
-			.reduce((all, k) => {
-				if (k === "scope") {
-					return all;
-				}
-
-				all[k] = unsortedForm[key][k];
-				return all;
-			}, {});
-
-		all[key] = _this;
-		return all;
-	}, {});
-
-	console.log("form", dataSource);
-
-	return (
-		<div
-			className={formatClassname([
-				"data-link-cont mt-2",
-				noBody && "no-body",
-				isHighlighted && "highlighted",
-			])}
-			style={form?.meta?.style}
-		>
-			<div className="daf-table-wrapper no-padding repeatable-form-table no-pagination">
-				<ConfigProvider
-					renderEmpty={() =>
-						notApplicable ? t("Not applicable") : t("No information available")
-					}
-				>
-					<Table
-						locale={getLocales(t)}
-						loading={ajaxModalValues.isFetching}
-						pagination={false}
-						columns={columns}
-						dataSource={dataSource}
-						rowKey="key"
-						scroll={noBody ? undefined : { y: 170 }}
-					/>
-				</ConfigProvider>
-			</div>
-
-			<Modal
-				open={!!addModalRow || !!rowToEdit}
-				footer={null}
-				width={650}
-				className="max-h-50"
-				destroyOnClose
-				onCancel={onCloseModal}
-				title={
-					<ModalHeader
-						title={getLabelFromScopeForDataLink(
-							form?.modalLabel || form?.label,
-							formScope,
-						)}
-					/>
-				}
-			>
-				<div className="repeatable-modal-form">
-					<DynamicForm
-						isModal
-						showSaveAndNext={false}
-						form={_form}
-						code={form?.meta?.code}
-						excludedKeys={[...(form?.meta?.excludedKeys || [])]}
-						data={{ ...(rowToEdit || addModalRow || {}) }}
-						disabledInputs={form?.meta?.disabledKeys || []}
-						onCancel={onCloseModal}
-						preSelected={preSelected}
-						changeErrors={changeErrors}
-						staticWidth="500px"
-						submit={(_payload) => {
-							const { form, ...payload } = _payload;
-
-							if (rowToEdit) {
-								const { key, ...rest } = payload;
-								onUpdate(rest, key);
-								onCloseModal();
-							} else {
-								add(convertUndefinedToNull(payload));
-								onCloseModal();
-							}
-						}}
-						{...{
-							t,
-							ajaxOptions,
-							user,
-							ajaxForms,
-							changeAjaxForms,
-							getApiBaseUrl,
-							getAppHeader,
-							app,
-							...rest,
-						}}
-					/>
-				</div>
-			</Modal>
-		</div>
-	);
+  const {
+    t,
+    ajaxOptions,
+    user,
+    ajaxForms,
+    changeAjaxForms,
+    getApiBaseUrl,
+    getAppHeader,
+    app,
+    ...rest
+  } = useEditContext();
+  const [rowToEdit, setRowToEdit] = useState();
+  const [linkingData, setLinkingData] = useState({});
+  const [addModalRow, setAddModalRow] = useState(null);
+  const { automaticallyLink } = useMemo(() => form, [form]);
+  const entity = useMemo(() => automaticallyLink?.entity || form?.meta?.dataLinkEntity, [automaticallyLink, form]);
+  const isAjaxModal = useMemo(() => !!form?.meta?.namespace, [form]);
+  const isSingle = maxRepeat === 1;
+  const notAvailable = (values?.meta?.inputs || {})[k]?.notAvailable;
+  const notApplicable = (values?.meta?.inputs || {})[k]?.notApplicable;
+
+  // const formData = isSingle ? (values[name] ? [{ ...values[name] }] : []) : getArray(values[name] || []).map((v, i) => ({ ...v, key: i }));
+
+  const formData = isSingle
+    ? Array.isArray(values[name])
+      ? values[name].length === 0
+        ? []
+        : [{ ...values[name] }]
+      : values[name] ? [{ ...values[name] }] : []
+    : getArray(values[name] || []).map((v, i) => ({ ...v, key: i }));
+
+
+  const noBody = notApplicable || notAvailable;
+
+  const tableKeys = useMemo(() => {
+    let val = form?.meta?.tableKeys;
+    let toReturn = val;
+
+    if (val && !Array.isArray(val)) {
+      if (typeof val === 'object') {
+        Object.keys(val).forEach((k) => {
+          const show = showHideInput(
+            { showIf: k },
+            values,
+          );
+
+          if (show) {
+            toReturn = val[k];
+          }
+        })
+      }
+    }
+
+    return toReturn;
+  }, [form, values]);
+
+  const prefilledValues = useMemo(() => {
+    return Object.keys(form?.meta?.prefilledValues || {}).reduce((all, key) => {
+      const val = form.meta.prefilledValues[key];
+
+      if (typeof val === 'object') {
+        Object.keys(val).forEach((k) => {
+          const show = showHideInput(
+            { showIf: k },
+            values,
+          );
+
+          if (show) {
+            all[key] = val[k];
+          }
+        })
+      } else {
+        all[key] = val;
+      }
+
+      return all;
+    }, {});
+  }, [form, values]);
+
+  const formScope = useMemo(() => {
+    const val = form.meta.formScope;
+    let toReturn = val;
+
+    if (val) {
+      if (typeof val === 'object') {
+        Object.keys(val).forEach((k) => {
+          const show = showHideInput(
+            { showIf: k },
+            values,
+          );
+
+          if (show) {
+            toReturn = val[k];
+          }
+        })
+      }
+    }
+
+    return toReturn;
+  }, [form, values]);
+
+  useEffect(() => {
+    if (values.linking && values.linking[entity]) {
+      setLinkingData(values.linking[entity]);
+    }
+    if (values?.parent?.linking && values?.parent?.linking[entity]) {
+      setLinkingData(values?.parent?.linking[entity]);
+    }
+  }, [entity, values.linking])
+
+  const ajaxModalValues = useAjaxModal({
+    name: k,
+    user,
+    namespace: form?.meta?.namespace,
+    skipFetch: form?.meta?.skipFetch,
+    isAjaxModal,
+    formScope,
+  })
+
+  const data = (formData || []).map((f, i) => {
+    if (isAjaxModal && typeof f === 'string' && linkingData[f]) {
+      const value = linkingData[f];
+      return { ...value, key: i };
+    }
+
+    if (form?.meta?.ajaxOptionsKey) {
+      if (linkingData[f[form?.meta?.ajaxOptionsKey]]) {
+        const value = linkingData[f[form?.meta?.ajaxOptionsKey]];
+        const resData = { ...f, ...value, key: i };
+        if (resData.id && !linkingData[resData.id]) {
+          setLinkingData({
+            ...linkingData,
+            [resData.id]: resData,
+          })
+        }
+      }
+
+      const options = ajaxOptions[form?.meta?.ajaxOptionsKey];
+
+      if (Array.isArray(options)) {
+        const value = options.find((v) => v.value === f[form?.meta?.ajaxOptionsKey])
+        if (value) {
+          const resData = { ...f, ...value, key: i };
+          if (resData.id && !linkingData[resData.id]) {
+            setLinkingData({
+              ...linkingData,
+              [resData.id]: resData,
+            })
+          }
+          return resData;
+        }
+      }
+    }
+
+    const resData = { ...f, key: i };
+    if (resData.id && !linkingData[resData.id]) {
+      setLinkingData({
+        ...linkingData,
+        [resData.id]: resData,
+      })
+    }
+    return resData;
+  });
+
+  const getDataSource = () => {
+    if (notApplicable || notAvailable) {
+      return [];
+    }
+
+    if (data.length > 3) {
+      return data;
+    }
+
+    const max = isSingle ? 1 : 3;
+
+    const emptyDataSource = [];
+
+    for (let i = 0; i < max; i++) {
+      emptyDataSource.push({ key: i, isEmpty: true });
+    }
+
+    return data.length !== 0 ? emptyDataSource.map((empty, i) => data[i] || empty) : emptyDataSource;
+  };
+
+  const dataSource = getDataSource();
+
+  const preSelected = data.map((d) => d.id).filter((d) => !!d).filter((d) => d !== rowToEdit?.id);
+
+  const onCloseModal = useCallback(() => {
+    setRowToEdit(null);
+    setAddModalRow(false);
+  }, []);
+
+  const inputs = useMemo(() =>
+    Object.values(ajaxModalValues.form)[0]
+      ? Object.values(ajaxModalValues.form)[0]
+      : form?.inputs || {}
+    , [form, ajaxModalValues.form])
+
+  const mapKey = useCallback((val) => {
+    const key = Array.isArray(val.content) && val.content.length
+      ? val.content[0].key
+      : val;
+
+    const input = (inputs[key] || {}).tableLabel || (inputs[key] || {});
+    const _input = (inputs[key] || {});
+    const title = typeof input === 'string'
+      ? input
+      : getInputLabel((inputs[key] || {}).tableLabel || (inputs[key] || {}), values, true);
+
+    const getKey = (row) => {
+      if (Array.isArray(val.content) && val.content.length) {
+        for (let i = 0; i < val.content.length; i++) {
+          const config = val.content[i];
+          const show = showHideInput(config, row);
+          if (show) {
+            return config.key;
+          }
+        }
+      }
+
+      return key;
+    }
+
+    return {
+      title: <Tooltip title={title}>{title}</Tooltip>,
+      key: key,
+      dataIndex: key,
+      ellipsis: { showTitle: true },
+      render: (_, all) => {
+        if (all.isEmpty || ajaxModalValues.isFetching) {
+          return <div className="daf-default-cell" />;
+        }
+
+        const key = getKey(all);
+        const v = all[key] || all;
+        const type = inputs[key]?.type;
+
+        const render = (title) => {
+          if (tooltipInputs.includes(type)) {
+            return (
+              <Tooltip title={title}>
+                {title} {' '}
+              </Tooltip>
+            );
+          }
+
+          return title;
+        };
+
+        const inputMeta = (all?.meta?.inputs || {})[key] || {};
+
+        if (key === 'datastakeId' && (!all[key] || all[key] === 'new')) {
+          return '';
+        }
+
+        if (v || inputMeta?.notApplicable || inputMeta?.notAvailable || type === 'ajaxSelect') {
+          if (type === 'ajaxSelect') {
+            const data = all[key];
+
+            if (data === 'new') {
+              return render(
+                <BasicInput
+                  name={key}
+                  key={key}
+                  isModal
+                  config={{
+                    ...inputs[key],
+                    type: 'text',
+                  }}
+                  valueOnlyString
+                  data={{
+                    ...all,
+                    [key]: (all?.meta?.inputs || {})[key]?.name || all[_input?.meta?.onNewSetValueKey],
+                    scope: formScope,
+                  }}
+                  t={t}
+                  ajaxForms={ajaxForms}
+                  changeAjaxForms={changeAjaxForms}
+                  getApiBaseUrl={getApiBaseUrl}
+                  getAppHeader={getAppHeader}
+                  user={user}
+                  getToken={getToken}
+                  app={app}
+                />
+              );
+            }
+
+            const { meta } = inputs[key];
+
+            if (meta.onNewSetValueKey) {
+              if(!all[meta.onNewSetValueKey]) {
+                return render(
+                  <BasicInput
+                    t={t}
+                    isModal
+                    app={app}
+                    ajaxForms={ajaxForms}
+                    changeAjaxForms={changeAjaxForms}
+                    getApiBaseUrl={getApiBaseUrl}
+                    getAppHeader={getAppHeader}
+                    user={user}
+                    getToken={getToken}
+                    name={key}
+                    key={key}
+                    config={{
+                      ...inputs[key],
+                      type: 'ajaxSelect',
+                    }}
+                    valueOnlyString
+                    data={{ ...all, scope: data?.scope }}
+                    linkingData={all?.linking}
+                  />
+                  )
+                }
+              return render(
+                <BasicInput
+                  isModal
+                  name={key}
+                  key={key}
+                  config={{
+                    ...inputs[key],
+                    type: 'text',
+                  }}
+                  t={t}
+                  ajaxForms={ajaxForms}
+                  changeAjaxForms={changeAjaxForms}
+                  getApiBaseUrl={getApiBaseUrl}
+                  getAppHeader={getAppHeader}
+                  user={user}
+                  getToken={getToken}
+                  app={app}
+                  valueOnlyString
+                  data={{ ...all, [key]: all[meta.onNewSetValueKey], scope: formScope, }}
+                />
+              );
+            }
+          }
+
+          return render(
+            <BasicInput
+              isModal
+              name={key}
+              key={key}
+              t={t}
+              ajaxForms={ajaxForms}
+              changeAjaxForms={changeAjaxForms}
+              getApiBaseUrl={getApiBaseUrl}
+              getAppHeader={getAppHeader}
+              user={user}
+              getToken={getToken}
+              app={app}
+              config={inputs[key]}
+              valueOnlyString
+              data={{ ...all, scope: formScope, }}
+            />
+          );
+        }
+
+        if ((inputs[key] || {}).noValue) {
+          return render(inputs[key] || {}).noValue[user?.language]
+        }
+      },
+    }
+  }, [inputs, ajaxModalValues, formScope]);
+
+  const onEditClick = useCallback((all) => {
+    if (form?.meta?.ajaxOptionsKey) {
+      const _all = Object.keys(all)
+        .reduce((val, key) => {
+          val[key] = all[key];
+          return val;
+        }, {});
+
+      setRowToEdit(form?.meta?.linkingKey ? {
+        ..._all,
+        key: all.key,
+        meta: all.meta,
+        scope: formScope,
+        [form?.meta?.ajaxOptionsKey]: all.id || all.value || all[form?.meta?.ajaxOptionsKey],
+        [form?.meta?.linkingKey]: all._id || all.id || all.value || all[form?.meta?.ajaxOptionsKey] || all[form?.meta?.linkingKey],
+      } : {
+        ..._all,
+        scope: formScope,
+        key: all.key,
+        meta: all.meta,
+        [form?.meta?.ajaxOptionsKey]: all.id || all.value || all[form?.meta?.ajaxOptionsKey],
+      })
+      return;
+    }
+
+    setRowToEdit({ ...all, scope: formScope, })
+  }, [form, formScope]);
+
+  const canAdd = (maxRepeat ? formData.length < maxRepeat : true) && !noBody;
+
+  const columns = [
+    ...(Array.isArray(tableKeys) ? tableKeys.map(mapKey) : Object.keys(inputs || {}).map(mapKey)),
+    {
+      key: 'actions',
+      dataIndex: 'actions',
+      title: (
+        <Button
+          size="small"
+          className="add-btn"
+          disabled={!canAdd || (isAjaxModal ? ajaxModalValues?.isFetching : false)}
+          onClick={() => {
+            const _values = (form?.meta?.subjectPrefilledValuesKeys || []).reduce((all, key) => {
+              if (values[key]) {
+                all[key] = values[key];
+              }
+              return all;
+            }, {});
+
+            const _prefilled = {};
+
+            Object.keys(_form?.inputs || {}).forEach((key) => {
+              if (_form?.inputs?.[key]?.meta?.defaultValue) {
+                _prefilled[key] = _form?.inputs?.[key]?.meta?.defaultValue;
+              }
+            });
+
+            setAddModalRow({ ...(_values || {}), ...(prefilledValues || {}), ..._prefilled, scope: formScope, });
+          }}
+        >
+          <CustomIcon name="Add" width={16} height={16} />
+        </Button>
+      ),
+      width: 70,
+      render: (_, all) => {
+        if (all.isEmpty || ajaxModalValues.isFetching) {
+          return <div className="daf-default-cell" />;
+        }
+
+        const items = [];
+
+        const canEdit = form?.meta?.allowedActions?.edit === false
+          ? false
+          : form?.meta?.allowedActions?.edit || (isSingle && formData.length === 1);
+
+        if (canEdit) {
+          items.push({
+            label: t('Edit'),
+            key: "edit",
+            onClick: () => onEditClick(all),
+          });
+        }
+
+        if (form?.meta?.allowedActions?.remove) {
+          items.push({
+            label: t('Delete'),
+            key: "remove",
+            onClick: () => {
+              Modal.confirm({
+                title: t('Delete information'),
+                content: t('Are you sure you want to delete this information?'),
+                okText: t('Yes'),
+                cancelText: t('Cancel'),
+                onOk: () => {
+                  remove(all);
+                },
+              })
+            },
+          });
+        }
+
+        if (items.length) {
+          return (
+            <MoreMenu items={items} />
+          )
+        }
+
+        return null;
+      }
+    }
+  ];
+
+  const unsortedForm = { inputs };
+
+  const _form = Object.keys(unsortedForm).reduce((all, key) => {
+    const _this = Object.keys(unsortedForm[key])
+      .sort((a, b) => unsortedForm[key][a].position - unsortedForm[key][b].position)
+      .reduce((all, k) => {
+        if (k === 'scope') {
+          return all;
+        }
+
+        all[k] = unsortedForm[key][k];
+        return all;
+      }, {});
+
+    all[key] = _this;
+    return all;
+  }, {});
+
+
+  return (
+    <div className={formatClassname(['data-link-cont mt-2', noBody && 'no-body', isHighlighted && 'highlighted'])} style={form?.meta?.style}>
+      <div className="daf-table-wrapper no-padding repeatable-form-table no-pagination">
+        <ConfigProvider renderEmpty={() => notApplicable ? t('Not applicable') : t('No information available')}>
+          <Table
+            locale={getLocales(t)}
+            loading={ajaxModalValues.isFetching}
+            pagination={false}
+            columns={columns}
+            dataSource={dataSource}
+            rowKey="key"
+            scroll={noBody ? undefined : { y: 170 }}
+          />
+        </ConfigProvider>
+      </div>
+
+      <Modal
+        open={!!addModalRow || !!rowToEdit}
+        footer={null}
+        width={650}
+        className="max-h-50"
+        destroyOnClose
+        onCancel={onCloseModal}
+        title={(
+          <ModalHeader title={getLabelFromScopeForDataLink(form?.modalLabel || form?.label, formScope)} />
+        )}
+      >
+        <div className="repeatable-modal-form">
+          <DynamicForm
+            isModal
+            showSaveAndNext={false}
+            form={_form}
+            code={form?.meta?.code}
+            excludedKeys={[...(form?.meta?.excludedKeys || [])]}
+            data={{ ...(rowToEdit || addModalRow || {}) }}
+            disabledInputs={form?.meta?.disabledKeys || []}
+            onCancel={onCloseModal}
+            preSelected={preSelected}
+            changeErrors={changeErrors}
+            staticWidth = '500px'
+            submit={(_payload) => {
+              const { form, ...payload } = _payload;
+
+              if (rowToEdit) {
+                const { key, ...rest } = payload;
+                onUpdate(rest, key);
+                onCloseModal();
+              } else {
+                add(convertUndefinedToNull(payload));
+                onCloseModal();
+              }
+            }}
+            {...({
+              t,
+              ajaxOptions,
+              user,
+              ajaxForms,
+              changeAjaxForms,
+              getApiBaseUrl,
+              getAppHeader,
+              app,
+              ...rest
+            })}
+          />
+        </div>
+
+      </Modal>
+    </div>
+  )
 }