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

[WEB-3737]chore: estimates code refactor and translations (#6857)

Browse source 
* * chore: refactored estimates components.
* chore: added translations for estimates components.

* fix: translation key update
This commit is contained in:
Vamsi Krishna 2025-04-04 16:59:12 +05:30 • committed by GitHub
parent 9c1b158291
commit 9c10235fca
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
38 changed files with 1309 additions and 133 deletions
Download patch file Download diff file Expand all files Collapse all files

2
web/core/components/api-token/modal/generated-token-details.tsx
View file

@ -26,7 +26,7 @@ export const GeneratedTokenDetails: React.FC<Props> = (props) => {
setToast({
type: TOAST_TYPE.SUCCESS,
title: `${t("success")}!`,
message: t("workspace_setting.token_copied"),
message: t("workspace_settings.token_copied"),
})
);
};

37
web/core/components/dropdowns/estimate.tsx
View file

@ -5,8 +5,11 @@ import { usePopper } from "react-popper";
import { Check, ChevronDown, Search, Triangle } from "lucide-react";
import { Combobox } from "@headlessui/react";
// ui
import { useTranslation } from "@plane/i18n";
import { EEstimateSystem } from "@plane/types/src/enums";
import { ComboDropDown } from "@plane/ui";
// helpers
import { convertMinutesToHoursMinutesString } from "@plane/utils";
import { cn } from "@/helpers/common.helper";
// hooks
import {
@ -61,6 +64,8 @@ export const EstimateDropdown: React.FC<Props> = observer((props) => {
value,
renderByDefault = true,
} = props;
// i18n
const { t } = useTranslation();
// states
const [query, setQuery] = useState("");
const [isOpen, setIsOpen] = useState(false);
@ -85,7 +90,7 @@ export const EstimateDropdown: React.FC<Props> = observer((props) => {
// router
const { workspaceSlug } = useParams();
// store hooks
const { currentActiveEstimateIdByProjectId, getProjectEstimates } = useProjectEstimates();
const { currentActiveEstimateIdByProjectId, getProjectEstimates, currentActiveEstimate } = useProjectEstimates();
const { estimatePointIds, estimatePointById } = useEstimate(
projectId ? currentActiveEstimateIdByProjectId(projectId) : undefined
);
@ -102,7 +107,11 @@ export const EstimateDropdown: React.FC<Props> = observer((props) => {
content: (
<div className="flex items-center gap-2">
<Triangle className="h-3 w-3 flex-shrink-0" />
<span className="flex-grow truncate">{currentEstimatePoint.value}</span>
<span className="flex-grow truncate">
{currentActiveEstimate?.type === EEstimateSystem.TIME
? convertMinutesToHoursMinutesString(Number(currentEstimatePoint.value))
: currentEstimatePoint.value}
</span>
</div>
),
};
@ -111,11 +120,11 @@ export const EstimateDropdown: React.FC<Props> = observer((props) => {
.filter((estimatePointDropdownOption) => estimatePointDropdownOption != undefined) as DropdownOptions;
options?.unshift({
value: null,
query: "No estimate",
query: t("project_settings.estimates.no_estimate"),
content: (
<div className="flex items-center gap-2">
<Triangle className="h-3 w-3 flex-shrink-0" />
<span className="flex-grow truncate">No estimate</span>
<span className="flex-grow truncate">{t("project_settings.estimates.no_estimate")}</span>
</div>
),
});
@ -176,7 +185,7 @@ export const EstimateDropdown: React.FC<Props> = observer((props) => {
<DropdownButton
className={buttonClassName}
isActive={isOpen}
tooltipHeading="Estimate"
tooltipHeading={t("project_settings.estimates.label")}
tooltipContent={selectedEstimate ? selectedEstimate?.value : placeholder}
showTooltip={showTooltip}
variant={buttonVariant}
@ -184,7 +193,13 @@ export const EstimateDropdown: React.FC<Props> = observer((props) => {
>
{!hideIcon && <Triangle className="h-3 w-3 flex-shrink-0" />}
{(selectedEstimate || placeholder) && BUTTON_VARIANTS_WITH_TEXT.includes(buttonVariant) && (
<span className="flex-grow truncate">{selectedEstimate ? selectedEstimate?.value : placeholder}</span>
<span className="flex-grow truncate">
{selectedEstimate
? currentActiveEstimate?.type === EEstimateSystem.TIME
? convertMinutesToHoursMinutesString(Number(selectedEstimate.value))
: selectedEstimate.value
: placeholder}
</span>
)}
{dropdownArrow && (
<ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
@ -224,7 +239,7 @@ export const EstimateDropdown: React.FC<Props> = observer((props) => {
className="w-full bg-transparent py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
value={query}
onChange={(e) => setQuery(e.target.value)}
placeholder="Search"
placeholder={t("common.search.placeholder")}
displayValue={(assigned: any) => assigned?.name}
onKeyDown={searchInputKeyDown}
/>
@ -237,7 +252,7 @@ export const EstimateDropdown: React.FC<Props> = observer((props) => {
{/* NOTE: This condition renders when estimates are not enabled for the project */}
<div className="flex-grow flex items-center gap-2">
<Triangle className="h-3 w-3 flex-shrink-0" />
<span className="flex-grow truncate">No estimate</span>
<span className="flex-grow truncate">{t("project_settings.estimates.no_estimate")}</span>
</div>
</div>
) : (
@ -264,10 +279,12 @@ export const EstimateDropdown: React.FC<Props> = observer((props) => {
</Combobox.Option>
))
) : (
<p className="px-1.5 py-1 italic text-custom-text-400">No matching results</p>
<p className="px-1.5 py-1 italic text-custom-text-400">
{t("common.search.no_matching_results")}
</p>
)
) : (
<p className="px-1.5 py-1 italic text-custom-text-400">Loading...</p>
<p className="px-1.5 py-1 italic text-custom-text-400">{t("common.loading")}</p>
)}
</>
)}

43
web/core/components/estimates/create/stage-one.tsx
View file

@ -2,13 +2,16 @@
import { FC } from "react";
import { Info } from "lucide-react";
import { useTranslation } from "@plane/i18n";
import { TEstimateSystemKeys } from "@plane/types";
import { Tooltip } from "@plane/ui";
// components
import { ProIcon } from "@/components/common";
import { convertMinutesToHoursMinutesString } from "@plane/utils";
import { RadioInput } from "@/components/estimates";
// plane web constants
import { ESTIMATE_SYSTEMS } from "@/plane-web/constants/estimates";
import { isEstimateSystemEnabled } from "@/plane-web/components/estimates/helper";
import { UpgradeBadge } from "@/plane-web/components/workspace";
import { EEstimateSystem, ESTIMATE_SYSTEMS } from "@/plane-web/constants/estimates";
type TEstimateCreateStageOne = {
estimateSystem: TEstimateSystemKeys;
@ -19,6 +22,9 @@ type TEstimateCreateStageOne = {
export const EstimateCreateStageOne: FC<TEstimateCreateStageOne> = (props) => {
const { estimateSystem, handleEstimateSystem, handleEstimatePoints } = props;
// i18n
const { t } = useTranslation();
const currentEstimateSystem = ESTIMATE_SYSTEMS[estimateSystem] || undefined;
if (!currentEstimateSystem) return <></>;
@ -28,30 +34,29 @@ export const EstimateCreateStageOne: FC<TEstimateCreateStageOne> = (props) => {
<RadioInput
options={Object.keys(ESTIMATE_SYSTEMS).map((system) => {
const currentSystem = system as TEstimateSystemKeys;
const isEnabled = isEstimateSystemEnabled(currentSystem);
return {
label: !ESTIMATE_SYSTEMS[currentSystem]?.is_available ? (
<div className="relative flex items-center gap-2 cursor-no-drop text-custom-text-300">
{ESTIMATE_SYSTEMS[currentSystem]?.name}
<Tooltip tooltipContent={"Coming soon"}>
<Tooltip tooltipContent={t("common.coming_soon")}>
<Info size={12} />
</Tooltip>
</div>
) : ESTIMATE_SYSTEMS[currentSystem]?.is_ee ? (
) : !isEnabled ? (
<div className="relative flex items-center gap-2 cursor-no-drop text-custom-text-300">
{ESTIMATE_SYSTEMS[currentSystem]?.name}
<Tooltip tooltipContent={"upgrade"}>
<ProIcon className="w-3 h-3" />
</Tooltip>
<UpgradeBadge />
</div>
) : (
<div>{ESTIMATE_SYSTEMS[currentSystem]?.name}</div>
),
value: system,
disabled: !ESTIMATE_SYSTEMS[currentSystem]?.is_available || ESTIMATE_SYSTEMS[currentSystem]?.is_ee,
disabled: !isEnabled,
};
})}
name="estimate-radio-input"
label="Choose an estimate system"
label={t("project_settings.estimates.create.choose_estimate_system")}
labelClassName="text-sm font-medium text-custom-text-200 mb-1.5"
wrapperClassName="relative flex flex-wrap gap-14"
fieldClassName="relative flex items-center gap-1.5"
@ -60,24 +65,28 @@ export const EstimateCreateStageOne: FC<TEstimateCreateStageOne> = (props) => {
onChange={(value) => handleEstimateSystem(value as TEstimateSystemKeys)}
/>
</div>
{ESTIMATE_SYSTEMS[estimateSystem]?.is_available && !ESTIMATE_SYSTEMS[estimateSystem]?.is_ee && (
<>
<div className="space-y-1.5">
<div className="text-sm font-medium text-custom-text-200">Start from scratch</div>
<div className="text-sm font-medium text-custom-text-200">
{t("project_settings.estimates.create.start_from_scratch")}
</div>
<button
className="border border-custom-border-200 rounded-md p-3 py-2.5 text-left space-y-1 w-full block hover:bg-custom-background-90"
onClick={() => handleEstimatePoints("custom")}
>
<p className="text-base font-medium">Custom</p>
<p className="text-base font-medium">{t("project_settings.estimates.create.custom")}</p>
<p className="text-xs text-custom-text-300">
{/* TODO: Translate here */}
Add your own <span className="lowercase">{currentEstimateSystem.name}</span> from scratch
</p>
</button>
</div>
<div className="space-y-1.5">
<div className="text-sm font-medium text-custom-text-200">Choose a template</div>
<div className="text-sm font-medium text-custom-text-200">
{t("project_settings.estimates.create.choose_template")}
</div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
{Object.keys(currentEstimateSystem.templates).map((name) =>
currentEstimateSystem.templates[name]?.hide ? null : (
@ -88,7 +97,13 @@ export const EstimateCreateStageOne: FC<TEstimateCreateStageOne> = (props) => {
>
<p className="text-base font-medium">{currentEstimateSystem.templates[name]?.title}</p>
<p className="text-xs text-custom-text-300">
{currentEstimateSystem.templates[name]?.values?.map((template) => template?.value)?.join(", ")}
{currentEstimateSystem.templates[name]?.values
?.map((template) =>
estimateSystem === EEstimateSystem.TIME
? convertMinutesToHoursMinutesString(Number(template.value))
: template.value
)
?.join(", ")}
</p>
</button>
)

17
web/core/components/estimates/estimate-disable-switch.tsx
View file

@ -2,10 +2,11 @@
import { FC } from "react";
import { observer } from "mobx-react";
import { useTranslation } from "@plane/i18n";
import { TOAST_TYPE, ToggleSwitch, setToast } from "@plane/ui";
// hooks
import { useProject, useProjectEstimates } from "@/hooks/store";
// i18n
type TEstimateDisableSwitch = {
workspaceSlug: string;
projectId: string;
@ -14,6 +15,8 @@ type TEstimateDisableSwitch = {
export const EstimateDisableSwitch: FC<TEstimateDisableSwitch> = observer((props) => {
const { workspaceSlug, projectId, isAdmin } = props;
// i18n
const { t } = useTranslation();
// hooks
const { updateProject, currentProjectDetails } = useProject();
const { currentActiveEstimateId } = useProjectEstimates();
@ -29,14 +32,18 @@ export const EstimateDisableSwitch: FC<TEstimateDisableSwitch> = observer((props
});
setToast({
type: TOAST_TYPE.SUCCESS,
title: "Success!",
message: currentProjectActiveEstimate ? "Estimates have been disabled" : "Estimates have been enabled",
title: currentProjectActiveEstimate
? t("project_settings.estimates.toasts.disabled.success.title")
: t("project_settings.estimates.toasts.enabled.success.title"),
message: currentProjectActiveEstimate
? t("project_settings.estimates.toasts.disabled.success.message")
: t("project_settings.estimates.toasts.enabled.success.message"),
});
} catch (err) {
setToast({
type: TOAST_TYPE.ERROR,
title: "Error!",
message: "Estimate could not be disabled. Please try again",
title: t("project_settings.estimates.toasts.disabled.error.title"),
message: t("project_settings.estimates.toasts.disabled.error.message"),
});
}
};

13
web/core/components/estimates/estimate-list-item.tsx
View file

@ -1,11 +1,13 @@
import { FC } from "react";
import { observer } from "mobx-react";
// helpers
import { convertMinutesToHoursMinutesString } from "@plane/utils";
import { cn } from "@/helpers/common.helper";
// hooks
import { useEstimate, useProjectEstimates } from "@/hooks/store";
// plane web components
import { EstimateListItemButtons } from "@/plane-web/components/estimates";
import { EEstimateSystem } from "@/plane-web/constants/estimates";
type TEstimateListItem = {
estimateId: string;
@ -39,7 +41,16 @@ export const EstimateListItem: FC<TEstimateListItem> = observer((props) => {
>
<div className="space-y-1">
<h3 className="font-medium text-base">{currentEstimate?.name}</h3>
<p className="text-xs">{(estimatePointValues || [])?.join(", ")}</p>
<p className="text-xs">
{estimatePointValues
?.map((estimatePointValue) => {
if (currentEstimate?.type === EEstimateSystem.TIME) {
return convertMinutesToHoursMinutesString(Number(estimatePointValue));
}
return estimatePointValue;
})
.join(", ")}
</p>
</div>
<EstimateListItemButtons {...props} />
</div>

3
web/core/components/estimates/inputs/index.ts Normal file
View file

@ -0,0 +1,3 @@
export * from "./root";
export * from "./number-input";
export * from "./text-input";

24
web/core/components/estimates/inputs/number-input.tsx Normal file
View file

@ -0,0 +1,24 @@
import { FC } from "react";
import { useTranslation } from "@plane/i18n";
type TEstimateNumberInputProps = {
value?: number;
handleEstimateInputValue: (value: string) => void;
};
export const EstimateNumberInput: FC<TEstimateNumberInputProps> = (props) => {
const { value, handleEstimateInputValue } = props;
// i18n
const { t } = useTranslation();
return (
<input
value={value}
onChange={(e) => handleEstimateInputValue(e.target.value)}
className="border-none focus:ring-0 focus:border-0 focus:outline-none px-2 py-2 w-full bg-transparent text-sm"
placeholder={t("project_settings.estimates.create.enter_estimate_point")}
autoFocus
type="number"
/>
);
};

37
web/core/components/estimates/inputs/root.tsx Normal file
View file

@ -0,0 +1,37 @@
import { FC } from "react";
import { TEstimateSystemKeys } from "@plane/types";
import { EEstimateSystem } from "@plane/types/src/enums";
// components
import { EstimateNumberInput, EstimateTextInput } from "@/components/estimates/inputs";
import { EstimateTimeInput } from "@/plane-web/components/estimates/inputs";
type TEstimateInputRootProps = {
estimateType: TEstimateSystemKeys;
handleEstimateInputValue: (value: string) => void;
value?: string;
};
export const EstimateInputRoot: FC<TEstimateInputRootProps> = (props) => {
const { estimateType, handleEstimateInputValue, value } = props;
switch (estimateType) {
case EEstimateSystem.POINTS:
return (
<EstimateNumberInput
value={value ? parseInt(value) : undefined}
handleEstimateInputValue={handleEstimateInputValue}
/>
);
case EEstimateSystem.CATEGORIES:
return <EstimateTextInput value={value} handleEstimateInputValue={handleEstimateInputValue} />;
case EEstimateSystem.TIME:
return (
<EstimateTimeInput
value={value ? parseInt(value) : undefined}
handleEstimateInputValue={handleEstimateInputValue}
/>
);
default:
return null;
}
};

24
web/core/components/estimates/inputs/text-input.tsx Normal file
View file

@ -0,0 +1,24 @@
import { FC } from "react";
import { useTranslation } from "@plane/i18n";
type TEstimateTextInputProps = {
value?: string;
handleEstimateInputValue: (value: string) => void;
};
export const EstimateTextInput: FC<TEstimateTextInputProps> = (props) => {
const { value, handleEstimateInputValue } = props;
// i18n
const { t } = useTranslation();
return (
<input
value={value}
onChange={(e) => handleEstimateInputValue(e.target.value)}
className="border-none focus:ring-0 focus:border-0 focus:outline-none px-3 py-2 w-full bg-transparent text-sm"
placeholder={t("project_settings.estimates.create.enter_estimate_input")}
autoFocus
type="text"
/>
);
};

54
web/core/components/estimates/points/create.tsx
View file

@ -3,8 +3,10 @@
import { FC, useState, FormEvent } from "react";
import { observer } from "mobx-react";
import { Check, Info, X } from "lucide-react";
import { useTranslation } from "@plane/i18n";
import { TEstimatePointsObject, TEstimateSystemKeys, TEstimateTypeErrorObject } from "@plane/types";
import { Spinner, TOAST_TYPE, Tooltip, setToast } from "@plane/ui";
import { EstimateInputRoot } from "@/components/estimates/inputs/root";
// helpers
import { cn } from "@/helpers/common.helper";
import { isEstimatePointValuesRepeated } from "@/helpers/estimates";
@ -41,6 +43,8 @@ export const EstimatePointCreate: FC<TEstimatePointCreate> = observer((props) =>
} = props;
// hooks
const { creteEstimatePoint } = useEstimate(estimateId);
// i18n
const { t } = useTranslation();
// states
const [estimateInputValue, setEstimateInputValue] = useState("");
const [loader, setLoader] = useState(false);
@ -60,7 +64,7 @@ export const EstimatePointCreate: FC<TEstimatePointCreate> = observer((props) =>
const handleEstimateInputValue = (value: string) => {
if (value.length <= MAX_ESTIMATE_POINT_INPUT_LENGTH) {
setEstimateInputValue(value);
handleEstimatePointError && handleEstimatePointError(value, undefined);
if (handleEstimatePointError) handleEstimatePointError(value, undefined);
}
};
@ -69,7 +73,7 @@ export const EstimatePointCreate: FC<TEstimatePointCreate> = observer((props) =>
if (!workspaceSlug || !projectId) return;
handleEstimatePointError && handleEstimatePointError(estimateInputValue, undefined, "delete");
if (handleEstimatePointError) handleEstimatePointError(estimateInputValue, undefined, "delete");
if (estimateInputValue) {
const currentEstimateType: EEstimateSystem | undefined = estimateType;
@ -83,11 +87,11 @@ export const EstimatePointCreate: FC<TEstimatePointCreate> = observer((props) =>
false;
if (!isRepeated) {
if (currentEstimateType && [(EEstimateSystem.TIME, EEstimateSystem.POINTS)].includes(currentEstimateType)) {
if (currentEstimateType && [EEstimateSystem.TIME, EEstimateSystem.POINTS].includes(currentEstimateType)) {
if (estimateInputValue && !isNaN(Number(estimateInputValue))) {
if (Number(estimateInputValue) <= 0) {
handleEstimatePointError &&
handleEstimatePointError(estimateInputValue, "Estimate point should be greater than 0.");
if (handleEstimatePointError)
handleEstimatePointError(estimateInputValue, t("project_settings.estimates.validation.min_length"));
return;
} else {
isEstimateValid = true;
@ -114,8 +118,8 @@ export const EstimatePointCreate: FC<TEstimatePointCreate> = observer((props) =>
handleEstimatePointError && handleEstimatePointError(estimateInputValue, undefined, "delete");
setToast({
type: TOAST_TYPE.SUCCESS,
title: "Estimate point created",
message: "The estimate point has been created successfully.",
title: t("project_settings.estimates.toasts.created.success.title"),
message: t("project_settings.estimates.toasts.created.success.message"),
});
handleClose();
} catch {
@ -123,12 +127,12 @@ export const EstimatePointCreate: FC<TEstimatePointCreate> = observer((props) =>
handleEstimatePointError &&
handleEstimatePointError(
estimateInputValue,
"We are unable to process your request, please try again."
t("project_settings.estimates.validation.unable_to_process")
);
setToast({
type: TOAST_TYPE.ERROR,
title: "Estimate point creation failed",
message: "We were unable to create the new estimate point, please try again.",
title: t("project_settings.estimates.toasts.created.error.title"),
message: t("project_settings.estimates.toasts.created.error.message"),
});
}
} else {
@ -143,12 +147,16 @@ export const EstimatePointCreate: FC<TEstimatePointCreate> = observer((props) =>
handleEstimatePointError(
estimateInputValue,
[EEstimateSystem.POINTS, EEstimateSystem.TIME].includes(estimateType)
? "Estimate point needs to be a numeric value."
: "Estimate point needs to be a character value."
? t("project_settings.estimates.validation.numeric")
: t("project_settings.estimates.validation.character")
);
}
} else handleEstimatePointError && handleEstimatePointError(estimateInputValue, "Estimate value already exists.");
} else handleEstimatePointError && handleEstimatePointError(estimateInputValue, "Estimate value cannot be empty.");
} else
handleEstimatePointError &&
handleEstimatePointError(estimateInputValue, t("project_settings.estimates.validation.already_exists"));
} else
handleEstimatePointError &&
handleEstimatePointError(estimateInputValue, t("project_settings.estimates.validation.empty"));
};
// derived values
@ -165,23 +173,13 @@ export const EstimatePointCreate: FC<TEstimatePointCreate> = observer((props) =>
estimatePointError?.message ? `border-red-500` : `border-custom-border-200`
)}
>
<input
<EstimateInputRoot
estimateType={estimateType}
handleEstimateInputValue={handleEstimateInputValue}
value={estimateInputValue}
onChange={(e) => handleEstimateInputValue(e.target.value)}
className="border-none focus:ring-0 focus:border-0 focus:outline-none p-2.5 w-full bg-transparent"
placeholder="Enter estimate point"
autoFocus
{...inputProps}
/>
{estimatePointError?.message && (
<Tooltip
tooltipContent={
(estimateInputValue || "")?.length >= 1
? `You have some unsaved changes, Please save them before clicking on done`
: estimatePointError?.message
}
position="bottom"
>
<Tooltip tooltipContent={estimatePointError?.message} 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>

18
web/core/components/estimates/points/preview.tsx
View file

@ -1,13 +1,15 @@
import { FC, useEffect, useRef, useState } from "react";
import { observer } from "mobx-react";
import { GripVertical, Pencil, Trash2 } from "lucide-react";
import { useTranslation } from "@plane/i18n";
import { TEstimatePointsObject, TEstimateSystemKeys, TEstimateTypeErrorObject } from "@plane/types";
// components
import { convertMinutesToHoursMinutesString } from "@plane/utils";
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";
import { EEstimateSystem, estimateCount } from "@/plane-web/constants/estimates";
type TEstimatePointItemPreview = {
workspaceSlug: string;
@ -37,6 +39,8 @@ export const EstimatePointItemPreview: FC<TEstimatePointItemPreview> = observer(
estimatePointError,
handleEstimatePointError,
} = props;
// i18n
const { t } = useTranslation();
// state
const [estimatePointEditToggle, setEstimatePointEditToggle] = useState(false);
const [estimatePointDeleteToggle, setEstimatePointDeleteToggle] = useState(false);
@ -51,15 +55,17 @@ 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-1 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>
<div ref={EstimatePointValueRef} className="py-2.5 w-full">
<div ref={EstimatePointValueRef} className="py-2 w-full text-sm">
{estimatePoint?.value ? (
`${estimatePoint?.value}`
`${estimateType === EEstimateSystem.TIME ? convertMinutesToHoursMinutesString(Number(estimatePoint?.value)) : estimatePoint?.value}`
) : (
<span className="text-custom-text-400">Enter estimate point</span>
<span className="text-custom-text-400">
{t("project_settings.estimates.create.enter_estimate_point")}
</span>
)}
</div>
<div
@ -107,9 +113,11 @@ export const EstimatePointItemPreview: FC<TEstimatePointItemPreview> = observer(
projectId={projectId}
estimateId={estimateId}
estimatePointId={estimatePointId}
estimatePoints={estimatePoints}
callback={() => estimateId && setEstimatePointDeleteToggle(false)}
estimatePointError={estimatePointError}
handleEstimatePointError={handleEstimatePointError}
estimateSystem={estimateType}
/>
)}
</div>

56
web/core/components/estimates/points/update.tsx
View file

@ -3,8 +3,10 @@
import { FC, useEffect, useState, FormEvent } from "react";
import { observer } from "mobx-react";
import { Check, Info, X } from "lucide-react";
import { useTranslation } from "@plane/i18n";
import { TEstimatePointsObject, TEstimateSystemKeys, TEstimateTypeErrorObject } from "@plane/types";
import { Spinner, TOAST_TYPE, Tooltip, setToast } from "@plane/ui";
import { EstimateInputRoot } from "@/components/estimates/inputs/root";
// helpers
import { cn } from "@/helpers/common.helper";
import { isEstimatePointValuesRepeated } from "@/helpers/estimates";
@ -43,6 +45,8 @@ export const EstimatePointUpdate: FC<TEstimatePointUpdate> = observer((props) =>
} = props;
// hooks
const { updateEstimatePoint } = useEstimatePoint(estimateId, estimatePointId);
// i18n
const { t } = useTranslation();
// states
const [loader, setLoader] = useState(false);
const [estimateInputValue, setEstimateInputValue] = useState<string | undefined>(undefined);
@ -88,11 +92,11 @@ export const EstimatePointUpdate: FC<TEstimatePointUpdate> = observer((props) =>
false;
if (!isRepeated) {
if (currentEstimateType && [(EEstimateSystem.TIME, EEstimateSystem.POINTS)].includes(currentEstimateType)) {
if (currentEstimateType && [EEstimateSystem.TIME, EEstimateSystem.POINTS].includes(currentEstimateType)) {
if (estimateInputValue && !isNaN(Number(estimateInputValue))) {
if (Number(estimateInputValue) <= 0) {
handleEstimatePointError &&
handleEstimatePointError(estimateInputValue, "Estimate point should be greater than 0.");
if (handleEstimatePointError)
handleEstimatePointError(estimateInputValue, t("project_settings.estimates.validation.min_length"));
return;
} else {
isEstimateValid = true;
@ -108,7 +112,7 @@ export const EstimatePointUpdate: FC<TEstimatePointUpdate> = observer((props) =>
if (estimateId != undefined) {
if (estimateInputValue === estimatePoint.value) {
setLoader(false);
handleEstimatePointError && handleEstimatePointError(estimateInputValue, undefined);
if (handleEstimatePointError) handleEstimatePointError(estimateInputValue, undefined);
handleClose();
} else
@ -121,24 +125,24 @@ export const EstimatePointUpdate: FC<TEstimatePointUpdate> = observer((props) =>
await updateEstimatePoint(workspaceSlug, projectId, payload);
setLoader(false);
handleEstimatePointError && handleEstimatePointError(estimateInputValue, undefined, "delete");
if (handleEstimatePointError) handleEstimatePointError(estimateInputValue, undefined, "delete");
handleClose();
setToast({
type: TOAST_TYPE.SUCCESS,
title: "Estimate modified",
message: "The estimate point has been updated in your project.",
title: t("project_settings.estimates.toasts.updated.success.title"),
message: t("project_settings.estimates.toasts.updated.success.message"),
});
} catch {
setLoader(false);
handleEstimatePointError &&
if (handleEstimatePointError)
handleEstimatePointError(
estimateInputValue,
"We are unable to process your request, please try again."
t("project_settings.estimates.validation.unable_to_process")
);
setToast({
type: TOAST_TYPE.ERROR,
title: "Estimate modification failed",
message: "We were unable to modify the estimate, please try again",
title: t("project_settings.estimates.toasts.updated.error.title"),
message: t("project_settings.estimates.toasts.updated.error.message"),
});
}
} else {
@ -146,23 +150,18 @@ export const EstimatePointUpdate: FC<TEstimatePointUpdate> = observer((props) =>
}
} else {
setLoader(false);
handleEstimatePointError &&
if (handleEstimatePointError)
handleEstimatePointError(
estimateInputValue,
[EEstimateSystem.POINTS, EEstimateSystem.TIME].includes(estimateType)
? "Estimate point needs to be a numeric value."
: "Estimate point needs to be a character value."
? t("project_settings.estimates.validation.numeric")
: t("project_settings.estimates.validation.character")
);
}
} else handleEstimatePointError && handleEstimatePointError(estimateInputValue, "Estimate value already exists.");
} else
handleEstimatePointError && handleEstimatePointError(estimateInputValue || "", "Estimate value cannot be empty.");
};
// derived values
const inputProps = {
type: "text",
maxlength: MAX_ESTIMATE_POINT_INPUT_LENGTH,
} else if (handleEstimatePointError)
handleEstimatePointError(estimateInputValue, t("project_settings.estimates.validation.already_exists"));
} else if (handleEstimatePointError)
handleEstimatePointError(estimateInputValue || "", t("project_settings.estimates.validation.empty"));
};
return (
@ -173,20 +172,17 @@ export const EstimatePointUpdate: FC<TEstimatePointUpdate> = observer((props) =>
estimatePointError?.message ? `border-red-500` : `border-custom-border-200`
)}
>
<input
<EstimateInputRoot
estimateType={estimateType}
handleEstimateInputValue={handleEstimateInputValue}
value={estimateInputValue}
onChange={(e) => handleEstimateInputValue(e.target.value)}
className="border-none focus:ring-0 focus:border-0 focus:outline-none p-2.5 w-full bg-transparent"
placeholder="Enter estimate point"
autoFocus
{...inputProps}
/>
{estimatePointError?.message && (
<>
<Tooltip
tooltipContent={
(estimateInputValue || "")?.length >= 1
? `You have some unsaved changes, Please save them before clicking on done`
? t("project_settings.estimates.validation.unsaved_changes")
: estimatePointError?.message
}
position="bottom"