108 lines
3.0 KiB
TypeScript
108 lines
3.0 KiB
TypeScript
import React from 'react';
|
|
import axios from 'axios';
|
|
import { CustomerClient, CustomerListItem } from '../../APIClient';
|
|
import { Layout } from '../shared/Layout';
|
|
import Swal from 'sweetalert2';
|
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
import { faTrash } from '@fortawesome/free-solid-svg-icons';
|
|
|
|
const DeleteCustomerButton: React.FunctionComponent<{
|
|
customerID: string,
|
|
onDelete: (val) => void
|
|
|
|
}> = ({ customerID, onDelete }) => {
|
|
const onClickDelete = async () => {
|
|
const result = await Swal.fire({
|
|
title: 'Confirm delete?',
|
|
text: 'Delete customer?',
|
|
icon: 'warning',
|
|
showCancelButton: true,
|
|
})
|
|
if (result.isConfirmed) {
|
|
onDelete(customerID);
|
|
}
|
|
}
|
|
return (
|
|
<button className="btn btn-danger btn-sm" onClick={onClickDelete}>
|
|
<FontAwesomeIcon icon={faTrash} />
|
|
</button>
|
|
);
|
|
}
|
|
const CustomerListItemRows: React.FunctionComponent<{
|
|
customers: CustomerListItem[],
|
|
onDelete: (val) => void,
|
|
}> = ({ customers, onDelete }) => {
|
|
let rows = customers.map(x => {
|
|
return (
|
|
<tr>
|
|
<td>{x.customerID}</td>
|
|
<td>{x.name}</td>
|
|
<td>{x.email}</td>
|
|
<td><DeleteCustomerButton customerID={x.customerID} onDelete={onDelete}></DeleteCustomerButton></td>
|
|
</tr>
|
|
);
|
|
})
|
|
return (
|
|
<tbody>
|
|
{rows}
|
|
</tbody>
|
|
)
|
|
}
|
|
class Customer extends React.Component<{}, { customer: CustomerListItem[] }> {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
customer: [],
|
|
}
|
|
}
|
|
async componentDidMount() {
|
|
this.getCustomers();
|
|
}
|
|
async getCustomers() {
|
|
try {
|
|
const client = new CustomerClient();
|
|
let data = await client.getAll();
|
|
console.log(data);
|
|
this.setState({
|
|
customer: data
|
|
});
|
|
} catch (error) {
|
|
this.setState({
|
|
customer: [],
|
|
});
|
|
}
|
|
}
|
|
async deleteCustomer(customerId) {
|
|
try {
|
|
const client = new CustomerClient();
|
|
await client.delete(customerId);
|
|
let customer = this.state.customer.filter(x => x.customerID != customerId);
|
|
this.setState({
|
|
customer
|
|
})
|
|
} catch (error) {
|
|
alert(error);
|
|
}
|
|
}
|
|
render() {
|
|
return (
|
|
<table className="table table-hover table-striped table-sm">
|
|
<tr>
|
|
<th>ID</th>
|
|
<th>Name</th>
|
|
<th>Email</th>
|
|
</tr>
|
|
<CustomerListItemRows customers={this.state.customer} onDelete={this.deleteCustomer.bind(this)}>
|
|
</CustomerListItemRows>
|
|
</table>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default function CustomerPage() {
|
|
return (
|
|
<Layout title="Customers">
|
|
<Customer></Customer>
|
|
</Layout>
|
|
)
|
|
} |