Update modal terminal

FRONTEND/src/App.tsx

@@ -890,6 +890,9 @@ function App() {
         listLicense={listLicense}
         getListIos={getListIos}
         getListLicense={getListLicense}
+        setScenarios={setScenarios}
+        listBrands={listBrands}
+        listCategories={listCategories}
       />
 
       {/* <ModalConfirmRunScenario

FRONTEND/src/components/Modal/ModalRunScenario.tsx

@@ -23,7 +23,7 @@ import type {
   TUser,
 } from "../../untils/types";
 import type { Socket } from "socket.io-client";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 const ModalRunScenario = ({
   open,
@@ -48,7 +48,7 @@ const ModalRunScenario = ({
   user: TUser;
   socket: Socket | null;
   setIsDisable: (value: boolean) => void;
-  station: TStation;
+  station: TStation | undefined;
   listBrands: TBrands[];
   listCategories: TCategories[];
 }) => {
@@ -57,6 +57,15 @@ const ModalRunScenario = ({
   const [inputSeries, setInputSeries] = useState<string[]>([]);
   const [inputTitle, setInputTitle] = useState("");
 
+  useEffect(() => {
+    if (!open) {
+      setOptionBrand("");
+      setOptionCategory("");
+      setInputSeries([]);
+      setInputTitle("");
+    }
+  }, [open]);
+
   const filteredScenarios = () => {
     let listScenarios = [...scenarios];
     if (inputTitle.trim())
@@ -497,8 +506,8 @@ const ModalRunScenario = ({
                                 )
                                   socket?.emit("run_all_dpelp", {
                                     lineIds: selectedLines?.map((el) => el.id),
-                                    stationName: station.name,
-                                    stationId: Number(station.id),
+                                    stationName: station?.name,
+                                    stationId: Number(station?.id),
                                     scenarioName: scenario.title,
                                   });
 

FRONTEND/src/components/Modal/ModalTerminal.tsx

@@ -18,6 +18,8 @@ import type {
   FileInfo,
   IScenario,
   SwitchPortsProps,
+  TBrands,
+  TCategories,
   TDataTicket,
   TextFSM,
   TextTSMLicense,
@@ -36,7 +38,7 @@ import {
   IconPlug,
   IconSettings,
 } from "@tabler/icons-react";
-import { ButtonDPELP, ButtonScenario } from "../ButtonAction";
+import { ButtonDPELP } from "../ButtonAction";
 import CopyIcon from "../CopyIcon";
 import moment from "moment";
 import axios from "axios";
@@ -46,6 +48,8 @@ import { listBaudDefault } from "../../untils/constanst";
 import { motion } from "motion/react";
 import ModalSelectIOS from "./ModalSelectIOS";
 import ModalSelectLicense from "./ModalSelectLicense";
+import ModalRunScenario from "./ModalRunScenario";
+import DrawerScenario from "./ModalScenario";
 const apiUrl = import.meta.env.VITE_BACKEND_URL;
 
 const INIT_TICKET = {
@@ -69,6 +73,9 @@ const ModalTerminal = ({
   listLicense,
   getListLicense,
   getListIos,
+  listBrands,
+  listCategories,
+  setScenarios,
 }: {
   opened: boolean;
   onClose: () => void;
@@ -81,6 +88,9 @@ const ModalTerminal = ({
   listLicense: FileInfo[];
   getListLicense: () => void;
   getListIos: () => void;
+  listBrands: TBrands[];
+  listCategories: TCategories[];
+  setScenarios: (value: React.SetStateAction<IScenario[]>) => void;
 }) => {
   const user = useMemo(() => {
     return localStorage.getItem("user") &&
@@ -101,6 +111,8 @@ const ModalTerminal = ({
     useState<boolean>(false);
   const [openSelectIos, setOpenSelectIos] = useState<boolean>(false);
   const [openSelectLicense, setOpenSelectLicense] = useState<boolean>(false);
+  const [openScenarioModal, setOpenScenarioModal] = useState<boolean>(false);
+  const [openDrawerScenario, setOpenDrawerScenario] = useState<boolean>(false);
 
   useEffect(() => {
     if (opened && line?.tickets && line?.tickets?.length > 0) {
@@ -466,8 +478,17 @@ const ModalTerminal = ({
   return (
     <Box>
       <Modal
+        zIndex={95}
         opened={opened}
         onClose={() => {
+          if (openDrawerScenario) {
+            setOpenDrawerScenario(false);
+            return;
+          }
+          if (openScenarioModal) {
+            setOpenScenarioModal(false);
+            return;
+          }
           if (openSelectIos) return;
           onClose();
           if (
@@ -1164,49 +1185,18 @@ const ModalTerminal = ({
                   (el) => el.title.toUpperCase() === "DPELP"
                 )}
               />
-              <Menu trigger="hover" withArrow shadow="md" position="top">
-                <Menu.Target>
-                  <Button
-                    fw={400}
-                    disabled={isDisable}
-                    variant="filled"
-                    color="yellow"
-                    style={{ height: "30px", width: "100px" }}
-                    onClick={() => {}}
-                  >
-                    Scenario
-                  </Button>
-                </Menu.Target>
-                <Menu.Dropdown>
-                  <Box
-                    px="xs"
-                    py="sm"
-                    style={{
-                      display: "grid",
-                      gridTemplateColumns: "1fr 1fr",
-                      gap: "12px",
-                    }}
-                  >
-                    {scenarios.map((el, i) => (
-                      <ButtonScenario
-                        key={i}
-                        socket={socket}
-                        selectedLines={line ? [line] : []}
-                        isDisable={isDisable}
-                        onClick={() => {
-                          // setSelectedLines([]);
-                          setIsDisable(true);
-                          setTimeout(() => {
-                            setIsDisable(false);
-                          }, 5000);
-                        }}
-                        scenario={el}
-                        station={stationItem}
-                      />
-                    ))}
-                  </Box>
-                </Menu.Dropdown>
-              </Menu>
+              <Button
+                fw={400}
+                disabled={isDisable}
+                variant="outline"
+                color="yellow"
+                style={{ height: "30px", width: "100px" }}
+                onClick={() => {
+                  setOpenScenarioModal(true);
+                }}
+              >
+                Scenario
+              </Button>
               <Button
                 disabled={isDisable}
                 fw={400}
@@ -1524,6 +1514,31 @@ const ModalTerminal = ({
         line={line}
         getListLicense={getListLicense}
       />
+
+      <ModalRunScenario
+        open={openScenarioModal}
+        setOpen={setOpenScenarioModal}
+        scenarios={scenarios}
+        isDisable={isDisable}
+        selectedLines={line ? [line] : []}
+        user={user}
+        socket={socket}
+        setIsDisable={setIsDisable}
+        station={stationItem}
+        setOpenEdit={setOpenDrawerScenario}
+        listBrands={listBrands}
+        listCategories={listCategories}
+      />
+
+      {/* Drawer Scenario để Add/Edit */}
+      <DrawerScenario
+        scenarios={scenarios}
+        setScenarios={setScenarios}
+        externalOpened={openDrawerScenario}
+        onExternalClose={() => setOpenDrawerScenario(false)}
+        listBrands={listBrands}
+        listCategories={listCategories}
+      />
     </Box>
   );
 };