restructured actions for privacy office table
This commit is contained in:
@@ -12,10 +12,9 @@ import SecurityIcon from "@mui/icons-material/Security";
|
||||
import WindowIcon from "@mui/icons-material/Window";
|
||||
import { Box, Stack } from "@mui/material";
|
||||
import moment from "jalali-moment";
|
||||
import { useMemo, useState } from "react";
|
||||
import { useMemo } from "react";
|
||||
import RowActions from "./RowActions";
|
||||
|
||||
import ActionDialog from "./RowActions/ActionsDialog";
|
||||
import ShowPrimaryArea from "./ShowPrimaryArea";
|
||||
|
||||
const PrivacyOfficeList = () => {
|
||||
@@ -31,20 +30,6 @@ const PrivacyOfficeList = () => {
|
||||
if (state_id === 12) return <AutorenewIcon sx={{ color: "#899878" }} />;
|
||||
};
|
||||
|
||||
const [modal, setModal] = useState({
|
||||
open: false,
|
||||
type: null, // "reject" | "confirm" | "referral"
|
||||
rowId: null,
|
||||
});
|
||||
|
||||
const handleOpenModal = (type, rowId) => {
|
||||
setModal({ open: true, type, rowId });
|
||||
};
|
||||
|
||||
const handleCloseModal = () => {
|
||||
setModal({ open: false, type: null, rowId: null });
|
||||
};
|
||||
|
||||
const columns = useMemo(() => {
|
||||
return [
|
||||
{
|
||||
@@ -250,11 +235,9 @@ const PrivacyOfficeList = () => {
|
||||
table_name={"PrivacyOfficeList"}
|
||||
enableRowActions
|
||||
positionActionsColumn={"first"}
|
||||
RowActions={(props) => <RowActions {...props} onActionClick={handleOpenModal} />}
|
||||
RowActions={RowActions}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<ActionDialog open={modal.open} type={modal.type} rowDataId={modal.rowId} onClose={handleCloseModal} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,101 +1,18 @@
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Checkbox,
|
||||
Dialog,
|
||||
DialogActions,
|
||||
DialogContent,
|
||||
DialogTitle,
|
||||
FormControlLabel,
|
||||
TextField,
|
||||
} from "@mui/material";
|
||||
import { useEffect, useState } from "react";
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
|
||||
const ActionDialog = ({ open, type, rowDataId, onClose }) => {
|
||||
const [needsAccessRoad, setNeedsAccessRoad] = useState(false);
|
||||
const {
|
||||
control,
|
||||
handleSubmit,
|
||||
reset,
|
||||
formState: { isSubmitting },
|
||||
} = useForm({
|
||||
defaultValues: {
|
||||
expert_description: "",
|
||||
need_payment: false,
|
||||
},
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
reset({
|
||||
expert_description: "",
|
||||
need_payment: false,
|
||||
});
|
||||
}
|
||||
}, [open, reset]);
|
||||
import { Dialog, DialogTitle } from "@mui/material";
|
||||
import RenderActionForm from "./RenderActionForm";
|
||||
|
||||
const ActionDialog = ({ open, type, rowData, onClose, mutate }) => {
|
||||
const actionLabel = {
|
||||
reject: "رد درخواست",
|
||||
confirm: "تایید درخواست",
|
||||
referral: "ارجاع درخواست",
|
||||
reject_request: "رد درخواست",
|
||||
confirm_request: "تایید درخواست",
|
||||
refer_request: "ارجاع درخواست",
|
||||
}[type];
|
||||
|
||||
const onSubmit = (formData) => {
|
||||
console.log("Row data id:", rowDataId);
|
||||
console.log("Action type:", type);
|
||||
console.log("Form data:", formData);
|
||||
|
||||
// TODO: Implement the API call here
|
||||
|
||||
onClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open} fullWidth maxWidth="xs" onClose={onClose}>
|
||||
<DialogTitle>{actionLabel}</DialogTitle>
|
||||
|
||||
<DialogContent>
|
||||
<Box sx={{ display: "flex", flexDirection: "column", mt: 1 }}>
|
||||
<Controller
|
||||
name="expert_description"
|
||||
control={control}
|
||||
render={({ field }) => <TextField {...field} fullWidth multiline minRows={3} label="توضیحات" />}
|
||||
/>
|
||||
{type === "confirm" && (
|
||||
<>
|
||||
<Controller
|
||||
name="need_payment"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<FormControlLabel
|
||||
control={<Checkbox {...field} checked={field.value} />}
|
||||
label="نیاز به پرداخت"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox
|
||||
checked={needsAccessRoad}
|
||||
onChange={(e) => setNeedsAccessRoad(e.target.checked)}
|
||||
/>
|
||||
}
|
||||
label="به راه دسترسی نیاز دارد"
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</Box>
|
||||
</DialogContent>
|
||||
|
||||
<DialogActions>
|
||||
<Button onClick={onClose} variant="outlined" disabled={isSubmitting}>
|
||||
انصراف
|
||||
</Button>
|
||||
<Button variant="contained" onClick={handleSubmit(onSubmit)} disabled={isSubmitting}>
|
||||
انجام عملیات
|
||||
</Button>
|
||||
</DialogActions>
|
||||
<RenderActionForm type={type} rowData={rowData} mutate={mutate} />
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
import ThumbUpIcon from "@mui/icons-material/ThumbUp";
|
||||
import { IconButton, Tooltip } from "@mui/material";
|
||||
|
||||
const ConfirmAction = ({ onClick }) => {
|
||||
const ConfirmAction = ({ onClick, disabled }) => {
|
||||
return (
|
||||
<>
|
||||
<Tooltip title="تایید اقدام">
|
||||
<IconButton color="success" onClick={onClick}>
|
||||
<IconButton color="success" onClick={onClick} disabled={disabled}>
|
||||
<ThumbUpIcon />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
export default function ComputePaymentForm({ mutate }) {
|
||||
return <div>ComputePaymentForm</div>;
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
export default function ConfirmFileForm({ mutate }) {
|
||||
return <div>ConfirmFileForm</div>;
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
export default function ConfirmRequestForm({ mutate }) {
|
||||
return <div>ConfirmRequestForm</div>;
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import { Box } from "@mui/material";
|
||||
|
||||
export default function ReferForm({ mutate }) {
|
||||
return (
|
||||
<Box sx={{ display: "flex", flexDirection: "column", mt: 1 }}>
|
||||
<div></div>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
export default function RejectFileForm({ mutate }) {
|
||||
return <div>RejectFileForm</div>;
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
export default function RejectRequestForm({ mutate }) {
|
||||
return <div>RejectRequestForm</div>;
|
||||
}
|
||||
@@ -1,11 +1,11 @@
|
||||
import { Reply } from "@mui/icons-material";
|
||||
import { IconButton, Tooltip } from "@mui/material";
|
||||
|
||||
const ReferralAction = ({ onClick }) => {
|
||||
const ReferralAction = ({ onClick, disabled }) => {
|
||||
return (
|
||||
<>
|
||||
<Tooltip title="ارجاع درخواست">
|
||||
<IconButton color="info" onClick={onClick}>
|
||||
<IconButton color="info" onClick={onClick} disabled={disabled}>
|
||||
<Reply />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
import ThumbDownIcon from "@mui/icons-material/ThumbDown";
|
||||
import { IconButton, Tooltip } from "@mui/material";
|
||||
|
||||
const RejectAction = ({ onClick }) => {
|
||||
const RejectAction = ({ onClick, disabled }) => {
|
||||
return (
|
||||
<>
|
||||
<Tooltip title="عدم تایید اقدام">
|
||||
<IconButton color="error" onClick={onClick}>
|
||||
<IconButton color="error" onClick={onClick} disabled={disabled}>
|
||||
<ThumbDownIcon />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
|
||||
@@ -0,0 +1,76 @@
|
||||
import { DialogContent } from "@mui/material";
|
||||
import ComputePaymentForm from "./Forms/ComputePaymentForm";
|
||||
import ConfirmFileForm from "./Forms/ConfirmFileForm";
|
||||
import ConfirmRequestForm from "./Forms/ConfirmRequestForm";
|
||||
import ReferForm from "./Forms/ReferForm";
|
||||
import RejectFileForm from "./Forms/RejectFileForm";
|
||||
import RejectRequestForm from "./Forms/RejectRequestForm";
|
||||
|
||||
export default function RenderActionForm({ type, rowData, mutate }) {
|
||||
const formType = `${type}_${rowData?.state_id}`;
|
||||
|
||||
console.log(formType);
|
||||
|
||||
function renderForm() {
|
||||
switch (formType) {
|
||||
case "refer_request_2":
|
||||
return <ReferForm mutate={mutate} />;
|
||||
case "reject_request_2":
|
||||
return <RejectRequestForm mutate={mutate} />;
|
||||
case "reject_request_5":
|
||||
return <RejectFileForm mutate={mutate} />;
|
||||
case "confirm_request_2":
|
||||
return <ConfirmRequestForm mutate={mutate} />;
|
||||
case "confirm_request_5":
|
||||
return <ConfirmFileForm mutate={mutate} />;
|
||||
case "confirm_request_13":
|
||||
return <ComputePaymentForm mutate={mutate} />;
|
||||
default:
|
||||
return <></>;
|
||||
}
|
||||
}
|
||||
|
||||
return <DialogContent>{renderForm(formType)}</DialogContent>;
|
||||
}
|
||||
|
||||
/*
|
||||
<Box sx={{ display: "flex", flexDirection: "column", mt: 1 }}>
|
||||
<Controller
|
||||
name="expert_description"
|
||||
control={control}
|
||||
render={({ field }) => <TextField {...field} fullWidth multiline minRows={3} label="توضیحات" />}
|
||||
/>
|
||||
{type === "confirm_request" && (
|
||||
<>
|
||||
<Controller
|
||||
name="need_payment"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<FormControlLabel
|
||||
control={<Checkbox {...field} checked={field.value} />}
|
||||
label="نیاز به پرداخت وجه خزانه"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox
|
||||
checked={needsAccessRoad}
|
||||
onChange={(e) => setNeedsAccessRoad(e.target.checked)}
|
||||
/>
|
||||
}
|
||||
label="نیاز به راه دسترسی"
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
<DialogActions>
|
||||
<Button onClick={onClose} variant="outlined" disabled={isSubmitting}>
|
||||
انصراف
|
||||
</Button>
|
||||
<Button variant="contained" onClick={handleSubmit(onSubmit)} disabled={isSubmitting}>
|
||||
انجام عملیات
|
||||
</Button>
|
||||
</DialogActions>
|
||||
*/
|
||||
@@ -1,20 +1,54 @@
|
||||
import { Box } from "@mui/material";
|
||||
import { useState } from "react";
|
||||
import ActionDialog from "./ActionsDialog";
|
||||
import ConfirmAction from "./ConfirmAction";
|
||||
import ReferralAction from "./ReferralAction";
|
||||
import RejectAction from "./RejectAction";
|
||||
|
||||
const RowActions = ({
|
||||
row: {
|
||||
original: { id },
|
||||
},
|
||||
onActionClick,
|
||||
}) => {
|
||||
const RowActions = ({ row: { original }, mutate }) => {
|
||||
const [modal, setModal] = useState({
|
||||
open: false,
|
||||
type: null, // "reject_request" | "confirm_request" | "refer_request"
|
||||
rowData: null,
|
||||
});
|
||||
|
||||
const handleOpenModal = (type, rowData) => {
|
||||
setModal({ open: true, type, rowData });
|
||||
};
|
||||
|
||||
const handleCloseModal = () => {
|
||||
setModal({ open: false, type: null, rowData: null });
|
||||
};
|
||||
|
||||
const stateId = original.state_id;
|
||||
|
||||
const disabled = {
|
||||
referral: stateId !== 2,
|
||||
reject: stateId !== 2 && stateId !== 5,
|
||||
confirm: stateId !== 2 && stateId !== 5 && stateId !== 13,
|
||||
};
|
||||
|
||||
return (
|
||||
<Box sx={{ display: "flex", gap: 1, justifyContent: "center" }}>
|
||||
<ReferralAction onClick={() => onActionClick("referral", id)} />
|
||||
<RejectAction onClick={() => onActionClick("reject", id)} />
|
||||
<ConfirmAction onClick={() => onActionClick("confirm", id)} />
|
||||
</Box>
|
||||
<>
|
||||
<Box sx={{ display: "flex", gap: 1, justifyContent: "center" }}>
|
||||
<ReferralAction
|
||||
onClick={() => handleOpenModal("refer_request", original)}
|
||||
disabled={disabled.referral}
|
||||
/>
|
||||
<RejectAction onClick={() => handleOpenModal("reject_request", original)} disabled={disabled.reject} />
|
||||
<ConfirmAction
|
||||
onClick={() => handleOpenModal("confirm_request", original)}
|
||||
disabled={disabled.confirm}
|
||||
/>
|
||||
</Box>
|
||||
<ActionDialog
|
||||
open={modal.open}
|
||||
type={modal.type}
|
||||
rowData={modal.rowData}
|
||||
onClose={handleCloseModal}
|
||||
mutate={mutate}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -240,3 +240,4 @@ export const GET_CITY_ADMIN_LIST = api + "/api/v3/harim/province_office";
|
||||
export const GET_INQUIRY_PRIVACY_STATE_LIST = api + "/api/v3/harim/detail/states";
|
||||
export const CITY_ADMIN_FEEDBACK = api + "/api/v3/harim/province_office/feedback";
|
||||
export const GET_PRIVACY_ADMIN_LIST = api + "/api/v3/harim/harim_office";
|
||||
export const PRIVACY_ADMIN_ACTION_API = api + "/api/v3/harim/harim_office";
|
||||
|
||||
Reference in New Issue
Block a user