plane/apps/app/components/estimates/single-estimate.tsx
Kunal Vishwakarma 95fe4a3831
feat: added estimates (#721)
* feat: added estimates

* chore: added estimate to issue sidebar
2023-04-06 15:09:24 +05:30

151 lines
4.9 KiB
TypeScript

import React, { useState } from "react";
// ui
import { CustomMenu, PrimaryButton } from "components/ui";
// types
import { IEstimate, IProject } from "types";
//icons
import { PencilIcon, TrashIcon, SquaresPlusIcon, ListBulletIcon } from "@heroicons/react/24/outline";
import useSWR, { mutate } from "swr";
import useToast from "hooks/use-toast";
import estimatesService from "services/estimates.service";
import projectService from "services/project.service";
import { EstimatePointsModal } from "./estimate-points-modal";
import { useRouter } from "next/router";
import { ESTIMATE_POINTS_LIST } from "constants/fetch-keys";
import { PlusIcon } from "components/icons";
interface IEstimatePoints {
key: string;
value: string;
}
type Props = {
estimate: IEstimate;
editEstimate: (estimate: IEstimate) => void;
handleEstimateDelete: (estimateId: string) => void;
activeEstimate: IEstimate | null;
setActiveEstimate: React.Dispatch<React.SetStateAction<IEstimate | null>>;
};
export const SingleEstimate: React.FC<Props> = ({
estimate,
editEstimate,
handleEstimateDelete,
activeEstimate,
setActiveEstimate,
}) => {
const [isEstimatePointsModalOpen, setIsEstimatePointsModalOpen] = useState(false);
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
const { setToastAlert } = useToast();
const { data: estimatePoints } = useSWR(
workspaceSlug && projectId ? ESTIMATE_POINTS_LIST(estimate.id) : null,
workspaceSlug && projectId
? () =>
estimatesService.getEstimatesPointsList(
workspaceSlug as string,
projectId as string,
estimate.id
)
: null
);
const handleActiveEstimate = async () => {
if (!workspaceSlug || !projectId || !estimate) return;
const payload: Partial<IProject> = {
estimate: estimate.id,
};
setActiveEstimate(estimate);
await projectService
.updateProject(workspaceSlug as string, projectId as string, payload)
.catch(() => {
setToastAlert({
type: "error",
title: "Error!",
message: "Estimate points could not be used. Please try again.",
});
});
};
return (
<div className="divide-y">
<EstimatePointsModal
isOpen={isEstimatePointsModalOpen}
estimate={estimate}
onClose={() => setIsEstimatePointsModalOpen(false)}
/>
<div className="gap-2 space-y-3 bg-white">
<div className="flex justify-between items-center">
<div className="items-start">
<h6 className="font-medium text-base w-[40vw] truncate">{estimate.name}</h6>
<p className="font-sm text-gray-400 font-normal text-[14px] w-[40vw] truncate">
{estimate.description}
</p>
</div>
<div className="flex items-center gap-8">
<CustomMenu ellipsis>
<CustomMenu.MenuItem onClick={handleActiveEstimate}>
<span className="flex items-center justify-start gap-2">
<SquaresPlusIcon className="h-4 w-4" />
<span>Use estimate</span>
</span>
</CustomMenu.MenuItem>
<CustomMenu.MenuItem onClick={() => setIsEstimatePointsModalOpen(true)}>
<span className="flex items-center justify-start gap-2">
<ListBulletIcon className="h-4 w-4" />
{estimatePoints?.length === 8 ? "Update points" : "Create points"}
</span>
</CustomMenu.MenuItem>
<CustomMenu.MenuItem
onClick={() => {
editEstimate(estimate);
}}
>
<span className="flex items-center justify-start gap-2">
<PencilIcon className="h-4 w-4" />
<span>Edit estimate</span>
</span>
</CustomMenu.MenuItem>
<CustomMenu.MenuItem
onClick={() => {
handleEstimateDelete(estimate.id);
}}
>
<span className="flex items-center justify-start gap-2">
<TrashIcon className="h-4 w-4" />
<span>Delete estimate</span>
</span>
</CustomMenu.MenuItem>
</CustomMenu>
</div>
</div>
{estimatePoints && estimatePoints.length > 0 ? (
<div className="flex gap-2 mt-2">
{estimatePoints.length > 0 && "Estimate points ("}
{estimatePoints.map((point, i) => (
<h6 key={point.id}>
{point.value}
{i !== estimatePoints.length - 1 && ","}{" "}
</h6>
))}
{estimatePoints.length > 0 && ")"}
</div>
) : (
<div>
<p className= " text-sm text-gray-300">No estimate points</p>
</div>
)}
</div>
</div>
);
};