trithuc-mvc-react 2.0.1 → 2.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -14,236 +14,237 @@ import TableToolbar from "./TableToolbar";
|
|
|
14
14
|
import { useDataTable } from "./hooks";
|
|
15
15
|
import { usePermission } from "../../hooks";
|
|
16
16
|
const DataTable = ({ multipleActions = [] }) => {
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
})
|
|
95
|
-
.catch(() => {});
|
|
96
|
-
};
|
|
97
|
-
const handleChangeStatus = (Id) => {
|
|
98
|
-
changeStatusMutation.mutate({
|
|
99
|
-
tableName,
|
|
100
|
-
id: Id
|
|
17
|
+
const {
|
|
18
|
+
tableName,
|
|
19
|
+
selectedField,
|
|
20
|
+
columns,
|
|
21
|
+
dataSearch,
|
|
22
|
+
setOpenEditorDialog,
|
|
23
|
+
setSelectedEditItem,
|
|
24
|
+
setOpenViewDialog,
|
|
25
|
+
onEditClick,
|
|
26
|
+
hasTabpanel,
|
|
27
|
+
defaultRowsPerPage = 5
|
|
28
|
+
} = useDataTable();
|
|
29
|
+
|
|
30
|
+
const { set: setPermission } = usePermission(tableName);
|
|
31
|
+
const queryClient = useQueryClient();
|
|
32
|
+
const confirm = useConfirm();
|
|
33
|
+
const [selectedItems, setSelectedItems] = useState([]);
|
|
34
|
+
const [page, setPage] = useState(0);
|
|
35
|
+
const [rowsPerPage, setRowsPerPage] = useState(defaultRowsPerPage);
|
|
36
|
+
|
|
37
|
+
const { data, isLoading } = useQuery({
|
|
38
|
+
queryKey: [tableName, page, rowsPerPage, dataSearch],
|
|
39
|
+
queryFn: () =>
|
|
40
|
+
getDatasFromTable({
|
|
41
|
+
tableName: tableName,
|
|
42
|
+
page: page + 1,
|
|
43
|
+
pageSize: rowsPerPage,
|
|
44
|
+
data: dataSearch
|
|
45
|
+
}),
|
|
46
|
+
// keepPreviousData: true,
|
|
47
|
+
onSuccess: ({ PermissionModel, status }) => {
|
|
48
|
+
if (status) {
|
|
49
|
+
// setPermission(PermissionModel);
|
|
50
|
+
// console.log("LOAD LAI PermissionModel");
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
});
|
|
54
|
+
const changeStatusMutation = useMutation(changeStatusDataToTable, {
|
|
55
|
+
onSuccess: () => {
|
|
56
|
+
toast.success("Thay đổi trạng thái thành công !");
|
|
57
|
+
queryClient.invalidateQueries({ queryKey: [tableName] });
|
|
58
|
+
},
|
|
59
|
+
onError: () => {
|
|
60
|
+
toast.error(" Có lỗi xảy ra !");
|
|
61
|
+
}
|
|
62
|
+
});
|
|
63
|
+
const deleteMutation = useMutation(deleteDataFromTable, {
|
|
64
|
+
onSuccess: ({ status }) => {
|
|
65
|
+
if (status) {
|
|
66
|
+
toast.success("Xóa thành công !");
|
|
67
|
+
} else {
|
|
68
|
+
toast.error(" Có lỗi xảy ra !");
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
queryClient.invalidateQueries({ queryKey: [tableName] });
|
|
72
|
+
},
|
|
73
|
+
onError: () => {
|
|
74
|
+
toast.error(" Có lỗi xảy ra !");
|
|
75
|
+
}
|
|
76
|
+
});
|
|
77
|
+
const deleteMultipleMutation = useMutation(deleteMultipleDataFromTable, {
|
|
78
|
+
onSuccess: () => {
|
|
79
|
+
toast.success("Xóa thành công !");
|
|
80
|
+
setSelectedItems([]);
|
|
81
|
+
queryClient.invalidateQueries({ queryKey: [tableName] });
|
|
82
|
+
},
|
|
83
|
+
onError: () => {
|
|
84
|
+
toast.error(" Có lỗi xảy ra !");
|
|
85
|
+
}
|
|
86
|
+
});
|
|
87
|
+
|
|
88
|
+
const handleDelete = (id) => {
|
|
89
|
+
confirm({ description: "Bạn có chắc chắn muốn xóa bản ghi này không?", title: "Xác nhận" })
|
|
90
|
+
.then(() => {
|
|
91
|
+
deleteMutation.mutate({
|
|
92
|
+
id,
|
|
93
|
+
tableName
|
|
101
94
|
});
|
|
95
|
+
})
|
|
96
|
+
.catch(() => {});
|
|
97
|
+
};
|
|
98
|
+
const handleChangeStatus = (Id) => {
|
|
99
|
+
changeStatusMutation.mutate({
|
|
100
|
+
tableName,
|
|
101
|
+
id: Id
|
|
102
|
+
});
|
|
103
|
+
};
|
|
104
|
+
const handlEdit = (item) => {
|
|
105
|
+
setOpenEditorDialog(true);
|
|
106
|
+
setSelectedEditItem(item);
|
|
107
|
+
onEditClick(item);
|
|
108
|
+
};
|
|
109
|
+
const handlViewDetail = (item) => {
|
|
110
|
+
setOpenViewDialog(true);
|
|
111
|
+
setSelectedEditItem(item);
|
|
112
|
+
};
|
|
113
|
+
const { rows, total } = useMemo(() => {
|
|
114
|
+
let rows = data?.data ?? [];
|
|
115
|
+
let total = data?.total ?? 0;
|
|
116
|
+
return {
|
|
117
|
+
rows: rows,
|
|
118
|
+
total
|
|
102
119
|
};
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
120
|
+
}, [data]);
|
|
121
|
+
|
|
122
|
+
useEffect(() => {
|
|
123
|
+
let PermissionModel = data?.PermissionModel;
|
|
124
|
+
PermissionModel && setPermission(PermissionModel);
|
|
125
|
+
}, [data]);
|
|
126
|
+
useEffect(() => {
|
|
127
|
+
const newSelectedItems = selectedItems.filter((selectedId) => {
|
|
128
|
+
return rows?.some((row) => row.Id == selectedId);
|
|
129
|
+
});
|
|
130
|
+
setSelectedItems(newSelectedItems);
|
|
131
|
+
}, [rows]);
|
|
132
|
+
const handleChangePage = (event, newPage) => {
|
|
133
|
+
setPage(newPage);
|
|
134
|
+
};
|
|
135
|
+
const isSelected = (Id) => selectedItems.indexOf(Id) !== -1;
|
|
136
|
+
|
|
137
|
+
const handleSelect = (event, Id) => {
|
|
138
|
+
const selectedIndex = selectedItems.indexOf(Id);
|
|
139
|
+
let newSelected = [];
|
|
140
|
+
|
|
141
|
+
if (selectedIndex === -1) {
|
|
142
|
+
newSelected = newSelected.concat(selectedItems, Id);
|
|
143
|
+
} else if (selectedIndex === 0) {
|
|
144
|
+
newSelected = newSelected.concat(selectedItems.slice(1));
|
|
145
|
+
} else if (selectedIndex === selectedItems.length - 1) {
|
|
146
|
+
newSelected = newSelected.concat(selectedItems.slice(0, -1));
|
|
147
|
+
} else if (selectedIndex > 0) {
|
|
148
|
+
newSelected = newSelected.concat(selectedItems.slice(0, selectedIndex), selectedItems.slice(selectedIndex + 1));
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
setSelectedItems(newSelected);
|
|
152
|
+
};
|
|
153
|
+
const handleSelectAllClick = (event) => {
|
|
154
|
+
if (event.target.checked) {
|
|
155
|
+
const newSelected = rows.map((n) => n[selectedField]);
|
|
156
|
+
setSelectedItems(newSelected);
|
|
157
|
+
return;
|
|
158
|
+
}
|
|
159
|
+
setSelectedItems([]);
|
|
160
|
+
};
|
|
161
|
+
|
|
162
|
+
const handleChangeRowsPerPage = (event) => {
|
|
163
|
+
setRowsPerPage(parseInt(event.target.value, 10));
|
|
164
|
+
setPage(0);
|
|
165
|
+
};
|
|
166
|
+
const handleDeleteMultiple = () => {
|
|
167
|
+
confirm({ description: `Bạn có chắc chắn muốn xóa ${selectedItems?.length} bản ghi này không?`, title: "Xác nhận" })
|
|
168
|
+
.then(() => {
|
|
169
|
+
deleteMultipleMutation.mutate({
|
|
170
|
+
tableName,
|
|
171
|
+
ids: selectedItems
|
|
128
172
|
});
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
tableName,
|
|
170
|
-
ids: selectedItems
|
|
171
|
-
});
|
|
172
|
-
})
|
|
173
|
-
.catch(() => {});
|
|
174
|
-
};
|
|
175
|
-
const theme = useTheme();
|
|
176
|
-
const downXL = useMediaQuery(theme.breakpoints.down("xl"));
|
|
177
|
-
|
|
178
|
-
return (
|
|
179
|
-
<>
|
|
180
|
-
<TableContainer sx={{ position: "relative" }}>
|
|
181
|
-
<TableToolbar
|
|
182
|
-
onSelectAllClick={handleSelectAllClick}
|
|
183
|
-
numSelected={selectedItems?.length}
|
|
184
|
-
rowCount={rows.length}
|
|
185
|
-
onDeleteMultiple={handleDeleteMultiple}
|
|
186
|
-
selected={selectedItems}
|
|
187
|
-
multipleActions={multipleActions}
|
|
173
|
+
})
|
|
174
|
+
.catch(() => {});
|
|
175
|
+
};
|
|
176
|
+
const theme = useTheme();
|
|
177
|
+
const downXL = useMediaQuery(theme.breakpoints.down("xl"));
|
|
178
|
+
|
|
179
|
+
return (
|
|
180
|
+
<>
|
|
181
|
+
<TableContainer sx={{ position: "relative" }}>
|
|
182
|
+
<TableToolbar
|
|
183
|
+
onSelectAllClick={handleSelectAllClick}
|
|
184
|
+
numSelected={selectedItems?.length}
|
|
185
|
+
rowCount={rows.length}
|
|
186
|
+
onDeleteMultiple={handleDeleteMultiple}
|
|
187
|
+
selected={selectedItems}
|
|
188
|
+
multipleActions={multipleActions}
|
|
189
|
+
/>
|
|
190
|
+
|
|
191
|
+
<Table className="border" size={downXL ? "small" : "medium"}>
|
|
192
|
+
<TableHead
|
|
193
|
+
headLabel={columns}
|
|
194
|
+
onSelectAllClick={handleSelectAllClick}
|
|
195
|
+
numSelected={selectedItems?.length}
|
|
196
|
+
rowCount={rows.length}
|
|
197
|
+
/>
|
|
198
|
+
{isLoading ? (
|
|
199
|
+
<TableRowsLoader rowsNum={5} colsNum={columns.length + 4} />
|
|
200
|
+
) : (
|
|
201
|
+
<TableBody>
|
|
202
|
+
{[...rows].map((row, index) => (
|
|
203
|
+
<TableRowRender
|
|
204
|
+
key={row.Id}
|
|
205
|
+
index={index}
|
|
206
|
+
row={row}
|
|
207
|
+
selected={isSelected(row[selectedField])}
|
|
208
|
+
onSelect={handleSelect}
|
|
209
|
+
onEdit={handlEdit}
|
|
210
|
+
onView={handlViewDetail}
|
|
211
|
+
onChangeStatus={handleChangeStatus}
|
|
212
|
+
onDelete={handleDelete}
|
|
188
213
|
/>
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
</Table>
|
|
225
|
-
</TableContainer>
|
|
226
|
-
|
|
227
|
-
<Grid container>
|
|
228
|
-
{!hasTabpanel && (
|
|
229
|
-
<Grid item alignSelf={"center"} sx={{ pl: 2 }}>
|
|
230
|
-
<Typography variant="body1">
|
|
231
|
-
Tổng số lượng: <span>{total}</span>
|
|
232
|
-
</Typography>
|
|
233
|
-
</Grid>
|
|
234
|
-
)}
|
|
235
|
-
|
|
236
|
-
<Grid item xs>
|
|
237
|
-
<TablePaginationCustom
|
|
238
|
-
count={total}
|
|
239
|
-
rowsPerPage={rowsPerPage}
|
|
240
|
-
page={page}
|
|
241
|
-
onPageChange={handleChangePage}
|
|
242
|
-
onRowsPerPageChange={handleChangeRowsPerPage}
|
|
243
|
-
/>
|
|
244
|
-
</Grid>
|
|
245
|
-
</Grid>
|
|
246
|
-
</>
|
|
247
|
-
);
|
|
214
|
+
))}
|
|
215
|
+
|
|
216
|
+
{rows?.length == 0 && (
|
|
217
|
+
<TableRow>
|
|
218
|
+
<TableCell colSpan={columns.length + 4} align="center">
|
|
219
|
+
Không có dữ liệu
|
|
220
|
+
</TableCell>
|
|
221
|
+
</TableRow>
|
|
222
|
+
)}
|
|
223
|
+
</TableBody>
|
|
224
|
+
)}
|
|
225
|
+
</Table>
|
|
226
|
+
</TableContainer>
|
|
227
|
+
|
|
228
|
+
<Grid container>
|
|
229
|
+
{!hasTabpanel && (
|
|
230
|
+
<Grid item alignSelf={"center"} sx={{ pl: 2 }}>
|
|
231
|
+
<Typography variant="body1">
|
|
232
|
+
Tổng số lượng: <span>{total}</span>
|
|
233
|
+
</Typography>
|
|
234
|
+
</Grid>
|
|
235
|
+
)}
|
|
236
|
+
|
|
237
|
+
<Grid item xs>
|
|
238
|
+
<TablePaginationCustom
|
|
239
|
+
count={total}
|
|
240
|
+
rowsPerPage={rowsPerPage}
|
|
241
|
+
page={page}
|
|
242
|
+
onPageChange={handleChangePage}
|
|
243
|
+
onRowsPerPageChange={handleChangeRowsPerPage}
|
|
244
|
+
/>
|
|
245
|
+
</Grid>
|
|
246
|
+
</Grid>
|
|
247
|
+
</>
|
|
248
|
+
);
|
|
248
249
|
};
|
|
249
250
|
export default DataTable;
|
|
@@ -74,7 +74,8 @@ function DataManagement({
|
|
|
74
74
|
header: {
|
|
75
75
|
sx: {}
|
|
76
76
|
}
|
|
77
|
-
}
|
|
77
|
+
},
|
|
78
|
+
defaultRowsPerPage = 5
|
|
78
79
|
}) {
|
|
79
80
|
const [openEditorDialog, setOpenEditorDialog] = useState(false);
|
|
80
81
|
const [selectedEditItem, setSelectedEditItem] = useState(null);
|
|
@@ -123,7 +124,8 @@ function DataManagement({
|
|
|
123
124
|
disableAdd,
|
|
124
125
|
tableActions,
|
|
125
126
|
onEditClick,
|
|
126
|
-
hasTabpanel
|
|
127
|
+
hasTabpanel,
|
|
128
|
+
defaultRowsPerPage
|
|
127
129
|
};
|
|
128
130
|
}, [
|
|
129
131
|
tableName,
|
|
@@ -136,7 +138,8 @@ function DataManagement({
|
|
|
136
138
|
tableActions,
|
|
137
139
|
openViewDialog,
|
|
138
140
|
setOpenViewDialog,
|
|
139
|
-
onEditClick
|
|
141
|
+
onEditClick,
|
|
142
|
+
defaultRowsPerPage
|
|
140
143
|
]);
|
|
141
144
|
|
|
142
145
|
const methods = useForm({ defaultValues: getDefaultValues(filters) });
|