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