131 lines
3.0 KiB
JavaScript
131 lines
3.0 KiB
JavaScript
import { PlusOutlined, ReloadOutlined } from "@ant-design/icons";
|
|
import { Badge, Button, Divider, Popconfirm, Space, Table } from "antd";
|
|
import { Link } from "react-router-dom";
|
|
import { FormatDatetime } from "../../utils";
|
|
|
|
const columns = [
|
|
{
|
|
title: "ID",
|
|
dataIndex: "id",
|
|
key: "id",
|
|
},
|
|
{
|
|
title: "Group Name",
|
|
dataIndex: "groupName",
|
|
key: "groupName",
|
|
},
|
|
{
|
|
title: "Step",
|
|
dataIndex: "step",
|
|
key: "step",
|
|
},
|
|
{
|
|
title: "Status",
|
|
dataIndex: "status",
|
|
key: "status",
|
|
},
|
|
{
|
|
title: "Started At",
|
|
dataIndex: "startedAt",
|
|
key: "startedAt",
|
|
},
|
|
{
|
|
title: "Action",
|
|
dataIndex: "action",
|
|
key: "action",
|
|
render: (_, record) => (
|
|
<Space size="middle">
|
|
<Link to={record.id}>View</Link>
|
|
</Space>
|
|
),
|
|
},
|
|
];
|
|
/*
|
|
const data = [
|
|
{
|
|
key: "1",
|
|
id: "12312",
|
|
groupname: "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",
|
|
groupname: "Acryl Glas schneiden",
|
|
step: "3 / 6",
|
|
status: <Badge status="error" text="Failed" />,
|
|
datetime: "2020-01-01 12:00:00",
|
|
},
|
|
]; */
|
|
|
|
export default function GroupTaskTableList({
|
|
categoryGroup,
|
|
showGroupTypeSelectionModal,
|
|
groupTasks,
|
|
}) {
|
|
const getStatusBadge = (status) => {
|
|
switch (status) {
|
|
case 0:
|
|
return <Badge status="success" text="Finished" />;
|
|
case 1:
|
|
return <Badge status="processing" text="Processing" />;
|
|
case 2:
|
|
return <Badge status="warning" text="Canceled" />;
|
|
case 3:
|
|
return <Badge status="error" text="Failed" />;
|
|
default:
|
|
return <Badge status="error" text="Status not found" />;
|
|
}
|
|
};
|
|
|
|
const getTableItems = () => {
|
|
let items = [];
|
|
|
|
groupTasks.forEach((groupTask) => {
|
|
if (groupTask.Category === categoryGroup.category) {
|
|
items.push({
|
|
key: groupTask.Id,
|
|
id: groupTask.Id,
|
|
groupName: groupTask.GroupName,
|
|
step: `${groupTask.CurrentTasksStep} / ${groupTask.NumberOfSteps}`,
|
|
status: getStatusBadge(groupTask.Status),
|
|
startedAt: FormatDatetime(groupTask.StartedAt),
|
|
});
|
|
}
|
|
});
|
|
|
|
return items;
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Divider orientation="left">{categoryGroup.category}</Divider>
|
|
<Space
|
|
style={{
|
|
marginBottom: 16,
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
}}
|
|
>
|
|
<Button
|
|
type="primary"
|
|
icon={<PlusOutlined />}
|
|
onClick={() => showGroupTypeSelectionModal(categoryGroup)}
|
|
>
|
|
New task
|
|
</Button>
|
|
<Popconfirm
|
|
placement="left"
|
|
title="Are you sure you want to reload the group?"
|
|
okText="Yes"
|
|
>
|
|
<Button icon={<ReloadOutlined />}>Reload</Button>
|
|
</Popconfirm>
|
|
</Space>
|
|
<Table columns={columns} dataSource={getTableItems()} />
|
|
</>
|
|
);
|
|
}
|