CRM/Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Mohammad Jalali
2023-10-02 16:25:29 +03:30
parent dd2ffa8a3c
commit 53c03fb418
15 changed files with 328 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
public/locales/fa/app.json
View File

@@ -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": "افزودن کارشناس"
}
}

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

@@ -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 nameHeader = screen.queryByText(/نام/i);
const usernameHeader = screen.queryByText(/نام کاربری/i);
const emailHeader = screen.queryByText(/پست الکترونیک/i);
const phone_numberHeader = screen.queryByText(/شماره همراه/i);
const national_idHeader = screen.queryByText(/کد ملی/i);
const positionHeader = screen.queryByText(/سمت/i);
const province_nameHeader = screen.queryByText(/استان/i);
const city_nameHeader = screen.queryByText(/شهر/i);
const role_nameHeader = screen.queryByText(/نقش/i);
const updated_atHeader = screen.queryByText(/آخرین بروزرسانی/i);
const idHeader = screen.queryByText("کد یکتا");
const nameHeader = screen.queryByText("نام");
const usernameHeader = screen.queryByText("نام کاربری");
const emailHeader = screen.queryByText("پست الکترونیک");
const phone_numberHeader = screen.queryByText("شماره همراه");
const national_idHeader = screen.queryByText("کد ملی");
const positionHeader = screen.queryByText("سمت");
const province_nameHeader = screen.queryByText("استان");
const city_nameHeader = screen.queryByText("شهر");
const role_nameHeader = screen.queryByText("نقش");
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", () => {
});
});

182
src/components/dashboard/expert-management/DataTable/index.jsx
View File

@@ -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>
);
}

7
src/components/dashboard/expert-management/Form/ChangePassword/index.jsx Normal file
View File

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

0
src/components/dashboard/expert-management/Form/CreateForm/CreateContent/__tests__/index.test.js Normal file
View File

0
src/components/dashboard/expert-management/Form/CreateForm/CreateContent/index.jsx Normal file
View File

18
src/components/dashboard/expert-management/Form/CreateForm/__tests__/index.test.js Normal file
View File

@@ -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();
});
});
});

30
src/components/dashboard/expert-management/Form/CreateForm/index.jsx Normal file
View File

@@ -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

7
src/components/dashboard/expert-management/Form/DeleteForm/index.jsx Normal file
View File

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

7
src/components/dashboard/expert-management/Form/UpdateForm/index.jsx Normal file
View File

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

28
src/components/dashboard/expert-management/TableRowActions.jsx
View File

@@ -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;

14
src/components/dashboard/expert-management/TableToolbar.jsx
View File

@@ -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;

10
src/core/components/DataTable.jsx
View File

@@ -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,

6
src/core/data/apiRoutes.js
View File

@@ -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

6
src/lib/app/contexts/language.jsx
View File

@@ -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) {
setLanguageApp(process.env.NEXT_PUBLIC_DEFAULT_LANGUAGE);
} else if (lang) {
if (lang) {
setLanguageApp(lang);
}
}, []);