group tasks

src/App.css

@@ -1,7 +1,7 @@
 .App {
   display: flex;
   flex-direction: column;
-  width: 100vw;
+  width: 100%;
   height: 100vh;
 }
 
@@ -42,8 +42,8 @@
 
 /* PageContent */
 .PageContent {
-  padding-left: 12px;
+  padding: 12px;
-  padding-top: 12px;
+  width: 100%;
 }
 
 /* CameraScan */

src/Components/AppRoutes/index.js

@@ -1,10 +1,14 @@
 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>
   );
 }

src/Components/SideMenu/index.js

@@ -1,9 +1,4 @@
-import {
+import { AppstoreOutlined, SnippetsOutlined } from "@ant-design/icons";
-  AppstoreOutlined,
-  CameraOutlined,
-  ShoppingCartOutlined,
-  UserOutlined,
-} from "@ant-design/icons";
 import { Menu } from "antd";
 import { useEffect, useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
@@ -35,19 +30,9 @@ function SideMenu() {
             key: "/",
           },
           {
-            label: "Camera Scan",
+            label: "Group Tasks",
-            icon: <CameraOutlined />,
+            icon: <SnippetsOutlined />,
-            key: "/camera-scan",
+            key: "/group-tasks",
-          },
-          {
-            label: "Orders",
-            icon: <ShoppingCartOutlined />,
-            key: "/orders",
-          },
-          {
-            label: "Customers",
-            icon: <UserOutlined />,
-            key: "/customers",
           },
         ]}
       ></Menu>

src/Pages/GroupTask/index.js

@@ -0,0 +1,107 @@
+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/index.js

@@ -0,0 +1,203 @@
+import { PlusOutlined } from "@ant-design/icons";
+import {
+  Badge,
+  Button,
+  Divider,
+  Form,
+  Input,
+  InputNumber,
+  Modal,
+  Select,
+  Space,
+  Table,
+} from "antd";
+import { useState } from "react";
+import { Link } from "react-router-dom";
+
+const columns = [
+  {
+    title: "ID",
+    dataIndex: "id",
+    key: "id",
+  },
+  {
+    title: "Task Name",
+    dataIndex: "taskname",
+    key: "taskname",
+  },
+  {
+    title: "Step",
+    dataIndex: "step",
+    key: "step",
+  },
+  {
+    title: "Status",
+    dataIndex: "status",
+    key: "status",
+  },
+  {
+    title: "Datetime",
+    dataIndex: "datetime",
+    key: "datetime",
+  },
+  {
+    title: "Action",
+    dataIndex: "action",
+    key: "action",
+    render: () => (
+      <Space size="middle">
+        <Link to="/group-tasks/test">View</Link>
+      </Space>
+    ),
+  },
+];
+
+const data = [
+  {
+    key: "1",
+    id: "12312",
+    taskname: "Janex Device Acryl Led Lamp",
+    step: "6 / 6",
+    status: <Badge status="success" text="Finished" />,
+    datetime: "2020-01-01 12:00:00",
+  },
+  {
+    key: "2",
+    id: "9999",
+    taskname: "Acryl Glas schneiden",
+    step: "3 / 6",
+    status: <Badge status="error" text="Failed" />,
+    datetime: "2020-01-01 12:00:00",
+  },
+];
+
+export default function GroupTasks() {
+  const [isModalTaskTypeOpen, setIsModalTaskTypeOpen] = useState(false);
+  const [currentSelectedModalTaskType, setCurrentSelectedModalTaskType] =
+    useState(null);
+
+  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>;
+  };
+
+  return (
+    <>
+      <h1 style={{ fontWeight: "bold" }}>GROUP TASKS</h1>
+
+      <GroupTask category="Janex Device Acryl Led Lamp" showModal={showModal} />
+      <GroupTask
+        category="Janex Werkzeug"
+        dataSource={false}
+        showModal={showModal}
+      />
+      <GroupTask category="Roese" showModal={showModal} />
+      <GroupTask 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>
+
+        <GroupTaskGlobalInputs taskType={currentSelectedModalTaskType} />
+      </Modal>
+    </>
+  );
+}
+
+function GroupTask({ category, dataSource, showModal }) {
+  return (
+    <>
+      <Divider orientation="left">{category}</Divider>
+      <Space style={{ marginBottom: 16 }}>
+        <Button
+          type="primary"
+          icon={<PlusOutlined />}
+          onClick={() => showModal(true)}
+        >
+          New task
+        </Button>
+      </Space>
+      <Table
+        columns={columns}
+        dataSource={dataSource === false ? null : data}
+      />
+    </>
+  );
+}

src/index.css

@@ -1,8 +1,9 @@
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+  /*font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",sans-serif;*/
-    sans-serif;
+  font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
+
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }