feat: delete estimates

taskany-inc · Oct 19, 2023 · 234f915 · 234f915
1 parent ea8160f
commit 234f915
Show file tree

Hide file tree

Showing 9 changed files with 77 additions and 38 deletions.
diff --git a/src/components/Estimate/Estimate.tsx b/src/components/Estimate/Estimate.tsx
@@ -59,7 +59,7 @@ export const Estimate = React.forwardRef<HTMLDivElement, EstimateProps>(({ 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<HTMLDivElement, EstimateProps>(({ 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
@@ -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<T> {
+    (state: T): T;
+}
+
+interface EstimateContext {
     readOnly: ReadOnlyConfig;
-    setReadOnly: (update: ReadOnlyConfig | ((cfg: ReadOnlyConfig) => ReadOnlyConfig)) => void;
+    setReadOnly: (update: ReadOnlyConfig | SetState<ReadOnlyConfig>) => void;
     year?: number;
-    setYear: (year?: number) => void;
+    setYear: (year?: number | SetState<number | undefined>) => void;
     quarter?: QuartersKeys;
-    setQuarter: (quarter?: QuartersKeys) => void;
+    setQuarter: (quarter?: QuartersKeys | SetState<QuartersKeys | undefined>) => void;
     quarterAlias?: QuartersAliases;
-    setQuarterAlias: (alias?: QuartersAliases) => void;
+    setQuarterAlias: (alias?: QuartersAliases | SetState<QuartersAliases | undefined>) => void;
     date?: Date | undefined;
-    setDate: (date?: Date) => void;
-};
+    setDate: (date?: Date | SetState<Date | undefined>) => void;
+}
 
 const estimateContext = createContext<EstimateContext>({
     readOnly: {

diff --git 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 (
         <EstimateOption
             title={tr('Date title')}
             clue={tr('Date clue')}
             readOnly={readOnly.date}
             onClick={onClick}
+            onClose={onClose}
             renderTrigger={() => (
                 <InputMask
                     mask={tr('Date input mask')}

diff --git a/src/components/EstimateOption.tsx b/src/components/EstimateOption.tsx
@@ -1,6 +1,6 @@
 import { Text, nullable } from '@taskany/bricks';
 import { gapXs, gapS, gray9, gray7 } from '@taskany/colors';
-import { IconPlusCircleSolid } from '@taskany/icons';
+import { IconPlusCircleSolid, IconXCircleSolid } from '@taskany/icons';
 import React, { ReactNode } from 'react';
 import styled from 'styled-components';
 
@@ -25,20 +25,32 @@ interface EstimateOptionProps {
     clue?: string | null;
     readOnly?: boolean;
     onClick?: () => void;
+    onClose?: () => void;
     renderTrigger?: () => ReactNode;
 }
 
-export const EstimateOption: React.FC<EstimateOptionProps> = ({ title, clue, readOnly, onClick, renderTrigger }) => {
+export const EstimateOption: React.FC<EstimateOptionProps> = ({
+    title,
+    clue,
+    readOnly,
+    onClick,
+    renderTrigger,
+    onClose,
+}) => {
     return (
         <StyledWrapper>
             <StyledContent>
                 {nullable(title, (t) => (
                     <Text size="s">{t}</Text>
                 ))}
 
-                {nullable(readOnly, () => (
-                    <IconPlusCircleSolid size="xs" color={gray9} onClick={onClick} />
-                ))}
+                {nullable(
+                    readOnly,
+                    () => (
+                        <IconPlusCircleSolid size="xs" color={gray9} onClick={onClick} />
+                    ),
+                    <IconXCircleSolid size="xs" color={gray9} onClick={onClose} />,
+                )}
             </StyledContent>
 
             {nullable(clue, (c) => (

diff --git a/src/components/EstimateQuarter/EstimateQuarter.tsx b/src/components/EstimateQuarter/EstimateQuarter.tsx
@@ -67,12 +67,28 @@ export const EstimateQuarter: React.FC<EstimateQuarterProps> = ({ 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<EstimateQuarterProps> = ({ aliases }) =>
         [setYear, setQuarter, setQuarterAlias],
     );
 
-    const onClick = useCallback(() => {
-        setReadOnly({
-            quarter: false,
-            year: false,
-            date: true,
-        });
-    }, [setReadOnly]);
-
     return (
         <EstimateOption
             title={tr('Quarter title')}
@@ -108,6 +116,7 @@ export const EstimateQuarter: React.FC<EstimateQuarterProps> = ({ aliases }) =>
                 .join('')}
             readOnly={readOnly.quarter}
             onClick={onClick}
+            onClose={onClose}
             renderTrigger={() => (
                 <StyledButtonGroupsWrapper>
                     <ButtonGroup items={quartersList} value={quarter} onChange={onQuarterChange} />

diff --git a/src/components/EstimateYear/EstimateYear.tsx b/src/components/EstimateYear/EstimateYear.tsx
@@ -38,26 +38,33 @@ 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(() => {
         setReadOnly((prev) => ({ ...prev, date: true, year: false }));
     }, [setReadOnly]);
 
     useEffect(() => {
-        if (!readOnly.year && !year) {
-            changeHander(currentYear);
+        if (!readOnly.year) {
+            setYear((value) => value || currentYear);
         }
-    }, [readOnly.year, year, changeHander]);
+    }, [readOnly.year, setYear]);
 
     return (
         <EstimateOption
@@ -69,6 +76,7 @@ export const EstimateYear: React.FC = () => {
                 .join('')}
             readOnly={readOnly.year}
             onClick={onClick}
+            onClose={onClose}
             renderTrigger={() => (
                 <StyledTriggerWrapper>
                     <StyledItems>
@@ -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)}
                             />
                         ))}
                     </StyledItems>

diff --git a/src/components/GoalForm/GoalFormEstimate.tsx b/src/components/GoalForm/GoalFormEstimate.tsx
@@ -10,7 +10,7 @@ type Estimate = {
 };
 
 type GoalFormEstimateProps = Omit<ComponentProps<typeof EstimatePopup>, 'onChange' | 'value'> & {
-    onChange: (date?: Estimate) => void;
+    onChange: (date: Estimate | null) => void;
     value?: Estimate;
 };
 
@@ -33,7 +33,7 @@ export const GoalFormEstimate = React.forwardRef<HTMLDivElement, GoalFormEstimat
                               date: getDateString(value.range.end),
                               type: value.type,
                           }
-                        : undefined,
+                        : null,
                 );
 
                 setEstimate(value);

diff --git a/src/components/HistoryRecord/HistoryRecord.tsx b/src/components/HistoryRecord/HistoryRecord.tsx
@@ -305,6 +305,7 @@ export const HistoryRecordEstimate: React.FC<HistoryChangeProps<string>> = ({ fr
     return (
         // FIXME: it must be EstimateBadge
         <HistorySimplifyRecord
+            withPretext={!!to}
             from={nullable(from ? decodeHistoryEstimate(from) : null, (fe) => (
                 <Tag size="s">{formateEstimate(fe.date, { locale, type: fe.type })}</Tag>
             ))}

diff --git 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,
                 });