binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: estimates (#783)

Browse source 
* chore: use estimate points hook created

* chore: user auth layer

* fix: build error

* chore: estimate crud and validation

* fix: build errors

---------

Co-authored-by: Aaryan Khandelwal <aaryankhandu123@gmail.com>
This commit is contained in:
Kunal Vishwakarma 2023-04-11 17:54:01 +05:30 • committed by GitHub
parent d5c2965946
commit dfa3a7b78d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
18 changed files with 225 additions and 255 deletions
Download patch file Download diff file Expand all files Collapse all files

4
apps/app/components/auth-screens/workspace/not-a-member.tsx
View file

@ -28,9 +28,7 @@ export const NotAWorkspaceMember = () => {
<div className="flex items-center gap-2 justify-center">
<Link href="/invitations">
<a>
<SecondaryButton onClick={() => router.back()}>
Check pending invites
</SecondaryButton>
<SecondaryButton>Check pending invites</SecondaryButton>
</a>
</Link>
<Link href="/create-workspace">

35
apps/app/components/core/issues-view-filter.tsx
View file

@ -20,6 +20,7 @@ import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
import { Properties } from "types";
// constants
import { GROUP_BY_OPTIONS, ORDER_BY_OPTIONS, FILTER_ISSUE_OPTIONS } from "constants/issue";
import useEstimateOption from "hooks/use-estimate-option";
export const IssuesFilterView: React.FC = () => {
const router = useRouter();
@ -45,6 +46,8 @@ export const IssuesFilterView: React.FC = () => {
projectId as string
);
const { isEstimateActive } = useEstimateOption();
return (
<div className="flex items-center gap-2">
<div className="flex items-center gap-x-1">
@ -233,20 +236,24 @@ export const IssuesFilterView: React.FC = () => {
<div className="space-y-2 py-3">
<h4 className="text-sm text-gray-600">Display Properties</h4>
<div className="flex flex-wrap items-center gap-2">
{Object.keys(properties).map((key) => (
<button
key={key}
type="button"
className={`rounded border px-2 py-1 text-xs capitalize ${
properties[key as keyof Properties]
? "border-theme bg-theme text-white"
: "border-gray-300"
}`}
onClick={() => setProperties(key as keyof Properties)}
>
{key === "key" ? "ID" : replaceUnderscoreIfSnakeCase(key)}
</button>
))}
{Object.keys(properties).map((key) => {
if (key === "estimate" && !isEstimateActive) return null;
return (
<button
key={key}
type="button"
className={`rounded border px-2 py-1 text-xs capitalize ${
properties[key as keyof Properties]
? "border-theme bg-theme text-white"
: "border-gray-300"
}`}
onClick={() => setProperties(key as keyof Properties)}
>
{key === "key" ? "ID" : replaceUnderscoreIfSnakeCase(key)}
</button>
);
})}
</div>
</div>
</div>

9
apps/app/components/core/list-view/single-issue.tsx
View file

@ -13,6 +13,7 @@ import useToast from "hooks/use-toast";
import {
ViewAssigneeSelect,
ViewDueDateSelect,
ViewEstimateSelect,
ViewPrioritySelect,
ViewStateSelect,
} from "components/issues/view-select";
@ -273,6 +274,14 @@ export const SingleListIssue: React.FC<Props> = ({
isNotAllowed={isNotAllowed}
/>
)}
{properties.estimate && (
<ViewEstimateSelect
issue={issue}
partialUpdateIssue={partialUpdateIssue}
position="right"
isNotAllowed={isNotAllowed}
/>
)}
{type && !isNotAllowed && (
<CustomMenu width="auto" ellipsis>
<CustomMenu.MenuItem onClick={editIssue}>

12
apps/app/components/estimates/create-update-estimate-modal.tsx
View file

@ -21,10 +21,9 @@ import { IEstimate } from "types";
import { ESTIMATES_LIST } from "constants/fetch-keys";
type Props = {
isOpen: boolean;
handleClose: () => void;
data?: IEstimate;
isOpen: boolean;
isCreate: boolean;
};
const defaultValues: Partial<IEstimate> = {
@ -32,7 +31,7 @@ const defaultValues: Partial<IEstimate> = {
description: "",
};
export const CreateUpdateEstimateModal: React.FC<Props> = ({ handleClose, data, isOpen, isCreate }) => {
export const CreateUpdateEstimateModal: React.FC<Props> = ({ handleClose, data, isOpen }) => {
const {
register,
formState: { errors, isSubmitting },
@ -109,12 +108,11 @@ export const CreateUpdateEstimateModal: React.FC<Props> = ({ handleClose, data,
};
useEffect(() => {
if (!data && isCreate) return;
reset({
...defaultValues,
...data,
});
}, [data, reset, isCreate]);
}, [data, reset]);
return (
<>
@ -148,7 +146,9 @@ export const CreateUpdateEstimateModal: React.FC<Props> = ({ handleClose, data,
onSubmit={data ? handleSubmit(updateEstimate) : handleSubmit(createEstimate)}
>
<div className="space-y-3">
<div className="text-2xl font-medium">Create Estimate</div>
<div className="text-lg font-medium leading-6">
{data ? "Update" : "Create"} Estimate
</div>
<div>
<Input
id="name"

148
apps/app/components/estimates/estimate-points-modal.tsx
View file

@ -18,6 +18,7 @@ import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
import type { IEstimate, IEstimatePoint } from "types";
import estimatesService from "services/estimates.service";
import { ESTIMATE_POINTS_LIST } from "constants/fetch-keys";
type Props = {
isOpen: boolean;
@ -33,8 +34,6 @@ interface FormValues {
value4: string;
value5: string;
value6: string;
value7: string;
value8: string;
}
const defaultValues: FormValues = {
@ -44,8 +43,6 @@ const defaultValues: FormValues = {
value4: "",
value5: "",
value6: "",
value7: "",
value8: "",
};
export const EstimatePointsModal: React.FC<Props> = ({ isOpen, data, estimate, onClose }) => {
@ -56,7 +53,7 @@ export const EstimatePointsModal: React.FC<Props> = ({ isOpen, data, estimate, o
const {
register,
formState: { errors, isSubmitting },
formState: { isSubmitting },
handleSubmit,
reset,
} = useForm<FormValues>({ defaultValues });
@ -95,14 +92,6 @@ export const EstimatePointsModal: React.FC<Props> = ({ isOpen, data, estimate, o
key: 5,
value: formData.value6,
},
{
key: 6,
value: formData.value7,
},
{
key: 7,
value: formData.value8,
},
],
};
@ -126,49 +115,20 @@ export const EstimatePointsModal: React.FC<Props> = ({ isOpen, data, estimate, o
};
const updateEstimatePoints = async (formData: FormValues) => {
if (!workspaceSlug || !projectId) return;
if (!workspaceSlug || !projectId || !data || data.length === 0) return;
const payload = {
estimate_points: [
{
key: 0,
value: formData.value1,
},
{
key: 1,
value: formData.value2,
},
{
key: 2,
value: formData.value3,
},
{
key: 3,
value: formData.value4,
},
{
key: 4,
value: formData.value5,
},
{
key: 5,
value: formData.value6,
},
{
key: 6,
value: formData.value7,
},
{
key: 7,
value: formData.value8,
},
],
estimate_points: data.map((d, index) => ({
id: d.id,
value: (formData as any)[`value${index + 1}`],
})),
};
await estimatesService
.updateEstimatesPoints(
.patchEstimatePoints(
workspaceSlug as string,
projectId as string,
estimate?.id as string,
data?.[0]?.id as string,
payload
)
.then(() => {
@ -183,15 +143,27 @@ export const EstimatePointsModal: React.FC<Props> = ({ isOpen, data, estimate, o
});
};
const onSubmit = async (formData: FormValues) => {
if (data && data.length !== 0) await updateEstimatePoints(formData);
else await createEstimatePoints(formData);
if (estimate) mutate(ESTIMATE_POINTS_LIST(estimate.id));
};
useEffect(() => {
if(!data) return
if (!data || data.length < 6) return;
reset({
...defaultValues,
...data,
value1: data[0].value,
value2: data[1].value,
value3: data[2].value,
value4: data[3].value,
value5: data[4].value,
value6: data[5].value,
});
}, [data, reset]);
return (
<Transition.Root show={isOpen} as={React.Fragment}>
<Dialog as="div" className="relative z-20" onClose={() => handleClose()}>
@ -219,18 +191,16 @@ export const EstimatePointsModal: React.FC<Props> = ({ isOpen, data, estimate, o
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<Dialog.Panel className="relative transform rounded-lg bg-white px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
<form
onSubmit={
data ? handleSubmit(updateEstimatePoints) : handleSubmit(createEstimatePoints)
}
>
<form onSubmit={handleSubmit(onSubmit)}>
<div className="space-y-3">
<div className="flex flex-col gap-3">
<h4 className="text-2xl font-medium">Create Estimate Points</h4>
<div className="grid grid-cols-4 gap-3">
<h4 className="text-lg font-medium leading-6">
{data ? "Update" : "Create"} Estimate Points
</h4>
<div className="grid grid-cols-3 gap-3">
<div className="flex items-center">
<span className="bg-gray-100 h-full flex items-center rounded-lg">
<span className="pl-2 pr-1 rounded-lg text-sm text-gray-600">V0</span>
<span className="px-2 rounded-lg text-sm text-gray-600">1</span>
<span className="bg-white rounded-lg">
<Input
id="name"
@ -243,7 +213,7 @@ export const EstimatePointsModal: React.FC<Props> = ({ isOpen, data, estimate, o
required: "value is required",
maxLength: {
value: 10,
message: "value should be less than 10 characters",
message: "Name should be less than 10 characters",
},
}}
/>
@ -252,7 +222,7 @@ export const EstimatePointsModal: React.FC<Props> = ({ isOpen, data, estimate, o
</div>
<div className="flex items-center">
<span className="bg-gray-100 h-full flex items-center rounded-lg">
<span className="pl-2 pr-1 rounded-lg text-sm text-gray-600">V1</span>
<span className="px-2 rounded-lg text-sm text-gray-600">2</span>
<span className="bg-white rounded-lg">
<Input
id="name"
@ -274,7 +244,7 @@ export const EstimatePointsModal: React.FC<Props> = ({ isOpen, data, estimate, o
</div>
<div className="flex items-center">
<span className="bg-gray-100 h-full flex items-center rounded-lg">
<span className="pl-2 pr-1 rounded-lg text-sm text-gray-600">V2</span>
<span className="px-2 rounded-lg text-sm text-gray-600">3</span>
<span className="bg-white rounded-lg">
<Input
id="name"
@ -296,7 +266,7 @@ export const EstimatePointsModal: React.FC<Props> = ({ isOpen, data, estimate, o
</div>
<div className="flex items-center">
<span className="bg-gray-100 h-full flex items-center rounded-lg">
<span className="pl-2 pr-1 rounded-lg text-sm text-gray-600">V3</span>
<span className="px-2 rounded-lg text-sm text-gray-600">4</span>
<span className="bg-white rounded-lg">
<Input
id="name"
@ -318,7 +288,7 @@ export const EstimatePointsModal: React.FC<Props> = ({ isOpen, data, estimate, o
</div>
<div className="flex items-center">
<span className="bg-gray-100 h-full flex items-center rounded-lg">
<span className="pl-2 pr-1 rounded-lg text-sm text-gray-600">V4</span>
<span className="px-2 rounded-lg text-sm text-gray-600">5</span>
<span className="bg-white rounded-lg">
<Input
id="name"
@ -340,7 +310,7 @@ export const EstimatePointsModal: React.FC<Props> = ({ isOpen, data, estimate, o
</div>
<div className="flex items-center">
<span className="bg-gray-100 h-full flex items-center rounded-lg">
<span className="pl-2 pr-1 rounded-lg text-sm text-gray-600">V5</span>
<span className="px-2 rounded-lg text-sm text-gray-600">6</span>
<span className="bg-white rounded-lg">
<Input
id="name"
@ -360,50 +330,6 @@ export const EstimatePointsModal: React.FC<Props> = ({ isOpen, data, estimate, o
</span>
</span>
</div>
<div className="flex items-center">
<span className="bg-gray-100 h-full flex items-center rounded-lg">
<span className="pl-2 pr-1 rounded-lg text-sm text-gray-600">V6</span>
<span className="bg-white rounded-lg">
<Input
id="name"
name="value7"
type="name"
placeholder="Value"
autoComplete="off"
register={register}
validations={{
required: "value is required",
maxLength: {
value: 10,
message: "Name should be less than 10 characters",
},
}}
/>
</span>
</span>
</div>
<div className="flex items-center">
<span className="bg-gray-100 h-full flex items-center rounded-lg">
<span className="pl-2 pr-1 rounded-lg text-sm text-gray-600">V7</span>
<span className="bg-white rounded-lg">
<Input
id="name"
name="value8"
type="name"
placeholder="Value"
autoComplete="off"
register={register}
validations={{
required: "value is required",
maxLength: {
value: 20,
message: "Name should be less than 20 characters",
},
}}
/>
</span>
</span>
</div>
</div>
</div>
</div>

42
apps/app/components/estimates/single-estimate.tsx
View file

@ -25,6 +25,7 @@ import {
import { IEstimate, IProject } from "types";
// fetch-keys
import { ESTIMATE_POINTS_LIST } from "constants/fetch-keys";
import { orderArrayBy } from "helpers/array.helper";
type Props = {
estimate: IEstimate;
@ -88,6 +89,7 @@ export const SingleEstimate: React.FC<Props> = ({
isOpen={isEstimatePointsModalOpen}
estimate={estimate}
onClose={() => setIsEstimatePointsModalOpen(false)}
data={estimatePoints ? orderArrayBy(estimatePoints, "key") : undefined}
/>
<div className="gap-2 py-3">
<div className="flex justify-between items-center">
@ -105,7 +107,7 @@ export const SingleEstimate: React.FC<Props> = ({
</p>
</div>
<CustomMenu ellipsis>
{projectDetails?.estimate && projectDetails?.estimate !== estimate.id && (
{projectDetails?.estimate !== estimate.id && (
<CustomMenu.MenuItem onClick={handleUseEstimate}>
<div className="flex items-center justify-start gap-2">
<SquaresPlusIcon className="h-3.5 w-3.5" />
@ -116,7 +118,9 @@ export const SingleEstimate: React.FC<Props> = ({
<CustomMenu.MenuItem onClick={() => setIsEstimatePointsModalOpen(true)}>
<div className="flex items-center justify-start gap-2">
<ListBulletIcon className="h-3.5 w-3.5" />
<span>{estimatePoints?.length === 8 ? "Update points" : "Create points"}</span>
<span>
{estimatePoints && estimatePoints?.length > 0 ? "Edit points" : "Create points"}
</span>
</div>
</CustomMenu.MenuItem>
<CustomMenu.MenuItem
@ -129,32 +133,34 @@ export const SingleEstimate: React.FC<Props> = ({
<span>Edit estimate</span>
</div>
</CustomMenu.MenuItem>
<CustomMenu.MenuItem
onClick={() => {
handleEstimateDelete(estimate.id);
}}
>
<div className="flex items-center justify-start gap-2">
<TrashIcon className="h-3.5 w-3.5" />
<span>Delete estimate</span>
</div>
</CustomMenu.MenuItem>
{projectDetails?.estimate !== estimate.id && (
<CustomMenu.MenuItem
onClick={() => {
handleEstimateDelete(estimate.id);
}}
>
<div className="flex items-center justify-start gap-2">
<TrashIcon className="h-3.5 w-3.5" />
<span>Delete estimate</span>
</div>
</CustomMenu.MenuItem>
)}
</CustomMenu>
</div>
{estimatePoints && estimatePoints.length > 0 ? (
<div className="flex gap-2">
{estimatePoints.length > 0 && "Estimate points ("}
{estimatePoints.map((point, i) => (
<div className="flex gap-2 text-sm text-gray-400">
Estimate points(
{estimatePoints.map((point, index) => (
<h6 key={point.id}>
{point.value}
{i !== estimatePoints.length - 1 && ","}{" "}
{index !== estimatePoints.length - 1 && ","}{" "}
</h6>
))}
{estimatePoints.length > 0 && ")"}
)
</div>
) : (
<div>
<p className=" text-sm text-gray-300">No estimate points</p>
<p className="text-sm text-gray-400">No estimate points</p>
</div>
)}
</div>

2
apps/app/components/issues/form.tsx
View file

@ -405,7 +405,7 @@ export const IssueForm: FC<IssueFormProps> = ({
control={control}
name="estimate_point"
render={({ field: { value, onChange } }) => (
<IssueEstimateSelect chevron={false} value={value} onChange={onChange} />
<IssueEstimateSelect value={value} onChange={onChange} />
)}
/>
</div>

53
apps/app/components/issues/select/estimate.tsx
View file

@ -1,72 +1,37 @@
import React from "react";
import { useRouter } from "next/router";
import useSWR from "swr";
// services
import projectService from "services/project.service";
import estimatesService from "services/estimates.service";
// ui
import { CustomSelect } from "components/ui";
// icons
import { PlayIcon, ChevronDownIcon } from "@heroicons/react/24/outline";
import { PlayIcon } from "@heroicons/react/24/outline";
// fetch-keys
import { ESTIMATE_POINTS_LIST, PROJECT_DETAILS } from "constants/fetch-keys";
import useEstimateOption from "hooks/use-estimate-option";
type Props = {
value: number;
onChange: (value: number) => void;
chevron: boolean;
};
export const IssueEstimateSelect: React.FC<Props> = ({ value, onChange, chevron }) => {
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
export const IssueEstimateSelect: React.FC<Props> = ({ value, onChange }) => {
const { isEstimateActive, estimatePoints } = useEstimateOption();
const { data: projectDetails } = useSWR(
workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
workspaceSlug && projectId
? () => projectService.getProject(workspaceSlug as string, projectId as string)
: null
);
const { data: estimatePoints } = useSWR(
workspaceSlug && projectId && projectDetails && projectDetails.estimate
? ESTIMATE_POINTS_LIST(projectDetails.estimate)
: null,
workspaceSlug && projectId && projectDetails && projectDetails.estimate
? () =>
estimatesService.getEstimatesPointsList(
workspaceSlug as string,
projectId as string,
projectDetails.estimate
)
: null
);
if (!isEstimateActive) return null;
return (
<CustomSelect
value={value}
label={
<div className="flex items-center gap-2 text-xs min-w-[calc(100%+10px)]">
<span>
<PlayIcon className="h-4 w-4 text-gray-700 -rotate-90" />
</span>
<div className="flex items-center gap-2 text-xs">
<PlayIcon className="h-4 w-4 text-gray-700 -rotate-90" />
<span className={`${value ? "text-gray-600" : "text-gray-500"}`}>
{estimatePoints?.find((e) => e.key === value)?.value ?? "Estimate points"}
</span>
{chevron && (
<span className="w-full flex justify-end pr-3">
<ChevronDownIcon className="h-[9px] w-[9px] text-black" />
</span>
)}
</div>
}
onChange={onChange}
position="right"
width="w-full min-w-[111px]"
noChevron={!chevron}
width="w-full min-w-[6rem]"
noChevron
>
{estimatePoints &&
estimatePoints.map((point) => (

45
apps/app/components/issues/sidebar-select/estimate.tsx
View file

@ -1,13 +1,12 @@
import React from "react";
// ui
import { IssueEstimateSelect } from "components/issues/select";
import { CustomSelect } from "components/ui";
// icons
import { BanknotesIcon } from "@heroicons/react/24/outline";
import { BanknotesIcon, PlayIcon } from "@heroicons/react/24/outline";
// types
import { UserAuth } from "types";
import useEstimateOption from "hooks/use-estimate-option";
// constants
type Props = {
@ -16,20 +15,48 @@ type Props = {
userAuth: UserAuth;
};
export const SidebarEstimateSelect: React.FC<Props> = ({ value, onChange, userAuth }) => {
const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
const { isEstimateActive, estimatePoints } = useEstimateOption();
if (!isEstimateActive) return null;
return (
<div className="flex flex-wrap items-center py-2">
<div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
<BanknotesIcon className="h-4 w-4 flex-shrink-0" />
<PlayIcon className="h-4 w-4 -rotate-90 flex-shrink-0" />
<p>Estimate</p>
</div>
<div className="sm:basis-1/2">
<IssueEstimateSelect chevron={true} value={value} onChange={onChange} />
<CustomSelect
value={value}
label={
<div className="flex items-center gap-2 text-xs">
<PlayIcon className="h-4 w-4 text-gray-700 -rotate-90" />
<span className={`${value ? "text-gray-600" : "text-gray-500"}`}>
{estimatePoints?.find((e) => e.key === value)?.value ?? "Estimate points"}
</span>
</div>
}
onChange={onChange}
position="right"
width="w-full"
disabled={isNotAllowed}
>
{estimatePoints &&
estimatePoints.map((point) => (
<CustomSelect.Option className="w-full " key={point.key} value={point.key}>
<>
<span>
<PlayIcon className="h-4 w-4 -rotate-90" />
</span>
{point.value}
</>
</CustomSelect.Option>
))}
</CustomSelect>
</div>
</div>
);
};
};

23
apps/app/components/issues/view-select/estimate.tsx
View file

@ -11,6 +11,7 @@ import { PRIORITIES } from "constants/project";
// services
import trackEventServices from "services/track-event.service";
import useEstimateOption from "hooks/use-estimate-option";
import { PlayIcon } from "@heroicons/react/24/outline";
type Props = {
issue: IIssue;
@ -27,15 +28,17 @@ export const ViewEstimateSelect: React.FC<Props> = ({
selfPositioned = false,
isNotAllowed,
}) => {
const { isEstimateActive, estimatePoints, estimateValue } = useEstimateOption(
issue.estimate_point
);
const { isEstimateActive, estimatePoints } = useEstimateOption(issue.estimate_point);
const estimateValue = estimatePoints?.find((e) => e.key === issue.estimate_point)?.value;
if (!isEstimateActive) return null;
return (
<CustomSelect
value={issue.priority}
onChange={(data: string) => {
partialUpdateIssue({ priority: data, state: issue.state, target_date: issue.target_date });
value={issue.estimate_point}
onChange={(val: number) => {
partialUpdateIssue({ estimate_point: val });
trackEventServices.trackIssuePartialPropertyUpdateEvent(
{
workspaceSlug: issue.workspace_detail.slug,
@ -45,12 +48,15 @@ export const ViewEstimateSelect: React.FC<Props> = ({
projectName: issue.project_detail.name,
issueId: issue.id,
},
"ISSUE_PROPERTY_UPDATE_PRIORITY"
"ISSUE_PROPERTY_UPDATE_ESTIMATE"
);
}}
label={
<Tooltip tooltipHeading="Estimate" tooltipContent={estimateValue}>
<>{estimateValue}</>
<div className="flex items-center gap-1 text-gray-500">
<PlayIcon className="h-3.5 w-3.5 -rotate-90" />
{estimateValue}
</div>
</Tooltip>
}
maxHeight="md"
@ -58,6 +64,7 @@ export const ViewEstimateSelect: React.FC<Props> = ({
disabled={isNotAllowed}
position={position}
selfPositioned={selfPositioned}
width="w-full min-w-[6rem]"
>
{estimatePoints?.map((estimate) => (
<CustomSelect.Option key={estimate.id} value={estimate.key} className="capitalize">

2
apps/app/components/issues/view-select/priority.tsx
View file

@ -29,7 +29,7 @@ export const ViewPrioritySelect: React.FC<Props> = ({
<CustomSelect
value={issue.priority}
onChange={(data: string) => {
partialUpdateIssue({ priority: data, state: issue.state, target_date: issue.target_date });
partialUpdateIssue({ priority: data });
trackEventServices.trackIssuePartialPropertyUpdateEvent(
{
workspaceSlug: issue.workspace_detail.slug,