aiden
/
ctk
mirror of https://github.com/ctk-hq/ctk
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix: refactor network modal and forms

Browse Source
pull/69/head^2
Artem Golub 3 years ago
parent 5a35535eae
commit 52bbad88e7
4 changed files with 82 additions and 84 deletions
Show Stats Download Patch File Download Diff File

29
services/frontend/src/components/Modal/Network/General.tsx
Unescape Escape View File

@ -1,32 +1,11 @@
const General = (props: any) => { import TextField from "../../global/FormElements/InputField";
const { formik } = props;
const General = () => {
return ( return (
<> <>
<div className="relative pb-3 flex-auto"> <TextField label="Name" name="name" />
<div className="grid grid-cols-6 gap-4">
<div className="col-span-3">
<label
htmlFor="name"
className="block text-xs font-medium text-gray-700"
>
Name
</label>
<div className="mt-1">
<input
id="name"
name="name"
type="text"
autoComplete="none"
className="input-util"
onChange={formik.handleChange}
value={formik.values.name}
/>
</div>
</div>
</div>
</div>
</> </>
); );
}; };
export default General; export default General;

5
services/frontend/src/components/Modal/Network/IPam.tsx
Unescape Escape View File

@ -1,6 +1,5 @@
const IPam = (props: any) => { const IPam = () => {
const { formik } = props;
return <></>; return <></>;
}; };
export default IPam; export default IPam;

5
services/frontend/src/components/Modal/Network/Labels.tsx
Unescape Escape View File

@ -1,6 +1,5 @@
const Labels = (props: any) => { const Labels = () => {
const { formik } = props;
return <></>; return <></>;
}; };
export default Labels; export default Labels;

127
services/frontend/src/components/Modal/Network/index.tsx
Unescape Escape View File

@ -1,5 +1,6 @@
import { useState } from "react"; import { useState } from "react";
import { useFormik } from "formik"; import { Formik } from "formik";
import * as yup from "yup";
import { XIcon } from "@heroicons/react/outline"; import { XIcon } from "@heroicons/react/outline";
import General from "./General"; import General from "./General";
import IPam from "./IPam"; import IPam from "./IPam";
@ -14,12 +15,14 @@ interface IModalNetworkProps {
const ModalNetwork = (props: IModalNetworkProps) => { const ModalNetwork = (props: IModalNetworkProps) => {
const { onHide } = props; const { onHide } = props;
const [openTab, setOpenTab] = useState("General"); const [openTab, setOpenTab] = useState("General");
const handleCreate = (values: any, formik: any) => {
const formik = useFormik({ formik.resetForm();
initialValues: { };
...topLevelNetworkConfigInitialValues() const validationSchema = yup.object({
}, name: yup
onSubmit: () => undefined .string()
.max(256, "name should be 256 characters or less")
.required("name is required")
}); });
const tabs = [ const tabs = [
{ {
@ -66,54 +69,72 @@ const ModalNetwork = (props: IModalNetworkProps) => {
</button> </button>
</div> </div>
<div> <Formik
<div className="hidden sm:block"> initialValues={{
<div className="border-b border-gray-200 px-8"> initialValues: {
<nav className="-mb-px flex space-x-8" aria-label="Tabs"> ...topLevelNetworkConfigInitialValues()
{tabs.map((tab) => ( },
<a key: "volume",
key={tab.name} type: "VOLUME",
href={tab.href} inputs: [],
className={classNames( outputs: [],
tab.name === openTab config: {}
? "border-indigo-500 text-indigo-600" }}
: "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300", enableReinitialize={true}
"whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm", onSubmit={(values, formik) => {
tab.hidden ? "hidden" : "" handleCreate(values, formik);
)} }}
aria-current={tab.current ? "page" : undefined} validationSchema={validationSchema}
onClick={(e) => { >
e.preventDefault(); {(formik) => (
setOpenTab(tab.name); <>
}} <div className="hidden sm:block">
> <div className="border-b border-gray-200 px-8">
{tab.name} <nav className="-mb-px flex space-x-8" aria-label="Tabs">
</a> {tabs.map((tab) => (
))} <a
</nav> key={tab.name}
</div> href={tab.href}
</div> className={classNames(
tab.name === openTab
? "border-indigo-500 text-indigo-600"
: "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300",
"whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm",
tab.hidden ? "hidden" : ""
)}
aria-current={tab.current ? "page" : undefined}
onClick={(e) => {
e.preventDefault();
setOpenTab(tab.name);
}}
>
{tab.name}
</a>
))}
</nav>
</div>
</div>
<div className="relative px-4 py-3 flex-auto"> <div className="relative px-4 py-3 flex-auto">
<form onSubmit={formik.handleSubmit}> {openTab === "General" && <General />}
{openTab === "General" && <General formik={formik} />} {openTab === "IPam" && <IPam />}
{openTab === "IPam" && <IPam formik={formik} />} {openTab === "Labels" && <Labels />}
{openTab === "Labels" && <Labels formik={formik} />} </div>
</form>
</div>
</div>
<div className="flex items-center justify-end px-4 py-3 border-t border-solid border-blueGray-200 rounded-b"> <div className="flex items-center justify-end px-4 py-3 border-t border-solid border-blueGray-200 rounded-b">
<button <button
className="btn-util" className="btn-util"
type="button" type="button"
onClick={() => { onClick={() => {
formik.resetForm(); formik.submitForm();
}} }}
> >
Add Add
</button> </button>
</div> </div>
</>
)}
</Formik>
</div> </div>
</div> </div>
</div> </div>

Write Preview
Loading…
Cancel
Save