import { v4 as uuidv4 } from "uuid"; import differenceInCalendarDays from "date-fns/differenceInCalendarDays"; // helpers import { orderArrayBy } from "helpers/array.helper"; // types import { TIssue, TIssueGroupByOptions, TIssueLayouts, TIssueOrderByOptions, TIssueParams, TStateGroups, } from "@plane/types"; import { IGanttBlock } from "components/gantt-chart"; // constants import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue"; import { STATE_GROUPS } from "constants/state"; type THandleIssuesMutation = ( formData: Partial, oldGroupTitle: string, selectedGroupBy: TIssueGroupByOptions, issueIndex: number, orderBy: TIssueOrderByOptions, prevData?: | { [key: string]: TIssue[]; } | TIssue[] ) => | { [key: string]: TIssue[]; } | TIssue[] | undefined; export const handleIssuesMutation: THandleIssuesMutation = ( formData, oldGroupTitle, selectedGroupBy, issueIndex, orderBy, prevData ) => { if (!prevData) return prevData; if (Array.isArray(prevData)) { const updatedIssue = { ...prevData[issueIndex], ...formData, }; prevData.splice(issueIndex, 1, updatedIssue); return [...prevData]; } else { const oldGroup = prevData[oldGroupTitle ?? ""] ?? []; let newGroup: TIssue[] = []; if (selectedGroupBy === "priority") newGroup = prevData[formData.priority ?? ""] ?? []; else if (selectedGroupBy === "state") newGroup = prevData[formData.state_id ?? ""] ?? []; const updatedIssue = { ...oldGroup[issueIndex], ...formData, }; if (selectedGroupBy !== Object.keys(formData)[0]) return { ...prevData, [oldGroupTitle ?? ""]: orderArrayBy( oldGroup.map((i) => (i.id === updatedIssue.id ? updatedIssue : i)), orderBy ), }; const groupThatIsUpdated = selectedGroupBy === "priority" ? formData.priority : formData.state_id; return { ...prevData, [oldGroupTitle ?? ""]: orderArrayBy( oldGroup.filter((i) => i.id !== updatedIssue.id), orderBy ), [groupThatIsUpdated ?? ""]: orderArrayBy([...newGroup, updatedIssue], orderBy), }; } }; export const handleIssueQueryParamsByLayout = ( layout: TIssueLayouts | undefined, viewType: "my_issues" | "issues" | "profile_issues" | "archived_issues" | "draft_issues" ): TIssueParams[] | null => { const queryParams: TIssueParams[] = []; if (!layout) return null; const layoutOptions = ISSUE_DISPLAY_FILTERS_BY_LAYOUT[viewType][layout]; // add filters query params layoutOptions.filters.forEach((option) => { queryParams.push(option); }); // add display filters query params Object.keys(layoutOptions.display_filters).forEach((option) => { queryParams.push(option as TIssueParams); }); // add extra options query params if (layoutOptions.extra_options.access) { layoutOptions.extra_options.values.forEach((option) => { queryParams.push(option); }); } return queryParams; }; /** * * @description create a full issue payload with some default values. This function also parse the form field * like assignees, labels, etc. and add them to the payload * @param projectId project id to be added in the issue payload * @param formData partial issue data from the form. This will override the default values * @returns full issue payload with some default values */ export const createIssuePayload: (projectId: string, formData: Partial) => TIssue = ( projectId: string, formData: Partial ) => { const payload: TIssue = { id: uuidv4(), project_id: projectId, priority: "none", // tempId is used for optimistic updates. It is not a part of the API response. tempId: uuidv4(), // to be overridden by the form data ...formData, } as TIssue; return payload; }; /** * @description check if the issue due date should be highlighted * @param date * @param stateGroup * @returns boolean */ export const shouldHighlightIssueDueDate = ( date: string | Date | null, stateGroup: TStateGroups | undefined ): boolean => { if (!date || !stateGroup) return false; // if the issue is completed or cancelled, don't highlight the due date if ([STATE_GROUPS.completed.key, STATE_GROUPS.cancelled.key].includes(stateGroup)) return false; const parsedDate = new Date(date); const targetDateDistance = differenceInCalendarDays(parsedDate, new Date()); // if the issue is overdue, highlight the due date return targetDateDistance <= 0; }; export const renderIssueBlocksStructure = (blocks: TIssue[]): IGanttBlock[] => blocks?.map((block) => ({ data: block, id: block.id, sort_order: block.sort_order, start_date: block.start_date ? new Date(block.start_date) : null, target_date: block.target_date ? new Date(block.target_date) : null, }));