plane/web/store/issues/base-issue-kanban-helper.store.ts

export interface IKanBanHelpers {
  // actions
  handleDragDrop: (
    source: any,
    destination: any,
    workspaceSlug: string,
    projectId: string,
    store: any,
    subGroupBy: string | null,
    groupBy: string | null,
    issues: any,
    issueWithIds: any,
    viewId?: string | null
  ) => void;
}

export class KanBanHelpers implements IKanBanHelpers {
  constructor() {}

  handleSortOrder = (destinationIssues: any, destinationIndex: any, issues: any) => {
    const sortOrderDefaultValue = 65535;
    let currentIssueState = {};

    if (destinationIssues && destinationIssues.length > 0) {
      if (destinationIndex === 0) {
        const destinationIssueId = destinationIssues[destinationIndex];
        currentIssueState = {
          ...currentIssueState,
          sort_order: issues[destinationIssueId].sort_order - sortOrderDefaultValue,
        };
      } else if (destinationIndex === destinationIssues.length) {
        const destinationIssueId = destinationIssues[destinationIndex - 1];
        currentIssueState = {
          ...currentIssueState,
          sort_order: issues[destinationIssueId].sort_order + sortOrderDefaultValue,
        };
      } else {
        const destinationTopIssueId = destinationIssues[destinationIndex - 1];
        const destinationBottomIssueId = destinationIssues[destinationIndex];
        currentIssueState = {
          ...currentIssueState,
          sort_order: (issues[destinationTopIssueId].sort_order + issues[destinationBottomIssueId].sort_order) / 2,
        };
      }
    } else {
      currentIssueState = {
        ...currentIssueState,
        sort_order: sortOrderDefaultValue,
      };
    }

    return currentIssueState;
  };

  handleDragDrop = async (
    source: any,
    destination: any,
    workspaceSlug: string,
    projectId: string, // projectId for all views or user id in profile issues
    store: any,
    subGroupBy: string | null,
    groupBy: string | null,
    issues: any,
    issueWithIds: any,
    viewId: string | null = null // it can be moduleId, cycleId
  ) => {
    if (issues && issueWithIds) {
      let updateIssue: any = {};

      const sourceColumnId = (source?.droppableId && source?.droppableId.split("__")) || null;
      const destinationColumnId = (destination?.droppableId && destination?.droppableId.split("__")) || null;

      const sourceGroupByColumnId = sourceColumnId[0] || null;
      const destinationGroupByColumnId = destinationColumnId[0] || null;

      const sourceSubGroupByColumnId = sourceColumnId[1] || null;
      const destinationSubGroupByColumnId = destinationColumnId[1] || null;

      if (!workspaceSlug || !projectId || !groupBy || !sourceGroupByColumnId || !destinationGroupByColumnId) return;

      if (destinationGroupByColumnId === "issue-trash-box") {
        const sourceIssues = subGroupBy
          ? issueWithIds[sourceSubGroupByColumnId][sourceGroupByColumnId]
          : issueWithIds[sourceGroupByColumnId];

        const [removed] = sourceIssues.splice(source.index, 1);

        console.log("removed", removed);

        if (removed) {
          if (viewId) store?.removeIssue(workspaceSlug, projectId, removed, viewId);
          else store?.removeIssue(workspaceSlug, projectId, removed);
        }
      } else {
        const sourceIssues = subGroupBy
          ? issueWithIds[sourceSubGroupByColumnId][sourceGroupByColumnId]
          : issueWithIds[sourceGroupByColumnId];
        const destinationIssues = subGroupBy
          ? issueWithIds[sourceSubGroupByColumnId][destinationGroupByColumnId]
          : issueWithIds[destinationGroupByColumnId];

        const [removed] = sourceIssues.splice(source.index, 1);
        const removedIssueDetail = issues[removed];

        if (subGroupBy && sourceSubGroupByColumnId && destinationSubGroupByColumnId) {
          updateIssue = {
            id: removedIssueDetail?.id,
          };

          // for both horizontal and vertical dnd
          updateIssue = {
            ...updateIssue,
            ...this.handleSortOrder(destinationIssues, destination.index, issues),
          };

          if (sourceSubGroupByColumnId === destinationSubGroupByColumnId) {
            if (sourceGroupByColumnId != destinationGroupByColumnId) {
              if (groupBy === "state") updateIssue = { ...updateIssue, state: destinationGroupByColumnId };
              if (groupBy === "priority") updateIssue = { ...updateIssue, priority: destinationGroupByColumnId };
            }
          } else {
            if (subGroupBy === "state")
              updateIssue = {
                ...updateIssue,
                state: destinationSubGroupByColumnId,
                priority: destinationGroupByColumnId,
              };
            if (subGroupBy === "priority")
              updateIssue = {
                ...updateIssue,
                state: destinationGroupByColumnId,
                priority: destinationSubGroupByColumnId,
              };
          }
        } else {
          updateIssue = {
            id: removedIssueDetail?.id,
          };

          // for both horizontal and vertical dnd
          updateIssue = {
            ...updateIssue,
            ...this.handleSortOrder(destinationIssues, destination.index, issues),
          };

          // for horizontal dnd
          if (sourceColumnId != destinationColumnId) {
            if (groupBy === "state") updateIssue = { ...updateIssue, state: destinationGroupByColumnId };
            if (groupBy === "priority") updateIssue = { ...updateIssue, priority: destinationGroupByColumnId };
          }
        }

        if (updateIssue && updateIssue?.id) {
          if (viewId) store?.updateIssue(workspaceSlug, projectId, updateIssue.id, updateIssue, viewId);
          else store?.updateIssue(workspaceSlug, projectId, updateIssue.id, updateIssue);
        }
      }
    }
  };
}