admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

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

Browse Source 
* 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
This commit is contained in:
Thaïs
2024-03-15 13:37:36 -03:00
committed by GitHub
parent 680bb11f19
commit 38f28de4a6
31 changed files with 530 additions and 231 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
packages/twenty-front/src/modules/activities/calendar/components/CalendarEventRow.tsx
View File

@ -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 && (