TF-4 user management final changes

This commit is contained in:
2023-09-11 14:28:58 +03:30
parent 301ce7c279
commit c60817f529
15 changed files with 112 additions and 116 deletions

View File

@@ -354,7 +354,7 @@
"button-delete": "حذف کردن"
},
"AddDialog": {
"add": "اضافه کردن",
"add": "کاربر جدید",
"phone_number": "شماره تلفن",
"phone_number_positive": "شماره تلفن باید مثبت باشد",
"phone_number_error": "وارد کردن شماره تلفن الزامیست",
@@ -372,6 +372,6 @@
"type_id": "نوع کاربر",
"navgan_id": "کد ناوگان",
"button-cancel": "انصراف",
"button-add": "اضافه کردن"
"button-add": "ثبت"
}
}

View File

@@ -133,6 +133,9 @@ function DashboardCommercialChiefComponent() {
selectableRow={false}
enableCustomToolbar={false}
enableLastUpdate={true}
sorting={[{
id: 'id', desc: false
}]}
enablePinning={true}
enableDensityToggle={false}
initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large)

View File

@@ -136,6 +136,9 @@ function DashboardDevelopmentAssistantComponent() {
enableLastUpdate={true}
enablePinning={true}
enableDensityToggle={false}
sorting={[{
id: 'id', desc: false
}]}
initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large)
enableColumnFilters={true}
enableHiding={true}

View File

@@ -134,6 +134,9 @@ function DashboardInspectorExpertComponent() {
enableCustomToolbar={false}
enableLastUpdate={true}
enablePinning={true}
sorting={[{
id: 'id', desc: false
}]}
enableDensityToggle={false}
initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large)
enableColumnFilters={true}

View File

@@ -164,6 +164,9 @@ function DashboardMachinaryOfficeComponent() {
selectableRow={false}
enableCustomToolbar={false}
enableLastUpdate={true}
sorting={[{
id: 'id', desc: false
}]}
enablePinning={true}
enableDensityToggle={false}
initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large)

View File

@@ -134,6 +134,9 @@ function DashboardNavganLoanManagementComponent() {
selectableRow={false}
enableCustomToolbar={false}
enableLastUpdate={true}
sorting={[{
id: 'id', desc: false
}]}
enablePinning={true}
enableDensityToggle={false}
initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large)

View File

@@ -165,6 +165,9 @@ function DashboardNavganProvinceManagerComponent() {
selectableRow={false}
enableCustomToolbar={false}
enableLastUpdate={true}
sorting={[{
id: 'id', desc: false
}]}
enablePinning={true}
enableDensityToggle={false}
initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large)

View File

@@ -165,6 +165,9 @@ function DashboardPassengerOfficeComponent() {
selectableRow={false}
enableCustomToolbar={false}
enableLastUpdate={true}
sorting={[{
id: 'id', desc: false
}]}
enablePinning={true}
enableDensityToggle={false}
initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large)

View File

@@ -165,6 +165,9 @@ function DashboardPassengerOfficeComponent() {
selectableRow={false}
enableCustomToolbar={false}
enableLastUpdate={true}
sorting={[{
id: 'id', desc: false
}]}
enablePinning={true}
enableDensityToggle={false}
initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large)

View File

@@ -134,6 +134,9 @@ function DashboardProvinceHeadExpertComponent() {
selectableRow={false}
enableCustomToolbar={false}
enableLastUpdate={true}
sorting={[{
id: 'id', desc: false
}]}
enablePinning={true}
enableDensityToggle={false}
initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large)

View File

