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

updated ContactsManagerView and AddressManagerView

Browse Source
This commit is contained in:
GotthardG 2024-12-03 23:14:29 +01:00
parent 0d1374ded7
commit b4f4e5a3d5
2 changed files with 44 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,4 @@
import * as React from 'react'; import React from 'react';
import axios from 'axios';
import { import {
Container, Typography, List, ListItem, IconButton, TextField, Box, ListItemText, ListItemSecondaryAction, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, Button Container, Typography, List, ListItem, IconButton, TextField, Box, ListItemText, ListItemSecondaryAction, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, Button
} from '@mui/material'; } from '@mui/material';
@ -7,14 +6,8 @@ import DeleteIcon from '@mui/icons-material/Delete';
import EditIcon from '@mui/icons-material/Edit'; import EditIcon from '@mui/icons-material/Edit';
import SaveIcon from '@mui/icons-material/Save'; import SaveIcon from '@mui/icons-material/Save';
import AddIcon from '@mui/icons-material/Add'; import AddIcon from '@mui/icons-material/Add';
import { AddressesService } from '../../openapi';
interface Address { import type { Address, AddressCreate, AddressUpdate } from '../models/Address';
id: number;
street: string;
city: string;
zipcode: string;
country: string;
}
const AddressManager: React.FC = () => { const AddressManager: React.FC = () => {
const [addresses, setAddresses] = React.useState<Address[]>([]); const [addresses, setAddresses] = React.useState<Address[]>([]);
@ -32,12 +25,8 @@ const AddressManager: React.FC = () => {
React.useEffect(() => { React.useEffect(() => {
const fetchAddresses = async () => { const fetchAddresses = async () => {
try { try {
const response = await axios.get('http://127.0.0.1:8000/addresses'); const response = await AddressesService.getReturnAddressesAddressesGet();
if (Array.isArray(response.data)) { setAddresses(response);
setAddresses(response.data);
} else {
setErrorMessage('Failed to load addresses. Expected an array of addresses.');
}
} catch (error) { } catch (error) {
console.error('Failed to fetch addresses', error); console.error('Failed to fetch addresses', error);
setErrorMessage('Failed to load addresses. Please try again later.'); setErrorMessage('Failed to load addresses. Please try again later.');
@ -53,37 +42,29 @@ const AddressManager: React.FC = () => {
}; };
const handleAddOrUpdateAddress = async () => { const handleAddOrUpdateAddress = async () => {
if (editAddressId !== null) { try {
// Update address if (editAddressId !== null) {
try { // Update address
await axios.put(`http://127.0.0.1:8000/addresses/${editAddressId}`, newAddress); await AddressesService.updateReturnAddressAddressesAddressIdPut(editAddressId, newAddress as AddressUpdate);
setAddresses(addresses.map(address => address.id === editAddressId ? { ...address, ...newAddress } : address)); setAddresses(addresses.map(address => address.id === editAddressId ? { ...address, ...newAddress } : address));
setEditAddressId(null); setEditAddressId(null);
setNewAddress({ street: '', city: '', zipcode: '', country: '' }); } else {
setErrorMessage(null); // Add new address
} catch (error) { const response = await AddressesService.createReturnAddressAddressesPost(newAddress as AddressCreate);
console.error('Failed to update address', error); setAddresses([...addresses, response]);
setErrorMessage('Failed to update address. Please try again later.');
}
} else {
// Add new address
try {
const response = await axios.post('http://127.0.0.1:8000/addresses', newAddress);
setAddresses([...addresses, response.data]);
setNewAddress({ street: '', city: '', zipcode: '', country: '' });
setErrorMessage(null);
} catch (error) {
console.error('Failed to add address', error);
setErrorMessage('Failed to add address. Please try again later.');
} }
setNewAddress({ street: '', city: '', zipcode: '', country: '' });
setErrorMessage(null);
} catch (error) {
console.error('Failed to add/update address', error);
setErrorMessage('Failed to add/update address. Please try again later.');
} }
}; };
const handleDeleteAddress = async (id: number) => { const handleDeleteAddress = async (id: number) => {
try { try {
await axios.delete(`http://127.0.0.1:8000/addresses/${id}`); await AddressesService.deleteReturnAddressAddressesAddressIdDelete(id);
setAddresses(addresses.filter(address => address.id !== id)); setAddresses(addresses.filter(address => address.id !== id));
setErrorMessage(null);
} catch (error) { } catch (error) {
console.error('Failed to delete address', error); console.error('Failed to delete address', error);
setErrorMessage('Failed to delete address. Please try again later.'); setErrorMessage('Failed to delete address. Please try again later.');
@ -117,7 +98,7 @@ const AddressManager: React.FC = () => {
<Typography variant="h4" gutterBottom> <Typography variant="h4" gutterBottom>
Addresses Management Addresses Management
</Typography> </Typography>
<Box mb={3} display="flex" justifyContent="center" alignItems="center"> <Box display="flex" justifyContent="center" alignItems="center" mb={3}>
<TextField label="Street" name="street" value={newAddress.street || ''} onChange={handleInputChange} /> <TextField label="Street" name="street" value={newAddress.street || ''} onChange={handleInputChange} />
<TextField label="City" name="city" value={newAddress.city || ''} onChange={handleInputChange} /> <TextField label="City" name="city" value={newAddress.city || ''} onChange={handleInputChange} />
<TextField label="Zipcode" name="zipcode" value={newAddress.zipcode || ''} onChange={handleInputChange} /> <TextField label="Zipcode" name="zipcode" value={newAddress.zipcode || ''} onChange={handleInputChange} />

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

@ -1,24 +1,17 @@
import * as React from 'react'; import * as React from 'react';
import axios from 'axios';
import { import {
Container, Typography, List, ListItem, IconButton, TextField, Box, ListItemText, ListItemSecondaryAction, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, Button Container, Typography, List, ListItem, IconButton, TextField, Box, ListItemText, ListItemSecondaryAction, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, Button
} from '@mui/material'; } from '@mui/material';
import DeleteIcon from '@mui/icons-material/Delete'; import DeleteIcon from '@mui/icons-material/Delete';
import EditIcon from '@mui/icons-material/Edit'; import EditIcon from '@mui/icons-material/Edit';
import SaveIcon from '@mui/icons-material/Save'; import SaveIcon from '@mui/icons-material/Save';
import AddIcon from '@mui/icons-material/Add'; import AddIcon from '@mui/icons-material/Add';
import { ContactsService } from '../../openapi';
interface Contact { import type { ContactPerson, ContactPersonCreate, ContactPersonUpdate } from '../models/ContactPerson';
id: number;
firstname: string;
lastname: string;
phone_number: string;
email: string;
}
const ContactsManager: React.FC = () => { const ContactsManager: React.FC = () => {
const [contacts, setContacts] = React.useState<Contact[]>([]); const [contacts, setContacts] = React.useState<ContactPerson[]>([]);
const [newContact, setNewContact] = React.useState<Partial<Contact>>({ const [newContact, setNewContact] = React.useState<Partial<ContactPerson>>({
firstname: '', firstname: '',
lastname: '', lastname: '',
phone_number: '', phone_number: '',
@ -27,17 +20,13 @@ const ContactsManager: React.FC = () => {
const [editContactId, setEditContactId] = React.useState<number | null>(null); const [editContactId, setEditContactId] = React.useState<number | null>(null);
const [errorMessage, setErrorMessage] = React.useState<string | null>(null); const [errorMessage, setErrorMessage] = React.useState<string | null>(null);
const [dialogOpen, setDialogOpen] = React.useState(false); const [dialogOpen, setDialogOpen] = React.useState(false);
const [selectedContact, setSelectedContact] = React.useState<Contact | null>(null); const [selectedContact, setSelectedContact] = React.useState<ContactPerson | null>(null);
React.useEffect(() => { React.useEffect(() => {
const fetchContacts = async () => { const fetchContacts = async () => {
try { try {
const response = await axios.get('http://127.0.0.1:8000/contacts'); const response = await ContactsService.getContactsContactsGet();
if (Array.isArray(response.data)) { setContacts(response);
setContacts(response.data);
} else {
setErrorMessage('Failed to load contacts. Expected an array of contacts.');
}
} catch (error) { } catch (error) {
console.error('Failed to fetch contacts', error); console.error('Failed to fetch contacts', error);
setErrorMessage('Failed to load contacts. Please try again later.'); setErrorMessage('Failed to load contacts. Please try again later.');
@ -53,49 +42,41 @@ const ContactsManager: React.FC = () => {
}; };
const handleAddOrUpdateContact = async () => { const handleAddOrUpdateContact = async () => {
if (editContactId !== null) { try {
// Update contact if (editContactId !== null) {
try { // Update contact
await axios.put(`http://127.0.0.1:8000/contacts/${editContactId}`, newContact); await ContactsService.updateContactContactsContactIdPut(editContactId, newContact as ContactPersonUpdate);
setContacts(contacts.map(contact => contact.id === editContactId ? { ...contact, ...newContact } : contact)); setContacts(contacts.map(contact => contact.id === editContactId ? { ...contact, ...newContact } : contact));
setEditContactId(null); setEditContactId(null);
setNewContact({ firstname: '', lastname: '', phone_number: '', email: '' }); } else {
setErrorMessage(null); // Add new contact
} catch (error) { const response = await ContactsService.createContactContactsPost(newContact as ContactPersonCreate);
console.error('Failed to update contact', error); setContacts([...contacts, response]);
setErrorMessage('Failed to update contact. Please try again later.');
}
} else {
// Add new contact
try {
const response = await axios.post('http://127.0.0.1:8000/contacts', newContact);
setContacts([...contacts, response.data]);
setNewContact({ firstname: '', lastname: '', phone_number: '', email: '' });
setErrorMessage(null);
} catch (error) {
console.error('Failed to add contact', error);
setErrorMessage('Failed to add contact. Please try again later.');
} }
setNewContact({ firstname: '', lastname: '', phone_number: '', email: '' });
setErrorMessage(null);
} catch (error) {
console.error('Failed to add/update contact', error);
setErrorMessage('Failed to add/update contact. Please try again later.');
} }
}; };
const handleDeleteContact = async (id: number) => { const handleDeleteContact = async (id: number) => {
try { try {
await axios.delete(`http://127.0.0.1:8000/contacts/${id}`); await ContactsService.deleteContactContactsContactIdDelete(id);
setContacts(contacts.filter(contact => contact.id !== id)); setContacts(contacts.filter(contact => contact.id !== id));
setErrorMessage(null);
} catch (error) { } catch (error) {
console.error('Failed to delete contact', error); console.error('Failed to delete contact', error);
setErrorMessage('Failed to delete contact. Please try again later.'); setErrorMessage('Failed to delete contact. Please try again later.');
} }
}; };
const handleEditContact = (contact: Contact) => { const handleEditContact = (contact: ContactPerson) => {
setEditContactId(contact.id); setEditContactId(contact.id);
setNewContact(contact); setNewContact(contact);
}; };
const openDialog = (contact: Contact) => { const openDialog = (contact: ContactPerson) => {
setSelectedContact(contact); setSelectedContact(contact);
setDialogOpen(true); setDialogOpen(true);
}; };