73 lines
2.3 KiB
TypeScript
73 lines
2.3 KiB
TypeScript
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} />;
|
|
};
|