feature/deseng695: Made changes as per Alex, updated Who is Listening…

… form for better legibility.
bcgov · Oct 2, 2024 · bd97069 · bd97069
1 parent 34a7790
commit bd97069
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 58 deletions.
diff --git a/CHANGELOG.MD b/CHANGELOG.MD
@@ -7,6 +7,7 @@
 	- Adjusted CSS to accomodate multiple viewports
 	- Added ARIA labels for accessibility
 	- Updated contact create/edit form
+	- Updated Who is Listening widget form
 
 - **Feature** New Video Widget front end [🎟️ DESENG-692](https://citz-gdx.atlassian.net/browse/DESENG-692)
 	- Changed icon colour from yellow to white to accomodate company branding requests

diff --git a/met-web/src/components/engagement/form/EngagementWidgets/WhoIsListening/ContactInfoPaper.tsx b/met-web/src/components/engagement/form/EngagementWidgets/WhoIsListening/ContactInfoPaper.tsx
@@ -20,12 +20,21 @@ const ContactInfoPaper = ({ contact, removeContact, ...rest }: ContactInfoPaperP
     return (
         <MetWidgetPaper elevation={1} {...rest}>
             <Grid container direction="row" alignItems={'flex-start'} justifyContent="flex-start">
-                <Grid item xs={1}>
+                <Grid item xs={12} xl={0.5} sx={{ pb: '0.5rem' }}>
                     <IconButton sx={{ padding: 0, margin: 0 }} color="inherit" aria-label="drag-indicator">
                         <FontAwesomeIcon icon={faGripDotsVertical} style={{ fontSize: '24px', margin: '0px 4px' }} />
                     </IconButton>
                 </Grid>
-                <Grid item xs={3} container direction="row" alignItems={'flex-start'} justifyContent="flex-start">
+                <Grid
+                    item
+                    xs={12}
+                    xl={3.5}
+                    container
+                    direction="row"
+                    alignItems={'flex-start'}
+                    justifyContent="flex-start"
+                    sx={{ pb: '0.5rem' }}
+                >
                     <Grid item xs={12}>
                         <MetLabel noWrap={true}>{contact.name}</MetLabel>
                     </Grid>
@@ -39,35 +48,39 @@ const ContactInfoPaper = ({ contact, removeContact, ...rest }: ContactInfoPaperP
                 </Grid>
                 <Grid
                     item
-                    xs={6.5}
+                    xs={12}
+                    xl={6.25}
                     container
                     direction="row"
                     alignItems={'flex-start'}
                     justifyContent="flex-start"
                     spacing={1}
+                    sx={{ pb: '0.5rem' }}
                 >
                     <When condition={!!contact.phone_number}>
-                        <Grid item xs={3}>
+                        <Grid item xs={12} xl={2.5}>
                             <MetParagraphOld>Phone:</MetParagraphOld>
                         </Grid>
-                        <Grid item xs={9}>
+                        <Grid item xs={12} xl={9.5}>
                             <MetParagraphOld overflow="hidden" textOverflow={'ellipsis'} whiteSpace="nowrap">
                                 {contact.phone_number}
                             </MetParagraphOld>
                         </Grid>
                     </When>
 
-                    <Grid item xs={3}>
+                    <Grid item xs={12} xl={2.5}>
                         <MetParagraphOld>Email:</MetParagraphOld>
                     </Grid>
-                    <Grid item xs={9}>
-                        <MetParagraphOld>{contact.email}</MetParagraphOld>
+                    <Grid item xs={12} xl={9.5}>
+                        <MetParagraphOld style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>
+                            {contact.email}
+                        </MetParagraphOld>
                     </Grid>
                     <When condition={!!contact.address}>
-                        <Grid item xs={3}>
+                        <Grid item xs={12} xl={2.5}>
                             <MetParagraphOld>Address:</MetParagraphOld>
                         </Grid>
-                        <Grid item xs={9}>
+                        <Grid item xs={12} xl={9.5}>
                             <MetParagraphOld
                                 width={'100%'}
                                 overflow="hidden"
@@ -79,10 +92,10 @@ const ContactInfoPaper = ({ contact, removeContact, ...rest }: ContactInfoPaperP
                         </Grid>
                     </When>
                     <When condition={Boolean(contact.bio)}>
-                        <Grid item xs={3}>
+                        <Grid item xs={12} xl={2.5}>
                             <MetParagraphOld>Bio:</MetParagraphOld>
                         </Grid>
-                        <Grid item xs={9}>
+                        <Grid item xs={12} xl={9.5}>
                             <MetParagraphOld
                                 width={'100%'}
                                 overflow="hidden"
@@ -94,10 +107,10 @@ const ContactInfoPaper = ({ contact, removeContact, ...rest }: ContactInfoPaperP
                         </Grid>
                     </When>
                 </Grid>
-                <Grid container item xs={1.5}>
-                    <Grid item xs={6}>
+                <Grid container item xs={1.75} sx={{ ml: 'auto', flexWrap: 'nowrap' }}>
+                    <Grid item xs={6} sx={{ display: 'flex' }}>
                         <IconButton
-                            sx={{ padding: 1, margin: 0 }}
+                            sx={{ padding: 0, margin: 0, ml: 'auto' }}
                             onClick={() => {
                                 handleChangeContactToEdit(contact);
                                 handleAddContactDrawerOpen(true);
@@ -108,9 +121,9 @@ const ContactInfoPaper = ({ contact, removeContact, ...rest }: ContactInfoPaperP
                             <FontAwesomeIcon icon={faPen} style={{ fontSize: '22px' }} />
                         </IconButton>
                     </Grid>
-                    <Grid item xs={6}>
+                    <Grid item xs={6} sx={{ ml: 'auto', display: 'flex' }}>
                         <IconButton
-                            sx={{ padding: 1, margin: 0 }}
+                            sx={{ padding: 0, margin: 0, ml: 'auto' }}
                             onClick={() => removeContact(contact.id)}
                             color="inherit"
                             aria-label="delete-icon"

diff --git a/...src/components/engagement/form/EngagementWidgets/WhoIsListening/WhoIsListeningContext.tsx b/...src/components/engagement/form/EngagementWidgets/WhoIsListening/WhoIsListeningContext.tsx
@@ -68,33 +68,10 @@ export const WhoIsListeningProvider = ({ children }: { children: JSX.Element | J
     const [addedContacts, setAddedContacts] = useState<Contact[]>([]);
     const [loadingContacts, setLoadingContacts] = useState(true);
 
-    if (!widget) {
-        return (
-            <WhoIsListeningContext.Provider
-                value={{
-                    loadingContacts: false,
-                    contactToEdit: null,
-                    addContactDrawerOpen: false,
-                    handleAddContactDrawerOpen: (_open: boolean) => {
-                        /*empty*/
-                    },
-                    contacts: [],
-                    loadContacts: () => Promise.resolve([]),
-                    listeningWidget: emptyListeningWidget,
-                    setListeningWidget: (updatedListeningWidget: React.SetStateAction<ListeningWidget>) =>
-                        emptyListeningWidget,
-                    loadListeningWidget: () => Promise.resolve(emptyListeningWidget),
-                    handleChangeContactToEdit: () => {
-                        /*empty*/
-                    },
-                    setAddedContacts: (updatedContacts: React.SetStateAction<Contact[]>) => [],
-                    addedContacts: [],
-                }}
-            >
-                {children}
-            </WhoIsListeningContext.Provider>
-        );
-    }
+    useEffect(() => {
+        loadContacts();
+        loadListeningWidget();
+    }, [savedEngagement]);
 
     const loadContacts = async () => {
         try {
@@ -116,7 +93,7 @@ export const WhoIsListeningProvider = ({ children }: { children: JSX.Element | J
 
     const loadListeningWidget = async () => {
         try {
-            if (!savedEngagement.id) {
+            if (!savedEngagement.id || !widget?.id) {
                 return Promise.resolve(emptyListeningWidget);
             }
             const loadedListeningWidget = await fetchListeningWidget(widget.id);
@@ -133,11 +110,6 @@ export const WhoIsListeningProvider = ({ children }: { children: JSX.Element | J
         }
     };
 
-    useEffect(() => {
-        loadContacts();
-        loadListeningWidget();
-    }, [savedEngagement]);
-
     const handleChangeContactToEdit = (contact: Contact | null) => {
         setContactToEdit(contact);
     };

diff --git a/...eb/src/components/engagement/form/EngagementWidgets/WhoIsListening/WhoIsListeningForm.tsx b/...eb/src/components/engagement/form/EngagementWidgets/WhoIsListening/WhoIsListeningForm.tsx
@@ -120,7 +120,6 @@ const WhoIsListeningForm = () => {
                     onChange={(e) => {
                         setListeningWidget({ ...listeningWidget, description: e.target.value });
                     }}
-                    label=" "
                     aria-label="Description: optional."
                     InputLabelProps={{
                         shrink: false,
@@ -139,7 +138,6 @@ const WhoIsListeningForm = () => {
                         renderInput={(params) => (
                             <TextField
                                 {...params}
-                                label=" "
                                 aria-label="Select an existing contact."
                                 InputLabelProps={{
                                     shrink: false,

diff --git a/met-web/src/components/engagement/old-view/widgets/WhoIsListeningWidget.tsx b/met-web/src/components/engagement/old-view/widgets/WhoIsListeningWidget.tsx
@@ -199,15 +199,11 @@ const WhoIsListeningWidget = ({ widget }: WhoIsListeningWidgetProps) => {
                             xl={9}
                         >
                             <Grid justifyContent={{ xs: 'center', md: 'flex-start' }} item xs={12}>
-                                <BodyText sx={contactNameStyles} aria-label="Contact name:">
-                                    {contact.name}
-                                </BodyText>
+                                <BodyText sx={contactNameStyles}>{contact.name}</BodyText>
                             </Grid>
                             <When condition={Boolean(contact.title)}>
                                 <Grid justifyContent={{ xs: 'center', md: 'flex-start' }} xs={12}>
-                                    <BodyText sx={contactTitleStyles} aria-label="Contact job title:">
-                                        {contact.title}
-                                    </BodyText>
+                                    <BodyText sx={contactTitleStyles}>{contact.title}</BodyText>
                                 </Grid>
                             </When>
                             <When condition={Boolean(contact.bio)}>