Added web UI

exp_groups/web/components/AssignmentsTable.tsx

@@ -0,0 +1,65 @@
+import React, { useContext, useState } from "react";
+import { Table, Button, Popconfirm, Space } from "antd";
+import { EditOutlined, DeleteOutlined } from "@ant-design/icons";
+
+import { ControlContext, useAccount } from "@clusterio/web_ui";
+import * as messages from "../../messages";
+
+import AssignmentForm from "./AssignmentForm";
+
+const strcmp = new Intl.Collator(undefined, { numeric: true, sensitivity: "base" }).compare;
+
+export default function AssignmentsTable() {
+	const control = useContext(ControlContext);
+	const plugin = control.plugins.get("exp_groups") as any;
+	const account = useAccount();
+
+	const [assignments, synced] = plugin.useAssignments();
+	const [groups] = plugin.useGroups();
+
+	const [editing, setEditing] = useState<any>(null);
+	const [open, setOpen] = useState(false);
+
+	return <>
+		<Table
+			columns={[
+				{
+					title: "Player",
+					dataIndex: "name",
+					sorter: (a: any, b: any) => strcmp(a.name, b.name),
+				},
+				{
+					title: "Group",
+					render: (_: any, a: any) => groups.get(a.groupId)?.name ?? a.groupId,
+				},
+				{
+					title: "Actions",
+					render: (_: any, record: any) => (
+						<Space>
+							{account.hasPermission("exp_groups.assignment.update") &&
+								<Button icon={<EditOutlined />} onClick={() => {
+									setEditing(record);
+									setOpen(true);
+								}} />
+							}
+							{account.hasPermission("exp_groups.assignment.delete") &&
+								<Popconfirm
+									title="Delete?"
+									onConfirm={() => control.send(new messages.AssignmentDeleteRequest(record.name))}
+								>
+									<Button danger icon={<DeleteOutlined />} />
+								</Popconfirm>
+							}
+						</Space>
+					),
+				},
+			]}
+			dataSource={[...assignments.values()]}
+			loading={!synced}
+			pagination={false}
+			rowKey={(a) => a.name}
+		/>
+
+		<AssignmentForm open={open} setOpen={setOpen} initial={editing} />
+	</>;
+}