Files
Frontend/src/components/widget/call/CallTabs/CallTabPanel/CallActions/index.jsx

82 lines
2.7 KiB
JavaScript

import LoadingHardPage from "@/core/components/LoadingHardPage";
import { CALL_ACTION } from "@/core/utils/routes";
import { useCall } from "@/lib/contexts/call";
import useRequest from "@/lib/hooks/useRequest";
import { yupResolver } from "@hookform/resolvers/yup";
import { Box, Stack } from "@mui/material";
import { useForm } from "react-hook-form";
import { object, string } from "yup";
import ActionHeader from "./ActionHeader";
import CallActionDescription from "./CallActionDescription";
import CallActionsCategories from "./CallActionsCategories";
import CallActionsSubcategories from "./CallActionsSubcategories";
const defaultValues = {
description: "",
category_id: "",
subcategory_id: "",
};
const validationSchema = object({
category_id: string().required("لطفا نام کاربری را وارد کنید!"),
subcategory_id: string().required("لطفا رمز عبور را وارد کنید!"),
});
function CallActions({ tab }) {
const requestServer = useRequest();
const { closeCall } = useCall();
const {
control,
handleSubmit,
formState: { isSubmitting },
} = useForm({
defaultValues,
resolver: yupResolver(validationSchema),
mode: "all",
});
const onSubmit = handleSubmit(async (data) => {
try {
const formData = new FormData();
data.description != "" && formData.append("description", data.description);
formData.append("category_id", data.category_id);
formData.append("subcategory_id", data.subcategory_id);
await requestServer(`${CALL_ACTION}/${tab.id}`, "post", {
data: formData,
});
closeCall(tab.id);
} catch (error) {}
});
return (
<Stack
sx={{
height: "100%",
}}
>
<ActionHeader tab={tab} />
<Stack sx={{ height: "100%", overflowY: "auto", position: "relative" }}>
<CallActionDescription control={control} />
<CallActionsCategories control={control} />
<CallActionsSubcategories control={control} onSubmit={onSubmit} />
{isSubmitting && (
<Box
sx={{
position: "absolute",
width: "100%",
height: "100%",
opacity: 0.9,
zIndex: 9999,
}}
>
<LoadingHardPage width={80} height={80} loading={true} sx={{ position: "absolute" }} />
</Box>
)}
</Stack>
</Stack>
);
}
export default CallActions;