129 lines
3.3 KiB
JavaScript
129 lines
3.3 KiB
JavaScript
import * as React from 'react';
|
|
import Grid from '@mui/material/Grid';
|
|
import { Container, Dialog, Typography, IconButton, Tooltip } from '@mui/material';
|
|
import MUIDataTable from "mui-datatables";
|
|
import { useAxios } from './axios';
|
|
import { useMutation, useQuery, useQueryClient } from 'react-query';
|
|
import ContactDialog from './ContactDialog';
|
|
import AddIcon from '@mui/icons-material/Add';
|
|
|
|
function App() {
|
|
const client = useAxios();
|
|
const queryClient = useQueryClient()
|
|
const [open, setOpen] = React.useState(false);
|
|
const [openedContact, setOpenedContact] = React.useState({});
|
|
const { data, status } = useQuery('contacts', async () => {
|
|
const {data} = await client.get('/api/contacts');
|
|
return data.map(({
|
|
uid,
|
|
first_name,
|
|
last_name,
|
|
middle_name,
|
|
telephone,
|
|
street,
|
|
build,
|
|
build_k,
|
|
apartment
|
|
}) => {
|
|
return {
|
|
'first_name': first_name,
|
|
'last_name': last_name,
|
|
'middle_name': middle_name,
|
|
'telephone': telephone,
|
|
'street': street,
|
|
'build': build,
|
|
'build_k': build_k,
|
|
'apartment': apartment,
|
|
'display_name': `${first_name} ${last_name} ${middle_name}`,
|
|
'display_address': `${street} ${build} ${build_k} ${apartment}`,
|
|
'uid': uid
|
|
};
|
|
})
|
|
});
|
|
const columns = [
|
|
{
|
|
name: "uid", label: "ID", options: {
|
|
display: false
|
|
}
|
|
},
|
|
{
|
|
name: "display_name", label: "Имя"
|
|
},
|
|
{
|
|
name: "telephone", label: "Телефон"
|
|
},
|
|
{
|
|
name: "display_address", label: "Адрес"
|
|
},
|
|
];
|
|
|
|
const commitDelete = useMutation(async (uid) => {
|
|
await client.delete(`/api/contacts/${uid}`);
|
|
}, {
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries('contacts');
|
|
}
|
|
});
|
|
|
|
const handleRowClick = (rowData) => {
|
|
setOpenedContact(data.find(({uid}) => uid === rowData[0]));
|
|
setOpen(true);
|
|
console.log(data.find(({uid}) => uid === rowData[0]));
|
|
};
|
|
|
|
const handleRowsDelete = (rowsDeleted) => {
|
|
const uids = rowsDeleted.data.map(({dataIndex}) => data[dataIndex]['uid']);
|
|
for (const uid of uids) {
|
|
commitDelete.mutate(uid);
|
|
}
|
|
};
|
|
|
|
const handleClose = () => {
|
|
setOpen(false);
|
|
};
|
|
|
|
if (data === undefined || status === 'loading') {
|
|
return <div>Loading...</div>
|
|
}
|
|
return (
|
|
<Container maxWidth="md">
|
|
<MUIDataTable
|
|
title={"Контактная книга"}
|
|
data={data}
|
|
columns={columns}
|
|
options={{
|
|
filterType: "textField",
|
|
print: false,
|
|
rowsPerPage: 10,
|
|
rowsPerPageOptions: [10, 20, 50, 100],
|
|
onRowClick: handleRowClick,
|
|
customToolbar: () => {
|
|
return <CustomToolbar />
|
|
},
|
|
onRowsDelete: handleRowsDelete
|
|
}}
|
|
/>
|
|
<ContactDialog
|
|
open={open}
|
|
onClose={handleClose}
|
|
contact={openedContact}
|
|
/>
|
|
</Container>
|
|
);
|
|
|
|
function CustomToolbar() {
|
|
if (data !== undefined) return (
|
|
<Tooltip title='Новый контакт'>
|
|
<IconButton onClick={() => {
|
|
setOpenedContact({});
|
|
setOpen(true);
|
|
}}>
|
|
<AddIcon />
|
|
</IconButton>
|
|
</Tooltip>
|
|
)
|
|
return (<></>)
|
|
}
|
|
}
|
|
export default App;
|