feat: open event details drawer on event row click (#4464)

* feat: open event details drawer on event row click Closes #4294 * feat: review - display Calendar Event details Inline Cells in readonly mode * fix: fix calendar event field values not being set * chore: review - reactivate no-extra-boolean-cast eslint rule
2024-03-15 13:37:36 -03:00
parent 680bb11f19
commit 38f28de4a6
31 changed files with 530 additions and 231 deletions
--- a/packages/twenty-front/src/modules/activities/calendar/components/Calendar.tsx
+++ b/packages/twenty-front/src/modules/activities/calendar/components/Calendar.tsx
@ -4,10 +4,11 @@ import { format, getYear } from 'date-fns';
 import { CalendarMonthCard } from '@/activities/calendar/components/CalendarMonthCard';
 import { CalendarContext } from '@/activities/calendar/contexts/CalendarContext';
 import { useCalendarEvents } from '@/activities/calendar/hooks/useCalendarEvents';
-import { sortCalendarEventsDesc } from '@/activities/calendar/utils/sortCalendarEvents';
+import { CalendarEvent } from '@/activities/calendar/types/CalendarEvent';
+import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
+import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
 import { H3Title } from '@/ui/display/typography/components/H3Title';
 import { Section } from '@/ui/layout/section/components/Section';
-import { mockedCalendarEvents } from '~/testing/mock-data/calendar';

 const StyledContainer = styled.div`
  box-sizing: border-box;
@ -23,9 +24,11 @@ const StyledYear = styled.span`
 `;

 export const Calendar = () => {
-  const sortedCalendarEvents = [...mockedCalendarEvents].sort(
-    sortCalendarEventsDesc,
-  );
+  const { records: calendarEvents } = useFindManyRecords<CalendarEvent>({
+    objectNameSingular: CoreObjectNameSingular.CalendarEvent,
+    orderBy: { startsAt: 'DescNullsLast', endsAt: 'DescNullsLast' },
+    useRecordsWithoutConnection: true,
+  });

  const {
    calendarEventsByDayTime,
@ -35,7 +38,13 @@ export const Calendar = () => {
    monthTimes,
    monthTimesByYear,
    updateCurrentCalendarEvent,
-  } = useCalendarEvents(sortedCalendarEvents);
+  } = useCalendarEvents(
+    calendarEvents.map((calendarEvent) => ({
+      ...calendarEvent,
+      // TODO: retrieve CalendarChannel visibility from backend
+      visibility: 'SHARE_EVERYTHING',
+    })),
+  );

  return (
    <CalendarContext.Provider
--- a/packages/twenty-front/src/modules/activities/calendar/components/CalendarCurrentEventCursor.tsx
+++ b/packages/twenty-front/src/modules/activities/calendar/components/CalendarCurrentEventCursor.tsx
@ -12,6 +12,7 @@ import { AnimatePresence, motion } from 'framer-motion';
 import { CalendarContext } from '@/activities/calendar/contexts/CalendarContext';
 import { CalendarEvent } from '@/activities/calendar/types/CalendarEvent';
 import { getCalendarEventEndDate } from '@/activities/calendar/utils/getCalendarEventEndDate';
+import { getCalendarEventStartDate } from '@/activities/calendar/utils/getCalendarEventStartDate';
 import { hasCalendarEventEnded } from '@/activities/calendar/utils/hasCalendarEventEnded';
 import { hasCalendarEventStarted } from '@/activities/calendar/utils/hasCalendarEventStarted';

@ -52,12 +53,16 @@ export const CalendarCurrentEventCursor = ({
  } = useContext(CalendarContext);

  const nextCalendarEvent = getNextCalendarEvent(calendarEvent);
+  const nextCalendarEventStartsAt = nextCalendarEvent
+    ? getCalendarEventStartDate(nextCalendarEvent)
+    : undefined;
  const isNextEventThisMonth =
-    !!nextCalendarEvent && isThisMonth(nextCalendarEvent.startsAt);
+    !!nextCalendarEventStartsAt && isThisMonth(nextCalendarEventStartsAt);

+  const calendarEventStartsAt = getCalendarEventStartDate(calendarEvent);
  const calendarEventEndsAt = getCalendarEventEndDate(calendarEvent);

-  const isCurrent = currentCalendarEvent.id === calendarEvent.id;
+  const isCurrent = currentCalendarEvent?.id === calendarEvent.id;
  const [hasStarted, setHasStarted] = useState(
    hasCalendarEventStarted(calendarEvent),
  );
@ -66,7 +71,7 @@ export const CalendarCurrentEventCursor = ({
  );
  const [isWaiting, setIsWaiting] = useState(hasEnded && !isNextEventThisMonth);

-  const dayTime = startOfDay(calendarEvent.startsAt).getTime();
+  const dayTime = startOfDay(calendarEventStartsAt).getTime();
  const dayEvents = calendarEventsByDayTime[dayTime];
  const isFirstEventOfDay = dayEvents?.slice(-1)[0] === calendarEvent;
  const isLastEventOfDay = dayEvents?.[0] === calendarEvent;
@ -81,7 +86,7 @@ export const CalendarCurrentEventCursor = ({
      transition: {
        delay: Math.max(
          0,
-          differenceInSeconds(calendarEvent.startsAt, new Date()),
+          differenceInSeconds(calendarEventStartsAt, new Date()),
        ),
      },
    },
@ -99,9 +104,9 @@ export const CalendarCurrentEventCursor = ({
      top: `-${topOffset}px`,
      transition: {
        delay:
-          isWaiting && nextCalendarEvent
+          isWaiting && nextCalendarEventStartsAt
            ? differenceInSeconds(
-                startOfMonth(nextCalendarEvent.startsAt),
+                startOfMonth(nextCalendarEventStartsAt),
                new Date(),
              )
            : 0,
--- a/packages/twenty-front/src/modules/activities/calendar/components/CalendarDayCardContent.tsx
+++ b/packages/twenty-front/src/modules/activities/calendar/components/CalendarDayCardContent.tsx
@ -4,6 +4,7 @@ import { differenceInSeconds, endOfDay, format } from 'date-fns';

 import { CalendarEventRow } from '@/activities/calendar/components/CalendarEventRow';
 import { CalendarEvent } from '@/activities/calendar/types/CalendarEvent';
+import { getCalendarEventStartDate } from '@/activities/calendar/utils/getCalendarEventStartDate';
 import { CardContent } from '@/ui/layout/card/components/CardContent';

 type CalendarDayCardContentProps = {
@ -53,8 +54,8 @@ export const CalendarDayCardContent = ({
 }: CalendarDayCardContentProps) => {
  const theme = useTheme();

-  const endOfDayDate = endOfDay(calendarEvents[0].startsAt);
-  const endsIn = differenceInSeconds(endOfDayDate, Date.now());
+  const endOfDayDate = endOfDay(getCalendarEventStartDate(calendarEvents[0]));
+  const dayEndsIn = differenceInSeconds(endOfDayDate, Date.now());

  const weekDayLabel = format(endOfDayDate, 'EE');
  const monthDayLabel = format(endOfDayDate, 'dd');
@ -71,7 +72,7 @@ export const CalendarDayCardContent = ({
      animate="ended"
      variants={upcomingDayCardContentVariants}
      transition={{
-        delay: Math.max(0, endsIn),
+        delay: Math.max(0, dayEndsIn),
        duration: theme.animation.duration.fast,
      }}
    >
--- a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventDetails.tsx
+++ b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventDetails.tsx
@ -0,0 +1,146 @@
+import { css, useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+
+import { CalendarEvent } from '@/activities/calendar/types/CalendarEvent';
+import { useObjectMetadataItemOnly } from '@/object-metadata/hooks/useObjectMetadataItemOnly';
+import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
+import { formatFieldMetadataItemAsFieldDefinition } from '@/object-metadata/utils/formatFieldMetadataItemAsFieldDefinition';
+import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
+import { FieldDefinition } from '@/object-record/record-field/types/FieldDefinition';
+import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
+import { RecordInlineCell } from '@/object-record/record-inline-cell/components/RecordInlineCell';
+import { PropertyBox } from '@/object-record/record-inline-cell/property-box/components/PropertyBox';
+import {
+  Chip,
+  ChipAccent,
+  ChipSize,
+  ChipVariant,
+} from '@/ui/display/chip/components/Chip';
+import { IconCalendarEvent } from '@/ui/display/icon';
+import { mapArrayToObject } from '~/utils/array/mapArrayToObject';
+import { beautifyPastDateRelativeToNow } from '~/utils/date-utils';
+
+type CalendarEventDetailsProps = {
+  calendarEvent: CalendarEvent;
+};
+
+const StyledContainer = styled.div`
+  background: ${({ theme }) => theme.background.secondary};
+  align-items: flex-start;
+  border-bottom: 1px solid ${({ theme }) => theme.border.color.medium};
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(6)};
+  padding: ${({ theme }) => theme.spacing(6)};
+`;
+
+const StyledEventChip = styled(Chip)`
+  gap: ${({ theme }) => theme.spacing(2)};
+  padding-left: ${({ theme }) => theme.spacing(2)};
+  padding-right: ${({ theme }) => theme.spacing(2)};
+`;
+
+const StyledHeader = styled.header``;
+
+const StyledTitle = styled.h2<{ canceled?: boolean }>`
+  color: ${({ theme }) => theme.font.color.primary};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+  margin: ${({ theme }) => theme.spacing(0, 0, 2)};
+
+  ${({ canceled }) =>
+    canceled &&
+    css`
+      text-decoration: line-through;
+    `}
+`;
+
+const StyledCreatedAt = styled.div`
+  color: ${({ theme }) => theme.font.color.tertiary};
+`;
+
+const StyledFields = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(3)};
+`;
+
+const StyledPropertyBox = styled(PropertyBox)`
+  height: ${({ theme }) => theme.spacing(6)};
+  padding: 0;
+`;
+
+export const CalendarEventDetails = ({
+  calendarEvent,
+}: CalendarEventDetailsProps) => {
+  const theme = useTheme();
+  const { objectMetadataItem } = useObjectMetadataItemOnly({
+    objectNameSingular: CoreObjectNameSingular.CalendarEvent,
+  });
+
+  const fieldsToDisplay: Partial<
+    Record<
+      keyof CalendarEvent,
+      Partial<Pick<FieldDefinition<FieldMetadata>, 'label'>>
+    >
+  > = {
+    startsAt: { label: 'Start Date' },
+    endsAt: { label: 'End Date' },
+    conferenceUri: { label: 'Meet link' },
+    location: {},
+    description: {},
+  };
+  const fieldsByName = mapArrayToObject(
+    objectMetadataItem.fields,
+    ({ name }) => name,
+  );
+
+  return (
+    <StyledContainer>
+      <StyledEventChip
+        accent={ChipAccent.TextSecondary}
+        size={ChipSize.Large}
+        variant={ChipVariant.Highlighted}
+        clickable={false}
+        leftComponent={<IconCalendarEvent size={theme.icon.size.md} />}
+        label="Event"
+      />
+      <StyledHeader>
+        <StyledTitle canceled={calendarEvent.isCanceled}>
+          {calendarEvent.title}
+        </StyledTitle>
+        <StyledCreatedAt>
+          Created{' '}
+          {beautifyPastDateRelativeToNow(
+            new Date(calendarEvent.externalCreatedAt),
+          )}
+        </StyledCreatedAt>
+      </StyledHeader>
+      <StyledFields>
+        {Object.entries(fieldsToDisplay).map(([fieldName, fieldOverride]) => (
+          <StyledPropertyBox key={fieldName}>
+            <FieldContext.Provider
+              value={{
+                entityId: calendarEvent.id,
+                hotkeyScope: 'calendar-event-details',
+                recoilScopeId: `${calendarEvent.id}-${fieldName}`,
+                isLabelIdentifier: false,
+                fieldDefinition: formatFieldMetadataItemAsFieldDefinition({
+                  field: {
+                    ...fieldsByName[fieldName],
+                    ...fieldOverride,
+                  },
+                  objectMetadataItem,
+                  showLabel: true,
+                  labelWidth: 72,
+                }),
+                useUpdateRecord: () => [() => undefined, { loading: false }],
+              }}
+            >
+              <RecordInlineCell readonly />
+            </FieldContext.Provider>
+          </StyledPropertyBox>
+        ))}
+      </StyledFields>
+    </StyledContainer>
+  );
+};
--- a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventRow.tsx
+++ b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventRow.tsx
@ -6,8 +6,10 @@ import { useRecoilValue } from 'recoil';

 import { CalendarCurrentEventCursor } from '@/activities/calendar/components/CalendarCurrentEventCursor';
 import { CalendarContext } from '@/activities/calendar/contexts/CalendarContext';
