trithuc-mvc-react 3.4.9 → 3.5.0

package/components/DataManagement/ExportExcelButton.jsx

@@ -1,108 +1,79 @@
 import { URL_APPLICATION, URL_APPLICATION_API } from "@/constants";
 import { Download } from "@mui/icons-material";
 import { Button, IconButton, Tooltip, Typography, useMediaQuery, useTheme } from "@mui/material";
+import { useState } from "react";
 import { toast } from "react-toastify";
 import { exportExcel } from "../../api";
+import useBlockNavigation from "./useBlockNavigation";
+import LoadingOverlay from "./LoadingOverlay";
 
 const ExportExcelButton = ({ tableName, data, size = "small" }) => {
   const theme = useTheme();
-  const isSmallScreen = useMediaQuery(theme.breakpoints.down("sm")); // Xác định màn hình nhỏ
-  const handleExportExcel = async (tableName, data) => {
-    const _data = await exportExcel({ tableName, data });
-    if (_data.status) {
-      if (URL_APPLICATION_API) {
-        window.open(URL_APPLICATION + _data.url, "_blank").focus();
+  const isSmallScreen = useMediaQuery(theme.breakpoints.down("sm"));
+  const [exporting, setExporting] = useState(false);
+
+  // 🚫 Chặn reload / close tab khi đang export
+  useBlockNavigation(exporting);
+
+  const handleExportExcel = async () => {
+    try {
+      setExporting(true);
+
+      const res = await exportExcel({ tableName, data });
+
+      if (res?.status) {
+        const url = URL_APPLICATION_API ? URL_APPLICATION + res.url : res.url;
+
+        window.open(url, "_blank");
       } else {
-        window.open(_data.url, "_blank").focus();
+        toast.error("Xuất file thất bại!");
       }
-    } else {
-      toast.error("Xuất file thất bại!");
+    } catch (error) {
+      toast.error("Có lỗi khi xuất Excel!");
+    } finally {
+      setExporting(false);
     }
   };
-  return !isSmallScreen ? (
-    <Button
-      size={size}
-      variant="outlined"
-      startIcon={<Download />}
-      onClick={() => {
-        handleExportExcel(tableName, data);
-      }}
-      sx={{
-        ml: 0.5,
-        mr: 0.5
-        // fontSize: {
-        //   xs: "0.75rem",
-        //   sm: "0.85rem",
-        //   md: "0.95rem"
-        // },
-        // textAlign: "center",
-        // textTransform: "none"
-      }}
-    >
-      <Typography
-        noWrap
-        sx={{
-          width: "100%",
-          fontSize: {
-            xs: "0.65rem",
-            sm: "0.75rem",
-            md: "0.95rem"
-          },
-          textAlign: "center",
-          textTransform: "none"
-        }}
-      >
-        Excel
-      </Typography>
-    </Button>
-  ) : (
-    <Tooltip title="Excel">
-      <IconButton
-        variant="outlined"
-        color="primary"
-        size={size}
-        onClick={() => {
-          handleExportExcel(tableName, data);
-        }}
-      >
-        <Download fontSize="inherit" />
-      </IconButton>
-    </Tooltip>
-    // <Button
-    //   size={size}
-    //   variant="outlined"
-    //   startIcon={<Download />}
-    //   onClick={() => {
-    //     handleExportExcel(tableName, data);
-    //   }}
-    //   sx={{
-    //     ml: 0.5,
-    //     mr: 0.5,
-    //     fontSize: {
-    //       xs: "0.75rem",
-    //       sm: "0.875rem",
-    //       md: "1rem"
-    //     },
-    //     textAlign: "center",
-    //     textTransform: "none"
-    //   }}
-    // >
-    //   <Typography
-    //     noWrap
-    //     sx={{
-    //       width: "100%",
-    //       fontSize: {
-    //         xs: "0.75rem",
-    //         sm: "0.875rem",
-    //         md: "1rem"
-    //       },
-    //       textAlign: "center",
-    //       textTransform: "none" // ✅ Đảm bảo chữ gốc giữ nguyên
-    //     }}
-    //   >
-    //     Excel
-    //   </Typography>
-    // </Button>
+
+  return (
+    <>
+      {/* 🔔 Màn hình chờ API */}
+      <LoadingOverlay open={exporting} text="Đang xuất file , vui lòng đợi..." />
+
+      {!isSmallScreen ? (
+        <Button
+          size={size}
+          variant="outlined"
+          startIcon={<Download />}
+          disabled={exporting}
+          onClick={handleExportExcel}
+          sx={{ ml: 0.5, mr: 0.5 }}
+        >
+          <Typography
+            noWrap
+            sx={{
+              width: "100%",
+              fontSize: {
+                xs: "0.65rem",
+                sm: "0.75rem",
+                md: "0.95rem"
+              },
+              textAlign: "center",
+              textTransform: "none"
+            }}
+          >
+            Excel
+          </Typography>
+        </Button>
+      ) : (
+        <Tooltip title="Excel">
+          <IconButton color="primary" size={size} disabled={exporting} onClick={handleExportExcel}>
+            <Download fontSize="inherit" />
+          </IconButton>
+        </Tooltip>
+      )}
+    </>
   );
 };
+
 export default ExportExcelButton;

package/components/DataManagement/LoadingOverlay.jsx

@@ -0,0 +1,98 @@
+import { Modal, Box, CircularProgress, Typography } from "@mui/material";
+import { useEffect, useState } from "react";
+import HubOutlinedIcon from "@mui/icons-material/HubOutlined";
+
+const LoadingOverlay = ({ open, text }) => {
+  const [progress, setProgress] = useState(0);
+
+  useEffect(() => {
+    if (!open) {
+      setProgress(0);
+      return;
+    }
+
+    const timer = setInterval(() => {
+      setProgress((p) => (p < 96 ? p + Math.random() * 3 : p));
+    }, 420);
+
+    return () => clearInterval(timer);
+  }, [open]);
+
+  return (
+    <Modal open={open} sx={{ zIndex: 99999 }}>
+      <Box
+        display="flex"
+        alignItems="center"
+        justifyContent="center"
+        height="100vh"
+        sx={{
+          backdropFilter: "blur(8px)",
+          backgroundColor: "rgba(225,235,245,0.65)"
+        }}
+      >
+        <Box
+          sx={{
+            width: 320,
+            px: 4,
+            py: 4,
+            borderRadius: 3,
+            background: "linear-gradient(180deg, rgba(255,255,255,0.96), rgba(240,247,255,0.96))",
+            boxShadow: "0 25px 50px rgba(0,60,120,0.25)",
+            border: "1px solid rgba(0,120,200,0.2)",
+            color: "#0d2b45",
+            textAlign: "center"
+          }}
+        >
+          {/* ICON */}
+          <Box
+            sx={{
+              width: 60,
+              height: 60,
+              borderRadius: "50%",
+              mx: "auto",
+              mb: 2.5,
+              background: "linear-gradient(135deg, rgba(0,150,255,0.18), rgba(0,200,255,0.28))",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              animation: "pulse 2.4s infinite",
+              "@keyframes pulse": {
+                "0%": { boxShadow: "0 0 0 0 rgba(0,150,255,0.45)" },
+                "70%": { boxShadow: "0 0 0 20px rgba(0,150,255,0)" },
+                "100%": { boxShadow: "0 0 0 0 rgba(0,150,255,0)" }
+              }
+            }}
+          >
+            <HubOutlinedIcon sx={{ fontSize: 30, color: "#0277bd" }} />
+          </Box>
+
+          <Typography fontSize="1rem" fontWeight={600}>
+            {text || "Đang khởi tạo dữ liệu hệ thống"}
+          </Typography>
+
+          <Typography fontSize="0.75rem" color="rgba(13,43,69,0.7)" mt={0.6}>
+            Nền tảng số đang xử lý và kết nối dữ liệu
+          </Typography>
+
+          <Box mt={3}>
+            <CircularProgress
+              variant="determinate"
+              value={Math.min(progress, 100)}
+              size={50}
+              thickness={4}
+              sx={{
+                color: "#0288d1",
+                mb: 1
+              }}
+            />
+            <Typography fontSize="0.8rem" fontWeight={500}>
+              {Math.floor(progress)}%
+            </Typography>
+          </Box>
+        </Box>
+      </Box>
+    </Modal>
+  );
+};
+
+export default LoadingOverlay;

package/components/DataManagement/useBlockNavigation.js

@@ -0,0 +1,23 @@
+import { useEffect } from "react";
+
+/**
+ * Chặn navigate (reload / close tab) khi shouldBlock = true
+ */
+const useBlockNavigation = (shouldBlock) => {
+  useEffect(() => {
+    if (!shouldBlock) return;
+
+    const handleBeforeUnload = (event) => {
+      event.preventDefault();
+      event.returnValue = ""; // Bắt buộc cho Chrome
+    };
+
+    window.addEventListener("beforeunload", handleBeforeUnload);
+
+    return () => {
+      window.removeEventListener("beforeunload", handleBeforeUnload);
+    };
+  }, [shouldBlock]);
+};
+
+export default useBlockNavigation;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "trithuc-mvc-react",
-  "version": "3.4.9",
+  "version": "3.5.0",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"