From 3c54ae3a21f81775ea61c8b8d80a11dd92258c7d Mon Sep 17 00:00:00 2001
From: nguyentrungthat <80239428+nguentrungthat@users.noreply.github.com>
Date: Tue, 25 Nov 2025 14:40:48 +0700
Subject: [PATCH] Improve UI logic and port name handling in components

Updated DrawerControl to refine 'Select All' button logic and label. Adjusted FormAddEdit layout proportions for station info and lines. Enhanced ModalTerminal with normalized port name comparison and display. Improved TerminalXTerm loading state management and terminal reset behavior.
---
 FRONTEND/src/components/DrawerControl.tsx | 11 +++++-----
 FRONTEND/src/components/FormAddEdit.tsx   |  4 ++--
 FRONTEND/src/components/ModalTerminal.tsx | 26 ++++++++++++++++++++---
 FRONTEND/src/components/TerminalXTerm.tsx | 10 ++++++---
 4 files changed, 38 insertions(+), 13 deletions(-)

diff --git a/FRONTEND/src/components/DrawerControl.tsx b/FRONTEND/src/components/DrawerControl.tsx
index 61fe0e1..d6c87a6 100644
--- a/FRONTEND/src/components/DrawerControl.tsx
+++ b/FRONTEND/src/components/DrawerControl.tsx
@@ -892,7 +892,8 @@ export const DrawerSwitchControl: React.FC<DrawerProps> = ({
             className={classes.buttonMenuTool}
             disabled={isSubmit}
             title={
-              listPortsSelected.length === listPorts.flat().length
+              listPortsSelected.length === listPorts.flat().length &&
+              listPorts.flat().length > 0
                 ? "Deselect All"
                 : "Select All"
             }
@@ -908,10 +909,10 @@ export const DrawerSwitchControl: React.FC<DrawerProps> = ({
               }
             }}
           >
-            {listPortsSelected.length === listPorts.flat().length
-              ? "Deselect All"
-              : "Select All"}{" "}
-            {"(" + listPorts.flat().length + ")"}
+            {listPortsSelected.length === listPorts.flat().length &&
+            listPorts.flat().length > 0
+              ? "Clear All"
+              : "Select All"}
           </Button>
           <Button
             className={classes.buttonMenuTool}
diff --git a/FRONTEND/src/components/FormAddEdit.tsx b/FRONTEND/src/components/FormAddEdit.tsx
index 9d45ae2..4239133 100644
--- a/FRONTEND/src/components/FormAddEdit.tsx
+++ b/FRONTEND/src/components/FormAddEdit.tsx
@@ -401,7 +401,7 @@ const StationSetting = ({
       >
         <Flex justify={"space-between"} gap={"sm"}>
           {/* Station info */}
-          <Box w={"40%"}>
+          <Box w={"30%"}>
             <TextInput
               required
               name="name"
@@ -689,7 +689,7 @@ const StationSetting = ({
             </div>
           </Box>
           {/* Lines */}
-          <Box w={"60%"}>
+          <Box w={"70%"}>
             <Table
               verticalSpacing="xs"
               horizontalSpacing="lg"
diff --git a/FRONTEND/src/components/ModalTerminal.tsx b/FRONTEND/src/components/ModalTerminal.tsx
index 47d1026..5f40b11 100644
--- a/FRONTEND/src/components/ModalTerminal.tsx
+++ b/FRONTEND/src/components/ModalTerminal.tsx
@@ -351,12 +351,32 @@ const ModalTerminal = ({
 
   const findSwitchPort = (portName: string): SwitchPortsProps | null => {
     if (listPorts?.length > 0) {
-      const port = listPorts.find((el) => el.name === portName);
+      const port = listPorts.find(
+        (el) => normalizePortName(el.name) === normalizePortName(portName)
+      );
       if (port) return port;
     }
     return null;
   };
 
+  const normalizePortName = (port: string): string => {
+    if (!port) return "";
+
+    // Example inputs: "Fa0/1", "Gi0/0/1", "Fa0/0/2"
+    const match = port.match(/^([A-Za-z]+)([\d/]+)$/);
+
+    if (!match) return port;
+
+    const type = match[1]; // Fa, Gi, Te, etc.
+    const numbers = match[2]; // "0/1" / "0/0/1" / "0/0/2"
+
+    // Get the last part after slash
+    const parts = numbers.split("/");
+    const last = parts[parts.length - 1];
+
+    return `${type?.slice(0, 2)}${last}`;
+  };
+
   return (
     <Box>
       <Modal
@@ -494,11 +514,11 @@ const ModalTerminal = ({
                       {line?.interface ? (
                         findSwitchPort(line?.interface)?.status === "ON" ? (
                           <Text size="sm" ml={"4px"} c={"green"}>
-                            Connected ({line?.interface})
+                            Connected ({normalizePortName(line?.interface)})
                           </Text>
                         ) : (
                           <Text size="sm" ml={"4px"} c={"red"}>
-                            Not Connected ({line?.interface})
+                            Not Connected ({normalizePortName(line?.interface)})
                           </Text>
                         )
                       ) : (
diff --git a/FRONTEND/src/components/TerminalXTerm.tsx b/FRONTEND/src/components/TerminalXTerm.tsx
index 0c7dacf..11b8f74 100644
--- a/FRONTEND/src/components/TerminalXTerm.tsx
+++ b/FRONTEND/src/components/TerminalXTerm.tsx
@@ -144,8 +144,12 @@ const TerminalCLI: React.FC<TerminalCLIProps> = ({
     if (cliOpened) {
       setTimeout(() => {
         setLoading(false);
-      }, 500);
+      }, 100);
       if (fitRef.current) fitRef.current?.fit();
+    } else {
+      setLoading(true);
+      setIsInit(false);
+      terminal.current?.reset();
     }
   }, [cliOpened]);
 
@@ -170,8 +174,8 @@ const TerminalCLI: React.FC<TerminalCLIProps> = ({
 
   useEffect(() => {
     return () => {
-      setLoading(true);
-      setIsInit(false);
+      // setLoading(true);
+      // setIsInit(false);
       // if (terminal.current) {
       //   terminal?.current.clear();
       //   terminal?.current.dispose();