Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix AttributeAddModal to make JSON values less concerning #921

Merged
merged 2 commits into from
Feb 27, 2024
Merged

Fix AttributeAddModal to make JSON values less concerning #921

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f49e556
Fix AttributeAddModal to make JSON values less concerning
psrok1 Feb 23, 2024
74ee8c7
Added correct attribute preview
psrok1 Feb 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
90 changes: 45 additions & 45 deletions mwdb/web/src/components/AttributesAddModal.tsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading