diff --git a/public/global.scss b/public/global.scss index 7802651..a383b5f 100644 --- a/public/global.scss +++ b/public/global.scss @@ -1 +1,7 @@ -@import "fontiran"; \ No newline at end of file +@import "fontiran"; + +.filter-toast { + box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px; + background-color: #d0dfe8; + border: 1px dashed #095b8c; +} \ No newline at end of file diff --git a/src/components/home/Toolbar.jsx b/src/components/home/Toolbar.jsx index c528236..1270b92 100644 --- a/src/components/home/Toolbar.jsx +++ b/src/components/home/Toolbar.jsx @@ -1,15 +1,9 @@ import {Button} from "@mui/material"; -import {toast} from "react-toastify"; const Toolbar = ({columns}) => { - - const notif = () => { - toast("Wow so easy!") - } - return ( <> - + ) } diff --git a/src/core/components/DataTable/Main.js b/src/core/components/DataTable/Main.js index d6efd7a..89fda97 100644 --- a/src/core/components/DataTable/Main.js +++ b/src/core/components/DataTable/Main.js @@ -1,19 +1,149 @@ -import {useMaterialReactTable} from "material-react-table"; import DataTable_Paper from "./table/Paper"; +import {useMaterialReactTable} from "material-react-table"; +import {FA_DATATABLE_LOCALIZATION} from "./localization/fa/datatable"; +import useTableSetting from "@/lib/hooks/useTableSetting"; +import {flattenArrayOfObjects} from "@/core/utils/flattenArrayOfObjects"; +import Toolbar from "@/components/home/Toolbar"; -const isTableInstanceProp = (props) => props.table !== undefined; +const data = [ + { + name: { + firstName: 'امین', + lastName: 'قاسمپور', + }, + address: 'فلان جا', + city: 'تهران', + state: 'بررسی شده', + price: '20', + updated_at: '2024/05/02', + company: 'همراه اول', + area: 'منطقه 5', + }, + { + name: { + firstName: 'امیر حسین', + lastName: 'محمودی', + }, + address: 'فلان جا', + city: 'تهران', + state: 'تکمیل شده', + price: '27', + updated_at: '2024/05/02', + company: 'وایتل', + area: 'منطقه 27', + }, + { + name: { + firstName: 'یاسمن', + lastName: 'علی اکبری', + }, + address: 'فلان جا', + city: 'شیراز', + state: 'بررسی شده', + price: '32', + updated_at: '2024/05/02', + company: 'ایرانسل', + area: 'منطقه 23', + }, + { + name: { + firstName: 'حمیدرضا', + lastName: 'رنجبرپور', + }, + address: 'فلان جا', + city: 'اصفهان', + state: 'بررسی شده', + price: '45', + updated_at: '2024/05/02', + company: 'ایرانول', + area: 'منطقه 21', + }, + { + name: { + firstName: 'محمد', + lastName: 'جلالی', + }, + address: 'فلان جا', + city: 'رشت', + state: 'درحال بررسی', + price: '8', + updated_at: '2024/05/02', + company: 'فیلیمو', + area: 'منطقه 8', + }, +]; const DataTable_Main = (props) => { - let table; + const {userId, pageName, tableName, columns, initialStateProps} = props - if (isTableInstanceProp(props)) { - table = props.table; - } else { - // eslint-disable-next-line react-hooks/rules-of-hooks - table = useMaterialReactTable(props); + const flatColumns = flattenArrayOfObjects(columns, 'columns') + const {settingStore, hideAction, sortAction} = useTableSetting(); + + const onColumnVisibilityChange = (event) => { + const settingValue = event(); + hideAction(userId, pageName, tableName, settingValue, flatColumns); + }; + const onSortingChange = (event) => { + const settingValue = event(settingStore?.[userId]?.[pageName]?.[tableName]?.['sorts'] || []); + sortAction(userId, pageName, tableName, settingValue, flatColumns); } - return ; + const table = useMaterialReactTable({ + localization: FA_DATATABLE_LOCALIZATION, + columns, + data: data, + // manualSorting: true, + renderTopToolbarCustomActions: ({table}) => (<> + + ), + initialState: { + density: 'compact', + columnVisibility: settingStore?.[userId]?.[pageName]?.[tableName]?.['hides'], + sorting: settingStore?.[userId]?.[pageName]?.[tableName]?.['sorts'] || [], + ...initialStateProps + }, + state: { + columnVisibility: settingStore?.[userId]?.[pageName]?.[tableName]?.['hides'], + sorting: settingStore?.[userId]?.[pageName]?.[tableName]?.['sorts'] || [] + }, + muiTableHeadProps: { + sx: { + borderTop: "1px solid #e1e1e1", + borderBottom: "2px solid #e1e1e1", + } + }, + muiTableHeadCellProps: { + sx: { + color: "primary.main", + borderLeft: "1px solid #e1e1e1", + "&:first-of-type": { + borderLeft: "unset" + } + }, + }, + muiTableBodyCellProps: { + sx: { + borderLeft: "1px solid #e1e1e1", + "&:first-of-type": { + borderLeft: "unset" + } + }, + }, + manualFiltering: true, + manualPagination: true, + manualSorting: true, + onColumnVisibilityChange: onColumnVisibilityChange, + onSortingChange: onSortingChange, + ...props + }) + + return ; }; export default DataTable_Main; + + + diff --git a/src/core/components/DataTable/filter/FilterBody.jsx b/src/core/components/DataTable/filter/FilterBody.jsx index dbfd41b..a214186 100644 --- a/src/core/components/DataTable/filter/FilterBody.jsx +++ b/src/core/components/DataTable/filter/FilterBody.jsx @@ -22,17 +22,13 @@ const ScrollBox = styled(Box)({ borderRadius: '5px', }, '::-webkit-scrollbar-thumb': { - background: '#16534a', + background: '#155175', borderRadius: '0px', } }); -function FilterBody({columns, drawerState, setDrawerState}) { - const [userId, setUserId] = useState(0); - const [pageName, setPageName] = useState('testPage'); - const [tableName, setTableName] = useState('testTable'); +function FilterBody({columns, drawerState, setDrawerState, userId, pageName, tableName}) { const {settingStore, filterAction} = useTableSetting(); - const [initialValues, setInitialValues] = useState({}); useEffect(() => { @@ -91,11 +87,14 @@ function FilterBody({columns, drawerState, setDrawerState}) { ); const handleSubmit = (values, {setSubmitting}) => { + toast.dismiss({containerId: "filtering"}); + setDrawerState(false); toast(, { - draggable: true, containerId: "filtering", - autoClose: false, + className: "filter-toast", position: "bottom-left", + draggable: true, + autoClose: false, }); setSubmitting(false); }; @@ -161,8 +160,8 @@ function FilterBody({columns, drawerState, setDrawerState}) { disabled={isSubmitting || !isValid || !dirty} sx={{ boxShadow: "rgba(0, 0, 0, 0.23) 0px 6px 6px, rgba(0, 0, 0, 0.19) 10px 0px 20px", - backgroundColor: "#16534a", ':hover': { - backgroundColor: "#16534a", + backgroundColor: "#155175", ':hover': { + backgroundColor: "#155175", }, width: "50%" }}> اعمال فیلتر diff --git a/src/core/components/DataTable/filter/FilterHeader.jsx b/src/core/components/DataTable/filter/FilterHeader.jsx index 015801d..2acd0b7 100644 --- a/src/core/components/DataTable/filter/FilterHeader.jsx +++ b/src/core/components/DataTable/filter/FilterHeader.jsx @@ -13,7 +13,7 @@ function FilterHeader({setDrawerState}) { justifyContent: "space-between", px: 2, py: 1, - backgroundColor: "#16534a", + backgroundColor: "#155175", boxShadow: "rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px", maxWidth: "450px" }} diff --git a/src/core/components/DataTable/filter/fieldsType/CustomDate/CustomDatePicker.jsx b/src/core/components/DataTable/filter/fieldsType/CustomDate/CustomDatePicker.jsx index 32c41a0..e92a426 100644 --- a/src/core/components/DataTable/filter/fieldsType/CustomDate/CustomDatePicker.jsx +++ b/src/core/components/DataTable/filter/fieldsType/CustomDate/CustomDatePicker.jsx @@ -10,7 +10,7 @@ function CustomDatePicker({column, filterParameters, defaultFilterTranslation, s setFieldValue={setFieldValue} placeholder={column.header} helperText={ - + نوع فیلتر: {defaultFilterTranslation} (تاریخ) } diff --git a/src/core/components/DataTable/filter/fieldsType/CustomDate/CustomDatePickerRange.jsx b/src/core/components/DataTable/filter/fieldsType/CustomDate/CustomDatePickerRange.jsx index 9438b03..b870061 100644 --- a/src/core/components/DataTable/filter/fieldsType/CustomDate/CustomDatePickerRange.jsx +++ b/src/core/components/DataTable/filter/fieldsType/CustomDate/CustomDatePickerRange.jsx @@ -14,7 +14,7 @@ function CustomDatePickerRange({column, filterParameters, defaultFilterTranslati maxDate={filterParameters.value[1]} placeholder={`از تاریخ`} helperText={ - + نوع فیلتر: {defaultFilterTranslation} (تاریخ) } diff --git a/src/core/components/DataTable/filter/fieldsType/CustomSelect.jsx b/src/core/components/DataTable/filter/fieldsType/CustomSelect.jsx index 2208d83..6fa20e4 100644 --- a/src/core/components/DataTable/filter/fieldsType/CustomSelect.jsx +++ b/src/core/components/DataTable/filter/fieldsType/CustomSelect.jsx @@ -28,7 +28,7 @@ function CustomSelect({column, filterParameters, defaultFilterTranslation, setFi ))} - + نوع فیلتر: {defaultFilterTranslation} diff --git a/src/core/components/DataTable/filter/fieldsType/CustomSelectMultiple.jsx b/src/core/components/DataTable/filter/fieldsType/CustomSelectMultiple.jsx index 502eefd..ae027fe 100644 --- a/src/core/components/DataTable/filter/fieldsType/CustomSelectMultiple.jsx +++ b/src/core/components/DataTable/filter/fieldsType/CustomSelectMultiple.jsx @@ -51,7 +51,7 @@ function CustomSelectMultiple({column, filterParameters, defaultFilterTranslatio ))} - + نوع فیلتر: {defaultFilterTranslation} diff --git a/src/core/components/DataTable/filter/fieldsType/CustomTextField.jsx b/src/core/components/DataTable/filter/fieldsType/CustomTextField.jsx index c5c35d8..91f9226 100644 --- a/src/core/components/DataTable/filter/fieldsType/CustomTextField.jsx +++ b/src/core/components/DataTable/filter/fieldsType/CustomTextField.jsx @@ -18,7 +18,7 @@ function CustomTextField({ onChange={handleChange} onBlur={handleBlur} fullWidth - helperText={ + helperText={ نوع فیلتر: {defaultFilterTranslation} } variant="outlined" diff --git a/src/core/components/DataTable/filter/fieldsType/CustomTextFieldRange.jsx b/src/core/components/DataTable/filter/fieldsType/CustomTextFieldRange.jsx index 9d4da31..35c9358 100644 --- a/src/core/components/DataTable/filter/fieldsType/CustomTextFieldRange.jsx +++ b/src/core/components/DataTable/filter/fieldsType/CustomTextFieldRange.jsx @@ -22,7 +22,7 @@ function CustomTextFieldRange({ value={filterParameters.value[0]} fullWidth error={touched?.[`${column.id}`]?.value && Boolean(errors?.[`${column.id}`]?.value)} - helperText={نوع + helperText={نوع فیلتر: {defaultFilterTranslation}} variant="outlined" size="normal" diff --git a/src/core/components/DataTable/filter/index.jsx b/src/core/components/DataTable/filter/index.jsx index b8872bf..faa01c9 100644 --- a/src/core/components/DataTable/filter/index.jsx +++ b/src/core/components/DataTable/filter/index.jsx @@ -4,13 +4,14 @@ import {useState} from "react"; import FilterButton from "@/core/components/DataTable/filter/FilterButton"; import FilterBody from "@/core/components/DataTable/filter/FilterBody"; -function FilterColumn({columns}) { +function FilterColumn({columns, userid, pagename, tablename}) { const [open, setOpen] = useState(false); return ( <> - + ); } diff --git a/src/core/components/DataTable/index.js b/src/core/components/DataTable/index.js index aba1d1c..df0e109 100644 --- a/src/core/components/DataTable/index.js +++ b/src/core/components/DataTable/index.js @@ -1,142 +1,9 @@ -import {useMaterialReactTable} from "material-react-table"; import DataTable_Main from "./Main"; -import {FA_DATATABLE_LOCALIZATION} from "./localization/fa/datatable"; -import useTableSetting from "@/lib/hooks/useTableSetting"; -import {flattenArrayOfObjects} from "@/core/utils/flattenArrayOfObjects"; -import Toolbar from "@/components/home/Toolbar"; - -const data = [ - { - name: { - firstName: 'امین', - lastName: 'قاسمپور', - }, - address: 'فلان جا', - city: 'تهران', - state: 'بررسی شده', - price: '20', - updated_at: '2024/05/02', - company: 'همراه اول', - area: 'منطقه 5', - }, - { - name: { - firstName: 'امیر حسین', - lastName: 'محمودی', - }, - address: 'فلان جا', - city: 'تهران', - state: 'تکمیل شده', - price: '27', - updated_at: '2024/05/02', - company: 'وایتل', - area: 'منطقه 27', - }, - { - name: { - firstName: 'یاسمن', - lastName: 'علی اکبری', - }, - address: 'فلان جا', - city: 'شیراز', - state: 'بررسی شده', - price: '32', - updated_at: '2024/05/02', - company: 'ایرانسل', - area: 'منطقه 23', - }, - { - name: { - firstName: 'حمیدرضا', - lastName: 'رنجبرپور', - }, - address: 'فلان جا', - city: 'اصفهان', - state: 'بررسی شده', - price: '45', - updated_at: '2024/05/02', - company: 'ایرانول', - area: 'منطقه 21', - }, - { - name: { - firstName: 'محمد', - lastName: 'جلالی', - }, - address: 'فلان جا', - city: 'رشت', - state: 'درحال بررسی', - price: '8', - updated_at: '2024/05/02', - company: 'فیلیمو', - area: 'منطقه 8', - }, -]; const DataTable = (props) => { - const {userId, pageName, tableName, columns, initialStateProps} = props - const {settingStore, hideAction, sortAction} = useTableSetting(); - const flatColumns = flattenArrayOfObjects(columns, 'columns') - - const onColumnVisibilityChange = (event) => { - const settingValue = event(); - hideAction(userId, pageName, tableName, settingValue, flatColumns); - }; - const onSortingChange = (event) => { - const settingValue = event(settingStore?.[userId]?.[pageName]?.[tableName]?.['sorts'] || []); - sortAction(userId, pageName, tableName, settingValue, flatColumns); - } - - - const table = useMaterialReactTable({ - localization: FA_DATATABLE_LOCALIZATION, - columns, - data: data, - // manualSorting: true, - renderTopToolbarCustomActions: ({table}) => (<> - - ), - initialState: { - density: 'compact', - columnVisibility: settingStore?.[userId]?.[pageName]?.[tableName]?.['hides'], - sorting: settingStore?.[userId]?.[pageName]?.[tableName]?.['sorts'] || [], - ...initialStateProps - }, - state: { - columnVisibility: settingStore?.[userId]?.[pageName]?.[tableName]?.['hides'], - sorting: settingStore?.[userId]?.[pageName]?.[tableName]?.['sorts'] || [] - }, - muiTableHeadProps: { - sx: { - borderTop: "1px solid #e1e1e1", - borderBottom: "2px solid #e1e1e1", - } - }, - muiTableHeadCellProps: { - sx: { - color: "primary.main", - borderLeft: "1px solid #e1e1e1", - "&:first-of-type": { - borderLeft: "unset" - } - }, - }, - muiTableBodyCellProps: { - sx: { - borderLeft: "1px solid #e1e1e1", - "&:first-of-type": { - borderLeft: "unset" - } - }, - }, - onColumnVisibilityChange: onColumnVisibilityChange, - onSortingChange: onSortingChange, - ...props - }) - - return ; + return ( + + ); }; -export default DataTable; +export default DataTable; \ No newline at end of file diff --git a/src/core/components/DataTable/table/Paper.js b/src/core/components/DataTable/table/Paper.js index ede47c1..7380cf0 100644 --- a/src/core/components/DataTable/table/Paper.js +++ b/src/core/components/DataTable/table/Paper.js @@ -65,7 +65,9 @@ const DataTable_Paper = ({table, ...rest}) => { > {enableTopToolbar && (parseFromValuesOrFunc(renderTopToolbar, {table}) ?? ( - + ))} {enableBottomToolbar && diff --git a/src/core/components/DataTable/toolbar/TopToolbar.js b/src/core/components/DataTable/toolbar/TopToolbar.js index 53c65da..1adf4d3 100644 --- a/src/core/components/DataTable/toolbar/TopToolbar.js +++ b/src/core/components/DataTable/toolbar/TopToolbar.js @@ -6,7 +6,7 @@ import DataTable_ToolbarInternalButtons from "./ToolbarInternalButtons"; import FilterColumn from "@/core/components/DataTable/filter"; import RefactorTable from "@/core/components/DataTable/refactor/RefactorTable"; -const DataTable_TopToolbar = ({table, columns}) => { +const DataTable_TopToolbar = ({table, columns, userid, pagename, tablename}) => { const { getState, options: { @@ -73,7 +73,7 @@ const DataTable_TopToolbar = ({table, columns}) => { }} > - + )} diff --git a/src/core/components/NotificationDesign/AskForKeep.jsx b/src/core/components/NotificationDesign/AskForKeep.jsx index 1d688a9..7a68d2f 100644 --- a/src/core/components/NotificationDesign/AskForKeep.jsx +++ b/src/core/components/NotificationDesign/AskForKeep.jsx @@ -1,6 +1,6 @@ 'use client' -import BeenhereIcon from '@mui/icons-material/Beenhere'; +import SaveIcon from '@mui/icons-material/Save'; import {Box, Button, Typography} from "@mui/material"; import DownloadIcon from '@mui/icons-material/Download'; import {toast} from "react-toastify"; @@ -14,10 +14,10 @@ function AskForKeep({onSaveFilter}) { return ( - + ذخیره سازی اطلاعات - + @@ -34,8 +34,8 @@ function AskForKeep({onSaveFilter}) {