From f65a137def736f92860cbc9bc0c769b89c6c3f9d Mon Sep 17 00:00:00 2001 From: Victor Frunze Date: Fri, 16 Aug 2024 12:47:44 +0300 Subject: [PATCH] MWB-669: add submit api --- .../frontend/src/api/fields-registry/index.js | 8 +- .../src/pages/app/fields-and-nodes/index.js | 304 ++++++++++-------- 2 files changed, 169 insertions(+), 143 deletions(-) diff --git a/mapping_workbench/frontend/src/api/fields-registry/index.js b/mapping_workbench/frontend/src/api/fields-registry/index.js index c690a2443..d00edca2c 100644 --- a/mapping_workbench/frontend/src/api/fields-registry/index.js +++ b/mapping_workbench/frontend/src/api/fields-registry/index.js @@ -56,12 +56,18 @@ class FieldsRegistryApi extends SectionApi { const result = await this.getItems(request, 'elements'); return result.items.map(e => ({ id: e._id, - xpath: e.absolute_xpath, + absolute_xpath: e.absolute_xpath, element_type: e.element_type, parent_node_id: e.parent_node_id, relative_xpath: e.relative_xpath, })) } + + + async addElement(data) { + let endpoint = this.paths.elements; + return appApi.post(endpoint, data, {'project_id': sessionApi.getSessionProject()}); + } } export const fieldsRegistryApi = new FieldsRegistryApi(); diff --git a/mapping_workbench/frontend/src/pages/app/fields-and-nodes/index.js b/mapping_workbench/frontend/src/pages/app/fields-and-nodes/index.js index 3b42280cb..7e5baab90 100644 --- a/mapping_workbench/frontend/src/pages/app/fields-and-nodes/index.js +++ b/mapping_workbench/frontend/src/pages/app/fields-and-nodes/index.js @@ -17,10 +17,16 @@ import Alert from "@mui/material/Alert"; import {Layout as AppLayout} from 'src/layouts/app'; import File from 'src/sections/app/fields-and-nodes/file' import {fieldsRegistryApi as fieldsRegistry} from 'src/api/fields-registry' -import {testDataSuitesApi} from "../../../api/test-data-suites"; +import {testDataSuitesApi as sectionApi, testDataSuitesApi} from "../../../api/test-data-suites"; import {FormTextField} from "../../../components/app/form/text-field"; import {toastError, toastLoad, toastSuccess} from "../../../components/app-toast"; import RelativeXpathFinder from "../../../sections/app/fields-and-nodes/relative-xpath-finder"; +import {Seo} from "../../../components/seo"; +import Breadcrumbs from "@mui/material/Breadcrumbs"; +import {BreadcrumbsSeparator} from "../../../components/breadcrumbs-separator"; +import Link from "@mui/material/Link"; +import {RouterLink} from "../../../components/router-link"; +import {paths} from "../../../paths"; const Page = () => { const [files, setFiles] = useState([]) @@ -29,14 +35,15 @@ const Page = () => { const [xmlNodes, setXmlNodes] = useState({}) const [xPaths, setXPaths] = useState([]) const [xmlContent, setXmlContent] = useState('') - const [saving, setSaving] = useState(false) + + const SECTION_TITLE = 'Fields And Nodes' useEffect(() => { testDataSuitesApi.getItems({}) - .then(res=> { + .then(res => { res.items.forEach(e => - testDataSuitesApi.getFileResources(e._id) - .then(resource => setFiles(files => ([...files,...resource.items])))) + testDataSuitesApi.getFileResources(e._id) + .then(resource => setFiles(files => ([...files, ...resource.items])))) .catch(err => console.error(err)) }) .catch(err => console.error((err))) @@ -75,13 +82,14 @@ const Page = () => { }, [selectedFile]) const onChangeXPath = (value) => { - formik.setFieldValue('xpath', value) + formik.setFieldValue('absolute_xpath', value) } + const initialValues = { id: '', label: '', - xpath: '', + absolute_xpath: '', relative_xpath: '', parent_node: '' }; @@ -98,7 +106,7 @@ const Page = () => { .string() .max(255) .required('Label is required'), - xpath: Yup + absolute_xpath: Yup .string() .max(255) .required('XPath is required'), @@ -107,47 +115,29 @@ const Page = () => { .required('Parent Node is required') }), - onSubmit: async (values, helpers) => { - console.warn('submit') - const toastId = toastLoad("Saving...") - setSaving(true) + onSubmit: (values, helpers) => { + const toastId = toastLoad("Creating Element...") helpers.setSubmitting(true); - try { - let response; - setTimeout(() => { - setSaving(false) - helpers.setStatus({success: true}); - helpers.setSubmitting(false); - toastSuccess("Saved",toastId) - }, 2000) - // helpers.setStatus({success: true}); - // helpers.setSubmitting(false); - // toastSuccess(sectionApi.SECTION_ITEM_TITLE + ' ' + (itemctx.isNew ? "Created" : "Updated"), toastError()); - // if (response) { - // if (itemctx.isNew) { - // router.push({ - // pathname: paths.app[sectionApi.section].edit, - // query: {id: response._id} - // }); - // } else if (itemctx.isStateable) { - // itemctx.setState(response); - // } - // } - } catch (err) { - console.error(err); - toastError(err, toastId); - helpers.setStatus({success: false}); - helpers.setErrors({submit: err.message}); - helpers.setSubmitting(false); - } + const {id, label, parent_node, absolute_xpath, relative_xpath} = values + fieldsRegistry.addElement({id, label, parent_node_id: parent_node.id, absolute_xpath, relative_xpath}) + .then(res => { + toastSuccess("Element Created", toastId); + helpers.setStatus({success: true}); + }) + .catch(err => { + toastError(err, toastId) + helpers.setStatus({success: false}); + }) + + .finally(() => helpers.setSubmitting(false)) } }); const parentNodeSelect = xPaths.map(e => ({ id: e.id, label: `${e.parent_node_id} : ${e.relative_xpath}`, - xpath: e.xpath, + absolute_xpath: e.absolute_xpath, parent_node: e.parent_node_id, relative_xpath: e.relative_xpath })) @@ -157,110 +147,140 @@ const Page = () => { } return ( -
- - - - - - { - setSelectedFile(event.target.value) - handleClear() - }} - value={files[0]} - select - > - {files.map((file) => ( - - - {file.filename} - - - ))} - - {fileError - ? {fileError.message} - : - } - - - - - - - - formik.setFieldValue('parent_node', value)} - value={formik.values?.['parent_node']?.label ?? ''} - options={parentNodeSelect} - renderOption={(props, option) => -
  • - {option.xpath} -
    • } - renderInput={(params) => - + <> + + + + + {SECTION_TITLE} + + }> + + App + + + {SECTION_TITLE} + + + + + + + + + + + { + setSelectedFile(event.target.value) + handleClear() + }} + value={files[0]} + select + > + {files.map((file) => ( + + + {file.filename} + + + ))} + + {fileError + ? {fileError.message} + : } - /> - - +     +     + + + + + + formik.setFieldValue('parent_node', value)} + value={formik.values?.['parent_node']?.label ?? ''} + options={parentNodeSelect} + renderOption={(props, option) => +
  • + {option.absolute_xpath} +
    • } + renderInput={(params) => + + } + /> + +     +     +     + + +     - - - - - -     -
    + + + ) }