72 lines
2.0 KiB
TypeScript
72 lines
2.0 KiB
TypeScript
import React, { useContext } from "react";
|
|
import {
|
|
CreateQueueRequest,
|
|
Queue,
|
|
useCreateQueueMutation,
|
|
} 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;
|