[WEB-1640] fix: validating the error in estimate delete (#4853)

* fix: validating the error in estimate delete

* fix: moved estimate delete to ee
This commit is contained in:
guru_sainath
2024-06-18 16:14:24 +05:30
committed by GitHub
parent 8705a96220
commit cc455b0e76
9 changed files with 28 additions and 124 deletions

View File

@@ -1,3 +1,3 @@
export * from "./estimate-list-item-buttons";
export * from "./update";
export * from "./points";

View File

@@ -0,0 +1,17 @@
"use client";
import { FC } from "react";
import { TEstimateTypeErrorObject } from "@plane/types";
type TEstimatePointDelete = {
workspaceSlug: string;
projectId: string;
estimateId: string;
estimatePointId: string;
callback: () => void;
estimatePointError?: TEstimateTypeErrorObject | undefined;
handleEstimatePointError?: (newValue: string, message: string | undefined, mode?: "add" | "delete") => void;
};
export const EstimatePointDelete: FC<TEstimatePointDelete> = () => <></>;

View File

@@ -0,0 +1 @@
export * from "./delete";

View File

@@ -1,120 +0,0 @@
"use client";
import { FC, useState } from "react";
import { observer } from "mobx-react";
import { MoveRight, Trash2, X } from "lucide-react";
import { TEstimatePointsObject } from "@plane/types";
import { Spinner, TOAST_TYPE, setToast } from "@plane/ui";
// components
import { EstimatePointDropdown } from "@/components/estimates/points";
// 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 { estimatePointIds, estimatePointById, 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 handleDelete = async () => {
if (!workspaceSlug || !projectId || !projectId) return;
setError(undefined);
if (estimateInputValue)
try {
setLoader(true);
await deleteEstimatePoint(
workspaceSlug,
projectId,
estimatePointId,
estimateInputValue === "none" ? undefined : estimateInputValue
);
setLoader(false);
setError(undefined);
setToast({
type: TOAST_TYPE.SUCCESS,
title: "Estimate point updated",
message: "The estimate point has been updated successfully.",
});
handleClose();
} catch {
setLoader(false);
setError("something went wrong. please try again later");
setToast({
type: TOAST_TYPE.ERROR,
title: "Estimate point failed to updated",
message: "We are unable to process your request, please try again.",
});
}
else setError("please select option");
};
// derived values
const selectDropdownOptionIds = estimatePointIds?.filter((pointId) => pointId != estimatePointId) as string[];
const selectDropdownOptions = (selectDropdownOptionIds || [])
?.map((pointId) => {
const estimatePoint = estimatePointById(pointId);
if (estimatePoint && estimatePoint?.id)
return { id: estimatePoint.id, key: estimatePoint.key, value: estimatePoint.value };
})
.filter((estimatePoint) => estimatePoint != undefined) as TEstimatePointsObject[];
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="text-sm first-letter:relative flex justify-center items-center gap-2 whitespace-nowrap">
Mark as <MoveRight size={14} />
</div>
<EstimatePointDropdown
options={selectDropdownOptions}
error={error}
callback={(estimateId: string) => {
setEstimateInputValue(estimateId);
setError(undefined);
}}
/>
</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={handleDelete}
>
<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

@@ -1,7 +1,6 @@
export * from "./preview";
export * from "./create";
export * from "./update";
export * from "./delete";
export * from "./select-dropdown";
export * from "./create-root";

View File

@@ -3,7 +3,9 @@ import { observer } from "mobx-react";
import { GripVertical, Pencil, Trash2 } from "lucide-react";
import { TEstimatePointsObject, TEstimateSystemKeys, TEstimateTypeErrorObject } from "@plane/types";
// components
import { EstimatePointUpdate, EstimatePointDelete } from "@/components/estimates/points";
import { EstimatePointUpdate } from "@/components/estimates/points";
// plane web components
import { EstimatePointDelete } from "@/plane-web/components/estimates";
// plane web constants
import { estimateCount } from "@/plane-web/constants/estimates";
@@ -49,7 +51,7 @@ export const EstimatePointItemPreview: FC<TEstimatePointItemPreview> = observer(
return (
<div>
{!estimatePointEditToggle && !estimatePointDeleteToggle && (
<div className="border border-custom-border-200 rounded relative flex items-center px-2.5 gap-2 text-base my-1">
<div className="border border-custom-border-200 rounded relative flex items-center px-2.5 gap-2 text-base my-1">
<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>
@@ -106,6 +108,8 @@ export const EstimatePointItemPreview: FC<TEstimatePointItemPreview> = observer(
estimateId={estimateId}
estimatePointId={estimatePointId}
callback={() => estimateId && setEstimatePointDeleteToggle(false)}
estimatePointError={estimatePointError}
handleEstimatePointError={handleEstimatePointError}
/>
)}
</div>

View File

@@ -1,2 +1,3 @@
export * from "./estimate-list-item-buttons";
export * from "./update";
export * from "./points";

View File

@@ -0,0 +1 @@
export * from "ce/components/estimates/points/delete";

View File

@@ -0,0 +1 @@
export * from "./delete";