Changing layout of edit node modal
This commit is contained in:
Cristhian Zanforlin Lousa
parent
0e234030a9
commit
39e3196933
9 changed files with 375 additions and 189 deletions
226
src/frontend/package-lock.json
generated
226
src/frontend/package-lock.json
generated
|
|
@ -13,6 +13,8 @@
|
||||||
"@headlessui/react": "^1.7.10",
|
"@headlessui/react": "^1.7.10",
|
||||||
"@heroicons/react": "^2.0.15",
|
"@heroicons/react": "^2.0.15",
|
||||||
"@mui/material": "^5.11.9",
|
"@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",
|
"@tabler/icons-react": "^2.18.0",
|
||||||
"@tailwindcss/forms": "^0.5.3",
|
"@tailwindcss/forms": "^0.5.3",
|
||||||
"@tailwindcss/line-clamp": "^0.4.4",
|
"@tailwindcss/line-clamp": "^0.4.4",
|
||||||
|
|
@ -1274,6 +1276,228 @@
|
||||||
"url": "https://opencollective.com/popperjs"
|
"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": {
|
"node_modules/@reactflow/background": {
|
||||||
"version": "11.1.7",
|
"version": "11.1.7",
|
||||||
"resolved": "https://registry.npmjs.org/@reactflow/background/-/background-11.1.7.tgz",
|
"resolved": "https://registry.npmjs.org/@reactflow/background/-/background-11.1.7.tgz",
|
||||||
|
|
@ -2422,7 +2646,7 @@
|
||||||
"version": "18.2.4",
|
"version": "18.2.4",
|
||||||
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.4.tgz",
|
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.4.tgz",
|
||||||
"integrity": "sha512-G2mHoTMTL4yoydITgOGwWdWMVd8sNgyEP85xVmMKAPUBwQWm9wBPQUmvbeF4V3WBY1P7mmL4BkjQ0SqUpf1snw==",
|
"integrity": "sha512-G2mHoTMTL4yoydITgOGwWdWMVd8sNgyEP85xVmMKAPUBwQWm9wBPQUmvbeF4V3WBY1P7mmL4BkjQ0SqUpf1snw==",
|
||||||
"dev": true,
|
"devOptional": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@types/react": "*"
|
"@types/react": "*"
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -8,6 +8,8 @@
|
||||||
"@headlessui/react": "^1.7.10",
|
"@headlessui/react": "^1.7.10",
|
||||||
"@heroicons/react": "^2.0.15",
|
"@heroicons/react": "^2.0.15",
|
||||||
"@mui/material": "^5.11.9",
|
"@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",
|
"@tabler/icons-react": "^2.18.0",
|
||||||
"@tailwindcss/forms": "^0.5.3",
|
"@tailwindcss/forms": "^0.5.3",
|
||||||
"@tailwindcss/line-clamp": "^0.4.4",
|
"@tailwindcss/line-clamp": "^0.4.4",
|
||||||
|
|
|
||||||
27
src/frontend/src/components/toggleShadComponent/index.tsx
Normal file
27
src/frontend/src/components/toggleShadComponent/index.tsx
Normal file
|
|
@ -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 (
|
||||||
|
<div className={disabled ? "pointer-events-none cursor-not-allowed" : ""}>
|
||||||
|
<Switch
|
||||||
|
checked={enabled}
|
||||||
|
onCheckedChange={(x: boolean) => {
|
||||||
|
setEnabled(x);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
</Switch>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
26
src/frontend/src/components/ui/label.tsx
Normal file
26
src/frontend/src/components/ui/label.tsx
Normal file
|
|
@ -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<typeof LabelPrimitive.Root>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
|
||||||
|
VariantProps<typeof labelVariants>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<LabelPrimitive.Root
|
||||||
|
ref={ref}
|
||||||
|
className={cn(labelVariants(), className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
Label.displayName = LabelPrimitive.Root.displayName
|
||||||
|
|
||||||
|
export { Label }
|
||||||
29
src/frontend/src/components/ui/switch.tsx
Normal file
29
src/frontend/src/components/ui/switch.tsx
Normal file
|
|
@ -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<typeof SwitchPrimitives.Root>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<SwitchPrimitives.Root
|
||||||
|
className={cn(
|
||||||
|
"peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
ref={ref}
|
||||||
|
>
|
||||||
|
<SwitchPrimitives.Thumb
|
||||||
|
className={cn(
|
||||||
|
"pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</SwitchPrimitives.Root>
|
||||||
|
))
|
||||||
|
Switch.displayName = SwitchPrimitives.Root.displayName
|
||||||
|
|
||||||
|
export { Switch }
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
import * as React from "react";
|
import * as React from "react";
|
||||||
import { cn } from "./lib/utils";
|
import { cn } from "../../utils";
|
||||||
|
|
||||||
const Table = React.forwardRef<
|
const Table = React.forwardRef<
|
||||||
HTMLTableElement,
|
HTMLTableElement,
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
import { Dialog, Switch, Transition } from "@headlessui/react";
|
import { Dialog, Transition } from "@headlessui/react";
|
||||||
import {
|
import {
|
||||||
ChevronDoubleLeftIcon,
|
ChevronDoubleLeftIcon,
|
||||||
ChevronDoubleRightIcon,
|
ChevronDoubleRightIcon,
|
||||||
|
|
@ -19,57 +19,17 @@ import {
|
||||||
TableHeader,
|
TableHeader,
|
||||||
TableRow,
|
TableRow,
|
||||||
} from "../../components/ui/table";
|
} 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 }) {
|
export default function EditNodeModal({ data }: { data: NodeDataType }) {
|
||||||
const [open, setOpen] = useState(true);
|
const [open, setOpen] = useState(true);
|
||||||
const { closePopUp } = useContext(PopUpContext);
|
const { closePopUp } = useContext(PopUpContext);
|
||||||
const { types } = useContext(typesContext);
|
const { types } = useContext(typesContext);
|
||||||
const ref = useRef();
|
const ref = useRef();
|
||||||
|
|
||||||
function setModalOpen(x: boolean) {
|
function setModalOpen(x: boolean) {
|
||||||
setOpen(x);
|
setOpen(x);
|
||||||
if (x === false) {
|
if (x === false) {
|
||||||
|
|
@ -78,44 +38,16 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
|
||||||
}, 300);
|
}, 300);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
const [advanced, setAdvanced] = useState([]);
|
|
||||||
const [parameters, setParameters] = useState([]);
|
|
||||||
const [enabled, setEnabled] = useState(false);
|
|
||||||
|
|
||||||
const updateAdvancedParameters = () => {
|
function changeAdvanced(node): void{
|
||||||
setAdvanced(
|
Object.keys(data.node.template).filter((n, i) => {
|
||||||
Object.keys(data.node.template).filter(
|
if (n === node.name) {
|
||||||
(t) =>
|
data.node.template[n].advanced = !data.node.template[n].advanced;
|
||||||
t.charAt(0) !== "_" &&
|
}
|
||||||
data.node.template[t].advanced &&
|
return true;
|
||||||
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")
|
|
||||||
)
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
updateAdvancedParameters();
|
|
||||||
}, [data.node.template]);
|
|
||||||
|
|
||||||
console.log("DATA", data.node.template);
|
|
||||||
|
|
||||||
const Icon = nodeIcons[types[data.type]];
|
|
||||||
return (
|
return (
|
||||||
<Transition.Root show={open} appear={true} as={Fragment}>
|
<Transition.Root show={open} appear={true} as={Fragment}>
|
||||||
<Dialog
|
<Dialog
|
||||||
|
|
@ -185,127 +117,70 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
|
||||||
Object.keys(data.node.template).filter(
|
Object.keys(data.node.template).filter(
|
||||||
(t) =>
|
(t) =>
|
||||||
t.charAt(0) !== "_" &&
|
t.charAt(0) !== "_" &&
|
||||||
data.node.template[t].advanced &&
|
data.node.template[t].show &&
|
||||||
data.node.template[t].show
|
(data.node.template[t].type === "str" ||
|
||||||
).length > limitScrollFieldsModal ||
|
data.node.template[t].type === "bool" ||
|
||||||
Object.keys(data.node.template).filter(
|
data.node.template[t].type === "float" ||
|
||||||
(t) =>
|
data.node.template[t].type === "code" ||
|
||||||
t.charAt(0) !== "_" &&
|
data.node.template[t].type === "prompt" ||
|
||||||
!data.node.template[t].advanced &&
|
data.node.template[t].type === "file" ||
|
||||||
data.node.template[t].show
|
data.node.template[t].type === "Any" ||
|
||||||
).length > limitScrollFieldsModal
|
data.node.template[t].type === "int")
|
||||||
|
).length > limitScrollFieldsModal
|
||||||
? "overflow-scroll overflow-x-hidden custom-scroll h-fit"
|
? "overflow-scroll overflow-x-hidden custom-scroll h-fit"
|
||||||
: "overflow-hidden h-fit"
|
: "overflow-hidden h-fit"
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<div className="flex flex-col h-full gap-5 h-fit ">
|
<div className="flex flex-col h-full gap-5 h-fit ">
|
||||||
<Table>
|
<Table>
|
||||||
<TableCaption>
|
|
||||||
A list of your recent invoices.
|
|
||||||
</TableCaption>
|
|
||||||
<TableHeader>
|
<TableHeader>
|
||||||
<TableRow>
|
<TableRow>
|
||||||
<TableHead className="w-[100px]">
|
<TableHead className="w-[80px]">
|
||||||
Invoice
|
Param
|
||||||
</TableHead>
|
|
||||||
<TableHead>Status</TableHead>
|
|
||||||
<TableHead>Method</TableHead>
|
|
||||||
<TableHead className="text-right">
|
|
||||||
Amount
|
|
||||||
</TableHead>
|
</TableHead>
|
||||||
|
<TableHead>Value</TableHead>
|
||||||
|
<TableHead>Show</TableHead>
|
||||||
</TableRow>
|
</TableRow>
|
||||||
</TableHeader>
|
</TableHeader>
|
||||||
<TableBody>
|
<TableBody>
|
||||||
{invoices.map((invoice) => (
|
{ Object.keys(data.node.template).filter(
|
||||||
<TableRow key={invoice.invoice}>
|
(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) => (
|
||||||
|
<TableRow key={i}>
|
||||||
<TableCell className="font-medium">
|
<TableCell className="font-medium">
|
||||||
{invoice.invoice}
|
{data.node.template[n].name
|
||||||
|
? data.node.template[n].name
|
||||||
|
: data.node.template[n].display_name}
|
||||||
</TableCell>
|
</TableCell>
|
||||||
<TableCell>{invoice.paymentStatus}</TableCell>
|
<TableCell>
|
||||||
<TableCell>{invoice.paymentMethod}</TableCell>
|
{data.node.template[n].value
|
||||||
<TableCell className="text-right">
|
? data.node.template[n].value
|
||||||
{invoice.totalAmount}
|
: "-"}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<ToggleShadComponent
|
||||||
|
enabled={data.node.template[n].advanced}
|
||||||
|
setEnabled={(e) => changeAdvanced(data.node.template[n])}
|
||||||
|
disabled={false} />
|
||||||
|
</div>
|
||||||
</TableCell>
|
</TableCell>
|
||||||
</TableRow>
|
</TableRow>
|
||||||
))}
|
))}
|
||||||
</TableBody>
|
</TableBody>
|
||||||
</Table>
|
</Table>
|
||||||
|
|
||||||
<table className="min-w-full divide-y divide-gray-300">
|
|
||||||
<thead className="bg-gray-50">
|
|
||||||
<tr>
|
|
||||||
<th
|
|
||||||
scope="col"
|
|
||||||
className="py-1 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6"
|
|
||||||
>
|
|
||||||
Param
|
|
||||||
</th>
|
|
||||||
<th
|
|
||||||
scope="col"
|
|
||||||
className="px-3 py-1 text-left text-sm font-semibold text-gray-900"
|
|
||||||
>
|
|
||||||
Value
|
|
||||||
</th>
|
|
||||||
<th
|
|
||||||
scope="col"
|
|
||||||
className="px-3 py-1 text-left text-sm font-semibold text-gray-900"
|
|
||||||
>
|
|
||||||
Show
|
|
||||||
</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody className="divide-y divide-gray-200 bg-white">
|
|
||||||
{Object.keys(data.node.template)
|
|
||||||
.filter((t) => t.charAt(0) !== "_")
|
|
||||||
.map((n, i) => (
|
|
||||||
<tr key={i}>
|
|
||||||
<td className="whitespace-nowrap py-1 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">
|
|
||||||
{data.node.template[n].name
|
|
||||||
? data.node.template[n].name
|
|
||||||
: data.node.template[n].display_name}
|
|
||||||
</td>
|
|
||||||
<td className="whitespace-nowrap px-3 py-1 text-sm text-gray-500">
|
|
||||||
{data.node.template[n].value
|
|
||||||
? data.node.template[n].value
|
|
||||||
: "-"}
|
|
||||||
</td>
|
|
||||||
<td className="whitespace-nowrap px-3 py-1 text-sm text-gray-500">
|
|
||||||
<Switch
|
|
||||||
checked={enabled}
|
|
||||||
onChange={setEnabled}
|
|
||||||
className="group relative inline-flex h-5 w-10 flex-shrink-0 cursor-pointer items-center justify-center rounded-full focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2"
|
|
||||||
>
|
|
||||||
<span className="sr-only">
|
|
||||||
Use setting
|
|
||||||
</span>
|
|
||||||
<span
|
|
||||||
aria-hidden="true"
|
|
||||||
className="pointer-events-none absolute h-full w-full rounded-md bg-white"
|
|
||||||
/>
|
|
||||||
<span
|
|
||||||
aria-hidden="true"
|
|
||||||
className={classNames(
|
|
||||||
enabled
|
|
||||||
? "bg-indigo-600"
|
|
||||||
: "bg-gray-200",
|
|
||||||
"pointer-events-none absolute mx-auto h-4 w-9 rounded-full transition-colors duration-200 ease-in-out"
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
<span
|
|
||||||
aria-hidden="true"
|
|
||||||
className={classNames(
|
|
||||||
enabled
|
|
||||||
? "translate-x-5"
|
|
||||||
: "translate-x-0",
|
|
||||||
"pointer-events-none absolute left-0 inline-block h-5 w-5 transform rounded-full border border-gray-200 bg-white shadow ring-0 transition-transform duration-200 ease-in-out"
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</Switch>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
))}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -47,6 +47,12 @@ import { WolframIcon } from "./icons/Wolfram";
|
||||||
import { WordIcon } from "./icons/Word";
|
import { WordIcon } from "./icons/Word";
|
||||||
import { SerperIcon } from "./icons/Serper";
|
import { SerperIcon } from "./icons/Serper";
|
||||||
import { v4 as uuidv4 } from "uuid";
|
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<string>) {
|
export function classNames(...classes: Array<string>) {
|
||||||
return classes.filter(Boolean).join(" ");
|
return classes.filter(Boolean).join(" ");
|
||||||
|
|
@ -631,4 +637,5 @@ export function updateIds(newFlow, getNodeId) {
|
||||||
e.target +
|
e.target +
|
||||||
e.targetHandle;
|
e.targetHandle;
|
||||||
});
|
});
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,5 @@
|
||||||
{
|
{
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"baseUrl": ".",
|
|
||||||
"paths": {
|
|
||||||
"@/*": ["./*"]
|
|
||||||
},
|
|
||||||
"target": "es5",
|
"target": "es5",
|
||||||
"lib": [
|
"lib": [
|
||||||
"dom",
|
"dom",
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue