gotthard_g/aaredb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added contacts and addresses manager

Browse Source
This commit is contained in:
GotthardG 2024-11-04 21:45:34 +01:00
parent 275f4be0c1
commit 73076e573e
3 changed files with 84 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
backend/test.db
View File

Binary file not shown.

45
frontend/src/pages/AddressManagerView.tsx
View File

@ -1,7 +1,7 @@
import * as React from 'react';
import axios from 'axios';
import {
Container, Typography, List, ListItem, IconButton, TextField, Box, ListItemText, ListItemSecondaryAction
Container, Typography, List, ListItem, IconButton, TextField, Box, ListItemText, ListItemSecondaryAction, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, Button
} from '@mui/material';
import DeleteIcon from '@mui/icons-material/Delete';
import EditIcon from '@mui/icons-material/Edit';
@ -19,7 +19,6 @@ interface Address {
const AddressManager: React.FC = () => {
const [addresses, setAddresses] = React.useState<Address[]>([]);
const [newAddress, setNewAddress] = React.useState<Partial<Address>>({
id: 0,
street: '',
city: '',
zipcode: '',
@ -27,6 +26,8 @@ const AddressManager: React.FC = () => {
});
const [editAddressId, setEditAddressId] = React.useState<number | null>(null);
const [errorMessage, setErrorMessage] = React.useState<string | null>(null);
const [dialogOpen, setDialogOpen] = React.useState(false);
const [selectedAddress, setSelectedAddress] = React.useState<Address | null>(null);
React.useEffect(() => {
const fetchAddresses = async () => {
@ -94,6 +95,23 @@ const AddressManager: React.FC = () => {
setNewAddress(address);
};
const openDialog = (address: Address) => {
setSelectedAddress(address);
setDialogOpen(true);
};
const closeDialog = () => {
setDialogOpen(false);
setSelectedAddress(null);
};
const confirmDelete = async () => {
if (selectedAddress) {
await handleDeleteAddress(selectedAddress.id);
closeDialog();
}
};
return (
<Container>
<Typography variant="h4" gutterBottom>
@ -121,7 +139,7 @@ const AddressManager: React.FC = () => {
<IconButton edge="end" color="primary" onClick={() => handleEditAddress(address)}>
<EditIcon />
</IconButton>
<IconButton edge="end" color="secondary" onClick={() => handleDeleteAddress(address.id)}>
<IconButton edge="end" color="secondary" onClick={() => openDialog(address)}>
<DeleteIcon />
</IconButton>
</ListItemSecondaryAction>
@ -131,6 +149,27 @@ const AddressManager: React.FC = () => {
<Typography>No addresses found</Typography>
)}
</List>
<Dialog
open={dialogOpen}
onClose={closeDialog}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogTitle id="alert-dialog-title">{"Confirm Delete"}</DialogTitle>
<DialogContent>
<DialogContentText id="alert-dialog-description">
Are you sure you want to delete this address?
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={closeDialog} color="primary">
Cancel
</Button>
<Button onClick={confirmDelete} color="secondary" autoFocus>
Delete
</Button>
</DialogActions>
</Dialog>
</Container>
);
};

45
frontend/src/pages/ContactsManagerView.tsx
View File

@ -1,7 +1,7 @@
import * as React from 'react';
import axios from 'axios';
import {
Container, Typography, List, ListItem, IconButton, TextField, Box, ListItemText, ListItemSecondaryAction
Container, Typography, List, ListItem, IconButton, TextField, Box, ListItemText, ListItemSecondaryAction, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, Button
} from '@mui/material';
import DeleteIcon from '@mui/icons-material/Delete';
import EditIcon from '@mui/icons-material/Edit';
@ -19,7 +19,6 @@ interface Contact {
const ContactsManager: React.FC = () => {
const [contacts, setContacts] = React.useState<Contact[]>([]);
const [newContact, setNewContact] = React.useState<Partial<Contact>>({
id: 0,
firstname: '',
lastname: '',
phone_number: '',
@ -27,6 +26,8 @@ const ContactsManager: React.FC = () => {
});
const [editContactId, setEditContactId] = React.useState<number | null>(null);
const [errorMessage, setErrorMessage] = React.useState<string | null>(null);
const [dialogOpen, setDialogOpen] = React.useState(false);
const [selectedContact, setSelectedContact] = React.useState<Contact | null>(null);
React.useEffect(() => {
const fetchContacts = async () => {
@ -94,6 +95,23 @@ const ContactsManager: React.FC = () => {
setNewContact(contact);
};
const openDialog = (contact: Contact) => {
setSelectedContact(contact);
setDialogOpen(true);
};
const closeDialog = () => {
setDialogOpen(false);
setSelectedContact(null);
};
const confirmDelete = async () => {
if (selectedContact) {
await handleDeleteContact(selectedContact.id);
closeDialog();
}
};
return (
<Container>
<Typography variant="h4" gutterBottom>
@ -121,7 +139,7 @@ const ContactsManager: React.FC = () => {
<IconButton edge="end" color="primary" onClick={() => handleEditContact(contact)}>
<EditIcon />
</IconButton>
<IconButton edge="end" color="secondary" onClick={() => handleDeleteContact(contact.id)}>
<IconButton edge="end" color="secondary" onClick={() => openDialog(contact)}>
<DeleteIcon />
</IconButton>
</ListItemSecondaryAction>
@ -131,6 +149,27 @@ const ContactsManager: React.FC = () => {
<Typography>No contacts found</Typography>
)}
</List>
<Dialog
open={dialogOpen}
onClose={closeDialog}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogTitle id="alert-dialog-title">{"Confirm Delete"}</DialogTitle>
<DialogContent>
<DialogContentText id="alert-dialog-description">
Are you sure you want to delete this contact?
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={closeDialog} color="primary">
Cancel
</Button>
<Button onClick={confirmDelete} color="secondary" autoFocus>
Delete
</Button>
</DialogActions>
</Dialog>
</Container>
);
};