INFRA-399| Deepak Jain | adding user state across component
This commit is contained in:
Deepak Jain
21
src/action/action.ts
Normal file
21
src/action/action.ts
Normal file
@@ -0,0 +1,21 @@
|
||||
import _, { useContext } from "react";
|
||||
|
||||
export const getUser = (state, dispatch) => {
|
||||
fetch("/api/user", {
|
||||
credentials: "include",
|
||||
})
|
||||
.then((response) => {
|
||||
if (response.ok) {
|
||||
return response.text();
|
||||
}
|
||||
})
|
||||
.then((body) => {
|
||||
if (body === "") {
|
||||
dispatch({ type: "setAuthentication", value: false });
|
||||
} else {
|
||||
dispatch({ type: "setAuthentication", value: true });
|
||||
dispatch({ type: "setUserInfo", value: JSON.parse(body!) });
|
||||
}
|
||||
})
|
||||
.catch((err) => console.error("Caught error: ", err));
|
||||
};
|
||||
@@ -1,6 +1,7 @@
|
||||
import React, { useEffect, useContext } from "react";
|
||||
import { withCookies } from "react-cookie";
|
||||
import { store } from "../store/store";
|
||||
import { getUser } from "../action/action";
|
||||
|
||||
import MenuAppBar from "./layout/Header";
|
||||
|
||||
@@ -10,23 +11,9 @@ const Dashboard = (props) => {
|
||||
const userInfo = state.userInfo;
|
||||
|
||||
useEffect(() => {
|
||||
fetch("/api/user", {
|
||||
credentials: "include",
|
||||
})
|
||||
.then((response) => {
|
||||
if (response.ok) {
|
||||
return response.text();
|
||||
}
|
||||
})
|
||||
.then((body) => {
|
||||
if (body === "") {
|
||||
dispatch({ type: "setAuthentication", value: false });
|
||||
} else {
|
||||
dispatch({ type: "setAuthentication", value: true });
|
||||
dispatch({ type: "setUserInfo", value: JSON.parse(body!) });
|
||||
}
|
||||
})
|
||||
.catch((err) => console.error("Caught error: ", err));
|
||||
if (Object.keys(userInfo).length == 0) {
|
||||
getUser(state, dispatch);
|
||||
}
|
||||
}, []);
|
||||
return (
|
||||
<div>
|
||||
|
||||
@@ -1,354 +1,491 @@
|
||||
import * as React from 'react';
|
||||
import {Button, Card, Grid, IconButton, Select, Tab} from "@material-ui/core";
|
||||
import {Field, FieldArray, Form, Formik, FormikProps, insert} from "formik";
|
||||
import {Checkbox, Switch, TextField} from "formik-material-ui";
|
||||
import DeleteIcon from '@material-ui/icons/Delete';
|
||||
import './../admin.css';
|
||||
import React, { useEffect, useContext } from "react";
|
||||
import { Button, Card, Grid, IconButton, Select, Tab } from "@material-ui/core";
|
||||
import { Field, FieldArray, Form, Formik, FormikProps, insert } from "formik";
|
||||
import { Checkbox, Switch, TextField } from "formik-material-ui";
|
||||
import DeleteIcon from "@material-ui/icons/Delete";
|
||||
import "./../admin.css";
|
||||
import ShowDemo from "./ShowDemo";
|
||||
import './../../components.css';
|
||||
import "./../../components.css";
|
||||
import FormControlLabel from "@material-ui/core/FormControlLabel";
|
||||
import DropDownOptions from './DropDownOptions';
|
||||
import DropDownOptions from "./DropDownOptions";
|
||||
import Typography from "@material-ui/core/Typography";
|
||||
import Tabs from "@material-ui/core/Tabs";
|
||||
import {initialValues} from "../../constant/editForm";
|
||||
import { initialValues } from "../../constant/editForm";
|
||||
import MenuAppBar from "../../layout/Header";
|
||||
|
||||
import { store } from "../../../store/store";
|
||||
import { getUser } from "../../../action/action";
|
||||
|
||||
const handleSubmit = (values: any, {}) => {
|
||||
// @ts-ignore
|
||||
schema.properties[values.name] = {
|
||||
"type": "string",
|
||||
"minLength ": 1
|
||||
};
|
||||
}
|
||||
// @ts-ignore
|
||||
schema.properties[values.name] = {
|
||||
type: "string",
|
||||
"minLength ": 1,
|
||||
};
|
||||
};
|
||||
|
||||
const getFieldAttribute = (index: number, remove: <T>(index: number) => (T | undefined), confirm: any, handleAddItem: any) => {
|
||||
return (
|
||||
<Card className="card">
|
||||
<div style={{padding: 20}}>
|
||||
<Button style={{margin: "auto", float: "left"}} color="secondary" variant="outlined"
|
||||
onClick={() => confirm()}>Confirm</Button>
|
||||
<IconButton aria-label="delete" onClick={() => remove(index)}
|
||||
style={{margin: "auto", float: "right"}}>
|
||||
<DeleteIcon fontSize="small"/>
|
||||
</IconButton>
|
||||
<Grid container spacing={3} direction={'column'}>
|
||||
<Grid item xs>
|
||||
<Field
|
||||
name={'names.' + index}
|
||||
component={TextField}
|
||||
fullWidth
|
||||
label="Attribute Name"/>
|
||||
</Grid>
|
||||
<Grid item xs>
|
||||
<Field
|
||||
name={'uiSchema.elements.' + index + '.type'}
|
||||
component={TextField}
|
||||
fullWidth
|
||||
label="Field Type"
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs>
|
||||
<Field
|
||||
name={'uiSchema.elements.' + index + '.label'}
|
||||
component={TextField}
|
||||
fullWidth
|
||||
label="Field Label"
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs>
|
||||
<Field
|
||||
name={'uiSchema.elements.' + index + '.scope'}
|
||||
component={TextField}
|
||||
fullWidth
|
||||
label="Field Scope"
|
||||
/>
|
||||
</Grid>
|
||||
<Grid container spacing={2}>
|
||||
const getFieldAttribute = (
|
||||
index: number,
|
||||
remove: <T>(index: number) => T | undefined,
|
||||
confirm: any,
|
||||
handleAddItem: any
|
||||
) => {
|
||||
return (
|
||||
<Card className="card">
|
||||
<div style={{ padding: 20 }}>
|
||||
<Button
|
||||
style={{ margin: "auto", float: "left" }}
|
||||
color="secondary"
|
||||
variant="outlined"
|
||||
onClick={() => confirm()}
|
||||
>
|
||||
Confirm
|
||||
</Button>
|
||||
<IconButton
|
||||
aria-label="delete"
|
||||
onClick={() => remove(index)}
|
||||
style={{ margin: "auto", float: "right" }}
|
||||
>
|
||||
<DeleteIcon fontSize="small" />
|
||||
</IconButton>
|
||||
<Grid container spacing={3} direction={"column"}>
|
||||
<Grid item xs>
|
||||
<Field
|
||||
name={"names." + index}
|
||||
component={TextField}
|
||||
fullWidth
|
||||
label="Attribute Name"
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs>
|
||||
<Field
|
||||
name={"uiSchema.elements." + index + ".type"}
|
||||
component={TextField}
|
||||
fullWidth
|
||||
label="Field Type"
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs>
|
||||
<Field
|
||||
name={"uiSchema.elements." + index + ".label"}
|
||||
component={TextField}
|
||||
fullWidth
|
||||
label="Field Label"
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs>
|
||||
<Field
|
||||
name={"uiSchema.elements." + index + ".scope"}
|
||||
component={TextField}
|
||||
fullWidth
|
||||
label="Field Scope"
|
||||
/>
|
||||
</Grid>
|
||||
<Grid container spacing={2}>
|
||||
<FormControlLabel
|
||||
control={<Field component={Switch} name="enum" />}
|
||||
style={{ margin: "auto", float: "right" }}
|
||||
label="Select Field"
|
||||
placeholder={"Dropdown"}
|
||||
/>
|
||||
<DropDownOptions addItem={handleAddItem} />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
<FormControlLabel
|
||||
control={<Field component={Switch} name="enum"/>}
|
||||
style={{margin: "auto", float: "right"}}
|
||||
label="Select Field"
|
||||
placeholder={"Dropdown"}
|
||||
/>
|
||||
<DropDownOptions addItem={handleAddItem}/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
const getNestedField = (
|
||||
index: number,
|
||||
remove: <T>(index: number) => T | undefined,
|
||||
confirm: any,
|
||||
index12: string
|
||||
) => {
|
||||
console.log("................." + index12);
|
||||
return (
|
||||
<Card className="card">
|
||||
<div key={index} style={{ padding: 20 }}>
|
||||
<Button
|
||||
style={{ margin: "auto", float: "left" }}
|
||||
color="secondary"
|
||||
variant="outlined"
|
||||
onClick={() => confirm()}
|
||||
>
|
||||
Confirm
|
||||
</Button>
|
||||
|
||||
<IconButton
|
||||
aria-label="delete"
|
||||
onClick={() => remove(index)}
|
||||
style={{ margin: "auto", float: "right" }}
|
||||
>
|
||||
<DeleteIcon fontSize="small" />
|
||||
</IconButton>
|
||||
|
||||
const getNestedField = (index: number, remove: <T>(index: number) => (T | undefined), confirm: any, index12: string) => {
|
||||
console.log("................." + index12);
|
||||
return (
|
||||
<Card className="card">
|
||||
<div key={index} style={{padding: 20}}>
|
||||
<Grid container spacing={3} direction={"column"}>
|
||||
<Grid item xs>
|
||||
<Field
|
||||
name={"names." + index12 + "." + index}
|
||||
component={TextField}
|
||||
label="Attribute Name"
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Button style={{margin: "auto", float: "left"}} color="secondary" variant="outlined"
|
||||
onClick={() => confirm()}>Confirm</Button>
|
||||
|
||||
<IconButton aria-label="delete" onClick={() => remove(index)}
|
||||
style={{margin: "auto", float: "right"}}>
|
||||
<DeleteIcon fontSize="small"/>
|
||||
</IconButton>
|
||||
|
||||
<Grid container spacing={3} direction={'column'}>
|
||||
<Grid item xs>
|
||||
<Field
|
||||
name={'names.' + index12 + '.' + index}
|
||||
component={TextField}
|
||||
label="Attribute Name"/>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs>
|
||||
<Field
|
||||
name={'uiSchema.elements.' + index12 + '.elements.' + index + '.type'}
|
||||
component={TextField}
|
||||
fullWidth
|
||||
label="Field Type"
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs>
|
||||
<Field
|
||||
name={'uiSchema.elements.' + index12 + '.elements.' + index + '.label'}
|
||||
component={TextField}
|
||||
label="Field Label"
|
||||
fullWidth
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs>
|
||||
<Field
|
||||
name={'uiSchema.elements.' + index12 + '.elements.' + index + '.scope'}
|
||||
component={TextField}
|
||||
label="Field Scope"
|
||||
fullWidth
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
</Grid>
|
||||
<Grid container spacing={2}>
|
||||
<FormControlLabel
|
||||
control={<Field component={Switch} name="enum"/>}
|
||||
style={{margin: "auto", float: "left"}}
|
||||
label="Select Field"
|
||||
placeholder={"Dropdown"}
|
||||
/>
|
||||
|
||||
</Grid>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
<Grid item xs>
|
||||
<Field
|
||||
name={
|
||||
"uiSchema.elements." + index12 + ".elements." + index + ".type"
|
||||
}
|
||||
component={TextField}
|
||||
fullWidth
|
||||
label="Field Type"
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs>
|
||||
<Field
|
||||
name={
|
||||
"uiSchema.elements." + index12 + ".elements." + index + ".label"
|
||||
}
|
||||
component={TextField}
|
||||
label="Field Label"
|
||||
fullWidth
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs>
|
||||
<Field
|
||||
name={
|
||||
"uiSchema.elements." + index12 + ".elements." + index + ".scope"
|
||||
}
|
||||
component={TextField}
|
||||
label="Field Scope"
|
||||
fullWidth
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid container spacing={2}>
|
||||
<FormControlLabel
|
||||
control={<Field component={Switch} name="enum" />}
|
||||
style={{ margin: "auto", float: "left" }}
|
||||
label="Select Field"
|
||||
placeholder={"Dropdown"}
|
||||
/>
|
||||
</Grid>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
// @ts-ignore
|
||||
const AddLayout = () => {
|
||||
const [control, setControl] = React.useState(false);
|
||||
const [ind, setInd] = React.useState(0);
|
||||
const [tabIdx, setTabIdx] = React.useState(0);
|
||||
const [displayDataAsString, setDisplayDataAsString] = React.useState('');
|
||||
const [standaloneData, setStandaloneData] = React.useState({})
|
||||
const [schema, setSchema] = React.useState({jsonSchema:{},uiSchema:{}});
|
||||
const handleTabChange = React.useCallback(
|
||||
(event: any, newValue: number) => {
|
||||
setTabIdx(newValue);
|
||||
// setDisplayDataAsString(
|
||||
// newValue === 0
|
||||
// ? getDataAsStringFromStore(store)
|
||||
// : JSON.stringify(standaloneData, null, 2)
|
||||
// );
|
||||
},
|
||||
[standaloneData]
|
||||
);
|
||||
const [control, setControl] = React.useState(false);
|
||||
const [ind, setInd] = React.useState(0);
|
||||
const [tabIdx, setTabIdx] = React.useState(0);
|
||||
const [displayDataAsString, setDisplayDataAsString] = React.useState("");
|
||||
const [standaloneData, setStandaloneData] = React.useState({});
|
||||
const [schema, setSchema] = React.useState({ jsonSchema: {}, uiSchema: {} });
|
||||
const handleTabChange = React.useCallback(
|
||||
(event: any, newValue: number) => {
|
||||
setTabIdx(newValue);
|
||||
// setDisplayDataAsString(
|
||||
// newValue === 0
|
||||
// ? getDataAsStringFromStore(store)
|
||||
// : JSON.stringify(standaloneData, null, 2)
|
||||
// );
|
||||
},
|
||||
[standaloneData]
|
||||
);
|
||||
const { state, dispatch } = useContext(store);
|
||||
const isAuthenticated = state.isAuthenticated;
|
||||
const userInfo = state.userInfo;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<MenuAppBar name="Admin Panel"/>
|
||||
<Grid container spacing={1}>
|
||||
<Grid item sm={6}>
|
||||
<Typography variant={'h3'} style={{
|
||||
textAlign: 'center',
|
||||
padding: '0.5em'
|
||||
}}>
|
||||
Rendered Form
|
||||
</Typography>
|
||||
<ShowDemo schema={schema.jsonSchema} uischema={schema.uiSchema}/>
|
||||
</Grid>
|
||||
<Grid item sm={6}>
|
||||
<Typography variant={'h3'} style={{
|
||||
textAlign: 'center',
|
||||
padding: '0.5em'
|
||||
}}>
|
||||
Add Form Layout
|
||||
</Typography>
|
||||
<Tabs value={tabIdx} onChange={handleTabChange}>
|
||||
<Tab label='Add Field'/>
|
||||
<Tab label='Add Section'/>
|
||||
</Tabs>
|
||||
<Formik initialValues={initialValues} onSubmit={handleSubmit}>
|
||||
{(props: FormikProps<any>) => (
|
||||
<Form>
|
||||
<Field
|
||||
name="uiSchema.label"
|
||||
useEffect(() => {
|
||||
if (Object.keys(userInfo).length == 0) {
|
||||
getUser(state, dispatch);
|
||||
}
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<MenuAppBar name="Admin Panel" />
|
||||
<Grid container spacing={1}>
|
||||
<Grid item sm={6}>
|
||||
<Typography
|
||||
variant={"h3"}
|
||||
style={{
|
||||
textAlign: "center",
|
||||
padding: "0.5em",
|
||||
}}
|
||||
>
|
||||
Rendered Form
|
||||
</Typography>
|
||||
<ShowDemo schema={schema.jsonSchema} uischema={schema.uiSchema} />
|
||||
</Grid>
|
||||
<Grid item sm={6}>
|
||||
<Typography
|
||||
variant={"h3"}
|
||||
style={{
|
||||
textAlign: "center",
|
||||
padding: "0.5em",
|
||||
}}
|
||||
>
|
||||
Add Form Layout
|
||||
</Typography>
|
||||
<Tabs value={tabIdx} onChange={handleTabChange}>
|
||||
<Tab label="Add Field" />
|
||||
<Tab label="Add Section" />
|
||||
</Tabs>
|
||||
<Formik initialValues={initialValues} onSubmit={handleSubmit}>
|
||||
{(props: FormikProps<any>) => (
|
||||
<Form>
|
||||
<Field
|
||||
name="uiSchema.label"
|
||||
label="Group Name"
|
||||
component={TextField}
|
||||
/>
|
||||
<br />
|
||||
<br />
|
||||
<Card className="card">
|
||||
<FieldArray
|
||||
name="uiSchema.elements"
|
||||
render={({ push, remove, insert }) => (
|
||||
<div style={{ padding: 20, margin: "auto" }}>
|
||||
{props.values.uiSchema.elements.length > 0 &&
|
||||
props.values.uiSchema.elements.map(
|
||||
(element: any, index: number) => {
|
||||
console.log(
|
||||
"I am from field" + JSON.stringify(element),
|
||||
index
|
||||
);
|
||||
|
||||
const confirm = () => {
|
||||
if (props.values.names.length > 0) {
|
||||
props.values.jsonSchema.properties[
|
||||
props.values.names[ind - 1]
|
||||
] = {
|
||||
type: "string",
|
||||
minLength: 2,
|
||||
};
|
||||
}
|
||||
console.log(
|
||||
JSON.stringify(props.values.jsonSchema)
|
||||
);
|
||||
};
|
||||
const handleAddItem = (item: any) => {
|
||||
if (
|
||||
props.values.names.length > 0 &&
|
||||
props.values.jsonSchema.properties[
|
||||
props.values.names[ind - 1]
|
||||
].enum === undefined
|
||||
) {
|
||||
props.values.jsonSchema.properties[
|
||||
props.values.names[ind - 1]
|
||||
]["enum"] = [];
|
||||
}
|
||||
props.values.jsonSchema.properties[
|
||||
props.values.names[ind - 1]
|
||||
].enum.push(item);
|
||||
console.log(
|
||||
JSON.stringify(props.values.jsonSchema)
|
||||
);
|
||||
};
|
||||
return (
|
||||
element.type === "Control" &&
|
||||
getFieldAttribute(
|
||||
index,
|
||||
remove,
|
||||
confirm,
|
||||
handleAddItem
|
||||
)
|
||||
);
|
||||
}
|
||||
)}
|
||||
|
||||
<br />
|
||||
<br />
|
||||
<div>
|
||||
<FieldArray
|
||||
name={
|
||||
"uiSchema.elements." + (ind - 1) + ".elements"
|
||||
}
|
||||
render={({ push, remove, insert }) => (
|
||||
<Card className={"card"}>
|
||||
<div>
|
||||
<Field
|
||||
name={
|
||||
"uiSchema.elements." +
|
||||
(ind - 1) +
|
||||
".label"
|
||||
}
|
||||
label="Group Name"
|
||||
component={TextField}
|
||||
/>
|
||||
<br/>
|
||||
<br/>
|
||||
<Card className="card">
|
||||
<FieldArray
|
||||
name="uiSchema.elements"
|
||||
render={({push, remove, insert}) => (
|
||||
<div style={{padding: 20, margin: "auto"}}>
|
||||
{props.values.uiSchema.elements.length > 0 &&
|
||||
props.values.uiSchema.elements.map((element: any, index: number) => {
|
||||
console.log("I am from field" + JSON.stringify(element), index);
|
||||
|
||||
const confirm = () => {
|
||||
if (props.values.names.length > 0) {
|
||||
props.values.jsonSchema.properties[props.values.names[ind - 1]] = {
|
||||
type: "string",
|
||||
minLength: 2
|
||||
}
|
||||
}
|
||||
console.log(JSON.stringify(props.values.jsonSchema));
|
||||
}
|
||||
const handleAddItem = (item: any) => {
|
||||
if (props.values.names.length > 0 && props.values.jsonSchema.properties[props.values.names[ind - 1]].enum === undefined) {
|
||||
props.values.jsonSchema.properties[props.values.names[ind - 1]]["enum"] = [];
|
||||
}
|
||||
props.values.jsonSchema.properties[props.values.names[ind - 1]].enum.push(item);
|
||||
console.log(JSON.stringify(props.values.jsonSchema));
|
||||
}
|
||||
return element.type === "Control" && getFieldAttribute(index, remove, confirm, handleAddItem);
|
||||
}
|
||||
)}
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
<div>
|
||||
<FieldArray
|
||||
name={"uiSchema.elements." + (ind - 1) + ".elements"}
|
||||
render={({push, remove, insert}) => (
|
||||
<Card className={"card"}>
|
||||
<div>
|
||||
<Field
|
||||
name={"uiSchema.elements." + (ind - 1) + ".label"}
|
||||
label="Group Name"
|
||||
component={TextField}
|
||||
/>
|
||||
<Field
|
||||
name={"uiSchema.elements." + (ind - 1) + ".objectName"}
|
||||
type={String}
|
||||
label="Group Name"
|
||||
component={TextField}
|
||||
/>
|
||||
{props.values.uiSchema.elements.length > 0 &&
|
||||
props.values.uiSchema.elements[ind - 1].type === "Group" &&
|
||||
props.values.uiSchema.elements[ind - 1].elements.length > 0 &&
|
||||
props.values.uiSchema.elements[ind - 1].elements.map((element: any, index1: number) => {
|
||||
console.log("it is" + JSON.stringify(element), index1, ind);
|
||||
const confirm = () => {
|
||||
console.log("I called", JSON.stringify(props.values.names));
|
||||
if (props.values.names.length > 0 && props.values.names[ind - 1].length > 0) {
|
||||
console.log("again");
|
||||
if (props.values.jsonSchema.properties[props.values.uiSchema.elements[ind - 1].objectName] == undefined) {
|
||||
props.values.jsonSchema.properties[props.values.uiSchema.elements[ind - 1].objectName] = {
|
||||
type: "object",
|
||||
properties: {}
|
||||
}
|
||||
}
|
||||
props.values.jsonSchema.properties[props.values.uiSchema.elements[ind - 1].objectName].properties[props.values.names[ind - 1][index1]] = {
|
||||
type: "string",
|
||||
minLength: 2
|
||||
}
|
||||
}
|
||||
console.log("jsonSChema is" + JSON.stringify(props.values.jsonSchema));
|
||||
}
|
||||
return getNestedField(index1, remove, confirm, String(ind - 1));
|
||||
}
|
||||
)}
|
||||
<Button
|
||||
variant="contained"
|
||||
className="secondary"
|
||||
style={{display: 'block', marginTop: 25}}
|
||||
onClick={() => {
|
||||
push({
|
||||
label: "Port",
|
||||
type: "Control",
|
||||
scope: "#/properties/address/properties/"
|
||||
});
|
||||
console.log(JSON.stringify(props.values.uiSchema.elements));
|
||||
}
|
||||
}
|
||||
>
|
||||
Add Nested Fields
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
)
|
||||
}/>
|
||||
|
||||
</div>
|
||||
<Button
|
||||
variant="contained"
|
||||
className="secondary"
|
||||
style={{float: "left"}}
|
||||
onClick={() => {
|
||||
setInd(ind => ind + 1);
|
||||
push({type: "Control", scope: "#/properties/"});
|
||||
}
|
||||
}
|
||||
>
|
||||
Add Field
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
className="secondary"
|
||||
style={{float: "right"}}
|
||||
onClick={() => {
|
||||
push({type: "Group", label: "sub group", elements: []});
|
||||
setInd(ind => ind + 1);
|
||||
|
||||
//console.log("?????" + JSON.stringify(schema));
|
||||
}
|
||||
}>Add Group</Button>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
)}/>
|
||||
</Card>
|
||||
<Button type='submit'
|
||||
color='primary'
|
||||
variant = 'contained'
|
||||
style={{float:"right"}}
|
||||
onClick={() => {
|
||||
if (props.values.name != null) {
|
||||
// @ts-ignore
|
||||
props.values.jsonSchema.properties[props.values.name] = {
|
||||
"type": "string",
|
||||
"minLength ": 2
|
||||
};
|
||||
/>
|
||||
<Field
|
||||
name={
|
||||
"uiSchema.elements." +
|
||||
(ind - 1) +
|
||||
".objectName"
|
||||
}
|
||||
setSchema({
|
||||
...schema,
|
||||
jsonSchema :props.values.jsonSchema,
|
||||
uiSchema : props.values.uiSchema
|
||||
});
|
||||
}}>
|
||||
Add Layout
|
||||
</Button>
|
||||
type={String}
|
||||
label="Group Name"
|
||||
component={TextField}
|
||||
/>
|
||||
{props.values.uiSchema.elements.length > 0 &&
|
||||
props.values.uiSchema.elements[ind - 1]
|
||||
.type === "Group" &&
|
||||
props.values.uiSchema.elements[ind - 1]
|
||||
.elements.length > 0 &&
|
||||
props.values.uiSchema.elements[
|
||||
ind - 1
|
||||
].elements.map(
|
||||
(element: any, index1: number) => {
|
||||
console.log(
|
||||
"it is" + JSON.stringify(element),
|
||||
index1,
|
||||
ind
|
||||
);
|
||||
const confirm = () => {
|
||||
console.log(
|
||||
"I called",
|
||||
JSON.stringify(props.values.names)
|
||||
);
|
||||
if (
|
||||
props.values.names.length > 0 &&
|
||||
props.values.names[ind - 1].length >
|
||||
0
|
||||
) {
|
||||
console.log("again");
|
||||
if (
|
||||
props.values.jsonSchema
|
||||
.properties[
|
||||
props.values.uiSchema.elements[
|
||||
ind - 1
|
||||
].objectName
|
||||
] == undefined
|
||||
) {
|
||||
props.values.jsonSchema.properties[
|
||||
props.values.uiSchema.elements[
|
||||
ind - 1
|
||||
].objectName
|
||||
] = {
|
||||
type: "object",
|
||||
properties: {},
|
||||
};
|
||||
}
|
||||
props.values.jsonSchema.properties[
|
||||
props.values.uiSchema.elements[
|
||||
ind - 1
|
||||
].objectName
|
||||
].properties[
|
||||
props.values.names[ind - 1][
|
||||
index1
|
||||
]
|
||||
] = {
|
||||
type: "string",
|
||||
minLength: 2,
|
||||
};
|
||||
}
|
||||
console.log(
|
||||
"jsonSChema is" +
|
||||
JSON.stringify(
|
||||
props.values.jsonSchema
|
||||
)
|
||||
);
|
||||
};
|
||||
return getNestedField(
|
||||
index1,
|
||||
remove,
|
||||
confirm,
|
||||
String(ind - 1)
|
||||
);
|
||||
}
|
||||
)}
|
||||
<Button
|
||||
variant="contained"
|
||||
className="secondary"
|
||||
style={{ display: "block", marginTop: 25 }}
|
||||
onClick={() => {
|
||||
push({
|
||||
label: "Port",
|
||||
type: "Control",
|
||||
scope:
|
||||
"#/properties/address/properties/",
|
||||
});
|
||||
console.log(
|
||||
JSON.stringify(
|
||||
props.values.uiSchema.elements
|
||||
)
|
||||
);
|
||||
}}
|
||||
>
|
||||
Add Nested Fields
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
variant="contained"
|
||||
className="secondary"
|
||||
style={{ float: "left" }}
|
||||
onClick={() => {
|
||||
setInd((ind) => ind + 1);
|
||||
push({ type: "Control", scope: "#/properties/" });
|
||||
}}
|
||||
>
|
||||
Add Field
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
className="secondary"
|
||||
style={{ float: "right" }}
|
||||
onClick={() => {
|
||||
push({
|
||||
type: "Group",
|
||||
label: "sub group",
|
||||
elements: [],
|
||||
});
|
||||
setInd((ind) => ind + 1);
|
||||
|
||||
</Form>
|
||||
)}
|
||||
</Formik>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</div>
|
||||
|
||||
);
|
||||
//console.log("?????" + JSON.stringify(schema));
|
||||
}}
|
||||
>
|
||||
Add Group
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
</Card>
|
||||
<Button
|
||||
type="submit"
|
||||
color="primary"
|
||||
variant="contained"
|
||||
style={{ float: "right" }}
|
||||
onClick={() => {
|
||||
if (props.values.name != null) {
|
||||
// @ts-ignore
|
||||
props.values.jsonSchema.properties[props.values.name] = {
|
||||
type: "string",
|
||||
"minLength ": 2,
|
||||
};
|
||||
}
|
||||
setSchema({
|
||||
...schema,
|
||||
jsonSchema: props.values.jsonSchema,
|
||||
uiSchema: props.values.uiSchema,
|
||||
});
|
||||
}}
|
||||
>
|
||||
Add Layout
|
||||
</Button>
|
||||
</Form>
|
||||
)}
|
||||
</Formik>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddLayout;
|
||||
export default AddLayout;
|
||||
|
||||
@@ -8,7 +8,8 @@ import "./../components.css";
|
||||
import Button from "@material-ui/core/Button";
|
||||
import { store } from "../../store/store";
|
||||
import { withCookies } from "react-cookie";
|
||||
import SchemaForm from './SchemaForm';
|
||||
import SchemaForm from "./SchemaForm";
|
||||
import { getUser } from "../../action/action";
|
||||
|
||||
const styles = createStyles({
|
||||
container: {
|
||||
@@ -32,15 +33,19 @@ const styles = createStyles({
|
||||
});
|
||||
|
||||
const Form = (props: any) => {
|
||||
const [standaloneData, setStandaloneData] = useState({})
|
||||
const { state, dispatch } = useContext(store);
|
||||
const isAuthenticated = state.isAuthenticated;
|
||||
const userInfo = state.userInfo;
|
||||
|
||||
const [standaloneData, setStandaloneData] = useState({});
|
||||
// const [addedNew, setAddedNew] = useState({ success: true, data: "" })
|
||||
const [formInitData, setFormInitData] = useState({})
|
||||
const { cookies } = props
|
||||
const manifestIdParam = props?.match?.params?.manifestId
|
||||
const [csrfToken,] = useState(cookies.get("XSRF-TOKEN"))
|
||||
const [formInitData, setFormInitData] = useState({});
|
||||
const { cookies } = props;
|
||||
const manifestIdParam = props?.match?.params?.manifestId;
|
||||
const [csrfToken] = useState(cookies.get("XSRF-TOKEN"));
|
||||
|
||||
const getManifestData = async (manifestId: number): Promise<any> => {
|
||||
console.log(`Fetching manifest id ${manifestId}`)
|
||||
console.log(`Fetching manifest id ${manifestId}`);
|
||||
return fetch(`/api/manifest/${manifestId}`, {
|
||||
method: "GET",
|
||||
credentials: "include",
|
||||
@@ -48,20 +53,25 @@ const Form = (props: any) => {
|
||||
"X-XSRF-TOKEN": props.csrfToken,
|
||||
Accept: "application/json",
|
||||
"Content-Type": "application/json",
|
||||
}
|
||||
})
|
||||
.then(res => res.json())
|
||||
},
|
||||
}).then((res) => res.json());
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if(manifestIdParam) {
|
||||
getManifestData(manifestIdParam).then(res => { setFormInitData(res) })
|
||||
useEffect(() => {
|
||||
if (manifestIdParam) {
|
||||
getManifestData(manifestIdParam).then((res) => {
|
||||
setFormInitData(res);
|
||||
});
|
||||
if (Object.keys(userInfo).length == 0) {
|
||||
getUser(state, dispatch);
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}}, [])
|
||||
}
|
||||
}, []);
|
||||
|
||||
const formatDisplayData = (standaloneData) => {
|
||||
return JSON.stringify(standaloneData, null, 2);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = async (values: any): Promise<any> => {
|
||||
console.log(values);
|
||||
@@ -74,25 +84,30 @@ const Form = (props: any) => {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(values),
|
||||
})
|
||||
.then(res => res.json())
|
||||
}).then((res) => res.json());
|
||||
};
|
||||
|
||||
return (
|
||||
<div id="mainComponent">
|
||||
<MenuAppBar name={manifestIdParam ? "Edit Manifest" : "Create New Manifest File"} />
|
||||
<MenuAppBar
|
||||
name={manifestIdParam ? "Edit Manifest" : "Create New Manifest File"}
|
||||
/>
|
||||
|
||||
<Grid container style={{ padding: '2em' }} >
|
||||
<Grid item xs={8} >
|
||||
<div style={{
|
||||
margin: 'auto',
|
||||
padding: '1rem',
|
||||
color: 'green',
|
||||
}}>
|
||||
<SchemaForm name="manifest"
|
||||
<Grid container style={{ padding: "2em" }}>
|
||||
<Grid item xs={8}>
|
||||
<div
|
||||
style={{
|
||||
margin: "auto",
|
||||
padding: "1rem",
|
||||
color: "green",
|
||||
}}
|
||||
>
|
||||
<SchemaForm
|
||||
name="manifest"
|
||||
onDataChange={setStandaloneData}
|
||||
csrfToken={csrfToken}
|
||||
manifestData={formInitData}>
|
||||
manifestData={formInitData}
|
||||
>
|
||||
<SchemaForm name="deployment" />
|
||||
<SchemaForm name="extraResources" />
|
||||
</SchemaForm>
|
||||
@@ -104,8 +119,8 @@ const Form = (props: any) => {
|
||||
variant="contained"
|
||||
style={{ float: "right" }}
|
||||
onClick={() => {
|
||||
handleSubmit(standaloneData).then(r => {
|
||||
setFormInitData(r.manifest)
|
||||
handleSubmit(standaloneData).then((r) => {
|
||||
setFormInitData(r.manifest);
|
||||
});
|
||||
}}
|
||||
>
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
import React, { useContext } from "react";
|
||||
import React, { useContext, useEffect } from "react";
|
||||
import "./../components.css";
|
||||
import { Button, Card, Select } from "@material-ui/core";
|
||||
|
||||
import { store } from "../../store/store";
|
||||
import { getUser } from "../../action/action";
|
||||
|
||||
import CloudDownloadIcon from "@material-ui/icons/CloudDownload";
|
||||
import Grid from "@material-ui/core/Grid";
|
||||
@@ -26,6 +28,7 @@ export const PrettyPrintJson = (props: any) => {
|
||||
exportToJsonFile(props.manifestData);
|
||||
props.onClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Card>
|
||||
@@ -36,25 +39,32 @@ export const PrettyPrintJson = (props: any) => {
|
||||
className="float-right"
|
||||
startIcon={<CloudDownloadIcon />}
|
||||
color="secondary"
|
||||
variant="contained" > Download </Button>
|
||||
<Button
|
||||
name="edit"
|
||||
className="float-right"
|
||||
color="secondary"><Link to={`/manifests/${props.manifestId}/edit`}>Edit</Link></Button>
|
||||
variant="contained"
|
||||
>
|
||||
{" "}
|
||||
Download{" "}
|
||||
</Button>
|
||||
<Button name="edit" className="float-right" color="secondary">
|
||||
<Link to={`/manifests/${props.manifestId}/edit`}>Edit</Link>
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<>
|
||||
{" "}
|
||||
<h1>
|
||||
<span>Manifest File</span>
|
||||
</h1>
|
||||
<Button
|
||||
onClick={props.onClose}
|
||||
className="float-right"
|
||||
color="secondary"
|
||||
variant="contained"
|
||||
>
|
||||
{" "}
|
||||
<h1>
|
||||
<span>Manifest File</span>
|
||||
</h1>
|
||||
<Button
|
||||
onClick={props.onClose}
|
||||
className="float-right"
|
||||
color="secondary"
|
||||
variant="contained" > Close </Button>
|
||||
</>
|
||||
)}
|
||||
Close{" "}
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
<div>
|
||||
<pre>
|
||||
<h3>{JSON.stringify(props.manifestData, null, 2)}</h3>
|
||||
@@ -65,38 +75,47 @@ export const PrettyPrintJson = (props: any) => {
|
||||
);
|
||||
};
|
||||
|
||||
function fetchListOfManifestsByEnvironment(environment: string): Promise<any[]> {
|
||||
return fetch(`/api/manifest/list/${environment}`, {
|
||||
method: "GET",
|
||||
credentials: "include",
|
||||
function fetchListOfManifestsByEnvironment(
|
||||
environment: string
|
||||
): Promise<any[]> {
|
||||
return fetch(`/api/manifest/list/${environment}`, {
|
||||
method: "GET",
|
||||
credentials: "include",
|
||||
})
|
||||
.then((res) => res.json())
|
||||
.then((response) => {
|
||||
console.log(response);
|
||||
return response;
|
||||
})
|
||||
.then((res) => res.json())
|
||||
.then((response) => {
|
||||
console.log(response)
|
||||
return response
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error)
|
||||
return []
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
return [];
|
||||
});
|
||||
}
|
||||
|
||||
interface ManifestName {
|
||||
[id: string]: string,
|
||||
[id: string]: string;
|
||||
}
|
||||
|
||||
const ShowDeploymentManifest = (props: any) => {
|
||||
const { useState } = React;
|
||||
const [manifestData, setManifestData] = useState({});
|
||||
const [serviceName, setServiceName] = useState({name: "", id: ""});
|
||||
const [serviceName, setServiceName] = useState({ name: "", id: "" });
|
||||
const [environment, setEnvironment] = useState("");
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [manifestNameList, setManifestNameList] = useState<ManifestName>({});
|
||||
const { state } = useContext(store);
|
||||
|
||||
const { state, dispatch } = useContext(store);
|
||||
const isAuthenticated = state.isAuthenticated;
|
||||
const userInfo = state.userInfo;
|
||||
|
||||
useEffect(() => {
|
||||
if (Object.keys(userInfo).length == 0) {
|
||||
getUser(state, dispatch);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleClick = () => {
|
||||
console.log("inside handle click", isAuthenticated);
|
||||
if (isAuthenticated) {
|
||||
fetch(`/api/manifest/${serviceName.id}`, {
|
||||
method: "GET",
|
||||
@@ -114,19 +133,24 @@ const ShowDeploymentManifest = (props: any) => {
|
||||
|
||||
function handleEnvChange(e: any) {
|
||||
setEnvironment(e.target.value);
|
||||
fetchListOfManifestsByEnvironment(e.target.value).then(manifestList => {
|
||||
fetchListOfManifestsByEnvironment(e.target.value).then((manifestList) => {
|
||||
const manifestMap = manifestList.reduce((map, obj) => {
|
||||
map[obj.id] = obj.name
|
||||
return map
|
||||
}, {})
|
||||
setManifestNameList(manifestMap)
|
||||
if (manifestList.length > 0) { setServiceName(manifestList[0]) }
|
||||
})
|
||||
map[obj.id] = obj.name;
|
||||
return map;
|
||||
}, {});
|
||||
setManifestNameList(manifestMap);
|
||||
if (manifestList.length > 0) {
|
||||
setServiceName(manifestList[0]);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function handleNameChange(e: any) {
|
||||
setServiceName({id: e.target.value, name: manifestNameList[e.target.value]})
|
||||
console.log(serviceName)
|
||||
setServiceName({
|
||||
id: e.target.value,
|
||||
name: manifestNameList[e.target.value],
|
||||
});
|
||||
console.log(serviceName);
|
||||
}
|
||||
|
||||
return (
|
||||
@@ -148,7 +172,11 @@ const ShowDeploymentManifest = (props: any) => {
|
||||
value={serviceName.id}
|
||||
onChange={handleNameChange}
|
||||
>
|
||||
{ Object.entries(manifestNameList).map(([k, v]) => <MenuItem key={k} value={k}>{v}</MenuItem>)}
|
||||
{Object.entries(manifestNameList).map(([k, v]) => (
|
||||
<MenuItem key={k} value={k}>
|
||||
{v}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</label>
|
||||
</Grid>
|
||||
@@ -183,16 +211,16 @@ const ShowDeploymentManifest = (props: any) => {
|
||||
onClose={() => setIsLoading(false)}
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<Button
|
||||
name="show"
|
||||
className="float-right"
|
||||
color="secondary"
|
||||
onClick={handleClick}
|
||||
>
|
||||
Show
|
||||
</Button>
|
||||
</>
|
||||
<>
|
||||
<Button
|
||||
name="show"
|
||||
className="float-right"
|
||||
color="secondary"
|
||||
onClick={handleClick}
|
||||
>
|
||||
Show
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user