Add totals in formats/categories grids & start/end time on schedule e…

…vents (#82) * Add totals in format/categories grid * Add start & endtime on schedule events
HugoGresse · Mar 17, 2024 · 1adb0c2 · 1adb0c2
1 parent d573c5e
commit 1adb0c2
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 20 deletions.
diff --git a/src/events/page/schedule/components/SessionCardContent.tsx b/src/events/page/schedule/components/SessionCardContent.tsx
@@ -21,6 +21,9 @@ export const SessionCardContent = ({ session, setLocation }: SessionCardContentP
             : 'white'
         : 'white'
 
+    const startTime = session.dates?.start?.toFormat('HH:mm')
+    const endTime = session.dates?.end?.toFormat('HH:mm')
+
     return (
         <Box display="flex" flexDirection="column" justifyContent="space-between" height="100%">
             <Box display="flex" justifyContent="space-between">
@@ -50,6 +53,7 @@ export const SessionCardContent = ({ session, setLocation }: SessionCardContentP
             </Box>
             <Typography color={textColor} variant="caption" lineHeight={1}>
                 {`${session.formatText || 'no format'} • ${session.categoryObject?.name || 'no category'}`}
+                {startTime ? ` • ${startTime} → ${endTime}` : null}
                 <br />
                 <Box
                     sx={{

diff --git a/src/events/page/schedule/components/TemplateCardContent.tsx b/src/events/page/schedule/components/TemplateCardContent.tsx
@@ -21,21 +21,15 @@ export const TemplateCardContent = ({ session, onDelete }: SessionCardContentPro
             : 'white'
         : 'white'
 
+    const startTime = session.dates?.start?.toFormat('HH:mm')
+    const endTime = session.dates?.end?.toFormat('HH:mm')
+
     return (
         <Box display="flex" flexDirection="column" justifyContent="center" alignItems="center" height="100%">
             <Typography color={textColor} variant="caption" lineHeight={1}>
                 {`${session.formatText || 'no format'} • ${session.categoryObject?.name || 'no category'}`}
                 <br />
-                <Box
-                    sx={{
-                        backgroundColor: 'rgba(255,255,255, 0.7)',
-                        width: 'fit-content',
-                        color: '#000',
-                        borderRadius: 1,
-                        paddingX: 0.4,
-                    }}>
-                    {session.speakersData?.map((s) => s?.name).join(', ')}
-                </Box>
+                {startTime ? `${startTime} → ${endTime}` : null}
             </Typography>
             {onDelete && (
                 <IconButton onClick={onDelete} sx={{ position: 'absolute', top: 0, right: 0 }}>

diff --git a/src/events/page/schedule/components/TemplateDialog.tsx b/src/events/page/schedule/components/TemplateDialog.tsx
@@ -22,13 +22,13 @@ export const TemplateDialog = ({ event, isOpen, onClose }: TemplateDialogProps)
         {
             field: 'category',
             headerName: 'Category',
-            width: 150,
+            width: 200,
         },
     ].concat(
         event.formats.map((format) => ({
             field: format.id,
             headerName: format.name + ' (actual)',
-            width: 150,
+            width: 200,
             type: 'number',
             editable: true,
             valueParser: (value: any) => {
@@ -40,6 +40,11 @@ export const TemplateDialog = ({ event, isOpen, onClose }: TemplateDialogProps)
                 return parsed
             },
             valueFormatter: (params: GridValueFormatterParams<number>) => {
+                if (params.id === 'total') {
+                    const totalExisting = sessions.data?.filter((session) => session.format === format.id).length
+                    return `${params.value} (${totalExisting || 0})`
+                }
+
                 const existingSessionsCount = sessions.data?.filter(
                     (session) => session.category === params.id && session.format === format.id
                 ).length
@@ -51,6 +56,13 @@ export const TemplateDialog = ({ event, isOpen, onClose }: TemplateDialogProps)
         }))
     )
 
+    columns.push({
+        field: 'total',
+        headerName: 'Total',
+        type: 'number',
+        width: 150,
+    })
+
     const rows = event.categories.map((category) => ({
         id: category.id,
         category: category.name,
@@ -63,7 +75,26 @@ export const TemplateDialog = ({ event, isOpen, onClose }: TemplateDialogProps)
                     ).length || 0,
             }
         }, {}),
+        total: event.formats.reduce((acc, format) => {
+            return (
+                acc +
+                (sessionsTemplate.data?.filter(
+                    (session) => session.category === category.id && session.format === format.id
+                ).length || 0)
+            )
+        }, 0),
     }))
+    rows.push({
+        id: 'total',
+        category: 'Total',
+        ...event.formats.reduce((acc, format) => {
+            return {
+                ...acc,
+                [format.id]: sessionsTemplate.data?.filter((session) => session.format === format.id).length || 0,
+            }
+        }, {}),
+        total: sessionsTemplate.data?.length || 0,
+    })
 
     return (
         <Dialog open={isOpen} onClose={() => onClose()} maxWidth="md" fullWidth={true} scroll="body">

diff --git a/src/events/page/settings/EventSettingsFormatCategoriesGrid.tsx b/src/events/page/settings/EventSettingsFormatCategoriesGrid.tsx
@@ -20,6 +20,11 @@ export const EventSettingsFormatCategoriesGrid = ({ event }: EventSettingsFormat
         sortable: true,
         editable: false,
         renderCell: (params) => {
+            if (params.id === 'total' && params.field === 'total') {
+                return <b>{params.value}</b>
+            } else if (params.id === 'total' || params.field === 'total') {
+                return params.value
+            }
             return (
                 <Chip
                     label={params.value}
@@ -40,17 +45,25 @@ export const EventSettingsFormatCategoriesGrid = ({ event }: EventSettingsFormat
             ...categoryColumnType,
             field: 'category',
             headerName: 'Category',
-            width: 150,
+            width: 170,
         },
-    ].concat(
-        event.formats.map((format) => ({
+    ]
+        .concat(
+            event.formats.map((format) => ({
+                ...categoryColumnType,
+                field: format.id,
+                headerName: format.name,
+                width: 170,
+                type: 'number',
+            }))
+        )
+        .concat({
             ...categoryColumnType,
-            field: format.id,
-            headerName: format.name,
-            width: 150,
+            field: 'total',
+            headerName: 'Total',
             type: 'number',
-        }))
-    )
+            width: 150,
+        })
 
     const rows = event.categories.map((category) => ({
         id: category.id,
@@ -63,8 +76,27 @@ export const EventSettingsFormatCategoriesGrid = ({ event }: EventSettingsFormat
                         .length || 0,
             }
         }, {}),
+        total: event.formats.reduce((acc, format) => {
+            return (
+                acc +
+                (sessions.data?.filter((session) => session.category === category.id && session.format === format.id)
+                    .length || 0)
+            )
+        }, 0),
     }))
 
+    rows.push({
+        id: 'total',
+        category: 'Total',
+        ...event.formats.reduce((acc, format) => {
+            return {
+                ...acc,
+                [format.id]: sessions.data?.filter((session) => session.format === format.id).length || 0,
+            }
+        }, {}),
+        total: sessions.data?.length || 0,
+    })
+
     return (
         <>
             <Typography fontWeight="600" mt={2}>