mirror of https://github.com/ctk-hq/ctk
chore: organize service and volume nodes
Artem Golub
3 years ago
parent
75e5dbdfef
commit
e0c8c3be17
@ -0,0 +1,64 @@
|
|||||||
|
import { useEffect, useState } from "react";
|
||||||
|
import { IVolumeNodeItem, CallbackFunction } from "../../types";
|
||||||
|
import eventBus from "../../events/eventBus";
|
||||||
|
import { Popover } from "./Popover";
|
||||||
|
|
||||||
|
interface INodeProps {
|
||||||
|
node: IVolumeNodeItem;
|
||||||
|
setVolumeToEdit: CallbackFunction;
|
||||||
|
setVolumeToDelete: CallableFunction;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function VolumeNode(props: INodeProps) {
|
||||||
|
const { node, setVolumeToEdit, setVolumeToDelete } = props;
|
||||||
|
const [nodeDragging, setNodeDragging] = useState<string | null>();
|
||||||
|
const [nodeHovering, setNodeHovering] = useState<string | null>();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
eventBus.on("EVENT_DRAG_START", (data: any) => {
|
||||||
|
setNodeDragging(data.detail.message.id);
|
||||||
|
});
|
||||||
|
|
||||||
|
eventBus.on("EVENT_DRAG_STOP", () => {
|
||||||
|
setNodeDragging(null);
|
||||||
|
});
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
eventBus.remove("EVENT_DRAG_START", () => undefined);
|
||||||
|
eventBus.remove("EVENT_DRAG_STOP", () => undefined);
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={node.key}
|
||||||
|
className={"node-item cursor-pointer shadow flex flex-col group"}
|
||||||
|
id={node.key}
|
||||||
|
style={{ top: node.position.top, left: node.position.left }}
|
||||||
|
onMouseEnter={() => setNodeHovering(node.key)}
|
||||||
|
onMouseLeave={() => {
|
||||||
|
if (nodeHovering === node.key) {
|
||||||
|
setNodeHovering(null);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{nodeHovering === node.key && nodeDragging !== node.key && (
|
||||||
|
<Popover
|
||||||
|
onEditClick={() => {
|
||||||
|
setVolumeToEdit(node);
|
||||||
|
}}
|
||||||
|
onDeleteClick={() => {
|
||||||
|
setVolumeToDelete(node);
|
||||||
|
}}
|
||||||
|
></Popover>
|
||||||
|
)}
|
||||||
|
<div className="node-label w-full py-2 px-4">
|
||||||
|
<>
|
||||||
|
<div className="text-xs text-gray-500 overflow-x-hidden">
|
||||||
|
{node.volumeConfig.name}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,151 @@
|
|||||||
|
import { useEffect, useState } from "react";
|
||||||
|
import { useFormik } from "formik";
|
||||||
|
import { XIcon } from "@heroicons/react/outline";
|
||||||
|
import General from "./General";
|
||||||
|
import Labels from "./Labels";
|
||||||
|
import { topLevelVolumeConfigInitialValues } from "../../../utils";
|
||||||
|
import {
|
||||||
|
CallbackFunction,
|
||||||
|
IVolumeNodeItem,
|
||||||
|
IVolumeTopLevel
|
||||||
|
} from "../../../types";
|
||||||
|
|
||||||
|
interface IModalVolumeEdit {
|
||||||
|
node: IVolumeNodeItem;
|
||||||
|
onHide: CallbackFunction;
|
||||||
|
onUpdateEndpoint: CallbackFunction;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ModalVolumeEdit = (props: IModalVolumeEdit) => {
|
||||||
|
const { node, onHide, onUpdateEndpoint } = props;
|
||||||
|
const [openTab, setOpenTab] = useState("General");
|
||||||
|
const [selectedNode, setSelectedNode] = useState<IVolumeNodeItem>();
|
||||||
|
|
||||||
|
const formik = useFormik({
|
||||||
|
initialValues: {
|
||||||
|
volumeConfig: {
|
||||||
|
...topLevelVolumeConfigInitialValues()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onSubmit: () => undefined
|
||||||
|
});
|
||||||
|
const tabs = [
|
||||||
|
{
|
||||||
|
name: "General",
|
||||||
|
href: "#",
|
||||||
|
current: true,
|
||||||
|
hidden: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Labels",
|
||||||
|
href: "#",
|
||||||
|
current: false,
|
||||||
|
hidden: false
|
||||||
|
}
|
||||||
|
];
|
||||||
|
const classNames = (...classes: string[]) => {
|
||||||
|
return classes.filter(Boolean).join(" ");
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (node) {
|
||||||
|
setSelectedNode(node);
|
||||||
|
}
|
||||||
|
}, [node]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
formik.resetForm();
|
||||||
|
|
||||||
|
if (selectedNode) {
|
||||||
|
formik.initialValues.volumeConfig = {
|
||||||
|
...selectedNode.volumeConfig
|
||||||
|
} as IVolumeTopLevel;
|
||||||
|
}
|
||||||
|
}, [selectedNode]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
return () => {
|
||||||
|
formik.resetForm();
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="fixed z-50 inset-0 overflow-y-auto">
|
||||||
|
<div className="justify-center items-center flex overflow-x-hidden overflow-y-auto fixed inset-0 outline-none focus:outline-none">
|
||||||
|
<div
|
||||||
|
onClick={onHide}
|
||||||
|
className="opacity-25 fixed inset-0 z-40 bg-black"
|
||||||
|
></div>
|
||||||
|
<div className="relative w-auto my-6 mx-auto max-w-5xl z-50">
|
||||||
|
<div className="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none">
|
||||||
|
<div className="flex items-center justify-between px-4 py-3 border-b border-solid border-blueGray-200 rounded-t">
|
||||||
|
<h3 className="text-sm font-semibold">
|
||||||
|
Update top level volumes
|
||||||
|
</h3>
|
||||||
|
<button
|
||||||
|
className="p-1 ml-auto text-black float-right outline-none focus:outline-none"
|
||||||
|
onClick={onHide}
|
||||||
|
>
|
||||||
|
<span className="block outline-none focus:outline-none">
|
||||||
|
<XIcon className="w-4" />
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div className="hidden sm:block">
|
||||||
|
<div className="border-b border-gray-200 px-8">
|
||||||
|
<nav className="-mb-px flex space-x-8" aria-label="Tabs">
|
||||||
|
{tabs.map((tab) => (
|
||||||
|
<a
|
||||||
|
key={tab.name}
|
||||||
|
href={tab.href}
|
||||||
|
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">
|
||||||
|
<form onSubmit={formik.handleSubmit}>
|
||||||
|
{openTab === "General" && <General formik={formik} />}
|
||||||
|
{openTab === "Labels" && <Labels formik={formik} />}
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center justify-end px-4 py-3 border-t border-solid border-blueGray-200 rounded-b">
|
||||||
|
<button
|
||||||
|
className="btn-util"
|
||||||
|
type="button"
|
||||||
|
onClick={() => {
|
||||||
|
const updated = { ...selectedNode };
|
||||||
|
updated.volumeConfig = formik.values.volumeConfig;
|
||||||
|
onUpdateEndpoint(updated);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Update
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ModalVolumeEdit;
|
||||||
Loading…
Reference in New Issue