restructured actions for privacy office table

This commit is contained in:
2025-11-17 17:12:11 +03:30
parent 40f54ed619
commit 16d30665d0
14 changed files with 161 additions and 126 deletions

View File

@@ -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} />
</>
);
};

View File

@@ -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>
);
};

View File

@@ -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>

View File

@@ -0,0 +1,3 @@
export default function ComputePaymentForm({ mutate }) {
return <div>ComputePaymentForm</div>;
}

View File

@@ -0,0 +1,3 @@
export default function ConfirmFileForm({ mutate }) {
return <div>ConfirmFileForm</div>;
}

View File

@@ -0,0 +1,3 @@
export default function ConfirmRequestForm({ mutate }) {
return <div>ConfirmRequestForm</div>;
}

View File

@@ -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>
);
}

View File

@@ -0,0 +1,3 @@
export default function RejectFileForm({ mutate }) {
return <div>RejectFileForm</div>;
}

View File

@@ -0,0 +1,3 @@
export default function RejectRequestForm({ mutate }) {
return <div>RejectRequestForm</div>;
}

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>
*/

View File

@@ -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}
/>
</>
);
};

View File

@@ -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";