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.
76 lines
1.9 KiB
76 lines
1.9 KiB
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> |
|
); |
|
}
|
|
|