From b8eb9165ef26ce01dd4b322d0eae0cdd3522bb5b Mon Sep 17 00:00:00 2001 From: Azat Ismagilov Date: Sat, 14 Oct 2023 17:13:31 +0100 Subject: [PATCH] Add cool json editor --- src/frontend/admin/package.json | 3 +- .../admin/src/components/AdvancedJson.js | 31 +- .../src/components/atoms/VanillaJSONEditor.js | 35 + src/frontend/package-lock.json | 764 +++++++++--------- 4 files changed, 456 insertions(+), 377 deletions(-) create mode 100644 src/frontend/admin/src/components/atoms/VanillaJSONEditor.js diff --git a/src/frontend/admin/package.json b/src/frontend/admin/package.json index 542e955c7..a3f49553e 100644 --- a/src/frontend/admin/package.json +++ b/src/frontend/admin/package.json @@ -15,7 +15,8 @@ "react-dom": "^17.0.2", "react-rnd": "^10.3.7", "react-router-dom": "^6.2.2", - "react-scripts": "^5.0.1" + "react-scripts": "^5.0.1", + "vanilla-jsoneditor": "^0.18.9" }, "scripts": { "start": "react-scripts start", diff --git a/src/frontend/admin/src/components/AdvancedJson.js b/src/frontend/admin/src/components/AdvancedJson.js index 5536760d9..37e88f8dc 100644 --- a/src/frontend/admin/src/components/AdvancedJson.js +++ b/src/frontend/admin/src/components/AdvancedJson.js @@ -1,12 +1,13 @@ -import React, { useState, useEffect } from "react"; -import { Button, Container, TextField } from "@mui/material"; +import React, { useState, useEffect, useMemo } from "react"; +import { Button, Container } from "@mui/material"; import { errorHandlerWithSnackbar } from "../errors"; import { useSnackbar } from "notistack"; import { BASE_URL_BACKEND, SCHEMAS_LOCATION } from "../config"; import Typography from "@mui/material/Typography"; import { createApiGet, createApiPost } from "../utils"; +import VanillaJSONEditor from "./atoms/VanillaJSONEditor"; +import { createAjvValidator } from "vanilla-jsoneditor"; -// TODO: Use https://github.com/josdejong/svelte-jsoneditor function AdvancedJson() { const { enqueueSnackbar } = useSnackbar(); const errorHandler = errorHandlerWithSnackbar(enqueueSnackbar); @@ -19,7 +20,9 @@ function AdvancedJson() { const apiPost = createApiPost(apiUrl); const [schema, setSchema] = useState(); - const [data, setData] = useState(); + const validator = useMemo(() => schema && createAjvValidator({ schema }), + [schema]); + const [content, setContent] = useState(); useEffect(() => { schemaGet("") @@ -29,18 +32,19 @@ function AdvancedJson() { useEffect(() => { apiGet("") - .then(data => setData(JSON.stringify(data, null, 2))) + .then(data => setContent({ + json: data, + text: undefined + })) .catch(errorHandler("Failed to load advanced json data")); }, [apiUrl]); const onSubmit = () => { - const dataJson = JSON.parse(data); - console.log(dataJson); - apiPost("", dataJson) + apiPost("", content.json) .catch(errorHandler("Failed to save advanced json data")); }; - if (schema === undefined || data === undefined) { + if (schema === undefined || content === undefined) { return ( Loading... @@ -50,11 +54,10 @@ function AdvancedJson() { return ( - setData(e.target.value)} - fullWidth - multiline +