Calendar events changes

src/core/apollo/generated/apollo-hooks.ts

@@ -2970,6 +2970,10 @@ export const CalendarEventDetailsFragmentDoc = gql`
         tagsets {
           ...TagsetDetails
         }
+        location {
+          id
+          city
+        }
       }
     }
     createdDate

src/core/apollo/generated/graphql-schema.ts

@@ -26220,6 +26220,7 @@ export type CalendarEventDetailsQuery = {
                         type: TagsetType;
                       }>
                     | undefined;
+                  location?: { __typename?: 'Location'; id: string; city?: string | undefined } | undefined;
                 };
               }
             | undefined;
@@ -26418,6 +26419,7 @@ export type CalendarEventDetailsFragment = {
                 type: TagsetType;
               }>
             | undefined;
+          location?: { __typename?: 'Location'; id: string; city?: string | undefined } | undefined;
         };
       }
     | undefined;
@@ -26610,6 +26612,7 @@ export type CreateCalendarEventMutation = {
                   type: TagsetType;
                 }>
               | undefined;
+            location?: { __typename?: 'Location'; id: string; city?: string | undefined } | undefined;
           };
         }
       | undefined;
@@ -26787,6 +26790,7 @@ export type UpdateCalendarEventMutation = {
                   type: TagsetType;
                 }>
               | undefined;
+            location?: { __typename?: 'Location'; id: string; city?: string | undefined } | undefined;
           };
         }
       | undefined;

src/core/i18n/bg/translation.bg.json

@@ -95,7 +95,7 @@
     "no-upcoming-events": "Currently, there are no upcoming events to be displayed",
     "past-events": "Past Events",
     "show-calendar": "Show calendar",
-    "defaultEventDescription": "$t(common.location):\n\n$t(common.url):\n\n$t(common.description):"
+    "defaultEventDescription": ""
   },
   "buttons": {
     "leave": "Напусни",

src/core/i18n/de/translation.de.json

@@ -95,7 +95,7 @@
     "no-upcoming-events": "Zur Zeit gibt es keine anstehenden Events zum Anzeigen",
     "past-events": "Vergangene Termine",
     "show-calendar": "Kalender anzeigen",
-    "defaultEventDescription": "$t(common.location):\n\n$t(common.url):\n\n$t(common.description):"
+    "defaultEventDescription": ""
   },
   "buttons": {
     "leave": "Verlassen",

src/core/i18n/en/translation.en.json

@@ -81,7 +81,7 @@
     "no-upcoming-events": "Currently, there are no upcoming events to be displayed",
     "past-events": "Past Events",
     "show-calendar": "Show calendar",
-    "defaultEventDescription": "$t(common.location):\n\n$t(common.url):\n\n$t(common.description):",
+    "defaultEventDescription": "",
     "adminsOnly": "Since there are no events, this block is only visible for admins and leads"
   },
   "buttons": {

src/core/i18n/es/translation.es.json

@@ -95,7 +95,7 @@
     "no-upcoming-events": "Actualmente no hay eventos próximos que mostrar",
     "past-events": "Eventos anteriores",
     "show-calendar": "Mostrar Calendario",
-    "defaultEventDescription": "$t(common.location):\n\n$t(common.url):\n\n$t(common.description):"
+    "defaultEventDescription": ""
   },
   "buttons": {
     "leave": "Salir",

src/core/i18n/fr/translation.fr.json

@@ -95,7 +95,7 @@
     "no-upcoming-events": "Actuellement, il n'y a aucun événement à venir à afficher",
     "past-events": "Événements passés",
     "show-calendar": "Afficher le calendrier",
-    "defaultEventDescription": "$t(commun.location):\n\n$t(common.url):\n\n$t(common.description):"
+    "defaultEventDescription": ""
   },
   "buttons": {
     "leave": "Partir",

src/core/i18n/nl/translation.nl.json

@@ -95,7 +95,7 @@
     "no-upcoming-events": "Er zijn momenteel geen evenementen om weer te geven",
     "past-events": "Afgelopen evenementen",
     "show-calendar": "Toon Kalender",
-    "defaultEventDescription": "$t(common.location):\n\n$t(common.url):\n\n$t(common.description):"
+    "defaultEventDescription": ""
   },
   "buttons": {
     "leave": "Verlaat",

src/core/i18n/pt/translation.pt.json

@@ -95,7 +95,7 @@
     "no-upcoming-events": "Atualmente, não há eventos futuros para serem exibidos",
     "past-events": "Eventos Anteriores",
     "show-calendar": "Exibir calendário",
-    "defaultEventDescription": "$t(common.location):\n\n$t(common.url):\n\n$t(common.description):"
+    "defaultEventDescription": ""
   },
   "buttons": {
     "leave": "Sair",

src/core/i18n/ua/translation.ua.json

@@ -95,7 +95,7 @@
     "no-upcoming-events": "Currently, there are no upcoming events to be displayed",
     "past-events": "Past Events",
     "show-calendar": "Show calendar",
-    "defaultEventDescription": "$t(common.location):\n\n$t(common.url):\n\n$t(common.description):"
+    "defaultEventDescription": ""
   },
   "buttons": {
     "leave": "Leave",

src/core/ui/forms/DatePicker/AlkemioTimePicker.tsx

@@ -39,7 +39,13 @@ const AlkemioTimePicker = ({
   const djsDate = useMemo(() => dayjs(value).startOf('day'), [value]);
 
   const timeSlots = useMemo(
-    () => times(24).flatMap(h => [djsDate.set('hour', h), djsDate.set('hour', h).set('minute', 30)]),
+    () =>
+      times(24).flatMap(h => [
+        djsDate.set('hour', h).set('minute', 0),
+        djsDate.set('hour', h).set('minute', 15),
+        djsDate.set('hour', h).set('minute', 30),
+        djsDate.set('hour', h).set('minute', 45),
+      ]),
     [djsDate]
   );
 

src/core/ui/forms/DatePicker/FormikDurationMinutes.tsx

@@ -38,7 +38,7 @@ const FormikDurationMinutes = ({ name, startTimeFieldName, ...datePickerProps }:
 
   const oldStartTimeRef = useRef(new Date(startTimeField.value));
 
-  useLayoutEffect(() => {
+  const updateDurationMinutes = () => {
     // Normally we keep durationMinutes when startTime changes, except for the case when
     // startTime was after endTime (negative durationMinutes) but then it got changed
     // to be before endTime (valid combination).
@@ -56,6 +56,14 @@ const FormikDurationMinutes = ({ name, startTimeFieldName, ...datePickerProps }:
     if (isStartTimeValid) {
       oldStartTimeRef.current = startTime;
     }
+  };
+
+  useLayoutEffect(() => {
+    updateDurationMinutes();
+  }, []);
+
+  useLayoutEffect(() => {
+    updateDurationMinutes();
   }, [startTimeField.value]);
 
   const date = addMinutes(startTimeField.value, field.value);

src/core/ui/icon/RoundedBadge.tsx

@@ -1,11 +1,12 @@
 import React, { PropsWithChildren } from 'react';
-import { Box, BoxProps, useTheme } from '@mui/material';
+import { Box, BoxProps, SxProps, Theme, useTheme } from '@mui/material';
 
 export type RoundedBadgeSize = 'medium' | 'small' | 'xsmall';
 
 export interface RoundedBadgeProps extends BoxProps {
   size: RoundedBadgeSize;
   color?: string;
+  sx?: SxProps<Theme>;
 }
 
 const getSizeInSpacing = (size: RoundedBadgeSize) => {
@@ -22,6 +23,7 @@ const getSizeInSpacing = (size: RoundedBadgeSize) => {
 const RoundedBadge = ({
   size,
   color = 'primary.main',
+  borderRadius = '50%',
   children,
   sx,
   ...containerProps
@@ -37,7 +39,7 @@ const RoundedBadge = ({
       sx={{
         backgroundColor: color,
         color: 'common.white',
-        borderRadius: '50%',
+        borderRadius,
         display: 'flex',
         justifyContent: 'center',
         alignItems: 'center',

src/core/utils/time/utils.ts

@@ -12,33 +12,104 @@ const LocaleId = 'en-GB';
 
 export const DAYJS_DATEFORMAT = 'DD/MM/YYYY';
 
-export const formatBadgeDate = (date: Date | undefined, defaultValue: string = '') => {
-  if (!date) {
-    return defaultValue;
+export const getEndDateByDuration = (startDate: Date | string | undefined, durationMinutes: number) => {
+  if (!startDate) {
+    return new Date();
   }
-  return new Date(date).toLocaleDateString(LocaleId, { day: '2-digit', month: '2-digit' });
+
+  return new Date(new Date(startDate).getTime() + durationMinutes * 60000);
 };
 
-export const formatTooltipDate = (date: Date | undefined, defaultValue: string = '') => {
-  if (!date) {
+type BadgeDateProps = {
+  startDate: Date | undefined;
+  durationMinutes: number;
+  durationDays?: number;
+  defaultValue?: string;
+};
+
+// Badge component displays start and end dates
+// we're calculating the end date (if such) by durationMinutes
+export const formatBadgeDate = ({
+  startDate,
+  durationMinutes,
+  durationDays = 0,
+  defaultValue = '',
+}: BadgeDateProps) => {
+  if (!startDate) {
+    return {
+      startDate: defaultValue,
+      endDate: null,
+    };
+  }
+
+  const startDateFormatted = new Date(startDate).toLocaleDateString(LocaleId, { day: '2-digit', month: '2-digit' });
+
+  if (!durationDays || durationDays < 1) {
+    return {
+      startDate: startDateFormatted,
+      endDate: null,
+    };
+  } else if (durationMinutes && durationMinutes > 0) {
+    const endDate = getEndDateByDuration(startDate, durationMinutes);
+
+    return {
+      startDate: startDateFormatted,
+      endDate: endDate.toLocaleDateString(LocaleId, { day: '2-digit', month: '2-digit' }),
+    };
+  }
+
+  return {
+    startDate: startDateFormatted,
+    endDate: null,
+  };
+};
+
+// either only startDateTime
+// or startDateTime - endDateTime
+export const formatLongDateTimeString = ({
+  startDate,
+  durationMinutes,
+  durationDays = 0,
+  defaultValue = '',
+}: BadgeDateProps) => {
+  if (!startDate) {
     return defaultValue;
   }
-  return new Date(date).toLocaleDateString(LocaleId, {
-    weekday: 'long',
+
+  // note can't extract the formatting options beacuse of type error
+  let longDateTimeString = new Date(startDate).toLocaleDateString(LocaleId, {
+    weekday: 'short',
     day: '2-digit',
     month: '2-digit',
     year: 'numeric',
     hour: '2-digit',
     minute: '2-digit',
   });
+
+  if ((durationDays || 0) > 0 && durationMinutes && durationMinutes > 0) {
+    const endDate = getEndDateByDuration(startDate, durationMinutes);
+
+    longDateTimeString +=
+      ' - ' +
+      endDate.toLocaleDateString(LocaleId, {
+        weekday: 'short',
+        day: '2-digit',
+        month: '2-digit',
+        year: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+      });
+  }
+
+  return longDateTimeString;
 };
 
 export const formatLongDate = (date: Date | undefined, defaultValue: string = '') => {
   if (!date) {
     return defaultValue;
   }
   return new Date(date).toLocaleDateString(LocaleId, {
-    weekday: 'long',
+    weekday: 'short',
     day: '2-digit',
     month: '2-digit',
     year: 'numeric',
@@ -50,15 +121,16 @@ export function addMinutes(date: Date | string, minutes: number): Date {
 }
 
 export const formatTimeAndDuration = (
-  event: { startDate?: Date; durationMinutes?: number; wholeDay?: boolean },
+  event: { startDate?: Date; durationMinutes?: number; wholeDay?: boolean; durationDays?: number },
   t: TFunction<'translation', undefined>
 ) => {
   if (!event.startDate) return '';
   if (event.wholeDay) {
     return t('calendar.event.whole-day');
   }
   const startDate = new Date(event.startDate);
-  if (!event.durationMinutes) {
+
+  if (!event.durationMinutes || (event.durationDays ?? 0) > 0) {
     return startDate.toLocaleTimeString(LocaleId, {
       hour: '2-digit',
       minute: '2-digit',
@@ -79,6 +151,17 @@ export const formatTimeAndDuration = (
   }
 };
 
+export const formatTime = (date: Date | undefined) => {
+  if (!date) {
+    return null;
+  }
+
+  return date.toLocaleTimeString(LocaleId, {
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+};
+
 export const dateRounded = (date: Date = new Date()) => {
   const result = new Date(new Date(date).getTime() + 59 * 60000); // Round to the next hour
   result.setMinutes(0);
@@ -99,3 +182,18 @@ export const startOfDay = (date: Date = new Date()) => {
 export const formatDateTime = (date: Date) => {
   return dayjs(date).format('DD/MM/YYYY[ at ]HH:mm');
 };
+
+export const isSameDay = (startDate: Date | undefined, endDate: number | Date | undefined) => {
+  if (!startDate || !endDate) {
+    return true;
+  }
+
+  const startDateOnly = new Date(startDate);
+  const endDateOnly = new Date(endDate);
+
+  return (
+    startDateOnly.getFullYear() === endDateOnly.getFullYear() &&
+    startDateOnly.getMonth() === endDateOnly.getMonth() &&
+    startDateOnly.getDate() === endDateOnly.getDate()
+  );
+};