+import { useOpenCalendarEventRightDrawer } from '@/activities/calendar/right-drawer/hooks/useOpenCalendarEventRightDrawer';
 import { CalendarEvent } from '@/activities/calendar/types/CalendarEvent';
 import { getCalendarEventEndDate } from '@/activities/calendar/utils/getCalendarEventEndDate';
+import { getCalendarEventStartDate } from '@/activities/calendar/utils/getCalendarEventStartDate';
 import { hasCalendarEventEnded } from '@/activities/calendar/utils/hasCalendarEventEnded';
 import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
 import { IconArrowRight, IconLock } from '@/ui/display/icon';
@ -22,12 +24,13 @@ type CalendarEventRowProps = {
  className?: string;
 };

-const StyledContainer = styled.div`
+const StyledContainer = styled.div<{ showTitle?: boolean }>`
  align-items: center;
  display: inline-flex;
  gap: ${({ theme }) => theme.spacing(3)};
  height: ${({ theme }) => theme.spacing(6)};
  position: relative;
+  cursor: ${({ showTitle }) => (showTitle ? 'pointer' : 'not-allowed')};
 `;

 const StyledAttendanceIndicator = styled.div<{ active?: boolean }>`
@ -101,21 +104,32 @@ export const CalendarEventRow = ({
  const theme = useTheme();
  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState());
  const { displayCurrentEventCursor = false } = useContext(CalendarContext);
+  const { openCalendarEventRightDrawer } = useOpenCalendarEventRightDrawer();

+  const startsAt = getCalendarEventStartDate(calendarEvent);
  const endsAt = getCalendarEventEndDate(calendarEvent);
  const hasEnded = hasCalendarEventEnded(calendarEvent);

  const startTimeLabel = calendarEvent.isFullDay
    ? 'All day'
-    : format(calendarEvent.startsAt, 'HH:mm');
+    : format(startsAt, 'HH:mm');
  const endTimeLabel = calendarEvent.isFullDay ? '' : format(endsAt, 'HH:mm');

-  const isCurrentWorkspaceMemberAttending = !!calendarEvent.attendees?.find(
+  const isCurrentWorkspaceMemberAttending = calendarEvent.attendees?.some(
    ({ workspaceMemberId }) => workspaceMemberId === currentWorkspaceMember?.id,
  );
+  const showTitle = calendarEvent.visibility === 'SHARE_EVERYTHING';

  return (
-    <StyledContainer className={className}>
+    <StyledContainer
+      className={className}
+      showTitle={showTitle}
+      onClick={
+        showTitle
+          ? () => openCalendarEventRightDrawer(calendarEvent.id)
+          : undefined
+      }
+    >
      <StyledAttendanceIndicator active={isCurrentWorkspaceMemberAttending} />
      <StyledLabels>
        <StyledTime>
@ -127,17 +141,17 @@ export const CalendarEventRow = ({
            </>
          )}
        </StyledTime>
-        {calendarEvent.visibility === 'METADATA' ? (
+        {showTitle ? (
+          <StyledTitle active={!hasEnded} canceled={!!calendarEvent.isCanceled}>
+            {calendarEvent.title}
+          </StyledTitle>
+        ) : (
          <StyledVisibilityCard active={!hasEnded}>
            <StyledVisibilityCardContent>
              <IconLock size={theme.icon.size.sm} />
              Not shared
            </StyledVisibilityCardContent>
          </StyledVisibilityCard>
-        ) : (
-          <StyledTitle active={!hasEnded} canceled={!!calendarEvent.isCanceled}>
-            {calendarEvent.title}
-          </StyledTitle>
        )}
      </StyledLabels>
      {!!calendarEvent.attendees?.length && (