queue creation logic

frontend/app/src/components/queue/CreateQueueCard.tsx

@@ -0,0 +1,72 @@
+import React, { useContext } from "react";
+import {
+  CreateQueueRequest,
+  Queue,
+  useCreateQueueMutation,
+  useGetQueuesQuery,
+} from "../../slice/QueueApi";
+import "../styles.css";
+import { Button, Form, Input, Spin } from "antd";
+import Title from "antd/es/typography/Title";
+import tr from "../../config/translation";
+import { MessageContext } from "../../App";
+import { useNavigate } from "react-router-dom";
+import { PlusCircleOutlined } from "@ant-design/icons";
+
+const CreateQueueCard = (): JSX.Element => {
+  const messageApi = useContext(MessageContext);
+  const navigate = useNavigate();
+
+  const [form] = Form.useForm();
+  const [createQueue, { isLoading }] = useCreateQueueMutation();
+
+  const submit = (formData: CreateQueueRequest) => {
+    createQueue(formData)
+      .unwrap()
+      .then((data: Queue) => navigate(`/dashboard/queue/${data.id}`))
+      .then(() => messageApi.success(tr("Queue created")))
+      .catch(() => messageApi.error(tr("Failed to create queue")));
+  };
+
+  return (
+    <div className="card">
+      <Spin spinning={isLoading}>
+        <Title level={2}>{tr("New queue")}</Title>
+        <Form
+          form={form}
+          layout="vertical"
+          requiredMark={false}
+          onFinish={(formData: CreateQueueRequest) => submit(formData)}
+        >
+          <Form.Item
+            name={"name"}
+            label={tr("Name")}
+            rules={[
+              {
+                required: true,
+                message: tr("Please input queue name!"),
+              },
+            ]}
+          >
+            <Input />
+          </Form.Item>
+          <Form.Item
+            name={"description"}
+            label={tr("Description") + " " + tr("(optional)")}
+          >
+            <Input />
+          </Form.Item>
+          <Button
+            style={{ width: "100%" }}
+            icon={<PlusCircleOutlined />}
+            type="primary"
+            onClick={() => form.submit()}
+          >
+            {tr("Create")}
+          </Button>
+        </Form>
+      </Spin>
+    </div>
+  );
+};
+export default CreateQueueCard;