feat: contributors per milestone ordering

michalges · michalges · commit 37b7e5fc530e · 2026-07-19T13:47:19.000+02:00
diff --git a/src/features/abstract-resource-form/components/arf-relation-input.tsx b/src/features/abstract-resource-form/components/arf-relation-input.tsx
@@ -1,3 +1,4 @@
+import type { ReactNode } from "react";
 import { get } from "react-hook-form";
 import type { Control } from "react-hook-form";
 import { toast } from "sonner";
@@ -36,11 +37,13 @@ import { sanitizeId, toTitleCase } from "@/utils";
 import { useArfRelation } from "../hooks/use-arf-relation";
 import { useArfRelationMutation } from "../hooks/use-arf-relation-mutation";
 import { useArfSheet } from "../hooks/use-arf-sheet";
+import { getItemPivotOrder } from "../utils/get-item-pivot-order";
 import { getMutationConfig } from "../utils/get-mutation-config";
 import { isExistingItem } from "../utils/is-existing-item";
 import { ArfInput } from "./arf-input";
 import { ArfPivotData } from "./arf-pivot-data";
 import { OrderableMultiSelect } from "./orderable-multi-select";
+import { OrderablePivotMultiSelect } from "./orderable-pivot-multi-select";
 
 export function ArfRelationInput<
   T extends Resource,
@@ -145,11 +148,23 @@ export function ArfRelationInput<
   const isRelationOrderable =
     isOrderableResource(resourceRelation) &&
     relationDefinition.type !== RelationType.ManyToMany;
+  const isPivotOrderable =
+    relationDefinition.type === RelationType.ManyToMany &&
+    relationDefinition.orderable === true;
   const sortedQueriedRelations = isRelationOrderable
     ? [...queriedRelations].toSorted((a, b) =>
         "order" in a && "order" in b ? a.order - b.order : 1,
       )
-    : queriedRelations;
+    : isPivotOrderable
+      ? [...queriedRelations].toSorted((a, b) => {
+          const orderA = getItemPivotOrder(a);
+          const orderB = getItemPivotOrder(b);
+          if (orderA !== undefined && orderB !== undefined) {
+            return orderA - orderB;
+          }
+          return 1;
+        })
+      : queriedRelations;
   const selectedValues = sortedQueriedRelations.flatMap((item) => {
     const value = get(item, primaryKeyField, null) as ResourcePk | null;
     return value == null ? [] : String(value);
@@ -264,16 +279,29 @@ export function ArfRelationInput<
     defaultValue: [...new Set(selectedValues)],
   } satisfies React.ComponentProps<typeof MultiSelect>;
 
-  const multiselect = isRelationOrderable ? (
-    <OrderableMultiSelect
-      // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion -- type guard doesn't narrow generics
-      resourceRelation={resourceRelation as OrderableResource}
-      items={sortedQueriedRelations as ResourceDataType<OrderableResource>[]}
-      multiSelectProps={multiSelectProps}
-    />
-  ) : (
-    <MultiSelect {...multiSelectProps} />
-  );
+  let multiselect: ReactNode;
+  if (isRelationOrderable) {
+    multiselect = (
+      <OrderableMultiSelect
+        resourceRelation={resourceRelation as OrderableResource}
+        items={sortedQueriedRelations as ResourceDataType<OrderableResource>[]}
+        multiSelectProps={multiSelectProps}
+      />
+    );
+  } else if (isPivotOrderable && relationDefinition.pivotData != null) {
+    multiselect = (
+      <OrderablePivotMultiSelect
+        resource={resource}
+        resourceRelation={resourceRelation}
+        endpoint={endpoint}
+        pivotData={relationDefinition.pivotData}
+        items={sortedQueriedRelations}
+        multiSelectProps={multiSelectProps}
+      />
+    );
+  } else {
+    multiselect = <MultiSelect {...multiSelectProps} />;
+  }
   return relationDefinition.type === RelationType.ManyToMany ? (
     // TODO: allow m:n relation inputs to be immutable
     <Label className="flex-col items-start">
diff --git a/src/features/abstract-resource-form/components/orderable-multi-select.tsx b/src/features/abstract-resource-form/components/orderable-multi-select.tsx
@@ -1,6 +1,7 @@
 "use client";
 
-import { useRef } from "react";
+import { arrayMove } from "@dnd-kit/sortable";
+import { useEffect, useRef } from "react";
 
 import { MultiSelect } from "@/components/ui/multi-select";
 import { calculateNewSortValue } from "@/features/abstract-resource-list";
@@ -23,7 +24,10 @@ export function OrderableMultiSelect<T extends OrderableResource>({
   multiSelectProps,
 }: OrderableMultiSelectProps<T>) {
   const itemsRef = useRef(items);
-  itemsRef.current = items;
+
+  useEffect(() => {
+    itemsRef.current = items;
+  }, [items]);
 
   const { mutateOrder } = useRelationOrderMutation({ resourceRelation });
 
@@ -33,6 +37,9 @@ export function OrderableMultiSelect<T extends OrderableResource>({
       oldIndex,
       newIndex,
     );
+
+    itemsRef.current = arrayMove(itemsRef.current, oldIndex, newIndex);
+
     void mutateOrder(id, order);
   };
 
diff --git a/src/features/abstract-resource-form/components/orderable-pivot-multi-select.tsx b/src/features/abstract-resource-form/components/orderable-pivot-multi-select.tsx
@@ -0,0 +1,95 @@
+"use client";
+
+import { arrayMove } from "@dnd-kit/sortable";
+import { useEffect, useRef } from "react";
+import type { ComponentProps } from "react";
+
+import { MultiSelect } from "@/components/ui/multi-select";
+import { calculateNewSortValue } from "@/features/abstract-resource-list";
+import type { Resource } from "@/features/resources";
+import type {
+  OrderableResource,
+  PivotDataDefinition,
+  ResourceDataType,
+  ResourcePk,
+  ResourceRelation,
+} from "@/features/resources/types";
+
+import { usePivotRelationOrderMutation } from "../hooks/use-pivot-relation-order-mutation";
+import { getItemPivotOrder, hasMeta } from "../utils/get-item-pivot-order";
+
+export function OrderablePivotMultiSelect<
+  T extends Resource,
+  L extends ResourceRelation<T>,
+>({
+  resource,
+  resourceRelation,
+  endpoint,
+  pivotData,
+  items,
+  multiSelectProps,
+}: {
+  resource: T;
+  resourceRelation: L;
+  endpoint: string;
+  pivotData: PivotDataDefinition;
+  items: ResourceDataType<L>[];
+  multiSelectProps: ComponentProps<typeof MultiSelect>;
+}) {
+  const itemsRef = useRef(items);
+
+  useEffect(() => {
+    itemsRef.current = items;
+  }, [items]);
+
+  const { mutateOrder } = usePivotRelationOrderMutation({
+    resource,
+    resourceRelation,
+    endpoint,
+  });
+
+  const handleReorder = (id: string, oldIndex: number, newIndex: number) => {
+    const mappedItems = itemsRef.current.map((item) => ({
+      ...item,
+      order: getItemPivotOrder(item) ?? 0,
+    })) as ResourceDataType<OrderableResource>[];
+
+    const order = calculateNewSortValue(mappedItems, oldIndex, newIndex);
+
+    const originalItem = itemsRef.current.find(
+      (item) => String(item.id) === id,
+    );
+    if (originalItem == null) {
+      return;
+    }
+
+    const meta = hasMeta(originalItem) ? originalItem.meta : undefined;
+    const pivotKey = `pivot_${pivotData.field}`;
+    const pivotValue = meta?.[pivotKey];
+
+    if (pivotValue == null) {
+      return;
+    }
+
+    const reorderedItems = arrayMove(itemsRef.current, oldIndex, newIndex);
+
+    itemsRef.current = reorderedItems.map((item) => {
+      if (String(item.id) === id) {
+        return {
+          ...item,
+          meta: {
+            ...(hasMeta(item) ? item.meta : {}),
+            pivot_order: order,
+          },
+        };
+      }
+      return item;
+    });
+
+    void mutateOrder(id as ResourcePk, order, {
+      [pivotData.field]: pivotValue,
+    });
+  };
+
+  return <MultiSelect {...multiSelectProps} onReorder={handleReorder} />;
+}
diff --git a/src/features/abstract-resource-form/hooks/use-pivot-relation-order-mutation.ts b/src/features/abstract-resource-form/hooks/use-pivot-relation-order-mutation.ts
@@ -0,0 +1,74 @@
+"use client";
+
+import { toast } from "sonner";
+
+import { fetchMutation, useMutationWrapper } from "@/features/backend";
+import type { ModifyResourceResponse } from "@/features/backend/types";
+import { getResourceQueryName } from "@/features/resources";
+import type { Resource } from "@/features/resources";
+import type {
+  ResourcePk,
+  ResourceRelation,
+  XToManyResource,
+} from "@/features/resources/types";
+import { getToastMessages } from "@/lib/get-toast-messages";
+import { camelToSnakeCase, sanitizeId } from "@/utils";
+
+import { useArfRelation } from "./use-arf-relation";
+
+interface PivotOrderMutationVariables {
+  id: ResourcePk;
+  order: number;
+  pivotKeys: Record<string, unknown>;
+}
+
+export function usePivotRelationOrderMutation<T extends Resource>({
+  resource,
+  resourceRelation,
+  endpoint,
+}: {
+  resource: T;
+  resourceRelation: ResourceRelation<T>;
+  endpoint: string;
+}) {
+  const relationContext = useArfRelation();
+
+  const mutation = useMutationWrapper<
+    ModifyResourceResponse<T>,
+    PivotOrderMutationVariables
+  >(
+    `update__${resource}__relation_order__${relationContext?.childResource ?? "unknown"}`,
+    async ({ id, order, pivotKeys }) => {
+      const queryName = getResourceQueryName(
+        resourceRelation as XToManyResource,
+      );
+      const pathSegment = camelToSnakeCase(queryName);
+      const response = await fetchMutation<ModifyResourceResponse<T>>(
+        `${endpoint}/${pathSegment}/${sanitizeId(id)}`,
+        {
+          method: "PATCH",
+          resource,
+          body: {
+            query: pivotKeys,
+            update: { order },
+          },
+        },
+      );
+      return response;
+    },
+  );
+
+  const mutateOrder = async (
+    id: ResourcePk,
+    order: number,
+    pivotKeys: Record<string, unknown>,
+  ) =>
+    toast
+      .promise(
+        mutation.mutateAsync({ id, order, pivotKeys }),
+        getToastMessages.resource(resourceRelation).modify,
+      )
+      .unwrap();
+
+  return { mutateOrder, mutation };
+}
diff --git a/src/features/abstract-resource-form/types/internal.ts b/src/features/abstract-resource-form/types/internal.ts
@@ -80,3 +80,9 @@ export interface PersistedFormData<T extends Resource> {
   values: ResourceFormValues<T>;
   timestamp: number;
 }
+
+export interface ItemWithPivotOrder {
+  meta: {
+    pivot_order: number;
+  };
+}
diff --git a/src/features/abstract-resource-form/utils/get-item-pivot-order.ts b/src/features/abstract-resource-form/utils/get-item-pivot-order.ts
@@ -0,0 +1,21 @@
+import type { ItemWithPivotOrder } from "../types/internal";
+
+export const hasMeta = (
+  item: unknown,
+): item is { meta: Record<string, unknown> } =>
+  typeof item === "object" &&
+  item !== null &&
+  "meta" in item &&
+  typeof item.meta === "object" &&
+  item.meta !== null;
+
+export const hasPivotOrder = (item: unknown): item is ItemWithPivotOrder =>
+  hasMeta(item) && "pivot_order" in item.meta;
+
+export const getItemPivotOrder = (item: unknown): number | undefined => {
+  if (hasPivotOrder(item) && typeof item.meta.pivot_order === "number") {
+    return item.meta.pivot_order;
+  }
+
+  return undefined;
+};
diff --git a/src/features/resources/data/resource-metadata.ts b/src/features/resources/data/resource-metadata.ts
@@ -386,7 +386,6 @@ export const RESOURCE_METADATA = {
   [Resource.Contributors]: {
     queryName: "contributors",
     apiPath: "contributors",
-    orderable: true,
     itemMapper: (item) => ({
       name: item.name,
     }),
@@ -722,6 +721,7 @@ export const RESOURCE_METADATA = {
         relationInputs: {
           [Resource.Contributors]: {
             type: RelationType.ManyToMany,
+            orderable: true,
             pivotData: {
               field: "role_id",
               relatedResource: Resource.Roles,
diff --git a/src/features/resources/types/relations.ts b/src/features/resources/types/relations.ts
@@ -54,6 +54,7 @@ export interface PivotRelationDefinition {
   foreignKey?: never;
   label?: DeclinableNoun;
   pivotData?: PivotDataDefinition;
+  orderable?: boolean;
 }
 /** Relation definitions between T and L, where T is the main resource and L is the related resource. */
 export type RelationDefinition<T extends Resource, L extends Resource> =

Original file line number	Diff line number	Diff line change
`@@ -54,6 +54,7 @@ export interface PivotRelationDefinition {`
`54`	`54`	`foreignKey?: never;`
`55`	`55`	`label?: DeclinableNoun;`
`56`	`56`	`pivotData?: PivotDataDefinition;`
	`57`	`+ orderable?: boolean;`
`57`	`58`	`}`
`58`	`59`	`/** Relation definitions between T and L, where T is the main resource and L is the related resource. */`
`59`	`60`	`export type RelationDefinition<T extends Resource, L extends Resource> =`