TF-4 user management final changes
This commit is contained in:
@@ -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": "ثبت"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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)
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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)
|
||||
|
||||
@@ -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)
|
||||
|
||||
@@ -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)
|
||||
|
||||
@@ -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)
|
||||
|
||||
@@ -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)
|
||||
|
||||
@@ -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)
|
||||
|
||||
@@ -133,6 +133,9 @@ function DashboardRefahiLoanManagementComponent() {
|
||||
columns={columns}
|
||||
selectableRow={false}
|
||||
enableCustomToolbar={false}
|
||||
sorting={[{
|
||||
id: 'id', desc: false
|
||||
}]}
|
||||
enableLastUpdate={true}
|
||||
enablePinning={true}
|
||||
enableDensityToggle={false}
|
||||
|
||||
@@ -133,6 +133,9 @@ function DashboardRefahiProvinceManagerComponent() {
|
||||
columns={columns}
|
||||
selectableRow={false}
|
||||
enableCustomToolbar={false}
|
||||
sorting={[{
|
||||
id: 'id', desc: false
|
||||
}]}
|
||||
enableLastUpdate={true}
|
||||
enablePinning={true}
|
||||
enableDensityToggle={false}
|
||||
|
||||
@@ -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)
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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;
|
||||
Reference in New Issue
Block a user