update

2024-04-23 10:19:40 +03:30
parent 40f56d3cea
commit 5c5aa33741
10 changed files with 370 additions and 25 deletions
--- a/src/app/page.js
+++ b/src/app/page.js
@@ -1,13 +1,148 @@
-import DataTableMain from "@/components/DataTableMain";
+'use client'
+import DataTable from "@/core/components/DataTable";
+import { useMemo } from "react";

-function page() {
+function Page() {
+    const columns = useMemo(
+        () => [
+            {
+                accessorKey: 'fullname',
+                header: 'نام کامل',
+                id: "fullname",
+                columns: [
+                    {
+                        accessorKey: 'name.firstName',
+                        header: 'نام',
+                        id: "firstName",
+                        enableColumnFilter: true,
+                        datatype: "text",
+                        filterFn: "contains",
+                        enableClickToCopy: true,
+                        columnFilterModeOptions: [
+                            "equals",
+                            "notEquals",
+                            "contains"
+                        ],
+                    },
+                    {
+                        accessorKey: 'name.lastName',
+                        header: 'نام خانوادگی',
+                        id: "lastName",
+                        enableColumnFilter: true,
+                        datatype: "text",
+                        filterFn: "contains",
+                        columnFilterModeOptions: [
+                            "equals",
+                            "notEquals",
+                            "contains"
+                        ],
+                    },
+                ],
+                enableColumnFilter: true,
+                datatype: "text",
+                filterFn: "contains",
+                columnFilterModeOptions: [
+                    "equals",
+                    "notEquals",
+                    "contains"
+                ],
+            },
+            {
+                accessorKey: 'address',
+                header: 'آدرس',
+                id: "address",
+                enableColumnFilter: true,
+                datatype: "text",
+                filterFn: "contains",
+                columnFilterModeOptions: [
+                    "equals",
+                    "notEquals",
+                    "contains"
+                ],
+            },
+            {
+                accessorKey: 'city',
+                header: 'شهر',
+                id: "city",
+                enableColumnFilter: true,
+                datatype: "text",
+                filterFn: "contains",
+                columnFilterModeOptions: [
+                    "equals",
+                    "notEquals",
+                    "contains",
+                    "lessThan",
+                    "greaterThan",
+                    "between",
+                ],
+
+            },
+            {
+                accessorKey: 'state',
+                header: 'وضعیت',
+                id: "state",
+                text: 'نام',
+                enableColumnFilter: true,
+                datatype: "text",
+                filterFn: "contains",
+                columnFilterModeOptions: [
+                    "equals",
+                    "notEquals",
+                    "contains"
+                ],
+            },
+            {
+                accessorKey: 'state',
+                header: 'محدوده',
+                id: "betweenNum",
+                text: 'محدوده',
+                enableColumnFilter: true,
+                datatype: "text",
+                filterFn: "betweenNum",
+                columnFilterModeOptions: [],
+            },
+            {
+                accessorKey: 'state',
+                header: 'تاریخ',
+                id: "betweenDate",
+                text: 'تاریخ',
+                enableColumnFilter: true,
+                datatype: "text",
+                filterFn: "betweenDate",
+                columnFilterModeOptions: [],
+            },
+            {
+                accessorKey: 'state',
+                header: 'شلکت',
+                id: "select2",
+                text: 'تاریخ',
+                type: 'select2',
+                enableColumnFilter: true,
+                datatype: "text",
+                filterFn: "equals",
+                columnFilterModeOptions: [],
+            },
+            {
+                accessorKey: 'state',
+                header: 'سلکت',
+                id: "select",
+                text: 'تنتنت',
+                type: 'select',
+                enableColumnFilter: true,
+                datatype: "text",
+                filterFn: "equals",
+                columnFilterModeOptions: [],
+            },
+        ],
+        [],
+    );

    return (
        <>
-            <DataTableMain />
+            <DataTable columns={columns} userId={0} pageName={'testPage'} tableName={'testTable'} />
        </>

    );
 }

-export default page;
+export default Page;
--- a/src/core/components/DataTable/Main.js
+++ b/src/core/components/DataTable/Main.js
@@ -0,0 +1,19 @@
+import { useMaterialReactTable } from "material-react-table";
+import DataTable_Paper from "./table/Paper";
+
+const isTableInstanceProp = (props) => props.table !== undefined;
+
+const DataTable_Main = (props) => {
+    let table;
+
+    if (isTableInstanceProp(props)) {
+        table = props.table;
+    } else {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        table = useMaterialReactTable(props);
+    }
+
+    return <DataTable_Paper table={table} />;
+};
+
+export default DataTable_Main;
--- a/src/core/components/DataTable/body/TableBodyCell.js
+++ b/src/core/components/DataTable/body/TableBodyCell.js
@@ -202,7 +202,6 @@ const DataTable_TableBodyCell = ({

    return (
        <TableCell
-            align={theme.direction === 'rtl' ? 'right' : 'left'}
            data-index={staticColumnIndex}
            data-pinned={!!isColumnPinned || undefined}
            {...tableCellProps}
--- a/src/core/components/DataTable/buttons/CopyButton.js
+++ b/src/core/components/DataTable/buttons/CopyButton.js
@@ -1,5 +1,6 @@
 import { getCommonTooltipProps, parseFromValuesOrFunc } from "@/core/utils/utils";
 import { Button, Tooltip } from "@mui/material";
+import { useState } from "react";

 const DataTable_CopyButton = ({
    cell,
--- a/src/core/components/DataTable/head/TableHeadCell.js
+++ b/src/core/components/DataTable/head/TableHeadCell.js
@@ -177,7 +177,6 @@ const DataTable_TableHeadCell = ({
                        opacity: 1,
                    },
                },
-                border: 1,
                flexDirection: layoutMode?.startsWith('grid') ? 'column' : undefined,
                fontWeight: 'bold',
                overflow: 'visible',
@@ -204,7 +203,7 @@ const DataTable_TableHeadCell = ({
                            ? '.75rem'
                            : '1.25rem',
                userSelect: enableMultiSort && column.getCanSort() ? 'none' : undefined,
-                verticalAlign: 'top',
+                verticalAlign: 'middle',
                ...getCommonMRTCellStyles({
                    column,
                    header,
--- a/src/core/components/DataTable/index.js
+++ b/src/core/components/DataTable/index.js
@@ -1,19 +1,119 @@
 import { useMaterialReactTable } from "material-react-table";
-import DataTable_Paper from "./table/Paper";
+import DataTable_Main from "./Main";
+import { FA_DATATABLE_LOCALIZATION } from "./localization/fa/datatable";
+import CustomToolbar from "@/components/CustomToolbar";
+import useTableSetting from "@/lib/hooks/useTableSetting";

-const isTableInstanceProp = (props) => props.table !== undefined;
+const data = [
+  {
+    name: {
+      firstName: 'John',
+      lastName: 'Doe',
+    },
+    address: '261 Erdman Ford',
+    city: 'East Daphne',
+    state: 'Kentucky',
+  },
+  {
+    name: {
+      firstName: 'Jane',
+      lastName: 'Doe',
+    },
+    address: '769 Dominic Grove',
+    city: 'Columbus',
+    state: 'Ohio',
+  },
+  {
+    name: {
+      firstName: 'Joe',
+      lastName: 'Doe',
+    },
+    address: '566 Brakus Inlet',
+    city: 'South Linda',
+    state: 'West Virginia',
+  },
+  {
+    name: {
+      firstName: 'Kevin',
+      lastName: 'Vandy',
+    },
+    address: '722 Emie Stream',
+    city: 'Lincoln',
+    state: 'Nebraska',
+  },
+  {
+    name: {
+      firstName: 'Joshua',
+      lastName: 'Rolluffs',
+    },
+    address: '32188 Larkin Turnpike',
+    city: 'Charleston',
+    state: 'South Carolina',
+  },
+];

 const DataTable = (props) => {
-  let table;
+  const { userId, pageName, tableName, columns, initialStateProps } = props
+  const { settingStore, hideAction, sortAction } = useTableSetting();

-  if (isTableInstanceProp(props)) {
-    table = props.table;
-  } else {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    table = useMaterialReactTable(props);
+  const onColumnVisibilityChange = (event) => {
+    const settingValue = event();
+    hideAction(userId, pageName, tableName, settingValue, columns);
+  };
+  const onSortingChange = (event) => {
+    const settingValue = event(settingStore?.[userId]?.[pageName]?.[tableName]?.['sorts'] || []);
+    sortAction(userId, pageName, tableName, settingValue, columns);
  }

-  return <DataTable_Paper table={table} />;
+  const table = useMaterialReactTable({
+    localization: FA_DATATABLE_LOCALIZATION,
+    columns,
+    data: data,
+    manualSorting: true,
+    renderTopToolbarCustomActions: ({ table }) => (<>
+      <CustomToolbar
+        columns={columns}
+      />
+    </>),
+    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 <DataTable_Main table={table} />;
 };

 export default DataTable;
--- a/src/core/components/DataTable/localization/fa/datatable.js
+++ b/src/core/components/DataTable/localization/fa/datatable.js
@@ -0,0 +1,92 @@
+export const FA_DATATABLE_LOCALIZATION = {
+    actions: "عملیات",
+    and: "و",
+    cancel: "لغو",
+    changeFilterMode: "تغییر حالت فیلتر",
+    changeSearchMode: "تغییر حالت جستجو",
+    clearFilter: "پاک کردن فیلتر",
+    clearSearch: "پاک کردن جستجو",
+    clearSort: "پاک کردن مرتب سازی",
+    clickToCopy: "کلیک برای کپی",
+    collapse: "جمع شدن",
+    collapseAll: "جمع شدن همه",
+    columnActions: "عملیات ستون",
+    copiedToClipboard: "کپی شد",
+    dropToGroupBy: "رها کردن برای گروه بندی بر اساس {column}",
+    edit: "ویرایش",
+    expand: "باز شدن",
+    expandAll: "باز شدن همه",
+    filterArrIncludes: "شامل",
+    filterArrIncludesAll: "شامل همه",
+    filterArrIncludesSome: "شامل",
+    filterBetween: "میان",
+    filterBetweenInclusive: "میان با احتساب هر دو",
+    filterByColumn: "فیلتر بر اساس {column}",
+    filterContains: "شامل",
+    filterEmpty: "خالی",
+    filterEndsWith: "به پایان می‌رسد با",
+    filterEquals: "برابر",
+    filterEqualsString: "برابر",
+    filterFuzzy: "نزدیک",
+    filterGreaterThan: "بزرگتر از",
+    filterGreaterThanOrEqualTo: "بزرگتر یا مساوی",
+    filterInNumberRange: "میان",
+    filterIncludesString: "شامل",
+    filterIncludesStringSensitive: "شامل",
+    filterLessThan: "کوچکتر از",
+    filterLessThanOrEqualTo: "کوچکتر یا مساوی",
+    filterMode: "حالت فیلتر: {filterType}",
+    filterNotEmpty: "غیر خالی",
+    filterNotEquals: "نا برابر",
+    filterStartsWith: "شروع می‌شود با",
+    filterWeakEquals: "برابر",
+    filteringByColumn: "فیلتر بر اساس {column} - {filterType} {filterValue}",
+    goToFirstPage: "رفتن به صفحه اول",
+    goToLastPage: "رفتن به صفحه آخر",
+    goToNextPage: "رفتن به صفحه بعدی",
+    goToPreviousPage: "رفتن به صفحه قبلی",
+    grab: "گرفتن",
+    groupByColumn: "گروه بندی بر اساس {column}",
+    groupedBy: "گروه بندی شده بر اساس",
+    hideAll: "پنهان کردن همه",
+    hideColumn: "پنهان کردن ستون {column}",
+    max: "حداکثر",
+    min: "حداقل",
+    move: "انتقال",
+    noRecordsToDisplay: "هیچ رکوردی برای نمایش وجود ندارد",
+    noResultsFound: "نتیجه‌ای یافت نشد",
+    of: "از",
+    or: "یا",
+    pinToLeft: "چسباندن به سمت چپ",
+    pinToRight: "چسباندن به سمت راست",
+    resetColumnSize: "بازنشانی اندازه ستون",
+    resetOrder: "بازنشانی ترتیب",
+    rowActions: "عملیات ردیف",
+    rowNumber: "#",
+    rowNumbers: "شماره ردیف",
+    rowsPerPage: "ردیف در هر صفحه",
+    save: "ذخیره",
+    search: "جستجو",
+    selectedCountOfRowCountRowsSelected:
+        "{selectedCount} از {rowCount} ردیف انتخاب شده",
+    select: "انتخاب",
+    showAll: "نمایش همه",
+    showAllColumns: "نمایش همه ستون‌ها",
+    showHideColumns: "نمایش/مخفی کردن ستون‌ها",
+    showHideFilters: "نمایش/مخفی کردن فیلترها",
+    showHideSearch: "نمایش/مخفی کردن جستجو",
+    sortByColumnAsc: "مرتب سازی بر اساس {column} صعودی",
+    sortByColumnDesc: "مرتب سازی بر اساس {column} نزولی",
+    sortedByColumnAsc: "مرتب شده بر اساس {column} صعودی",
+    sortedByColumnDesc: "مرتب شده بر اساس {column} نزولی",
+    thenBy: "، سپس بر اساس ",
+    toggleDensity: "تغییر تراکم",
+    toggleFullScreen: "تغییر حالت تمام صفحه",
+    toggleSelectAll: "انتخاب/عدم انتخاب همه",
+    toggleSelectRow: "انتخاب/عدم انتخاب ردیف",
+    toggleVisibility: "تغییر پیدا/پنهان",
+    ungroupByColumn: "لغو گروه بندی بر اساس {column}",
+    unpin: "رها کردن",
+    unpinAll: "رها کردن همه",
+    unsorted: "بدون مرتب سازی",
+};
--- a/src/core/components/DataTable/table/Table.js
+++ b/src/core/components/DataTable/table/Table.js
@@ -58,7 +58,6 @@ const DataTable_Table = ({
            {...tableProps}
            style={{ ...columnSizeVars, ...tableProps?.style }}
            sx={(theme) => ({
-                borderCollapse: 'separate',
                display: layoutMode?.startsWith('grid') ? 'grid' : undefined,
                position: 'relative',
                ...(parseFromValuesOrFunc(tableProps?.sx, theme)),
--- a/src/core/utils/utils.js
+++ b/src/core/utils/utils.js
@@ -25,8 +25,8 @@ export const getCommonTooltipProps = (
  placement,
 ) => ({
  disableInteractive: true,
-  enterDelay: 1000,
-  enterNextDelay: 1000,
+  enterDelay: 500,
+  enterNextDelay: 500,
  placement,
 });

--- a/src/lib/hooks/useTableSetting.jsx
+++ b/src/lib/hooks/useTableSetting.jsx
@@ -1,9 +1,10 @@
-import {useContext} from "react";
-import {TableSettingContext} from "../contexts/tableSetting";
+import { useContext } from "react";
+import { TableSettingContext } from "../contexts/tableSetting";

-const useUser = () => {
-    const {settingStore, hideAction, sortAction, filterAction} = useContext(TableSettingContext);
-    return {settingStore, hideAction, sortAction, filterAction};
+const useTableSetting = () => {
+  const { settingStore, hideAction, sortAction, filterAction } =
+    useContext(TableSettingContext);
+  return { settingStore, hideAction, sortAction, filterAction };
 };

-export default useUser;
+export default useTableSetting;