@@ -133,6 +133,9 @@ function DashboardRefahiLoanManagementComponent() {
columns={columns}
selectableRow={false}
enableCustomToolbar={false}
sorting={[{
id: 'id', desc: false
}]}
enableLastUpdate={true}
enablePinning={true}
enableDensityToggle={false}

View File

@@ -133,6 +133,9 @@ function DashboardRefahiProvinceManagerComponent() {
columns={columns}
selectableRow={false}
enableCustomToolbar={false}
sorting={[{
id: 'id', desc: false
}]}
enableLastUpdate={true}
enablePinning={true}
enableDensityToggle={false}

View File

@@ -165,6 +165,9 @@ function DashboardTransportationAssistanceComponent() {
selectableRow={false}
enableCustomToolbar={false}
enableLastUpdate={true}
sorting={[{
id: 'id', desc: false
}]}
enablePinning={true}
enableDensityToggle={false}
initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large)

View File

@@ -16,6 +16,7 @@ function DashboardUserManagementComponent() {
const columns = useMemo(() => [{
accessorFn: (row) => row.id,
id: "id",
sortDescFirst: true,
header: t("UserManagement.id"),
enableColumnFilter: true,
datatype: "numeric",
@@ -104,9 +105,7 @@ function DashboardUserManagementComponent() {
column.setFilterValue(null);
}}
sx={{
color: column.getFilterValue() ? "rgba(0, 0, 0, 0.54)" : "#bfbfbf",
marginTop: 7,
height: 25
color: column.getFilterValue() ? "rgba(0, 0, 0, 0.54)" : "#bfbfbf", marginTop: 7, height: 25
}}
>
<ClearIcon/>
@@ -125,6 +124,9 @@ function DashboardUserManagementComponent() {
enableLastUpdate={true}
enablePinning={true}
enableDensityToggle={false}
sorting={[{
id: 'id', desc: true
}]}
initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large)
enableColumnFilters={true}
enableHiding={true}

View File

@@ -11,8 +11,7 @@ function DataTable(props) {
const requestServer = useRequest({auth: true})
const fetcher = (...args) => {
return requestServer(args, 'get', {
pending: false,
success: {notification: {show: false}}
pending: false, success: {notification: {show: false}}
}).then((response) => {
setRowCount(response.data.meta.totalRowCount);
return response.data.data;
@@ -22,14 +21,12 @@ function DataTable(props) {
const t = useTranslations();
const {languageApp, languageList} = useLanguage();
const [columnFilters, setColumnFilters] = useState([]);
const [sorting, setSorting] = useState([]);
const [sorting, setSorting] = useState(props.sorting || []);
const [pagination, setPagination] = useState({pageIndex: 0, pageSize: 10});
const [rowCount, setRowCount] = useState(0);
const [columnFilterFns, setColumnFilterFns] = useState(() => {
let output = {};
const list = props.columns.map((item) =>
item.enableColumnFilter ? {[item.id]: item.filterFn} : {[item.id]: ""}
);
const list = props.columns.map((item) => item.enableColumnFilter ? {[item.id]: item.filterFn} : {[item.id]: ""});
for (var key in list) {
var nestedObj = list[key];
for (var nestedKey in nestedObj) {
@@ -39,22 +36,13 @@ function DataTable(props) {
return output;
});
const [updateTime, setupdateTime] = useState(
moment().format("HH:mm | jYYYY/jM/jD")
);
const [updateTime, setupdateTime] = useState(moment().format("HH:mm | jYYYY/jM/jD"));
const tableLocalization = useMemo(
() =>
languageList.find((item) => item.key == languageApp).tableLocalization,
[languageApp, languageList]
);
const tableLocalization = useMemo(() => languageList.find((item) => item.key == languageApp).tableLocalization, [languageApp, languageList]);
const fetchUrl = useMemo(() => {
const url = new URL(props.tableUrl);
url.searchParams.set(
"start",
`${pagination.pageIndex * pagination.pageSize}`
);
url.searchParams.set("start", `${pagination.pageIndex * pagination.pageSize}`);
const filters = columnFilters.map((filter) => {
let datatype;
for (const i in props.columns) {
@@ -63,114 +51,84 @@ function DataTable(props) {
}
}
return {
...filter,
fn: columnFilterFns[filter.id],
datatype: datatype,
...filter, fn: columnFilterFns[filter.id], datatype: datatype,
};
});
url.searchParams.set("size", pagination.pageSize);
url.searchParams.set("filters", JSON.stringify(filters ?? []));
url.searchParams.set("sorting", JSON.stringify(sorting ?? []));
return url;
}, [
props.tableUrl,
columnFilters,
columnFilterFns,
pagination,
sorting,
props.columns,
]);
}, [props.tableUrl, columnFilters, columnFilterFns, pagination, sorting, props.columns,]);
const {data, isValidating, mutate} = useSWR(fetchUrl, fetcher, {
revalidateIfStale: false,
revalidateOnFocus: false,
revalidateOnReconnect: false
revalidateIfStale: false, revalidateOnFocus: false, revalidateOnReconnect: false
});
useEffect(() => {
setupdateTime(moment().format("HH:mm | jYYYY/jM/jD"));
}, [isValidating, languageApp]);
return (
<MaterialReactTable
localization={tableLocalization}
data={data ?? []}
manualFiltering
manualPagination
manualSorting
enableRowSelection={props.selectableRow} /* send condition */
enablePinning={props.enablePinning} /* send condition */
enableColumnFilters={props.enableColumnFilters} /* send condition */
enableDensityToggle={props.enableDensityToggle}
enableHiding={props.enableHiding} /* send condition */
enableFullScreenToggle={props.enableFullScreenToggle} /* send condition */
enableColumnResizing={props.enableColumnResizing}
muiTableHeadCellProps={{
sx: {
return (<MaterialReactTable
localization={tableLocalization}
data={data ?? []}
manualFiltering
manualPagination
manualSorting
enableRowSelection={props.selectableRow} /* send condition */
enablePinning={props.enablePinning} /* send condition */
enableColumnFilters={props.enableColumnFilters} /* send condition */
enableDensityToggle={props.enableDensityToggle}
enableHiding={props.enableHiding} /* send condition */
enableFullScreenToggle={props.enableFullScreenToggle} /* send condition */
enableColumnResizing={props.enableColumnResizing}
muiTableHeadCellProps={{
sx: {
color: "primary.main", borderLeft: "1px solid #e1e1e1", "&:first-of-type": {
borderLeft: "unset"
}, "& .Mui-TableHeadCell-Content": {justifyContent: "space-between"},
},
}}
muiTableBodyCellProps={{
sx: {
borderLeft: "1px solid #e1e1e1", "&:first-of-type": {
borderLeft: "unset"
}
},
}}
enableColumnFilterModes
muiTablePaperProps={{elevation: 0}}
rowCount={rowCount}
onColumnFilterFnsChange={setColumnFilterFns}
onColumnFiltersChange={setColumnFilters}
onPaginationChange={setPagination}
onSortingChange={setSorting}
positionToolbarAlertBanner="bottom"
renderTopToolbarCustomActions={({table}) => (<>
{props.enableCustomToolbar /* send condition */ ?
<props.CustomToolbar fetchUrl={fetchUrl} mutate={mutate}/> /* send component */ : ""}
</>)}
renderBottomToolbarCustomActions={({table}) => (<>
{props.enableLastUpdate /* send condition */ ? (<Typography
sx={{
color: "primary.main",
borderLeft: "1px solid #e1e1e1",
"&:first-of-type": {
borderLeft: "unset"
},
"& .Mui-TableHeadCell-Content": {justifyContent: "space-between"},
},
}}
muiTableBodyCellProps={{
sx: {
borderLeft: "1px solid #e1e1e1",
"&:first-of-type": {
borderLeft: "unset"
}
},
}}
enableColumnFilterModes
muiTablePaperProps={{elevation: 0}}
rowCount={rowCount}
onColumnFilterFnsChange={setColumnFilterFns}
onColumnFiltersChange={setColumnFilters}
onPaginationChange={setPagination}
onSortingChange={setSorting}
positionToolbarAlertBanner="bottom"
renderTopToolbarCustomActions={({table}) => (
<>
{props.enableCustomToolbar /* send condition */
? <props.CustomToolbar fetchUrl={fetchUrl} mutate={mutate}/> /* send component */
: ""}
</>
)}
renderBottomToolbarCustomActions={({table}) => (
<>
{props.enableLastUpdate /* send condition */ ? (
<Typography
sx={{
color: "primary.main",
alignSelf: "center",
whiteSpace: "nowrap",
maxWidth: {xs: 100, sm: "100%"},
overflowX: "scroll",
}}
variant="caption"
>
{t("last_updated_at")}: {updateTime}
</Typography>
) : (
""
)}
</>
)}
state={{
isLoading: isValidating,
columnFilters,
columnFilterFns,
pagination,
sorting,
}}
positionActionsColumn={"last"}
enableRowActions={props.enableRowActions}
renderRowActions={({row}) => <props.TableRowAction fetchUrl={fetchUrl} mutate={mutate} row={row}/>}
{...props}
/>
);
alignSelf: "center",
whiteSpace: "nowrap",
maxWidth: {xs: 100, sm: "100%"},
overflowX: "scroll",
}}
variant="caption"
>
{t("last_updated_at")}: {updateTime}
</Typography>) : ("")}
</>)}
state={{
isLoading: isValidating, columnFilters, columnFilterFns, pagination, sorting,
}}
positionActionsColumn={"last"}
enableRowActions={props.enableRowActions}
renderRowActions={({row}) => <props.TableRowAction fetchUrl={fetchUrl} mutate={mutate} row={row}/>}
{...props}
/>);
}
export default DataTable;