chore: handle estimate update worklfow

This commit is contained in:
guru_sainath 2024-05-28 15:06:22 +05:30
parent 4fa3eda5cd
commit f362afb001
19 changed files with 450 additions and 373 deletions

View File

@ -64,9 +64,10 @@ class BulkEstimatePointEndpoint(BaseViewSet):
def create(self, request, slug, project_id):
estimate = request.data.get('estimate')
estimate_name = estimate.get("name", generate_random_name())
estimate_type = estimate.get("type", 'categories')
last_used = estimate.get("last_used", False)
estimate = Estimate.objects.create(
name=estimate_name, project_id=project_id, last_used=last_used
name=estimate_name, project_id=project_id, last_used=last_used, type=estimate_type
)
estimate_points = request.data.get("estimate_points", [])

View File

@ -31,7 +31,7 @@ export const CreateEstimateModal: FC<TCreateEstimateModal> = observer((props) =>
useEffect(() => {
if (!isOpen) {
setEstimateSystem(EEstimateSystem.POINTS);
setEstimateSystem(EEstimateSystem.CATEGORIES);
setEstimatePoints(undefined);
}
}, [isOpen]);
@ -42,6 +42,7 @@ export const CreateEstimateModal: FC<TCreateEstimateModal> = observer((props) =>
const handleCreateEstimate = async () => {
try {
if (!workspaceSlug || !projectId) return;
const validatedEstimatePoints: TEstimatePointsObject[] = [];
if ([EEstimateSystem.POINTS, EEstimateSystem.TIME].includes(estimateSystem)) {
estimatePoints?.map((estimatePoint) => {
@ -56,6 +57,7 @@ export const CreateEstimateModal: FC<TCreateEstimateModal> = observer((props) =>
if (estimatePoint.value) validatedEstimatePoints.push(estimatePoint);
});
}
if (validatedEstimatePoints.length === estimatePoints?.length) {
const payload: IEstimateFormData = {
estimate: {
@ -80,7 +82,6 @@ export const CreateEstimateModal: FC<TCreateEstimateModal> = observer((props) =>
});
}
} catch (error) {
console.log(error);
setToast({
type: TOAST_TYPE.ERROR,
title: "Error!",

View File

@ -18,7 +18,7 @@ export const EstimateCreateStageOne: FC<TEstimateCreateStageOne> = (props) => {
if (!currentEstimateSystem) return <></>;
return (
<div className="space-y-2">
<div className="space-y-3">
<div className="space-y-4 sm:flex sm:items-center sm:space-x-10 sm:space-y-0 gap-2 mb-2">
<RadioInput
options={Object.keys(ESTIMATE_SYSTEMS).map((system) => {
@ -36,7 +36,8 @@ export const EstimateCreateStageOne: FC<TEstimateCreateStageOne> = (props) => {
className="mb-4"
/>
</div>
<div className="space-y-3">
<div className="space-y-2">
<div className="text-sm font-medium text-custom-text-200">Start from scratch</div>
<button
className="border border-custom-border-200 rounded-md p-2 text-left flex-1 w-full block"
@ -47,7 +48,9 @@ export const EstimateCreateStageOne: FC<TEstimateCreateStageOne> = (props) => {
Add your own <span className="lowercase">{currentEstimateSystem.name}</span> from scratch
</p>
</button>
</div>
<div className="space-y-2">
<div className="text-sm font-medium text-custom-text-200">Choose a template</div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
{Object.keys(currentEstimateSystem.templates).map((name) =>

View File

@ -1,100 +0,0 @@
import { FC, useEffect, useState } from "react";
import { observer } from "mobx-react";
import { Check, X } from "lucide-react";
import { Spinner } from "@plane/ui";
// constants
import { EEstimateSystem } from "@/constants/estimates";
// hooks
import { useEstimate, useEstimatePoint } from "@/hooks/store";
type TEstimatePointDelete = {
workspaceSlug: string;
projectId: string;
estimateId: string;
estimatePointId: string | undefined;
};
export const EstimatePointDelete: FC<TEstimatePointDelete> = observer((props) => {
const { workspaceSlug, projectId, estimateId, estimatePointId } = props;
// hooks
const { asJson: estimate, estimatePointIds } = useEstimate(estimateId);
const { asJson: estimatePoint, updateEstimatePoint } = useEstimatePoint(estimateId, estimatePointId);
// states
const [loader, setLoader] = useState(false);
const [estimateValue, setEstimateValue] = useState<string | undefined>(undefined);
useEffect(() => {
if (estimateValue === undefined) setEstimateValue(estimatePoint?.value || "");
}, [estimateValue, estimatePoint]);
const handleCreate = async () => {
if (estimatePointId) {
if (!workspaceSlug || !projectId || !projectId || !estimatePointIds) return;
try {
const estimateType: EEstimateSystem | undefined = estimate?.type;
let isEstimateValid = false;
if (estimateType && [(EEstimateSystem.TIME, EEstimateSystem.POINTS)].includes(estimateType)) {
if (estimateValue && Number(estimateValue) && Number(estimateValue) >= 0) {
isEstimateValid = true;
}
} else if (estimateType && estimateType === EEstimateSystem.CATEGORIES) {
if (estimateValue && estimateValue.length > 0) {
isEstimateValid = true;
}
}
if (isEstimateValid) {
setLoader(true);
const payload = {
key: estimatePointIds?.length + 1,
value: estimateValue,
};
await updateEstimatePoint(workspaceSlug, projectId, payload);
setLoader(false);
handleClose();
} else {
console.log("please enter a valid estimate value");
}
} catch {
setLoader(false);
console.log("something went wrong. please try again later");
}
} else {
}
};
const handleClose = () => {
setEstimateValue("");
};
return (
<div className="relative flex items-center gap-2">
<div className="w-full border border-custom-border-200 rounded">
<input
type="text"
value={estimateValue}
onChange={(e) => setEstimateValue(e.target.value)}
className="border-none focus:ring-0 focus:border-0 focus:outline-none p-2.5 w-full bg-transparent"
/>
</div>
{loader ? (
<div className="w-6 h-6 flex-shrink-0 relative flex justify-center items-center rota">
<Spinner className="w-4 h-4" />
</div>
) : (
<div
className="rounded-sm w-6 h-6 flex-shrink-0 relative flex justify-center items-center hover:bg-custom-background-80 transition-colors cursor-pointer text-green-500"
onClick={handleCreate}
>
<Check size={14} />
</div>
)}
<div
className="rounded-sm w-6 h-6 flex-shrink-0 relative flex justify-center items-center hover:bg-custom-background-80 transition-colors cursor-pointer"
onClick={handleClose}
>
<X size={14} className="text-custom-text-200" />
</div>
</div>
);
});

View File

@ -1,29 +0,0 @@
import { FC, useState } from "react";
import { observer } from "mobx-react";
import { Draggable } from "@plane/ui";
// constants
import { EEstimateUpdateStages } from "@/constants/estimates";
type TEstimatePointEditRoot = {
workspaceSlug: string;
projectId: string;
estimateId: string;
mode: EEstimateUpdateStages;
};
type TEstimatePointEditingState = "update" | "delete";
export const EstimatePointEditRoot: FC<TEstimatePointEditRoot> = observer((props) => {
// props
const { workspaceSlug, projectId, estimateId, mode } = props;
// hooks
// states
const [editingState, setEditingState] = useState<TEstimatePointEditingState | undefined>(undefined);
const [estimateEditLoader, setEstimateEditLoader] = useState(false);
const [deletedEstimateValue, setDeletedEstimateValue] = useState<string | undefined>(undefined);
const [isEstimateEditing, setIsEstimateEditing] = useState(false);
const [isEstimateDeleting, setIsEstimateDeleting] = useState(false);
return <Draggable data={item}></Draggable>;
});

View File

@ -1,9 +1,11 @@
import { FC, useState } from "react";
import { observer } from "mobx-react";
import { Check, X } from "lucide-react";
import { Spinner } from "@plane/ui";
import { Check, Info, X } from "lucide-react";
import { Spinner, Tooltip } from "@plane/ui";
// constants
import { EEstimateSystem } from "@/constants/estimates";
// helpers
import { cn } from "@/helpers/common.helper";
// hooks
import { useEstimate } from "@/hooks/store";
@ -11,66 +13,89 @@ type TEstimatePointCreate = {
workspaceSlug: string;
projectId: string;
estimateId: string;
estimatePointId: string | undefined;
callback: () => void;
};
export const EstimatePointCreate: FC<TEstimatePointCreate> = observer((props) => {
const { workspaceSlug, projectId, estimateId, estimatePointId } = props;
const { workspaceSlug, projectId, estimateId, callback } = props;
// hooks
const { asJson: estimate, estimatePointIds, creteEstimatePoint } = useEstimate(estimateId);
// states
const [loader, setLoader] = useState(false);
const [estimateValue, setEstimateValue] = useState("");
const [estimateInputValue, setEstimateInputValue] = useState("");
const [error, setError] = useState<string | undefined>(undefined);
const handleClose = () => {
setEstimateInputValue("");
callback();
};
const handleCreate = async () => {
if (estimatePointId) {
if (!workspaceSlug || !projectId || !projectId || !estimatePointIds) return;
if (!workspaceSlug || !projectId || !projectId || !estimatePointIds) return;
if (estimateInputValue)
try {
setLoader(true);
setError(undefined);
const estimateType: EEstimateSystem | undefined = estimate?.type;
let isEstimateValid = false;
if (estimateType && [(EEstimateSystem.TIME, EEstimateSystem.POINTS)].includes(estimateType)) {
if (estimateValue && Number(estimateValue) && Number(estimateValue) >= 0) {
if (estimateInputValue && Number(estimateInputValue) && Number(estimateInputValue) >= 0) {
isEstimateValid = true;
}
} else if (estimateType && estimateType === EEstimateSystem.CATEGORIES) {
if (estimateValue && estimateValue.length > 0) {
if (estimateInputValue && estimateInputValue.length > 0) {
isEstimateValid = true;
}
}
if (isEstimateValid) {
setLoader(true);
const payload = {
key: estimatePointIds?.length + 1,
value: estimateValue,
value: estimateInputValue,
};
await creteEstimatePoint(workspaceSlug, projectId, payload);
setLoader(false);
setError(undefined);
handleClose();
} else {
console.log("please enter a valid estimate value");
setLoader(false);
setError("please enter a valid estimate value");
}
} catch {
setLoader(false);
console.log("something went wrong. please try again later");
setError("something went wrong. please try again later");
}
} else {
else {
setError("Please fill the input field");
}
};
const handleClose = () => {
setEstimateValue("");
};
return (
<div className="relative flex items-center gap-2">
<div className="w-full border border-custom-border-200 rounded">
<div className="relative flex items-center gap-2 text-base">
<div
className={cn(
"relative w-full border rounded flex items-center",
error ? `border-red-500` : `border-custom-border-200`
)}
>
<input
type="text"
value={estimateValue}
onChange={(e) => setEstimateValue(e.target.value)}
value={estimateInputValue}
onChange={(e) => setEstimateInputValue(e.target.value)}
className="border-none focus:ring-0 focus:border-0 focus:outline-none p-2.5 w-full bg-transparent"
autoFocus
/>
{error && (
<>
<Tooltip tooltipContent={error} position="bottom">
<div className="flex-shrink-0 w-3.5 h-3.5 overflow-hidden mr-3 relative flex justify-center items-center text-red-500">
<Info size={14} />
</div>
</Tooltip>
</>
)}
</div>
{loader ? (
<div className="w-6 h-6 flex-shrink-0 relative flex justify-center items-center rota">

View File

@ -0,0 +1,111 @@
import { FC, useState } from "react";
import { observer } from "mobx-react";
import { Info, MoveRight, Trash2, X } from "lucide-react";
import { Select } from "@headlessui/react";
import { Spinner, Tooltip } from "@plane/ui";
// helpers
import { cn } from "@/helpers/common.helper";
// hooks
import { useEstimate, useEstimatePoint } from "@/hooks/store";
type TEstimatePointDelete = {
workspaceSlug: string;
projectId: string;
estimateId: string;
estimatePointId: string;
callback: () => void;
};
export const EstimatePointDelete: FC<TEstimatePointDelete> = observer((props) => {
const { workspaceSlug, projectId, estimateId, estimatePointId, callback } = props;
// hooks
const { asJson: estimate, deleteEstimatePoint } = useEstimate(estimateId);
const { asJson: estimatePoint } = useEstimatePoint(estimateId, estimatePointId);
// states
const [loader, setLoader] = useState(false);
const [estimateInputValue, setEstimateInputValue] = useState<string | undefined>(undefined);
const [error, setError] = useState<string | undefined>(undefined);
const handleClose = () => {
setEstimateInputValue("");
callback();
};
const handleCreate = async () => {
if (!workspaceSlug || !projectId || !projectId) return;
try {
setLoader(true);
setError(undefined);
await deleteEstimatePoint(workspaceSlug, projectId, estimateId, estimateInputValue);
setLoader(false);
setError(undefined);
handleClose();
} catch {
setLoader(false);
setError("something went wrong. please try again later");
}
};
// derived values
const selectDropdownOptions =
estimate && estimate?.points ? estimate?.points.filter((point) => point.id !== estimatePointId) : [];
return (
<div className="relative flex items-center gap-2 text-base">
<div className="flex-grow relative flex items-center gap-3">
<div className="w-full border border-custom-border-200 rounded p-2.5 bg-custom-background-90">
{estimatePoint?.value}
</div>
<div className="relative flex justify-center items-center gap-2 whitespace-nowrap">
Mark as <MoveRight size={14} />
</div>
<div
className={cn(
"relative w-full rounded border flex items-center gap-3 p-2.5",
error ? `border-red-500` : `border-custom-border-200`
)}
>
<Select
className="bg-transparent flex-grow focus:ring-0 focus:border-0 focus:outline-none"
value={estimateInputValue}
onChange={(e) => setEstimateInputValue(e.target.value)}
>
<option value={undefined}>None</option>
{selectDropdownOptions.map((option) => (
<option key={option?.id} value={option?.value}>
{option?.value}
</option>
))}
</Select>
{error && (
<>
<Tooltip tooltipContent={error} position="bottom">
<div className="flex-shrink-0 w-3.5 h-3.5 overflow-hidden relative flex justify-center items-center text-red-500">
<Info size={14} />
</div>
</Tooltip>
</>
)}
</div>
</div>
{loader ? (
<div className="w-6 h-6 flex-shrink-0 relative flex justify-center items-center rota">
<Spinner className="w-4 h-4" />
</div>
) : (
<div
className="rounded-sm w-6 h-6 flex-shrink-0 relative flex justify-center items-center hover:bg-custom-background-80 transition-colors cursor-pointer text-red-500"
onClick={handleCreate}
>
<Trash2 size={14} />
</div>
)}
<div
className="rounded-sm w-6 h-6 flex-shrink-0 relative flex justify-center items-center hover:bg-custom-background-80 transition-colors cursor-pointer"
onClick={handleClose}
>
<X size={14} className="text-custom-text-200" />
</div>
</div>
);
});

View File

@ -0,0 +1,5 @@
export * from "./root";
export * from "./preview";
export * from "./create";
export * from "./update";
export * from "./delete";

View File

@ -0,0 +1,78 @@
import { FC, useEffect, useRef, useState } from "react";
import { observer } from "mobx-react";
import { GripVertical, Pencil, Trash2 } from "lucide-react";
// components
import { EstimatePointUpdate, EstimatePointDelete } from "@/components/estimates/points";
// hooks
import { useEstimatePoint } from "@/hooks/store";
type TEstimatePointItemPreview = {
workspaceSlug: string;
projectId: string;
estimateId: string;
estimatePointId: string;
};
export const EstimatePointItemPreview: FC<TEstimatePointItemPreview> = observer((props) => {
const { workspaceSlug, projectId, estimateId, estimatePointId } = props;
// hooks
const { asJson: estimatePoint } = useEstimatePoint(estimateId, estimatePointId);
// state
const [estimatePointEditToggle, setEstimatePointEditToggle] = useState(false);
const [estimatePointDeleteToggle, setEstimatePointDeleteToggle] = useState(false);
// ref
const EstimatePointValueRef = useRef<HTMLDivElement>(null);
useEffect(() => {
if (!estimatePointEditToggle && !estimatePointDeleteToggle)
EstimatePointValueRef?.current?.addEventListener("dblclick", () => setEstimatePointEditToggle(true));
}, [estimatePointDeleteToggle, estimatePointEditToggle]);
if (!estimatePoint?.id) return <></>;
return (
<div>
{!estimatePointEditToggle && !estimatePointDeleteToggle && (
<div className="border border-custom-border-200 rounded relative flex items-center px-2.5 gap-2 text-base">
<div className="rounded-sm w-6 h-6 flex-shrink-0 relative flex justify-center items-center hover:bg-custom-background-80 transition-colors cursor-pointer">
<GripVertical size={14} className="text-custom-text-200" />
</div>
<div ref={EstimatePointValueRef} className="py-2.5 w-full">
{estimatePoint?.value}
</div>
<div
className="rounded-sm w-6 h-6 flex-shrink-0 relative flex justify-center items-center hover:bg-custom-background-80 transition-colors cursor-pointer"
onClick={() => setEstimatePointEditToggle(true)}
>
<Pencil size={14} className="text-custom-text-200" />
</div>
<div
className="rounded-sm w-6 h-6 flex-shrink-0 relative flex justify-center items-center hover:bg-custom-background-80 transition-colors cursor-pointer"
onClick={() => setEstimatePointDeleteToggle(true)}
>
<Trash2 size={14} className="text-custom-text-200" />
</div>
</div>
)}
{estimatePoint && estimatePointEditToggle && (
<EstimatePointUpdate
workspaceSlug={workspaceSlug}
projectId={projectId}
estimateId={estimateId}
estimatePointId={estimatePointId}
callback={() => setEstimatePointEditToggle(false)}
/>
)}
{estimatePoint && estimatePointDeleteToggle && (
<EstimatePointDelete
workspaceSlug={workspaceSlug}
projectId={projectId}
estimateId={estimateId}
estimatePointId={estimatePointId}
callback={() => setEstimatePointDeleteToggle(false)}
/>
)}
</div>
);
});

View File

@ -0,0 +1,84 @@
import { FC, useState } from "react";
import { observer } from "mobx-react";
import { Plus } from "lucide-react";
import { TEstimatePointsObject } from "@plane/types";
import { Button, Draggable, Sortable } from "@plane/ui";
// components
import { EstimatePointItemPreview, EstimatePointCreate } from "@/components/estimates/points";
// constants
import { EEstimateUpdateStages, maxEstimatesCount } from "@/constants/estimates";
// hooks
import { useEstimate } from "@/hooks/store";
type TEstimatePointEditRoot = {
workspaceSlug: string;
projectId: string;
estimateId: string;
mode?: EEstimateUpdateStages;
};
export const EstimatePointEditRoot: FC<TEstimatePointEditRoot> = observer((props) => {
// props
const { workspaceSlug, projectId, estimateId } = props;
// hooks
const { asJson: estimate, estimatePointIds, estimatePointById, updateEstimateSortOrder } = useEstimate(estimateId);
// states
const [estimatePointCreateToggle, setEstimatePointCreateToggle] = useState(false);
const estimatePoints: TEstimatePointsObject[] =
estimatePointIds && estimatePointIds.length > 0
? (estimatePointIds.map((estimatePointId: string) => {
const estimatePoint = estimatePointById(estimatePointId);
if (estimatePoint) return { id: estimatePointId, key: estimatePoint.key, value: estimatePoint.value };
}) as TEstimatePointsObject[])
: ([] as TEstimatePointsObject[]);
const handleDragEstimatePoints = (updatedEstimatedOrder: TEstimatePointsObject[]) => {
const updatedEstimateKeysOrder = updatedEstimatedOrder.map((item, index) => ({ ...item, key: index + 1 }));
updateEstimateSortOrder(workspaceSlug, projectId, updatedEstimateKeysOrder);
};
if (!workspaceSlug || !projectId || !estimateId) return <></>;
return (
<div className="space-y-3">
<div className="text-sm font-medium text-custom-text-200">{estimate?.type}</div>
<Sortable
data={estimatePoints}
render={(value: TEstimatePointsObject) => (
<Draggable data={value}>
{value?.id && (
<EstimatePointItemPreview
workspaceSlug={workspaceSlug}
projectId={projectId}
estimateId={estimateId}
estimatePointId={value?.id}
/>
)}
</Draggable>
)}
onChange={(data: TEstimatePointsObject[]) => handleDragEstimatePoints(data)}
keyExtractor={(item: TEstimatePointsObject) => item?.id?.toString() || item.value.toString()}
/>
{estimatePointCreateToggle && (
<EstimatePointCreate
workspaceSlug={workspaceSlug}
projectId={projectId}
estimateId={estimateId}
callback={() => setEstimatePointCreateToggle(false)}
/>
)}
{estimatePoints && estimatePoints.length <= maxEstimatesCount && (
<Button
variant="link-primary"
size="sm"
prependIcon={<Plus />}
onClick={() => setEstimatePointCreateToggle(true)}
disabled={estimatePointCreateToggle}
>
Add {estimate?.type}
</Button>
)}
</div>
);
});

View File

@ -1,9 +1,11 @@
import { FC, useEffect, useState } from "react";
import { observer } from "mobx-react";
import { Check, X } from "lucide-react";
import { Spinner } from "@plane/ui";
import { Check, Info, X } from "lucide-react";
import { Spinner, Tooltip } from "@plane/ui";
// constants
import { EEstimateSystem } from "@/constants/estimates";
// helpers
import { cn } from "@/helpers/common.helper";
// hooks
import { useEstimate, useEstimatePoint } from "@/hooks/store";
@ -11,71 +13,94 @@ type TEstimatePointUpdate = {
workspaceSlug: string;
projectId: string;
estimateId: string;
estimatePointId: string | undefined;
estimatePointId: string;
callback: () => void;
};
export const EstimatePointUpdate: FC<TEstimatePointUpdate> = observer((props) => {
const { workspaceSlug, projectId, estimateId, estimatePointId } = props;
const { workspaceSlug, projectId, estimateId, estimatePointId, callback } = props;
// hooks
const { asJson: estimate, estimatePointIds } = useEstimate(estimateId);
const { asJson: estimatePoint, updateEstimatePoint } = useEstimatePoint(estimateId, estimatePointId);
// states
const [loader, setLoader] = useState(false);
const [estimateValue, setEstimateValue] = useState<string | undefined>(undefined);
const [estimateInputValue, setEstimateInputValue] = useState<string | undefined>(undefined);
const [error, setError] = useState<string | undefined>(undefined);
useEffect(() => {
if (estimateValue === undefined) setEstimateValue(estimatePoint?.value || "");
}, [estimateValue, estimatePoint]);
if (estimateInputValue === undefined && estimatePoint) setEstimateInputValue(estimatePoint?.value || "");
}, [estimateInputValue, estimatePoint]);
const handleClose = () => {
setEstimateInputValue("");
callback();
};
const handleCreate = async () => {
if (estimatePointId) {
if (!workspaceSlug || !projectId || !projectId || !estimatePointIds) return;
if (!workspaceSlug || !projectId || !projectId || !estimatePointIds) return;
if (estimateInputValue)
try {
setLoader(true);
setError(undefined);
const estimateType: EEstimateSystem | undefined = estimate?.type;
let isEstimateValid = false;
if (estimateType && [(EEstimateSystem.TIME, EEstimateSystem.POINTS)].includes(estimateType)) {
if (estimateValue && Number(estimateValue) && Number(estimateValue) >= 0) {
if (estimateInputValue && Number(estimateInputValue) && Number(estimateInputValue) >= 0) {
isEstimateValid = true;
}
} else if (estimateType && estimateType === EEstimateSystem.CATEGORIES) {
if (estimateValue && estimateValue.length > 0) {
if (estimateInputValue && estimateInputValue.length > 0) {
isEstimateValid = true;
}
}
if (isEstimateValid) {
setLoader(true);
const payload = {
key: estimatePointIds?.length + 1,
value: estimateValue,
value: estimateInputValue,
};
await updateEstimatePoint(workspaceSlug, projectId, payload);
setLoader(false);
setError(undefined);
handleClose();
} else {
console.log("please enter a valid estimate value");
setLoader(false);
setError("please enter a valid estimate value");
}
} catch {
setLoader(false);
console.log("something went wrong. please try again later");
setError("something went wrong. please try again later");
}
} else {
else {
setError("Please fill the input field");
}
};
const handleClose = () => {
setEstimateValue("");
};
return (
<div className="relative flex items-center gap-2">
<div className="w-full border border-custom-border-200 rounded">
<div className="relative flex items-center gap-2 text-base">
<div
className={cn(
"relative w-full border rounded flex items-center",
error ? `border-red-500` : `border-custom-border-200`
)}
>
<input
type="text"
value={estimateValue}
onChange={(e) => setEstimateValue(e.target.value)}
value={estimateInputValue}
onChange={(e) => setEstimateInputValue(e.target.value)}
className="border-none focus:ring-0 focus:border-0 focus:outline-none p-2.5 w-full bg-transparent"
autoFocus
/>
{error && (
<>
<Tooltip tooltipContent={error} position="bottom">
<div className="flex-shrink-0 w-3.5 h-3.5 overflow-hidden mr-3 relative flex justify-center items-center text-red-500">
<Info size={14} />
</div>
</Tooltip>
</>
)}
</div>
{loader ? (
<div className="w-6 h-6 flex-shrink-0 relative flex justify-center items-center rota">

View File

@ -1,8 +1,4 @@
export * from "./estimate-point-item";
export * from "./inline-editable";
export * from "./edit-root";
export * from "./create";
export * from "./update";
export * from "./delete";
export * from "./edit";

View File

@ -44,6 +44,7 @@ export const EstimateRoot: FC<TEstimateRoot> = observer((props) => {
Estimates
</div>
{/* current active estimate section */}
{currentActiveEstimateId ? (
<div className="space-y-4">
{/* estimates activated deactivated section */}
@ -88,7 +89,7 @@ export const EstimateRoot: FC<TEstimateRoot> = observer((props) => {
</div>
)}
{/* modals for create and update */}
{/* CRUD modals */}
<CreateEstimateModal
workspaceSlug={workspaceSlug}
projectId={projectId}

View File

@ -1,3 +1,2 @@
export * from "./modal";
export * from "./stage-one";
export * from "./stage-two";

View File

@ -1,17 +1,11 @@
import { FC, useEffect, useMemo, useState } from "react";
import orderBy from "lodash/orderBy";
import { FC, useEffect, useState } from "react";
import { observer } from "mobx-react";
import { ChevronLeft } from "lucide-react";
import { TEstimatePointsObject, TEstimateUpdateStageKeys } from "@plane/types";
import { TEstimateUpdateStageKeys } from "@plane/types";
import { Button } from "@plane/ui";
// components
import { EModalPosition, EModalWidth, ModalCore } from "@/components/core";
import { EstimateUpdateStageOne, EstimateUpdateStageTwo } from "@/components/estimates";
// hooks
import {
useEstimate,
// useProjectEstimates
} from "@/hooks/store";
import { EstimatePointEditRoot, EstimateUpdateStageOne } from "@/components/estimates";
type TUpdateEstimateModal = {
workspaceSlug: string;
@ -24,39 +18,15 @@ type TUpdateEstimateModal = {
export const UpdateEstimateModal: FC<TUpdateEstimateModal> = observer((props) => {
// props
const { workspaceSlug, projectId, estimateId, isOpen, handleClose } = props;
// hooks
const { asJson: currentEstimate } = useEstimate(estimateId);
// states
const [estimateEditType, setEstimateEditType] = useState<TEstimateUpdateStageKeys | undefined>(undefined);
const [estimatePoints, setEstimatePoints] = useState<TEstimatePointsObject[] | undefined>(undefined);
const handleEstimateEditType = (type: TEstimateUpdateStageKeys) => {
if (currentEstimate?.points && currentEstimate?.points.length > 0) {
let estimateValidatePoints: TEstimatePointsObject[] = [];
currentEstimate?.points.map(
(point) =>
point.key && point.value && estimateValidatePoints.push({ id: point.id, key: point.key, value: point.value })
);
estimateValidatePoints = orderBy(estimateValidatePoints, ["key"], ["asc"]);
if (estimateValidatePoints.length > 0) {
setEstimateEditType(type);
setEstimatePoints(estimateValidatePoints);
}
}
};
const handleUpdatePoints = (newPoints: TEstimatePointsObject[] | undefined) => setEstimatePoints(newPoints);
const handleEstimateEditType = (type: TEstimateUpdateStageKeys) => setEstimateEditType(type);
useEffect(() => {
if (!isOpen) {
setEstimateEditType(undefined);
setEstimatePoints(undefined);
}
if (!isOpen) setEstimateEditType(undefined);
}, [isOpen]);
// derived values
const renderEstimateStepsCount = useMemo(() => (estimatePoints ? "2" : "1"), [estimatePoints]);
return (
<ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.TOP} width={EModalWidth.XXL}>
<div className="relative space-y-6 py-5">
@ -65,10 +35,7 @@ export const UpdateEstimateModal: FC<TUpdateEstimateModal> = observer((props) =>
<div className="relative flex items-center gap-1">
{estimateEditType && (
<div
onClick={() => {
setEstimateEditType(undefined);
handleUpdatePoints(undefined);
}}
onClick={() => setEstimateEditType(undefined)}
className="flex-shrink-0 cursor-pointer w-5 h-5 flex justify-center items-center"
>
<ChevronLeft className="w-4 h-4" />
@ -76,29 +43,17 @@ export const UpdateEstimateModal: FC<TUpdateEstimateModal> = observer((props) =>
)}
<div className="text-xl font-medium text-custom-text-200">Edit estimate system</div>
</div>
<div className="text-xs text-gray-400">Step {renderEstimateStepsCount}/2</div>
</div>
{/* estimate steps */}
<div className="px-5">
{!estimateEditType && <EstimateUpdateStageOne handleEstimateEditType={handleEstimateEditType} />}
{estimateEditType && estimatePoints && (
<EstimateUpdateStageTwo
workspaceSlug={workspaceSlug}
projectId={projectId}
estimate={currentEstimate}
estimateEditType={estimateEditType}
estimatePoints={estimatePoints}
handleEstimatePoints={handleUpdatePoints}
/>
)}
</div>
<div className="relative flex justify-end items-center gap-3 px-5 pt-5 border-t border-custom-border-100">
<Button variant="neutral-primary" size="sm" onClick={handleClose}>
Cancel
<Button variant="primary" size="sm" onClick={handleClose}>
Done
</Button>
</div>
<div className="px-5 pb-1">
{!estimateEditType && <EstimateUpdateStageOne handleEstimateEditType={handleEstimateEditType} />}
{estimateEditType && estimateId && (
<EstimatePointEditRoot workspaceSlug={workspaceSlug} projectId={projectId} estimateId={estimateId} />
)}
</div>
</div>
</ModalCore>
);

View File

@ -1,111 +0,0 @@
import { FC } from "react";
import cloneDeep from "lodash/cloneDeep";
import { observer } from "mobx-react";
import { Plus } from "lucide-react";
import { IEstimate, TEstimatePointsObject, TEstimateUpdateStageKeys } from "@plane/types";
import { Button, Sortable } from "@plane/ui";
// components
import { EstimatePointItem } from "@/components/estimates";
// constants
import { EEstimateUpdateStages, maxEstimatesCount } from "@/constants/estimates";
import { useEstimate } from "@/hooks/store";
type TEstimateUpdateStageTwo = {
workspaceSlug: string;
projectId: string;
estimate: IEstimate;
estimateEditType: TEstimateUpdateStageKeys | undefined;
estimatePoints: TEstimatePointsObject[];
handleEstimatePoints: (value: TEstimatePointsObject[]) => void;
};
export const EstimateUpdateStageTwo: FC<TEstimateUpdateStageTwo> = observer((props) => {
const { workspaceSlug, projectId, estimate, estimateEditType, estimatePoints, handleEstimatePoints } = props;
// hooks
const { updateEstimate: updateEstimateRequest } = useEstimate(estimate?.id);
const currentEstimateSystem = estimate || undefined;
const addNewEstimationPoint = () => {
const currentEstimationPoints = cloneDeep(estimatePoints);
const newEstimationPoint: TEstimatePointsObject = {
key: currentEstimationPoints.length + 1,
value: "",
};
handleEstimatePoints([...currentEstimationPoints, newEstimationPoint]);
};
const editEstimationPoint = (index: number, value: string) => {
const newEstimationPoints = estimatePoints;
newEstimationPoints[index].value = value;
handleEstimatePoints(newEstimationPoints);
};
const deleteEstimationPoint = (index: number) => {
let newEstimationPoints = cloneDeep(estimatePoints);
newEstimationPoints.splice(index, 1);
newEstimationPoints = newEstimationPoints.map((item, index) => ({
...item,
key: index + 1,
}));
handleEstimatePoints(newEstimationPoints);
};
const replaceEstimateItem = (index: number, value: TEstimatePointsObject) => {
const newEstimationPoints = cloneDeep(estimatePoints);
newEstimationPoints[index].id = value.id;
newEstimationPoints[index].key = value.key;
newEstimationPoints[index].value = value.value;
handleEstimatePoints(newEstimationPoints);
};
const updatedSortedKeys = (updatedEstimatePoints: TEstimatePointsObject[]) => {
try {
const sortedEstimatePoints = cloneDeep(updatedEstimatePoints).map((item, index) => ({
...item,
key: index + 1,
})) as TEstimatePointsObject[];
handleEstimatePoints(sortedEstimatePoints);
updateEstimateRequest(workspaceSlug, projectId, { estimate_points: sortedEstimatePoints });
} catch (error) {
console.log(error);
}
};
if (!estimateEditType) return <></>;
return (
<div className="space-y-1">
<div className="text-sm font-medium text-custom-text-300">
{estimateEditType === EEstimateUpdateStages.SWITCH ? "Estimate type switching" : currentEstimateSystem?.type}
</div>
<div className="space-y-3">
<Sortable
data={estimatePoints}
render={(value: TEstimatePointsObject, index: number) => (
<EstimatePointItem
workspaceSlug={workspaceSlug}
projectId={projectId}
estimateId={estimate?.id || undefined}
mode={estimateEditType}
item={value}
editItem={(value: string) => editEstimationPoint(index, value)}
replaceEstimateItem={(value: TEstimatePointsObject) => replaceEstimateItem(index, value)}
deleteItem={() => deleteEstimationPoint(index)}
/>
)}
onChange={(data: TEstimatePointsObject[]) => updatedSortedKeys(data)}
keyExtractor={(item: TEstimatePointsObject) => item?.id?.toString() || item.value.toString()}
/>
{estimateEditType === EEstimateUpdateStages.EDIT && (
<>
{estimatePoints && estimatePoints.length <= maxEstimatesCount && (
<Button size="sm" prependIcon={<Plus />} onClick={addNewEstimationPoint}>
Add {currentEstimateSystem?.type}
</Button>
)}
</>
)}
</div>
</div>
);
});

View File

@ -61,7 +61,7 @@ export class EstimateService extends APIService {
projectId: string,
estimateId: string,
payload: Partial<IEstimateFormData>
): Promise<IEstimate | undefined> {
): Promise<{ points: IEstimatePoint[] } | undefined> {
try {
const { data } = await this.patch(
`/api/workspaces/${workspaceSlug}/projects/${projectId}/estimates/${estimateId}/`,

View File

@ -1,3 +1,4 @@
import orderBy from "lodash/orderBy";
import set from "lodash/set";
import unset from "lodash/unset";
import { action, computed, makeObservable, observable, runInAction } from "mobx";
@ -7,6 +8,7 @@ import {
IEstimatePoint as IEstimatePointType,
TEstimateSystemKeys,
IEstimateFormData,
TEstimatePointsObject,
} from "@plane/types";
// services
import { EstimateService } from "@/services/project/estimate.service";
@ -26,13 +28,18 @@ export interface IEstimate extends IEstimateType {
// computed
asJson: IEstimateType;
estimatePointIds: string[] | undefined;
estimatePointById: (estimateId: string) => IEstimatePointType | undefined;
estimatePointById: (estimatePointId: string) => IEstimatePointType | undefined;
// actions
updateEstimate: (
workspaceSlug: string,
projectId: string,
payload: Partial<IEstimateFormData>
) => Promise<IEstimateType | undefined>;
updateEstimateSortOrder: (
workspaceSlug: string,
projectId: string,
payload: TEstimatePointsObject[]
) => Promise<void>;
creteEstimatePoint: (
workspaceSlug: string,
projectId: string,
@ -92,6 +99,7 @@ export class Estimate implements IEstimate {
estimatePointIds: computed,
// actions
updateEstimate: action,
updateEstimateSortOrder: action,
creteEstimatePoint: action,
deleteEstimatePoint: action,
});
@ -136,11 +144,11 @@ export class Estimate implements IEstimate {
get estimatePointIds() {
const { estimatePoints } = this;
if (!estimatePoints) return undefined;
const estimatePointIds = Object.values(estimatePoints)
.map((point) => point.estimate && this.id)
.filter((id) => id) as string[];
let currentEstimatePoints = Object.values(estimatePoints).filter(
(estimatePoint) => estimatePoint?.estimate === this.id
);
currentEstimatePoints = orderBy(currentEstimatePoints, ["key"], "asc");
const estimatePointIds = currentEstimatePoints.map((estimatePoint) => estimatePoint.id) as string[];
return estimatePointIds ?? undefined;
}
@ -166,16 +174,38 @@ export class Estimate implements IEstimate {
if (!this.id || !payload) return;
const estimate = await this.service.updateEstimate(workspaceSlug, projectId, this.id, payload);
if (estimate) {
return estimate as any;
} catch (error) {
throw error;
}
};
/**
* @description update an estimate sort order
* @param { string } workspaceSlug
* @param { string } projectId
* @param { Partial<IEstimateFormData> } payload
* @returns { void }
*/
updateEstimateSortOrder = async (
workspaceSlug: string,
projectId: string,
payload: TEstimatePointsObject[]
): Promise<void> => {
try {
if (!this.id || !payload) return;
const estimatePoints = await this.service.updateEstimate(workspaceSlug, projectId, this.id, {
estimate_points: payload,
});
if (estimatePoints?.points && estimatePoints?.points.length > 0) {
runInAction(() => {
Object.keys(payload).map((key) => {
const estimateKey = key as keyof IEstimateType;
set(this, estimateKey, estimate[estimateKey]);
estimatePoints?.points.map((estimatePoint) => {
if (estimatePoint.id)
set(this.estimatePoints, [estimatePoint.id], new EstimatePoint(this.store, this.data, estimatePoint));
});
});
}
return estimate;
} catch (error) {
throw error;
}

View File

@ -162,6 +162,7 @@ export class ProjectEstimateStore implements IProjectEstimateStore {
status: "error",
message: "Error fetching estimates",
};
throw error;
}
};
@ -196,6 +197,7 @@ export class ProjectEstimateStore implements IProjectEstimateStore {
status: "error",
message: "Error fetching estimates",
};
throw error;
}
};
@ -231,6 +233,7 @@ export class ProjectEstimateStore implements IProjectEstimateStore {
status: "error",
message: "Error fetching estimate by id",
};
throw error;
}
};
@ -250,7 +253,6 @@ export class ProjectEstimateStore implements IProjectEstimateStore {
this.error = undefined;
const estimate = await this.service.createEstimate(workspaceSlug, projectId, payload);
console.log("estimate", estimate);
if (estimate) {
await this.store.projectRoot.project.updateProject(workspaceSlug, projectId, {
estimate: estimate.id,
@ -266,6 +268,7 @@ export class ProjectEstimateStore implements IProjectEstimateStore {
status: "error",
message: "Error creating estimate",
};
throw error;
}
};
}