push rasad front on new repo
This commit is contained in:
415
src/features/guild/components/GuildManageGuilds.js
Normal file
415
src/features/guild/components/GuildManageGuilds.js
Normal file
@@ -0,0 +1,415 @@
|
||||
import {
|
||||
Button,
|
||||
Pagination,
|
||||
TextField,
|
||||
Tooltip,
|
||||
Typography,
|
||||
} from "@mui/material";
|
||||
import axios from "axios";
|
||||
import { useEffect, useState } from "react";
|
||||
import { RiFileExcel2Fill } from "react-icons/ri";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { RiSearchLine } from "react-icons/ri";
|
||||
|
||||
import { ManageGuildsOperations } from "../../province/components/manage-guilds-operations/ManageGuildsOperations";
|
||||
import { Grid } from "../../../components/grid/Grid";
|
||||
import { SPACING } from "../../../data/spacing";
|
||||
import { CreateGuilds } from "../../province/components/create-guilds/CreateGuilds";
|
||||
import { PageTable } from "../../../components/page-table/PageTable";
|
||||
import {
|
||||
LOADING_END,
|
||||
LOADING_START,
|
||||
OPEN_MODAL,
|
||||
} from "../../../lib/redux/slices/appSlice";
|
||||
import { getRoleFromUrl } from "../../../utils/getRoleFromUrl";
|
||||
import BoxList from "../../../components/box-list/BoxList";
|
||||
|
||||
const GuildMaangeGuilds = () => {
|
||||
const dispatch = useDispatch();
|
||||
const [dataTableM, setDataTableM] = useState([]);
|
||||
const userKey = useSelector((state) => state.userSlice.userProfile.key);
|
||||
|
||||
const [data, setData] = useState([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [totalRows, setTotalRows] = useState(0);
|
||||
const [perPage, setPerPage] = useState(10);
|
||||
|
||||
const [textValue, setTextValue] = useState("");
|
||||
|
||||
const handleTextChange = (event) => {
|
||||
setTextValue(event.target.value);
|
||||
};
|
||||
|
||||
const fetchApiData = async (page, textValue) => {
|
||||
setLoading(true);
|
||||
let response = await axios.get(
|
||||
`total_guilds/?role=Guilds&steward=true&search=filter&value=${textValue}&page=${page}&page_size=${perPage}`
|
||||
);
|
||||
|
||||
setData(response.data.results);
|
||||
setTotalRows(response.data.count);
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
const handlePageChange = (page) => {
|
||||
fetchApiData(page, textValue);
|
||||
};
|
||||
|
||||
const handlePerRowsChange = async (newPerPage, page) => {
|
||||
setLoading(true);
|
||||
|
||||
let response = await axios.get(
|
||||
`total_guilds/?role=Guilds&steward=true&search=filter&value=${textValue}&page=${page}&page_size=${newPerPage}`
|
||||
);
|
||||
|
||||
setData(response.data.results);
|
||||
setTotalRows(response.data.count);
|
||||
setPerPage(newPerPage);
|
||||
|
||||
setLoading(false);
|
||||
dispatch(LOADING_END());
|
||||
};
|
||||
|
||||
const [page, setPage] = useState(0);
|
||||
const handleChangePageM = (event, newPage) => {
|
||||
dispatch(LOADING_START());
|
||||
setPage(newPage);
|
||||
fetchApiData(newPage + 1, textValue);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchApiData(1);
|
||||
}, []);
|
||||
|
||||
const updateTable = () => {
|
||||
fetchApiData(1);
|
||||
};
|
||||
|
||||
const columns = [
|
||||
{
|
||||
name: "شناسه صنف",
|
||||
selector: (item) => item.guildsId,
|
||||
sortable: false,
|
||||
wrap: true,
|
||||
allowOverflow: true,
|
||||
center: true,
|
||||
width: "80px",
|
||||
},
|
||||
{
|
||||
name: "نام واحد صنفی",
|
||||
selector: (item) => item?.guildsName,
|
||||
sortable: false,
|
||||
wrap: true,
|
||||
allowOverflow: true,
|
||||
center: true,
|
||||
width: "80px",
|
||||
},
|
||||
{
|
||||
name: "نام شخص/شرکت",
|
||||
selector: (item) => `${item?.user?.fullname} (${item?.user?.mobile})`,
|
||||
sortable: false,
|
||||
wrap: true,
|
||||
allowOverflow: true,
|
||||
center: true,
|
||||
width: "100px",
|
||||
},
|
||||
{
|
||||
name: "کدملی",
|
||||
selector: (item) => item?.user?.nationalId,
|
||||
sortable: false,
|
||||
wrap: true,
|
||||
allowOverflow: true,
|
||||
center: true,
|
||||
width: "100px",
|
||||
},
|
||||
{
|
||||
name: "نوع فعالیت",
|
||||
selector: (item) => item?.typeActivity,
|
||||
sortable: false,
|
||||
wrap: true,
|
||||
allowOverflow: true,
|
||||
center: true,
|
||||
width: "80px",
|
||||
},
|
||||
{
|
||||
name: "حوزه فعالیت",
|
||||
selector: (item) => item?.areaActivity,
|
||||
sortable: false,
|
||||
wrap: true,
|
||||
allowOverflow: true,
|
||||
center: true,
|
||||
width: "80px",
|
||||
},
|
||||
{
|
||||
name: "کدپستی",
|
||||
selector: (item) => item?.address?.postalCode,
|
||||
sortable: false,
|
||||
wrap: true,
|
||||
allowOverflow: true,
|
||||
center: true,
|
||||
width: "80px",
|
||||
},
|
||||
{
|
||||
name: "استان/شهر/آدرس",
|
||||
selector: (item) =>
|
||||
`${item?.address?.province.name}/${item?.address?.city.name}/${item?.address?.address}`,
|
||||
sortable: false,
|
||||
wrap: true,
|
||||
allowOverflow: true,
|
||||
center: true,
|
||||
width: "80px",
|
||||
},
|
||||
{
|
||||
name: "مباشر",
|
||||
selector: (item) => (item?.steward ? "می باشد" : "نمی باشد"),
|
||||
sortable: false,
|
||||
wrap: true,
|
||||
allowOverflow: true,
|
||||
center: true,
|
||||
width: "80px",
|
||||
},
|
||||
{
|
||||
name: "محدودیت تخصیص",
|
||||
selector: (item) => (item?.limitationAllocation ? "دارد" : "ندارد"),
|
||||
sortable: false,
|
||||
wrap: true,
|
||||
allowOverflow: true,
|
||||
center: true,
|
||||
width: "80px",
|
||||
},
|
||||
{
|
||||
name: "حداکثر تخصیص",
|
||||
selector: (item) => item?.allocationLimit,
|
||||
sortable: false,
|
||||
wrap: true,
|
||||
allowOverflow: true,
|
||||
center: true,
|
||||
width: "80px",
|
||||
},
|
||||
{
|
||||
name: "مباشر",
|
||||
selector: (item) =>
|
||||
item?.centersAllocation?.map((item) => item.label).join(" - "),
|
||||
sortable: false,
|
||||
wrap: true,
|
||||
allowOverflow: true,
|
||||
center: true,
|
||||
width: "80px",
|
||||
},
|
||||
{
|
||||
name: "کشتارگاه",
|
||||
selector: (item) => {
|
||||
return item?.killHouseInfo
|
||||
?.map((item) => `${item.name} (${item.mobile})`)
|
||||
.join(" - ");
|
||||
},
|
||||
sortable: true,
|
||||
wrap: true,
|
||||
allowOverflow: true,
|
||||
center: true,
|
||||
width: "80px",
|
||||
},
|
||||
{
|
||||
name: "وضعیت",
|
||||
selector: (item) => {
|
||||
let state = "";
|
||||
if (item?.provinceAcceptState === "accepted") {
|
||||
state = "تایید شده";
|
||||
} else if (item?.provinceAcceptState === "rejected") {
|
||||
state = "رد شده";
|
||||
} else if (item?.provinceAcceptState === "pending") {
|
||||
state = "در انتظار تایید";
|
||||
}
|
||||
return state;
|
||||
},
|
||||
sortable: true,
|
||||
wrap: true,
|
||||
allowOverflow: true,
|
||||
center: true,
|
||||
},
|
||||
{
|
||||
name: "عملیات",
|
||||
selector: (item, i) => (
|
||||
<ManageGuildsOperations
|
||||
key={i + item?.guildsId}
|
||||
guild={item}
|
||||
updateTable={updateTable}
|
||||
/>
|
||||
),
|
||||
sortable: false,
|
||||
wrap: true,
|
||||
allowOverflow: true,
|
||||
center: true,
|
||||
width: "110px",
|
||||
},
|
||||
];
|
||||
|
||||
const handleSubmit = async (event) => {
|
||||
event.preventDefault();
|
||||
setLoading(true);
|
||||
try {
|
||||
const response = await axios.get(
|
||||
`total_guilds/?role=${getRoleFromUrl()}&search=filter&value=${textValue}&steward=true`
|
||||
);
|
||||
setData(response.data.results);
|
||||
setTotalRows(response.data.count);
|
||||
} catch (error) {
|
||||
console.error("Error fetching data:", error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (getRoleFromUrl() === "CityJahad") {
|
||||
columns.pop();
|
||||
}
|
||||
|
||||
const getItemState = (item) => {
|
||||
let state = "";
|
||||
if (item?.provinceAcceptState === "accepted") {
|
||||
state = "تایید شده";
|
||||
} else if (item?.provinceAcceptState === "rejected") {
|
||||
state = "رد شده";
|
||||
} else if (item?.provinceAcceptState === "pending") {
|
||||
state = "در انتظار تایید";
|
||||
}
|
||||
return state;
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const d = data?.map((item, i) => {
|
||||
return [
|
||||
item.guildsId,
|
||||
item?.guildsName,
|
||||
`${item?.user?.fullname} (${item?.user?.mobile})`,
|
||||
item?.user?.nationalId,
|
||||
item?.typeActivity,
|
||||
item?.areaActivity,
|
||||
item?.address?.postalCode,
|
||||
`${item?.address?.province.name}/${item?.address?.city.name}/${item?.address?.address}`,
|
||||
item?.steward ? "می باشد" : "نمی باشد",
|
||||
item?.limitationAllocation ? "دارد" : "ندارد",
|
||||
item?.allocationLimit,
|
||||
item?.centersAllocation?.map((item) => item.label).join(" - "),
|
||||
item?.killHouseInfo
|
||||
?.map((item) => `${item.name} (${item.mobile})`)
|
||||
.join(" - "),
|
||||
getItemState(item),
|
||||
<ManageGuildsOperations key={i + item?.guildsId} guild={item} />,
|
||||
];
|
||||
});
|
||||
|
||||
setDataTableM(d);
|
||||
}, [data]);
|
||||
|
||||
const columnNames = columns.map((column) => column.name);
|
||||
const isMobile = window.innerWidth <= 600;
|
||||
|
||||
const tableTitle = (
|
||||
<Grid
|
||||
container
|
||||
alignItems="center"
|
||||
justifyContent="space-between"
|
||||
gap={2}
|
||||
paddingTop={2}
|
||||
mb={1}
|
||||
width="100%"
|
||||
>
|
||||
<Grid
|
||||
container
|
||||
width="100%"
|
||||
alignItems="center"
|
||||
justifyContent="space-between"
|
||||
gap={SPACING.SMALL}
|
||||
>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<Grid container alignItems="center" gap={SPACING.SMALL}>
|
||||
<Typography>مدیریت اصناف</Typography>
|
||||
<TextField
|
||||
size="small"
|
||||
autoComplete="off"
|
||||
label="جستجو"
|
||||
variant="outlined"
|
||||
style={{ width: 250 }}
|
||||
onChange={handleTextChange}
|
||||
/>
|
||||
<Button
|
||||
// disabled={!textValue}
|
||||
type="submit"
|
||||
onClick={handleSubmit}
|
||||
endIcon={<RiSearchLine />}
|
||||
>
|
||||
جستجو
|
||||
</Button>
|
||||
</Grid>
|
||||
</form>
|
||||
<Grid>
|
||||
{getRoleFromUrl() !== "CityJahad" && (
|
||||
<Button
|
||||
variant="contained"
|
||||
onClick={() => {
|
||||
dispatch(
|
||||
OPEN_MODAL({
|
||||
right: !(window.innerWidth <= 600),
|
||||
bottom: window.innerWidth <= 600,
|
||||
size: window.innerWidth <= 600 ? "small" : "auto",
|
||||
title: "ثبت واحد جدید",
|
||||
content: <CreateGuilds updateTable={updateTable} />,
|
||||
})
|
||||
);
|
||||
}}
|
||||
>
|
||||
ثبت واحد جدید
|
||||
</Button>
|
||||
)}
|
||||
|
||||
<Tooltip title="خروجی اکسل">
|
||||
<a
|
||||
href={`${
|
||||
axios.defaults.baseURL
|
||||
}guilds_excel/?key=${userKey}&role=${getRoleFromUrl()}&search=filter&value=${textValue}`}
|
||||
rel="noreferrer"
|
||||
>
|
||||
<Button color="success">
|
||||
<RiFileExcel2Fill size={32} />
|
||||
</Button>
|
||||
</a>
|
||||
</Tooltip>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
);
|
||||
|
||||
return (
|
||||
<Grid>
|
||||
{isMobile ? (
|
||||
<Grid container justifyContent="center" gap={SPACING.SMALL}>
|
||||
{tableTitle}
|
||||
<BoxList columns={columnNames} data={dataTableM} />
|
||||
<Pagination
|
||||
count={Math.ceil(totalRows / 10)}
|
||||
page={page + 1}
|
||||
variant="outlined"
|
||||
onChange={(event, newPage) => {
|
||||
handleChangePageM(event, newPage - 1);
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
) : (
|
||||
<PageTable
|
||||
title={tableTitle}
|
||||
columns={columns}
|
||||
data={data}
|
||||
progressPending={loading}
|
||||
pagination
|
||||
paginationServer
|
||||
paginationTotalRows={totalRows}
|
||||
onChangeRowsPerPage={handlePerRowsChange}
|
||||
onChangePage={handlePageChange}
|
||||
/>
|
||||
)}
|
||||
</Grid>
|
||||
);
|
||||
};
|
||||
|
||||
export default GuildMaangeGuilds;
|
||||
Reference in New Issue
Block a user