import React from "react"; // swr import { mutate } from "swr"; // components import { ViewDueDateSelect, ViewStartDateSelect } from "components/issues"; import { MembersSelect, PrioritySelect } from "components/project"; import { StateSelect } from "components/states"; // hooks import useIssuesProperties from "hooks/use-issue-properties"; // types import { ICurrentUserResponse, IIssue, IState } from "types"; // fetch-keys import { SUB_ISSUES } from "constants/fetch-keys"; // services import issuesService from "services/issues.service"; import trackEventServices from "services/track-event.service"; export interface IIssueProperty { workspaceSlug: string; projectId: string; parentIssue: IIssue; issue: IIssue; user: ICurrentUserResponse | undefined; editable: boolean; } export const IssueProperty: React.FC = ({ workspaceSlug, projectId, parentIssue, issue, user, editable, }) => { const [properties] = useIssuesProperties(workspaceSlug, projectId); const handlePriorityChange = (data: any) => { partialUpdateIssue({ priority: data }); trackEventServices.trackIssuePartialPropertyUpdateEvent( { workspaceSlug, workspaceId: issue.workspace, projectId: issue.project_detail.id, projectIdentifier: issue.project_detail.identifier, projectName: issue.project_detail.name, issueId: issue.id, }, "ISSUE_PROPERTY_UPDATE_PRIORITY", user ); }; const handleStateChange = (data: string, states: IState[] | undefined) => { const oldState = states?.find((s) => s.id === issue.state); const newState = states?.find((s) => s.id === data); partialUpdateIssue({ state: data, state_detail: newState, }); trackEventServices.trackIssuePartialPropertyUpdateEvent( { workspaceSlug, workspaceId: issue.workspace, projectId: issue.project_detail.id, projectIdentifier: issue.project_detail.identifier, projectName: issue.project_detail.name, issueId: issue.id, }, "ISSUE_PROPERTY_UPDATE_STATE", user ); if (oldState?.group !== "completed" && newState?.group !== "completed") { trackEventServices.trackIssueMarkedAsDoneEvent( { workspaceSlug: issue.workspace_detail.slug, workspaceId: issue.workspace_detail.id, projectId: issue.project_detail.id, projectIdentifier: issue.project_detail.identifier, projectName: issue.project_detail.name, issueId: issue.id, }, user ); } }; const handleAssigneeChange = (data: any) => { const newData = issue.assignees ?? []; if (newData.includes(data)) newData.splice(newData.indexOf(data), 1); else newData.push(data); partialUpdateIssue({ assignees_list: data }); trackEventServices.trackIssuePartialPropertyUpdateEvent( { workspaceSlug, workspaceId: issue.workspace, projectId: issue.project_detail.id, projectIdentifier: issue.project_detail.identifier, projectName: issue.project_detail.name, issueId: issue.id, }, "ISSUE_PROPERTY_UPDATE_ASSIGNEE", user ); }; 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 issuesService.patchIssue( workspaceSlug as string, issue.project, issue.id, data, user ); 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 (
{properties.priority && (
)} {properties.state && (
)} {properties.start_date && issue.start_date && (
)} {properties.due_date && issue.target_date && (
)} {properties.assignee && (
)}
); };