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.
72 lines
2.4 KiB
72 lines
2.4 KiB
import React, { useState, useEffect } from "react"; |
|
import { Select, Tag, Space, List, Typography, Row, Col } from "antd"; |
|
import { useHistory } from "react-router"; |
|
|
|
import ClientService from "../service/ClientService"; |
|
import StatusTimeline from "../components/StatusTimeline"; |
|
|
|
export default function ClientPage({ id }) { |
|
const [client, setClient] = useState({}); |
|
const history = useHistory(); |
|
|
|
useEffect(() => { |
|
ClientService.getClientById(id).then((client) => { |
|
console.log(client); |
|
setClient(client); |
|
}); |
|
}, []); |
|
|
|
const updateStatus = (value) => { |
|
ClientService.updateStatus(client.id, value).then(() => { |
|
setClient({ ...client, status: value }); |
|
history.go(0); |
|
}); |
|
}; |
|
|
|
return ( |
|
<> |
|
<Space direction="vertical" size="large"> |
|
<Typography.Title level={4}>Client Info</Typography.Title> |
|
<Row gutter={16}> |
|
<Col> |
|
<List bordered split="true"> |
|
<List.Item actions={[client.name]}>Name:</List.Item> |
|
<List.Item actions={[client.id]}>Identifier:</List.Item> |
|
<List.Item |
|
actions={[ |
|
(() => ( |
|
<Select value={client.status} onSelect={updateStatus}> |
|
<Select.Option value="potential"> |
|
<Tag color="default">Potential</Tag> |
|
</Select.Option> |
|
<Select.Option value="active"> |
|
<Tag color="success">Active</Tag> |
|
</Select.Option> |
|
<Select.Option value="on_hold"> |
|
<Tag color="purple">On Hold</Tag> |
|
</Select.Option> |
|
<Select.Option value="inactive"> |
|
<Tag color="error">Inactive</Tag> |
|
</Select.Option> |
|
</Select> |
|
))(), |
|
]} |
|
> |
|
Status: |
|
</List.Item> |
|
<List.Item actions={[client.email]}>Email:</List.Item> |
|
<List.Item actions={[client.address]}>Address:</List.Item> |
|
<List.Item actions={[client.telephone]}>Telephone:</List.Item> |
|
</List> |
|
</Col> |
|
</Row> |
|
<Row> |
|
<Col span={24}> |
|
{client.events ? <StatusTimeline events={client.events} /> : <></>} |
|
</Col> |
|
<Col span={8}></Col> |
|
</Row> |
|
</Space> |
|
</> |
|
); |
|
}
|
|
|