trithuc-mvc-react 3.4.5 → 3.4.7

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