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

Enhance handling of associated pgroups in Contacts and Address views.

Browse Source 
Ensure `associatedPgroups` defaults to an empty array to avoid undefined behavior. Add non-editable pgroups input fields for new items and improve conditional rendering of pgroup chips in both views. Minor structural updates for consistency and clarity.
This commit is contained in:
GotthardG 2025-01-22 16:44:03 +01:00
parent 382b1eaba8
commit 4a1852882a
2 changed files with 62 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -49,6 +49,7 @@ const AddressManager: React.FC<AddressManagerProps> = ({ pgroups, activePgroup }
const [countrySuggestions, setCountrySuggestions] = React.useState<string[]>([]);
const [addresses, setAddresses] = React.useState<Address[]>([]);
const [newAddress, setNewAddress] = React.useState<Partial<Address>>({
pgroups: activePgroup,
house_number: '',
street: '',
city: '',
@ -80,13 +81,13 @@ const AddressManager: React.FC<AddressManagerProps> = ({ pgroups, activePgroup }
try {
const response = await AddressesService.getAllAddressesProtectedAddressesAllGet();
// Preprocess: Add associated and unassociated pgroups
// Preprocess: Add associated pgroups with a default value if not available
const transformedAddresses = response.map((address) => {
const addressPgroups = address.pgroups?.split(',').map((p) => p.trim()) || [];
const associatedPgroups = pgroups.filter((pgroup) => addressPgroups.includes(pgroup));
return {
...address,
associatedPgroups, // pgroups linked to the address
associatedPgroups: associatedPgroups || [], // Ensure it's always an array
};
});
@ -240,7 +241,7 @@ const AddressManager: React.FC<AddressManagerProps> = ({ pgroups, activePgroup }
<TextField
label="pgroup"
name="pgroup"
value={newAddress.activePgroup || ''}
value={newAddress.pgroups || ''}
disabled
sx={{ width: '120px' }} // Small fixed-size for non-editable field
/>
@ -343,7 +344,9 @@ const AddressManager: React.FC<AddressManagerProps> = ({ pgroups, activePgroup }
primary={`${address.house_number}, ${address.street}, ${address.city}`}
secondary={
<Box display="flex" flexWrap="wrap">
{renderPgroupChips(address)}
{address.associatedPgroups
? renderPgroupChips(address) // Render chips if associatedPgroups is available
: null}
</Box>
}
/>

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

@ -37,6 +37,7 @@ interface ContactWithPgroups extends Contact {
const ContactsManager: React.FC<ContactsManagerProps> = ({ pgroups, activePgroup }) => {
const [contacts, setContacts] = React.useState<ContactWithPgroups[]>([]);
const [newContact, setNewContact] = React.useState<Partial<Contact>>({
pgroups: activePgroup,
firstname: '',
lastname: '',
phone_number: '',
@ -58,7 +59,7 @@ const ContactsManager: React.FC<ContactsManagerProps> = ({ pgroups, activePgroup
const associatedPgroups = pgroups.filter((pgroup) => contactPgroups.includes(pgroup));
return {
...contact,
associatedPgroups, // pgroups linked to the contact
associatedPgroups: associatedPgroups || [], // Ensure associatedPgroups is always an array
};
});
@ -168,7 +169,7 @@ const ContactsManager: React.FC<ContactsManagerProps> = ({ pgroups, activePgroup
const renderPgroupChips = (contact: ContactWithPgroups) => {
return pgroups.map((pgroup) => {
const isAssociated = contact.associatedPgroups.includes(pgroup);
const isAssociated = (contact.associatedPgroups ?? []).includes(pgroup); // Ensure default empty array
return (
<Chip
key={pgroup}
@ -202,6 +203,13 @@ const ContactsManager: React.FC<ContactsManagerProps> = ({ pgroups, activePgroup
Contacts Management
</Typography>
<Box mb={3} display="flex" justifyContent="center" alignItems="center">
<TextField
label="pgroup"
name="pgroup"
value={newContact.pgroups || ''}
disabled
sx={{ width: '120px' }} // Small fixed-size for non-editable field
/>
<TextField
label="First Name"
name="firstname"
@ -239,7 +247,9 @@ const ContactsManager: React.FC<ContactsManagerProps> = ({ pgroups, activePgroup
primary={`${contact.firstname} ${contact.lastname}`}
secondary={
<Box display="flex" flexWrap="wrap">
{renderPgroupChips(contact)}
{contact.associatedPgroups
? renderPgroupChips(contact) // Render chips only if associatedPgroups exists
: null}
</Box>
}
/>