CFE-3 bringing all directories and finish test of DataTable index and start CreatForm test

public/locales/fa/app.json

@@ -118,5 +118,19 @@
     "upload_file_format": "فرمت قابل قبول : png,jpg,pdf",
     "delete": "پاک کردن",
     "uploadfile_error": "حجم فایل بیشتر از 2 مگابایت می باشد"
+  },
+  "ExpertMangement": {
+    "id": "کد یکتا",
+    "name": "نام",
+    "username": "نام کاربری",
+    "email": "پست الکترونیک",
+    "phone_number": "شماره همراه",
+    "national_id": "کد ملی",
+    "position": "سمت",
+    "province_name": "استان",
+    "city_name": "شهر",
+    "role_name": "نقش",
+    "updated_at": "آخرین بروزرسانی",
+    "create": "افزودن کارشناس"
   }
 }

src/components/dashboard/expert-management/DataTable/__tests__/index.test.js

@@ -2,21 +2,21 @@ import {render, screen} from "@testing-library/react";
 import MockAppWithProviders from "../../../../../../mocks/AppWithProvider";
 import ExpertManagementDataTable from "@/components/dashboard/expert-management/DataTable";
 
-describe("Expert Management Component From Expert Management", () => {
+describe("ExpertManagementDatatable Component From Expert Management", () => {
     describe("Rendering", () => {
         it("Table Headers Rendered", () => {
             render(<MockAppWithProviders><ExpertManagementDataTable/></MockAppWithProviders>);
-            const idHeader = screen.queryByText(/کد یکتا/i);
+            const idHeader = screen.queryByText("کد یکتا");
-            const nameHeader = screen.queryByText(/نام/i);
+            const nameHeader = screen.queryByText("نام");
-            const usernameHeader = screen.queryByText(/نام کاربری/i);
+            const usernameHeader = screen.queryByText("نام کاربری");
-            const emailHeader = screen.queryByText(/پست الکترونیک/i);
+            const emailHeader = screen.queryByText("پست الکترونیک");
-            const phone_numberHeader = screen.queryByText(/شماره همراه/i);
+            const phone_numberHeader = screen.queryByText("شماره همراه");
-            const national_idHeader = screen.queryByText(/کد ملی/i);
+            const national_idHeader = screen.queryByText("کد ملی");
-            const positionHeader = screen.queryByText(/سمت/i);
+            const positionHeader = screen.queryByText("سمت");
-            const province_nameHeader = screen.queryByText(/استان/i);
+            const province_nameHeader = screen.queryByText("استان");
-            const city_nameHeader = screen.queryByText(/شهر/i);
+            const city_nameHeader = screen.queryByText("شهر");
-            const role_nameHeader = screen.queryByText(/نقش/i);
+            const role_nameHeader = screen.queryByText("نقش");
-            const updated_atHeader = screen.queryByText(/آخرین بروزرسانی/i);
+            const updated_atHeader = screen.queryByText("آخرین بروزرسانی");
             expect(idHeader).toBeInTheDocument();
             expect(nameHeader).toBeInTheDocument();
             expect(usernameHeader).toBeInTheDocument();
@@ -30,10 +30,4 @@ describe("Expert Management Component From Expert Management", () => {
             expect(updated_atHeader).toBeInTheDocument();
         });
     });
-    describe("Behavioral", () => {
-
-    });
-    describe("Validation", () => {
-
-    });
 });

src/components/dashboard/expert-management/DataTable/index.jsx

@@ -1,6 +1,186 @@
+import DataTable from "@/core/components/DataTable";
+import MuiDatePicker from "@/core/components/MuiDatePicker";
+import {GET_EXPERT_MANAGEMENT_LIST} from "@/core/data/apiRoutes";
+import TableToolbar from "../TableToolbar";
+import TableRowActions from "../TableRowActions";
+import {Box, Typography} from "@mui/material";
+import {useTranslations} from "next-intl";
+import {useMemo} from "react";
+
 function ExpertManagementDataTable() {
+    const t = useTranslations();
+    const columns = useMemo(
+        () => [
+            {
+                accessorFn: (row) => row.id,
+                id: "id",
+                header: t("ExpertMangement.id"),
+                enableColumnFilter: true,
+                datatype: "numeric",
+                filterFn: "equals",
+                columnFilterModeOptions: [
+                    "equals",
+                    "notEquals",
+                    "contains",
+                    "lessThan",
+                    "greaterThan",
+                    "between",
+                ],
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+            {
+                accessorFn: (row) => row.name,
+                id: "name",
+                header: t("ExpertMangement.name"),
+                enableColumnFilter: true,
+                datatype: "text",
+                filterFn: "contains",
+                columnFilterModeOptions: ["contains", "equals", "notEquals"],
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+            {
+                accessorFn: (row) => row.username,
+                id: "username",
+                header: t("ExpertMangement.username"),
+                enableColumnFilter: true,
+                datatype: "text",
+                filterFn: "contains",
+                columnFilterModeOptions: ["contains", "equals", "notEquals"],
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+            {
+                accessorFn: (row) => row.email,
+                id: "email",
+                header: t("ExpertMangement.email"),
+                enableColumnFilter: true,
+                datatype: "text",
+                filterFn: "contains",
+                columnFilterModeOptions: ["contains", "equals", "notEquals"],
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+            {
+                accessorFn: (row) => row.phone_number,
+                id: "phone_number",
+                header: t("ExpertMangement.phone_number"),
+                enableColumnFilter: true,
+                datatype: "numeric",
+                filterFn: "equals",
+                columnFilterModeOptions: ["contains", "equals", "notEquals"],
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+            {
+                accessorFn: (row) => row.national_id,
+                id: "national_id",
+                header: t("ExpertMangement.national_id"),
+                enableColumnFilter: true,
+                datatype: "numeric",
+                filterFn: "equals",
+                columnFilterModeOptions: ["contains", "equals", "notEquals"],
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+            {
+                accessorFn: (row) => row.position,
+                id: "position",
+                header: t("ExpertMangement.position"),
+                enableColumnFilter: true,
+                datatype: "text",
+                filterFn: "contains",
+                columnFilterModeOptions: ["contains", "equals", "notEquals"],
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+            {
+                accessorFn: (row) => row.province_name,
+                id: "province_name",
+                header: t("ExpertMangement.province_name"),
+                enableColumnFilter: false,
+                datatype: "text",
+                filterFn: "contains",
+                columnFilterModeOptions: ["contains", "equals", "notEquals"],
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+            {
+                accessorFn: (row) => row.city_name,
+                id: "city_name",
+                header: t("ExpertMangement.city_name"),
+                enableColumnFilter: false,
+                datatype: "text",
+                filterFn: "contains",
+                columnFilterModeOptions: ["contains", "equals", "notEquals"],
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+            {
+                accessorFn: (row) => row.roles[0].name_fa,
+                id: "roles[0].name_fa",
+                header: t("ExpertMangement.role_name"),
+                enableColumnFilter: false,
+                datatype: "text",
+                filterFn: "contains",
+                columnFilterModeOptions: ["contains", "equals", "notEquals"],
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+            {
+                accessorFn: (row) =>
+                    moment(row.updated_at).locale("fa").format("HH:mm | yyyy/MM/DD"),
+                id: "updated_at",
+                header: t("ExpertMangement.updated_at"),
+                enableColumnFilter: true,
+                datatype: "date",
+                filterFn: "lessThan",
+                columnFilterModeOptions: ["lessThan", "greaterThan"],
+                Cell: ({renderedCellValue}) => {
+                    return <Typography variant="body2">{renderedCellValue}</Typography>;
+                },
+                Header: ({column}) => <>{column.columnDef.header}</>,
+                Filter: ({column}) => {
+                    return (
+                        <MuiDatePicker column={column}/>
+                    );
+                },
+            },
+        ],
+        []
+    );
     return (
-        <p>asdads</p>
+        <Box sx={{px: 3}}>
+            <DataTable
+                tableUrl={GET_EXPERT_MANAGEMENT_LIST}
+                columns={columns}
+                selectableRow={false}
+                CustomToolbar={TableToolbar}
+                enableCustomToolbar={true}
+                enableLastUpdate={true}
+                enablePinning={true}
+                enableDensityToggle={false}
+                initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large)
+                enableColumnFilters={true}
+                enableHiding={true}
+                enableFullScreenToggle={false}
+                enableGlobalFilter={false}
+                enableColumnResizing={false} // if you want true this you should change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
+                enableRowActions={true}
+                TableRowAction={TableRowActions}
+            />
+        </Box>
     );
 }
 

src/components/dashboard/expert-management/Form/ChangePassword/index.jsx

@@ -0,0 +1,7 @@
+const ChangePassword = () => {
+    return (
+        <></>
+    )
+}
+
+export default ChangePassword

src/components/dashboard/expert-management/Form/CreateForm/__tests__/index.test.js

@@ -0,0 +1,18 @@
+import {render, screen} from "@testing-library/react";
+import MockAppWithProviders from "../../../../../../mocks/AppWithProvider";
+import CreateForm from "../../CreateForm";
+
+describe("CreateForm Component From Expert Management", () => {
+    describe("Rendering", () => {
+        it("Create Button Rendered", () => {
+            render(<MockAppWithProviders><CreateForm/></MockAppWithProviders>);
+            const versionControler = screen.queryByTitle("ثبت کارشناس");
+            expect(versionControler).toBeInTheDocument();
+        });
+        it("Dialog Header Rendered", () => {
+            render(<MockAppWithProviders><CreateForm/></MockAppWithProviders>);
+            const versionControler = screen.queryByText("ثبت کارشناس");
+            expect(versionControler).toBeInTheDocument();
+        });
+    });
+});

src/components/dashboard/expert-management/Form/CreateForm/index.jsx

@@ -0,0 +1,30 @@
+const Create = () => {
+    return (
+        <>
+            <Stack direction={"row"} spacing={2}>
+                <Tooltip title={t("ExpertMangement.create")} arrow placement="right">
+                    <Button
+                        color="primary"
+                        variant="contained"
+                        size="small"
+                        sx={{textTransform: "unset", alignSelf: "center"}}
+                        startIcon={<DataSaverOnIcon/>}
+                        onClick={() => {
+                            setOpenCreateDialog(true)
+                        }}
+                    >
+                        {t("ExpertMangement.create")}
+                    </Button>
+                </Tooltip>
+            </Stack>
+            <Dialog fullWidth maxWidth={'lg'} open={openCreateDialog}
+                    TransitionProps={{unmountOnExit: true}}
+                    PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
+                <DialogTitle>{t("ExpertMangement.create")}</DialogTitle>
+                <CreateContent setOpenCreateDialog={setOpenCreateDialog} mutate={mutate} fetchUrl={fetchUrl}/>
+            </Dialog>
+        </>
+    )
+}
+
+export default Create

src/components/dashboard/expert-management/Form/DeleteForm/index.jsx

@@ -0,0 +1,7 @@
+const Delete = () => {
+    return (
+        <></>
+    )
+}
+
+export default Delete

src/components/dashboard/expert-management/Form/UpdateForm/index.jsx

@@ -0,0 +1,7 @@
+const Update = () => {
+    return (
+        <></>
+    )
+}
+
+export default Update

src/components/dashboard/expert-management/TableRowActions.jsx

@@ -0,0 +1,28 @@
+import {Box} from "@mui/material";
+import Update from "./Form/UpdateForm"
+import Delete from "./Form/DeleteForm";
+import ChangePassword from "./Form/ChangePassword";
+
+const TableRowActions = ({row, mutate, fetchUrl}) => {
+    return (
+        <Box sx={{display: "flex", flexWrap: "nowrap", gap: "8px"}}>
+            <Update
+                row={row}
+                mutate={mutate}
+                fetchUrl={fetchUrl}
+            />
+            <ChangePassword
+                rowId={row.getValue("id")}
+                mutate={mutate}
+                fetchUrl={fetchUrl}
+            />
+            <Delete
+                rowId={row.getValue("id")}
+                mutate={mutate}
+                fetchUrl={fetchUrl}
+            />
+        </Box>
+    );
+};
+
+export default TableRowActions;

src/components/dashboard/expert-management/TableToolbar.jsx

@@ -0,0 +1,14 @@
+import {useTranslations} from "next-intl";
+import Create from "./Form/CreateForm";
+import {Box} from "@mui/material";
+
+function TableToolbar({mutate, fetchUrl}) {
+    const t = useTranslations();
+    return (
+        <Box>
+            <Create mutate={mutate} fetchUrl={fetchUrl}/>
+        </Box>
+    );
+}
+
+export default TableToolbar;

src/core/components/DataTable.jsx

@@ -42,13 +42,11 @@ function DataTable(props) {
     const [updateTime, setupdateTime] = useState(
         moment().format("HH:mm | jYYYY/jM/jD")
     );
-
     const tableLocalization = useMemo(
         () =>
             languageList.find((item) => item.key == languageApp).tableLocalization,
         [languageApp, languageList]
     );
-
     const fetchUrl = useMemo(() => {
         const url = new URL(props.tableUrl);
         url.searchParams.set(
@@ -73,12 +71,10 @@ function DataTable(props) {
         url.searchParams.set("sorting", JSON.stringify(sorting ?? []));
         return url;
     }, [
-        props.tableUrl,
         columnFilters,
         columnFilterFns,
         pagination,
         sorting,
-        props.columns,
     ]);
 
     const {data, isValidating, mutate} = useSWR(fetchUrl, fetcher, {
@@ -91,6 +87,7 @@ function DataTable(props) {
         setupdateTime(moment().format("HH:mm | jYYYY/jM/jD"));
     }, [isValidating, languageApp]);
 
+
     return (
         <MaterialReactTable
             localization={tableLocalization}
@@ -134,8 +131,8 @@ function DataTable(props) {
             renderTopToolbarCustomActions={({table}) => (
                 <>
                     {props.enableCustomToolbar /* send condition */
-                        ? props.CustomToolbar /* send component */
+                        ? (<props.CustomToolbar fetchUrl={fetchUrl} mutate={mutate}/>) /* send component */
-                        : ""}
+                        : <span></span>}
                 </>
             )}
             renderBottomToolbarCustomActions={({table}) => (
@@ -159,7 +156,6 @@ function DataTable(props) {
                 </>
             )}
             state={{
-                isLoading: isValidating,
                 columnFilters,
                 columnFilterFns,
                 pagination,

src/core/data/apiRoutes.js

@@ -10,4 +10,8 @@ export const SET_USER_PASSWORD = BASE_URL + "/dashboard/profile/change_password"
 
 //user data
 export const GET_USER_ROUTE = BASE_URL + "/dashboard/profile/info";
-//user data
+//user data
+
+//expert management
+export const GET_EXPERT_MANAGEMENT_LIST = BASE_URL + "/dashboard/experts/show";
+//expert management

src/lib/app/contexts/language.jsx

@@ -18,7 +18,7 @@ export const LanguageProvider = ({children}) => {
     ];
     const {user, userChangedLanguage, changeLanguageState} = useUser();
     const [languageIsReady, setLanguageIsReady] = useState(false);
-    const [languageApp, setLanguageApp] = useState();
+    const [languageApp, setLanguageApp] = useState(process.env.NEXT_PUBLIC_DEFAULT_LANGUAGE);
     const [directionApp, setDirectionApp] = useState(
         process.env.NEXT_PUBLIC_DEFAULT_DIRECTION
     );
@@ -26,9 +26,7 @@ export const LanguageProvider = ({children}) => {
     useEffect(() => {
         const lang = localStorage.getItem("_language");
 
-        if (!lang && !languageApp) {
+        if (lang) {
-            setLanguageApp(process.env.NEXT_PUBLIC_DEFAULT_LANGUAGE);
-        } else if (lang) {
             setLanguageApp(lang);
         }
     }, []);