forked from github/plane
136 lines
4.3 KiB
TypeScript
136 lines
4.3 KiB
TypeScript
import React, { useState } from "react";
|
|
import { useRouter } from "next/router";
|
|
// store
|
|
import { observer } from "mobx-react-lite";
|
|
import { useMobxStore } from "lib/mobx/store-provider";
|
|
// components
|
|
import { CreateUpdateEstimateModal, DeleteEstimateModal, EstimateListItem } from "components/estimates";
|
|
//hooks
|
|
import useToast from "hooks/use-toast";
|
|
// ui
|
|
import { Button, Loader } from "@plane/ui";
|
|
import { EmptyState } from "components/common";
|
|
// icons
|
|
import { Plus } from "lucide-react";
|
|
// images
|
|
import emptyEstimate from "public/empty-state/estimate.svg";
|
|
// types
|
|
import { IEstimate } from "types";
|
|
|
|
export const EstimatesList: React.FC = observer(() => {
|
|
// router
|
|
const router = useRouter();
|
|
const { workspaceSlug, projectId } = router.query;
|
|
|
|
// store
|
|
const { project: projectStore } = useMobxStore();
|
|
const { currentProjectDetails } = projectStore;
|
|
// states
|
|
const [estimateFormOpen, setEstimateFormOpen] = useState(false);
|
|
const [estimateToDelete, setEstimateToDelete] = useState<string | null>(null);
|
|
const [estimateToUpdate, setEstimateToUpdate] = useState<IEstimate | undefined>();
|
|
// hooks
|
|
const { setToastAlert } = useToast();
|
|
// derived values
|
|
const estimatesList = projectStore.projectEstimates;
|
|
|
|
const editEstimate = (estimate: IEstimate) => {
|
|
setEstimateFormOpen(true);
|
|
setEstimateToUpdate(estimate);
|
|
};
|
|
|
|
const disableEstimates = () => {
|
|
if (!workspaceSlug || !projectId) return;
|
|
|
|
projectStore.updateProject(workspaceSlug.toString(), projectId.toString(), { estimate: null }).catch((err) => {
|
|
const error = err?.error;
|
|
const errorString = Array.isArray(error) ? error[0] : error;
|
|
|
|
setToastAlert({
|
|
type: "error",
|
|
title: "Error!",
|
|
message: errorString ?? "Estimate could not be disabled. Please try again",
|
|
});
|
|
});
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<CreateUpdateEstimateModal
|
|
isOpen={estimateFormOpen}
|
|
data={estimateToUpdate}
|
|
handleClose={() => {
|
|
setEstimateFormOpen(false);
|
|
setEstimateToUpdate(undefined);
|
|
}}
|
|
/>
|
|
|
|
<DeleteEstimateModal
|
|
isOpen={!!estimateToDelete}
|
|
handleClose={() => setEstimateToDelete(null)}
|
|
data={projectStore.getProjectEstimateById(estimateToDelete!)}
|
|
/>
|
|
|
|
<section className="flex items-center justify-between py-3.5 border-b border-custom-border-100">
|
|
<h3 className="text-xl font-medium">Estimates</h3>
|
|
<div className="col-span-12 space-y-5 sm:col-span-7">
|
|
<div className="flex items-center gap-2">
|
|
<Button
|
|
variant="primary"
|
|
onClick={() => {
|
|
setEstimateFormOpen(true);
|
|
setEstimateToUpdate(undefined);
|
|
}}
|
|
>
|
|
Add Estimate
|
|
</Button>
|
|
{currentProjectDetails?.estimate && (
|
|
<Button variant="neutral-primary" onClick={disableEstimates}>
|
|
Disable Estimates
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{estimatesList ? (
|
|
estimatesList.length > 0 ? (
|
|
<section className="h-full bg-custom-background-100 overflow-y-auto">
|
|
{estimatesList.map((estimate) => (
|
|
<EstimateListItem
|
|
key={estimate.id}
|
|
estimate={estimate}
|
|
editEstimate={(estimate) => editEstimate(estimate)}
|
|
deleteEstimate={(estimateId) => setEstimateToDelete(estimateId)}
|
|
/>
|
|
))}
|
|
</section>
|
|
) : (
|
|
<div className="h-full w-full overflow-y-auto">
|
|
<EmptyState
|
|
title="No estimates yet"
|
|
description="Estimates help you communicate the complexity of an issue."
|
|
image={emptyEstimate}
|
|
primaryButton={{
|
|
icon: <Plus className="h-4 w-4" />,
|
|
text: "Add Estimate",
|
|
onClick: () => {
|
|
setEstimateFormOpen(true);
|
|
setEstimateToUpdate(undefined);
|
|
},
|
|
}}
|
|
/>
|
|
</div>
|
|
)
|
|
) : (
|
|
<Loader className="mt-5 space-y-5">
|
|
<Loader.Item height="40px" />
|
|
<Loader.Item height="40px" />
|
|
<Loader.Item height="40px" />
|
|
<Loader.Item height="40px" />
|
|
</Loader>
|
|
)}
|
|
</>
|
|
);
|
|
});
|