public commit

2024-11-16 12:01:47 +01:00
commit 90f80c4280
582 changed files with 49291 additions and 0 deletions
@@ -0,0 +1,72 @@
+import { ucFirstAllSnakeToPascalWithSpaces } from "core/utils";
+import { useRef } from "react";
+import { TbTrash } from "react-icons/tb";
+import { useFlows } from "../../client/schema/flows/use-flows";
+import { Button } from "../../components/buttons/Button";
+import { CellValue, DataTable } from "../../components/table/DataTable";
+import * as AppShell from "../../layouts/AppShell/AppShell";
+import { routes, useNavigate } from "../../lib/routes";
+import { FlowCreateModal, type TCreateFlowModalSchema } from "./components/FlowCreateModal";
+
+export function FlowsList() {
+   const createModalRef = useRef<TCreateFlowModalSchema>(null);
+   const [navigate] = useNavigate();
+   const { flows } = useFlows();
+   console.log("flows", flows);
+
+   const data = flows.map((flow) => ({
+      flow: flow.name,
+      trigger: flow.trigger.type,
+      mode: flow.trigger.config.mode,
+      tasks: Object.keys(flow.tasks).length,
+      start_task: flow.startTask?.name
+   }));
+
+   function handleClick(row) {
+      navigate(routes.flows.flows.edit(row.flow));
+   }
+
+   return (
+      <>
+         <FlowCreateModal ref={createModalRef} />
+         <AppShell.SectionHeader
+            right={
+               <Button variant="primary" onClick={() => createModalRef.current?.open()}>
+                  Create new
+               </Button>
+            }
+         >
+            All Flows
+         </AppShell.SectionHeader>
+         <AppShell.Scrollable>
+            <div className="flex flex-col flex-grow p-3 gap-3">
+               <DataTable
+                  data={data}
+                  renderValue={renderValue}
+                  renderHeader={ucFirstAllSnakeToPascalWithSpaces}
+                  onClickRow={handleClick}
+               />
+            </div>
+         </AppShell.Scrollable>
+      </>
+   );
+}
+
+const renderValue = ({ value, property }) => {
+   if (["is_default", "implicit_allow"].includes(property)) {
+      return value ? <span>Yes</span> : <span className="opacity-50">No</span>;
+   }
+
+   if (property === "permissions") {
+      return [...(value || [])].map((p, i) => (
+         <span
+            key={i}
+            className="inline-block px-2 py-1.5 text-sm bg-primary/5 rounded font-mono leading-none"
+         >
+            {p}
+         </span>
+      ));
+   }
+
+   return <CellValue value={value} property={property} />;
+};