Merge branch 'feature/refer_form' into 'develop'

refer form admin city/province

See merge request witel-front-end/rms!22
This commit is contained in:
AmirHossein Mahmoodi
2024-09-18 06:12:50 +00:00
16 changed files with 527 additions and 22 deletions

View File

@@ -0,0 +1,18 @@
const data = [
{
id : 1,
name : "تهران"
},
{
id : 2,
name : "ری"
},
{
id : 3,
name : "اندیشه"
},
];
export async function GET() {
return Response.json({ data });
}

View File

@@ -1,5 +1,39 @@
const data = [
// put your fake data here
{
id : 1,
aplication_number : 1,
application_date : "1",
province:"tehran",
city:"tehran"
},
{
id : 2,
aplication_number : 2,
application_date : "1",
province:"tehran",
city:"tehran"
},
{
id : 3,
aplication_number : 3,
application_date : "1",
province:"tehran",
city:"tehran"
},
{
id : 4,
aplication_number : 4,
application_date : "1",
province:"tehran",
city:"tehran"
},
{
id : 5,
aplication_number : 5,
application_date : "1",
province:"tehran",
city:"tehran"
},
];
export async function GET() {

View File

@@ -0,0 +1,18 @@
const data = [
{
id : 1,
name : "تهران"
},
{
id : 2,
name : "مشهد"
},
{
id : 3,
name : "اصفهان"
},
];
export async function GET() {
return Response.json({ data });
}

View File

@@ -0,0 +1,3 @@
export async function POST() {
return Response.json({message : "Done"});
}

View File

@@ -0,0 +1,140 @@
import {
Autocomplete,
Button, CircularProgress,
DialogActions,
DialogContent,
FormControl, FormHelperText,
InputLabel, OutlinedInput,
Stack,
TextField, Typography
} from "@mui/material";
import {Controller, useForm} from "react-hook-form";
import {yupResolver} from "@hookform/resolvers/yup";
import {object, string} from "yup";
import StyledForm from "@/core/components/StyledForm";
import useCities from "@/lib/hooks/useCities";
import useRequest from "@/lib/hooks/useRequest";
import {REFER_ADMIN_CITY} from "@/core/utils/routes";
const validationSchema = object({
description: string().required("وارد کردن توضیحات الزامیست!"),
city: string().required("وارد کردن شهرستان الزامیست!"),
});
const ReferFormContext = ({setOpenReferDialog, rowId, mutate}) => {
const defaultValues = {
description: "",
city: "",
};
const { cities, loadingCities, errorCities } = useCities()
const requestServer = useRequest({auth: true})
const {
control,
register,
handleSubmit,
formState: {isSubmitting, errors, touchedFields},
} = useForm({defaultValues, resolver: yupResolver(validationSchema), mode : "onBlur"})
const onSubmit = async (data) => {
const formData = new FormData();
formData.append("description", data.description);
formData.append("cityId", data.city);
requestServer(`${REFER_ADMIN_CITY}/${rowId}`, 'post', {
data: formData,
}).then(() => {
setOpenReferDialog(false)
mutate()
}).catch(() => {})
}
return (
<StyledForm onSubmit={handleSubmit(onSubmit)}>
<DialogContent>
<Stack spacing={2}>
<Stack>
<FormControl error={!!errors.description} size="small" fullWidth variant="outlined">
<InputLabel sx={{pt : 1}} htmlFor="description">توضیحات</InputLabel>
<OutlinedInput
id="description"
label={"توضیحات"}
multiline
rows={8}
autoComplete="off"
{...register("description")}
size="small"
fullWidth
sx={{mt: 1}}
type="text"
/>
<FormHelperText
id="description">{errors.description ? errors.description.message : null}</FormHelperText>
</FormControl>
</Stack>
<Stack>
<Controller
name="city"
control={control}
render={({field: {onChange, value}, fieldState : {error }}) => (
<FormControl error={!!error} size="small" fullWidth variant="outlined">
<InputLabel htmlFor="city"/>
{errorCities ? (
<Typography color={"red"}>خطایی در دریافت شهرستان ها رخ داده است!</Typography>
) :
loadingCities ? (
<Typography sx={{display : 'flex', alignItems : "center", gap : 2}}>
<CircularProgress size={20} />
درحال دریافت لیست شهرستان ها
</Typography>
) : (
<Autocomplete
id="city"
size="small"
value={cities.find(city => city.id === value) || null}
disablePortal
options={cities}
getOptionLabel={(city) => city.name}
isOptionEqualToValue={(option, value) => option.id === value.id}
onChange={(event, newValue) => {
onChange(newValue ? newValue.id : "");
}}
renderInput={(params) => (
<TextField
{...params}
autoComplete="off"
error={!!errors.city}
fullWidth
label="شهرستان"
/>
)}
/>
)}
<FormHelperText id="city">
{errors.city ? errors.city.message : null}
</FormHelperText>
</FormControl>
)}
/>
</Stack>
</Stack>
</DialogContent>
<DialogActions>
<Button
onClick={() => setOpenReferDialog(false)}
variant="outlined"
color="secondary"
autoFocus
>
{"انصراف"}
</Button>
<Button
variant="contained"
color="primary"
type={"submit"}
disabled={isSubmitting}
>
{isSubmitting ? "در حال اسال" :"ارجاع"}
</Button>
</DialogActions>
</StyledForm>
)
}
export default ReferFormContext

View File

@@ -0,0 +1,36 @@
import {Dialog, DialogTitle, IconButton, Stack, Tooltip} from "@mui/material";
import ReplyIcon from '@mui/icons-material/Reply';
import DialogTransition from "@/core/components/DialogTransition";
import ReferFormContext from "@/components/dashboard/inquiryPrivacy/cityAdmin/zaminGov/RowActions/Refer/ReferFormContext";
import {useState} from "react";
const ReferForm = ({rowId, mutate}) => {
const [openReferDialog, setOpenReferDialog] = useState(false)
return(
<Stack>
<Tooltip title="ارجاع به شهرستان دیگر" arrow placement="right">
<IconButton
color="primary"
sx={{textTransform: "unset", alignSelf: "center"}}
onClick={() => {
setOpenReferDialog(true)
}}
>
<ReplyIcon/>
</IconButton>
</Tooltip>
<Dialog PaperProps={{
sx: {
transition: 'all .3s',
boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'
}
}} open={openReferDialog} fullWidth TransitionComponent={DialogTransition}>
<DialogTitle sx={{ m: 0, p: 2, borderBottom: 1, borderColor: "divider" }} id="create-dialog">
ارجاع به شهرستان دیگر
</DialogTitle>
<ReferFormContext rowId={rowId} mutate={mutate} setOpenReferDialog={setOpenReferDialog} />
</Dialog>
</Stack>
)
}
export default ReferForm

View File

@@ -0,0 +1,8 @@
import ReferForm from "@/components/dashboard/inquiryPrivacy/cityAdmin/zaminGov/RowActions/Refer";
const RowActions = ({row, mutate}) => {
return(
<ReferForm mutate={mutate} rowId={row.getValue("id")} /> //rowId should pass
)
}
export default RowActions

View File

@@ -4,10 +4,19 @@ import { useMemo } from "react";
import { Box, IconButton, Tooltip } from "@mui/material";
import DataTableWithAuth from "@/core/components/DataTableWithAuth";
import AssignmentIcon from "@mui/icons-material/Assignment";
import RowActions from "@/components/dashboard/inquiryPrivacy/cityAdmin/zaminGov/RowActions";
const TaskList = () => {
const columns = useMemo(
() => [
{
accessorKey: "id",
header: "کد یکتا",
id: "id",
enableColumnFilter: false,
datatype: "text",
filterFn: "notEquals",
},
{
accessorKey: "aplication_number",
header: "شماره درخواست",
@@ -112,16 +121,7 @@ const TaskList = () => {
table_name={"cityAdminZaminGovList"}
enableRowActions
positionActionsColumn={"last"}
renderRowActions={({ row, table }) => (
<Tooltip arrow title="نمایش جزئیات" placement="right">
<IconButton
color="success"
onClick={() => console.log("next part")}
>
<AssignmentIcon />
</IconButton>
</Tooltip>
)}
renderRowActions={({ row, table }) => <RowActions row={row}/>}
/>
</Box>
</>

View File

@@ -1,10 +1,10 @@
"use client";
import PageTitle from "@/core/components/PageTitle";
import { Stack } from "@mui/material";
import TaskList from "./TaskList";
const CityAdminZaminGovComponent = () => {
return (
<Stack spacing={1}>
<PageTitle title={"استعلام حرائم پنجره واحد"} />

View File

@@ -0,0 +1,141 @@
import {
Autocomplete,
Button, CircularProgress,
DialogActions,
DialogContent,
FormControl, FormHelperText,
InputLabel, OutlinedInput,
Stack,
TextField, Typography
} from "@mui/material";
import {Controller, useForm} from "react-hook-form";
import {yupResolver} from "@hookform/resolvers/yup";
import {object, string} from "yup";
import StyledForm from "@/core/components/StyledForm";
import useProvinces from "@/lib/hooks/useProvince";
import useRequest from "@/lib/hooks/useRequest";
import {REFER_ADMIN_PROVINCE} from "@/core/utils/routes";
const validationSchema = object({
description: string().required("وارد کردن توضیحات الزامیست!"),
province: string().required("وارد کردن استان الزامیست!"),
});
const ReferFormContext = ({setOpenReferDialog, rowId, mutate}) => {
const defaultValues = {
description: "",
province: "",
};
const { provinces, loadingProvinces, errorProvinces } = useProvinces()
const requestServer = useRequest({auth: true})
const {
control,
register,
handleSubmit,
formState: {isSubmitting, errors, touchedFields},
} = useForm({defaultValues, resolver: yupResolver(validationSchema), mode : "onBlur"})
const onSubmit = async (data) => {
const formData = new FormData();
formData.append("description", data.description);
formData.append("provinceId", data.province);
requestServer(`${REFER_ADMIN_PROVINCE}/${rowId}`, 'post', {
data: formData,
}).then(() => {
setOpenReferDialog(false)
mutate()
}).catch(() => {})
}
return (
<StyledForm onSubmit={handleSubmit(onSubmit)}>
<DialogContent>
<Stack spacing={2}>
<Stack>
<FormControl error={!!errors.description} size="small" fullWidth variant="outlined">
<InputLabel sx={{pt : 1}} htmlFor="description">توضیحات</InputLabel>
<OutlinedInput
id="description"
label={"توضیحات"}
multiline
rows={8}
autoComplete="off"
{...register("description")}
size="small"
fullWidth
sx={{mt: 1}}
type="text"
/>
<FormHelperText
id="description">{errors.description ? errors.description.message : null}</FormHelperText>
</FormControl>
</Stack>
<Stack>
<Controller
name="province"
control={control}
render={({field: {onChange, value}, fieldState : {error }}) => (
<FormControl error={!!error} size="small" fullWidth variant="outlined">
<InputLabel htmlFor="province"/>
{errorProvinces ? (
<Typography color={"red"}>خطایی در دریافت استان ها رخ داده است!</Typography>
) :
loadingProvinces ? (
<Typography sx={{display : 'flex', alignItems : "center", gap : 2}}>
<CircularProgress size={20} />
درحال دریافت لیست استان ها
</Typography>
) : (
<Autocomplete
id="province"
size="small"
value={provinces.find(province => province.id === value) || null}
disablePortal
options={provinces}
getOptionLabel={(province) => province.name}
isOptionEqualToValue={(option, value) => option.id === value.id}
onChange={(event, newValue) => {
onChange(newValue ? newValue.id : "");
}}
renderInput={(params) => (
<TextField
{...params}
autoComplete="off"
error={!!errors.province}
fullWidth
label="استان"
/>
)}
/>
)}
<FormHelperText id="province">
{errors.province ? errors.province.message : null}
</FormHelperText>
</FormControl>
)}
/>
</Stack>
</Stack>
</DialogContent>
<DialogActions>
<Button
onClick={() => setOpenReferDialog(false)}
variant="outlined"
color="secondary"
autoFocus
>
{"انصراف"}
</Button>
<Button
variant="contained"
color="primary"
type={"submit"}
disabled={isSubmitting}
>
{isSubmitting ? "در حال اسال" :"ارجاع"}
</Button>
</DialogActions>
</StyledForm>
)
}
export default ReferFormContext

View File

@@ -0,0 +1,37 @@
import {Dialog, DialogTitle, IconButton, Stack, Tooltip} from "@mui/material";
import ReplyIcon from '@mui/icons-material/Reply';
import DialogTransition from "@/core/components/DialogTransition";
import {useState} from "react";
import ReferFormContext
from "@/components/dashboard/inquiryPrivacy/provinceAdmin/zaminGov/RowActions/Refer/ReferFormContext";
const ReferForm = ({rowId, mutate}) => {
const [openReferDialog, setOpenReferDialog] = useState(false)
return(
<Stack>
<Tooltip title="ارجاع به استان دیگر" arrow placement="right">
<IconButton
color="primary"
sx={{textTransform: "unset", alignSelf: "center"}}
onClick={() => {
setOpenReferDialog(true)
}}
>
<ReplyIcon/>
</IconButton>
</Tooltip>
<Dialog PaperProps={{
sx: {
transition: 'all .3s',
boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'
}
}} open={openReferDialog} fullWidth TransitionComponent={DialogTransition}>
<DialogTitle sx={{ m: 0, p: 2, borderBottom: 1, borderColor: "divider" }} id="create-dialog">
ارجاع به استان دیگر
</DialogTitle>
<ReferFormContext rowId={rowId} mutate={mutate} setOpenReferDialog={setOpenReferDialog} />
</Dialog>
</Stack>
)
}
export default ReferForm

View File

@@ -0,0 +1,8 @@
import ReferForm from "@/components/dashboard/inquiryPrivacy/provinceAdmin/zaminGov/RowActions/Refer";
const RowActions = ({row, mutate}) => {
return(
<ReferForm mutate={mutate} rowId={row.getValue("id")} /> //rowId should pass
)
}
export default RowActions

View File

@@ -4,10 +4,19 @@ import { useMemo } from "react";
import { Box, IconButton, Tooltip } from "@mui/material";
import DataTableWithAuth from "@/core/components/DataTableWithAuth";
import AssignmentIcon from "@mui/icons-material/Assignment";
import RowActions from "@/components/dashboard/inquiryPrivacy/provinceAdmin/zaminGov/RowActions";
const TaskList = () => {
const columns = useMemo(
() => [
{
accessorKey: "id",
header: "کد یکتا",
id: "id",
enableColumnFilter: false,
datatype: "text",
filterFn: "notEquals",
},
{
accessorKey: "aplication_number",
header: "شماره درخواست",
@@ -112,16 +121,7 @@ const TaskList = () => {
table_name={"provinceAdminZaminGovList"}
enableRowActions
positionActionsColumn={"last"}
renderRowActions={({ row, table }) => (
<Tooltip arrow title="نمایش جزئیات" placement="right">
<IconButton
color="success"
onClick={() => console.log("next part")}
>
<AssignmentIcon />
</IconButton>
</Tooltip>
)}
renderRowActions={({ row, table }) => <RowActions row={row}/>}
/>
</Box>
</>

View File

@@ -6,3 +6,7 @@ export const CHANGE_USER_PASSWORD = api + "/api/v3/profile/change_password";
export const GET_LOGIN_ROUTE = api + "/login_dev";
export const GET_PERMISSIONS_ROUTE = api + "/webapi/user/get-permission";
export const GET_SIDEBAR_BADGE_ROUTE = api + "/v2/activity_statistics";
export const REFER_ADMIN_PROVINCE = "/v3/api/fake-submit"
export const REFER_ADMIN_CITY = "/v3/api/fake-submit"
export const GET_CITY_LISTS = "/v3/api/fake-cities"
export const GET_PROVINCE_LISTS = "/v3/api/fake-provinces"

View File

@@ -0,0 +1,29 @@
import { useState, useEffect } from "react";
import axios from "axios";
import {GET_CITY_LISTS} from "@/core/utils/routes";
const useCities = () => {
const [cities, setCities] = useState([]);
const [loadingCities, setLoadingCities] = useState(true);
const [errorCities, setErrorCities] = useState(null);
useEffect(() => {
const fetchCities = async () => {
try {
const response = await axios.get(`${GET_CITY_LISTS}`);
setCities(response.data.data);
setLoadingCities(false);
} catch (e) {
console.error("Error fetching cities:", e);
setErrorCities(e);
setLoadingCities(false);
}
};
fetchCities();
}, []);
return { cities, loadingCities, errorCities };
};
export default useCities;

View File

@@ -0,0 +1,29 @@
import { useState, useEffect } from "react";
import axios from "axios";
import {GET_PROVINCE_LISTS} from "@/core/utils/routes";
const useProvinces = () => {
const [provinces, setProvinces] = useState([]);
const [loadingProvinces, setLoadingProvinces] = useState(true);
const [errorProvinces, setErrorProvinces] = useState(null);
useEffect(() => {
const fetchCities = async () => {
try {
const response = await axios.get(`${GET_PROVINCE_LISTS}`); // Fetch the cities from the API
setProvinces(response.data.data); // Set the cities data
setLoadingProvinces(false); // Set loading to false after successful fetch
} catch (e) {
console.error("Error fetching cities:", e);
setErrorProvinces(e);
setLoadingProvinces(false);
}
};
fetchCities(); // Call the fetch function
}, []); // Empty dependency array to ensure it only runs once
return { provinces, loadingProvinces, errorProvinces };
};
export default useProvinces;