140 lines
3.7 KiB
TypeScript
140 lines
3.7 KiB
TypeScript
import { useCallback } from "react";
|
|
import { ListChecks } from "lucide-react";
|
|
import { Link } from "react-router";
|
|
import {
|
|
DashboardWidgetList,
|
|
DismissibleAlert,
|
|
LoadingFrame,
|
|
StatusBadge,
|
|
useDashboardWidgetData,
|
|
type ApiSettings,
|
|
type DashboardWidgetConfiguration
|
|
} from "@govoplan/core-webui";
|
|
import {
|
|
listWorkflowInstances,
|
|
type WorkflowInstance,
|
|
type WorkflowInstanceStep
|
|
} from "../../api/workflow";
|
|
|
|
export default function WorkflowOpenWorkWidget({
|
|
settings,
|
|
refreshKey,
|
|
configuration
|
|
}: {
|
|
settings: ApiSettings;
|
|
refreshKey: number;
|
|
configuration: DashboardWidgetConfiguration;
|
|
}) {
|
|
const maxItems = numberSetting(configuration.maxItems, 6, 1, 20);
|
|
const includeRunning = configuration.includeRunning !== false;
|
|
const load = useCallback(async () => {
|
|
const instances = await listWorkflowInstances(settings);
|
|
return instances
|
|
.filter((instance) =>
|
|
instance.status === "waiting"
|
|
|| (includeRunning && instance.status === "running")
|
|
)
|
|
.sort(compareOpenWork)
|
|
.slice(0, maxItems);
|
|
}, [includeRunning, maxItems, settings]);
|
|
const { data: instances, loading, error } = useDashboardWidgetData(
|
|
load,
|
|
refreshKey
|
|
);
|
|
|
|
return (
|
|
<LoadingFrame loading={loading} label="Loading open workflow work">
|
|
{error && (
|
|
<DismissibleAlert tone="warning" resetKey={error}>
|
|
{error}
|
|
</DismissibleAlert>
|
|
)}
|
|
<DashboardWidgetList
|
|
emptyText="No workflow work is currently open."
|
|
items={(instances ?? []).map((instance) => {
|
|
const step = currentStep(instance);
|
|
return {
|
|
id: instance.id,
|
|
title: instance.definition_name,
|
|
detail: handoffTitle(step),
|
|
meta: updatedLabel(instance.updated_at),
|
|
leading: <ListChecks size={17} aria-hidden="true" />,
|
|
trailing: (
|
|
<StatusBadge
|
|
status={instance.status}
|
|
label={instance.status === "waiting" ? "Waiting" : "Running"}
|
|
/>
|
|
),
|
|
to: workflowRunUrl(instance)
|
|
};
|
|
})}
|
|
/>
|
|
<div className="dashboard-contribution-footer">
|
|
<Link className="btn btn-secondary" to="/workflow">
|
|
Open Workflow
|
|
</Link>
|
|
</div>
|
|
</LoadingFrame>
|
|
);
|
|
}
|
|
|
|
function currentStep(
|
|
instance: WorkflowInstance
|
|
): WorkflowInstanceStep | null {
|
|
return instance.steps.find(
|
|
(step) => step.id === instance.current_step_id
|
|
) ?? null;
|
|
}
|
|
|
|
function handoffTitle(step: WorkflowInstanceStep | null): string {
|
|
const title = step?.handoff.title;
|
|
if (typeof title === "string" && title.trim()) return title;
|
|
if (!step) return "Preparing next step";
|
|
return step.node_type
|
|
.replace(/^workflow\./, "")
|
|
.split(".")
|
|
.join(" ");
|
|
}
|
|
|
|
function workflowRunUrl(instance: WorkflowInstance): string {
|
|
const query = new URLSearchParams({
|
|
definition: instance.definition_id,
|
|
run: instance.id
|
|
});
|
|
return `/workflow?${query.toString()}`;
|
|
}
|
|
|
|
function compareOpenWork(
|
|
left: WorkflowInstance,
|
|
right: WorkflowInstance
|
|
): number {
|
|
if (left.status !== right.status) {
|
|
return left.status === "waiting" ? -1 : 1;
|
|
}
|
|
return (
|
|
new Date(right.updated_at).getTime()
|
|
- new Date(left.updated_at).getTime()
|
|
);
|
|
}
|
|
|
|
function updatedLabel(value: string): string {
|
|
return new Intl.DateTimeFormat(undefined, {
|
|
day: "2-digit",
|
|
month: "short",
|
|
hour: "2-digit",
|
|
minute: "2-digit"
|
|
}).format(new Date(value));
|
|
}
|
|
|
|
function numberSetting(
|
|
value: unknown,
|
|
fallback: number,
|
|
minimum: number,
|
|
maximum: number
|
|
): number {
|
|
const numeric = typeof value === "number" ? value : Number(value);
|
|
return Number.isFinite(numeric)
|
|
? Math.max(minimum, Math.min(maximum, Math.floor(numeric)))
|
|
: fallback;
|
|
}
|