From 454963b79bd680af93007718dfc54f87cf11ccbf Mon Sep 17 00:00:00 2001 From: Vasanth kumar Kalaiselvan Date: Thu, 15 Feb 2024 21:02:35 +0530 Subject: [PATCH] Added Basic flow for the application --- src/components/flow/components/new.tsx | 7 +- src/components/flow/edge/general.tsx | 12 +- src/components/flow/edge/no.tsx | 6 +- src/components/flow/flow.tsx | 73 ++++++-- src/components/flow/node/action.tsx | 2 +- src/components/flow/node/new.tsx | 5 + src/index.css | 5 + src/pages/admin/user/index.tsx | 229 ++++++++++++++++++++++++- src/pages/app/test_case/testcase.tsx | 84 +++++---- src/stores/route.store.ts | 2 + src/utils/route.tsx | 56 +++--- 11 files changed, 390 insertions(+), 91 deletions(-) diff --git a/src/components/flow/components/new.tsx b/src/components/flow/components/new.tsx index c181694..b9ad72f 100644 --- a/src/components/flow/components/new.tsx +++ b/src/components/flow/components/new.tsx @@ -23,6 +23,11 @@ export const New: React.FC = () => { key: "block", label: "Block", icon: + }, + { + key: "action_group", + label: "Action group", + icon: } ]; const [open, setOpen] = useState(false); @@ -47,7 +52,7 @@ export const New: React.FC = () => { onMouseOver={() => setOpen(true)} onMouseOut={() => setOpen(false)} className={ - "absolute z-10000 mt-1 max-h-56 w-40 -left-16 overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm" + "absolute z-50 mt-1 max-h-56 w-40 -left-16 overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm" } > {options.map((item) => ( diff --git a/src/components/flow/edge/general.tsx b/src/components/flow/edge/general.tsx index baef5cd..3efa4d1 100644 --- a/src/components/flow/edge/general.tsx +++ b/src/components/flow/edge/general.tsx @@ -10,7 +10,7 @@ import { BaseEdge, EdgeLabelRenderer, EdgeProps, - getSmoothStepPath + getStraightPath } from "reactflow"; // export default function CustomEdge() { @@ -41,16 +41,14 @@ export const DefaultEdge: React.FC = ({ } ]; const [open, setOpen] = useState(false); - const [edgePath, labelX, labelY] = getSmoothStepPath({ + const [edgePath, labelX, labelY] = getStraightPath({ sourceX, sourceY, targetX, - targetY, - sourcePosition, - targetPosition + targetY + // sourcePosition, + // targetPosition }); - console.log("edgePath", edgePath); - console.log("edgePath", `M`); return ( <> diff --git a/src/components/flow/edge/no.tsx b/src/components/flow/edge/no.tsx index 3cb2e34..29de170 100644 --- a/src/components/flow/edge/no.tsx +++ b/src/components/flow/edge/no.tsx @@ -7,7 +7,6 @@ import { } from "reactflow"; import { New } from "../components"; -// export default function CustomEdge() { export const NoEdge: React.FC = ({ id, sourceX, @@ -34,9 +33,8 @@ export const NoEdge: React.FC = ({
4", + type: "defaultE", + + target: "4", + source: "3" + }, + { + id: "4->5", + type: "yes", + target: "5", + sourceHandle: "yes", + source: "4" + }, + { + id: "4->6", + type: "no", + sourceHandle: "no", + + target: "6", + source: "4" } ]; @@ -216,10 +271,7 @@ export default function RFlow() { rankdir: "TB", ranker: "network-simplex", marginx: 30, - marginy: 30 - // height: 2000, - // width: 2000, - // align: "UL" + marginy: 20 }); const nodeWidth = 400; @@ -230,10 +282,11 @@ export default function RFlow() { }; nodes.forEach((node) => { - // let t: string = node["type"]; - // let s: any = sizeMatrix[t] || { width: 172, height: 36 }; - // console.log("result", s); - dagreGraph.setNode(node.id, { width: nodeWidth, height: nodeHeight }); + let t: string = node["type"]; + let s: any = sizeMatrix[t] || { width: 172, height: 36 }; + console.log("currect value of the width and height ", t, " - ", s); + s = { width: nodeWidth, height: nodeHeight }; + dagreGraph.setNode(node.id, s); }); edges.forEach((edge) => { diff --git a/src/components/flow/node/action.tsx b/src/components/flow/node/action.tsx index 6589b52..254d86e 100644 --- a/src/components/flow/node/action.tsx +++ b/src/components/flow/node/action.tsx @@ -19,7 +19,7 @@ export const ActionNode: React.FC = ({ data, xPos, yPos }) => { />
- [ {data?.payload?.type_field} ] + [ {data.label} ]{/* [ {data?.payload?.type_field} ] */}
diff --git a/src/components/flow/node/new.tsx b/src/components/flow/node/new.tsx index f0cf3e5..ea39ab9 100644 --- a/src/components/flow/node/new.tsx +++ b/src/components/flow/node/new.tsx @@ -30,6 +30,11 @@ export const NewNode: React.FC = ({ data, xPos, yPos }) => { key: "block", label: "Block", icon: + }, + { + key: "action_group", + label: "Action group", + icon: } ]; const [selected, setValueSelected] = useState({} as any); diff --git a/src/index.css b/src/index.css index 9bb37ee..88b5222 100644 --- a/src/index.css +++ b/src/index.css @@ -2,3 +2,8 @@ @tailwind base; @tailwind components; @tailwind utilities; + + +.react-flow__nodes { + z-index: -5 !important; +} \ No newline at end of file diff --git a/src/pages/admin/user/index.tsx b/src/pages/admin/user/index.tsx index a525c97..79dcaa6 100644 --- a/src/pages/admin/user/index.tsx +++ b/src/pages/admin/user/index.tsx @@ -1,10 +1,229 @@ -import RFlow from "components/flow/flow"; +// import RFlow from "components/flow/flow"; + +// export function UserManagement() { +// return ( +//
+//

Test Suite page coming soon

+// +//
+// ); +// } + +import { MagnifyingGlassIcon, PlusIcon } from "@heroicons/react/24/outline"; +import { PencilIcon } from "@heroicons/react/24/solid"; +import { + Avatar, + Button, + Card, + CardBody, + CardFooter, + CardHeader, + Chip, + IconButton, + Input, + Tooltip, + Typography +} from "@material-tailwind/react"; + +const TABLE_HEAD = [ + "Name", + "User Type", + "Status", + "Created On", + "Last Logged On", + "action" +]; + +const TABLE_ROWS = [ + { + id: "xx-x-x-x", + avatar: "https://docs.material-tailwind.com/img/logos/logo-spotify.svg", + name: "Vasanth Kumar", + first_name: "Vasanth", + last_name: "kumar", + email: "vasanth@kissflow.com", + type: "System Admin", + status: "Active", + created_on: "24-04-2023", + last_logged_on: "24-10-2023" + } +]; export function UserManagement() { return ( -
-

Test Suite page coming soon

- -
+ + +
+
+ + User Management + + + Have the User that have access to this system + +
+
+
+ } + /> +
+ +
+
+ + + + + + {TABLE_HEAD.map((head) => ( + + ))} + + + + {TABLE_ROWS.map( + ( + { + id, + avatar, + name, + first_name, + last_name, + email, + status, + type, + created_on, + last_logged_on + }, + index + ) => { + const isLast = index === TABLE_ROWS.length - 1; + const classes = isLast + ? "p-2" + : "p-2 border-b border-blue-gray-50"; + + return ( + + + + + + + + + ); + } + )} + +
+ + {head} + +
+
+ + + {name} + +
+ 		+ + {type} + + +
+ +
+ 		+ + {created_on} + + + + {last_logged_on} + + + + + + + +
+ + + +
+ + 1 + + + 2 + + + 3 + + + ... + + + 8 + + + 9 + + + 10 + +
+ + + ); } diff --git a/src/pages/app/test_case/testcase.tsx b/src/pages/app/test_case/testcase.tsx index 8f9f962..691af7f 100644 --- a/src/pages/app/test_case/testcase.tsx +++ b/src/pages/app/test_case/testcase.tsx @@ -42,49 +42,63 @@ export function TestCasePage() { }) .finally(() => {}); }; - const constructWorkflow = (caseblock: any) => { - let node: Array = []; - let edge: Array = []; - let currentEdge: any = undefined; - // dataSource.forEach((element: { [x: string]: any }) => { - // node.push({ id: element["id"] }); - // }); - (caseblock.case_execution || []).map((item: any, index: number) => { - if (currentEdge != undefined) { - edge.push({ - ...currentEdge, - id: `${currentEdge?.id}_to_actionNode${item.id}`, - target: `actionNode${item.id}` + const generateNodeAndEdge = ( + input: Array, + nodes: Array, + edges: Array, + derivedEdge: any = undefined + ) => { + input.map((item: any, index: number) => { + let current_item = item[0]; + if (derivedEdge != undefined) { + edges.push({ + ...derivedEdge, + id: `${derivedEdge?.id}_to_actionNode${current_item.id}`, + target: `actionNode${current_item.id}` }); } - node.push({ - id: `actionNode${item.id}`, + nodes.push({ + id: `actionNode${current_item.id}`, type: "actionNode", position: { x: 0, y: 300 * index }, - data: { payload: item } + data: { payload: current_item } }); - // edge.push({ - // id: `actionNode${item.id}_to_addNew${item.id}`, - // type: "defaultE", - // source: `actionNode${item.id}`, - // target: `addNew${item.id}` - // }); - // node.push({ - // id: `addNew${item["id"]}`, - // type: "newNode", - // position: { x: 178, y: 300 * index + 150 }, - // data: {} - // }); - currentEdge = { - id: `actionNode${item.id}`, + derivedEdge = { + id: `actionNode${current_item.id}`, type: "defaultE", - source: `actionNode${item.id}` + source: `actionNode${current_item.id}` }; + let child = item[1]; + if (child != undefined && child.length > 0) { + // generateNodeAndEdge(child, ) + } + }); + }; + /** + * Added the Only the new node here for the New Workflow + */ + const addNewNode = (nodes: Array) => { + nodes.push({ + id: "addNode", + type: "newNode", + position: { x: 0, y: 300 }, + data: {} }); - console.log("edge", edge); - console.log("node", node); - setNode(node); - setEdges(edge); + }; + + const constructWorkflow = (caseblock: any) => { + let nodes: Array = []; + let edges: Array = []; + let currentEdge: any = undefined; + generateNodeAndEdge(caseblock.case_execution || [], nodes, edges); + if (nodes.length == 0) { + addNewNode(nodes); + } + + console.log("edge", edges); + console.log("node", nodes); + setNode(nodes); + setEdges(edges); }; useEffect(() => { diff --git a/src/stores/route.store.ts b/src/stores/route.store.ts index bbd80ac..7cbef10 100644 --- a/src/stores/route.store.ts +++ b/src/stores/route.store.ts @@ -4,3 +4,5 @@ export const orcaStore = create((set) => ({ appActiveMenu: "dashboard", setAppActiveMenu: (menu: string) => set({ appActiveMenu: menu }) })); + + diff --git a/src/utils/route.tsx b/src/utils/route.tsx index 9a1e811..ee82052 100644 --- a/src/utils/route.tsx +++ b/src/utils/route.tsx @@ -12,6 +12,34 @@ export const ROUTES = [ return HomeLayout; }, nestedRoute: [ + { + key: "admin", + path: "/admin", + component: () => { + const { AdminLayout } = lazily(() => import("../layouts/admin")); + return AdminLayout; + }, + nestedRoute: [ + { + path: "usermanagement", + component: () => { + const { UserManagement } = lazily( + () => import("../pages/admin/user") + ); + return UserManagement; + } + }, + { + path: "rolemanagement", + component: () => { + const { RoleManagement } = lazily( + () => import("../pages/admin/role") + ); + return RoleManagement; + } + } + ] + }, { path: "/app", component: () => { @@ -144,33 +172,5 @@ export const ROUTES = [ } } ] - }, - { - key: "admin", - path: "/admin", - component: () => { - const { AdminLayout } = lazily(() => import("../layouts/admin")); - return AdminLayout; - }, - nestedRoute: [ - { - path: "usermanagement", - component: () => { - const { UserManagement } = lazily( - () => import("../pages/admin/user") - ); - return UserManagement; - } - }, - { - path: "rolemanagement", - component: () => { - const { RoleManagement } = lazily( - () => import("../pages/admin/role") - ); - return RoleManagement; - } - } - ] } ];