From 7a3ebc60cc53ea16e40263ab6e7a72b1e47b288b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Diana=20Ekstr=C3=B6m=20Ho?= Date: Sun, 13 Oct 2024 13:14:18 +0200 Subject: [PATCH 1/2] Add event title to event page --- src/features/events/layout/EventLayout.tsx | 206 +++++++++++---------- 1 file changed, 106 insertions(+), 100 deletions(-) diff --git a/src/features/events/layout/EventLayout.tsx b/src/features/events/layout/EventLayout.tsx index 6e1043500e..e5ddab0f68 100644 --- a/src/features/events/layout/EventLayout.tsx +++ b/src/features/events/layout/EventLayout.tsx @@ -1,6 +1,7 @@ import { Box } from '@mui/material'; import EventIcon from '@mui/icons-material/Event'; import PeopleIcon from '@mui/icons-material/People'; +import Head from 'next/head'; import { useState } from 'react'; import TabbedLayout from 'utils/layout/TabbedLayout'; @@ -49,115 +50,120 @@ const EventLayout: React.FC = ({ } return ( - - {(data) => { - return ; - }} - - } - baseHref={getEventUrl(eventFuture.data)} - defaultTab="/" - subtitle={ - - - - - + + {eventFuture.data?.title} + + + {(data) => { + return ; }} - > - {({ data: { types, currentEvent } }) => { + + } + baseHref={getEventUrl(eventFuture.data)} + defaultTab="/" + subtitle={ + + + + + + {({ data: { types, currentEvent } }) => { + return ( + setEditingTypeOrTitle(false)} + onChange={(newValue) => { + setType(newValue ? newValue.id : newValue); + setEditingTypeOrTitle(false); + }} + onChangeNewOption={(newValueId) => setType(newValueId)} + onFocus={() => setEditingTypeOrTitle(true)} + orgId={currentEvent.organization.id} + showBorder={editingTypeOrTitle} + types={types} + value={currentEvent.activity} + /> + ); + }} + + + + {(data) => { + const startDate = new Date(removeOffset(data.start_time)); + const endDate = new Date(removeOffset(data.end_time)); + + const labels: ZUIIconLabelProps[] = []; + + if (startDate && endDate) { + labels.push({ + icon: , + label: , + }); + if (data.num_participants_available) { + labels.push({ + icon: , + label: ( + + ), + }); + } + } + return ; + }} + + + + } + tabs={[ + { href: '/', label: messages.tabs.overview() }, + { + href: '/participants', + label: messages.tabs.participants(), + }, + ]} + title={ + + {(data) => { return ( - setEditingTypeOrTitle(false)} - onChange={(newValue) => { - setType(newValue ? newValue.id : newValue); + { + setEditingTypeOrTitle(false); + }} + onChange={(val) => { setEditingTypeOrTitle(false); + setTitle(val); }} - onChangeNewOption={(newValueId) => setType(newValueId)} onFocus={() => setEditingTypeOrTitle(true)} - orgId={currentEvent.organization.id} + placeholder={ + data.title || + data.activity?.title || + messages.common.noTitle() + } showBorder={editingTypeOrTitle} - types={types} - value={currentEvent.activity} + tooltipContent={messages.tooltipContent()} + value={data.title || ''} /> ); }} - - - - {(data) => { - const startDate = new Date(removeOffset(data.start_time)); - const endDate = new Date(removeOffset(data.end_time)); - - const labels: ZUIIconLabelProps[] = []; - - if (startDate && endDate) { - labels.push({ - icon: , - label: , - }); - if (data.num_participants_available) { - labels.push({ - icon: , - label: ( - - ), - }); - } - } - return ; - }} - - - - } - tabs={[ - { href: '/', label: messages.tabs.overview() }, - { - href: '/participants', - label: messages.tabs.participants(), - }, - ]} - title={ - - {(data) => { - return ( - { - setEditingTypeOrTitle(false); - }} - onChange={(val) => { - setEditingTypeOrTitle(false); - setTitle(val); - }} - onFocus={() => setEditingTypeOrTitle(true)} - placeholder={ - data.title || - data.activity?.title || - messages.common.noTitle() - } - showBorder={editingTypeOrTitle} - tooltipContent={messages.tooltipContent()} - value={data.title || ''} - /> - ); - }} - - } - > - {children} - + + } + > + {children} + + ); }; From e5fa8bf5e08d45510f1ae05851942c6fd1d179b5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Diana=20Ekstr=C3=B6m=20Ho?= Date: Mon, 14 Oct 2024 12:45:31 +0200 Subject: [PATCH 2/2] Handle empty event title for event page header Adjusting formatting of code --- src/features/events/layout/EventLayout.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/features/events/layout/EventLayout.tsx b/src/features/events/layout/EventLayout.tsx index e5ddab0f68..2889daf035 100644 --- a/src/features/events/layout/EventLayout.tsx +++ b/src/features/events/layout/EventLayout.tsx @@ -52,7 +52,11 @@ const EventLayout: React.FC = ({ return ( <> - {eventFuture.data?.title} + + {eventFuture.data?.title || + eventFuture.data?.activity?.title || + messages.common.noTitle()} +