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

feat: add calendar event attendees avatar group (#4384)

Browse Source 
* feat: add calendar event attendees avatar group

Closes #4290

* fix: take CalendarEventAttendee data model into account

* feat: add Color code section to Calendar Settings (#4420)

Closes #4293

* Fix lint

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
This commit is contained in:
Thaïs
2024-03-12 10:58:34 -03:00
committed by GitHub
parent ab4ab1dfba
commit 41c7cd8cf7
9 changed files with 227 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/twenty-front/src/modules/activities/calendar/components/Calendar.tsx
View File

@ -42,6 +42,7 @@ export const Calendar = () => {
value={{
calendarEventsByDayTime,
currentCalendarEvent,
displayCurrentEventCursor: true,
getNextCalendarEvent,
updateCurrentCalendarEvent,
}}

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

@ -1,14 +1,21 @@
import { useContext } from 'react';
import { css, useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { format } from 'date-fns';
import { useRecoilValue } from 'recoil';
import { CalendarCurrentEventCursor } from '@/activities/calendar/components/CalendarCurrentEventCursor';
import { CalendarContext } from '@/activities/calendar/contexts/CalendarContext';
import { CalendarEvent } from '@/activities/calendar/types/CalendarEvent';
import { getCalendarEventEndDate } from '@/activities/calendar/utils/getCalendarEventEndDate';
import { hasCalendarEventEnded } from '@/activities/calendar/utils/hasCalendarEventEnded';
import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
import { IconArrowRight, IconLock } from '@/ui/display/icon';
import { Card } from '@/ui/layout/card/components/Card';
import { CardContent } from '@/ui/layout/card/components/CardContent';
import { Avatar } from '@/users/components/Avatar';
import { AvatarGroup } from '@/users/components/AvatarGroup';
import { isDefined } from '~/utils/isDefined';
type CalendarEventRowProps = {
calendarEvent: CalendarEvent;
@ -92,6 +99,8 @@ export const CalendarEventRow = ({
className,
}: CalendarEventRowProps) => {
const theme = useTheme();
const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState());
const { displayCurrentEventCursor = false } = useContext(CalendarContext);
const endsAt = getCalendarEventEndDate(calendarEvent);
const hasEnded = hasCalendarEventEnded(calendarEvent);
@ -101,9 +110,13 @@ export const CalendarEventRow = ({
: format(calendarEvent.startsAt, 'HH:mm');
const endTimeLabel = calendarEvent.isFullDay ? '' : format(endsAt, 'HH:mm');
const isCurrentWorkspaceMemberAttending = !!calendarEvent.attendees?.find(
({ workspaceMemberId }) => workspaceMemberId === currentWorkspaceMember?.id,
);
return (
<StyledContainer className={className}>
<StyledAttendanceIndicator />
<StyledAttendanceIndicator active={isCurrentWorkspaceMemberAttending} />
<StyledLabels>
<StyledTime>
{startTimeLabel}
@ -127,7 +140,27 @@ export const CalendarEventRow = ({
</StyledTitle>
)}
</StyledLabels>
<CalendarCurrentEventCursor calendarEvent={calendarEvent} />
{!!calendarEvent.attendees?.length && (
<AvatarGroup
avatars={calendarEvent.attendees.map((attendee) => (
<Avatar
key={[attendee.workspaceMemberId, attendee.displayName]
.filter(isDefined)
.join('-')}
avatarUrl={
attendee.workspaceMemberId === currentWorkspaceMember?.id
? currentWorkspaceMember?.avatarUrl
: undefined
}
placeholder={attendee.displayName}
type="rounded"
/>
))}
/>
)}
{displayCurrentEventCursor && (
<CalendarCurrentEventCursor calendarEvent={calendarEvent} />
)}
</StyledContainer>
);
};

1
packages/twenty-front/src/modules/activities/calendar/contexts/CalendarContext.ts
View File

@ -5,6 +5,7 @@ import { CalendarEvent } from '@/activities/calendar/types/CalendarEvent';
type CalendarContextValue = {
calendarEventsByDayTime: Record<number, CalendarEvent[] | undefined>;
currentCalendarEvent: CalendarEvent;
displayCurrentEventCursor?: boolean;
getNextCalendarEvent: (
calendarEvent: CalendarEvent,
) => CalendarEvent | undefined;

4
packages/twenty-front/src/modules/activities/calendar/types/CalendarEvent.ts
View File

@ -7,4 +7,8 @@ export type CalendarEvent = {
isCanceled?: boolean;
title?: string;
visibility: 'METADATA' | 'SHARE_EVERYTHING';
attendees?: {
displayName: string;
workspaceMemberId?: string;
}[];
};

73
packages/twenty-front/src/modules/users/components/Avatar.tsx
View File

@ -12,7 +12,7 @@ export type AvatarType = 'squared' | 'rounded';
export type AvatarSize = 'xl' | 'lg' | 'md' | 'sm' | 'xs';
export type AvatarProps = {
avatarUrl: string | null | undefined;
avatarUrl?: string | null;
className?: string;
size?: AvatarSize;
placeholder: string | undefined;
@ -23,6 +23,29 @@ export type AvatarProps = {
onClick?: () => void;
};
const propertiesBySize = {
xl: {
fontSize: '16px',
width: '40px',
},
lg: {
fontSize: '13px',
width: '24px',
},
md: {
fontSize: '12px',
width: '16px',
},
sm: {
fontSize: '10px',
width: '14px',
},
xs: {
fontSize: '8px',
width: '12px',
},
};
export const StyledAvatar = styled.div<
AvatarProps & { color: string; backgroundColor: string }
>`
@ -38,54 +61,12 @@ export const StyledAvatar = styled.div<
display: flex;
flex-shrink: 0;
font-size: ${({ size }) => {
switch (size) {
case 'xl':
return '16px';
case 'lg':
return '13px';
case 'md':
default:
return '12px';
case 'sm':
return '10px';
case 'xs':
return '8px';
}
}};
font-size: ${({ size = 'md' }) => propertiesBySize[size].fontSize};
font-weight: ${({ theme }) => theme.font.weight.medium};
height: ${({ size }) => {
switch (size) {
case 'xl':
return '40px';
case 'lg':
return '24px';
case 'md':
default:
return '16px';
case 'sm':
return '14px';
case 'xs':
return '12px';
}
}};
height: ${({ size = 'md' }) => propertiesBySize[size].width};
justify-content: center;
width: ${({ size }) => {
switch (size) {
case 'xl':
return '40px';
case 'lg':
return '24px';
case 'md':
default:
return '16px';
case 'sm':
return '14px';
case 'xs':
return '12px';
}
}};
width: ${({ size = 'md' }) => propertiesBySize[size].width};
&:hover {
box-shadow: ${({ theme, onClick }) =>

29
packages/twenty-front/src/modules/users/components/AvatarGroup.tsx Normal file
View File

@ -0,0 +1,29 @@
import { ReactNode } from 'react';
import styled from '@emotion/styled';
export type AvatarGroupProps = {
avatars: ReactNode[];
};
const StyledContainer = styled.div`
align-items: center;
display: flex;
`;
const StyledItemContainer = styled.div`
margin-right: -3px;
`;
const MAX_AVATARS_NB = 4;
export const AvatarGroup = ({ avatars }: AvatarGroupProps) => {
if (!avatars.length) return null;
return (
<StyledContainer>
{avatars.slice(0, MAX_AVATARS_NB).map((avatar, index) => (
<StyledItemContainer key={index}>{avatar}</StyledItemContainer>
))}
</StyledContainer>
);
};

68
packages/twenty-front/src/modules/users/components/__stories__/AvatarGroup.stories.tsx Normal file
View File

@ -0,0 +1,68 @@
import { Meta, StoryObj } from '@storybook/react';
import {
Avatar,
AvatarProps,
AvatarSize,
AvatarType,
} from '@/users/components/Avatar';
import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
import { avatarUrl } from '~/testing/mock-data/users';
import { AvatarGroup, AvatarGroupProps } from '../AvatarGroup';
const makeAvatar = (userName: string, props: Partial<AvatarProps> = {}) => (
// eslint-disable-next-line react/jsx-props-no-spreading
<Avatar placeholder={userName} entityId={userName} {...props} />
);
const getAvatars = (commonProps: Partial<AvatarProps> = {}) => [
makeAvatar('Matthew', { avatarUrl, ...commonProps }),
makeAvatar('Sophie', commonProps),
makeAvatar('Jane', commonProps),
makeAvatar('Lily', commonProps),
makeAvatar('John', commonProps),
];
const meta: Meta<
AvatarGroupProps & AvatarProps & { numberOfAvatars?: number }
> = {
title: 'Modules/Users/AvatarGroup',
component: AvatarGroup,
render: ({ numberOfAvatars = 5, ...args }) => (
<AvatarGroup avatars={getAvatars(args).slice(0, numberOfAvatars)} />
),
};
export default meta;
type Story = StoryObj<typeof AvatarGroup>;
export const Default: Story = {
decorators: [ComponentDecorator],
};
export const Catalog: Story = {
parameters: {
catalog: {
dimensions: [
{
name: 'number of avatars',
values: [1, 2, 3, 4, 5],
props: (numberOfAvatars: number) => ({ numberOfAvatars }),
},
{
name: 'types',
values: ['rounded', 'squared'] as AvatarType[],
props: (type: AvatarType) => ({ type }),
},
{
name: 'sizes',
values: ['xs', 'sm', 'md', 'lg', 'xl'] as AvatarSize[],
props: (size: AvatarSize) => ({ size }),
},
],
},
},
decorators: [CatalogDecorator],
};

64
packages/twenty-front/src/pages/settings/accounts/SettingsAccountsCalendars.tsx
View File

@ -1,6 +1,10 @@
import { addMinutes, endOfDay, min, startOfDay } from 'date-fns';
import { useRecoilValue } from 'recoil';
import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
import { CalendarMonthCard } from '@/activities/calendar/components/CalendarMonthCard';
import { CalendarContext } from '@/activities/calendar/contexts/CalendarContext';
import { CalendarEvent } from '@/activities/calendar/types/CalendarEvent';
import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
@ -27,6 +31,32 @@ export const SettingsAccountsCalendars = () => {
},
});
const exampleStartDate = new Date();
const exampleEndDate = min([
addMinutes(exampleStartDate, 30),
endOfDay(exampleStartDate),
]);
const exampleDayTime = startOfDay(exampleStartDate).getTime();
const exampleCalendarEvent: CalendarEvent = {
id: '',
attendees: [
{
displayName: currentWorkspaceMember
? [
currentWorkspaceMember.name.firstName,
currentWorkspaceMember.name.lastName,
].join(' ')
: '',
workspaceMemberId: currentWorkspaceMember?.id ?? '',
},
],
endsAt: exampleEndDate,
isFullDay: false,
startsAt: exampleStartDate,
title: 'Onboarding call',
visibility: 'SHARE_EVERYTHING',
};
return (
<SubMenuTopBarContainer Icon={IconSettings} title="Settings">
<SettingsPageContainer>
@ -48,13 +78,33 @@ export const SettingsAccountsCalendars = () => {
</Section>
{/* TODO: retrieve connected accounts data from back-end when the Calendar feature is ready. */}
{!!mockedConnectedAccounts.length && (
<Section>
<H2Title
title="Display"
description="Configure how we should display your events in your calendar"
/>
<SettingsAccountsCalendarDisplaySettings />
</Section>
<>
<Section>
<H2Title
title="Display"
description="Configure how we should display your events in your calendar"
/>
<SettingsAccountsCalendarDisplaySettings />
</Section>
<Section>
<H2Title
title="Color code"
description="Events you participated in are displayed in red."
/>
<CalendarContext.Provider
value={{
currentCalendarEvent: exampleCalendarEvent,
calendarEventsByDayTime: {
[exampleDayTime]: [exampleCalendarEvent],
},
getNextCalendarEvent: () => undefined,
updateCurrentCalendarEvent: () => {},
}}
>
<CalendarMonthCard dayTimes={[exampleDayTime]} />
</CalendarContext.Provider>
</Section>
</>
)}
</SettingsPageContainer>
</SubMenuTopBarContainer>

5
packages/twenty-front/src/testing/mock-data/calendar.ts
View File

@ -9,6 +9,11 @@ export const mockedCalendarEvents: CalendarEvent[] = [
isFullDay: false,
startsAt: addDays(new Date().setHours(10, 0), 1),
visibility: 'METADATA',
attendees: [
{ displayName: 'John Doe', workspaceMemberId: 'john-doe' },
{ displayName: 'Jane Doe', workspaceMemberId: 'jane-doe' },
{ displayName: 'Tim Apple', workspaceMemberId: 'tim-apple' },
],
},
{
id: '19b32878-a950-4968-9e3b-ce5da514ea41',