From 4a1852882a873d1554fb0393e88ee7827de5ef4b Mon Sep 17 00:00:00 2001
From: GotthardG <51994228+GotthardG@users.noreply.github.com>
Date: Wed, 22 Jan 2025 16:44:03 +0100
Subject: [PATCH] Enhance handling of associated pgroups in Contacts and
 Address views.

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.
---
 frontend/src/pages/AddressManagerView.tsx  |  11 ++-
 frontend/src/pages/ContactsManagerView.tsx | 100 +++++++++++----------
 2 files changed, 62 insertions(+), 49 deletions(-)

diff --git a/frontend/src/pages/AddressManagerView.tsx b/frontend/src/pages/AddressManagerView.tsx
index e19ddd9..276c584 100644
--- a/frontend/src/pages/AddressManagerView.tsx
+++ b/frontend/src/pages/AddressManagerView.tsx
@@ -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>
                                 }
                             />
diff --git a/frontend/src/pages/ContactsManagerView.tsx b/frontend/src/pages/ContactsManagerView.tsx
index 7ecd54e..96be762 100644
--- a/frontend/src/pages/ContactsManagerView.tsx
+++ b/frontend/src/pages/ContactsManagerView.tsx
@@ -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,30 +169,30 @@ 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}
-          label={pgroup}
-          onClick={
-            !isAssociated
-              ? () => togglePgroupAssociation(contact.id, pgroup)
-              : undefined
-          }
-          sx={{
-            backgroundColor: isAssociated ? '#19d238' : '#b0b0b0',
-            color: 'white',
-            borderRadius: '8px',
-            fontWeight: 'bold',
-            height: '20px',
-            fontSize: '12px',
-            boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)',
-            cursor: isAssociated ? 'default' : 'pointer', // Disable pointer for associated chips
-            '&:hover': { opacity: isAssociated ? 1 : 0.8 }, // Disable hover effect for associated chips
-            mr: 1,
-            mb: 1,
-          }}
-        />
+          <Chip
+              key={pgroup}
+              label={pgroup}
+              onClick={
+                !isAssociated
+                    ? () => togglePgroupAssociation(contact.id, pgroup)
+                    : undefined
+              }
+              sx={{
+                backgroundColor: isAssociated ? '#19d238' : '#b0b0b0',
+                color: 'white',
+                borderRadius: '8px',
+                fontWeight: 'bold',
+                height: '20px',
+                fontSize: '12px',
+                boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)',
+                cursor: isAssociated ? 'default' : 'pointer', // Disable pointer for associated chips
+                '&:hover': { opacity: isAssociated ? 1 : 0.8 }, // Disable hover effect for associated chips
+                mr: 1,
+                mb: 1,
+              }}
+          />
       );
     });
   };
@@ -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"
@@ -233,28 +241,30 @@ const ContactsManager: React.FC<ContactsManagerProps> = ({ pgroups, activePgroup
       {errorMessage && <Typography color="error">{errorMessage}</Typography>}
       <List>
         {contacts.length > 0 ? (
-          contacts.map((contact) => (
-            <ListItem key={contact.id} button>
-              <ListItemText
-                primary={`${contact.firstname} ${contact.lastname}`}
-                secondary={
-                  <Box display="flex" flexWrap="wrap">
-                    {renderPgroupChips(contact)}
-                  </Box>
-                }
-              />
-              <ListItemSecondaryAction>
-                <IconButton edge="end" color="primary" onClick={() => handleEditContact(contact)}>
-                  <EditIcon />
-                </IconButton>
-                <IconButton edge="end" color="secondary" onClick={() => openDialog(contact)}>
-                  <DeleteIcon />
-                </IconButton>
-              </ListItemSecondaryAction>
-            </ListItem>
-          ))
+            contacts.map((contact) => (
+                <ListItem key={contact.id} button>
+                  <ListItemText
+                      primary={`${contact.firstname} ${contact.lastname}`}
+                      secondary={
+                        <Box display="flex" flexWrap="wrap">
+                          {contact.associatedPgroups
+                              ? renderPgroupChips(contact) // Render chips only if associatedPgroups exists
+                              : null}
+                        </Box>
+                      }
+                  />
+                  <ListItemSecondaryAction>
+                    <IconButton edge="end" color="primary" onClick={() => handleEditContact(contact)}>
+                      <EditIcon />
+                    </IconButton>
+                    <IconButton edge="end" color="secondary" onClick={() => openDialog(contact)}>
+                      <DeleteIcon />
+                    </IconButton>
+                  </ListItemSecondaryAction>
+                </ListItem>
+            ))
         ) : (
-          <Typography>No contacts found</Typography>
+            <Typography>No contacts found</Typography>
         )}
       </List>
       <Dialog