plane/web/components/issues/sidebar-select/cycle.tsx
rahulramesha 91cb15c2e3 fix: bugs related to issues (#2995)
* hide properties in list and kanban with 0 or nil values

* module and cycle mutation from peek overlay

* fix peek over view title change while switching

* fix create issue fetching

* fix build errors by mutating the values as well
2023-12-07 19:59:35 +05:30

134 lines
4.4 KiB
TypeScript

import React, { useState } from "react";
import { useRouter } from "next/router";
import useSWR, { mutate } from "swr";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// services
import { CycleService } from "services/cycle.service";
// ui
import { ContrastIcon, CustomSearchSelect, Spinner, Tooltip } from "@plane/ui";
// types
import { IIssue } from "types";
// fetch-keys
import { CYCLE_ISSUES, INCOMPLETE_CYCLES_LIST, ISSUE_DETAILS } from "constants/fetch-keys";
type Props = {
issueDetail: IIssue | undefined;
handleCycleChange?: (cycleId: string) => void;
disabled?: boolean;
handleIssueUpdate?: () => void;
};
// services
const cycleService = new CycleService();
export const SidebarCycleSelect: React.FC<Props> = (props) => {
const { issueDetail, disabled = false, handleIssueUpdate, handleCycleChange } = props;
// router
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
// mobx store
const {
cycleIssues: { removeIssueFromCycle, addIssueToCycle },
} = useMobxStore();
const [isUpdating, setIsUpdating] = useState(false);
const { data: incompleteCycles } = useSWR(
workspaceSlug && projectId ? INCOMPLETE_CYCLES_LIST(projectId as string) : null,
workspaceSlug && projectId
? () => cycleService.getCyclesWithParams(workspaceSlug as string, projectId as string, "incomplete")
: null
);
const handleCycleStoreChange = async (cycleId: string) => {
if (!workspaceSlug || !issueDetail || !cycleId) return;
setIsUpdating(true);
await addIssueToCycle(workspaceSlug.toString(), cycleId, [issueDetail.id], false, projectId?.toString())
.then(async () => {
handleIssueUpdate && (await handleIssueUpdate());
})
.finally(() => {
setIsUpdating(false);
});
};
const handleRemoveIssueFromCycle = (bridgeId: string, cycleId: string) => {
if (!workspaceSlug || !projectId || !issueDetail) return;
setIsUpdating(true);
removeIssueFromCycle(workspaceSlug.toString(), projectId.toString(), cycleId, issueDetail.id, bridgeId)
.then(async () => {
handleIssueUpdate && (await handleIssueUpdate());
mutate(ISSUE_DETAILS(issueDetail.id));
mutate(CYCLE_ISSUES(cycleId));
})
.catch((e) => {
console.log(e);
})
.finally(() => {
setIsUpdating(false);
});
};
const options = incompleteCycles?.map((cycle) => ({
value: cycle.id,
query: cycle.name,
content: (
<div className="flex items-center gap-1.5 truncate">
<span className="flex justify-center items-center flex-shrink-0 w-3.5 h-3.5">
<ContrastIcon />
</span>
<span className="truncate flex-grow">{cycle.name}</span>
</div>
),
}));
const issueCycle = issueDetail?.issue_cycle;
const disableSelect = disabled || isUpdating;
return (
<div className="flex items-center gap-1">
<CustomSearchSelect
value={issueCycle?.cycle_detail.id}
onChange={(value: any) => {
value === issueCycle?.cycle_detail.id
? handleRemoveIssueFromCycle(issueCycle?.id ?? "", issueCycle?.cycle ?? "")
: handleCycleChange
? handleCycleChange(value)
: handleCycleStoreChange(value);
}}
options={options}
customButton={
<div>
<Tooltip position="left" tooltipContent={`${issueCycle ? issueCycle.cycle_detail.name : "No cycle"}`}>
<button
type="button"
className={`bg-custom-background-80 text-xs rounded px-2.5 py-0.5 w-full flex items-center ${
disableSelect ? "cursor-not-allowed" : ""
} max-w-[10rem]`}
>
<span
className={`flex items-center gap-1.5 truncate ${
issueCycle ? "text-custom-text-100" : "text-custom-text-200"
}`}
>
<span className="flex-shrink-0">{issueCycle && <ContrastIcon className="h-3.5 w-3.5" />}</span>
<span className="truncate">{issueCycle ? issueCycle.cycle_detail.name : "No cycle"}</span>
</span>
</button>
</Tooltip>
</div>
}
width="max-w-[10rem]"
noChevron
disabled={disableSelect}
/>
{isUpdating && <Spinner className="w-4 h-4" />}
</div>
);
};