fix(GoalCriteria): reset form action

taskany-inc · Feb 28, 2024 · 978ac2a · 978ac2a
1 parent 0d5ce9a
commit 978ac2a
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 14 deletions.
diff --git a/src/components/CriteriaForm/CriteriaForm.i18n/en.json b/src/components/CriteriaForm/CriteriaForm.i18n/en.json
@@ -16,5 +16,6 @@
     "Cancel": "",
     "Suggestions": "",
     "This binding is already exist": "",
-    "Criteria title": ""
+    "Criteria title": "",
+    "Reset": "Reset"
 }
diff --git a/src/components/CriteriaForm/CriteriaForm.i18n/ru.json b/src/components/CriteriaForm/CriteriaForm.i18n/ru.json
@@ -16,5 +16,6 @@
     "Cancel": "Отменить",
     "Suggestions": "Предложения",
     "This binding is already exist": "Такая связка уже существует",
-    "Criteria title": "Заголовок критерия"
+    "Criteria title": "Заголовок критерия",
+    "Reset": "Сброс"
 }
diff --git a/src/components/CriteriaForm/CriteriaForm.module.css b/src/components/CriteriaForm/CriteriaForm.module.css
@@ -1,5 +1,8 @@
-.SubmitButton {
+.FormControlButtons {
     margin-left: auto;
+    display: inline-flex;
+    flex-wrap: nowrap;
+    gap: var(--gap-xs);
 }
 
 .FormRow {

diff --git a/src/components/CriteriaForm/CriteriaForm.tsx b/src/components/CriteriaForm/CriteriaForm.tsx
@@ -126,6 +126,7 @@ interface CriteriaFormProps {
 
     setMode: (mode: CriteriaFormMode) => void;
     onSubmit: (values: CriteriaFormValues) => void;
+    onReset: () => void;
     onItemChange?: (item?: SuggestItem) => void;
     onInputChange?: (value?: string) => void;
     validateBindingsFor: (selectedId: string) => Promise<null>;
@@ -237,22 +238,23 @@ export const CriteriaForm = ({
     onInputChange,
     onItemChange,
     onSubmit,
+    onReset,
     items,
     withModeSwitch,
     validityData,
     validateBindingsFor,
     values,
     value,
-    mode,
+    mode: defaultMode,
     setMode,
 }: CriteriaFormProps) => {
     const [showWeightInput, setShowWeightInput] = useState(Boolean(values?.title));
 
-    const { control, watch, setValue, register, resetField, handleSubmit, setError, trigger } =
+    const { control, watch, setValue, register, resetField, handleSubmit, setError, trigger, reset } =
         useForm<CriteriaFormValues>({
             resolver: zodResolver(patchZodSchema(validityData, validateBindingsFor, values)),
             defaultValues: {
-                mode,
+                mode: defaultMode,
                 title: '',
                 weight: '',
             },
@@ -270,6 +272,7 @@ export const CriteriaForm = ({
 
     const title = watch('title');
     const selected = watch('selected');
+    const mode = watch('mode');
 
     useEffect(() => {
         const sub = watch((currentValues, { name, type }) => {
@@ -337,8 +340,25 @@ export const CriteriaForm = ({
         return false;
     }, [mode, title, selected?.id]);
 
+    const resetHandler = useCallback(() => {
+        if (!isEditMode) {
+            setShowWeightInput(false);
+        }
+
+        reset(values);
+        onReset();
+    }, [reset, onReset, isEditMode, values]);
+
+    const onFormSubmit = useCallback<typeof onSubmit>(
+        (values) => {
+            onSubmit(values);
+            resetHandler();
+        },
+        [onSubmit, resetHandler],
+    );
+
     return (
-        <Form onSubmit={handleSubmit(onSubmit)}>
+        <Form onSubmit={handleSubmit(onFormSubmit)} onReset={resetHandler}>
             <GoalSelect
                 items={items}
                 value={value}
@@ -367,6 +387,7 @@ export const CriteriaForm = ({
                             control={control}
                             render={({ field }) => (
                                 <AutoCompleteRadioGroup
+                                    key={field.value}
                                     title={tr('Mode')}
                                     items={radios}
                                     {...field}
@@ -403,12 +424,10 @@ export const CriteriaForm = ({
                             />
                         ))}
 
-                        <Button
-                            type="submit"
-                            text={isEditMode ? tr('Save') : tr('Add')}
-                            view="primary"
-                            className={s.SubmitButton}
-                        />
+                        <div className={s.FormControlButtons}>
+                            <Button type="reset" text={tr('Reset')} view="default" />
+                            <Button type="submit" text={isEditMode ? tr('Save') : tr('Add')} view="primary" />
+                        </div>
                     </div>
                 </>
             </GoalSelect>

diff --git a/src/components/GoalCriteriaSuggest.tsx b/src/components/GoalCriteriaSuggest.tsx
@@ -66,7 +66,7 @@ export const GoalCriteriaSuggest: React.FC<GoalCriteriaComboBoxProps> = ({
             {
                 id: versa ? selectedGoal?.id : id,
             },
-            { enabled: selectedGoal != null, cacheTime: 0 },
+            { cacheTime: 0, enabled: versa ? selectedGoal?.id != null : !!id },
         ),
     ]);
 
@@ -122,6 +122,12 @@ export const GoalCriteriaSuggest: React.FC<GoalCriteriaComboBoxProps> = ({
         [id, versa, validateGoalCriteriaBindings],
     );
 
+    const handleReset = useCallback(() => {
+        setQuery('');
+        setSelectedGoal(values?.selected);
+        setMode(defaultMode);
+    }, [values, defaultMode]);
+
     return (
         <CriteriaForm
             mode={mode}
@@ -131,6 +137,7 @@ export const GoalCriteriaSuggest: React.FC<GoalCriteriaComboBoxProps> = ({
             onInputChange={setQuery}
             onItemChange={handleGoalChange}
             onSubmit={onSubmit}
+            onReset={handleReset}
             items={itemsToRender}
             value={selectedGoals}
             validityData={validityData}