ostris/ai-toolkit
1
0
Fork 0
mirror of https://github.com/ostris/ai-toolkit.git synced 2026-02-20 12:23:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

Moved the job action bar to a shred component

Browse Source
This commit is contained in:
Jaret Burkett
2025-02-22 12:20:14 -07:00
parent a7a9c11d9e
commit ed84c19205
4 changed files with 110 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
ui/src/components/JobActionBar.tsx Normal file
View File

@@ -0,0 +1,87 @@
import Link from 'next/link';
import { Eye, Trash2, Pen, Play, Pause } from 'lucide-react';
import { Button } from '@headlessui/react';
import { openConfirm } from '@/components/ConfirmModal';
import { Job } from '@prisma/client';
import { startJob, stopJob, deleteJob, getAvaliableJobActions } from '@/utils/jobs';
interface JobActionBarProps {
job: Job;
onRefresh?: () => void;
afterDelete?: () => void;
hideView?: boolean;
className?: string;
}
export default function JobActionBar({ job, onRefresh, afterDelete, className, hideView }: JobActionBarProps) {
const { canStart, canStop, canDelete, canEdit } = getAvaliableJobActions(job);
if (!afterDelete) afterDelete = onRefresh;
return (
<div className={`${className}`}>
{canStart && (
<Button
onClick={async () => {
if (!canStart) return;
await startJob(job.id);
if (onRefresh) onRefresh();
}}
className={`ml-2 opacity-100`}
>
<Play />
</Button>
)}
{canStop && (
<Button
onClick={() => {
if (!canStop) return;
openConfirm({
title: 'Stop Job',
message: `Are you sure you want to stop the job "${job.name}"? You CAN resume later.`,
type: 'info',
confirmText: 'Stop',
onConfirm: async () => {
await stopJob(job.id);
if (onRefresh) onRefresh();
},
});
}}
className={`ml-2 opacity-100`}
>
<Pause />
</Button>
)}
{!hideView && (
<Link href={`/jobs/${job.id}`} className="ml-2 text-gray-200 hover:text-gray-100 inline-block">
<Eye />
</Link>
)}
{canEdit && (
<Link href={`/jobs/new?id=${job.id}`} className="ml-2 hover:text-gray-100 inline-block">
<Pen />
</Link>
)}
{canDelete && (
<Button
onClick={() => {
if (!canDelete) return;
openConfirm({
title: 'Delete Job',
message: `Are you sure you want to delete the job "${job.name}"? This will also permanently remove it from your disk.`,
type: 'warning',
confirmText: 'Delete',
onConfirm: async () => {
await deleteJob(job.id);
if (afterDelete) afterDelete();
},
});
}}
className={`ml-2 opacity-100`}
>
<Trash2 />
</Button>
)}
</div>
);
}

67
ui/src/components/JobsTable.tsx
View File

@@ -6,6 +6,7 @@ import { Eye, Trash2, Pen, Play, Pause } from 'lucide-react';
import { Button } from '@headlessui/react';
import { openConfirm } from '@/components/ConfirmModal';
import { startJob, stopJob, deleteJob, getAvaliableJobActions } from '@/utils/jobs';
import JobActionBar from './JobActionBar';
interface JobsTableProps {}
@@ -71,71 +72,7 @@ export default function JobsTable(props: JobsTableProps) {
key: 'actions',
className: 'text-right',
render: row => {
const { canDelete, canEdit, canStop, canStart } = getAvaliableJobActions(row);
return (
<div>
{canStart && (
<Button
onClick={async () => {
if (!canStart) return;
await startJob(row.id);
refreshJobs();
}}
className={`ml-2 opacity-100`}
>
<Play />
</Button>
)}
{canStop && (
<Button
onClick={() => {
if (!canStop) return;
openConfirm({
title: 'Stop Job',
message: `Are you sure you want to stop the job "${row.name}"? You CAN resume later.`,
type: 'info',
confirmText: 'Stop',
onConfirm: async () => {
await stopJob(row.id);
refreshJobs();
},
});
}}
className={`ml-2 opacity-100`}
>
<Pause />
</Button>
)}
<Link href={`/jobs/${row.id}`} className="ml-2 text-gray-200 hover:text-gray-100 inline-block">
<Eye />
</Link>
{canEdit && (
<Link href={`/jobs/new?id=${row.id}`} className="ml-2 hover:text-gray-100 inline-block">
<Pen />
</Link>
)}
{canDelete && (
<Button
onClick={() => {
if (!canDelete) return;
openConfirm({
title: 'Delete Job',
message: `Are you sure you want to delete the job "${row.name}"? This will also permanently remove it from your disk.`,
type: 'warning',
confirmText: 'Delete',
onConfirm: async () => {
await deleteJob(row.id);
refreshJobs();
},
});
}}
className={`ml-2 opacity-100`}
>
<Trash2 />
</Button>
)}
</div>
);
return <JobActionBar job={row} onRefresh={refreshJobs} />;
},
},
];