From 53e7da08e489e5781ec453920b356af1ae01c452 Mon Sep 17 00:00:00 2001 From: Dakshesh Jain <65905942+dakshesh14@users.noreply.github.com> Date: Wed, 8 Nov 2023 12:28:02 +0530 Subject: [PATCH] fix: quick add not working for labels & assignee (#2689) * fix: quick add not working for labels & assignee * fix: build error on spreadsheet view --- .../calendar/inline-create-issue-form.tsx | 40 +-------- .../gantt/inline-create-issue-form.tsx | 4 +- .../kanban/inline-create-issue-form.tsx | 9 +- .../list/inline-create-issue-form.tsx | 12 +-- .../spreadsheet/inline-create-issue-form.tsx | 12 +-- web/constants/issue.ts | 73 --------------- web/helpers/issue.helper.ts | 90 ++++++++++++++++++- 7 files changed, 106 insertions(+), 134 deletions(-) diff --git a/web/components/issues/issue-layouts/calendar/inline-create-issue-form.tsx b/web/components/issues/issue-layouts/calendar/inline-create-issue-form.tsx index deef5f1bc..ddab04b0a 100644 --- a/web/components/issues/issue-layouts/calendar/inline-create-issue-form.tsx +++ b/web/components/issues/issue-layouts/calendar/inline-create-issue-form.tsx @@ -1,57 +1,27 @@ import { useEffect, useRef, useState } from "react"; import { useRouter } from "next/router"; import { useForm } from "react-hook-form"; - -// store import { observer } from "mobx-react-lite"; +// store import { useMobxStore } from "lib/mobx/store-provider"; - // hooks import useToast from "hooks/use-toast"; import useKeypress from "hooks/use-keypress"; import useProjectDetails from "hooks/use-project-details"; import useOutsideClickDetector from "hooks/use-outside-click-detector"; - -// constants -import { createIssuePayload } from "constants/issue"; - +// helpers +import { createIssuePayload } from "helpers/issue.helper"; // icons import { PlusIcon } from "lucide-react"; - // types import { IIssue } from "types"; type Props = { groupId?: string; - dependencies?: any[]; prePopulatedData?: Partial; onSuccess?: (data: IIssue) => Promise | void; }; -const useCheckIfThereIsSpaceOnRight = (ref: React.RefObject, deps: any[]) => { - const [isThereSpaceOnRight, setIsThereSpaceOnRight] = useState(true); - - const router = useRouter(); - const { moduleId, cycleId, viewId } = router.query; - - const container = document.getElementById(`calendar-view-${cycleId ?? moduleId ?? viewId}`); - - useEffect(() => { - if (!ref.current) return; - - const { right } = ref.current.getBoundingClientRect(); - - const width = right; - - const innerWidth = container?.getBoundingClientRect().width ?? window.innerWidth; - - if (width > innerWidth) setIsThereSpaceOnRight(false); - else setIsThereSpaceOnRight(true); - }, [ref, deps, container]); - - return isThereSpaceOnRight; -}; - const defaultValues: Partial = { name: "", }; @@ -80,7 +50,7 @@ const Inputs = (props: any) => { }; export const CalendarInlineCreateIssueForm: React.FC = observer((props) => { - const { prePopulatedData, dependencies = [], groupId } = props; + const { prePopulatedData, groupId } = props; // router const router = useRouter(); @@ -135,8 +105,6 @@ export const CalendarInlineCreateIssueForm: React.FC = observer((props) = }); }, [errors, setToastAlert]); - const isSpaceOnRight = useCheckIfThereIsSpaceOnRight(ref, dependencies); - const onSubmitHandler = async (formData: IIssue) => { if (isSubmitting || !workspaceSlug || !projectId) return; diff --git a/web/components/issues/issue-layouts/gantt/inline-create-issue-form.tsx b/web/components/issues/issue-layouts/gantt/inline-create-issue-form.tsx index 8ce451e2b..0c87e6950 100644 --- a/web/components/issues/issue-layouts/gantt/inline-create-issue-form.tsx +++ b/web/components/issues/issue-layouts/gantt/inline-create-issue-form.tsx @@ -14,8 +14,8 @@ import useOutsideClickDetector from "hooks/use-outside-click-detector"; import { renderDateFormat } from "helpers/date-time.helper"; // types import { IIssue } from "types"; -// constants -import { createIssuePayload } from "constants/issue"; +// helpers +import { createIssuePayload } from "helpers/issue.helper"; type Props = { prePopulatedData?: Partial; diff --git a/web/components/issues/issue-layouts/kanban/inline-create-issue-form.tsx b/web/components/issues/issue-layouts/kanban/inline-create-issue-form.tsx index 750606ebb..ad7b9362e 100644 --- a/web/components/issues/issue-layouts/kanban/inline-create-issue-form.tsx +++ b/web/components/issues/issue-layouts/kanban/inline-create-issue-form.tsx @@ -2,19 +2,16 @@ import { useEffect, useState, useRef } from "react"; import { useRouter } from "next/router"; import { useForm } from "react-hook-form"; import { PlusIcon } from "lucide-react"; -// store import { observer } from "mobx-react-lite"; +// store import { useMobxStore } from "lib/mobx/store-provider"; - // hooks import useToast from "hooks/use-toast"; import useKeypress from "hooks/use-keypress"; import useProjectDetails from "hooks/use-project-details"; import useOutsideClickDetector from "hooks/use-outside-click-detector"; - -// constants -import { createIssuePayload } from "constants/issue"; - +// helpers +import { createIssuePayload } from "helpers/issue.helper"; // types import { IIssue } from "types"; diff --git a/web/components/issues/issue-layouts/list/inline-create-issue-form.tsx b/web/components/issues/issue-layouts/list/inline-create-issue-form.tsx index effc96acb..813e25d0a 100644 --- a/web/components/issues/issue-layouts/list/inline-create-issue-form.tsx +++ b/web/components/issues/issue-layouts/list/inline-create-issue-form.tsx @@ -1,23 +1,19 @@ import { useEffect, useState, useRef } from "react"; import { useRouter } from "next/router"; import { useForm } from "react-hook-form"; - +import { observer } from "mobx-react-lite"; +import { PlusIcon } from "lucide-react"; // hooks import useToast from "hooks/use-toast"; import useKeypress from "hooks/use-keypress"; import useProjectDetails from "hooks/use-project-details"; import useOutsideClickDetector from "hooks/use-outside-click-detector"; - // store -import { observer } from "mobx-react-lite"; import { useMobxStore } from "lib/mobx/store-provider"; - -// constants -import { createIssuePayload } from "constants/issue"; - +// helpers +import { createIssuePayload } from "helpers/issue.helper"; // types import { IIssue } from "types"; -import { PlusIcon } from "lucide-react"; type Props = { groupId?: string; diff --git a/web/components/issues/issue-layouts/spreadsheet/inline-create-issue-form.tsx b/web/components/issues/issue-layouts/spreadsheet/inline-create-issue-form.tsx index 269ad5538..126d44498 100644 --- a/web/components/issues/issue-layouts/spreadsheet/inline-create-issue-form.tsx +++ b/web/components/issues/issue-layouts/spreadsheet/inline-create-issue-form.tsx @@ -1,23 +1,19 @@ import { useEffect, useState, useRef } from "react"; import { useRouter } from "next/router"; import { useForm } from "react-hook-form"; - +import { observer } from "mobx-react-lite"; +import { PlusIcon } from "lucide-react"; // hooks import useToast from "hooks/use-toast"; import useKeypress from "hooks/use-keypress"; import useProjectDetails from "hooks/use-project-details"; import useOutsideClickDetector from "hooks/use-outside-click-detector"; - // store -import { observer } from "mobx-react-lite"; import { useMobxStore } from "lib/mobx/store-provider"; - -// constants -import { createIssuePayload } from "constants/issue"; - +// helpers +import { createIssuePayload } from "helpers/issue.helper"; // types import { IIssue } from "types"; -import { PlusIcon } from "lucide-react"; type Props = { groupId?: string; diff --git a/web/constants/issue.ts b/web/constants/issue.ts index 144cad190..5ba0f48a0 100644 --- a/web/constants/issue.ts +++ b/web/constants/issue.ts @@ -1,4 +1,3 @@ -import { v4 as uuidv4 } from "uuid"; // icons import { Calendar, GanttChartSquare, Kanban, List, Sheet } from "lucide-react"; // types @@ -12,9 +11,6 @@ import { TIssuePriorities, TIssueTypeFilters, TStateGroups, - IIssue, - IProject, - IWorkspace, } from "types"; export const ISSUE_PRIORITIES: { @@ -420,72 +416,3 @@ export const groupReactionEmojis = (reactions: any) => { return _groupedEmojis; }; - -/** - * - * @param workspaceDetail workspace detail to be added in the issue payload - * @param projectDetail project detail 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: ( - workspaceDetail: IWorkspace, - projectDetail: IProject, - formData: Partial -) => IIssue = (workspaceDetail: IWorkspace, projectDetail: IProject, formData: Partial) => { - const payload = { - archived_at: null, - assignees: [], - assignee_details: [], - attachment_count: 0, - attachments: [], - issue_relations: [], - related_issues: [], - bridge_id: null, - completed_at: new Date(), - created_at: "", - created_by: "", - cycle: null, - cycle_id: null, - cycle_detail: null, - description: {}, - description_html: "", - description_stripped: "", - estimate_point: null, - issue_cycle: null, - issue_link: [], - issue_module: null, - labels: [], - label_details: [], - is_draft: false, - links_list: [], - link_count: 0, - module: null, - module_id: null, - name: "", - parent: null, - parent_detail: null, - priority: "none", - project: projectDetail.id, - project_detail: projectDetail, - sequence_id: 0, - sort_order: 0, - sprints: null, - start_date: null, - state: projectDetail.default_state, - state_detail: {} as any, - sub_issues_count: 0, - target_date: null, - updated_at: "", - updated_by: "", - workspace: workspaceDetail.id, - workspace_detail: workspaceDetail, - id: uuidv4(), - tempId: uuidv4(), - // to be overridden by the form data - ...formData, - } as IIssue; - - return payload; -}; diff --git a/web/helpers/issue.helper.ts b/web/helpers/issue.helper.ts index 6f4381dec..39424c76e 100644 --- a/web/helpers/issue.helper.ts +++ b/web/helpers/issue.helper.ts @@ -1,7 +1,16 @@ +import { v4 as uuidv4 } from "uuid"; // helpers import { orderArrayBy } from "helpers/array.helper"; // types -import { IIssue, TIssueGroupByOptions, TIssueLayouts, TIssueOrderByOptions, TIssueParams } from "types"; +import { + IIssue, + TIssueGroupByOptions, + TIssueLayouts, + TIssueOrderByOptions, + TIssueParams, + IProject, + IWorkspace, +} from "types"; // constants import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue"; @@ -109,3 +118,82 @@ export const handleIssueQueryParamsByLayout = ( 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 workspaceDetail workspace detail to be added in the issue payload + * @param projectDetail project detail 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: ( + workspaceDetail: IWorkspace, + projectDetail: IProject, + formData: Partial +) => IIssue = (workspaceDetail: IWorkspace, projectDetail: IProject, formData: Partial) => { + const payload = { + archived_at: null, + assignee_details: [], + attachment_count: 0, + attachments: [], + issue_relations: [], + related_issues: [], + bridge_id: null, + completed_at: new Date(), + created_at: "", + created_by: "", + cycle: null, + cycle_id: null, + cycle_detail: null, + description: {}, + description_html: "", + description_stripped: "", + estimate_point: null, + issue_cycle: null, + issue_link: [], + issue_module: null, + label_details: [], + is_draft: false, + links_list: [], + link_count: 0, + module: null, + module_id: null, + name: "", + parent: null, + parent_detail: null, + priority: "none", + project: projectDetail.id, + project_detail: projectDetail, + sequence_id: 0, + sort_order: 0, + sprints: null, + start_date: null, + state: projectDetail.default_state, + state_detail: {} as any, + sub_issues_count: 0, + target_date: null, + updated_at: "", + updated_by: "", + workspace: workspaceDetail.id, + workspace_detail: workspaceDetail, + id: uuidv4(), + tempId: uuidv4(), + // to be overridden by the form data + ...formData, + assignees: Array.isArray(formData.assignees) + ? formData.assignees + : formData.assignees && formData.assignees !== "none" && formData.assignees !== null + ? [formData.assignees] + : [], + labels: Array.isArray(formData.labels) + ? formData.labels + : formData.labels && formData.labels !== "none" && formData.labels !== null + ? [formData.labels] + : [], + } as IIssue; + + return payload; +};