trithuc-mvc-react 3.4.6 → 3.4.8

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 (7) hide show
  1. package/api/index.js +150 -261
  2. package/components/DataManagement/DataTable.jsx +69 -49
  3. package/components/DataManagement/DataTableSM.jsx +81 -51
  4. package/components/DataManagement/EditorForm.jsx +13 -8
  5. package/components/DataManagement/TableRowRenderSM.jsx +179 -78
  6. package/components/DataManagement/index.jsx +30 -39
  7. package/package.json +2 -2
package/components/DataManagement/index.jsx CHANGED
@@ -1,4 +1,15 @@
1
- import { Box, Button, Card, Grid, IconButton, Stack, Tooltip, Typography, useMediaQuery, useTheme } from "@mui/material";
1
+ import {
2
+ Box,
3
+ Button,
4
+ Card,
5
+ Grid,
6
+ IconButton,
7
+ Stack,
8
+ Tooltip,
9
+ Typography,
10
+ useMediaQuery,
11
+ useTheme
12
+ } from "@mui/material";
2
13
 
3
14
  import { useEffect, useLayoutEffect, useMemo, useState } from "react";
4
15
 
@@ -277,37 +288,32 @@ function DataManagement({
277
288
  {!disableHead && (
278
289
  <Card sx={{ p: 0, mb: 0 }}>
279
290
  <Stack
280
- direction={isFullRow ? "column" : "row"}
291
+ direction="row"
292
+ flexWrap="wrap"
293
+ alignItems="center"
294
+ gap={1}
281
295
  sx={{
282
- // mb: upXL ? 1 : 1,
283
- flexWrap: isFullRow ? "nowrap" : "wrap",
284
- alignItems: isFullRow ? "stretch" : "center",
285
- gap: 1,
296
+ width: "100%",
286
297
  ...slotProps?.header?.sx
287
298
  }}
288
299
  >
289
- {/* Left side */}
300
+ {/* ===== LEFT: TITLE ===== */}
290
301
  <Box
291
- ref={leftBoxRef}
292
302
  sx={{
293
- flexGrow: isFullRow ? 0 : 1,
294
- width: isFullRow ? "100%" : `${minWidthValue}px`,
295
- textAlign: "left",
296
- whiteSpace: "normal",
297
- wordBreak: "break-word"
303
+ flexGrow: 1,
304
+ minWidth: 0, // ⭐ bắt buộc để flex wrap đúng
305
+ textAlign: "left"
298
306
  }}
299
307
  >
300
308
  <Typography
301
- ref={titleRef}
302
- noWrap
303
309
  sx={{
304
- width: "100%",
305
310
  fontSize: {
306
311
  xs: "0.85rem",
307
312
  sm: "0.95rem",
308
313
  md: "1rem"
309
314
  },
310
- textAlign: "left",
315
+ whiteSpace: "normal",
316
+ wordBreak: "break-word",
311
317
  textTransform: "none"
312
318
  }}
313
319
  >
@@ -315,26 +321,20 @@ function DataManagement({
315
321
  </Typography>
316
322
  </Box>
317
323
 
318
- {/* Right side */}
324
+ {/* ===== RIGHT: ACTIONS ===== */}
319
325
  <Box
320
- ref={rightBoxRef}
321
326
  sx={{
322
327
  display: "flex",
323
328
  flexWrap: "wrap",
324
- justifyContent: isFullRow ? "flex-end" : "flex-end",
325
329
  alignItems: "center",
326
- width: isFullRow ? "100%" : "auto",
327
- flexShrink: 0
330
+ justifyContent: "flex-end",
331
+ ml: "auto", // ⭐ chìa khóa: cùng dòng thì đẩy phải, thiếu chỗ thì xuống dòng
332
+ gap: 0.5
328
333
  }}
329
334
  >
330
335
  {(viewMode === "thongke" || viewMode === "bieudo") && (
331
336
  <Tooltip title="Danh sách dữ liệu">
332
- <IconButton
333
- size={elementSize}
334
- color="primary"
335
- onClick={() => setViewMode("table")}
336
- sx={{ ml: 0.5, mr: 0.5 }}
337
- >
337
+ <IconButton size={elementSize} color="primary" onClick={() => setViewMode("table")}>
338
338
  <TableChartIcon fontSize="inherit" />
339
339
  </IconButton>
340
340
  </Tooltip>
@@ -346,7 +346,6 @@ function DataManagement({
346
346
  size={elementSize}
347
347
  color={viewMode === "thongke" ? "secondary" : "primary"}
348
348
  onClick={() => setViewMode("thongke")}
349
- sx={{ ml: 0.5, mr: 0.5 }}
350
349
  >
351
350
  <BarChartIcon fontSize="inherit" />
352
351
  </IconButton>
@@ -359,7 +358,6 @@ function DataManagement({
359
358
  size={elementSize}
360
359
  color={viewMode === "bieudo" ? "secondary" : "primary"}
361
360
  onClick={() => setViewMode("bieudo")}
362
- sx={{ ml: 0.5, mr: 0.5 }}
363
361
  >
364
362
  <PieChartIcon fontSize="inherit" />
365
363
  </IconButton>
@@ -367,16 +365,14 @@ function DataManagement({
367
365
  )}
368
366
 
369
367
  <HuongDanButton tableName={tableName} size={elementSize} />
368
+
370
369
  <Tooltip title="Làm mới">
371
370
  <IconButton
372
- variant="outlined"
373
371
  color="primary"
374
372
  size={elementSize}
375
373
  onClick={() => {
376
374
  setDataSearch({ ...defaults });
377
- [...filters].forEach((filter) => {
378
- filter?.onChange?.();
379
- });
375
+ [...filters].forEach((filter) => filter?.onChange?.());
380
376
  reset();
381
377
  setValue("Search");
382
378
  }}
@@ -403,20 +399,15 @@ function DataManagement({
403
399
  }
404
400
  onAddClick(e);
405
401
  }}
406
- sx={{
407
- ml: 0.5
408
- }}
409
402
  >
410
403
  <Typography
411
404
  noWrap
412
405
  sx={{
413
- width: "100%",
414
406
  fontSize: {
415
407
  xs: "0.65rem",
416
408
  sm: "0.75rem",
417
409
  md: "0.85rem"
418
410
  },
419
- textAlign: "center",
420
411
  textTransform: "none"
421
412
  }}
422
413
  >
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "trithuc-mvc-react",
3
- "version": "3.4.6",
3
+ "version": "3.4.8",
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
  }