53 lines
1.4 KiB
TypeScript
53 lines
1.4 KiB
TypeScript
import type { DashboardTask, DashboardTaskAction } from './api';
|
|
import { taskActionsFor } from './dashboardHelpers';
|
|
import type { Messages } from './i18n';
|
|
|
|
export type TaskActionKey =
|
|
| 'create'
|
|
| `${string}:edit`
|
|
| `${string}:${DashboardTaskAction}`;
|
|
|
|
interface TaskActionButtonsProps {
|
|
className?: string;
|
|
onTaskAction: (task: DashboardTask, action: DashboardTaskAction) => void;
|
|
task: DashboardTask;
|
|
taskActionKey: string | null;
|
|
t: Messages;
|
|
}
|
|
|
|
export function TaskActionButtons({
|
|
className,
|
|
onTaskAction,
|
|
task,
|
|
taskActionKey,
|
|
t,
|
|
}: TaskActionButtonsProps) {
|
|
const taskActions = taskActionsFor(task);
|
|
if (taskActions.length === 0) return null;
|
|
|
|
const rootClassName = className
|
|
? `task-actions ${className}`
|
|
: 'task-actions';
|
|
|
|
return (
|
|
<div className={rootClassName}>
|
|
{taskActions.map((action) => {
|
|
const actionKey: TaskActionKey = `${task.id}:${action}`;
|
|
const busy = taskActionKey === actionKey;
|
|
return (
|
|
<button
|
|
aria-busy={busy || undefined}
|
|
className={`task-action task-action-${action}${busy ? ' is-busy' : ''}`}
|
|
disabled={busy}
|
|
key={action}
|
|
onClick={() => onTaskAction(task, action)}
|
|
type="button"
|
|
>
|
|
{busy ? t.tasks.actions.busy : t.tasks.actions[action]}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|