From f49e5564d8a1d7a6ee3606a930200098213a59b5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Srokosz?= Date: Fri, 23 Feb 2024 19:19:51 +0100 Subject: [PATCH 1/2] Fix AttributeAddModal to make JSON values less concerning --- .../web/src/components/AttributesAddModal.tsx | 48 ++++++++----------- .../ShowObject/common/AttributeRenderer.tsx | 2 +- .../ShowObject/common/AttributeValue.tsx | 2 +- 3 files changed, 23 insertions(+), 29 deletions(-) diff --git a/mwdb/web/src/components/AttributesAddModal.tsx b/mwdb/web/src/components/AttributesAddModal.tsx index fb885fecb..b9d2a5151 100644 --- a/mwdb/web/src/components/AttributesAddModal.tsx +++ b/mwdb/web/src/components/AttributesAddModal.tsx @@ -4,7 +4,7 @@ import { toast } from "react-toastify"; import { api } from "@mwdb-web/commons/api"; import { ConfirmationModal } from "@mwdb-web/commons/ui"; -import { RichAttributeRenderer } from "./RichAttribute/RichAttributeRenderer"; +import { AttributeRenderer } from "@mwdb-web/components/ShowObject/common/AttributeRenderer"; import AceEditor from "react-ace"; @@ -41,7 +41,7 @@ export function AttributesAddModal({ isOpen, onAdd, onRequestClose }: Props) { if (ev) ev.preventDefault(); if (!attributeForm.current?.reportValidity()) return; let value = attributeValue; - if (attributeType === "object") { + if (attributeType === "json") { try { value = JSON.parse(attributeValue); } catch (e: any) { @@ -63,8 +63,6 @@ export function AttributesAddModal({ isOpen, onAdd, onRequestClose }: Props) { attributeDefinitions[ev.target.value].example_value || "" ); } - setAttributeType("object"); - setError(null); } @@ -167,17 +165,17 @@ export function AttributesAddModal({ isOpen, onAdd, onRequestClose }: Props) { @@ -206,9 +204,9 @@ export function AttributesAddModal({ isOpen, onAdd, onRequestClose }: Props) { /> )} - {richTemplate ? ( + {attributeDefinitions[attributeKey] ? (
- + - - - - +
{"My attribute"} - -
diff --git a/mwdb/web/src/components/ShowObject/common/AttributeRenderer.tsx b/mwdb/web/src/components/ShowObject/common/AttributeRenderer.tsx index a5845cb07..5818d7cd9 100644 --- a/mwdb/web/src/components/ShowObject/common/AttributeRenderer.tsx +++ b/mwdb/web/src/components/ShowObject/common/AttributeRenderer.tsx @@ -7,7 +7,7 @@ import { AttributeDefinition } from "@mwdb-web/types/types"; type Props = { attributes: Attribute[]; attributeDefinition: AttributeDefinition; - onRemoveAttribute: (id: number) => void; + onRemoveAttribute?: (id: number) => void; }; export function AttributeRenderer({ diff --git a/mwdb/web/src/components/ShowObject/common/AttributeValue.tsx b/mwdb/web/src/components/ShowObject/common/AttributeValue.tsx index 0e7e7255c..5b1cb8e86 100644 --- a/mwdb/web/src/components/ShowObject/common/AttributeValue.tsx +++ b/mwdb/web/src/components/ShowObject/common/AttributeValue.tsx @@ -14,7 +14,7 @@ type Props = { rich_template: string; key: string; }; - onRemove: (id: number) => void; + onRemove?: (id: number) => void; }; export function AttributeValue({ From 74ee8c7afe4e4ec22570cf7ae6ebe16d708e3f80 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Srokosz?= Date: Tue, 27 Feb 2024 18:41:21 +0100 Subject: [PATCH 2/2] Added correct attribute preview --- .../web/src/components/AttributesAddModal.tsx | 46 +++++++++++-------- .../ShowObject/common/AttributeValue.tsx | 2 +- 2 files changed, 27 insertions(+), 21 deletions(-) diff --git a/mwdb/web/src/components/AttributesAddModal.tsx b/mwdb/web/src/components/AttributesAddModal.tsx index b9d2a5151..78a4157bd 100644 --- a/mwdb/web/src/components/AttributesAddModal.tsx +++ b/mwdb/web/src/components/AttributesAddModal.tsx @@ -25,10 +25,9 @@ export function AttributesAddModal({ isOpen, onAdd, onRequestClose }: Props) { Record >({}); const [attributeKey, setAttributeKey] = useState(""); - const [richTemplate, setRichTemplate] = useState(""); const [attributeValue, setAttributeValue] = useState(""); const [attributeType, setAttributeType] = useState("string"); - const [invalid, setInvalid] = useState(false); + const [attributeJSONValue, setAttributeJSONValue] = useState(null); const [error, setError] = useState(null); const attributeForm = useRef(null); const attributesAvailable = !isEmpty(attributeDefinitions); @@ -37,32 +36,34 @@ export function AttributesAddModal({ isOpen, onAdd, onRequestClose }: Props) { getAttributeDefinitions(); }, []); - function handleSubmit(ev: React.MouseEvent) { - if (ev) ev.preventDefault(); - if (!attributeForm.current?.reportValidity()) return; - let value = attributeValue; + useEffect(() => { if (attributeType === "json") { try { - value = JSON.parse(attributeValue); + let value = JSON.parse(attributeValue); + setAttributeJSONValue(value); + setError(null); } catch (e: any) { + setAttributeJSONValue(null); setError(e.toString()); - return; } } - onAdd(attributeKey, value); + }, [attributeValue, attributeType]); + + function handleSubmit(ev: React.MouseEvent) { + if (ev) ev.preventDefault(); + if (!attributeForm.current?.reportValidity()) return; + if (attributeType === "json") { + onAdd(attributeKey, attributeJSONValue); + } else { + onAdd(attributeKey, attributeValue); + } } function handleKeyChange(ev: React.ChangeEvent) { setAttributeKey(ev.target.value); - if (!ev.target.value.length) setRichTemplate(""); - else { - setRichTemplate( - attributeDefinitions[ev.target.value].rich_template - ); - setAttributeValue( - attributeDefinitions[ev.target.value].example_value || "" - ); - } + setAttributeValue( + attributeDefinitions[ev.target.value].example_value || "" + ); setError(null); } @@ -103,7 +104,9 @@ export function AttributesAddModal({ isOpen, onAdd, onRequestClose }: Props) { onRequestClose={onRequestClose} onConfirm={handleSubmit} confirmDisabled={ - !attributesAvailable || (invalid && !isEmpty(richTemplate)) + !attributesAvailable || + isEmpty(attributeValue) || + error !== null } > {!attributesAvailable ? ( @@ -219,7 +222,10 @@ export function AttributesAddModal({ isOpen, onAdd, onRequestClose }: Props) { { key: attributeKey, id: 0, - value: attributeValue, + value: + attributeType === "string" + ? attributeValue + : attributeJSONValue, }, ]} attributeDefinition={ diff --git a/mwdb/web/src/components/ShowObject/common/AttributeValue.tsx b/mwdb/web/src/components/ShowObject/common/AttributeValue.tsx index 5b1cb8e86..af4fa6ed9 100644 --- a/mwdb/web/src/components/ShowObject/common/AttributeValue.tsx +++ b/mwdb/web/src/components/ShowObject/common/AttributeValue.tsx @@ -7,7 +7,7 @@ import { useNavigate } from "react-router-dom"; import { RichAttributeValue } from "../common/RichAttributeValue"; type Props = { - value: string; + value: any; attributeId: number; attributeDefinition: { url_template: string;