diff --git a/src/app/(withAuth)/dashboard/azmayesh/page.js b/src/app/(withAuth)/dashboard/azmayesh/page.js index 27f1bd7..adda14c 100644 --- a/src/app/(withAuth)/dashboard/azmayesh/page.js +++ b/src/app/(withAuth)/dashboard/azmayesh/page.js @@ -1,7 +1,7 @@ -import TestPage from "@/components/dashboard/azmayesh"; +import AzmayeshPage from "@/components/dashboard/azmayesh"; const Page = () => { - return ; + return ; }; export default Page; diff --git a/src/app/(withAuth)/dashboard/azmayesh_type/page.js b/src/app/(withAuth)/dashboard/azmayesh_type/page.js new file mode 100644 index 0000000..5ed5c6b --- /dev/null +++ b/src/app/(withAuth)/dashboard/azmayesh_type/page.js @@ -0,0 +1,7 @@ +import AzmayeshTypePage from "@/components/dashboard/azmayeshType"; + +const Page = () => { + return ; +}; + +export default Page; diff --git a/src/assets/images/empty_list.svg b/src/assets/images/empty_list.svg new file mode 100644 index 0000000..2c5b6bd --- /dev/null +++ b/src/assets/images/empty_list.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/dashboard/azmayesh/Actions/Create/index.jsx b/src/components/dashboard/azmayesh/Actions/Create/index.jsx index 54e65db..414dca1 100644 --- a/src/components/dashboard/azmayesh/Actions/Create/index.jsx +++ b/src/components/dashboard/azmayesh/Actions/Create/index.jsx @@ -18,7 +18,7 @@ const AzmayeshCreate = ({ mutate }) => { return ( <> {isMobile ? ( - + ) : ( diff --git a/src/components/dashboard/azmayesh/AzmayeshList.jsx b/src/components/dashboard/azmayesh/AzmayeshList.jsx index d411e4e..89e220f 100644 --- a/src/components/dashboard/azmayesh/AzmayeshList.jsx +++ b/src/components/dashboard/azmayesh/AzmayeshList.jsx @@ -127,7 +127,7 @@ const AzmayeshList = () => { <> { +const AzmayeshPage = () => { return ( @@ -12,4 +12,4 @@ const TestPage = () => { ); }; -export default TestPage; +export default AzmayeshPage; diff --git a/src/components/dashboard/azmayeshType/Actions/Create/index.jsx b/src/components/dashboard/azmayeshType/Actions/Create/index.jsx new file mode 100644 index 0000000..3605ffc --- /dev/null +++ b/src/components/dashboard/azmayeshType/Actions/Create/index.jsx @@ -0,0 +1,33 @@ +"use client"; + +import { Button, IconButton, useMediaQuery } from "@mui/material"; +import { useTheme } from "@emotion/react"; +import { useState } from "react"; +import { AddCircle } from "@mui/icons-material"; +import CandUAzmayeshType from "@/components/dashboard/azmayeshType/Forms/CandUAzmayeshType"; + +const AzmayeshTypeCreate = ({ mutate }) => { + const theme = useTheme(); + const isMobile = useMediaQuery(theme.breakpoints.down("sm")); + const [open, setOpen] = useState(false); + + const handleOpen = () => { + setOpen(true); + }; + + return ( + <> + {isMobile ? ( + + + + ) : ( + + )} + {open && } + + ); +}; +export default AzmayeshTypeCreate; diff --git a/src/components/dashboard/azmayeshType/AzmayeshTypeList.jsx b/src/components/dashboard/azmayeshType/AzmayeshTypeList.jsx new file mode 100644 index 0000000..c86cd83 --- /dev/null +++ b/src/components/dashboard/azmayeshType/AzmayeshTypeList.jsx @@ -0,0 +1,65 @@ +"use client"; + +import { useMemo } from "react"; +import { Box, Typography } from "@mui/material"; +import DataTableWithAuth from "@/core/components/DataTableWithAuth"; +import Toolbar from "./Toolbar"; +import { GET_AZMAYESH_TYPE_LIST_TABLE } from "@/core/utils/routes"; +import moment from "jalali-moment"; +import RowActions from "./RowActions"; + +const AzmayeshTypeList = () => { + const columns = useMemo( + () => [ + { + accessorKey: "id", + header: "کد یکتا", + id: "id", + enableColumnFilter: false, + datatype: "text", + filterFn: "notEquals", + }, + { + accessorKey: "name", + header: "عنوان", + id: "name", + enableColumnFilter: false, + datatype: "text", + filterFn: "notEquals", + }, + { + accessorKey: "created_at", + header: "تاریخ ثبت", + id: "created_at", + enableColumnFilter: false, + datatype: "date", + filterFn: "equals", + Cell: ({ renderedCellValue }) => ( + + {renderedCellValue ? moment(renderedCellValue).locale("fa").format("HH:mm | YYYY/MM/DD") : "-"} + + ), + }, + ], + [] + ); + + return ( + + + + ); +}; +export default AzmayeshTypeList; diff --git a/src/components/dashboard/azmayeshType/Forms/CandUAzmayeshType/AzmayeshFields.jsx b/src/components/dashboard/azmayeshType/Forms/CandUAzmayeshType/AzmayeshFields.jsx new file mode 100644 index 0000000..4cd365f --- /dev/null +++ b/src/components/dashboard/azmayeshType/Forms/CandUAzmayeshType/AzmayeshFields.jsx @@ -0,0 +1,181 @@ +"use client"; + +import React, { useEffect, useState } from "react"; +import { + Button, + Chip, + FormControl, + FormHelperText, + Grid, + InputAdornment, + InputLabel, + MenuItem, + OutlinedInput, + Select, + Typography, +} from "@mui/material"; +import ExtensionIcon from "@mui/icons-material/Extension"; +import SelectItemBox from "@/components/dashboard/azmayeshType/Forms/CandUAzmayeshType/SelectItemBox"; +import KeyboardIcon from "@mui/icons-material/Keyboard"; +import TextFieldsIcon from "@mui/icons-material/TextFields"; +import ViewListIcon from "@mui/icons-material/ViewList"; +import CalendarMonthIcon from "@mui/icons-material/CalendarMonth"; + +const fieldTypeList = [ + { value: "input", label: "متن", icon: }, + { value: "select", label: "انتخابی", icon: }, + { value: "date", label: "تاریخ", icon: }, +]; + +const AzmayeshFields = ({ errors, selectedListItem, register, setValue, fields, watch }) => { + const watchedFields = watch("fields"); + const [isSelectType, setIsSelectType] = useState(false); + const [openSelectItem, setOpenSelectItem] = useState(false); + const [typeIcon, setTypeIcon] = useState(); + + useEffect(() => { + const selectedIcon = fieldTypeList.find((option) => option.value === watchedFields?.[selectedListItem]?.type) + ?.icon || ; + setTypeIcon(selectedIcon); + setIsSelectType(watchedFields[selectedListItem]?.type === "select"); + }, [watchedFields, selectedListItem]); + + return ( + + + + نوع + + {errors.fields?.[selectedListItem]?.type?.message} + + + {isSelectType && ( + + + + + {errors.fields?.[selectedListItem]?.options?.message} + + {openSelectItem && ( + + )} + + )} + + + نام فیلد + setValue(`fields.${selectedListItem}.name`, event.target.value)} + size="small" + fullWidth + type="text" + /> + + {errors.fields?.[selectedListItem]?.name ? errors.fields[selectedListItem].name.message : null} + + + + + + واحد اندازه گیری + setValue(`fields.${selectedListItem}.unit`, event.target.value)} + size="small" + fullWidth + type="text" + /> + + {errors.fields?.[selectedListItem]?.unit ? errors.fields[selectedListItem].unit.message : null} + + + + + ); +}; +export default AzmayeshFields; diff --git a/src/components/dashboard/azmayeshType/Forms/CandUAzmayeshType/ListItems.jsx b/src/components/dashboard/azmayeshType/Forms/CandUAzmayeshType/ListItems.jsx new file mode 100644 index 0000000..4a6005e --- /dev/null +++ b/src/components/dashboard/azmayeshType/Forms/CandUAzmayeshType/ListItems.jsx @@ -0,0 +1,77 @@ +"use client"; + +import { Box, IconButton, ListItem, Stack, Typography } from "@mui/material"; +import React from "react"; +import DeleteIcon from "@mui/icons-material/Delete"; +import SettingsIcon from "@mui/icons-material/Settings"; +import TextFieldsIcon from "@mui/icons-material/TextFields"; +import ViewListIcon from "@mui/icons-material/ViewList"; +import CalendarMonthIcon from "@mui/icons-material/CalendarMonth"; + +const fieldsType = { + input: "متن", + date: "تاریخ", + select: "انتخابی", +}; +const fieldsTypeIcon = { + input: , + date: , + select: , +}; + +const ListItems = ({ index, handleRemove, selectedListItem, setSelectedListItem, watch }) => { + const watchedFields = watch("fields"); + return ( + + setSelectedListItem(index)} + > + + + handleRemove(index)}> + + + + } + > + + + {watchedFields[index].name !== "" ? watchedFields[index].name : "نام تعیین نشده"} + + + {fieldsTypeIcon[watchedFields[index].type] || null} + + {watchedFields[index].type !== "" ? fieldsType[watchedFields[index].type] : "واحد تعیین نشده"} + + + + + ); +}; +export default ListItems; diff --git a/src/components/dashboard/azmayeshType/Forms/CandUAzmayeshType/SelectItemBox.jsx b/src/components/dashboard/azmayeshType/Forms/CandUAzmayeshType/SelectItemBox.jsx new file mode 100644 index 0000000..888be19 --- /dev/null +++ b/src/components/dashboard/azmayeshType/Forms/CandUAzmayeshType/SelectItemBox.jsx @@ -0,0 +1,108 @@ +import { + Box, + Button, + Chip, + Dialog, + DialogActions, + DialogContent, + Divider, + IconButton, + List, + ListItem, + ListItemText, + TextField, + Typography, +} from "@mui/material"; +import DeleteIcon from "@mui/icons-material/Delete"; +import React, { useState } from "react"; + +const SelectItemBox = ({ open, setOpen, setValue, index, watch }) => { + const watchedFields = watch("fields"); + const [itemValue, setItemValue] = useState(""); + const [listArr, setListArr] = useState(watchedFields?.[index]?.options); + + const addToList = () => { + if (itemValue) { + setListArr([...listArr, itemValue]); + setItemValue(""); + } + }; + + const removeFromList = (index) => { + setListArr(listArr.filter((_, i) => i !== index)); + }; + + const saveAndCloseList = () => { + setValue(`fields.${index}.options`, listArr); + closeModal(); + }; + + const closeModal = () => { + setOpen(false); + }; + + return ( + + + + { + setItemValue(event.target.value); + }} + /> + + + + + + + + {listArr.length !== 0 ? ( + listArr.map((item, index) => ( + removeFromList(index)} + > + + + } + > + + + )) + ) : ( + + هنوز آیتمی ثبت نشده است + + )} + + + + + + + + ); +}; + +export default SelectItemBox; diff --git a/src/components/dashboard/azmayeshType/Forms/CandUAzmayeshType/index.jsx b/src/components/dashboard/azmayeshType/Forms/CandUAzmayeshType/index.jsx new file mode 100644 index 0000000..43eeb1a --- /dev/null +++ b/src/components/dashboard/azmayeshType/Forms/CandUAzmayeshType/index.jsx @@ -0,0 +1,224 @@ +import { + Box, + Button, + Chip, + Dialog, + DialogActions, + DialogContent, + Divider, + FormControl, + FormHelperText, + Grid, + InputLabel, + List, + OutlinedInput, + Typography, +} from "@mui/material"; +import StyledForm from "@/core/components/StyledForm"; +import useRequest from "@/lib/hooks/useRequest"; +import { useState } from "react"; +import { useFieldArray, useForm } from "react-hook-form"; +import { array, object, string } from "yup"; +import { yupResolver } from "@hookform/resolvers/yup"; +import DataSaverOnIcon from "@mui/icons-material/DataSaverOn"; +import ListItems from "./ListItems"; +import AzmayeshFields from "./AzmayeshFields"; +import { ADD_AZMAYESH_TYPE, UPDATE_AZMAYESH_TYPE } from "@/core/utils/routes"; + +const validationSchema = object({ + name: string().required("عنوان نوع آزمایش را مشخص کنید!"), + fields: array() + .of( + object({ + name: string().required("نام فیلد الزامی است"), + type: string().required("نوع فیلد الزامی است"), + options: array().when("type", { + is: "select", + then: (schema) => schema.min(1, "حداقل باید یک آیتم برای نوع انتخابی ایجاد کنید."), + otherwise: (schema) => schema.notRequired(), + }), + }) + ) + .min(1, "حداقل باید یک فیلد ایجاد نمایید."), +}); + +const CandUAzmayeshType = ({ open, setOpen, mutate, rowId, updateInfo }) => { + const requestServer = useRequest({ auth: true }); + const [selectedListItem, setSelectedListItem] = useState(null); + const [isSubmitting, setIsSubmitting] = useState(false); + + const handleClose = () => { + setOpen(false); + }; + const defaultValues = { + name: updateInfo?.name || "", + fields: Array.isArray(updateInfo?.azmayesh_fields) + ? updateInfo.azmayesh_fields.map((field) => ({ + name: field.name || "", + type: field.type || "", + unit: field.unit || "", + options: field.option ? field.option : [], + })) + : [], + }; + + const { + control, + register, + handleSubmit, + setValue, + watch, + formState: { errors }, + } = useForm({ defaultValues, resolver: yupResolver(validationSchema), mode: "onBlur" }); + + const { fields, append, remove } = useFieldArray({ + control, + name: "fields", + }); + + const handleRemove = (index) => { + remove(index); + if (selectedListItem === index) { + setSelectedListItem(null); + } else if (selectedListItem > index) { + setSelectedListItem((prev) => prev - 1); + } + }; + + const handleAddField = () => { + append({ name: "", type: "", unit: "", options: [] }); + }; + + const onSubmit = async (data) => { + setIsSubmitting(true); + const formData = new FormData(); + formData.append("name", data.name); + data.fields.map((field, index) => { + formData.append(`fields[${index}][name]`, field.name); + formData.append(`fields[${index}][unit]`, field.unit); + formData.append(`fields[${index}][type]`, field.type); + if (field.options.length !== 0) formData.append(`fields[${index}][option]`, JSON.stringify(field.options)); + }); + + requestServer(updateInfo ? `${UPDATE_AZMAYESH_TYPE}/${rowId}` : ADD_AZMAYESH_TYPE, "post", { + data: formData, + }) + .then(() => { + mutate(); + handleClose(); + }) + .catch(() => {}) + .finally(() => setIsSubmitting(false)); + }; + + return ( + + + + + + عنوان نوع آزمایش + + {errors.name ? errors.name.message : null} + + + + + + + + + + {fields.length !== 0 ? ( + fields.map((item, index) => ( + + )) + ) : ( + + فیلدی وجود ندارد + + )} + + + {errors.fields ? errors.fields.message : null} + + + + + + + + {selectedListItem !== null ? ( + + ) : ( + + + از بخش لیست فیلد ها یک آیتم را انتخاب نمایید + + + )} + + + + + + + + + + ); +}; + +export default CandUAzmayeshType; diff --git a/src/components/dashboard/azmayeshType/RowActions/DeleteAzmayeshType/index.jsx b/src/components/dashboard/azmayeshType/RowActions/DeleteAzmayeshType/index.jsx new file mode 100644 index 0000000..888ab6d --- /dev/null +++ b/src/components/dashboard/azmayeshType/RowActions/DeleteAzmayeshType/index.jsx @@ -0,0 +1,78 @@ +import { + Button, + Dialog, + DialogActions, + DialogContent, + DialogTitle, + IconButton, + Tooltip, + Typography, +} from "@mui/material"; +import DeleteIcon from "@mui/icons-material/Delete"; +import useRequest from "@/lib/hooks/useRequest"; +import { useState } from "react"; +import { DELETE_AZMAYESH_TYPE_LIST } from "@/core/utils/routes"; + +const DeleteAzmayeshType = ({ rowId, mutate }) => { + const requestServer = useRequest({ auth: true }); + const [openDeleteDialog, setOpenDeleteDialog] = useState(false); + const [isSubmitting, setIsSubmitting] = useState(false); + + const handleSubmit = () => { + setIsSubmitting(true); + requestServer(`${DELETE_AZMAYESH_TYPE_LIST}/${rowId}`, "post") + .then(() => { + setOpenDeleteDialog(false); + mutate(); + }) + .catch(() => {}) + .finally(() => { + setIsSubmitting(false); + }); + }; + + return ( + <> + + { + setOpenDeleteDialog(true); + }} + > + + + + + حذف نوع آزمایش + + آیا از حذف این نوع آزمایش مطمئن هستید؟ + + + + + + + + ); +}; +export default DeleteAzmayeshType; diff --git a/src/components/dashboard/azmayeshType/RowActions/UpdateAzmayeshType/index.jsx b/src/components/dashboard/azmayeshType/RowActions/UpdateAzmayeshType/index.jsx new file mode 100644 index 0000000..e9f1bde --- /dev/null +++ b/src/components/dashboard/azmayeshType/RowActions/UpdateAzmayeshType/index.jsx @@ -0,0 +1,48 @@ +import { IconButton, Tooltip } from "@mui/material"; +import EditIcon from "@mui/icons-material/Edit"; +import { GET_AZMAYESH_TYPE_LIST_TABLE } from "@/core/utils/routes"; +import { useState } from "react"; +import useRequest from "@/lib/hooks/useRequest"; +import CandUAzmayeshType from "@/components/dashboard/azmayeshType/Forms/CandUAzmayeshType"; + +const UpdateAzmayeshType = ({ rowId, mutate }) => { + const requestServer = useRequest({ auth: true }); + const [openUpdateDialog, setOpenUpdateDialog] = useState(false); + const [updateInfo, setUpdateInfo] = useState(null); + + const handleGetInfo = () => { + requestServer(`${GET_AZMAYESH_TYPE_LIST_TABLE}/${rowId}`, "get") + .then((response) => { + setUpdateInfo(response.data.data); + }) + .catch(() => {}) + .finally(() => { + setOpenUpdateDialog(true); + }); + }; + + return ( + <> + + + + + + {openUpdateDialog && ( + + )} + + ); +}; + +export default UpdateAzmayeshType; diff --git a/src/components/dashboard/azmayeshType/RowActions/index.jsx b/src/components/dashboard/azmayeshType/RowActions/index.jsx new file mode 100644 index 0000000..43adc1b --- /dev/null +++ b/src/components/dashboard/azmayeshType/RowActions/index.jsx @@ -0,0 +1,13 @@ +import { Box } from "@mui/material"; +import UpdateAzmayeshType from "./UpdateAzmayeshType"; +import DeleteAzmayeshType from "./DeleteAzmayeshType"; + +const RowActions = ({ row, mutate }) => { + return ( + + + + + ); +}; +export default RowActions; diff --git a/src/components/dashboard/azmayeshType/Toolbar.jsx b/src/components/dashboard/azmayeshType/Toolbar.jsx new file mode 100644 index 0000000..b08bc4b --- /dev/null +++ b/src/components/dashboard/azmayeshType/Toolbar.jsx @@ -0,0 +1,10 @@ +import AzmayeshTypeCreate from "./Actions/Create"; + +const Toolbar = ({ mutate }) => { + return ( + <> + + + ); +}; +export default Toolbar; diff --git a/src/components/dashboard/azmayeshType/index.jsx b/src/components/dashboard/azmayeshType/index.jsx new file mode 100644 index 0000000..b7ec580 --- /dev/null +++ b/src/components/dashboard/azmayeshType/index.jsx @@ -0,0 +1,15 @@ +"use client"; + +import PageTitle from "@/core/components/PageTitle"; +import { Stack } from "@mui/material"; +import AzmayeshTypeList from "./AzmayeshTypeList"; + +const AzmayeshTypePage = () => { + return ( + + + + + ); +}; +export default AzmayeshTypePage; diff --git a/src/core/components/DataTable/Main.js b/src/core/components/DataTable/Main.js index b94655e..26318ff 100644 --- a/src/core/components/DataTable/Main.js +++ b/src/core/components/DataTable/Main.js @@ -26,6 +26,7 @@ const DataTable_Main = (props) => { } = props; const flatColumns = flattenArrayOfObjects(columns, "columns"); const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 10 }); + const [totalRowCount, setTotalRowCount] = useState(0); const flattenHideData = flattenObjectOfObjects(hideData); const onSortingChange = (event) => { setSortData(event); @@ -51,6 +52,7 @@ const DataTable_Main = (props) => { const fetcher = async (url) => { try { const response = await request(url); + setTotalRowCount(response.data?.meta?.totalRowCount); if (specific_data) { return specific_data(response.data); } else { @@ -112,6 +114,7 @@ const DataTable_Main = (props) => { manualSorting: true, onPaginationChange: setPagination, onSortingChange: onSortingChange, + rowCount: totalRowCount, renderTopToolbarCustomActions: ({ table }) => <>{TableToolbar && }, renderRowActions: ({ row }) => , ...props, diff --git a/src/core/components/DataTable/index.js b/src/core/components/DataTable/index.js index f5bbdfd..1e881f9 100644 --- a/src/core/components/DataTable/index.js +++ b/src/core/components/DataTable/index.js @@ -8,6 +8,7 @@ const DataTable = (props) => { page_name={props.page_name} table_name={props.table_name} columns={props.columns} + initialSort={props.sorting} > diff --git a/src/core/utils/pageMenu.js b/src/core/utils/pageMenu.js index 1a7fb1f..a38de2b 100644 --- a/src/core/utils/pageMenu.js +++ b/src/core/utils/pageMenu.js @@ -19,6 +19,7 @@ import ReportIcon from "@mui/icons-material/Report"; import AssignmentLateIcon from "@mui/icons-material/AssignmentLate"; import LineAxisIcon from "@mui/icons-material/LineAxis"; import ScienceIcon from "@mui/icons-material/Science"; +import BiotechIcon from "@mui/icons-material/Biotech"; export const pageMenu = [ { @@ -482,6 +483,14 @@ export const pageMenu = [ type: "page", route: "/dashboard/azmayesh", icon: , - permissions: ["all"], + permissions: ["azmayesh-management"], + }, + { + id: "azmayeshType", + label: "نوع آزمایشات", + type: "page", + route: "/dashboard/azmayesh_type", + icon: , + permissions: ["azmayesh-type-management"], }, ]; diff --git a/src/core/utils/routes.js b/src/core/utils/routes.js index c507026..2fa0137 100644 --- a/src/core/utils/routes.js +++ b/src/core/utils/routes.js @@ -14,7 +14,8 @@ export const GET_PREV_STATE_OPINION = "/v3/api/fake-prev-state-opinion"; export const SUBMIT_ROAD_SAFETY_FORM = "/v3/api/fake-submit"; export const CREATE_AZMAYESH = api + "/api/v3/azmayeshes/store"; export const UPDATE_AZMAYESH = api + "/api/v3/azmayeshes/update"; -export const GET_AZMAYESH_TYPE_LIST = api + "/api/v3/azmayesh_types"; +export const GET_AZMAYESH_TYPE_LIST = api + "/api/v3/azmayesh_types/list"; +export const GET_AZMAYESH_TYPE_LIST_TABLE = api + "/api/v3/azmayesh_types"; export const GET_AZMAYESH_LIST = api + "/api/v3/azmayeshes"; export const DELETE_AZMAYESH = api + "/api/v3/azmayeshes/delete"; export const GET_AZMAYESH_SAMPLE_FIELDS = api + "/api/v3/azmayesh_types/fields"; @@ -22,3 +23,6 @@ export const ADD_SAMPLE_TO_AZMAYESH = api + "/api/v3/azmayesh_samples/store"; export const UPDATE_SAMPLE_OF_AZMAYESH = api + "/api/v3/azmayesh_samples/update"; export const GET_SAMPLE_LIST = api + "/api/v3/azmayesh_samples"; export const DELETE_SAMPLE_LIST = api + "/api/v3/azmayesh_samples/delete"; +export const DELETE_AZMAYESH_TYPE_LIST = api + "/api/v3/azmayesh_types/delete"; +export const ADD_AZMAYESH_TYPE = api + "/api/v3/azmayesh_types/store"; +export const UPDATE_AZMAYESH_TYPE = api + "/api/v3/azmayesh_types/update"; diff --git a/src/lib/contexts/DataTable.js b/src/lib/contexts/DataTable.js index ff3439c..3d69afc 100644 --- a/src/lib/contexts/DataTable.js +++ b/src/lib/contexts/DataTable.js @@ -7,14 +7,14 @@ import { LinearProgress } from "@mui/material"; export const DataTableContext = createContext(); -const DataTableProvider = ({ children, user_id, page_name, table_name, columns }) => { +const DataTableProvider = ({ children, user_id, page_name, table_name, columns, initialSort = [] }) => { const { settingStore } = useTableSetting(); const [isInitStates, setInitStates] = useState(false); const flatColumns = flattenArrayOfObjects(columns, "columns"); const [initFilter, setInitFilter] = useState({}); const [filterData, setFilterData] = useState({}); - const [initSort, setInitSort] = useState([]); - const [sortData, setSortData] = useState([]); + const [initSort, setInitSort] = useState(initialSort || []); + const [sortData, setSortData] = useState(initialSort || []); const [initHide, setInitHide] = useState({}); const [hideData, setHideData] = useState({}); @@ -51,8 +51,8 @@ const DataTableProvider = ({ children, user_id, page_name, table_name, columns } }, {}); setFilterData(filterValues); setInitFilter(filterValues); - setSortData(settingStore?.[user_id]?.[page_name]?.[table_name]?.["sorts"] || []); - setInitSort(settingStore?.[user_id]?.[page_name]?.[table_name]?.["sorts"] || []); + setSortData(settingStore?.[user_id]?.[page_name]?.[table_name]?.["sorts"] || initialSort); + setInitSort(settingStore?.[user_id]?.[page_name]?.[table_name]?.["sorts"] || initialSort); setInitStates(true); }, [settingStore, isInitStates]);