Skip to content

Commit

Permalink
Fix AttributeAddModal to make JSON values less concerning (#921)
Browse files Browse the repository at this point in the history
  • Loading branch information
@psrok1
psrok1 committed Feb 27, 2024
1 parent 3b11349 commit 572dde9
Show file tree
Hide file tree
Showing 3 changed files with 48 additions and 48 deletions.
90 changes: 45 additions & 45 deletions mwdb/web/src/components/AttributesAddModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand All @@ -25,10 +25,9 @@ export function AttributesAddModal({ isOpen, onAdd, onRequestClose }: Props) {
Record<string, AttributeDefinition>
>({});
const [attributeKey, setAttributeKey] = useState<string>("");
const [richTemplate, setRichTemplate] = useState<string>("");
const [attributeValue, setAttributeValue] = useState<string>("");
const [attributeType, setAttributeType] = useState<string>("string");
const [invalid, setInvalid] = useState<boolean>(false);
const [attributeJSONValue, setAttributeJSONValue] = useState<any>(null);
const [error, setError] = useState<string | null>(null);
const attributeForm = useRef<HTMLFormElement>(null);
const attributesAvailable = !isEmpty(attributeDefinitions);
Expand All @@ -37,34 +36,34 @@ export function AttributesAddModal({ isOpen, onAdd, onRequestClose }: Props) {
getAttributeDefinitions();
}, []);

function handleSubmit(ev: React.MouseEvent<HTMLFormElement>) {
if (ev) ev.preventDefault();
if (!attributeForm.current?.reportValidity()) return;
let value = attributeValue;
if (attributeType === "object") {
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<HTMLFormElement>) {
if (ev) ev.preventDefault();
if (!attributeForm.current?.reportValidity()) return;
if (attributeType === "json") {
onAdd(attributeKey, attributeJSONValue);
} else {
onAdd(attributeKey, attributeValue);
}
}

function handleKeyChange(ev: React.ChangeEvent<HTMLSelectElement>) {
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 || ""
);
}
setAttributeType("object");

setAttributeValue(
attributeDefinitions[ev.target.value].example_value || ""
);
setError(null);
}

Expand Down Expand Up @@ -105,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 ? (
Expand Down Expand Up @@ -167,17 +168,17 @@ export function AttributesAddModal({ isOpen, onAdd, onRequestClose }: Props) {
<input
className="form-check-input"
type="radio"
id="value-object"
id="value-json"
name="value-type"
checked={attributeType === "object"}
value="object"
checked={attributeType === "json"}
value="json"
onChange={handleTypeChange}
/>
<label
className="form-check-label"
htmlFor="value-object"
htmlFor="value-json"
>
Object
JSON
</label>
</div>
</div>
Expand Down Expand Up @@ -206,32 +207,31 @@ export function AttributesAddModal({ isOpen, onAdd, onRequestClose }: Props) {
/>
)}
</div>
{richTemplate ? (
{attributeDefinitions[attributeKey] ? (
<div className="form-group">
<label>Rich attribute preview</label>
<label>Attribute preview</label>
<table
className="table table-striped table-bordered table-hover data-table"
style={{
width: `500px`,
}}
>
<tbody>
<tr>
<th>{"My attribute"}</th>
<td>
<RichAttributeRenderer
template={richTemplate}
value={
<AttributeRenderer
attributes={[
{
key: attributeKey,
id: 0,
value:
attributeType === "string"
? JSON.stringify(
attributeValue
)
: attributeValue
}
setInvalid={setInvalid}
/>
</td>
</tr>
? attributeValue
: attributeJSONValue,
},
]}
attributeDefinition={
attributeDefinitions[attributeKey]
}
/>
</tbody>
</table>
</div>
Expand Down
2 changes: 1 addition & 1 deletion mwdb/web/src/components/ShowObject/common/AttributeRenderer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand Down
4 changes: 2 additions & 2 deletions mwdb/web/src/components/ShowObject/common/AttributeValue.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,14 @@ import { useNavigate } from "react-router-dom";
import { RichAttributeValue } from "../common/RichAttributeValue";

type Props = {
value: string;
value: any;
attributeId: number;
attributeDefinition: {
url_template: string;
rich_template: string;
key: string;
};
onRemove: (id: number) => void;
onRemove?: (id: number) => void;
};

export function AttributeValue({
Expand Down

0 comments on commit 572dde9

Please sign in to comment.