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

feat: add Synchronization calendar settings (#4111)

Browse Source 
* feat: add Calendar Settings section to Settings/Accounts/Calendars page

Closes #4060

* refactor: rename components

* feat: add Synchronization calendar settings

Closes #4066
This commit is contained in:
Thaïs
2024-02-21 13:23:06 -03:00
committed by GitHub
parent 5a8a9cd029
commit ee66188656
6 changed files with 32 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsInboxSettingsCardMedia.tsx → packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCardMedia.tsx
View File

@ -14,4 +14,4 @@ const StyledCardMedia = styled.div`
width: ${({ theme }) => theme.spacing(6)};
`;
export { StyledCardMedia as SettingsAccountsInboxSettingsCardMedia };
export { StyledCardMedia as SettingsAccountsCardMedia };

6
packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsInboxSettingsContactAutoCreationSection.tsx
View File

@ -2,7 +2,7 @@ import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { MessageChannel } from '@/accounts/types/MessageChannel';
import { SettingsAccountsInboxSettingsCardMedia } from '@/settings/accounts/components/SettingsAccountsInboxSettingsCardMedia';
import { SettingsAccountsCardMedia } from '@/settings/accounts/components/SettingsAccountsCardMedia';
import { IconUser } from '@/ui/display/icon';
import { H2Title } from '@/ui/display/typography/components/H2Title';
import { Toggle } from '@/ui/input/components/Toggle';
@ -42,9 +42,9 @@ export const SettingsAccountsInboxSettingsContactAutoCreateSection = ({
/>
<Card>
<StyledCardContent>
<SettingsAccountsInboxSettingsCardMedia>
<SettingsAccountsCardMedia>
<IconUser size={theme.icon.size.sm} stroke={theme.icon.stroke.lg} />
</SettingsAccountsInboxSettingsCardMedia>
</SettingsAccountsCardMedia>
<StyledTitle>Auto-creation</StyledTitle>
<Toggle
value={messageChannel.isContactAutoCreationEnabled}

4
packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsInboxSettingsVisibilitySection.tsx
View File

@ -1,6 +1,6 @@
import styled from '@emotion/styled';
import { SettingsAccountsInboxSettingsCardMedia } from '@/settings/accounts/components/SettingsAccountsInboxSettingsCardMedia';
import { SettingsAccountsCardMedia } from '@/settings/accounts/components/SettingsAccountsCardMedia';
import { H2Title } from '@/ui/display/typography/components/H2Title';
import { Radio } from '@/ui/input/components/Radio';
import { Card } from '@/ui/layout/card/components/Card';
@ -29,7 +29,7 @@ const StyledCardContent = styled(CardContent)`
}
`;
const StyledCardMedia = styled(SettingsAccountsInboxSettingsCardMedia)`
const StyledCardMedia = styled(SettingsAccountsCardMedia)`
align-items: stretch;
`;

30
packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsInboxSettingsSynchronizationSection.tsx → packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsSynchronizationSection.tsx
View File

@ -1,8 +1,7 @@
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { MessageChannel } from '@/accounts/types/MessageChannel';
import { SettingsAccountsInboxSettingsCardMedia } from '@/settings/accounts/components/SettingsAccountsInboxSettingsCardMedia';
import { SettingsAccountsCardMedia } from '@/settings/accounts/components/SettingsAccountsCardMedia';
import { IconRefresh } from '@/ui/display/icon';
import { H2Title } from '@/ui/display/typography/components/H2Title';
import { Toggle } from '@/ui/input/components/Toggle';
@ -23,33 +22,34 @@ const StyledTitle = styled.span`
margin-right: auto;
`;
type SettingsAccountsInboxSettingsSynchronizationSectionProps = {
messageChannel: MessageChannel;
type SettingsAccountsSynchronizationSectionProps = {
cardTitle: string;
description: string;
isSynced: boolean;
onToggle: (value: boolean) => void;
};
export const SettingsAccountsInboxSettingsSynchronizationSection = ({
messageChannel,
export const SettingsAccountsSynchronizationSection = ({
cardTitle,
description,
isSynced,
onToggle,
}: SettingsAccountsInboxSettingsSynchronizationSectionProps) => {
}: SettingsAccountsSynchronizationSectionProps) => {
const theme = useTheme();
return (
<Section>
<H2Title
title="Synchronization"
description="Past and future emails will automatically be synced to this workspace"
/>
<H2Title title="Synchronization" description={description} />
<Card>
<StyledCardContent>
<SettingsAccountsInboxSettingsCardMedia>
<SettingsAccountsCardMedia>
<IconRefresh
size={theme.icon.size.sm}
stroke={theme.icon.stroke.lg}
/>
</SettingsAccountsInboxSettingsCardMedia>
<StyledTitle>Sync emails</StyledTitle>
<Toggle value={messageChannel.isSynced} onChange={onToggle} />
</SettingsAccountsCardMedia>
<StyledTitle>{cardTitle}</StyledTitle>
<Toggle value={isSynced} onChange={onToggle} />
</StyledCardContent>
</Card>
</Section>

7
packages/twenty-front/src/pages/settings/accounts/SettingsAccountsCalendarsSettings.tsx
View File

@ -1,5 +1,6 @@
import { useParams } from 'react-router-dom';
import { SettingsAccountsSynchronizationSection } from '@/settings/accounts/components/SettingsAccountsSynchronizationSection';
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
import { SettingsPath } from '@/types/SettingsPath';
@ -30,6 +31,12 @@ export const SettingsAccountsCalendarsSettings = () => {
{ children: connectedAccount?.handle || '' },
]}
/>
<SettingsAccountsSynchronizationSection
description="Past and future calendar events will automatically be synced to this workspace"
cardTitle="Sync events"
isSynced={false}
onToggle={() => {}}
/>
</SettingsPageContainer>
</SubMenuTopBarContainer>
);

6
packages/twenty-front/src/pages/settings/accounts/SettingsAccountsEmailsInboxSettings.tsx
View File

@ -63,8 +63,10 @@ export const SettingsAccountsEmailsInboxSettings = () => {
]}
/>
{/* TODO : discuss the desired sync behaviour */}
{/* <SettingsAccountsInboxSettingsSynchronizationSection
messageChannel={messageChannel}
{/* <SettingsAccountsSynchronizationSection
description="Past and future emails will automatically be synced to this workspace"
cardTitle="Sync emails"
isSynced={!!messageChannel?.isSynced}
onToggle={handleSynchronizationToggle}
/> */}
<SettingsAccountsInboxSettingsVisibilitySection