From 75c5be4dded59c64a7bc631e4ce3b999f27e9954 Mon Sep 17 00:00:00 2001 From: NatSquared Date: Thu, 26 Sep 2024 17:01:14 -0700 Subject: [PATCH 1/2] DESENG-694: Update timeline widget design --- CHANGELOG.MD | 16 +- .../src/components/common/Input/Select.tsx | 2 +- .../RichTextEditor/RichEditorStyles.css | 4 + .../components/common/Typography/index.tsx | 2 +- .../admin/config/EngagementCreateAction.tsx | 2 +- .../widgets/Timeline/TimelineWidgetView.tsx | 271 +++++++----------- .../public/view/EngagementDescription.tsx | 2 +- .../public/view/EngagementSurveyBlock.tsx | 16 +- met-web/src/styles/Theme.ts | 16 +- 9 files changed, 138 insertions(+), 193 deletions(-) diff --git a/CHANGELOG.MD b/CHANGELOG.MD index 7be66db1d..3c6fc148a 100644 --- a/CHANGELOG.MD +++ b/CHANGELOG.MD @@ -1,12 +1,19 @@ +## September 26, 2024 + +- **Feature** New Timeline Widget designs [🎟️ DESENG-694](https://citz-gdx.atlassian.net/browse/DESENG-694) + - Implemented Figma design + - Adjusted styling in Engagement views slightly to accommodate theme-aware widgets + ## September 25, 2024 - **Feature** New Video Widget front end [🎟️ DESENG-692](https://citz-gdx.atlassian.net/browse/DESENG-692) - - Removed unneeded tables from db - - Updated all other met_api and met_web logic to accomodate this + + - Removed unneeded tables from db + - Updated all other met_api and met_web logic to accomodate this - **Feature** New Map Widget front end [🎟️ DESENG-693](https://citz-gdx.atlassian.net/browse/DESENG-693) - - Implemented Figma design - - Fixed accessibility issue with map labels (white text on white background) + - Implemented Figma design + - Fixed accessibility issue with map labels (white text on white background) ## September 23, 2024 @@ -19,6 +26,7 @@ ## September 18, 2024 - **Feature** New Video Widget front end [🎟️ DESENG-692](https://citz-gdx.atlassian.net/browse/DESENG-692) + - Implemented Figma design - Created custom layover bar for videos that shows video provider and has a custom logo - Transcripts will not be implemented at this time diff --git a/met-web/src/components/common/Input/Select.tsx b/met-web/src/components/common/Input/Select.tsx index 98b7b086f..5f83eb737 100644 --- a/met-web/src/components/common/Input/Select.tsx +++ b/met-web/src/components/common/Input/Select.tsx @@ -61,7 +61,7 @@ export const CommonSelect: React.FC { formData.getAll('users').forEach((user_id) => { addTeamMemberToEngagement({ user_id: user_id.toString(), engagement_id: engagement.id }); }); - return redirect(`/engagements/${engagement.id}/view`); + return redirect(`/engagements/${engagement.id}/details/config`); }; export default engagementCreateAction; diff --git a/met-web/src/components/engagement/old-view/widgets/Timeline/TimelineWidgetView.tsx b/met-web/src/components/engagement/old-view/widgets/Timeline/TimelineWidgetView.tsx index c83d58f13..f3abaaf28 100644 --- a/met-web/src/components/engagement/old-view/widgets/Timeline/TimelineWidgetView.tsx +++ b/met-web/src/components/engagement/old-view/widgets/Timeline/TimelineWidgetView.tsx @@ -1,190 +1,121 @@ -import React, { useEffect, useState } from 'react'; -import { MetPaper } from 'components/common'; -import { Avatar, Grid, Skeleton, Divider } from '@mui/material'; +import React, { Suspense } from 'react'; +import { Grid, Skeleton, Paper, ThemeProvider, Box } from '@mui/material'; import { Widget } from 'models/widget'; -import { useAppDispatch } from 'hooks'; -import { openNotification } from 'services/notificationService/notificationSlice'; -import { TimelineWidget, TimelineEvent } from 'models/timelineWidget'; +import { TimelineWidget, TimelineEvent as TimelineEventType } from 'models/timelineWidget'; import { fetchTimelineWidgets } from 'services/widgetService/TimelineService'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faCircleCheck } from '@fortawesome/pro-solid-svg-icons/faCircleCheck'; -import { faCircleHalf } from '@fortawesome/pro-solid-svg-icons/faCircleHalf'; -import { Palette } from 'styles/Theme'; +import { BaseTheme } from 'styles/Theme'; import { EventStatus } from 'models/timelineWidget'; -import { BodyText, Header2 } from 'components/common/Typography'; - +import { BodyText, Header3 } from 'components/common/Typography'; +import { Await } from 'react-router-dom'; +import { faCircle, faCircleHalf } from '@fortawesome/pro-solid-svg-icons'; interface TimelineWidgetProps { widget: Widget; } const TimelineWidgetView = ({ widget }: TimelineWidgetProps) => { - const dispatch = useAppDispatch(); - const [timelineWidget, setTimelineWidget] = useState({ - id: 0, - widget_id: 0, - engagement_id: 0, - title: '', - description: '', - events: [], - }); - const [isLoading, setIsLoading] = useState(true); - - const fetchTimeline = async () => { - try { - const timelines = await fetchTimelineWidgets(widget.id); - const timeline = timelines[timelines.length - 1]; - timeline.events.sort((a, b) => a.position - b.position); - setTimelineWidget(timeline); - setIsLoading(false); - } catch (error) { - setIsLoading(false); - console.log(error); - dispatch( - openNotification({ - severity: 'error', - text: 'Error occurred while fetching Engagement widgets information', - }), - ); - } - }; - - useEffect(() => { - fetchTimeline(); - }, [widget]); - - const containerStylesObject = (index: number) => ({ - minHeight: index + 1 === timelineWidget.events.length ? '60px' : '80px', - display: 'flex', - flexDirection: 'row', - alignItems: 'flex-start', - marginLeft: index + 1 === timelineWidget.events.length ? '18px' : '16px', - borderLeft: index + 1 === timelineWidget.events.length ? 'none' : '2px solid grey', - }); + const timeline = fetchTimelineWidgets(widget.id); - const commonAvatarStyles = { - height: 30, - width: 30, - marginLeft: '-16px', - backgroundColor: Palette.info.main, - }; - - const commonWhiteAvatarStyles = { - height: 23, - width: 23, - backgroundColor: 'var(--bcds-surface-background-white)', - color: 'transparent', - }; - - const renderIcon = (status: EventStatus) => { - const icons: { [key in EventStatus]: JSX.Element } = { - [EventStatus.Pending]: ( - - - - ), - [EventStatus.InProgress]: ( - - - - - - ), - [EventStatus.Completed]: ( - - - - - - ), - }; + return ( + }> + + {(timelineWidgets: TimelineWidget[]) => { + const timelineWidget = timelineWidgets[0]; + return ( + + + + {timelineWidget.title} + + + + {timelineWidget.description} + + + + {timelineWidget.events.map((event, index) => ( + + + + ))} + + + + ); + }} + + + ); +}; - return icons[status] || null; - }; +export default TimelineWidgetView; - const handleRenderTimelineEvent = (tEvent: TimelineEvent, index: number) => { - return ( - - - {renderIcon(tEvent.status)} - - - - {tEvent.description} - - { + return ( + + {/* Left side with icon and line */} + + {/* Event Icon */} + + - {tEvent.time} - + {event.status === EventStatus.Completed && } + {event.status === EventStatus.InProgress && ( + + )} + - - ); - }; - - if (isLoading) { - return ( - - - - - - - - - + {/* Dividing line */} + {!isLast && ( + + - - - ); - } - - if (!timelineWidget) { - return null; - } + )} + - return ( - - - - {timelineWidget.title} - - - - {timelineWidget.description} - - - {timelineWidget && - timelineWidget.events.map((tEvent, index) => handleRenderTimelineEvent(tEvent, index))} - + {/* Right side with event content */} + + + {event.description} ({['Pending', 'In Progress', 'Completed'][event.status - 1]}) + + {event.time} - + ); }; - -export default TimelineWidgetView; diff --git a/met-web/src/components/engagement/public/view/EngagementDescription.tsx b/met-web/src/components/engagement/public/view/EngagementDescription.tsx index 88fb330ae..6997a524c 100644 --- a/met-web/src/components/engagement/public/view/EngagementDescription.tsx +++ b/met-web/src/components/engagement/public/view/EngagementDescription.tsx @@ -70,7 +70,7 @@ export const EngagementDescription = () => { {(engagement: Engagement) => ( <> - + {engagement.description_title} diff --git a/met-web/src/components/engagement/public/view/EngagementSurveyBlock.tsx b/met-web/src/components/engagement/public/view/EngagementSurveyBlock.tsx index 89b21bbbc..a382a474f 100644 --- a/met-web/src/components/engagement/public/view/EngagementSurveyBlock.tsx +++ b/met-web/src/components/engagement/public/view/EngagementSurveyBlock.tsx @@ -97,11 +97,15 @@ export const EngagementSurveyBlock = () => { // No point in rendering if there is no status block or 2nd widget if (!statusBlock?.block_text && !widget) return null; return ( - + { marginBottom: '48px', }} > - - {widget && } - + {widget && } ); diff --git a/met-web/src/styles/Theme.ts b/met-web/src/styles/Theme.ts index e888bcba9..d1bae25b0 100644 --- a/met-web/src/styles/Theme.ts +++ b/met-web/src/styles/Theme.ts @@ -204,16 +204,16 @@ export const BaseTheme = createTheme({ }, }, MuiSelect: { - defaultProps: { - componentsProps: { - root: { - style: { - backgroundColor: 'white', - borderRadius: '8px', - }, + variants: [ + { + props: { variant: 'outlined' }, + style: { + backgroundColor: 'white', + borderRadius: '8px', }, }, - + ], + defaultProps: { MenuProps: { sx: { '& .MuiMenu-list .MuiMenuItem-root:hover, .MuiMenu-list .MuiMenuItem-root.Mui-focusVisible': { From bf9b49b527274110ede57f48508028e1bde7d3f6 Mon Sep 17 00:00:00 2001 From: NatSquared Date: Thu, 26 Sep 2024 17:03:33 -0700 Subject: [PATCH 2/2] Address Sonarcloud issue --- .../old-view/widgets/Timeline/TimelineWidgetView.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/met-web/src/components/engagement/old-view/widgets/Timeline/TimelineWidgetView.tsx b/met-web/src/components/engagement/old-view/widgets/Timeline/TimelineWidgetView.tsx index f3abaaf28..a06abd7d2 100644 --- a/met-web/src/components/engagement/old-view/widgets/Timeline/TimelineWidgetView.tsx +++ b/met-web/src/components/engagement/old-view/widgets/Timeline/TimelineWidgetView.tsx @@ -1,11 +1,10 @@ import React, { Suspense } from 'react'; import { Grid, Skeleton, Paper, ThemeProvider, Box } from '@mui/material'; import { Widget } from 'models/widget'; -import { TimelineWidget, TimelineEvent as TimelineEventType } from 'models/timelineWidget'; +import { TimelineWidget, TimelineEvent as TimelineEventType, EventStatus } from 'models/timelineWidget'; import { fetchTimelineWidgets } from 'services/widgetService/TimelineService'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { BaseTheme } from 'styles/Theme'; -import { EventStatus } from 'models/timelineWidget'; import { BodyText, Header3 } from 'components/common/Typography'; import { Await } from 'react-router-dom'; import { faCircle, faCircleHalf } from '@fortawesome/pro-solid-svg-icons';