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

feat: add next event indicator to Show Page Calendar tab (#4348)

Browse Source 
* feat: add next event indicator to Show Page Calendar tab

Closes #4289

* feat: improve calendar animation

* refactor: add some utils and fix sorting edge case with full day

* refactor: rename CalendarCurrentEventIndicator to CalendarCurrentEventCursor

* fix: fix tests

* Fix lint

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
This commit is contained in:
Thaïs
2024-03-12 10:27:51 -03:00
committed by GitHub
parent 0d8e700239
commit ab4ab1dfba
17 changed files with 668 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
packages/twenty-front/src/modules/activities/calendar/components/CalendarMonthCard.tsx
View File

@ -1,41 +1,34 @@
import { startOfDay } from 'date-fns';
import { useContext } from 'react';
import styled from '@emotion/styled';
import { CalendarDayCardContent } from '@/activities/calendar/components/CalendarDayCardContent';
import { CalendarEvent } from '@/activities/calendar/types/CalendarEvent';
import { CalendarContext } from '@/activities/calendar/contexts/CalendarContext';
import { Card } from '@/ui/layout/card/components/Card';
import { groupArrayItemsBy } from '~/utils/array/groupArrayItemsBy';
import { sortDesc } from '~/utils/sort';
type CalendarMonthCardProps = {
calendarEvents: CalendarEvent[];
dayTimes: number[];
};
export const CalendarMonthCard = ({
calendarEvents,
}: CalendarMonthCardProps) => {
const calendarEventsByDayTime = groupArrayItemsBy(
calendarEvents,
({ startsAt }) => startOfDay(startsAt).getTime(),
);
const sortedDayTimes = Object.keys(calendarEventsByDayTime)
.map(Number)
.sort(sortDesc);
const StyledCard = styled(Card)`
overflow: visible;
`;
export const CalendarMonthCard = ({ dayTimes }: CalendarMonthCardProps) => {
const { calendarEventsByDayTime } = useContext(CalendarContext);
return (
<Card fullWidth>
{sortedDayTimes.map((dayTime, index) => {
const dayCalendarEvents = calendarEventsByDayTime[dayTime];
<StyledCard fullWidth>
{dayTimes.map((dayTime, index) => {
const dayCalendarEvents = calendarEventsByDayTime[dayTime] || [];
return (
!!dayCalendarEvents?.length && (
<CalendarDayCardContent
key={dayTime}
calendarEvents={dayCalendarEvents}
divider={index < sortedDayTimes.length - 1}
/>
)
<CalendarDayCardContent
key={dayTime}
calendarEvents={dayCalendarEvents}
divider={index < dayTimes.length - 1}
/>
);
})}
</Card>
</StyledCard>
);
};