feature/machines #3
@@ -1,27 +1,27 @@
|
||||
// javascript for production
|
||||
{
|
||||
"compilerOptions": {
|
||||
"paths": {
|
||||
"@/*": ["./src/*"],
|
||||
"^/*": ["./public/*"]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// typescript for local development
|
||||
// {
|
||||
// "compilerOptions": {
|
||||
// "jsx": "react-jsx",
|
||||
// "noUnusedLocals": true,
|
||||
// "noImplicitAny": false,
|
||||
// "checkJs": true,
|
||||
// "allowJs": true,
|
||||
// "strict": true,
|
||||
// "baseUrl": ".",
|
||||
// "paths": {
|
||||
// "@/*": ["./src/*"],
|
||||
// "^/*": ["./public/*"]
|
||||
// }
|
||||
// },
|
||||
// "exclude": ["node_modules"]
|
||||
// }
|
||||
// }
|
||||
|
||||
// typescript for local development
|
||||
{
|
||||
"compilerOptions": {
|
||||
"jsx": "react-jsx",
|
||||
"noUnusedLocals": true,
|
||||
"noImplicitAny": false,
|
||||
"checkJs": true,
|
||||
"allowJs": true,
|
||||
"strict": true,
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": ["./src/*"],
|
||||
"^/*": ["./public/*"]
|
||||
}
|
||||
},
|
||||
"exclude": ["node_modules"]
|
||||
}
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
"use client";
|
||||
import PageLoading from "@/core/components/PageLoading";
|
||||
|
||||
const Loading = () => {
|
||||
return <PageLoading />;
|
||||
};
|
||||
export default Loading;
|
||||
@@ -0,0 +1,19 @@
|
||||
import WithPermission from "@/core/middlewares/withPermission";
|
||||
import MachinesPage from "@/components/dashboard/machines"
|
||||
|
||||
export const metadata = {
|
||||
title: "کارتابل ماشینها",
|
||||
};
|
||||
const Page = () => {
|
||||
return (
|
||||
<>
|
||||
<WithPermission
|
||||
permission_name={["all"]}
|
||||
>
|
||||
<MachinesPage />
|
||||
</WithPermission>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Page;
|
||||
@@ -0,0 +1,33 @@
|
||||
import SelectBox from "@/core/components/SelectBox";
|
||||
import { useEffect, useState } from "react";
|
||||
import useCities from "@/lib/hooks/useCities";
|
||||
|
||||
const CityContent = ({ provinceID, field, fieldState: { error } }) => {
|
||||
const { cityList, loadingCityList, errorCityList } = useCities(provinceID);
|
||||
const [prevDependency, setPrevDependency] = useState(provinceID);
|
||||
|
||||
useEffect(() => {
|
||||
if (prevDependency === provinceID) return;
|
||||
field.onChange(null);
|
||||
setPrevDependency(provinceID);
|
||||
}, [provinceID]);
|
||||
|
||||
return (
|
||||
<SelectBox
|
||||
value={
|
||||
!provinceID ? "dependency" : errorCityList ? "error" : loadingCityList ? "loading" : field.value || ""
|
||||
}
|
||||
label={"شهرستان"}
|
||||
selectors={cityList}
|
||||
schema={{ name: "name_fa", value: "id" }}
|
||||
error={error}
|
||||
onChange={field.onChange}
|
||||
helperText={error?.message}
|
||||
isLoading={loadingCityList}
|
||||
errorEcured={errorCityList}
|
||||
isDependency={!provinceID}
|
||||
dependencyLabel={"ابتدا استان را انتخاب کنید"}
|
||||
/>
|
||||
);
|
||||
};
|
||||
export default CityContent;
|
||||
@@ -0,0 +1,14 @@
|
||||
import { Controller, useWatch } from "react-hook-form";
|
||||
import CityContent from "./CityContent";
|
||||
|
||||
const CityController = ({ control }) => {
|
||||
const provinceID = useWatch({ control, name: "province_id" });
|
||||
return (
|
||||
<Controller
|
||||
name="city_id"
|
||||
control={control}
|
||||
render={(props) => <CityContent provinceID={provinceID} {...props} />}
|
||||
/>
|
||||
);
|
||||
};
|
||||
export default CityController;
|
||||
@@ -0,0 +1,145 @@
|
||||
import StyledForm from "@/core/components/StyledForm";
|
||||
import { yupResolver } from "@hookform/resolvers/yup";
|
||||
import BeenhereIcon from "@mui/icons-material/Beenhere";
|
||||
import ExitToAppIcon from "@mui/icons-material/ExitToApp";
|
||||
import KeyboardDoubleArrowLeftIcon from "@mui/icons-material/KeyboardDoubleArrowLeft";
|
||||
import KeyboardDoubleArrowRightIcon from "@mui/icons-material/KeyboardDoubleArrowRight";
|
||||
import OtherHousesIcon from "@mui/icons-material/OtherHouses";
|
||||
import { Box, Button, DialogActions, DialogContent, Tab, Tabs } from "@mui/material";
|
||||
import { useState } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { number, object, string } from "yup";
|
||||
import MachineInfo from "./MachineInfo";
|
||||
|
||||
function TabPanel(props) {
|
||||
const { children, value, index } = props;
|
||||
return (
|
||||
<div role="tabpanel" hidden={value !== index}>
|
||||
{value === index && <Box>{children}</Box>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const validationSchema = object({
|
||||
name: string().required("وارد کردن نام راهدارخانه الزامیست!"),
|
||||
status: string().required("وارد کردن وضعیت الزامیست!"),
|
||||
type: string().required("وارد کردن نوع الزامیست!"),
|
||||
phone: string().required("وارد کردن تلفن راهدارخانه الزامیست!"),
|
||||
team_num: string().required("وارد کردن تعداد اکیپ الزامیست!"),
|
||||
staff_num: string().required("وارد کردن تعداد پرسنل الزامیست!"),
|
||||
responsible_name: string().required("وارد کردن نام مسئول الزامیست!"),
|
||||
responsible_mobile: string()
|
||||
.required("وارد کردن تلفن مسئول الزامیست!")
|
||||
.matches(/^09\d{9}$/, "شماره تلفن مسئول باید با ۰۹ شروع شده و ۱۱ رقم باشد!"),
|
||||
successor_name: string().required("وارد کردن نام جانشین الزامیست!"),
|
||||
successor_mobile: string()
|
||||
.required("وارد کردن تلفن جانشین الزامیست!")
|
||||
.matches(/^09\d{9}$/, "شماره تلفن جانشین باید با ۰۹ شروع شده و ۱۱ رقم باشد!"),
|
||||
province_id: number().required("وارد کردن استان الزامیست!"),
|
||||
city_id: number().required("وارد کردن شهرستان الزامیست!"),
|
||||
machines_light: string().required("وارد کردن ماشین آلات سبک الزامیست!"),
|
||||
machines_sheavy: string().required("وارد کردن ماشین آلات نیمه سنگین الزامیست!"),
|
||||
machines_heavy: string().required("وارد کردن ماشین آلات سنگین الزامیست!"),
|
||||
});
|
||||
const EditMachineContent = ({ setOpen, SubmitCreateTollHouse, defaultValues }) => {
|
||||
const [tabState, setTabState] = useState(0);
|
||||
const handleClose = () => {
|
||||
setOpen(false);
|
||||
};
|
||||
|
||||
const handleChangeTab = (event, newValue) => {
|
||||
setTabState(newValue);
|
||||
};
|
||||
const handleNext = async () => {
|
||||
const fieldsToValidate = [
|
||||
"status",
|
||||
"province_id",
|
||||
"city_id",
|
||||
"station_id",
|
||||
];
|
||||
const isValid = await trigger(fieldsToValidate);
|
||||
if (isValid) {
|
||||
setTabState(tabState + 1);
|
||||
}
|
||||
};
|
||||
const handlePrev = () => {
|
||||
if (tabState === 0) {
|
||||
handleClose();
|
||||
} else {
|
||||
setTabState(tabState - 1);
|
||||
}
|
||||
};
|
||||
const {
|
||||
control,
|
||||
handleSubmit,
|
||||
trigger,
|
||||
formState: { isSubmitting },
|
||||
} = useForm({
|
||||
defaultValues,
|
||||
resolver: yupResolver(validationSchema),
|
||||
mode: "all",
|
||||
});
|
||||
const onSubmitBase = async (data) => {
|
||||
await SubmitCreateTollHouse(data);
|
||||
};
|
||||
return (
|
||||
<StyledForm onSubmit={handleSubmit(onSubmitBase)}>
|
||||
<Tabs
|
||||
allowScrollButtonsMobile
|
||||
value={tabState}
|
||||
onChange={handleChangeTab}
|
||||
variant={"fullWidth"}
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
width: "100%",
|
||||
backgroundColor: "#efefef",
|
||||
}}
|
||||
>
|
||||
<Tab icon={<OtherHousesIcon />} label="اطلاعات راهدارخانه" />
|
||||
</Tabs>
|
||||
<DialogContent dividers sx={{ overflowY: "auto", maxHeight: "70vh" }}>
|
||||
<Box sx={{ flex: 1 }}>
|
||||
<TabPanel value={tabState} index={0}>
|
||||
<MachineInfo control={control} />
|
||||
</TabPanel>
|
||||
</Box>
|
||||
</DialogContent>
|
||||
<DialogActions sx={{ alignItems: "center", justifyContent: "center" }}>
|
||||
<Button
|
||||
onClick={handlePrev}
|
||||
variant="outlined"
|
||||
color="secondary"
|
||||
size="large"
|
||||
startIcon={tabState === 0 ? <ExitToAppIcon /> : <KeyboardDoubleArrowRightIcon />}
|
||||
>
|
||||
{tabState === 0 ? "بستن" : "مرحله قبل"}
|
||||
</Button>
|
||||
{tabState !== 3 && (
|
||||
<Button
|
||||
onClick={handleNext}
|
||||
key={"handleNext"}
|
||||
variant="contained"
|
||||
size="large"
|
||||
endIcon={<KeyboardDoubleArrowLeftIcon />}
|
||||
>
|
||||
مرحله بعد
|
||||
</Button>
|
||||
)}
|
||||
{tabState === 3 && (
|
||||
<Button
|
||||
variant="contained"
|
||||
size="large"
|
||||
disabled={isSubmitting}
|
||||
type={"submit"}
|
||||
endIcon={<BeenhereIcon />}
|
||||
>
|
||||
{isSubmitting ? "در حال ثبت راهدارخانه" : "ثبت راهدارخانه"}
|
||||
</Button>
|
||||
)}
|
||||
</DialogActions>
|
||||
</StyledForm>
|
||||
);
|
||||
};
|
||||
export default EditMachineContent;
|
||||
@@ -0,0 +1,77 @@
|
||||
import { FormControl, FormHelperText } from "@mui/material";
|
||||
import UploadSystem from "@/core/components/UploadSystem";
|
||||
import React, { useEffect, useState } from "react";
|
||||
|
||||
const ImageUpload = ({ name, value, onChange, error, title }) => {
|
||||
const [beforeImg, setBeforeImg] = useState(value ? value : null);
|
||||
const [beforeFileType, setBeforeFileType] = useState(value ? "image/" : null);
|
||||
const [beforeFileName, setBeforeFileName] = useState(null);
|
||||
const [showBeforeImage, setShowBeforeImage] = useState(!value);
|
||||
|
||||
useEffect(() => {
|
||||
if (value) {
|
||||
setShowBeforeImage(false);
|
||||
if (typeof value === "string") {
|
||||
setBeforeImg(value);
|
||||
setBeforeFileType("image/");
|
||||
} else if (value instanceof File) {
|
||||
setBeforeImg(URL.createObjectURL(value));
|
||||
setBeforeFileType(value.type);
|
||||
}
|
||||
}
|
||||
}, [value]);
|
||||
|
||||
const handleFileChange = (event) => {
|
||||
const uploadedFile = event.target?.files?.[0];
|
||||
if (uploadedFile) {
|
||||
const fileType = event.target?.files?.[0].type;
|
||||
const fileName = event.target?.files?.[0].name;
|
||||
setBeforeImg(URL.createObjectURL(uploadedFile));
|
||||
setBeforeFileType(fileType);
|
||||
setBeforeFileName(fileName);
|
||||
onChange(uploadedFile);
|
||||
setShowBeforeImage(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<FormControl
|
||||
error={error}
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
<FormHelperText
|
||||
sx={{
|
||||
fontSize: 12,
|
||||
border: 1,
|
||||
borderBottom: 0,
|
||||
borderColor: "divider",
|
||||
px: 2,
|
||||
py: 0.5,
|
||||
borderRadius: 2,
|
||||
borderBottomRightRadius: 0,
|
||||
borderBottomLeftRadius: 0,
|
||||
}}
|
||||
id={name}
|
||||
>
|
||||
{title}
|
||||
</FormHelperText>
|
||||
<UploadSystem
|
||||
selectedImage={beforeImg}
|
||||
handleUploadChange={handleFileChange}
|
||||
fileType={beforeFileType}
|
||||
fileName={beforeFileName}
|
||||
setSelectedImage={setBeforeImg}
|
||||
imageSize={[250, 150]}
|
||||
setShowAddIcon={setShowBeforeImage}
|
||||
showAddIcon={showBeforeImage}
|
||||
/>
|
||||
<FormHelperText id={name}>{error ? error.message : null}</FormHelperText>
|
||||
</FormControl>
|
||||
);
|
||||
};
|
||||
export default ImageUpload;
|
||||
@@ -0,0 +1,42 @@
|
||||
import { Controller, useWatch } from "react-hook-form";
|
||||
import SelectBox from "@/core/components/SelectBox";
|
||||
import useProvinces from "@/lib/hooks/useProvince";
|
||||
import { Grid } from "@mui/material";
|
||||
import CityController from "./CityController";
|
||||
|
||||
const LogesticController = ({ control }) => {
|
||||
const { provinces, errorProvinces, loadingProvinces } = useProvinces();
|
||||
const isProvince = useWatch({ control, name: "is_province" });
|
||||
return (
|
||||
<Grid container spacing={2}>
|
||||
{!isProvince ? (
|
||||
<Grid item xs={12} md={6}>
|
||||
<Controller
|
||||
name="province_id"
|
||||
control={control}
|
||||
render={({ field, fieldState: { error } }) => {
|
||||
return (
|
||||
<SelectBox
|
||||
value={errorProvinces ? "error" : loadingProvinces ? "loading" : field.value || ""}
|
||||
label="استان"
|
||||
selectors={provinces}
|
||||
schema={{ name: "name_fa", value: "id" }}
|
||||
error={error}
|
||||
disabled={isProvince}
|
||||
onChange={field.onChange}
|
||||
helperText={error?.message}
|
||||
isLoading={loadingProvinces}
|
||||
errorEcured={errorProvinces}
|
||||
/>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
) : null}
|
||||
<Grid item xs={12} md={isProvince ? 12 : 6}>
|
||||
<CityController control={control} />
|
||||
</Grid>
|
||||
</Grid>
|
||||
);
|
||||
};
|
||||
export default LogesticController;
|
||||
@@ -0,0 +1,311 @@
|
||||
import { Grid, Stack, TextField } from "@mui/material";
|
||||
import { Controller } from "react-hook-form";
|
||||
import SelectBox from "@/core/components/SelectBox";
|
||||
import useProvince from "@/lib/hooks/useProvince";
|
||||
import PersianTextField from "@/core/components/PersianTextField";
|
||||
import CityController from "./CityController";
|
||||
import LogesticController from "./LogesticController";
|
||||
|
||||
const MachineInfo = ({ control }) => {
|
||||
const { provinces, loadingProvinces, errorProvinces } = useProvince();
|
||||
return (
|
||||
<Stack spacing={2}>
|
||||
<Stack>
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={12} md={6}>
|
||||
<Controller
|
||||
name="name"
|
||||
control={control}
|
||||
render={({ field: { onChange, value }, fieldState: { error } }) => (
|
||||
<PersianTextField
|
||||
value={value}
|
||||
variant="outlined"
|
||||
name="name"
|
||||
onChange={onChange}
|
||||
label="نام راهدارخانه"
|
||||
placeholder="نام راهدارخانه را وارد کنید"
|
||||
fullWidth
|
||||
size="small"
|
||||
error={error}
|
||||
helperText={error?.message}
|
||||
InputLabelProps={{ shrink: true }}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={6}>
|
||||
<Controller
|
||||
name="phone"
|
||||
control={control}
|
||||
render={({ field: { onChange, value }, fieldState: { error } }) => (
|
||||
<TextField
|
||||
fullWidth
|
||||
size="small"
|
||||
label="تلفن راهدارخانه"
|
||||
value={value}
|
||||
placeholder="تلفن راهدارخانه را وارد کنید"
|
||||
error={!!error}
|
||||
helperText={error ? error.message : null}
|
||||
variant="outlined"
|
||||
InputLabelProps={{ shrink: true }}
|
||||
type={"tel"}
|
||||
inputProps={{
|
||||
inputMode: "number",
|
||||
min: 0,
|
||||
pattern: "[0-9]*",
|
||||
}}
|
||||
onChange={(event) => {
|
||||
const inputValue = event.target.value;
|
||||
if (isNaN(Number(inputValue))) {
|
||||
return;
|
||||
}
|
||||
onChange(inputValue);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Stack>
|
||||
<Stack>
|
||||
<LogesticController control={control} />
|
||||
</Stack>
|
||||
<Stack>
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={12} md={6}>
|
||||
<Controller
|
||||
name="status"
|
||||
control={control}
|
||||
render={({ field, fieldState: { error } }) => {
|
||||
return (
|
||||
<SelectBox
|
||||
value={field.value}
|
||||
label="وضعیت"
|
||||
selectors={[
|
||||
{ id: 1, name: "فعال" },
|
||||
{ id: 0, name: "غیر فعال" },
|
||||
]}
|
||||
schema={{ name: "name", value: "id" }}
|
||||
error={error}
|
||||
onChange={field.onChange}
|
||||
helperText={error?.message}
|
||||
isLoading={false}
|
||||
errorEcured={false}
|
||||
/>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={6}>
|
||||
<Controller
|
||||
name="type"
|
||||
control={control}
|
||||
render={({ field, fieldState: { error } }) => {
|
||||
return (
|
||||
<SelectBox
|
||||
value={field.value}
|
||||
label="نوع"
|
||||
selectors={[
|
||||
{ id: 1, name: "دائمی" },
|
||||
{ id: 2, name: "موقت" },
|
||||
{ id: 3, name: "فصلی" },
|
||||
]}
|
||||
schema={{ name: "name", value: "id" }}
|
||||
error={error}
|
||||
onChange={field.onChange}
|
||||
helperText={error?.message}
|
||||
isLoading={false}
|
||||
errorEcured={false}
|
||||
/>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Stack>
|
||||
<Stack>
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={12} md={6}>
|
||||
<Controller
|
||||
name="team_num"
|
||||
control={control}
|
||||
render={({ field: { onChange, value }, fieldState: { error } }) => (
|
||||
<TextField
|
||||
fullWidth
|
||||
size="small"
|
||||
label="تعداد اکیپ"
|
||||
value={value}
|
||||
placeholder="تعداد اکیپ را وارد کنید"
|
||||
error={!!error}
|
||||
helperText={error ? error.message : null}
|
||||
variant="outlined"
|
||||
InputLabelProps={{ shrink: true }}
|
||||
type={"tel"}
|
||||
inputProps={{
|
||||
inputMode: "number",
|
||||
min: 0,
|
||||
pattern: "[0-9]*",
|
||||
}}
|
||||
onChange={(event) => {
|
||||
const inputValue = event.target.value;
|
||||
if (isNaN(Number(inputValue))) {
|
||||
return;
|
||||
}
|
||||
onChange(inputValue);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={6}>
|
||||
<Controller
|
||||
name="staff_num"
|
||||
control={control}
|
||||
render={({ field: { onChange, value }, fieldState: { error } }) => (
|
||||
<TextField
|
||||
fullWidth
|
||||
size="small"
|
||||
label="تعداد پرسنل"
|
||||
value={value}
|
||||
placeholder="تعداد پرسنل را وارد کنید"
|
||||
error={!!error}
|
||||
helperText={error ? error.message : null}
|
||||
variant="outlined"
|
||||
InputLabelProps={{ shrink: true }}
|
||||
type={"tel"}
|
||||
inputProps={{
|
||||
inputMode: "number",
|
||||
min: 0,
|
||||
pattern: "[0-9]*",
|
||||
}}
|
||||
onChange={(event) => {
|
||||
const inputValue = event.target.value;
|
||||
if (isNaN(Number(inputValue))) {
|
||||
return;
|
||||
}
|
||||
onChange(inputValue);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Stack>
|
||||
<Stack>
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={12} md={6}>
|
||||
<Controller
|
||||
name="responsible_name"
|
||||
control={control}
|
||||
render={({ field: { onChange, value }, fieldState: { error } }) => (
|
||||
<PersianTextField
|
||||
value={value}
|
||||
variant="outlined"
|
||||
name="responsible_name"
|
||||
onChange={onChange}
|
||||
label="نام مسئول"
|
||||
placeholder="نام مسئول را وارد کنید"
|
||||
fullWidth
|
||||
size="small"
|
||||
error={error}
|
||||
helperText={error?.message}
|
||||
InputLabelProps={{ shrink: true }}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={6}>
|
||||
<Controller
|
||||
name="responsible_mobile"
|
||||
control={control}
|
||||
render={({ field: { onChange, value }, fieldState: { error } }) => (
|
||||
<TextField
|
||||
fullWidth
|
||||
size="small"
|
||||
label="تلفن مسئول"
|
||||
value={value}
|
||||
placeholder="تلفن مسئول را وارد کنید"
|
||||
error={!!error}
|
||||
helperText={error ? error.message : null}
|
||||
variant="outlined"
|
||||
InputLabelProps={{ shrink: true }}
|
||||
type={"tel"}
|
||||
inputProps={{
|
||||
inputMode: "number",
|
||||
min: 0,
|
||||
pattern: "[0-9]*",
|
||||
}}
|
||||
onChange={(event) => {
|
||||
const inputValue = event.target.value;
|
||||
if (isNaN(Number(inputValue))) {
|
||||
return;
|
||||
}
|
||||
onChange(inputValue);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Stack>
|
||||
<Stack>
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={12} md={6}>
|
||||
<Controller
|
||||
name="successor_name"
|
||||
control={control}
|
||||
render={({ field: { onChange, value }, fieldState: { error } }) => (
|
||||
<PersianTextField
|
||||
value={value}
|
||||
variant="outlined"
|
||||
name="responsible_name"
|
||||
onChange={onChange}
|
||||
label="نام جانشین"
|
||||
placeholder="نام جانشین را وارد کنید"
|
||||
fullWidth
|
||||
size="small"
|
||||
error={error}
|
||||
helperText={error?.message}
|
||||
InputLabelProps={{ shrink: true }}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={6}>
|
||||
<Controller
|
||||
name="successor_mobile"
|
||||
control={control}
|
||||
render={({ field: { onChange, value }, fieldState: { error } }) => (
|
||||
<TextField
|
||||
fullWidth
|
||||
size="small"
|
||||
label="تلفن جانشین"
|
||||
value={value}
|
||||
placeholder="تلفن جانشین را وارد کنید"
|
||||
error={!!error}
|
||||
helperText={error ? error.message : null}
|
||||
variant="outlined"
|
||||
InputLabelProps={{ shrink: true }}
|
||||
type={"tel"}
|
||||
inputProps={{
|
||||
inputMode: "number",
|
||||
min: 0,
|
||||
pattern: "[0-9]*",
|
||||
}}
|
||||
onChange={(event) => {
|
||||
const inputValue = event.target.value;
|
||||
if (isNaN(Number(inputValue))) {
|
||||
return;
|
||||
}
|
||||
onChange(inputValue);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Stack>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
export default MachineInfo;
|
||||
@@ -0,0 +1,20 @@
|
||||
import MapInfoOneMarker from "@/core/components/MapInfoOneMarker";
|
||||
import { Stack } from "@mui/material";
|
||||
import { useWatch } from "react-hook-form";
|
||||
|
||||
const TollHouseLocation = ({ setValue, errors, control }) => {
|
||||
const StartPoint = useWatch({ control, name: "start_point" });
|
||||
return (
|
||||
<>
|
||||
<Stack sx={{ mt: 2 }}>
|
||||
<MapInfoOneMarker
|
||||
setValue={setValue}
|
||||
StartPoint={StartPoint}
|
||||
errors={errors}
|
||||
title={"برای ثبت محل پروژه، لطفاً نقشه را بیشتر زوم کنید."}
|
||||
/>
|
||||
</Stack>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default TollHouseLocation;
|
||||
154
src/components/dashboard/machines/Form/CreateTollHouse/index.jsx
Normal file
154
src/components/dashboard/machines/Form/CreateTollHouse/index.jsx
Normal file
@@ -0,0 +1,154 @@
|
||||
import { Button, Dialog, IconButton, useMediaQuery } from "@mui/material";
|
||||
import { useState } from "react";
|
||||
import CreateTollHouseContent from "./EditMachineContent";
|
||||
import { AddCircle } from "@mui/icons-material";
|
||||
import { useTheme } from "@emotion/react";
|
||||
import { CREATE_TOLL_HOUSE } from "@/core/utils/routes";
|
||||
import useRequest from "@/lib/hooks/useRequest";
|
||||
import CloseIcon from "@mui/icons-material/Close";
|
||||
import { useAuth } from "@/lib/contexts/auth";
|
||||
import { usePermissions } from "@/lib/hooks/usePermissions";
|
||||
|
||||
const CreateTollHouse = ({ mutate }) => {
|
||||
const requestServer = useRequest({ notificationSuccess: true });
|
||||
const theme = useTheme();
|
||||
const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
|
||||
const [open, setOpen] = useState(false);
|
||||
const { user } = useAuth();
|
||||
const { data: userPermissions } = usePermissions();
|
||||
const hasCreateProvincePermission = userPermissions.some((item) => ["add-tollhouse"].includes(item));
|
||||
const handleOpen = () => {
|
||||
setOpen(true);
|
||||
};
|
||||
const SubmitCreateTollHouse = async (result) => {
|
||||
const fields = [
|
||||
"province_id",
|
||||
"city_id",
|
||||
"name",
|
||||
"status",
|
||||
"type",
|
||||
"team_num",
|
||||
"staff_num",
|
||||
"phone",
|
||||
"responsible_name",
|
||||
"responsible_mobile",
|
||||
"successor_name",
|
||||
"successor_mobile",
|
||||
"machines_light",
|
||||
"machines_sheavy",
|
||||
"machines_heavy",
|
||||
"overview_files_1",
|
||||
"overview_files_2",
|
||||
"overview_files_3",
|
||||
"overview_files_4",
|
||||
"overview_files_5",
|
||||
];
|
||||
const formData = new FormData();
|
||||
fields.forEach((field) => {
|
||||
if (result[field] !== undefined && result[field] !== null) {
|
||||
formData.append(field, result[field]);
|
||||
}
|
||||
});
|
||||
formData.append("lat", result.start_point.lat);
|
||||
formData.append("lng", result.start_point.lng);
|
||||
formData.append("area[type]", "polygon");
|
||||
result.area.map((point, pointIndex) => {
|
||||
formData.append(`area[coordinates][${pointIndex}][0]`, point.lon);
|
||||
formData.append(`area[coordinates][${pointIndex}][1]`, point.lat);
|
||||
});
|
||||
const repeat_first = result.area.length;
|
||||
formData.append(`area[coordinates][${repeat_first}][0]`, result.area[0].lon);
|
||||
formData.append(`area[coordinates][${repeat_first}][1]`, result.area[0].lat);
|
||||
await requestServer(`${CREATE_TOLL_HOUSE}`, "post", {
|
||||
data: formData,
|
||||
})
|
||||
.then(() => {
|
||||
mutate();
|
||||
setOpen(false);
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
const defaultValues = {
|
||||
name: "",
|
||||
is_province: !hasCreateProvincePermission,
|
||||
province_id: !hasCreateProvincePermission ? user.province_id : null,
|
||||
city_id: null,
|
||||
status: "",
|
||||
type: "",
|
||||
phone: "",
|
||||
team_num: "",
|
||||
staff_num: "",
|
||||
responsible_name: "",
|
||||
responsible_mobile: "",
|
||||
successor_name: "",
|
||||
successor_mobile: "",
|
||||
machines_light: "",
|
||||
machines_sheavy: "",
|
||||
machines_heavy: "",
|
||||
overview_files_1: null,
|
||||
overview_files_2: null,
|
||||
overview_files_3: null,
|
||||
overview_files_4: null,
|
||||
overview_files_5: null,
|
||||
start_point: "",
|
||||
area: [
|
||||
{ lat: "", lon: "" },
|
||||
{ lat: "", lon: "" },
|
||||
{ lat: "", lon: "" },
|
||||
{ lat: "", lon: "" },
|
||||
],
|
||||
};
|
||||
return (
|
||||
<>
|
||||
{isMobile ? (
|
||||
<IconButton aria-label={"راهدارخانه جدید"} color="primary" onClick={handleOpen}>
|
||||
<AddCircle sx={{ fontSize: "25px" }} />
|
||||
</IconButton>
|
||||
) : (
|
||||
<Button
|
||||
size={"small"}
|
||||
variant="contained"
|
||||
color="primary"
|
||||
startIcon={<AddCircle />}
|
||||
onClick={handleOpen}
|
||||
>
|
||||
راهدارخانه جدید
|
||||
</Button>
|
||||
)}
|
||||
<Dialog
|
||||
fullWidth
|
||||
open={open}
|
||||
onClose={() => setOpen(false)}
|
||||
PaperProps={{
|
||||
sx: {
|
||||
boxShadow: "rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px",
|
||||
},
|
||||
}}
|
||||
maxWidth={"md"}
|
||||
scroll="paper"
|
||||
>
|
||||
<IconButton
|
||||
aria-label="close"
|
||||
onClick={() => setOpen(false)}
|
||||
sx={(theme) => ({
|
||||
position: "absolute",
|
||||
right: 8,
|
||||
top: 8,
|
||||
zIndex: 50,
|
||||
color: theme.palette.grey[500],
|
||||
})}
|
||||
>
|
||||
<CloseIcon />
|
||||
</IconButton>
|
||||
{open && (
|
||||
<CreateTollHouseContent
|
||||
setOpen={setOpen}
|
||||
defaultValues={defaultValues}
|
||||
SubmitCreateTollHouse={SubmitCreateTollHouse}
|
||||
/>
|
||||
)}
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default CreateTollHouse;
|
||||
@@ -0,0 +1,77 @@
|
||||
import DialogLoading from "@/core/components/DialogLoading";
|
||||
import { GET_TOLL_HOUSE_DETAILS, UPDATE_TOLL_HOUSE_ITEM } from "@/core/utils/routes";
|
||||
import { usePermissions } from "@/lib/hooks/usePermissions";
|
||||
import useRequest from "@/lib/hooks/useRequest";
|
||||
import { useEffect, useState } from "react";
|
||||
import EditMachineContent from "../CreateTollHouse/EditMachineContent";
|
||||
|
||||
const EditController = ({ rowId, mutate, setOpenEditDialog }) => {
|
||||
const { data: userPermissions } = usePermissions();
|
||||
const hasCreateProvincePermission = userPermissions.some((item) => ["update-machine"].includes(item));
|
||||
const requestServer = useRequest();
|
||||
const [MachineItemDetails, setMachineItemDetails] = useState(null);
|
||||
const [machineItemDetailsLoading, setMachineItemDetailsLoading] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setMachineItemDetailsLoading(true);
|
||||
requestServer(`${GET_TOLL_HOUSE_DETAILS}/${rowId}`, "get")
|
||||
.then((response) => {
|
||||
setMachineItemDetails(response.data.data);
|
||||
setMachineItemDetailsLoading(false);
|
||||
})
|
||||
.catch((e) => {
|
||||
setMachineItemDetailsLoading(false);
|
||||
});
|
||||
}, [rowId]);
|
||||
|
||||
const defaultData = {
|
||||
is_province: !hasCreateProvincePermission,
|
||||
province_id: MachineItemDetails?.province_id || null,
|
||||
city_id: MachineItemDetails?.city_id || null,
|
||||
status: MachineItemDetails?.status || "",
|
||||
station_id: MachineItemDetails?.station_id || "",
|
||||
};
|
||||
const HandleSubmit = async (result) => {
|
||||
const fields = [
|
||||
"status",
|
||||
"province_id",
|
||||
"city_id",
|
||||
"station_id",
|
||||
];
|
||||
const formData = new FormData();
|
||||
fields.forEach((field) => {
|
||||
if (result[field] !== undefined && result[field] !== null) {
|
||||
formData.append(field, result[field]);
|
||||
}
|
||||
});
|
||||
for (let i = 1; i <= 5; i++) {
|
||||
if (result[`overview_files_${i}`] !== defaultData[`overview_files_${i}`]) {
|
||||
formData.append(`overview_files_${i}`, result[`overview_files_${i}`]);
|
||||
}
|
||||
}
|
||||
|
||||
await requestServer(`${UPDATE_TOLL_HOUSE_ITEM}/${rowId}`, "post", {
|
||||
data: formData,
|
||||
notificationSuccess: true,
|
||||
})
|
||||
.then(() => {
|
||||
mutate();
|
||||
setOpenEditDialog(false);
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
return (
|
||||
<>
|
||||
{machineItemDetailsLoading ? (
|
||||
<DialogLoading />
|
||||
) : (
|
||||
<EditMachineContent
|
||||
setOpen={setOpenEditDialog}
|
||||
SubmitCreateTollHouse={HandleSubmit}
|
||||
defaultValues={defaultData}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default EditController;
|
||||
59
src/components/dashboard/machines/Form/Edit/index.jsx
Normal file
59
src/components/dashboard/machines/Form/Edit/index.jsx
Normal file
@@ -0,0 +1,59 @@
|
||||
import { Dialog, IconButton, Tooltip } from "@mui/material";
|
||||
import { useState } from "react";
|
||||
import BorderColorIcon from "@mui/icons-material/BorderColor";
|
||||
import EditController from "./EditController";
|
||||
import CloseIcon from "@mui/icons-material/Close";
|
||||
|
||||
const EditForm = ({ row, mutate, rowId }) => {
|
||||
const [openEditDialog, setOpenEditDialog] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Tooltip title="ویرایش اطلاعات" arrow placement="right">
|
||||
<IconButton
|
||||
color="primary"
|
||||
sx={{ textTransform: "unset", alignSelf: "center" }}
|
||||
onClick={() => {
|
||||
setOpenEditDialog(true);
|
||||
}}
|
||||
>
|
||||
<BorderColorIcon />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Dialog
|
||||
maxWidth="md"
|
||||
fullWidth
|
||||
open={openEditDialog}
|
||||
PaperProps={{
|
||||
sx: {
|
||||
boxShadow: "rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<IconButton
|
||||
aria-label="close"
|
||||
onClick={() => setOpenEditDialog(false)}
|
||||
sx={(theme) => ({
|
||||
position: "absolute",
|
||||
right: 8,
|
||||
top: 8,
|
||||
zIndex: 50,
|
||||
color: theme.palette.grey[500],
|
||||
})}
|
||||
>
|
||||
<CloseIcon />
|
||||
</IconButton>
|
||||
{openEditDialog && (
|
||||
<EditController
|
||||
openEditDialog={openEditDialog}
|
||||
setOpenEditDialog={setOpenEditDialog}
|
||||
rowId={rowId}
|
||||
row={row}
|
||||
mutate={mutate}
|
||||
/>
|
||||
)}
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default EditForm;
|
||||
242
src/components/dashboard/machines/MachinesList.jsx
Normal file
242
src/components/dashboard/machines/MachinesList.jsx
Normal file
@@ -0,0 +1,242 @@
|
||||
"use client";
|
||||
import CustomSelectByDependency from "@/core/components/DataTable/filter/fieldsType/CustomSelectByDependency";
|
||||
import DataTableWithAuth from "@/core/components/DataTableWithAuth";
|
||||
import { GET_MACHINES_LIST } from "@/core/utils/routes";
|
||||
import { useAuth } from "@/lib/contexts/auth";
|
||||
import useEdaratLists from "@/lib/hooks/useEdaratLists";
|
||||
import { usePermissions } from "@/lib/hooks/usePermissions";
|
||||
import useProvinces from "@/lib/hooks/useProvince";
|
||||
import { Box, Typography } from "@mui/material";
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import RowActions from "./RowActions";
|
||||
import Toolbar from "./Toolbar";
|
||||
|
||||
const statusOptions = [
|
||||
{ value: "", label: "همه وضعیت ها" },
|
||||
{ value: 1, label: "آماده" },
|
||||
{ value: 2, label: "رزرو" },
|
||||
{ value: 3, label: "در ماموریت" },
|
||||
{ value: 4, label: "خارج از رده" },
|
||||
{ value: 5, label: "در تعمیر" },
|
||||
{ value: 6, label: "فروخته شده" },
|
||||
{ value: 7, label: "نیاز به تعمیر" },
|
||||
];
|
||||
|
||||
const MachinesList = () => {
|
||||
const { data: userPermissions } = usePermissions();
|
||||
const hasCountryPermission = userPermissions?.includes("show-tollhouse");
|
||||
const { user } = useAuth();
|
||||
|
||||
const columns = useMemo(() => {
|
||||
const provinceColumn = {
|
||||
accessorKey: "province_id",
|
||||
header: "استان",
|
||||
id: "province_id",
|
||||
enableColumnFilter: true,
|
||||
datatype: "numeric",
|
||||
filterMode: "equals",
|
||||
grow: false,
|
||||
size: 130,
|
||||
ColumnSelectComponent: (props) => {
|
||||
const { provinces, errorProvinces, loadingProvinces } = useProvinces();
|
||||
const getColumnSelectOptions = useMemo(() => {
|
||||
if (loadingProvinces) {
|
||||
return [{ value: "loading", label: "در حال بارگذاری..." }];
|
||||
}
|
||||
if (errorProvinces) {
|
||||
return [{ value: "error", label: "خطا در بارگذاری" }];
|
||||
}
|
||||
return [
|
||||
{ value: "", label: "کل کشور" },
|
||||
...provinces.map((province) => ({
|
||||
value: province.id,
|
||||
label: province.name_fa,
|
||||
})),
|
||||
];
|
||||
}, [provinces, errorProvinces, loadingProvinces]);
|
||||
return (
|
||||
<CustomSelectByDependency
|
||||
{...props}
|
||||
value={loadingProvinces ? "loading" : props.filterParameters.value}
|
||||
columnSelectOption={getColumnSelectOptions}
|
||||
/>
|
||||
);
|
||||
},
|
||||
Cell: ({ row }) => <>{row.original.province_name}</>,
|
||||
};
|
||||
return [
|
||||
{
|
||||
accessorKey: "id",
|
||||
header: "کد یکتا", // Unique Code
|
||||
id: "id",
|
||||
enableColumnFilter: true,
|
||||
datatype: "text",
|
||||
filterMode: "equals",
|
||||
sortDescFirst: false,
|
||||
columnFilterModeOptions: ["equals", "contains"],
|
||||
grow: false,
|
||||
size: 100,
|
||||
},
|
||||
|
||||
{
|
||||
header: "اطلاعات ماشینها",
|
||||
id: "machines_info",
|
||||
enableColumnFilter: false,
|
||||
enableSorting: false,
|
||||
datatype: "text",
|
||||
grow: false,
|
||||
size: 50,
|
||||
columns: [
|
||||
{
|
||||
accessorKey: "car_name",
|
||||
header: "نام ماشین",
|
||||
id: "car_name",
|
||||
enableColumnFilter: true,
|
||||
datatype: "text",
|
||||
filterMode: "equals",
|
||||
sortDescFirst: false,
|
||||
columnFilterModeOptions: ["equals", "contains"],
|
||||
grow: false,
|
||||
size: 100,
|
||||
},
|
||||
{
|
||||
accessorKey: "car_type",
|
||||
header: "نوع ماشین",
|
||||
id: "car_type",
|
||||
enableColumnFilter: true,
|
||||
datatype: "text",
|
||||
filterMode: "equals",
|
||||
sortDescFirst: false,
|
||||
columnFilterModeOptions: ["equals", "contains"],
|
||||
grow: false,
|
||||
size: 100,
|
||||
},
|
||||
{
|
||||
accessorKey: "machine_code",
|
||||
header: "کد ماشین",
|
||||
id: "machine_code",
|
||||
enableColumnFilter: true,
|
||||
datatype: "text",
|
||||
filterMode: "equals",
|
||||
sortDescFirst: false,
|
||||
columnFilterModeOptions: ["equals", "contains"],
|
||||
grow: false,
|
||||
size: 100,
|
||||
},
|
||||
{
|
||||
accessorKey: "plak_number",
|
||||
header: "پلاک",
|
||||
id: "plak_number",
|
||||
enableColumnFilter: true,
|
||||
datatype: "text",
|
||||
filterMode: "equals",
|
||||
sortDescFirst: false,
|
||||
columnFilterModeOptions: ["equals", "contains"],
|
||||
grow: false,
|
||||
size: 100,
|
||||
},
|
||||
...(hasCountryPermission ? [provinceColumn] : []),
|
||||
{
|
||||
accessorKey: "city_id",
|
||||
header: "شهرستان", // Office
|
||||
id: "city_id",
|
||||
enableColumnFilter: true,
|
||||
datatype: "numeric",
|
||||
filterMode: "equals",
|
||||
dependencyId: hasCountryPermission ? "province_id" : null,
|
||||
grow: false,
|
||||
size: 120,
|
||||
ColumnSelectComponent: (props) => {
|
||||
const { edaratList, loadingEdaratList, errorEdaratList } = useEdaratLists(
|
||||
hasCountryPermission ? props.dependencyFieldValue.value : user.province_id
|
||||
);
|
||||
const [prevDependency, setPrevDependency] = useState(
|
||||
hasCountryPermission ? props.dependencyFieldValue.value : user.province_id
|
||||
);
|
||||
|
||||
const getColumnSelectOptions = useMemo(() => {
|
||||
if (hasCountryPermission && props.dependencyFieldValue.value === "") {
|
||||
return [{ value: "empty", label: "ابتدا استان را انتخاب کنید" }];
|
||||
}
|
||||
if (loadingEdaratList) {
|
||||
return [{ value: "loading", label: "در حال بارگذاری..." }];
|
||||
}
|
||||
if (errorEdaratList) {
|
||||
return [{ value: "error", label: "خطا در بارگذاری" }];
|
||||
}
|
||||
return [
|
||||
{ value: "", label: "کل شهر ها" },
|
||||
...edaratList.map((edare) => ({
|
||||
value: edare.id,
|
||||
label: edare.name_fa,
|
||||
})),
|
||||
];
|
||||
}, [edaratList, loadingEdaratList, errorEdaratList]);
|
||||
useEffect(() => {
|
||||
if (hasCountryPermission) return;
|
||||
if (prevDependency === props.dependencyFieldValue?.value) return;
|
||||
props.handleChange({ ...props.filterParameters, value: "" });
|
||||
setPrevDependency(props.dependencyFieldValue?.value);
|
||||
}, [props.dependencyFieldValue?.value, hasCountryPermission]);
|
||||
return (
|
||||
<CustomSelectByDependency
|
||||
{...props}
|
||||
value={
|
||||
props.dependencyFieldValue?.value === ""
|
||||
? "empty"
|
||||
: loadingEdaratList
|
||||
? "loading"
|
||||
: props.filterParameters.value
|
||||
}
|
||||
columnSelectOption={getColumnSelectOptions}
|
||||
/>
|
||||
);
|
||||
},
|
||||
Cell: ({ row }) => <>{row.original.city_name}</>,
|
||||
},
|
||||
{
|
||||
accessorKey: "status",
|
||||
header: "وضعیت",
|
||||
id: "status",
|
||||
enableColumnFilter: true,
|
||||
datatype: "numeric",
|
||||
filterMode: "equals",
|
||||
grow: false,
|
||||
size: 100,
|
||||
columnSelectOption: () => {
|
||||
return statusOptions.map((status) => ({
|
||||
value: status.value,
|
||||
label: status.label,
|
||||
}));
|
||||
},
|
||||
Cell: ({ row }) => {
|
||||
const status = statusOptions.find((option) => option.value == row.original.status);
|
||||
return <Typography variant="body2">{status?.label || ""}</Typography>;
|
||||
},
|
||||
},
|
||||
|
||||
],
|
||||
},
|
||||
];
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Box sx={{ p: 1, border: 1, borderColor: "divider", borderRadius: 1 }}>
|
||||
<DataTableWithAuth
|
||||
need_filter={true}
|
||||
columns={columns}
|
||||
table_url={GET_MACHINES_LIST}
|
||||
page_name={"machines"}
|
||||
table_name={"machinesList"}
|
||||
sorting={[{ id: "id", desc: true }]}
|
||||
TableToolbar={Toolbar}
|
||||
enableRowActions
|
||||
positionActionsColumn={"first"}
|
||||
RowActions={RowActions}
|
||||
/>
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default MachinesList;
|
||||
@@ -0,0 +1,39 @@
|
||||
import { Button, DialogActions, DialogContent, Stack, Typography } from "@mui/material";
|
||||
import React, { useState } from "react";
|
||||
import useRequest from "@/lib/hooks/useRequest";
|
||||
import { DELETE_TOLL_HOUSE_ITEM } from "@/core/utils/routes";
|
||||
|
||||
const DeleteContent = ({ rowId, mutate, setOpenDeleteDialog }) => {
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const requestServer = useRequest({ notificationSuccess: true });
|
||||
const handleClick = () => {
|
||||
setSubmitting(true);
|
||||
requestServer(`${DELETE_TOLL_HOUSE_ITEM}/${rowId}`, "delete")
|
||||
.then(() => {
|
||||
mutate();
|
||||
setOpenDeleteDialog(false);
|
||||
setSubmitting(false);
|
||||
})
|
||||
.catch(() => {
|
||||
setSubmitting(false);
|
||||
});
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<DialogContent>
|
||||
<Stack alignItems="center" spacing={2}>
|
||||
<Typography mt={2}>آیا از حذف راهدارخانه اطمینان دارید؟</Typography>
|
||||
</Stack>
|
||||
</DialogContent>
|
||||
<DialogActions sx={{ justifyContent: "center", paddingBottom: 2, width: "100%" }}>
|
||||
<Button onClick={() => setOpenDeleteDialog(false)} variant="outlined" color="secondary">
|
||||
خیر !
|
||||
</Button>
|
||||
<Button onClick={handleClick} variant="contained" color="error" disabled={submitting}>
|
||||
{submitting ? "درحال حذف..." : "بله اطمینان دارم"}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default DeleteContent;
|
||||
@@ -0,0 +1,34 @@
|
||||
import DeleteIcon from "@mui/icons-material/Delete";
|
||||
import { Dialog, DialogTitle, IconButton, Tooltip } from "@mui/material";
|
||||
import { useState } from "react";
|
||||
import DeleteContent from "./DeleteContent";
|
||||
const DeleteDialog = ({ rowId, mutate }) => {
|
||||
const [openDeleteDialog, setOpenDeleteDialog] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Tooltip title="حذف">
|
||||
<IconButton color="error" onClick={() => setOpenDeleteDialog(true)}>
|
||||
<DeleteIcon />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Dialog
|
||||
open={openDeleteDialog}
|
||||
onClose={() => setOpenDeleteDialog(false)}
|
||||
PaperProps={{
|
||||
sx: {
|
||||
boxShadow: "rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px",
|
||||
},
|
||||
}}
|
||||
dir="rtl"
|
||||
maxWidth={"md"}
|
||||
>
|
||||
<DialogTitle>حذف راهدارخانه</DialogTitle>
|
||||
{openDeleteDialog && (
|
||||
<DeleteContent rowId={rowId} mutate={mutate} setOpenDeleteDialog={setOpenDeleteDialog} />
|
||||
)}
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default DeleteDialog;
|
||||
@@ -0,0 +1,45 @@
|
||||
import { Box, Stack, Typography, useTheme } from "@mui/material";
|
||||
import Image from "next/image";
|
||||
|
||||
const ImageFormContent = ({ image, title }) => {
|
||||
const theme = useTheme();
|
||||
return (
|
||||
<Stack
|
||||
spacing={2}
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
sx={{
|
||||
my: 2,
|
||||
padding: 2,
|
||||
borderRadius: "12px",
|
||||
border: `1px solid ${theme.palette.primary.main}`,
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
variant="h6"
|
||||
sx={{
|
||||
color: theme.palette.primary.dark,
|
||||
fontWeight: "bold",
|
||||
}}
|
||||
>
|
||||
{title}
|
||||
</Typography>
|
||||
<Box sx={{ width: "100%", position: "relative", aspectRatio: "16/9" }}>
|
||||
<Image
|
||||
src={image}
|
||||
alt="Image"
|
||||
fill={true}
|
||||
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
|
||||
loading="lazy"
|
||||
style={{
|
||||
objectFit: "contain",
|
||||
marginBottom: "16px",
|
||||
borderRadius: "12px",
|
||||
border: `1px solid ${theme.palette.divider}`,
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
export default ImageFormContent;
|
||||
@@ -0,0 +1,39 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import ImageFormContent from "./ImageFormContent";
|
||||
import DialogLoading from "@/core/components/DialogLoading";
|
||||
import useRequest from "@/lib/hooks/useRequest";
|
||||
import { GET_TOLL_HOUSE_IMAGES } from "@/core/utils/routes";
|
||||
import { Typography } from "@mui/material";
|
||||
const titles = ["نمای کلی از راهداری", "آشیانه ماشین آلات", "انباری شن و ماسه", "محیط کاری", "سایر تصاویر"];
|
||||
|
||||
const ImagesContent = ({ rowId }) => {
|
||||
const requestServer = useRequest();
|
||||
const [tollHouseImages, setTollHouseImages] = useState(null);
|
||||
const [tollHouseImagesLoading, setTollHouseImagesLoading] = useState(false);
|
||||
useEffect(() => {
|
||||
setTollHouseImagesLoading(true);
|
||||
requestServer(`${GET_TOLL_HOUSE_IMAGES}/${rowId}`, "get")
|
||||
.then((response) => {
|
||||
setTollHouseImages(response.data.data);
|
||||
setTollHouseImagesLoading(false);
|
||||
})
|
||||
.catch((e) => {
|
||||
setTollHouseImagesLoading(false);
|
||||
});
|
||||
}, [rowId]);
|
||||
|
||||
return (
|
||||
<>
|
||||
{tollHouseImagesLoading ? (
|
||||
<DialogLoading />
|
||||
) : tollHouseImages ? (
|
||||
tollHouseImages.map((image, index) => {
|
||||
return <ImageFormContent key={index} image={image.path} title={titles[index]} />;
|
||||
})
|
||||
) : (
|
||||
<Typography textAlign={"center"}>تصویری در سامانه یافت نشد</Typography>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default ImagesContent;
|
||||
@@ -0,0 +1,43 @@
|
||||
import PhotoLibraryIcon from "@mui/icons-material/PhotoLibrary";
|
||||
import { Button, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, Tooltip } from "@mui/material";
|
||||
import { useEffect, useState } from "react";
|
||||
import ImagesContent from "./ImagesContent";
|
||||
import useRequest from "@/lib/hooks/useRequest";
|
||||
import { GET_TOLL_HOUSE_IMAGES } from "@/core/utils/routes";
|
||||
import DialogLoading from "@/core/components/DialogLoading";
|
||||
|
||||
const ImageDialog = ({ rowId }) => {
|
||||
const [openImageDialog, setOpenImageDialog] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Tooltip title="تصاویر">
|
||||
<IconButton color="primary" onClick={() => setOpenImageDialog(true)}>
|
||||
<PhotoLibraryIcon />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Dialog
|
||||
fullWidth
|
||||
open={openImageDialog}
|
||||
onClose={() => setOpenImageDialog(false)}
|
||||
PaperProps={{
|
||||
sx: {
|
||||
boxShadow: "rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px",
|
||||
},
|
||||
}}
|
||||
maxWidth={"sm"}
|
||||
scroll="paper"
|
||||
>
|
||||
<DialogTitle sx={{ fontSize: "large" }}>تصاویر</DialogTitle>
|
||||
<DialogContent>{openImageDialog && <ImagesContent rowId={rowId} />}</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => setOpenImageDialog(false)} variant="outlined" color="secondary">
|
||||
بستن
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ImageDialog;
|
||||
@@ -0,0 +1,35 @@
|
||||
"use client";
|
||||
import { Box, Button, DialogActions, DialogContent, Stack } from "@mui/material";
|
||||
import React from "react";
|
||||
import dynamic from "next/dynamic";
|
||||
import MapLoading from "@/core/components/MapLayer/Loading";
|
||||
import ShowLocationMarker from "@/core/components/ShowLocationMarker";
|
||||
const MapLayer = dynamic(() => import("@/core/components/MapLayer"), {
|
||||
loading: () => <MapLoading />,
|
||||
ssr: false,
|
||||
});
|
||||
|
||||
const LocationFormContent = ({ setOpenLocationDialog, start_lat, start_lng, end_lat, end_lng }) => {
|
||||
return (
|
||||
<>
|
||||
<DialogContent>
|
||||
<Box sx={{ width: "400px", height: "400px" }}>
|
||||
<MapLayer>
|
||||
<ShowLocationMarker
|
||||
start_lat={start_lat}
|
||||
start_lng={start_lng}
|
||||
end_lat={end_lat}
|
||||
end_lng={end_lng}
|
||||
/>
|
||||
</MapLayer>
|
||||
</Box>
|
||||
</DialogContent>
|
||||
<DialogActions sx={{ justifyContent: "center", paddingBottom: 2, width: "100%" }}>
|
||||
<Button onClick={() => setOpenLocationDialog(false)} variant="outlined" color="secondary">
|
||||
بستن
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default LocationFormContent;
|
||||
@@ -0,0 +1,38 @@
|
||||
import React, { useState } from "react";
|
||||
import { Tooltip, IconButton, Dialog, DialogTitle } from "@mui/material";
|
||||
import ExploreIcon from "@mui/icons-material/Explore";
|
||||
import LocationFormContent from "./LocationFormContent";
|
||||
const LocationForm = ({ start_lat, start_lng, end_lat, end_lng }) => {
|
||||
const [openLocationDialog, setOpenLocationDialog] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Tooltip title="موقعیت">
|
||||
<IconButton color="primary" onClick={() => setOpenLocationDialog(true)}>
|
||||
<ExploreIcon />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Dialog
|
||||
open={openLocationDialog}
|
||||
onClose={() => setOpenLocationDialog(false)}
|
||||
PaperProps={{
|
||||
sx: {
|
||||
boxShadow: "rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px",
|
||||
},
|
||||
}}
|
||||
dir="rtl"
|
||||
maxWidth={"md"}
|
||||
>
|
||||
<DialogTitle>موقعیت</DialogTitle>
|
||||
<LocationFormContent
|
||||
start_lat={start_lat}
|
||||
start_lng={start_lng}
|
||||
end_lat={end_lat}
|
||||
end_lng={end_lng}
|
||||
setOpenLocationDialog={setOpenLocationDialog}
|
||||
/>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default LocationForm;
|
||||
16
src/components/dashboard/machines/RowActions/index.jsx
Normal file
16
src/components/dashboard/machines/RowActions/index.jsx
Normal file
@@ -0,0 +1,16 @@
|
||||
import { usePermissions } from "@/lib/hooks/usePermissions";
|
||||
import { Box } from "@mui/material";
|
||||
import EditForm from "../Form/Edit";
|
||||
|
||||
const RowActions = ({ row, mutate }) => {
|
||||
const { data: userPermissions } = usePermissions();
|
||||
const hasEditPermission = userPermissions.some((item) =>
|
||||
["update-machine"].includes(item)
|
||||
);
|
||||
return (
|
||||
<Box sx={{ display: "flex", gap: 1 }}>
|
||||
{hasEditPermission && <EditForm row={row} mutate={mutate} rowId={row.getValue("id")} />}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
export default RowActions;
|
||||
@@ -0,0 +1,29 @@
|
||||
import { useEffect, useRef } from "react";
|
||||
import { FeatureGroup, useMap } from "react-leaflet";
|
||||
|
||||
const ShowBound = ({ bound }) => {
|
||||
const map = useMap();
|
||||
const featureRef = useRef(null);
|
||||
|
||||
const safeFitBounds = (layer) => {
|
||||
if (!layer || !map) return;
|
||||
try {
|
||||
const latLngs = layer.getLatLngs();
|
||||
map.fitBounds(latLngs, {
|
||||
paddingTopLeft: [20, 20],
|
||||
paddingBottomRight: [20, 20],
|
||||
});
|
||||
} catch (e) {
|
||||
console.warn("fitBounds failed:", e);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
bound?.editing?.disable();
|
||||
featureRef.current.addLayer(bound);
|
||||
safeFitBounds(bound);
|
||||
}, []);
|
||||
|
||||
return <FeatureGroup ref={featureRef} />;
|
||||
};
|
||||
export default ShowBound;
|
||||
65
src/components/dashboard/machines/ShowProjectArea/index.jsx
Normal file
65
src/components/dashboard/machines/ShowProjectArea/index.jsx
Normal file
@@ -0,0 +1,65 @@
|
||||
const { IconButton, Tooltip, Box, Dialog, DialogTitle, Typography, DialogContent } = require("@mui/material");
|
||||
import MapLayer from "@/core/components/MapLayer";
|
||||
import CloseIcon from "@mui/icons-material/Close";
|
||||
import LayersIcon from "@mui/icons-material/Layers";
|
||||
import L from "leaflet";
|
||||
import { useMemo, useState } from "react";
|
||||
import ShowBound from "./ShowBound";
|
||||
|
||||
const ShowProjectArea = ({ primaryArea }) => {
|
||||
const [openShowAreaDialog, setOpenShowAreaDialog] = useState(false);
|
||||
const bound = useMemo(() => {
|
||||
const coordinates = Object.values(primaryArea.coordinates);
|
||||
|
||||
const latLngCoords = coordinates.map(([lat, lng]) => [parseFloat(lng), parseFloat(lat)]);
|
||||
|
||||
return primaryArea.type === "polygon"
|
||||
? L.polygon(latLngCoords, { color: "#ff5555" })
|
||||
: L.polyline(latLngCoords);
|
||||
}, [primaryArea]);
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Tooltip title="نمایش پلیگان" placement="right" arrow>
|
||||
<IconButton size="small" color="primary" onClick={() => setOpenShowAreaDialog(true)}>
|
||||
<LayersIcon />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Dialog
|
||||
open={openShowAreaDialog}
|
||||
onClose={() => setOpenShowAreaDialog(false)}
|
||||
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",
|
||||
borderRadius: 2,
|
||||
padding: 1,
|
||||
},
|
||||
}}
|
||||
maxWidth="sm"
|
||||
fullWidth
|
||||
dir="rtl"
|
||||
>
|
||||
<DialogTitle sx={{ display: "flex", justifyContent: "space-between", padding: "16px 24px" }}>
|
||||
<Typography variant="body1" sx={{ fontWeight: "bold", fontSize: "large" }}>
|
||||
محدوده طرح
|
||||
</Typography>
|
||||
<IconButton onClick={() => setOpenShowAreaDialog(false)} size="small">
|
||||
<CloseIcon />
|
||||
</IconButton>
|
||||
</DialogTitle>
|
||||
<DialogContent>
|
||||
<Box sx={{ flex: 1 }}>
|
||||
<Box sx={{ width: "100%", height: "400px" }}>
|
||||
<MapLayer style={{ borderRadius: "4px" }}>
|
||||
<ShowBound bound={bound} />
|
||||
</MapLayer>
|
||||
</Box>
|
||||
</Box>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default ShowProjectArea;
|
||||
6
src/components/dashboard/machines/Toolbar.jsx
Normal file
6
src/components/dashboard/machines/Toolbar.jsx
Normal file
@@ -0,0 +1,6 @@
|
||||
import { Box } from "@mui/material";
|
||||
|
||||
const Toolbar = ({ table, filterData, mutate }) => {
|
||||
return <Box sx={{ display: "flex", gap: 1 }}>machines toolbar</Box>;
|
||||
};
|
||||
export default Toolbar;
|
||||
14
src/components/dashboard/machines/index.jsx
Normal file
14
src/components/dashboard/machines/index.jsx
Normal file
@@ -0,0 +1,14 @@
|
||||
"use client";
|
||||
import PageTitle from "@/core/components/PageTitle";
|
||||
import { Stack } from "@mui/material";
|
||||
import MachinesList from "./MachinesList";
|
||||
|
||||
const MachinesPage = () => {
|
||||
return (
|
||||
<Stack spacing={1}>
|
||||
<PageTitle title={"لیست ماشین ها"} />
|
||||
<MachinesList />
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
export default MachinesPage;
|
||||
@@ -1,3 +1,4 @@
|
||||
import { ReportProblem, RvHookup } from "@mui/icons-material";
|
||||
import AccountTreeIcon from "@mui/icons-material/AccountTree";
|
||||
import AdminPanelSettingsIcon from "@mui/icons-material/AdminPanelSettings";
|
||||
import AssessmentIcon from "@mui/icons-material/Assessment";
|
||||
@@ -5,7 +6,9 @@ import AssignmentLateIcon from "@mui/icons-material/AssignmentLate";
|
||||
import AssistantIcon from "@mui/icons-material/Assistant";
|
||||
import BallotIcon from "@mui/icons-material/Ballot";
|
||||
import BiotechIcon from "@mui/icons-material/Biotech";
|
||||
import ContactPageIcon from "@mui/icons-material/ContactPage";
|
||||
import CottageIcon from "@mui/icons-material/Cottage";
|
||||
import DirectionsBusIcon from "@mui/icons-material/DirectionsBus";
|
||||
import DoorbellIcon from "@mui/icons-material/Doorbell";
|
||||
import DriveEtaIcon from "@mui/icons-material/DriveEta";
|
||||
import ElectricBoltIcon from "@mui/icons-material/ElectricBolt";
|
||||
@@ -23,17 +26,14 @@ import MapIcon from "@mui/icons-material/Map";
|
||||
import MapsHomeWorkIcon from "@mui/icons-material/MapsHomeWork";
|
||||
import Mediation from "@mui/icons-material/Mediation";
|
||||
import PsychologyAltIcon from "@mui/icons-material/PsychologyAlt";
|
||||
import RemoveRoadIcon from "@mui/icons-material/RemoveRoad";
|
||||
import ReportIcon from "@mui/icons-material/Report";
|
||||
import RouteIcon from "@mui/icons-material/Route";
|
||||
import ScienceIcon from "@mui/icons-material/Science";
|
||||
import SecurityIcon from "@mui/icons-material/Security";
|
||||
import SpaceDashboardIcon from "@mui/icons-material/SpaceDashboard";
|
||||
import SpeedIcon from "@mui/icons-material/Speed";
|
||||
import ContactPageIcon from "@mui/icons-material/ContactPage";
|
||||
import DirectionsBusIcon from "@mui/icons-material/DirectionsBus";
|
||||
import SupervisedUserCircleIcon from "@mui/icons-material/SupervisedUserCircle";
|
||||
import RemoveRoadIcon from "@mui/icons-material/RemoveRoad";
|
||||
import { ReportProblem, RvHookup } from "@mui/icons-material";
|
||||
|
||||
export const pageMenu = [
|
||||
{
|
||||
@@ -685,12 +685,12 @@ export const pageMenu = [
|
||||
permissions: ["manage-damage"],
|
||||
},
|
||||
{
|
||||
id: "CarDetails",
|
||||
label: "اطلاعات خودرو",
|
||||
id: "machines",
|
||||
label: "ماشینها",
|
||||
type: "page",
|
||||
route: "/dashboard/car-details",
|
||||
route: "/dashboard/machines",
|
||||
icon: <DriveEtaIcon sx={{ width: "inherit", height: "inherit" }} />,
|
||||
permissions: [""],
|
||||
permissions: ["update-machine"],
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
@@ -682,13 +682,13 @@ export const pageMenuDev = [
|
||||
icon: <GppMaybeIcon sx={{ width: "inherit", height: "inherit" }} />,
|
||||
permissions: ["manage-damage"],
|
||||
},
|
||||
{
|
||||
id: "CarDetails",
|
||||
label: "اطلاعات خودرو",
|
||||
{
|
||||
id: "machines",
|
||||
label: "ماشینها",
|
||||
type: "page",
|
||||
route: "/dashboard/car-details",
|
||||
route: "/dashboard/machines",
|
||||
icon: <DriveEtaIcon sx={{ width: "inherit", height: "inherit" }} />,
|
||||
permissions: ["show-rahdaran"],
|
||||
permissions: ["update-machine"],
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
@@ -277,3 +277,8 @@ export const CONFIRM_VERIFY_LICENSE_FORM = api + "/api/v3/harim/technical_deputy
|
||||
// History
|
||||
export const GET_HISTORY_LIST = api + "/api/v3/harim/detail/histories";
|
||||
export const GET_REQUEST_INQUIRY_PRIVACY = api + "/api/v3/harim/technical_deputy";
|
||||
|
||||
|
||||
// Machines
|
||||
export const GET_MACHINES_LIST = api + "/api/v3/cmms_machines"
|
||||
export const UPDATE_CMMS_MACHINES = api + "/api/v3/cmms_machines"
|
||||
Reference in New Issue
Block a user