trithuc-mvc-react 3.4.3 → 3.4.5

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.
Files changed (4) hide show
  1. package/components/DataManagement/DataTable.jsx +52 -59
  2. package/components/DataManagement/DataTableSM.jsx +53 -71
  3. package/components/DataManagement/EditorForm.jsx +8 -13
  4. package/package.json +2 -2
package/components/DataManagement/DataTable.jsx CHANGED
@@ -1,11 +1,26 @@
1
- import { Grid, Table, TableBody, TableCell, TableContainer, TableRow, Typography, useMediaQuery, useTheme } from "@mui/material";
1
+ import {
2
+ Grid,
3
+ Table,
4
+ TableBody,
5
+ TableCell,
6
+ TableContainer,
7
+ TableRow,
8
+ Typography,
9
+ useMediaQuery,
10
+ useTheme
11
+ } from "@mui/material";
2
12
  import { useEffect, useMemo, useState } from "react";
3
13
  import TablePaginationCustom from "../table/TablePagination";
4
14
 
5
15
  import { useConfirm } from "material-ui-confirm";
6
- import { useMutation, useQuery, useQueryClient } from "react-query";
16
+ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
7
17
  import { toast } from "react-toastify";
8
- import { changeStatusDataToTable, deleteDataFromTable, deleteMultipleDataFromTable, getDatasFromTable } from "../../api";
18
+ import {
19
+ changeStatusDataToTable,
20
+ deleteDataFromTable,
21
+ deleteMultipleDataFromTable,
22
+ getDatasFromTable
23
+ } from "../../api";
9
24
  import TableRowsLoader from "../table/TableRowsLoader";
10
25
  import { TableHead } from "./TableHead";
11
26
 
@@ -66,6 +81,7 @@ const DataTable = ({ multipleActions = [], page, setPage = () => {}, disableEdit
66
81
  setOrderBy(property);
67
82
  };
68
83
 
84
+ // 1️⃣ Xoá defaultQueryOptions khỏi useQuery
69
85
  const { data, isLoading } = useQuery({
70
86
  queryKey: [tableName, page, rowsPerPage, dataSearch, order, orderBy],
71
87
  queryFn: () =>
@@ -81,8 +97,12 @@ const DataTable = ({ multipleActions = [], page, setPage = () => {}, disableEdit
81
97
  })
82
98
  }
83
99
  }),
