Skip to content

Commit

Permalink
MWB-669: add submit api
Browse files Browse the repository at this point in the history
  • Loading branch information
@SilverBerserk
SilverBerserk committed Aug 16, 2024
1 parent bdcc269 commit f65a137
Show file tree
Hide file tree
Showing 2 changed files with 169 additions and 143 deletions.
8 changes: 7 additions & 1 deletion mapping_workbench/frontend/src/api/fields-registry/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
304 changes: 162 additions & 142 deletions mapping_workbench/frontend/src/pages/app/fields-and-nodes/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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([])
Expand All @@ -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)))
Expand Down Expand Up @@ -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: ''
};
Expand All @@ -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'),
Expand All @@ -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
}))
Expand All @@ -157,110 +147,140 @@ const Page = () => {
}

return (
<form onSubmit={formik.handleSubmit}>
<Card sx={{p: 2}}>
<Grid container
justifyContent='center'>
<Grid container>
<Grid item
md={12}
xl={6}>
<Stack gap={2}>
<TextField
fullWidth
label="File"
name="fileSelect"
onChange={event => {
setSelectedFile(event.target.value)
handleClear()
}}
value={files[0]}
select
>
{files.map((file) => (
<MenuItem
key={file.filename}
value={file}
>
<Typography>
{file.filename}
</Typography>
</MenuItem>
))}
</TextField>
{fileError
? <Alert severity="error">{fileError.message}</Alert>
: <File xmlContent={xmlContent}
xmlNodes={xmlNodes}
xPaths={xPaths}
xPath={formik.values.xpath}
relativeXPath={formik.values.relative_xpath}
error={fileError}
fileContent={selectedFile.content}
handleClick={onChangeXPath}/>
}
</Stack>
</Grid>
<Grid item
md={12}
xl={6}>
<Stack gap={2}>
<FormTextField
formik={formik}
disabled={saving}
name="id"
label="Id"
required/>
<FormTextField
formik={formik}
disabled={saving}
name="label"
label="Label"
required/>
<FormTextField
formik={formik}
disabled={saving}
multiline
name="xpath"
label="xPath"
required/>
<Autocomplete
id="parent_node"
disabled={saving}
// key={formik.values.parent_node.label}
error={!!(formik.touched['parent_node'] && formik.errors['parent_node'])}
helperText={formik.touched['parent_node'] && formik.errors['parent_node']}
onBlur={formik.handleBlur}
onChange={(e, value) => formik.setFieldValue('parent_node', value)}
value={formik.values?.['parent_node']?.label ?? ''}
options={parentNodeSelect}
renderOption={(props, option) =>
<li {...props}
key={option.id}>
{option.xpath}
</li>}
renderInput={(params) =>
<TextField {...params}
required
label="Parent Node"/>
<>
<Seo title={`App: ${sectionApi.SECTION_TITLE} List`}/>
<Stack
direction="row"
justifyContent="space-between"
spacing={4}
>
<Stack spacing={1}>
<Typography variant="h4">
{SECTION_TITLE}
</Typography>
<Breadcrumbs separator={<BreadcrumbsSeparator/>}>
<Link
color="text.primary"
component={RouterLink}
href={paths.index}
variant="subtitle2"
>
App
</Link>
<Typography
color="text.secondary"
variant="subtitle2"
>
{SECTION_TITLE}
</Typography>
</Breadcrumbs>
</Stack>
</Stack>
<form onSubmit={formik.handleSubmit}>
<Card sx={{p: 2}}>
<Grid container
justifyContent='center'>
<Grid container>
<Grid item
md={12}
xl={6}>
<Stack gap={2}>
<TextField
fullWidth
label="File"
name="fileSelect"
onChange={event => {
setSelectedFile(event.target.value)
handleClear()
}}
value={files[0]}
select
>
{files.map((file) => (
<MenuItem
key={file.filename}
value={file}
>
<Typography>
{file.filename}
</Typography>
</MenuItem>
))}
</TextField>
{fileError
? <Alert severity="error">{fileError.message}</Alert>
: <File xmlContent={xmlContent}
xmlNodes={xmlNodes}
xPaths={xPaths}
xPath={formik.values.absolute_xpath}
relativeXPath={formik.values.relative_xpath}
error={fileError}
fileContent={selectedFile.content}
handleClick={onChangeXPath}/>
}
/>
<RelativeXpathFinder formik={formik}
error={fileError}
xmlContent={xmlContent}
absolute_xpath={formik.values.xpath}
xpath={formik.values?.parent_node?.xpath}/>
</Stack>
</Stack>
</Grid>
<Grid item
md={12}
xl={6}>
<Stack gap={2}>
<FormTextField
formik={formik}
disabled={formik.isSubmitting}
name="id"
label="Id"
required/>
<FormTextField
formik={formik}
disabled={formik.isSubmitting}
name="label"
label="Label"
required/>
<FormTextField
formik={formik}
disabled={formik.isSubmitting}
multiline
name="absolute_xpath"
label="Absolute xPath"
required/>
<Autocomplete
id="parent_node"
disabled={formik.isSubmitting}
// key={formik.values.parent_node.label}
error={!!(formik.touched['parent_node'] && formik.errors['parent_node'])}
helperText={formik.touched['parent_node'] && formik.errors['parent_node']}
onBlur={formik.handleBlur}
onChange={(e, value) => formik.setFieldValue('parent_node', value)}
value={formik.values?.['parent_node']?.label ?? ''}
options={parentNodeSelect}
renderOption={(props, option) =>
<li {...props}
key={option.id}>
{option.absolute_xpath}
</li>}
renderInput={(params) =>
<TextField {...params}
required
label="Parent Node"/>
}
/>
<RelativeXpathFinder formik={formik}
error={fileError}
xmlContent={xmlContent}
absolute_xpath={formik.values.absolute_xpath}
xpath={formik.values?.parent_node?.absolute_xpath}/>
</Stack>
</Grid>
</Grid>
<Grid sx={{justifyContent: 'center'}}>
<Button type='submit'
disabled={!!fileError || !xmlContent || formik.isSubmitting}>Save</Button>
<Button onClick={handleClear} disabled={formik.isSubmitting}>Clear</Button>
</Grid>
</Grid>
<Grid sx={{justifyContent: 'center'}}>
<Button type='submit'
disabled={!!fileError || !xmlContent || formik.isSubmitting}>Save</Button>
<Button onClick={handleClear}>Clear</Button>
</Grid>
</Grid>
</Card>
</form>
</Card>
</form>
</>
)
}

Expand Down

0 comments on commit f65a137

Please sign in to comment.