group tasks

src/Components/AppRoutes/index.js

@@ -1,21 +1,13 @@
 import { Route, Routes } from "react-router-dom";
 import Dashboard from "../../Pages/Dashboard";
 import GroupTasks from "../../Pages/GroupTasks";
-import GroupTask from "../../Pages/GroupTask";
 
 function AppRoutes() {
   return (
     <Routes>
       <Route path="/" element={<Dashboard />}></Route>
       <Route path="/group-tasks" element={<GroupTasks />}></Route>
-      <Route path="/group-tasks/:id" element={<GroupTask />}></Route>
     </Routes>
   );
 }
 export default AppRoutes;
-
-/*
- <Route path="/inventory" element={<Inventory />}></Route>
-      <Route path="/orders" element={<Orders />}></Route>
-      <Route path="/customers" element={<Customers />}></Route>
-*/

src/Pages/GroupTask/index.js

@@ -1,107 +0,0 @@
-import {
-  Alert,
-  Button,
-  Divider,
-  Form,
-  Input,
-  Modal,
-  Steps,
-  message,
-} from "antd";
-import { useState } from "react";
-
-const steps = [
-  {
-    title: "First",
-    content: "First-content",
-  },
-  {
-    title: "Second",
-    content: "Second-content",
-  },
-  {
-    title: "Last",
-    content: "Last-content",
-  },
-];
-
-const contentData = [
-  <Form layout="vertical">
-    <Form.Item label="Format des Labels">
-      <Input />
-    </Form.Item>
-  </Form>,
-  "",
-  <h1>hakki</h1>,
-];
-
-export default function GroupTask() {
-  const [current, setCurrent] = useState(0);
-  const [content, setContent] = useState(contentData[current]);
-
-  const updateContentData = (value) => {
-    setContent(contentData[value]);
-  };
-
-  const next = () => {
-    setCurrent(current + 1);
-    updateContentData(current + 1);
-  };
-
-  const prev = () => {
-    setCurrent(current - 1);
-    updateContentData(current - 1);
-  };
-
-  return (
-    <>
-      <h1>GroupTask</h1>
-      <Steps
-        direction="vertical"
-        current={current}
-        items={[
-          {
-            title: "Bild zu Label konvertieren",
-            description: current === 0 ? content : null,
-            onClick: (value) => console.log(value),
-          },
-          {
-            title: "Label drucken",
-            description: current === 1 ? content : null,
-          },
-          {
-            title: "Waiting",
-            description: current === 2 ? content : null,
-          },
-        ]}
-      />
-      <div style={{ marginTop: 24 }}>
-        {current < steps.length - 1 && (
-          <Button type="primary" onClick={() => next()}>
-            Next
-          </Button>
-        )}
-        {current === steps.length - 1 && (
-          <Button
-            type="primary"
-            onClick={() => message.success("Processing complete!")}
-          >
-            Done
-          </Button>
-        )}
-        {current > 0 && (
-          <Button style={{ margin: "0 8px" }} onClick={() => prev()}>
-            Previous
-          </Button>
-        )}
-      </div>
-      <Divider />
-      <Alert
-        message={<b>Success</b>}
-        description="ok"
-        type="success"
-        showIcon
-      />
-    </>
-  );
-}

src/Pages/GroupTasks/GroupTaskModal.js

