rohit/probo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add task priority enum and rename priority to rank

Browse Source 
The existing integer priority field represents positional ordering
within a state, not semantic importance. Rename it to rank and
introduce a new priority field with enum values URGENT, HIGH,
MEDIUM and LOW across the entire stack.

Rank is now scoped to (state, priority) so tasks are ordered
within each priority group. A generated priority_rank column
combines both fields into a single sortable integer for cursor
pagination.

Dragging a task across priority groups updates its priority
automatically based on the drop position neighbors. The backend
first moves the task to the new group then repositions it at the
target rank.

The migration defaults existing rows to MEDIUM priority and
backfills ranks per (state, priority) group.

Signed-off-by: Sacha Al Himdani <sacha@getprobo.com>
This commit is contained in:
Sacha Al Himdani
2026-03-30 17:12:03 +02:00
parent a2f0a37b7b
commit 324f4ce793
21 changed files with 444 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
apps/console/src/components/tasks/TaskFormDialog.tsx
View File

@@ -23,7 +23,10 @@ import {
DurationPicker,
Input,
Label,
Option,
PriorityLevel,
PropertyRow,
Select,
Textarea,
useDialogRef,
} from "@probo/ui";
@@ -47,6 +50,7 @@ const taskFragment = graphql`
id
description
name
priority
timeEstimate
deadline
assignedTo {
@@ -87,9 +91,12 @@ export const taskUpdateMutation = graphql`
}
`;
export const taskPriorities = ["URGENT", "HIGH", "MEDIUM", "LOW"] as const;
const createTaskSchema = z.object({
name: z.string().min(1),
description: z.string().optional().nullable(),
priority: z.enum(taskPriorities),
timeEstimate: z.string().optional().nullable(),
assignedToId: z.string().optional().nullable(),
measureId: z.preprocess(
@@ -102,6 +109,7 @@ const createTaskSchema = z.object({
const updateTaskSchema = z.object({
name: z.string().min(1),
description: z.string().optional().nullable(),
priority: z.enum(taskPriorities),
timeEstimate: z.string().optional().nullable(),
assignedToId: z.preprocess(
val => (val === "" || val == null ? null : val),
@@ -120,10 +128,11 @@ type Props = {
connection?: string;
ref?: DialogRef;
measureId?: string;
onCompleted?: () => void;
};
export default function TaskFormDialog(props: Props) {
const { children, connection, ref, task: taskKey, measureId } = props;
const { children, connection, ref, task: taskKey, measureId, onCompleted } = props;
const { __ } = useTranslate();
const newRef = useDialogRef();
const dialogRef = ref ?? newRef;
@@ -145,6 +154,7 @@ export default function TaskFormDialog(props: Props) {
defaultValues: {
name: task?.name ?? "",
description: task?.description ?? "",
priority: task?.priority ?? "MEDIUM",
timeEstimate: task?.timeEstimate ?? "",
assignedToId: task?.assignedTo?.id ?? "",
measureId: task?.measure?.id ?? measureId ?? "",
@@ -160,12 +170,16 @@ export default function TaskFormDialog(props: Props) {
taskId: task.id,
name: data.name,
description: data.description || null,
priority: data.priority,
timeEstimate: data.timeEstimate || null,
deadline: formatDatetime(data.deadline) ?? null,
assignedToId: data.assignedToId ?? null,
measureId: data.measureId || null,
},
},
onCompleted: (_response, errors) => {
if (!errors) onCompleted?.();
},
});
} else {
await mutate({
@@ -174,6 +188,7 @@ export default function TaskFormDialog(props: Props) {
organizationId,
name: data.name,
description: data.description || null,
priority: data.priority,
timeEstimate: data.timeEstimate || null,
deadline: formatDatetime(data.deadline) ?? null,
assignedToId: data.assignedToId || null,
@@ -182,8 +197,11 @@ export default function TaskFormDialog(props: Props) {
connections: [connection!],
},
onCompleted: (_response, errors) => {
if (!errors && data.measureId) {
updateStoreCounter(relayEnv, data.measureId, "tasks(first:0)", 1);
if (!errors) {
if (data.measureId) {
updateStoreCounter(relayEnv, data.measureId, "tasks(first:0)", 1);
}
onCompleted?.();
}
},
});
@@ -224,6 +242,46 @@ export default function TaskFormDialog(props: Props) {
{/* Properties form */}
<div className="py-5 px-6 bg-subtle">
<Label>{__("Properties")}</Label>
<PropertyRow
label={__("Priority")}
error={formState.errors.priority?.message}
>
<Controller
name="priority"
control={control}
render={({ field }) => (
<Select
value={field.value}
onValueChange={field.onChange}
>
<Option value="URGENT">
<span className="flex items-center gap-2">
<PriorityLevel level="URGENT" />
{__("Urgent")}
</span>
</Option>
<Option value="HIGH">
<span className="flex items-center gap-2">
<PriorityLevel level="HIGH" />
{__("High")}
</span>
</Option>
<Option value="MEDIUM">
<span className="flex items-center gap-2">
<PriorityLevel level="MEDIUM" />
{__("Medium")}
</span>
</Option>
<Option value="LOW">
<span className="flex items-center gap-2">
<PriorityLevel level="LOW" />
{__("Low")}
</span>
</Option>
</Select>
)}
/>
</PropertyRow>
<PropertyRow
label={__("Assigned to")}
error={formState.errors.assignedToId?.message}

71
apps/console/src/components/tasks/TasksCard.tsx
View File

@@ -43,7 +43,10 @@ import {
import { Link, useLocation, useParams } from "react-router";
import type { TaskFormDialogFragment$key } from "#/__generated__/core/TaskFormDialogFragment.graphql";
import type { TaskFormDialogUpdateMutation } from "#/__generated__/core/TaskFormDialogUpdateMutation.graphql";
import type {
TaskFormDialogUpdateMutation,
TaskPriority,
} from "#/__generated__/core/TaskFormDialogUpdateMutation.graphql";
import type { TasksCard_task$key } from "#/__generated__/core/TasksCard_task.graphql";
import type { TasksCard_TaskRowFragment$key } from "#/__generated__/core/TasksCard_TaskRowFragment.graphql";
import type { TasksCardDeleteMutation } from "#/__generated__/core/TasksCardDeleteMutation.graphql";
@@ -53,11 +56,35 @@ import type {
} from "#/__generated__/core/TasksCardOrganizationFragment.graphql";
import type { TasksCardOrganizationQuery } from "#/__generated__/core/TasksCardOrganizationQuery.graphql";
import TaskFormDialog, {
taskPriorities,
taskUpdateMutation,
} from "#/components/tasks/TaskFormDialog";
import { updateStoreCounter } from "#/hooks/useMutationWithIncrement";
import { useOrganizationId } from "#/hooks/useOrganizationId";
function resolveDropPriority(
dragged: TaskPriority,
above?: TaskPriority,
below?: TaskPriority,
): TaskPriority | undefined {
// If any neighbor shares the dragged priority, keep it.
if (above === dragged || below === dragged) return undefined;
// At edges, take the single neighbor's priority.
if (!above && below) return below !== dragged ? below : undefined;
if (!below && above) return above !== dragged ? above : undefined;
// Both neighbors differ — pick the one closest to dragged.
if (above && below) {
const di = taskPriorities.indexOf(dragged);
const dAbove = Math.abs(taskPriorities.indexOf(above) - di);
const dBelow = Math.abs(taskPriorities.indexOf(below) - di);
return dAbove <= dBelow ? above : below;
}
return undefined;
}
type Props = {
tasks: TasksCardOrganizationFragment$data["tasks"]["edges"];
connectionId: string;
@@ -70,6 +97,7 @@ const taskInlineFragment = graphql`
id
state
priority
rank
}
`;
@@ -82,7 +110,7 @@ const organizationTasksFragment = graphql`
@refetchable(queryName: "TasksCardOrganizationQuery")
@argumentDefinitions(
first: { type: "Int", defaultValue: 500 }
order: { type: "TaskOrder", defaultValue: { field: PRIORITY, direction: ASC } }
order: { type: "TaskOrder", defaultValue: { field: PRIORITY_RANK, direction: ASC } }
after: { type: "CursorKey", defaultValue: null }
before: { type: "CursorKey", defaultValue: null }
last: { type: "Int", defaultValue: null }
@@ -110,7 +138,7 @@ const organizationTasksFragment = graphql`
type OrganizationTasksCardProps = {
organizationRef: TasksCardOrganizationFragment$key;
header?: (params: { connectionId: string; canCreateTask: boolean }) => ReactNode;
header?: (params: { connectionId: string; canCreateTask: boolean; refetch: () => void }) => ReactNode;
};
export function OrganizationTasksCard({ organizationRef, header }: OrganizationTasksCardProps) {
@@ -119,9 +147,13 @@ export function OrganizationTasksCard({ organizationRef, header }: OrganizationT
TasksCardOrganizationFragment$key
>(organizationTasksFragment, organizationRef);
const handleRefetch = () => {
refetch({}, { fetchPolicy: "store-and-network" });
};
return (
<>
{header?.({ connectionId: data.tasks.__id, canCreateTask: data.canCreateTask })}
{header?.({ connectionId: data.tasks.__id, canCreateTask: data.canCreateTask, refetch: handleRefetch })}
<TasksCard
tasks={data.tasks.edges}
connectionId={data.tasks.__id}
@@ -132,12 +164,13 @@ export function OrganizationTasksCard({ organizationRef, header }: OrganizationT
);
}
const updatePriorityMutation = graphql`
mutation TasksCardUpdatePriorityMutation($input: UpdateTaskInput!) {
const updateRankMutation = graphql`
mutation TasksCardUpdateRankMutation($input: UpdateTaskInput!) {
updateTask(input: $input) {
task {
id
priority
rank
}
}
}
@@ -151,7 +184,7 @@ export function TasksCard({ tasks, connectionId, canReorder, refetch }: Props) {
const { toast } = useToast();
const [draggedId, setDraggedId] = useState<string | null>(null);
const [previewOrder, setPreviewOrder] = useState<string[] | null>(null);
const [updatePriority] = useMutation<TaskFormDialogUpdateMutation>(updatePriorityMutation);
const [updateRank] = useMutation<TaskFormDialogUpdateMutation>(updateRankMutation);
const handleStateChange = () => {
if (refetch) {
@@ -207,18 +240,32 @@ export function TasksCard({ tasks, connectionId, canReorder, refetch }: Props) {
const newIdx = previewOrder.indexOf(draggedId);
const originalIds = filteredTasks.map(({ node }) => readTask(node).id);
const originalIdx = originalIds.indexOf(draggedId);
if (originalIdx === -1) {
setDraggedId(null);
setPreviewOrder(null);
return;
}
let targetOriginalIdx = newIdx;
if (targetOriginalIdx >= originalIdx) targetOriginalIdx++;
if (targetOriginalIdx >= filteredTasks.length) targetOriginalIdx = filteredTasks.length - 1;
const targetPriority = readTask(filteredTasks[targetOriginalIdx].node).priority;
const targetTask = readTask(filteredTasks[targetOriginalIdx].node);
const draggedTask = readTask(filteredTasks[originalIdx].node);
// Determine target priority from neighbors at the drop position.
const aboveId = newIdx > 0 ? previewOrder[newIdx - 1] : null;
const belowId = newIdx < previewOrder.length - 1 ? previewOrder[newIdx + 1] : null;
const aboveTask = aboveId ? readTask(filteredTasks[originalIds.indexOf(aboveId)].node) : null;
const belowTask = belowId ? readTask(filteredTasks[originalIds.indexOf(belowId)].node) : null;
const targetPriority = resolveDropPriority(draggedTask.priority, aboveTask?.priority, belowTask?.priority);
setDraggedId(null);
updatePriority({
updateRank({
variables: {
input: {
taskId: draggedId,
priority: targetPriority,
rank: targetTask.rank,
...(targetPriority && { priority: targetPriority }),
},
},
onCompleted: (_, errors) => {
@@ -351,6 +398,7 @@ const fragment = graphql`
id
name
state
priority
description
timeEstimate
deadline
@@ -452,6 +500,7 @@ function TaskRow(props: TaskRowProps) {
<TaskFormDialog
task={props.fKey as TaskFormDialogFragment$key}
ref={dialogRef}
onCompleted={props.onStateChange}
/>
<div
className={`flex items-center justify-between py-3 px-6 ${className}`}
@@ -466,7 +515,7 @@ function TaskRow(props: TaskRowProps) {
>
<div className="flex gap-2 items-start">
<div className="flex items-center gap-2 pt-[2px]">
<PriorityLevel level={1} />
<PriorityLevel level={task.priority} />
<button
onClick={() => void onToggle()}
className="cursor-pointer -m-1 p-1 disabled:opacity-60"