refactored explanation field on create flow

road missions operator cartable

src/components/dashboard/roadMissions/operator/Actions/Create/Form/GetItemInfo/ItemSelectField.jsx

@@ -4,6 +4,9 @@ import SelectBox from "@/core/components/SelectBox";
 
 const ItemSelectField = ({ control, setValue }) => {
     const { itemsList, loadingItemsList, errorItemsList } = useRoadItemGetItems();
+    function getItemName(val) {
+        return itemsList.find((item) => item.id === val)?.name;
+    }
 
     return (
         <Controller
@@ -18,14 +21,14 @@ const ItemSelectField = ({ control, setValue }) => {
                     schema={{ name: "name", value: "id" }}
                     error={errorItemsList}
                     helperText={error?.message}
-                    onChange={() => {
-                        field.onChange;
+                    onChange={(value) => {
+                        field.onChange(value);
+                        setValue("explanation", getItemName(value));
                         setValue("sub_item_id", "");
-
                     }}
                 />
             )}
         />
     );
 };
-export default ItemSelectField
+export default ItemSelectField;

src/components/dashboard/roadMissions/operator/Actions/Create/Form/GetItemInfo/SubItemSelectField.jsx

@@ -2,10 +2,16 @@ import useRoadItemGetSubItems from "@/lib/hooks/useRoadItemGetISubtems";
 import { Controller } from "react-hook-form";
 import SelectBox from "@/core/components/SelectBox";
 
-const SubItemSelectField = ({ control, watch }) => {
+const SubItemSelectField = ({ control, watch, setValue, getValues }) => {
     const itemId = watch("item_id");
     const { subItemsList, loadingSubItemsList, errorSubItemsList } = useRoadItemGetSubItems(itemId);
 
+    function createExplanation(val) {
+        const currentExplanation = getValues("explanation");
+        const selectedItem = subItemsList.find((item) => item.id === val)?.name;
+        return `${currentExplanation}-${selectedItem}`;
+    }
+
     return (
         <Controller
             control={control}
@@ -19,10 +25,13 @@ const SubItemSelectField = ({ control, watch }) => {
                     schema={{ name: "name", value: "id" }}
                     error={errorSubItemsList}
                     helperText={error?.message}
-                    onChange={field.onChange}
+                    onChange={(val) => {
+                        field.onChange(val);
+                        setValue("explanation", createExplanation(val));
+                    }}
                 />
             )}
         />
     );
 };
-export default SubItemSelectField;
+export default SubItemSelectField;

src/components/dashboard/roadMissions/operator/Actions/Create/Form/GetItemInfo/index.jsx

@@ -8,17 +8,16 @@ import { yupResolver } from "@hookform/resolvers/yup";
 import { ExitToApp } from "@mui/icons-material";
 import { Box, Button, DialogActions, DialogContent, Grid, Stack } from "@mui/material";
 import { Controller, useForm } from "react-hook-form";
-import { array, number, object, string } from "yup";
-import ItemSelectField
-    from "./ItemSelectField";
-import SubItemSelectField
-    from "./SubItemSelectField";
+import { array, object, string } from "yup";
+import ItemSelectField from "./ItemSelectField";
+import SubItemSelectField from "./SubItemSelectField";
 
 const validationSchema = object({
-    explanation: string().required("موضوع را مشخص کنید!"),
     end_point: string().required("مقصد را مشخص کنید!"),
     region: string().required("محور ماموریت را مشخص کنید!"),
     category_id: string().required("نوع ماموریت را مشخص کنید!"),
+    item_id: string().required("موضوع را مشخص کنید!"),
+    sub_item_id: string().required("اقدام انجام شده را مشخص کنید!"),
     requested_machines: array().min(1, "نوع خودرو را مشخص کنید!").required("نوع خودرو را مشخص کنید!"),
     road_observed_id: string().when("category_id", {
         is: "3",
@@ -39,7 +38,7 @@ const GetItemInfo = ({ allData, setAllData, handlePrev, setTabState }) => {
         road_observed_id: allData.road_observed_id,
     };
 
-    const { control, handleSubmit, watch, setValue } = useForm({
+    const { control, handleSubmit, watch, setValue, getValues } = useForm({
         defaultValues,
         resolver: yupResolver(validationSchema),
         mode: "all",
@@ -60,7 +59,12 @@ const GetItemInfo = ({ allData, setAllData, handlePrev, setTabState }) => {
                                 <ItemSelectField control={control} watch={watch} setValue={setValue} />
                             </Grid>
                             <Grid item xs={12} sm={6}>
-                                <SubItemSelectField control={control} watch={watch} />
+                                <SubItemSelectField
+                                    control={control}
+                                    watch={watch}
+                                    setValue={setValue}
+                                    getValues={getValues}
+                                />
                             </Grid>
                             <Grid item xs={12} sm={6}>
                                 <Controller

src/components/dashboard/roadMissions/operator/Actions/Create/index.jsx

@@ -44,6 +44,8 @@ const Create = ({ mutate }) => {
                           start_date: result.start_date,
                           end_date: result.end_date,
                       }),
+                item_id: result.item_id,
+                sub_item_id: result.sub_item_id,
             },
             hasSidebarUpdate: true,
         })