trithuc-mvc-react 3.4.4 → 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 +51 -58
  2. package/components/DataManagement/DataTableSM.jsx +29 -67
  3. package/components/DataManagement/EditorForm.jsx +7 -12
  4. package/package.json +1 -1
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
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
@@ -80,6 +80,7 @@ const DataTableSM = ({ multipleActions = [], page, setPage = () => {}, disableEd
80
80
  setOrderBy(property);
81
81
  };
82
82
 
83
+ // 1️⃣ Xoá defaultQueryOptions khỏi useQuery
83
84
  const { data, isLoading } = useQuery({
84
85
  queryKey: [tableName, page, rowsPerPage, dataSearch, order, orderBy],
85
86
  queryFn: () =>
@@ -95,8 +96,12 @@ const DataTableSM = ({ multipleActions = [], page, setPage = () => {}, disableEd
95
96
  })
96
97
  }
97
98
  }),
98
- defaultQueryOptions,
99
- // 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,
100
105
  onSuccess: ({ PermissionModel, CountTrangThai, status }) => {
101
106
  if (dataSearch?.TrangThaiXuLy !== undefined) {
102
107
  PermissionModel.TrangThaiXuLy = dataSearch?.TrangThaiXuLy;
@@ -106,96 +111,53 @@ const DataTableSM = ({ multipleActions = [], page, setPage = () => {}, disableEd
106
111
  if (CountTrangThai) {
107
112
  const keyCounter = `${tableName}_${userId}_TrangThaiXuLyCounter`;
108
113
  localStorage.setItem(keyCounter, JSON.stringify(CountTrangThai));
109
- // 👉 Invalidate query để Tab reload ngay
110
114
  queryClient.invalidateQueries({ queryKey: [tableName, "CountAllTrangThaiXuly"] });
111
115
  }
112
116
 
113
117
  if (status) {
114
- // console.log("LOAD LAI PermissionModel");
115
- // Cuộn lên đầu trang khi tải dữ liệu thành công
116
- window.scrollTo({
117
- top: 0, // Vị trí pixel muốn cuộn tới
118
- behavior: "smooth" // Tùy chọn cuộn mượt
119
- });
118
+ window.scrollTo({ top: 0, behavior: "smooth" });
120
119
  }
121
120
  }
122
121
  });
123
- const changeStatusMutation = useMutation(changeStatusDataToTable, {
124
- onSuccess: ({ status = false, message = " Có lỗi xảy ra !" }) => {
125
- if (URL_APPLICATION_API) {
126
- toast.success(message);
127
- } else {
128
- toast.success("Thay đổi trạng thái thành công !");
129
- }
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 !");
130
128
  queryClient.invalidateQueries({ queryKey: [tableName] });
131
129
  queryClient.invalidateQueries({ queryKey: [tableName, "CountAllTrangThaiXuly"] });
132
130
  },
133
131
  onError: (error) => {
134
- if (error.response && error.response.data && error.response.data.errors) {
135
- const errors = error.response.data.errors;
136
- // Chuyển đổi đối tượng lỗi thành chuỗi để hiển thị
137
- const errorMessages = Object.entries(errors)
138
- .map(([field, messages]) => `${field}: ${messages.join(", ")}`)
139
- .join("\n");
140
- toast.error(errorMessages);
141
- } else {
142
- // Nếu lỗi không theo định dạng mong đợi, hiển thị thông tin lỗi chung
143
- toast.error("Đã xảy ra lỗi không mong muốn.");
144
- }
132
+ const message = error?.response?.data?.message || "Đã xảy ra lỗi không mong muốn.";
133
+ toast.error(message);
145
134
  }
146
135
  });
147
- const deleteMutation = useMutation(deleteDataFromTable, {
148
- onSuccess: ({ status = false, message = " Có lỗi xảy ra !" }) => {
149
- if (status) {
150
- if (URL_APPLICATION_API) {
151
- toast.success(message);
152
- } else {
153
- toast.success("Xóa thành công !");
154
- }
155
- } else {
156
- toast.error(" Có lỗi xảy ra !");
157
- }
158
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 !");
159
141
  queryClient.invalidateQueries({ queryKey: [tableName] });
160
142
  queryClient.invalidateQueries({ queryKey: [tableName, "CountAllTrangThaiXuly"] });
161
143
  },
162
144
  onError: (error) => {
163
- if (error.response && error.response.data && error.response.data.errors) {
164
- const errors = error.response.data.errors;
165
- // Chuyển đổi đối tượng lỗi thành chuỗi để hiển thị
166
- const errorMessages = Object.entries(errors)
167
- .map(([field, messages]) => `${field}: ${messages.join(", ")}`)
168
- .join("\n");
169
- toast.error(errorMessages);
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
- }
145
+ const message = error?.response?.data?.message || "Đã xảy ra lỗi không mong muốn.";
146
+ toast.error(message);
174
147
  }
175
148
  });
176
- const deleteMultipleMutation = useMutation(deleteMultipleDataFromTable, {
177
- onSuccess: ({ status = false, message = " Có lỗi xảy ra !" }) => {
178
- if (URL_APPLICATION_API) {
179
- toast.success(message);
180
- } else {
181
- toast.success("Xóa thành công !");
182
- }
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 !");
183
154
  setSelectedItems([]);
184
155
  queryClient.invalidateQueries({ queryKey: [tableName] });
185
156
  queryClient.invalidateQueries({ queryKey: [tableName, "CountAllTrangThaiXuly"] });
186
157
  },
187
158
  onError: (error) => {
188
- if (error.response && error.response.data && error.response.data.errors) {
189
- const errors = error.response.data.errors;
190
- // Chuyển đổi đối tượng lỗi thành chuỗi để hiển thị
191
- const errorMessages = Object.entries(errors)
192
- .map(([field, messages]) => `${field}: ${messages.join(", ")}`)
193
- .join("\n");
194
- toast.error(errorMessages);
195
- } else {
196
- // Nếu lỗi không theo định dạng mong đợi, hiển thị thông tin lỗi chung
197
- toast.error("Đã xảy ra lỗi không mong muốn.");
198
- }
159
+ const message = error?.response?.data?.message || "Đã xảy ra lỗi không mong muốn.";
160
+ toast.error(message);
199
161
  }
200
162
  });
201
163
  // Hàm gọi khi người dùng muốn xóa một bản ghi
package/components/DataManagement/EditorForm.jsx CHANGED
@@ -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.4",
3
+ "version": "3.4.5",
4
4
  "main": "index.js",
5
5
  "scripts": {
6
6
  "test": "echo \"Error: no test specified\" && exit 1"