@@ -0,0 +1,156 @@
+import {
+  Alert,
+  Button,
+  Divider,
+  Form,
+  Input,
+  Modal,
+  Steps,
+  message,
+} from "antd";
+import { useState } from "react";
+
+const steps = [
+  {
+    title: "First",
+    content: "First-content",
+  },
+  {
+    title: "Second",
+    content: "Second-content",
+  },
+  {
+    title: "Last",
+    content: "Last-content",
+  },
+];
+
+const contentData = [
+  <Form layout="vertical">
+    <Form.Item label="Format des Labels">
+      <Input />
+    </Form.Item>
+  </Form>,
+  "",
+  <h1>hakki</h1>,
+];
+
+const consoleContentData = [
+  {
+    description: [
+      <p>
+        Error: An Uncaught Error at s
+        (https://ant.design/demos.a6f2ae2b.async.js:1:10244) at S
+        (https://ant.design/umi.996fb2f6.js:6081:13535) at u at a
+        (https://ant.design/umi.996fb2f6.js:41615:61022) at b
+        (https://ant.design/umi.996fb2f6.js:211:19559) at S
+        (https://ant.design/umi.996fb2f6.js:6081:13535) at section at section at
+        $t (https://ant.design/umi.996fb2f6.js:125:690029) at h4
+        (https://ant.design/umi.996fb2f6.js:211:1412)
+      </p>,
+    ],
+    status: "error",
+  },
+  {
+    description: [<p>Test</p>],
+    status: "success",
+  },
+  {
+    description: [<p>Test</p>],
+    status: "warning",
+  },
+];
+
+export default function GroupTaskModal({ isOpen, setIsOpen }) {
+  const [currentStep, setCurrentStep] = useState(0);
+  const [content, setContent] = useState(contentData[currentStep]);
+  const [consoleContent, setConsoleContent] = useState(
+    consoleContentData[currentStep]
+  );
+
+  const updateContentData = (value) => {
+    setContent(contentData[value]);
+  };
+
+  const next = () => {
+    const val = currentStep + 1;
+    setCurrentStep(val);
+    updateContentData(val);
+    setConsoleContent(consoleContentData[val]);
+  };
+
+  const prev = () => {
+    const val = currentStep - 1;
+    setCurrentStep(val);
+    updateContentData(val);
+    setConsoleContent(consoleContentData[val]);
+  };
+
+  const handleCancel = () => {
+    setIsOpen(false);
+  };
+
+  return (
+    <Modal
+      open={isOpen}
+      width={"70%"}
+      onCancel={handleCancel}
+      maskClosable={false}
+    >
+      <h1 style={{ color: "#e67e22", fontWeight: "bold" }}>
+        Produktionstask 1
+      </h1>
+      <p>
+        <span style={{ fontWeight: "bold" }}>Started at:</span> 19.01.2023 -
+        11:14:30
+      </p>
+      <Steps
+        direction="vertical"
+        current={currentStep}
+        items={[
+          {
+            title: "Bild zu Label konvertieren",
+            description: currentStep === 0 ? content : null,
+            onClick: (value) => console.log(value),
+            status: "error",
+          },
+          {
+            title: "Label drucken",
+            description: currentStep === 1 ? content : null,
+          },
+          {
+            title: "Waiting",
+            description: currentStep === 2 ? content : null,
+          },
+        ]}
+      />
+      <div style={{ marginTop: 24 }}>
+        {currentStep < steps.length - 1 && (
+          <Button type="primary" onClick={() => next()}>
+            Next
+          </Button>
+        )}
+        {currentStep === steps.length - 1 && (
+          <Button
+            type="primary"
+            onClick={() => message.success("Processing complete!")}
+          >
+            Done
+          </Button>
+        )}
+        {currentStep > 0 && (
+          <Button style={{ margin: "0 8px" }} onClick={() => prev()}>
+            Previous
+          </Button>
+        )}
+      </div>
+      <Divider />
+      <Alert
+        message={<b>{consoleContent.status}</b>}
+        description={consoleContent.description}
+        type={consoleContent.status}
+        showIcon
+      />
+    </Modal>
+  );
+}

src/Pages/GroupTasks/TaskTypeSelectionModal.js

@@ -0,0 +1,105 @@
+import {
+  Button,
+  Divider,
+  Form,
+  Input,
+  InputNumber,
+  Modal,
+  Select,
+  Space,
+} from "antd";
+import { useState } from "react";
+
+export default function TaskTypeSelectionModal({
+  isOpen,
+  setIsOpen,
+  setIsGroupTaskModalOpen,
+}) {
+  const [currentSelectedModalTaskType, setCurrentSelectedModalTaskType] =
+    useState(null);
+
+  const handleCancel = () => {
+    setIsOpen(false);
+  };
+
+  const GroupTaskGlobalInputs = ({ taskType }) => {
+    if (taskType === "produktionstask1") {
+      return (
+        <>
+          <Divider />
+          <h3 style={{ fontWeight: "bold" }}>
+            Fill in the global values for the task
+          </h3>
+          <Form layout="vertical">
+            <Form.Item label="Irgendwas tolles" required>
+              <Input />
+            </Form.Item>
+            <Form.Item label="Nummer der Kiste" required>
+              <InputNumber defaultValue={0} style={{ width: "100%" }} />
+            </Form.Item>
+          </Form>
+        </>
+      );
+    } else if (taskType === "printer") {
+      return (
+        <>
+          <Divider />
+          <h3 style={{ fontWeight: "bold" }}>
+            Fill in the global values for the task
+          </h3>
+          <Form layout="vertical">
+            <Form.Item label="Produktname" required>
+              <Input />
+            </Form.Item>
+          </Form>
+        </>
+      );
+    }
+
+    return <h1>{taskType}</h1>;
+  };
+
+  return (
+    <Modal
+      title="Select a task type"
+      open={isOpen}
+      onCancel={handleCancel}
+      centered
+      footer={[
+        <Space key={0}>
+          <Button key="back" onClick={handleCancel}>
+            Cancel
+          </Button>
+
+          <Button
+            key="submit"
+            type="primary"
+            disabled={currentSelectedModalTaskType === null}
+            onClick={() => {
+              setIsOpen(false);
+              setIsGroupTaskModalOpen(true);
+            }}
+          >
+            Start task
+          </Button>
+        </Space>,
+      ]}
+    >
+      <Select
+        placeholder="Choose a task"
+        style={{ width: "100%" }}
+        onChange={(value) => setCurrentSelectedModalTaskType(value)}
+      >
+        <Select.Option value="acrylglas">
+          Acryl Glas gravierung starten
+        </Select.Option>
+        <Select.Option value="printer">Label drucken</Select.Option>
+        <Select.Option value="produktionstask1">
+          Produktionstask 1
+        </Select.Option>
+      </Select>
+
+      <GroupTaskGlobalInputs taskType={currentSelectedModalTaskType} />
+    </Modal>
+  );
+}

src/Pages/GroupTasks/index.js

@@ -1,18 +1,9 @@
 import { PlusOutlined } from "@ant-design/icons";
-import {
-  Badge,
-  Button,
-  Divider,
-  Form,
-  Input,
-  InputNumber,
-  Modal,
-  Select,
-  Space,
-  Table,
-} from "antd";
+import { Badge, Button, Divider, Space, Table } from "antd";
 import { useState } from "react";
 import { Link } from "react-router-dom";
+import GroupTaskModal from "./GroupTaskModal";
+import TaskTypeSelectionModal from "./TaskTypeSelectionModal";
 
 const columns = [
   {
@@ -46,7 +37,7 @@ const columns = [
     key: "action",
     render: () => (
       <Space size="middle">
-        <Link to="/group-tasks/test">View</Link>
+        <Link>View</Link>
       </Space>
     ),
   },
@@ -72,116 +63,45 @@ const data = [
 ];
 
 export default function GroupTasks() {
-  const [isModalTaskTypeOpen, setIsModalTaskTypeOpen] = useState(false);
-  const [currentSelectedModalTaskType, setCurrentSelectedModalTaskType] =
-    useState(null);
+  const [isTaskTypeModalOpen, setIsTaskTypeModalOpen] = useState(false);
+  const [isGroupTaskModalOpen, setIsGroupTaskModalOpen] = useState(false);
 
   const showModal = (test) => {
     console.log(test);
-    setIsModalTaskTypeOpen(true);
-  };
-
-  const handleCancel = () => {
-    setIsModalTaskTypeOpen(false);
-  };
-
-  const GroupTaskGlobalInputs = ({ taskType }) => {
-    if (taskType === "produktionstask1") {
-      return (
-        <>
-          <Divider />
-          <h3 style={{ fontWeight: "bold" }}>
-            Fill in the global values for the task
-          </h3>
-          <Form layout="vertical">
-            <Form.Item label="Irgendwas tolles" required>
-              <Input />
-            </Form.Item>
-            <Form.Item label="Nummer der Kiste" required>
-              <InputNumber defaultValue={0} style={{ width: "100%" }} />
-            </Form.Item>
-          </Form>
-        </>
-      );
-    } else if (taskType === "printer") {
-      return (
-        <>
-          <Divider />
-          <h3 style={{ fontWeight: "bold" }}>
-            Fill in the global values for the task
-          </h3>
-          <Form layout="vertical">
-            <Form.Item label="Produktname" required>
-              <Input />
-            </Form.Item>
-          </Form>
-        </>
-      );
-    }
-
-    return <h1>{taskType}</h1>;
+    setIsTaskTypeModalOpen(true);
   };
 
   return (
     <>
       <h1 style={{ fontWeight: "bold" }}>GROUP TASKS</h1>
 
-      <GroupTask category="Janex Device Acryl Led Lamp" showModal={showModal} />
-      <GroupTask
+      <GroupTaskList
+        category="Janex Device Acryl Led Lamp"
+        showModal={showModal}
+      />
+      <GroupTaskList
         category="Janex Werkzeug"
         dataSource={false}
         showModal={showModal}
       />
-      <GroupTask category="Roese" showModal={showModal} />
-      <GroupTask category="Umbach" showModal={showModal} />
+      <GroupTaskList category="Roese" showModal={showModal} />
+      <GroupTaskList category="Umbach" showModal={showModal} />
 
-      <Modal
-        title="Select a task type"
-        open={isModalTaskTypeOpen}
-        onCancel={handleCancel}
-        maskClosable={false}
-        centered
-        footer={[
-          <Space key={0}>
-            <Button key="back" onClick={handleCancel}>
-              Cancel
-            </Button>
-            <Link key={0} to="/group-tasks/test">
-              <Button
-                key="submit"
-                type="primary"
-                disabled={currentSelectedModalTaskType === null}
-                onClick={() => {
-                  setIsModalTaskTypeOpen(false);
-                }}
-              >
-                Start task
-              </Button>
-            </Link>
-          </Space>,
-        ]}
-      >
-        <Select
-          placeholder="Choose a task"
-          style={{ width: "100%" }}
-          onChange={(value) => setCurrentSelectedModalTaskType(value)}
-        >
-          <Select.Option value="acrylglas">
-            Acryl Glas gravierung starten
-          </Select.Option>
-          <Select.Option value="printer">Label drucken</Select.Option>
-          <Select.Option value="produktionstask1">
-            Produktionstask 1
-          </Select.Option>
-        </Select>
+      <TaskTypeSelectionModal
+        isOpen={isTaskTypeModalOpen}
+        setIsOpen={setIsTaskTypeModalOpen}
+        setIsGroupTaskModalOpen={setIsGroupTaskModalOpen}
+      />
 
-        <GroupTaskGlobalInputs taskType={currentSelectedModalTaskType} />
-      </Modal>
+      <GroupTaskModal
+        isOpen={isGroupTaskModalOpen}
+        setIsOpen={setIsGroupTaskModalOpen}
+      />
     </>
   );
 }
 
-function GroupTask({ category, dataSource, showModal }) {
+function GroupTaskList({ category, dataSource, showModal }) {
   return (
     <>
       <Divider orientation="left">{category}</Divider>