import React from "react"; import { observer } from "mobx-react-lite"; import { mutate } from "swr"; // mobx store import { useMobxStore } from "lib/mobx/store-provider"; // services import { IssueService } from "services/issue"; // components import { ViewDueDateSelect, ViewStartDateSelect } from "components/issues"; import { PrioritySelect } from "components/project"; // types import { IUser, IIssue, IState } from "types"; // fetch-keys import { SUB_ISSUES } from "constants/fetch-keys"; import { IssuePropertyAssignee, IssuePropertyState } from "../issue-layouts/properties"; export interface IIssueProperty { workspaceSlug: string; parentIssue: IIssue; issue: IIssue; user: IUser | undefined; editable: boolean; } // services const issueService = new IssueService(); export const IssueProperty: React.FC = observer((props) => { const { workspaceSlug, parentIssue, issue, user, editable } = props; const { issueFilter: issueFilterStore } = useMobxStore(); const displayProperties = issueFilterStore.userDisplayProperties ?? {}; const handlePriorityChange = (data: any) => { partialUpdateIssue({ priority: data }); }; const handleStateChange = (data: IState) => { partialUpdateIssue({ state: data.id, state_detail: data, }); }; const handleAssigneeChange = (data: string[]) => { partialUpdateIssue({ assignees: data }); }; const partialUpdateIssue = async (data: Partial) => { mutate( workspaceSlug && parentIssue ? SUB_ISSUES(parentIssue.id) : null, (elements: any) => { const _elements = { ...elements }; const _issues = _elements.sub_issues.map((element: IIssue) => element.id === issue.id ? { ...element, ...data } : element ); _elements["sub_issues"] = [..._issues]; return _elements; }, false ); const issueResponse = await issueService.patchIssue(workspaceSlug as string, issue.project, issue.id, data); mutate( SUB_ISSUES(parentIssue.id), (elements: any) => { const _elements = elements.sub_issues.map((element: IIssue) => element.id === issue.id ? issueResponse : element ); elements["sub_issues"] = _elements; return elements; }, true ); }; return (
{displayProperties.priority && (
)} {displayProperties.state && (
handleStateChange(data)} disabled={false} hideDropdownArrow={true} />
)} {displayProperties.start_date && issue.start_date && (
partialUpdateIssue({ start_date: val })} disabled={!editable} />
)} {displayProperties.due_date && issue.target_date && (
{user && ( partialUpdateIssue({ target_date: val })} disabled={!editable} /> )}
)} {displayProperties.assignee && (
handleAssigneeChange(val)} disabled={false} />
)}
); });