You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
77 lines
1.9 KiB
77 lines
1.9 KiB
3 years ago
|
import React, { useState, useEffect } from "react";
|
||
|
import { Table, Button, Space } from "antd";
|
||
|
import { Link, useHistory } from "react-router-dom";
|
||
|
import { UserAddOutlined } from "@ant-design/icons";
|
||
|
import ClientService from "../service/ClientService";
|
||
|
|
||
|
export default function ClientsPage() {
|
||
|
const history = useHistory();
|
||
|
const [clients, setClients] = useState([]);
|
||
|
const [selectedClients, setSelectedClients] = useState([]);
|
||
|
const [actionsVisible, setActionsVisible] = useState(false);
|
||
|
|
||
|
useEffect(() => {
|
||
|
ClientService.getClients().then(setClients);
|
||
|
}, []);
|
||
|
|
||
|
const onSelectChange = (selectedRowKeys) => {
|
||
|
setSelectedClients(selectedRowKeys);
|
||
|
if (selectedRowKeys.length >= 1) {
|
||
|
setActionsVisible(true);
|
||
|
} else {
|
||
|
setActionsVisible(false);
|
||
|
}
|
||
|
};
|
||
|
|
||
|
const columns = [
|
||
|
{
|
||
|
title: "Name",
|
||
|
dataIndex: "id",
|
||
|
render: (id) => (
|
||
|
<Link to={"/clients/" + id}>
|
||
|
{
|
||
|
/* TODO: is there a simpler way? */
|
||
|
clients.filter((c) => c.id == id)[0].name
|
||
|
}
|
||
|
</Link>
|
||
|
),
|
||
|
},
|
||
|
];
|
||
|
|
||
|
return (
|
||
|
<div>
|
||
|
<Space direction="horizontal" style={{ marginBottom: 16 }}>
|
||
|
<Button
|
||
|
onClick={() => history.push("/clients/new")}
|
||
|
type="primary"
|
||
|
icon={<UserAddOutlined />}
|
||
|
>
|
||
|
Add
|
||
|
</Button>
|
||
|
<Button
|
||
|
type="primary"
|
||
|
danger
|
||
|
disabled={!actionsVisible}
|
||
|
onClick={() => {
|
||
|
ClientService.deleteMany(selectedClients).then(() =>
|
||
|
window.location.reload()
|
||
|
);
|
||
|
}}
|
||
|
>
|
||
|
Delete
|
||
|
</Button>
|
||
|
</Space>
|
||
|
<Table
|
||
|
rowSelection={{
|
||
|
type: "checkbox",
|
||
|
onChange: onSelectChange,
|
||
|
}}
|
||
|
columns={columns}
|
||
|
dataSource={clients.map((client) => {
|
||
|
return { ...client, key: client.id };
|
||
|
})}
|
||
|
/>
|
||
|
</div>
|
||
|
);
|
||
|
}
|