From 39e319693321ca5590f5ec3169b96d8a72173839 Mon Sep 17 00:00:00 2001 From: Cristhian Zanforlin Lousa Date: Mon, 5 Jun 2023 20:07:08 -0300 Subject: [PATCH] Changing layout of edit node modal --- src/frontend/package-lock.json | 226 +++++++++++++++- src/frontend/package.json | 2 + .../components/toggleShadComponent/index.tsx | 27 ++ src/frontend/src/components/ui/label.tsx | 26 ++ src/frontend/src/components/ui/switch.tsx | 29 +++ src/frontend/src/components/ui/table.tsx | 2 +- .../src/modals/EditNodeModal/index.tsx | 241 +++++------------- src/frontend/src/utils.ts | 7 + src/frontend/tsconfig.json | 4 - 9 files changed, 375 insertions(+), 189 deletions(-) create mode 100644 src/frontend/src/components/toggleShadComponent/index.tsx create mode 100644 src/frontend/src/components/ui/label.tsx create mode 100644 src/frontend/src/components/ui/switch.tsx diff --git a/src/frontend/package-lock.json b/src/frontend/package-lock.json index 374236168..b1807d37e 100644 --- a/src/frontend/package-lock.json +++ b/src/frontend/package-lock.json @@ -13,6 +13,8 @@ "@headlessui/react": "^1.7.10", "@heroicons/react": "^2.0.15", "@mui/material": "^5.11.9", + "@radix-ui/react-label": "^2.0.2", + "@radix-ui/react-switch": "^1.0.3", "@tabler/icons-react": "^2.18.0", "@tailwindcss/forms": "^0.5.3", "@tailwindcss/line-clamp": "^0.4.4", @@ -1274,6 +1276,228 @@ "url": "https://opencollective.com/popperjs" } }, + "node_modules/@radix-ui/primitive": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.0.1.tgz", + "integrity": "sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==", + "dependencies": { + "@babel/runtime": "^7.13.10" + } + }, + "node_modules/@radix-ui/react-compose-refs": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz", + "integrity": "sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==", + "dependencies": { + "@babel/runtime": "^7.13.10" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-context": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.0.1.tgz", + "integrity": "sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==", + "dependencies": { + "@babel/runtime": "^7.13.10" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-label": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.0.2.tgz", + "integrity": "sha512-N5ehvlM7qoTLx7nWPodsPYPgMzA5WM8zZChQg8nyFJKnDO5WHdba1vv5/H6IO5LtJMfD2Q3wh1qHFGNtK0w3bQ==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-primitive": "1.0.3" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-primitive": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.3.tgz", + "integrity": "sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-slot": "1.0.2" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-slot": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz", + "integrity": "sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-compose-refs": "1.0.1" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-switch": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-switch/-/react-switch-1.0.3.tgz", + "integrity": "sha512-mxm87F88HyHztsI7N+ZUmEoARGkC22YVW5CaC+Byc+HRpuvCrOBPTAnXgf+tZ/7i0Sg/eOePGdMhUKhPaQEqow==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "1.0.1", + "@radix-ui/react-compose-refs": "1.0.1", + "@radix-ui/react-context": "1.0.1", + "@radix-ui/react-primitive": "1.0.3", + "@radix-ui/react-use-controllable-state": "1.0.1", + "@radix-ui/react-use-previous": "1.0.1", + "@radix-ui/react-use-size": "1.0.1" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-use-callback-ref": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz", + "integrity": "sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==", + "dependencies": { + "@babel/runtime": "^7.13.10" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-use-controllable-state": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.1.tgz", + "integrity": "sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-use-callback-ref": "1.0.1" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-use-layout-effect": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.1.tgz", + "integrity": "sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ==", + "dependencies": { + "@babel/runtime": "^7.13.10" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-use-previous": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.0.1.tgz", + "integrity": "sha512-cV5La9DPwiQ7S0gf/0qiD6YgNqM5Fk97Kdrlc5yBcrF3jyEZQwm7vYFqMo4IfeHgJXsRaMvLABFtd0OVEmZhDw==", + "dependencies": { + "@babel/runtime": "^7.13.10" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-use-size": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.0.1.tgz", + "integrity": "sha512-ibay+VqrgcaI6veAojjofPATwledXiSmX+C0KrBk/xgpX9rBzPV3OsfwlhQdUOFbh+LKQorLYT+xTXW9V8yd0g==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-use-layout-effect": "1.0.1" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/@reactflow/background": { "version": "11.1.7", "resolved": "https://registry.npmjs.org/@reactflow/background/-/background-11.1.7.tgz", @@ -2422,7 +2646,7 @@ "version": "18.2.4", "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.4.tgz", "integrity": "sha512-G2mHoTMTL4yoydITgOGwWdWMVd8sNgyEP85xVmMKAPUBwQWm9wBPQUmvbeF4V3WBY1P7mmL4BkjQ0SqUpf1snw==", - "dev": true, + "devOptional": true, "dependencies": { "@types/react": "*" } diff --git a/src/frontend/package.json b/src/frontend/package.json index bd846ce19..4aa0336e8 100644 --- a/src/frontend/package.json +++ b/src/frontend/package.json @@ -8,6 +8,8 @@ "@headlessui/react": "^1.7.10", "@heroicons/react": "^2.0.15", "@mui/material": "^5.11.9", + "@radix-ui/react-label": "^2.0.2", + "@radix-ui/react-switch": "^1.0.3", "@tabler/icons-react": "^2.18.0", "@tailwindcss/forms": "^0.5.3", "@tailwindcss/line-clamp": "^0.4.4", diff --git a/src/frontend/src/components/toggleShadComponent/index.tsx b/src/frontend/src/components/toggleShadComponent/index.tsx new file mode 100644 index 000000000..6759c19ed --- /dev/null +++ b/src/frontend/src/components/toggleShadComponent/index.tsx @@ -0,0 +1,27 @@ +import { classNames } from "../../utils"; +import { useEffect } from "react"; +import { ToggleComponentType } from "../../types/components"; +import { Switch } from "../ui/switch"; + +export default function ToggleShadComponent({ + enabled, + setEnabled, + disabled, +}: ToggleComponentType) { + useEffect(() => { + if (disabled) { + setEnabled(false); + } + }, [disabled, setEnabled]); + return ( +
+ { + setEnabled(x); + }} + > + +
+ ); +} diff --git a/src/frontend/src/components/ui/label.tsx b/src/frontend/src/components/ui/label.tsx new file mode 100644 index 000000000..d6578bf64 --- /dev/null +++ b/src/frontend/src/components/ui/label.tsx @@ -0,0 +1,26 @@ +"use client" + +import * as React from "react" +import * as LabelPrimitive from "@radix-ui/react-label" +import { cva, type VariantProps } from "class-variance-authority" +import { cn } from "../../utils" + + +const labelVariants = cva( + "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" +) + +const Label = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef & + VariantProps +>(({ className, ...props }, ref) => ( + +)) +Label.displayName = LabelPrimitive.Root.displayName + +export { Label } diff --git a/src/frontend/src/components/ui/switch.tsx b/src/frontend/src/components/ui/switch.tsx new file mode 100644 index 000000000..9c28fa50a --- /dev/null +++ b/src/frontend/src/components/ui/switch.tsx @@ -0,0 +1,29 @@ +"use client" + +import * as React from "react" +import * as SwitchPrimitives from "@radix-ui/react-switch" +import { cn } from "../../utils" + + +const Switch = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + + + +)) +Switch.displayName = SwitchPrimitives.Root.displayName + +export { Switch } diff --git a/src/frontend/src/components/ui/table.tsx b/src/frontend/src/components/ui/table.tsx index d41309e8b..f08ce3f6b 100644 --- a/src/frontend/src/components/ui/table.tsx +++ b/src/frontend/src/components/ui/table.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import { cn } from "./lib/utils"; +import { cn } from "../../utils"; const Table = React.forwardRef< HTMLTableElement, diff --git a/src/frontend/src/modals/EditNodeModal/index.tsx b/src/frontend/src/modals/EditNodeModal/index.tsx index 62232321c..e7ed0a094 100644 --- a/src/frontend/src/modals/EditNodeModal/index.tsx +++ b/src/frontend/src/modals/EditNodeModal/index.tsx @@ -1,4 +1,4 @@ -import { Dialog, Switch, Transition } from "@headlessui/react"; +import { Dialog, Transition } from "@headlessui/react"; import { ChevronDoubleLeftIcon, ChevronDoubleRightIcon, @@ -19,57 +19,17 @@ import { TableHeader, TableRow, } from "../../components/ui/table"; +import { Switch } from "../../components/ui/switch"; +import ToggleShadComponent from "../../components/toggleShadComponent"; + -const invoices = [ - { - invoice: "INV001", - paymentStatus: "Paid", - totalAmount: "$250.00", - paymentMethod: "Credit Card", - }, - { - invoice: "INV002", - paymentStatus: "Pending", - totalAmount: "$150.00", - paymentMethod: "PayPal", - }, - { - invoice: "INV003", - paymentStatus: "Unpaid", - totalAmount: "$350.00", - paymentMethod: "Bank Transfer", - }, - { - invoice: "INV004", - paymentStatus: "Paid", - totalAmount: "$450.00", - paymentMethod: "Credit Card", - }, - { - invoice: "INV005", - paymentStatus: "Paid", - totalAmount: "$550.00", - paymentMethod: "PayPal", - }, - { - invoice: "INV006", - paymentStatus: "Pending", - totalAmount: "$200.00", - paymentMethod: "Bank Transfer", - }, - { - invoice: "INV007", - paymentStatus: "Unpaid", - totalAmount: "$300.00", - paymentMethod: "Credit Card", - }, -]; export default function EditNodeModal({ data }: { data: NodeDataType }) { const [open, setOpen] = useState(true); const { closePopUp } = useContext(PopUpContext); const { types } = useContext(typesContext); const ref = useRef(); + function setModalOpen(x: boolean) { setOpen(x); if (x === false) { @@ -78,44 +38,16 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) { }, 300); } } - const [advanced, setAdvanced] = useState([]); - const [parameters, setParameters] = useState([]); - const [enabled, setEnabled] = useState(false); - const updateAdvancedParameters = () => { - setAdvanced( - Object.keys(data.node.template).filter( - (t) => - t.charAt(0) !== "_" && - data.node.template[t].advanced && - data.node.template[t].show - ) - ); - setParameters( - Object.keys(data.node.template).filter( - (t) => - t.charAt(0) !== "_" && - !data.node.template[t].advanced && - data.node.template[t].show && - (data.node.template[t].type === "str" || - data.node.template[t].type === "bool" || - data.node.template[t].type === "float" || - data.node.template[t].type === "code" || - data.node.template[t].type === "prompt" || - data.node.template[t].type === "file" || - data.node.template[t].type === "Any" || - data.node.template[t].type === "int") - ) - ); - }; + function changeAdvanced(node): void{ + Object.keys(data.node.template).filter((n, i) => { + if (n === node.name) { + data.node.template[n].advanced = !data.node.template[n].advanced; + } + return true; + }); + } - useEffect(() => { - updateAdvancedParameters(); - }, [data.node.template]); - - console.log("DATA", data.node.template); - - const Icon = nodeIcons[types[data.type]]; return ( t.charAt(0) !== "_" && - data.node.template[t].advanced && - data.node.template[t].show - ).length > limitScrollFieldsModal || - Object.keys(data.node.template).filter( - (t) => - t.charAt(0) !== "_" && - !data.node.template[t].advanced && - data.node.template[t].show - ).length > limitScrollFieldsModal + data.node.template[t].show && + (data.node.template[t].type === "str" || + data.node.template[t].type === "bool" || + data.node.template[t].type === "float" || + data.node.template[t].type === "code" || + data.node.template[t].type === "prompt" || + data.node.template[t].type === "file" || + data.node.template[t].type === "Any" || + data.node.template[t].type === "int") + ).length > limitScrollFieldsModal ? "overflow-scroll overflow-x-hidden custom-scroll h-fit" : "overflow-hidden h-fit" )} >
- - A list of your recent invoices. - - - Invoice - - Status - Method - - Amount + + Param + Value + Show - {invoices.map((invoice) => ( - + { Object.keys(data.node.template).filter( + (t) => + t.charAt(0) !== "_" && + data.node.template[t].show && + (data.node.template[t].type === "str" || + data.node.template[t].type === "bool" || + data.node.template[t].type === "float" || + data.node.template[t].type === "code" || + data.node.template[t].type === "prompt" || + data.node.template[t].type === "file" || + data.node.template[t].type === "Any" || + data.node.template[t].type === "int") + ) + .map((n, i) => ( + - {invoice.invoice} + {data.node.template[n].name + ? data.node.template[n].name + : data.node.template[n].display_name} - {invoice.paymentStatus} - {invoice.paymentMethod} - - {invoice.totalAmount} + + {data.node.template[n].value + ? data.node.template[n].value + : "-"} + + + +
+ changeAdvanced(data.node.template[n])} + disabled={false} /> +
))}
- - - - - - - - - - - {Object.keys(data.node.template) - .filter((t) => t.charAt(0) !== "_") - .map((n, i) => ( - - - - - - ))} - -
- Param - - Value - - Show -
- {data.node.template[n].name - ? data.node.template[n].name - : data.node.template[n].display_name} - - {data.node.template[n].value - ? data.node.template[n].value - : "-"} - - - - Use setting - - -
diff --git a/src/frontend/src/utils.ts b/src/frontend/src/utils.ts index 559080f3f..1db2669c8 100644 --- a/src/frontend/src/utils.ts +++ b/src/frontend/src/utils.ts @@ -47,6 +47,12 @@ import { WolframIcon } from "./icons/Wolfram"; import { WordIcon } from "./icons/Word"; import { SerperIcon } from "./icons/Serper"; import { v4 as uuidv4 } from "uuid"; +import { clsx, type ClassValue } from "clsx" +import { twMerge } from "tailwind-merge" + +export function cn(...inputs: ClassValue[]) { + return twMerge(clsx(inputs)) +} export function classNames(...classes: Array) { return classes.filter(Boolean).join(" "); @@ -631,4 +637,5 @@ export function updateIds(newFlow, getNodeId) { e.target + e.targetHandle; }); + } diff --git a/src/frontend/tsconfig.json b/src/frontend/tsconfig.json index f370e332b..3a05105de 100644 --- a/src/frontend/tsconfig.json +++ b/src/frontend/tsconfig.json @@ -1,9 +1,5 @@ { "compilerOptions": { - "baseUrl": ".", - "paths": { - "@/*": ["./*"] - }, "target": "es5", "lib": [ "dom",