chore: added estimate delete modal (#792)

This commit is contained in:
Kunal Vishwakarma 2023-04-12 15:03:04 +05:30 committed by GitHub
parent f734aad10d
commit 0f9812cf2c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 127 additions and 3 deletions

View File

@ -0,0 +1,104 @@
import React, { useEffect, useState } from "react";
// headless ui
import { Dialog, Transition } from "@headlessui/react";
// types
import { IEstimate } from "types";
// icons
import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
// ui
import { SecondaryButton, DangerButton } from "components/ui";
type Props = {
isOpen: boolean;
handleClose: () => void;
data: IEstimate;
handleDelete: () => void;
};
export const DeleteEstimateModal: React.FC<Props> = ({
isOpen,
handleClose,
data,
handleDelete,
}) => {
const [isDeleteLoading, setIsDeleteLoading] = useState(false);
useEffect(() => {
setIsDeleteLoading(false);
}, [isOpen]);
const onClose = () => {
setIsDeleteLoading(false);
handleClose();
};
return (
<Transition.Root show={isOpen} as={React.Fragment}>
<Dialog as="div" className="relative z-20" onClose={onClose}>
<Transition.Child
as={React.Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
</Transition.Child>
<div className="fixed inset-0 z-10 overflow-y-auto">
<div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
<Transition.Child
as={React.Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
enterTo="opacity-100 translate-y-0 sm:scale-100"
leave="ease-in duration-200"
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
<div className="flex flex-col gap-6 p-6">
<div className="flex w-full items-center justify-start gap-6">
<span className="place-items-center rounded-full bg-red-100 p-4">
<ExclamationTriangleIcon
className="h-6 w-6 text-red-600"
aria-hidden="true"
/>
</span>
<span className="flex items-center justify-start">
<h3 className="text-xl font-medium 2xl:text-2xl">Delete Estimate</h3>
</span>
</div>
<span>
<p className="break-all text-sm leading-7 text-gray-500">
Are you sure you want to delete estimate-{" "}
<span className="break-all font-semibold">{data.name}</span>
{""}? All of the data related to the estiamte will be permanently removed.
This action cannot be undone.
</p>
</span>
<div className="flex justify-end gap-2">
<SecondaryButton onClick={onClose}>Cancel</SecondaryButton>
<DangerButton
onClick={() => {
setIsDeleteLoading(true);
handleDelete();
}}
loading={isDeleteLoading}
>
{isDeleteLoading ? "Deleting..." : "Delete Estimate"}
</DangerButton>
</div>
</div>
</Dialog.Panel>
</Transition.Child>
</div>
</div>
</Dialog>
</Transition.Root>
);
};

View File

@ -1,3 +1,4 @@
export * from "./create-update-estimate-modal";
export * from "./single-estimate";
export * from "./estimate-points-modal"
export * from "./estimate-points-modal"
export * from "./delete-estimate-modal"

View File

@ -11,7 +11,7 @@ import projectService from "services/project.service";
import useToast from "hooks/use-toast";
import useProjectDetails from "hooks/use-project-details";
// components
import { EstimatePointsModal } from "components/estimates";
import { EstimatePointsModal, DeleteEstimateModal } from "components/estimates";
// ui
import { CustomMenu } from "components/ui";
//icons
@ -39,6 +39,8 @@ export const SingleEstimate: React.FC<Props> = ({
handleEstimateDelete,
}) => {
const [isEstimatePointsModalOpen, setIsEstimatePointsModalOpen] = useState(false);
const [isDeleteEstimateModalOpen, setIsDeleteEstimateModalOpen] = useState(false);
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
@ -138,7 +140,7 @@ export const SingleEstimate: React.FC<Props> = ({
{projectDetails?.estimate !== estimate.id && (
<CustomMenu.MenuItem
onClick={() => {
handleEstimateDelete(estimate.id);
setIsDeleteEstimateModalOpen(true);
}}
>
<div className="flex items-center justify-start gap-2">
@ -166,6 +168,16 @@ export const SingleEstimate: React.FC<Props> = ({
</div>
)}
</div>
<DeleteEstimateModal
isOpen={isDeleteEstimateModalOpen}
handleClose={() => setIsDeleteEstimateModalOpen(false)}
data={estimate}
handleDelete={() => {
handleEstimateDelete(estimate.id);
setIsDeleteEstimateModalOpen(false);
}}
/>
</>
);
};

View File

@ -61,6 +61,13 @@ const EstimatesSettings: NextPage = () => {
estimatesService
.deleteEstimate(workspaceSlug as string, projectId as string, estimateId)
.then(() => {
setToastAlert({
type: "success",
title: "Success!",
message: "Estimate Deleted successfully.",
});
})
.catch(() => {
setToastAlert({
type: "error",