84
- defaultQueryOptions,
85
- // keepPreviousData: true,
100
+ // defaultQueryOptions ❌ bỏ đi
101
+ keepPreviousData: true, // nếu muốn giữ dữ liệu cũ khi paging
102
+ staleTime: 1000 * 60 * 1,
103
+ cacheTime: 1000 * 60 * 30,
104
+ refetchOnWindowFocus: true,
105
+ refetchInterval: 1000 * 30,
86
106
  onSuccess: ({ PermissionModel, CountTrangThai, status }) => {
87
107
  if (dataSearch?.TrangThaiXuLy !== undefined) {
88
108
  PermissionModel.TrangThaiXuLy = dataSearch?.TrangThaiXuLy;
@@ -92,85 +112,53 @@ const DataTable = ({ multipleActions = [], page, setPage = () => {}, disableEdit
92
112
  if (CountTrangThai) {
93
113
  const keyCounter = `${tableName}_${userId}_TrangThaiXuLyCounter`;
94
114
  localStorage.setItem(keyCounter, JSON.stringify(CountTrangThai));
95
- // 👉 Invalidate query để Tab reload ngay
96
115
  queryClient.invalidateQueries({ queryKey: [tableName, "CountAllTrangThaiXuly"] });
97
116
  }
98
117
 
99
118
  if (status) {
100
- // console.log("LOAD LAI PermissionModel");
101
- // Cuộn lên đầu trang khi tải dữ liệu thành công
102
- window.scrollTo({
103
- top: 0, // Vị trí pixel muốn cuộn tới
104
- behavior: "smooth" // Tùy chọn cuộn mượt
105
- });
119
+ window.scrollTo({ top: 0, behavior: "smooth" });
106
120
  }
107
121
  }
108
122
  });
109
123
 
110
- const changeStatusMutation = useMutation(changeStatusDataToTable, {
111
- onSuccess: ({ status = false, message = " Có lỗi xảy ra !" }) => {
112
- if (URL_APPLICATION_API) {
113
- toast.success(message);
114
- } else {
115
- toast.success("Thay đổi trạng thái thành công !");
116
- }
124
+ // 2️⃣ Mutation cũng cần sửa, bỏ defaultMutationOptions nếu có
125
+ const changeStatusMutation = useMutation({
126
+ mutationFn: changeStatusDataToTable,
127
+ onSuccess: ({ status = false, message = "Có lỗi xảy ra !" }) => {
128
+ toast.success(status ? message : "Thay đổi trạng thái thành công !");
117
129
  queryClient.invalidateQueries({ queryKey: [tableName] });
118
130
  queryClient.invalidateQueries({ queryKey: [tableName, "CountAllTrangThaiXuly"] });
119
131
  },
120
132
  onError: (error) => {
121
- if (error.response && error.response.data) {
122
- const message = error.response.data.message;
123
- toast.error(message);
124
- } else {
125
- // Nếu lỗi không theo định dạng mong đợi, hiển thị thông tin lỗi chung
126
- toast.error("Đã xảy ra lỗi không mong muốn.");
127
- }
133
+ const message = error?.response?.data?.message || "Đã xảy ra lỗi không mong muốn.";
134
+ toast.error(message);
128
135
  }
129
136
  });
130
- const deleteMutation = useMutation(deleteDataFromTable, {
131
- onSuccess: ({ status = false, message = " Có lỗi xảy ra !" }) => {
132
- if (status) {
133
- if (URL_APPLICATION_API) {
134
- toast.success(message);
135
- } else {
136
- toast.success("Xóa thành công !");
137
- }
138
- } else {
139
- toast.error(" Có lỗi xảy ra !");
140
- }
141
137
 
138
+ const deleteMutation = useMutation({
139
+ mutationFn: deleteDataFromTable,
140
+ onSuccess: ({ status = false, message = "Có lỗi xảy ra !" }) => {
141
+ toast[status ? "success" : "error"](status ? message : "Có lỗi xảy ra !");
142
142
  queryClient.invalidateQueries({ queryKey: [tableName] });
143
143
  queryClient.invalidateQueries({ queryKey: [tableName, "CountAllTrangThaiXuly"] });
144
144
  },
145
145
  onError: (error) => {
146
- if (error.response && error.response.data) {
147
- const message = error.response.data.message;
148
- toast.error(message);
149
- } else {
150
- // Nếu lỗi không theo định dạng mong đợi, hiển thị thông tin lỗi chung
151
- toast.error("Đã xảy ra lỗi không mong muốn.");
152
- }
146
+ const message = error?.response?.data?.message || "Đã xảy ra lỗi không mong muốn.";
147
+ toast.error(message);
153
148
  }
154
149
  });
155
- const deleteMultipleMutation = useMutation(deleteMultipleDataFromTable, {
156
- onSuccess: ({ status = false, message = " Có lỗi xảy ra !" }) => {
157
- if (URL_APPLICATION_API) {
158
- toast.success(message);
159
- } else {
160
- toast.success("Xóa thành công !");
161
- }
150
+
151
+ const deleteMultipleMutation = useMutation({
152
+ mutationFn: deleteMultipleDataFromTable,
153
+ onSuccess: ({ status = false, message = "Có lỗi xảy ra !" }) => {
154
+ toast[status ? "success" : "error"](status ? message : "Xóa thành công !");
162
155
  setSelectedItems([]);
163
156
  queryClient.invalidateQueries({ queryKey: [tableName] });
164
157
  queryClient.invalidateQueries({ queryKey: [tableName, "CountAllTrangThaiXuly"] });
165
158
  },
166
159
  onError: (error) => {
167
- if (error.response && error.response.data) {
168
- const message = error.response.data.message;
169
- toast.error(message);
170
- } else {
171
- // Nếu lỗi không theo định dạng mong đợi, hiển thị thông tin lỗi chung
172
- toast.error("Đã xảy ra lỗi không mong muốn.");
173
- }
160
+ const message = error?.response?.data?.message || "Đã xảy ra lỗi không mong muốn.";
161
+ toast.error(message);
174
162
  }
175
163
  });
176
164
  // Hàm gọi khi người dùng muốn xóa một bản ghi
@@ -370,7 +358,12 @@ const DataTable = ({ multipleActions = [], page, setPage = () => {}, disableEdit
370
358
  />
371
359
  </Grid>
372
360
  </Grid>
373
- <DeleteConfirmationDialog open={openDialog} onClose={handleDialogClose} onConfirm={handleDialogClose} id={deleteId} />
361
+ <DeleteConfirmationDialog
362
+ open={openDialog}
363
+ onClose={handleDialogClose}
364
+ onConfirm={handleDialogClose}
365
+ id={deleteId}
366
+ />
374
367
  <DeleteMultipleConfirmationDialog
375
368
  open={openDeleteMultipleDialog}
376
369
  onClose={handleDeleteMultipleDialogClose}
package/components/DataManagement/DataTableSM.jsx CHANGED
@@ -1,11 +1,26 @@
1
- import { Grid, Table, TableBody, TableCell, TableContainer, TableRow, Typography, useMediaQuery, useTheme } from "@mui/material";
1
+ import {
2
+ Grid,
3
+ Table,
4
+ TableBody,
5
+ TableCell,
6
+ TableContainer,
7
+ TableRow,
8
+ Typography,
9
+ useMediaQuery,
10
+ useTheme
11
+ } from "@mui/material";
2
12
  import { useEffect, useMemo, useState } from "react";
3
13
  import TablePaginationCustom from "../table/TablePagination";
4
14
 
5
15
  import { useConfirm } from "material-ui-confirm";
6
- import { useMutation, useQuery, useQueryClient } from "react-query";
16
+ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
7
17
  import { toast } from "react-toastify";
8
- import { changeStatusDataToTable, deleteDataFromTable, deleteMultipleDataFromTable, getDatasFromTable } from "../../api";
18
+ import {
19
+ changeStatusDataToTable,
20
+ deleteDataFromTable,
21
+ deleteMultipleDataFromTable,
22
+ getDatasFromTable
23
+ } from "../../api";
9
24
  import TableRowsLoader from "../table/TableRowsLoader";
10
25
 
11
26
  import { URL_APPLICATION_API } from "@/constants";
@@ -65,6 +80,7 @@ const DataTableSM = ({ multipleActions = [], page, setPage = () => {}, disableEd
65
80
  setOrderBy(property);
66
81
  };
67
82
 
83
+ // 1️⃣ Xoá defaultQueryOptions khỏi useQuery
68
84
  const { data, isLoading } = useQuery({
69
85
  queryKey: [tableName, page, rowsPerPage, dataSearch, order, orderBy],
70
86
  queryFn: () =>
@@ -80,8 +96,12 @@ const DataTableSM = ({ multipleActions = [], page, setPage = () => {}, disableEd
80
96
  })
81
97
  }
82
98
  }),
83
- defaultQueryOptions,
84
- // keepPreviousData: true,
99
+ // defaultQueryOptions ❌ bỏ đi
100
+ keepPreviousData: true, // nếu muốn giữ dữ liệu cũ khi paging
101
+ staleTime: 1000 * 60 * 1,
102
+ cacheTime: 1000 * 60 * 30,
103
+ refetchOnWindowFocus: true,
104
+ refetchInterval: 1000 * 30,
85
105
  onSuccess: ({ PermissionModel, CountTrangThai, status }) => {
86
106
  if (dataSearch?.TrangThaiXuLy !== undefined) {
87
107
  PermissionModel.TrangThaiXuLy = dataSearch?.TrangThaiXuLy;
@@ -91,96 +111,53 @@ const DataTableSM = ({ multipleActions = [], page, setPage = () => {}, disableEd
91
111
  if (CountTrangThai) {
92
112
  const keyCounter = `${tableName}_${userId}_TrangThaiXuLyCounter`;
93
113
  localStorage.setItem(keyCounter, JSON.stringify(CountTrangThai));
94
- // 👉 Invalidate query để Tab reload ngay
95
114
  queryClient.invalidateQueries({ queryKey: [tableName, "CountAllTrangThaiXuly"] });
96
115
  }
97
116
 
98
117
  if (status) {
99
- // console.log("LOAD LAI PermissionModel");
100
- // Cuộn lên đầu trang khi tải dữ liệu thành công
101
- window.scrollTo({
102
- top: 0, // Vị trí pixel muốn cuộn tới
103
- behavior: "smooth" // Tùy chọn cuộn mượt
104
- });
118
+ window.scrollTo({ top: 0, behavior: "smooth" });
105
119
  }
106
120
  }
107
121
  });
108
- const changeStatusMutation = useMutation(changeStatusDataToTable, {
109
- onSuccess: ({ status = false, message = " Có lỗi xảy ra !" }) => {
110
- if (URL_APPLICATION_API) {
111
- toast.success(message);
112
- } else {
113
- toast.success("Thay đổi trạng thái thành công !");
114
- }
122
+
123
+ // 2️⃣ Mutation cũng cần sửa, bỏ defaultMutationOptions nếu có
124
+ const changeStatusMutation = useMutation({
125
+ mutationFn: changeStatusDataToTable,
126
+ onSuccess: ({ status = false, message = "Có lỗi xảy ra !" }) => {
127
+ toast.success(status ? message : "Thay đổi trạng thái thành công !");
115
128
  queryClient.invalidateQueries({ queryKey: [tableName] });
116
129
  queryClient.invalidateQueries({ queryKey: [tableName, "CountAllTrangThaiXuly"] });
117
130
  },
118
131
  onError: (error) => {
119
- if (error.response && error.response.data && error.response.data.errors) {
120
- const errors = error.response.data.errors;
121
- // Chuyển đổi đối tượng lỗi thành chuỗi để hiển thị
122
- const errorMessages = Object.entries(errors)
123
- .map(([field, messages]) => `${field}: ${messages.join(", ")}`)
124
- .join("\n");
125
- toast.error(errorMessages);
126
- } else {
127
- // Nếu lỗi không theo định dạng mong đợi, hiển thị thông tin lỗi chung
128
- toast.error("Đã xảy ra lỗi không mong muốn.");
129
- }
132
+ const message = error?.response?.data?.message || "Đã xảy ra lỗi không mong muốn.";
133
+ toast.error(message);
130
134
  }
131
135
  });
132
- const deleteMutation = useMutation(deleteDataFromTable, {
133
- onSuccess: ({ status = false, message = " Có lỗi xảy ra !" }) => {
134
- if (status) {
135
- if (URL_APPLICATION_API) {
136
- toast.success(message);
137
- } else {
138
- toast.success("Xóa thành công !");
139
- }
140
- } else {
141
- toast.error(" Có lỗi xảy ra !");
142
- }
143
136
 
137
+ const deleteMutation = useMutation({
138
+ mutationFn: deleteDataFromTable,
139
+ onSuccess: ({ status = false, message = "Có lỗi xảy ra !" }) => {
140
+ toast[status ? "success" : "error"](status ? message : "Có lỗi xảy ra !");
144
141
  queryClient.invalidateQueries({ queryKey: [tableName] });
145
142
  queryClient.invalidateQueries({ queryKey: [tableName, "CountAllTrangThaiXuly"] });
146
143
  },
147
144
  onError: (error) => {
148
- if (error.response && error.response.data && error.response.data.errors) {
149
- const errors = error.response.data.errors;
150
- // Chuyển đổi đối tượng lỗi thành chuỗi để hiển thị
151
- const errorMessages = Object.entries(errors)
152
- .map(([field, messages]) => `${field}: ${messages.join(", ")}`)
153
- .join("\n");
154
- toast.error(errorMessages);
155
- } else {
156
- // Nếu lỗi không theo định dạng mong đợi, hiển thị thông tin lỗi chung
157
- toast.error("Đã xảy ra lỗi không mong muốn.");
158
- }
145
+ const message = error?.response?.data?.message || "Đã xảy ra lỗi không mong muốn.";
146
+ toast.error(message);
159
147
  }
160
148
  });
161
- const deleteMultipleMutation = useMutation(deleteMultipleDataFromTable, {
162
- onSuccess: ({ status = false, message = " Có lỗi xảy ra !" }) => {
163
- if (URL_APPLICATION_API) {
164
- toast.success(message);
165
- } else {
166
- toast.success("Xóa thành công !");
167
- }
149
+
150
+ const deleteMultipleMutation = useMutation({
151
+ mutationFn: deleteMultipleDataFromTable,
152
+ onSuccess: ({ status = false, message = "Có lỗi xảy ra !" }) => {
153
+ toast[status ? "success" : "error"](status ? message : "Xóa thành công !");
168
154
  setSelectedItems([]);
169
155
  queryClient.invalidateQueries({ queryKey: [tableName] });
170
156
  queryClient.invalidateQueries({ queryKey: [tableName, "CountAllTrangThaiXuly"] });
171
157
  },
172
158
  onError: (error) => {
173
- if (error.response && error.response.data && error.response.data.errors) {
174
- const errors = error.response.data.errors;
175
- // Chuyển đổi đối tượng lỗi thành chuỗi để hiển thị
176
- const errorMessages = Object.entries(errors)
177
- .map(([field, messages]) => `${field}: ${messages.join(", ")}`)
178
- .join("\n");
179
- toast.error(errorMessages);
180
- } else {
181
- // Nếu lỗi không theo định dạng mong đợi, hiển thị thông tin lỗi chung
182
- toast.error("Đã xảy ra lỗi không mong muốn.");
183
- }
159
+ const message = error?.response?.data?.message || "Đã xảy ra lỗi không mong muốn.";
160
+ toast.error(message);
184
161
  }
185
162
  });
186
163
  // Hàm gọi khi người dùng muốn xóa một bản ghi
@@ -409,7 +386,12 @@ const DataTableSM = ({ multipleActions = [], page, setPage = () => {}, disableEd
409
386
  />
410
387
  </Grid>
411
388
  </Grid>
412
- <DeleteConfirmationDialog open={openDialog} onClose={handleDialogClose} onConfirm={handleDialogClose} id={deleteId} />
389
+ <DeleteConfirmationDialog
390
+ open={openDialog}
391
+ onClose={handleDialogClose}
392
+ onConfirm={handleDialogClose}
393
+ id={deleteId}
394
+ />
413
395
  <DeleteMultipleConfirmationDialog
414
396
  open={openDeleteMultipleDialog}
415
397
  onClose={handleDeleteMultipleDialogClose}
package/components/DataManagement/EditorForm.jsx CHANGED
@@ -8,7 +8,7 @@ import { useEffect } from "react";
8
8
 
9
9
  import { URL_APPLICATION, URL_APPLICATION_API } from "@/constants";
10
10
  import { yupResolver } from "@hookform/resolvers/yup";
11
- import { useMutation, useQueryClient } from "react-query";
11
+ import { useMutation, useQueryClient } from "@tanstack/react-query";
12
12
  import { toast } from "react-toastify";
13
13
  import { saveDataToTable } from "../../api";
14
14
  import FormField from "./FormField";
@@ -91,35 +91,30 @@ function EditorForm({ fields, submitRef }) {
91
91
  }
92
92
  }, [selectedEditItem]);
93
93
 
94
- const saveMutation = useMutation(saveDataToTable, {
94
+ const saveMutation = useMutation({
95
+ mutationFn: saveDataToTable,
95
96
  onSuccess: ({ status = false, message = " Có lỗi xảy ra !" }, { data: { Id } }) => {
96
97
  if (status) {
97
- if (URL_APPLICATION_API) {
98
- toast.success(message);
99
- } else {
100
- toast.success(Id == 0 ? "Thêm thành công!" : "Cập nhật thành công!");
101
- }
102
- queryClient.invalidateQueries(tableName);
98
+ toast.success(URL_APPLICATION_API ? message : Id === 0 ? "Thêm thành công!" : "Cập nhật thành công!");
99
+ queryClient.invalidateQueries({ queryKey: [tableName] });
103
100
  setOpenEditorDialog(false);
104
101
  } else {
105
- console.log(status, Id);
106
102
  toast.error(message);
107
103
  }
108
104
  },
109
105
  onError: (error) => {
110
- if (error.response && error.response.data && error.response.data.errors) {
111
- const errors = error.response.data.errors;
112
- // Chuyển đổi đối tượng lỗi thành chuỗi để hiển thị
106
+ const errors = error?.response?.data?.errors;
107
+ if (errors) {
113
108
  const errorMessages = Object.entries(errors)
114
109
  .map(([field, messages]) => `${field}: ${messages.join(", ")}`)
115
110
  .join("\n");
116
111
  toast.error(errorMessages);
117
112
  } else {
118
- // Nếu lỗi không theo định dạng mong đợi, hiển thị thông tin lỗi chung
119
113
  toast.error("Đã xảy ra lỗi không mong muốn.");
120
114
  }
121
115
  }
122
116
  });
117
+
123
118
  const onSubmit = (data) => {
124
119
  fields.reduce((data, { type, field, datas, keyValueLabel, keyValue, keyLabel }) => {
125
120
  if (type === "date") {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "trithuc-mvc-react",
3
- "version": "3.4.3",
3
+ "version": "3.4.5",
4
4
  "main": "index.js",
5
5
  "scripts": {
6
6
  "test": "echo \"Error: no test specified\" && exit 1"
@@ -17,6 +17,7 @@
17
17
  "@emotion/styled": "^11.14.0",
18
18
  "@hookform/resolvers": "^5.0.1",
19
19
  "@iconify/react": "^5.2.1",
20
+ "@tanstack/react-query": "^5.90.12",
20
21
  "axios": "^1.8.4",
21
22
  "date-fns": "^4.1.0",
22
23
  "lodash": "^4.17.21",
@@ -47,7 +48,6 @@
47
48
  "react": ">=16",
48
49
  "react-dom": ">=16",
49
50
  "react-hook-form": "^7.55.0",
50
- "react-query": "^3.39.3",
51
51
  "react-toastify": "^11.0.5"
52
52
  }
53
53
  }