diff --git a/src/components/Estimate/Estimate.tsx b/src/components/Estimate/Estimate.tsx index 5a6939c15..2e390d0f0 100644 --- a/src/components/Estimate/Estimate.tsx +++ b/src/components/Estimate/Estimate.tsx @@ -59,7 +59,7 @@ export const Estimate = React.forwardRef(({ value const countedValue = useMemo(() => { if (readOnly.quarter && readOnly.year && readOnly.date) { - return value; + return; } if (!readOnly.quarter) { @@ -81,11 +81,11 @@ export const Estimate = React.forwardRef(({ value } return date ? { - range: { end: date }, + range: { end: date, start: null }, type: DateType.Strict, } : undefined; - }, [year, quarter, date, quarterAlias, readOnly, value]); + }, [year, quarter, date, quarterAlias, readOnly]); useEffect(() => { const oldStartDate = value && value.range.start ? getDateString(value.range.start) : null; diff --git a/src/components/Estimate/EstimateProvider.tsx b/src/components/Estimate/EstimateProvider.tsx index e8d39f70b..281ec0fce 100644 --- a/src/components/Estimate/EstimateProvider.tsx +++ b/src/components/Estimate/EstimateProvider.tsx @@ -2,24 +2,28 @@ import { useContext, createContext, FC, ReactNode } from 'react'; import { QuartersAliases, QuartersKeys } from '../../types/date'; -type ReadOnlyConfig = { +interface ReadOnlyConfig { year: boolean; quarter: boolean; date: boolean; -}; +} -type EstimateContext = { +interface SetState { + (state: T): T; +} + +interface EstimateContext { readOnly: ReadOnlyConfig; - setReadOnly: (update: ReadOnlyConfig | ((cfg: ReadOnlyConfig) => ReadOnlyConfig)) => void; + setReadOnly: (update: ReadOnlyConfig | SetState) => void; year?: number; - setYear: (year?: number) => void; + setYear: (year?: number | SetState) => void; quarter?: QuartersKeys; - setQuarter: (quarter?: QuartersKeys) => void; + setQuarter: (quarter?: QuartersKeys | SetState) => void; quarterAlias?: QuartersAliases; - setQuarterAlias: (alias?: QuartersAliases) => void; + setQuarterAlias: (alias?: QuartersAliases | SetState) => void; date?: Date | undefined; - setDate: (date?: Date) => void; -}; + setDate: (date?: Date | SetState) => void; +} const estimateContext = createContext({ readOnly: { diff --git a/src/components/EstimateDate/EstimateDate.tsx b/src/components/EstimateDate/EstimateDate.tsx index 651a4cf8d..6f73a02cb 100644 --- a/src/components/EstimateDate/EstimateDate.tsx +++ b/src/components/EstimateDate/EstimateDate.tsx @@ -71,12 +71,17 @@ export const EstimateDate: React.FC = () => { }); }, [setReadOnly]); + const onClose = useCallback(() => { + setReadOnly((prev) => ({ ...prev, quarter: true, date: true })); + }, [setReadOnly]); + return ( ( void; + onClose?: () => void; renderTrigger?: () => ReactNode; } -export const EstimateOption: React.FC = ({ title, clue, readOnly, onClick, renderTrigger }) => { +export const EstimateOption: React.FC = ({ + title, + clue, + readOnly, + onClick, + renderTrigger, + onClose, +}) => { return ( @@ -36,9 +44,13 @@ export const EstimateOption: React.FC = ({ title, clue, rea {t} ))} - {nullable(readOnly, () => ( - - ))} + {nullable( + readOnly, + () => ( + + ), + , + )} {nullable(clue, (c) => ( diff --git a/src/components/EstimateQuarter/EstimateQuarter.tsx b/src/components/EstimateQuarter/EstimateQuarter.tsx index 6b54a4dcc..039943df9 100644 --- a/src/components/EstimateQuarter/EstimateQuarter.tsx +++ b/src/components/EstimateQuarter/EstimateQuarter.tsx @@ -67,12 +67,28 @@ export const EstimateQuarter: React.FC = ({ aliases }) => const locale = useLocale(); + const onClick = useCallback(() => { + setReadOnly({ + quarter: false, + year: false, + date: true, + }); + setQuarter((value) => value || currentQuarter); + }, [setReadOnly, setQuarter]); + + const onClose = useCallback(() => { + setReadOnly((prev) => ({ ...prev, quarter: true, date: true })); + }, [setReadOnly]); + const onQuarterChange = useCallback( (value?: QuartersKeys) => { + if (!value) { + onClose(); + } setQuarter(value); setQuarterAlias(undefined); }, - [setQuarter, setQuarterAlias], + [setQuarter, setQuarterAlias, onClose], ); const onQuarterAliasesChange = useCallback( @@ -89,14 +105,6 @@ export const EstimateQuarter: React.FC = ({ aliases }) => [setYear, setQuarter, setQuarterAlias], ); - const onClick = useCallback(() => { - setReadOnly({ - quarter: false, - year: false, - date: true, - }); - }, [setReadOnly]); - return ( = ({ aliases }) => .join('')} readOnly={readOnly.quarter} onClick={onClick} + onClose={onClose} renderTrigger={() => ( diff --git a/src/components/EstimateYear/EstimateYear.tsx b/src/components/EstimateYear/EstimateYear.tsx index 9a3f44223..0019fb915 100644 --- a/src/components/EstimateYear/EstimateYear.tsx +++ b/src/components/EstimateYear/EstimateYear.tsx @@ -38,15 +38,22 @@ for (let i = currentYear - 1; i <= currentYear + 4; i++) { export const EstimateYear: React.FC = () => { const { readOnly, setReadOnly, year, setYear, setQuarterAlias } = useEstimateContext(); - const locale = useLocale(); + const onClose = useCallback(() => { + setReadOnly({ date: true, year: true, quarter: true }); + }, [setReadOnly]); + const changeHander = useCallback( (value?: number) => { - setQuarterAlias(undefined); - setYear(value); + if (!value) { + onClose(); + } else { + setQuarterAlias(undefined); + setYear(value); + } }, - [setQuarterAlias, setYear], + [setQuarterAlias, setYear, onClose], ); const onClick = useCallback(() => { @@ -54,10 +61,10 @@ export const EstimateYear: React.FC = () => { }, [setReadOnly]); useEffect(() => { - if (!readOnly.year && !year) { - changeHander(currentYear); + if (!readOnly.year) { + setYear((value) => value || currentYear); } - }, [readOnly.year, year, changeHander]); + }, [readOnly.year, setYear]); return ( { .join('')} readOnly={readOnly.year} onClick={onClick} + onClose={onClose} renderTrigger={() => ( @@ -78,7 +86,7 @@ export const EstimateYear: React.FC = () => { size="s" text={String(y)} checked={year === y} - onClick={() => changeHander(y)} + onClick={() => changeHander(year === y ? undefined : y)} /> ))} diff --git a/src/components/GoalForm/GoalFormEstimate.tsx b/src/components/GoalForm/GoalFormEstimate.tsx index e01cd8555..5ba7895cb 100644 --- a/src/components/GoalForm/GoalFormEstimate.tsx +++ b/src/components/GoalForm/GoalFormEstimate.tsx @@ -10,7 +10,7 @@ type Estimate = { }; type GoalFormEstimateProps = Omit, 'onChange' | 'value'> & { - onChange: (date?: Estimate) => void; + onChange: (date: Estimate | null) => void; value?: Estimate; }; @@ -33,7 +33,7 @@ export const GoalFormEstimate = React.forwardRef> = ({ fr return ( // FIXME: it must be EstimateBadge ( {formateEstimate(fe.date, { locale, type: fe.type })} ))} diff --git a/trpc/router/goal.ts b/trpc/router/goal.ts index 7184a6d7a..a573c5ac0 100644 --- a/trpc/router/goal.ts +++ b/trpc/router/goal.ts @@ -346,7 +346,7 @@ export const goal = router({ .use(goalAccessMiddleware) .mutation(async ({ ctx, input }) => { const { activityId, role } = ctx.session.user; - const [estimate, estimateType = null] = input.estimate + const [estimate = null, estimateType = null] = input.estimate ? [new Date(input.estimate.date), input.estimate.type] : []; @@ -444,7 +444,7 @@ export const goal = router({ history.push({ subject: 'estimate', - action: 'change', + action: nextHistoryEstimate ? 'change' : 'remove', previousValue: prevHistoryEstimate, nextValue: nextHistoryEstimate, });