From 572d995f15ef5be6190f376a015712fbaf654e6f Mon Sep 17 00:00:00 2001
From: AmirHossein Mahmoodi <amir.mahmoodi74@gmail.com>
Date: Wed, 22 Jan 2025 09:55:46 +0330
Subject: [PATCH] fixed performance

---
 .../roadItems/operator/OperatorList.jsx        |  9 +++++----
 .../roadItems/supervisor/SupervisorList.jsx    | 17 +++++++++--------
 .../components/DataTable/filter/FilterBody.jsx |  2 +-
 .../DataTable/filter/FilterHeader.jsx          |  2 +-
 .../filter/fieldsType/CustomSelect.jsx         | 17 +++++------------
 .../fieldsType/CustomSelectByDependency.jsx    |  5 +++--
 .../filter/fieldsType/CustomSelectMultiple.jsx |  1 +
 .../filter/fieldsType/CustomTextField.jsx      | 13 +++++++------
 .../filter/fieldsType/CustomTextFieldRange.jsx |  4 ++--
 src/core/components/DataTable/filter/index.jsx | 18 ++++++++----------
 10 files changed, 42 insertions(+), 46 deletions(-)

diff --git a/src/components/dashboard/roadItems/operator/OperatorList.jsx b/src/components/dashboard/roadItems/operator/OperatorList.jsx
index b6cf401..2cb64e1 100644
--- a/src/components/dashboard/roadItems/operator/OperatorList.jsx
+++ b/src/components/dashboard/roadItems/operator/OperatorList.jsx
@@ -17,6 +17,7 @@ import MachinesCodeDialog from "./RowActions/MachinesCodeForm";
 
 const OperatorList = () => {
     const statusOptions = [
+        { value: "", label: "همه وضعیت ها" },
         { value: 0, label: "درحال بررسی" },
         { value: 1, label: "تایید" },
         { value: 2, label: "عدم تایید" },
@@ -54,7 +55,7 @@ const OperatorList = () => {
                             return [{ value: "error", label: "خطا در بارگذاری" }];
                         }
                         return [
-                            { value: "", label: props.column.header },
+                            { value: "", label: "همه آیتم ها" },
                             ...itemsList.map((item) => ({
                                 value: item.id,
                                 label: item.name,
@@ -99,7 +100,7 @@ const OperatorList = () => {
                             return [{ value: "error", label: "خطا در بارگذاری" }];
                         }
                         return [
-                            { value: "", label: props.column.header },
+                            { value: "", label: "همه اقدام ها" },
                             ...subItemsList.map((item) => ({
                                 value: item.sub_item,
                                 label: item.name,
@@ -119,8 +120,8 @@ const OperatorList = () => {
                                 props.dependencyFieldValue.value === ""
                                     ? "empty"
                                     : loadingSubItemsList
-                                      ? "loading"
-                                      : props.filterParameters.value
+                                        ? "loading"
+                                        : props.filterParameters.value
                             }
                             columnSelectOption={getColumnSelectOptions}
                         />
diff --git a/src/components/dashboard/roadItems/supervisor/SupervisorList.jsx b/src/components/dashboard/roadItems/supervisor/SupervisorList.jsx
index 321f9d1..10c4d72 100644
--- a/src/components/dashboard/roadItems/supervisor/SupervisorList.jsx
+++ b/src/components/dashboard/roadItems/supervisor/SupervisorList.jsx
@@ -19,6 +19,7 @@ import { useAuth } from "@/lib/contexts/auth";
 
 const SupervisorList = () => {
     const statusOptions = [
+        { value: "", label: "همه وضعیت ها" },
         { value: 0, label: "درحال بررسی" },
         { value: 1, label: "تایید" },
         { value: 2, label: "عدم تایید" },
@@ -46,7 +47,7 @@ const SupervisorList = () => {
                         return [{ value: "error", label: "خطا در بارگذاری" }];
                     }
                     return [
-                        { value: "", label: props.column.header },
+                        { value: "", label: "کل کشور" },
                         ...provinces.map((province) => ({
                             value: province.id,
                             label: province.name_fa,
@@ -106,7 +107,7 @@ const SupervisorList = () => {
                             return [{ value: "error", label: "خطا در بارگذاری" }];
                         }
                         return [
-                            { value: "", label: props.column.header },
+                            { value: "", label: "کل ادارات" },
                             ...edaratList.map((edare) => ({
                                 value: edare.id,
                                 label: edare.name_fa,
@@ -126,8 +127,8 @@ const SupervisorList = () => {
                                 props.dependencyFieldValue?.value === ""
                                     ? "empty"
                                     : loadingEdaratList
-                                      ? "loading"
-                                      : props.filterParameters.value
+                                        ? "loading"
+                                        : props.filterParameters.value
                             }
                             columnSelectOption={getColumnSelectOptions}
                         />
@@ -155,7 +156,7 @@ const SupervisorList = () => {
                             return [{ value: "error", label: "خطا در بارگذاری" }];
                         }
                         return [
-                            { value: "", label: props.column.header },
+                            { value: "", label: "همه آیتم ها" },
                             ...itemsList.map((item) => ({
                                 value: item.id,
                                 label: item.name,
@@ -200,7 +201,7 @@ const SupervisorList = () => {
                             return [{ value: "error", label: "خطا در بارگذاری" }];
                         }
                         return [
-                            { value: "", label: props.column.header },
+                            { value: "", label: "همه اقدام ها" },
                             ...subItemsList.map((item) => ({
                                 value: item.sub_item,
                                 label: item.name,
@@ -220,8 +221,8 @@ const SupervisorList = () => {
                                 props.dependencyFieldValue.value === ""
                                     ? "empty"
                                     : loadingSubItemsList
-                                      ? "loading"
-                                      : props.filterParameters.value
+                                        ? "loading"
+                                        : props.filterParameters.value
                             }
                             columnSelectOption={getColumnSelectOptions}
                         />
diff --git a/src/core/components/DataTable/filter/FilterBody.jsx b/src/core/components/DataTable/filter/FilterBody.jsx
index 32d3e3f..3b451ad 100644
--- a/src/core/components/DataTable/filter/FilterBody.jsx
+++ b/src/core/components/DataTable/filter/FilterBody.jsx
@@ -93,7 +93,7 @@ function FilterBody({ columns, drawerState, setDrawerState }) {
             {Object.keys(filterData).length > 0 && (
                 <ScrollBox>
                     <form onSubmit={handleSubmit(onSubmit)}>
-                        <Box sx={{ px: 1, py: 2 }}>
+                        <Box sx={{ px: 1, py: 3 }}>
                             {columns.map((column) =>
                                 column.enableColumnFilter ? (
                                     column.dependencyId ? (
diff --git a/src/core/components/DataTable/filter/FilterHeader.jsx b/src/core/components/DataTable/filter/FilterHeader.jsx
index 50d00d8..c7b01b5 100644
--- a/src/core/components/DataTable/filter/FilterHeader.jsx
+++ b/src/core/components/DataTable/filter/FilterHeader.jsx
@@ -1,8 +1,8 @@
 "use client";
 
-import { Box, IconButton, Typography } from "@mui/material";
 import CancelIcon from "@mui/icons-material/Cancel";
 import FilterAltIcon from "@mui/icons-material/FilterAlt";
+import { Box, IconButton, Typography } from "@mui/material";
 
 function FilterHeader({ setDrawerState }) {
     return (
diff --git a/src/core/components/DataTable/filter/fieldsType/CustomSelect.jsx b/src/core/components/DataTable/filter/fieldsType/CustomSelect.jsx
index 5fefa2f..135a8b6 100644
--- a/src/core/components/DataTable/filter/fieldsType/CustomSelect.jsx
+++ b/src/core/components/DataTable/filter/fieldsType/CustomSelect.jsx
@@ -1,11 +1,11 @@
 "use client";
 
-import { FormControl, FormHelperText, InputLabel, MenuItem, OutlinedInput, Select, Typography } from "@mui/material";
-function CustomSelect({ column, filterParameters, defaultFilterTranslation, handleChange }) {
+import { FormControl, InputLabel, MenuItem, OutlinedInput, Select } from "@mui/material";
+function CustomSelect({ column, filterParameters, handleChange }) {
 
     return (
         <FormControl fullWidth sx={{ marginY: 1 }} size="small">
-            <InputLabel id={`label${column.id}`}>{column.header}</InputLabel>
+            <InputLabel id={`label${column.id}`} shrink>{column.header}</InputLabel>
             <Select
                 labelId={`label${column.id}`}
                 id={column.id}
@@ -14,19 +14,12 @@ function CustomSelect({ column, filterParameters, defaultFilterTranslation, hand
                 input={<OutlinedInput label={column.header} />}
                 size="small"
                 onChange={(e) => handleChange({ ...filterParameters, value: e.target.value })}
+                displayEmpty
             >
-                <MenuItem value="">{column.header}</MenuItem>
                 {column.columnSelectOption().map((option) => (
-                    <MenuItem key={option.value} value={option.value}>
-                        {option.label}
-                    </MenuItem>
+                    <MenuItem key={option.value} value={option.value}>{option.label}</MenuItem>
                 ))}
             </Select>
-            {/* <FormHelperText>
-                <Typography variant="caption" sx={{ color: "#155175", fontWeight: 'bold' }}>
-                    نوع فیلتر: {defaultFilterTranslation}
-                </Typography>
-            </FormHelperText> */}
         </FormControl>
     );
 }
diff --git a/src/core/components/DataTable/filter/fieldsType/CustomSelectByDependency.jsx b/src/core/components/DataTable/filter/fieldsType/CustomSelectByDependency.jsx
index b1ee04d..201f908 100644
--- a/src/core/components/DataTable/filter/fieldsType/CustomSelectByDependency.jsx
+++ b/src/core/components/DataTable/filter/fieldsType/CustomSelectByDependency.jsx
@@ -12,8 +12,8 @@ function CustomSelectByDependency({
     columnSelectOption,
 }) {
     return (
-        <FormControl fullWidth sx={{ marginY: 1 }} size="small">
-            <InputLabel id={`label${column.id}`}>{column.header}</InputLabel>
+        <FormControl fullWidth sx={{ my: 1 }} size="small">
+            <InputLabel id={`label${column.id}`} shrink>{column.header}</InputLabel>
             <Select
                 labelId={`label${column.id}`}
                 id={column.id}
@@ -22,6 +22,7 @@ function CustomSelectByDependency({
                 size="small"
                 input={<OutlinedInput label={column.header} />}
                 onChange={(e) => handleChange({ ...filterParameters, value: e.target.value })}
+                displayEmpty
             >
                 {columnSelectOption.map((option) => (
                     <MenuItem key={option.value} value={option.value}>
diff --git a/src/core/components/DataTable/filter/fieldsType/CustomSelectMultiple.jsx b/src/core/components/DataTable/filter/fieldsType/CustomSelectMultiple.jsx
index 4d28321..8ee2695 100644
--- a/src/core/components/DataTable/filter/fieldsType/CustomSelectMultiple.jsx
+++ b/src/core/components/DataTable/filter/fieldsType/CustomSelectMultiple.jsx
@@ -40,6 +40,7 @@ function CustomSelectMultiple({ column, filterParameters, defaultFilterTranslati
                     </Box>
                 )}
                 input={<OutlinedInput label={column.header} />}
+                InputLabelProps={{ shrink: true }}
             >
                 {columnSelectOption.map((option) => (
                     <MenuItem key={option.value} value={option.value}>
diff --git a/src/core/components/DataTable/filter/fieldsType/CustomTextField.jsx b/src/core/components/DataTable/filter/fieldsType/CustomTextField.jsx
index cfaab03..c69105d 100644
--- a/src/core/components/DataTable/filter/fieldsType/CustomTextField.jsx
+++ b/src/core/components/DataTable/filter/fieldsType/CustomTextField.jsx
@@ -18,14 +18,14 @@ function CustomTextField({
             onChange={(e) => handleChange({ ...filterParameters, value: e.target.value })}
             onBlur={handleBlur}
             fullWidth
-            helperText={
-                <Typography variant="caption" sx={{ color: "#155175", fontWeight: 'bold' }}>
-                    نوع فیلتر: {defaultFilterTranslation}
-                </Typography>
-            }
+            // helperText={
+            //     <Typography variant="caption" sx={{ color: "#155175", fontWeight: 'bold' }}>
+            //         نوع فیلتر: {defaultFilterTranslation}
+            //     </Typography>
+            // }
             variant="outlined"
             size="small"
-            sx={{ marginY: 1 }}
+            sx={{ my: 1 }}
             InputProps={{
                 endAdornment: (
                     <InputAdornment position="end" sx={{ cursor: "pointer" }} onClick={handleOpenFilterBox}>
@@ -33,6 +33,7 @@ function CustomTextField({
                     </InputAdornment>
                 ),
             }}
+            InputLabelProps={{ shrink: true }}
         />
     );
 }
diff --git a/src/core/components/DataTable/filter/fieldsType/CustomTextFieldRange.jsx b/src/core/components/DataTable/filter/fieldsType/CustomTextFieldRange.jsx
index 114744c..909a609 100644
--- a/src/core/components/DataTable/filter/fieldsType/CustomTextFieldRange.jsx
+++ b/src/core/components/DataTable/filter/fieldsType/CustomTextFieldRange.jsx
@@ -30,7 +30,7 @@ function CustomTextFieldRange({
                 }
                 variant="outlined"
                 size="small"
-                sx={{ marginY: 1, marginRight: 1 }}
+                sx={{ my: 1, marginRight: 1 }}
             />
             <TextField
                 id={`${column.id}.value[1]`}
@@ -46,7 +46,7 @@ function CustomTextFieldRange({
                 fullWidth
                 variant="outlined"
                 size="small"
-                sx={{ marginY: 1 }}
+                sx={{ my: 1 }}
                 InputProps={{
                     endAdornment: (
                         <InputAdornment position="end" sx={{ cursor: "pointer" }} onClick={handleOpenFilterBox}>
diff --git a/src/core/components/DataTable/filter/index.jsx b/src/core/components/DataTable/filter/index.jsx
index 8399857..32a09a8 100644
--- a/src/core/components/DataTable/filter/index.jsx
+++ b/src/core/components/DataTable/filter/index.jsx
@@ -9,16 +9,14 @@ function FilterColumn({ columns, user_id, page_name, table_name }) {
     return (
         <>
             <FilterButton drawerState={open} setDrawerState={setOpen} />
-            {open && (
-                <FilterBody
-                    columns={columns}
-                    drawerState={open}
-                    setDrawerState={setOpen}
-                    user_id={user_id}
-                    page_name={page_name}
-                    table_name={table_name}
-                />
-            )}
+            <FilterBody
+                columns={columns}
+                drawerState={open}
+                setDrawerState={setOpen}
+                user_id={user_id}
+                page_name={page_name}
+                table_name={table_name}
+            />
         </>
     );
 }