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

Add SettingsCard for Config Data Type and Accounts Settings (#7093)

Browse Source 
https://github.com/twentyhq/twenty/issues/6950
Add new Settings Card for Config Data Type and accounts Settings
Before:
<img width="707" alt="Screenshot 2024-09-11 at 17 43 16"
src="https://github.com/user-attachments/assets/63ff9373-fa86-4b22-8e8b-21483039c3be">
After:
<img width="755" alt="Screenshot 2024-09-17 at 14 15 18"
src="https://github.com/user-attachments/assets/213c24a1-dc1c-4ffb-8890-7c1f63ed376c">
<img width="755" alt="Screenshot 2024-09-17 at 14 15 38"
src="https://github.com/user-attachments/assets/0fc12d19-b92a-493d-80fa-0064cf491fbc">
This commit is contained in:
Ana Sofia Marin Alexandre
2024-09-18 18:32:41 +02:00
committed by GitHub
parent b1cb8998f8
commit cac3e116a3
17 changed files with 207 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsDataModelFieldTypeSelect.tsx
View File

@ -1,8 +1,5 @@
import styled from '@emotion/styled';
import { Controller, useFormContext } from 'react-hook-form';
import { z } from 'zod';
import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
import { SettingsCard } from '@/settings/components/SettingsCard';
import { SETTINGS_FIELD_TYPE_CATEGORIES } from '@/settings/data-model/constants/SettingsFieldTypeCategories';
import { SETTINGS_FIELD_TYPE_CATEGORY_DESCRIPTIONS } from '@/settings/data-model/constants/SettingsFieldTypeCategoryDescriptions';
import {
@ -13,12 +10,14 @@ import { useBooleanSettingsFormInitialValues } from '@/settings/data-model/field
import { useCurrencySettingsFormInitialValues } from '@/settings/data-model/fields/forms/currency/hooks/useCurrencySettingsFormInitialValues';
import { useSelectSettingsFormInitialValues } from '@/settings/data-model/fields/forms/select/hooks/useSelectSettingsFormInitialValues';
import { SettingsSupportedFieldType } from '@/settings/data-model/types/SettingsSupportedFieldType';
import { Button } from '@/ui/input/button/components/Button';
import { TextInput } from '@/ui/input/components/TextInput';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { Section } from '@react-email/components';
import { useState } from 'react';
import { H2Title, IconChevronRight, IconSearch } from 'twenty-ui';
import { Controller, useFormContext } from 'react-hook-form';
import { H2Title, IconSearch } from 'twenty-ui';
import { z } from 'zod';
import { FieldMetadataType } from '~/generated-metadata/graphql';
export const settingsDataModelFieldTypeFormSchema = z.object({
@ -51,13 +50,6 @@ const StyledTypeSelectContainer = styled.div`
width: 100%;
`;
const StyledButton = styled(Button)<{ isActive: boolean }>`
background: ${({ theme, isActive }) =>
isActive ? theme.background.quaternary : theme.background.secondary};
height: 40px;
width: 100%;
border-radius: ${({ theme }) => theme.border.radius.md};
`;
const StyledContainer = styled.div`
display: flex;
gap: ${({ theme }) => theme.spacing(2)};
@ -66,20 +58,13 @@ const StyledContainer = styled.div`
width: 100%;
`;
const StyledButtonContainer = styled.div`
const StyledCardContainer = styled.div`
display: flex;
position: relative;
width: calc(50% - ${({ theme }) => theme.spacing(1)});
`;
const StyledRightChevron = styled(IconChevronRight)`
color: ${({ theme }) => theme.font.color.secondary};
position: absolute;
right: ${({ theme }) => theme.spacing(2)};
top: 50%;
transform: translateY(-50%);
`;
const StyledSearchInput = styled(TextInput)`
width: 100%;
`;
@ -90,9 +75,9 @@ export const SettingsDataModelFieldTypeSelect = ({
fieldMetadataItem,
onFieldTypeSelect,
}: SettingsDataModelFieldTypeSelectProps) => {
const theme = useTheme();
const { control } = useFormContext<SettingsDataModelFieldTypeFormValues>();
const [searchQuery, setSearchQuery] = useState('');
const theme = useTheme();
const fieldTypeConfigs = Object.entries<SettingsFieldTypeConfig>(
SETTINGS_FIELD_TYPE_CONFIGS,
).filter(
@ -136,7 +121,7 @@ export const SettingsDataModelFieldTypeSelect = ({
? (fieldMetadataItem.type as SettingsSupportedFieldType)
: FieldMetadataType.Text
}
render={({ field: { onChange, value } }) => (
render={({ field: { onChange } }) => (
<StyledTypeSelectContainer className={className}>
<Section>
<StyledSearchInput
@ -158,8 +143,8 @@ export const SettingsDataModelFieldTypeSelect = ({
{fieldTypeConfigs
.filter(([, config]) => config.category === category)
.map(([key, config]) => (
<StyledButtonContainer>
<StyledButton
<StyledCardContainer>
<SettingsCard
key={key}
onClick={() => {
onChange(key as SettingsSupportedFieldType);
@ -168,13 +153,15 @@ export const SettingsDataModelFieldTypeSelect = ({
);
onFieldTypeSelect();
}}
Icon={
<config.Icon
size={theme.icon.size.xl}
stroke={theme.icon.stroke.sm}
/>
}
title={config.label}
Icon={config.Icon}
size="small"
isActive={value === key}
/>
<StyledRightChevron size={theme.icon.size.md} />
</StyledButtonContainer>
</StyledCardContainer>
))}
</StyledContainer>
</Section>