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

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

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

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

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