push rasad front on new repo
This commit is contained in:
42
src/components/flex-table/ColsListItems.js
Normal file
42
src/components/flex-table/ColsListItems.js
Normal file
@@ -0,0 +1,42 @@
|
||||
// Import necessary dependencies from Material-UI
|
||||
import React, { useEffect, useState } from "react";
|
||||
import List from "@mui/material/List";
|
||||
import ListItem from "@mui/material/ListItem";
|
||||
import Checkbox from "@mui/material/Checkbox";
|
||||
import Typography from "@mui/material/Typography";
|
||||
|
||||
// Define your CompactList component
|
||||
const ColsListItems = ({ items, changeColsHandler }) => {
|
||||
// State to manage the checked items
|
||||
const [checkedItems, setCheckedItems] = useState(items);
|
||||
|
||||
// Function to handle checkbox state changes
|
||||
const handleCheckboxChange = (item) => {
|
||||
const prevItems = checkedItems.filter((it) => it.name !== item.name);
|
||||
let newItem = { ...item };
|
||||
newItem.hide = !newItem.hide;
|
||||
|
||||
const arrayOfObjects = [...prevItems, newItem];
|
||||
setCheckedItems(arrayOfObjects);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
changeColsHandler(checkedItems);
|
||||
}, [checkedItems]);
|
||||
|
||||
return (
|
||||
<List dense>
|
||||
{checkedItems.map((item) => (
|
||||
<ListItem key={item} dense>
|
||||
<Checkbox
|
||||
checked={!item.hide}
|
||||
onChange={() => handleCheckboxChange(item)}
|
||||
/>
|
||||
<Typography variant="body2">{item.name}</Typography>
|
||||
</ListItem>
|
||||
))}
|
||||
</List>
|
||||
);
|
||||
};
|
||||
|
||||
export default ColsListItems;
|
||||
194
src/components/flex-table/FlexTable.js
Normal file
194
src/components/flex-table/FlexTable.js
Normal file
@@ -0,0 +1,194 @@
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import {
|
||||
MaterialReactTable,
|
||||
useMaterialReactTable,
|
||||
} from "material-react-table";
|
||||
import { MRT_Localization_FA } from "material-react-table/locales/fa";
|
||||
import { Grid } from "../grid/Grid";
|
||||
import { useSelector } from "react-redux";
|
||||
import { formatJustDate } from "../../utils/formatTime";
|
||||
import axios from "axios";
|
||||
import { Box } from "@mui/material";
|
||||
import { RowItemCity } from "./RowItemCity";
|
||||
|
||||
export const FlexTable = () => {
|
||||
const { authToken } = useSelector((state) => state.userSlice);
|
||||
const [data, setData] = useState([]);
|
||||
const [isError, setIsError] = useState(false);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [isRefetching, setIsRefetching] = useState(false);
|
||||
const [rowCount, setRowCount] = useState(0);
|
||||
|
||||
const [columnFilters, setColumnFilters] = useState([]);
|
||||
const [globalFilter, setGlobalFilter] = useState("");
|
||||
const [sorting, setSorting] = useState([]);
|
||||
const [pagination, setPagination] = useState({
|
||||
pageIndex: 0,
|
||||
pageSize: 10,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
if (!data.length) {
|
||||
setIsLoading(true);
|
||||
} else {
|
||||
setIsRefetching(true);
|
||||
}
|
||||
const url = new URL(
|
||||
`${axios.defaults.baseURL}poultry_requests_for_total_information_in_table/?date1=2023-12-24&date2=2023-12-26&search=filter&value=`
|
||||
);
|
||||
// url.searchParams.set(
|
||||
// "page",
|
||||
// `${pagination.pageIndex * pagination.pageSize}`
|
||||
// );
|
||||
|
||||
url.searchParams.set("page", `${pagination.pageIndex + 1}`);
|
||||
url.searchParams.set("size", `${pagination.pageSize}`);
|
||||
url.searchParams.set("filters", JSON.stringify(columnFilters ?? []));
|
||||
url.searchParams.set("globalFilter", globalFilter ?? "");
|
||||
url.searchParams.set("sorting", JSON.stringify(sorting ?? []));
|
||||
|
||||
try {
|
||||
const response = await fetch(url.href, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${authToken}`,
|
||||
},
|
||||
});
|
||||
const json = await response.json();
|
||||
const refineData = json.results.map((item) => {
|
||||
let sellType = "";
|
||||
|
||||
if (item.directBuying) {
|
||||
sellType = "خرید مستقیم";
|
||||
} else if (item.union) {
|
||||
sellType = "خرید خارج از استان";
|
||||
} else {
|
||||
sellType = "اتحادیه";
|
||||
}
|
||||
return {
|
||||
shomarehParvande: item?.order_code,
|
||||
tarikhKoshtar: formatJustDate(item?.send_date),
|
||||
noeForoosh: sellType,
|
||||
farmMorghdar: item?.poultry?.unit_name,
|
||||
tedad: item?.quantity?.toLocaleString(),
|
||||
vaznTotal: (item?.quantity * item?.Index_weight)?.toLocaleString(),
|
||||
ghimatMorghdar: item?.amount?.toLocaleString() + " ریال",
|
||||
item,
|
||||
};
|
||||
});
|
||||
setData(refineData);
|
||||
setRowCount(json.count);
|
||||
} catch (error) {
|
||||
setIsError(true);
|
||||
console.error(error);
|
||||
return;
|
||||
}
|
||||
setIsError(false);
|
||||
setIsLoading(false);
|
||||
setIsRefetching(false);
|
||||
};
|
||||
fetchData();
|
||||
}, [
|
||||
columnFilters,
|
||||
globalFilter,
|
||||
pagination.pageIndex,
|
||||
pagination.pageSize,
|
||||
sorting,
|
||||
]);
|
||||
|
||||
const columns = useMemo(
|
||||
() => [
|
||||
{
|
||||
accessorKey: "shomarehParvande",
|
||||
header: "شماره پرونده",
|
||||
},
|
||||
{
|
||||
accessorKey: "tarikhKoshtar",
|
||||
header: "تاریخ کشتار",
|
||||
},
|
||||
{
|
||||
accessorKey: "noeForoosh",
|
||||
header: "نوع فروش",
|
||||
},
|
||||
{
|
||||
accessorKey: "farmMorghdar",
|
||||
header: "فارم (مرغدار)",
|
||||
},
|
||||
{
|
||||
accessorKey: "tedad",
|
||||
header: "تعداد",
|
||||
},
|
||||
{
|
||||
accessorKey: "vaznTotal",
|
||||
header: "وزن کل (کیلوگرم)",
|
||||
},
|
||||
{
|
||||
accessorKey: "ghimatMorghdar",
|
||||
header: "قیمت مرغدار",
|
||||
},
|
||||
],
|
||||
[]
|
||||
);
|
||||
|
||||
const table = useMaterialReactTable({
|
||||
columns,
|
||||
data,
|
||||
renderDetailPanel: ({ row }) => {
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
// display: "grid",
|
||||
margin: "auto",
|
||||
// gridTemplateColumns: "1fr 1fr",
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
<RowItemCity item={row.original.item} />
|
||||
{/* <Typography>Address</Typography> */}
|
||||
{/* <Typography>City: {row.original.city}</Typography>
|
||||
<Typography>State: {row.original.state}</Typography>
|
||||
<Typography>Country: {row.original.country}</Typography> */}
|
||||
</Box>
|
||||
);
|
||||
},
|
||||
enableRowSelection: true,
|
||||
getRowId: (row) => row.key,
|
||||
initialState: {
|
||||
showColumnFilters: true,
|
||||
density: "compact",
|
||||
enableRowOrdering: false,
|
||||
},
|
||||
manualFiltering: true,
|
||||
manualPagination: true,
|
||||
enableStickyHeader: true,
|
||||
manualSorting: true,
|
||||
muiToolbarAlertBannerProps: isError
|
||||
? {
|
||||
color: "error",
|
||||
children: "مشکلی پیش آمده است.",
|
||||
}
|
||||
: undefined,
|
||||
onColumnFiltersChange: setColumnFilters,
|
||||
onGlobalFilterChange: setGlobalFilter,
|
||||
onPaginationChange: setPagination,
|
||||
onSortingChange: setSorting,
|
||||
rowCount,
|
||||
state: {
|
||||
columnFilters,
|
||||
globalFilter,
|
||||
isLoading,
|
||||
pagination,
|
||||
showAlertBanner: isError,
|
||||
showProgressBars: isRefetching,
|
||||
sorting,
|
||||
},
|
||||
enableColumnOrdering: true,
|
||||
localization: MRT_Localization_FA,
|
||||
});
|
||||
|
||||
return (
|
||||
<Grid xs={9}>
|
||||
<MaterialReactTable table={table} />
|
||||
</Grid>
|
||||
);
|
||||
};
|
||||
181
src/components/flex-table/RowItemCity.js
Normal file
181
src/components/flex-table/RowItemCity.js
Normal file
@@ -0,0 +1,181 @@
|
||||
import {
|
||||
Accordion,
|
||||
AccordionDetails,
|
||||
AccordionSummary,
|
||||
Typography,
|
||||
} from "@mui/material";
|
||||
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
|
||||
import { Grid } from "../grid/Grid";
|
||||
import { SPACING } from "../../data/spacing";
|
||||
|
||||
const styles = {
|
||||
tableInNewPage: {
|
||||
pageBreakAfter: "always",
|
||||
paddingLeft: "40px",
|
||||
paddingRight: "40px",
|
||||
direction: "rtl",
|
||||
fontFamily: "titr",
|
||||
fontWeight: "bold",
|
||||
},
|
||||
container: {
|
||||
width: "95%",
|
||||
alignSelf: "center",
|
||||
pageBreakInside: "avoid",
|
||||
},
|
||||
|
||||
invoiceTable: {
|
||||
width: "100%",
|
||||
borderCollapse: "collapse",
|
||||
alignSelf: "center",
|
||||
fontFamily: "titr",
|
||||
marginBottom: "5px",
|
||||
marginTop: "15px",
|
||||
borderRadius: "10px",
|
||||
},
|
||||
tableCell: {
|
||||
border: "1px solid #000",
|
||||
pAlign: "left",
|
||||
textAlign: "center",
|
||||
fontSize: 12,
|
||||
fontWeight: "bolder",
|
||||
color: "#403e3e",
|
||||
},
|
||||
tableCellGreen: {
|
||||
border: "1px solid #000",
|
||||
pAlign: "left",
|
||||
textAlign: "center",
|
||||
fontSize: 12,
|
||||
color: "white",
|
||||
fontWeight: "bolder",
|
||||
backgroundColor: "rgba(26, 188, 156, 0.7)",
|
||||
},
|
||||
tableCellMobile: {
|
||||
border: "1px solid #000",
|
||||
pAlign: "left",
|
||||
textAlign: "center",
|
||||
fontSize: 12,
|
||||
},
|
||||
tableInnerCell: {
|
||||
border: "1px solid #000",
|
||||
pAlign: "left",
|
||||
textAlign: "center",
|
||||
fontSize: 9,
|
||||
whiteSpace: "nowrap",
|
||||
},
|
||||
tableHeader: {
|
||||
backgroundColor: "rgba(211, 211, 211, 0.3)",
|
||||
pageBreakAfter: "auto",
|
||||
},
|
||||
headerRow: {
|
||||
background: "linear-gradient(to right, #E684AE, #79CBCA, #77A1D3)",
|
||||
backgroundColor: "rgba(232, 67, 147, 0.4)",
|
||||
color: "#422020",
|
||||
pageBreakInside: "avoid",
|
||||
pageBreakAfter: "auto",
|
||||
},
|
||||
|
||||
tableHeaderCell: {
|
||||
fontSize: 14,
|
||||
border: "1px solid #000",
|
||||
padding: "4px",
|
||||
textAlign: "center",
|
||||
fontWeight: "bolder",
|
||||
},
|
||||
tableHeaderCellGreen: {
|
||||
backgroundColor: "rgba(26, 188, 156, 0.7)",
|
||||
fontSize: 12,
|
||||
border: "1px solid #000",
|
||||
padding: "4px",
|
||||
textAlign: "center",
|
||||
fontWeight: "bolder",
|
||||
color: "white",
|
||||
},
|
||||
footer: {
|
||||
left: 0,
|
||||
bottom: 0,
|
||||
width: "100%",
|
||||
position: "absolute",
|
||||
},
|
||||
footerContainer: {
|
||||
alignItems: "center",
|
||||
display: "flex",
|
||||
},
|
||||
|
||||
tableRowEven: {
|
||||
backgroundColor: "rgba(170, 183, 255, 0.3)",
|
||||
},
|
||||
titleOfTable: {
|
||||
marginRight: "20px",
|
||||
fontSize: "15px",
|
||||
},
|
||||
tableCellAlert: {
|
||||
border: "1px solid #000",
|
||||
pAlign: "left",
|
||||
textAlign: "center",
|
||||
fontSize: 12,
|
||||
color: "red",
|
||||
},
|
||||
levelDetails: {
|
||||
color: "red",
|
||||
fontSize: 12,
|
||||
},
|
||||
};
|
||||
|
||||
export const RowItemCity = ({ item }) => {
|
||||
return (
|
||||
<Accordion>
|
||||
<AccordionSummary
|
||||
expandIcon={<ExpandMoreIcon />}
|
||||
aria-controls="panel1a-content"
|
||||
className="row-item-table-accordion"
|
||||
>
|
||||
<Typography>مرحله شهرستان</Typography>
|
||||
</AccordionSummary>
|
||||
<AccordionDetails>
|
||||
<Grid mt={SPACING.SMALL}>
|
||||
<Typography variant={"body2"}>مرحله شهرستان</Typography>
|
||||
<table style={styles.invoiceTable}>
|
||||
<thead style={styles.tableHeader}>
|
||||
<tr style={styles.headerRow}>
|
||||
<th style={styles.tableHeaderCell}>اپراتور</th>
|
||||
<th style={styles.tableHeaderCell}>سمت</th>
|
||||
<th style={styles.tableHeaderCell}>تلفن</th>
|
||||
<th style={styles.tableHeaderCell}>تعاونی مرغدار</th>
|
||||
<th style={styles.tableHeaderCell}>آدرس</th>
|
||||
<th style={styles.tableHeaderCell}>وضعیت</th>
|
||||
</tr>
|
||||
</thead>
|
||||
{item?.city_state?.date ? (
|
||||
<tbody>
|
||||
<tr style={styles.tableRow}>
|
||||
<td style={styles.tableCell}>
|
||||
{item?.city_state?.city_operator_fullname}
|
||||
</td>
|
||||
<td style={styles.tableCell}>اپراتور شهرستان</td>
|
||||
<td style={styles.tableCell}>
|
||||
{item?.city_state?.city_operator_mobile}
|
||||
</td>
|
||||
<td style={styles.tableCell}>{item?.city_state?.poultry}</td>
|
||||
<td style={styles.tableCell}>
|
||||
{item?.city_state?.province +
|
||||
" - " +
|
||||
item?.city_state?.city}
|
||||
</td>
|
||||
<td style={styles.tableCell}>
|
||||
{item?.city_state?.state === "accept"
|
||||
? "تایید شده"
|
||||
: "رد شده"}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
) : (
|
||||
<td style={styles.tableCellAlert} colSpan={6}>
|
||||
هنوز شهرستان پرونده را تائید نکرده است
|
||||
</td>
|
||||
)}
|
||||
</table>
|
||||
</Grid>
|
||||
</AccordionDetails>
|
||||
</Accordion>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user