From 1ac521e3a8d07cc840b06355f6759688f9fd6923 Mon Sep 17 00:00:00 2001 From: ehconitin Date: Thu, 10 Oct 2024 00:00:00 +0530 Subject: [PATCH 1/2] breadcrumb DropDown improvement --- ...ngsDataModelNewFieldBreadcrumbDropDown.tsx | 73 ++++++++++++++----- .../SettingsObjectNewFieldSelector.tsx | 11 +-- .../SettingsObjectNewFieldConfigure.tsx | 4 +- 3 files changed, 63 insertions(+), 25 deletions(-) diff --git a/packages/twenty-front/src/modules/settings/data-model/components/SettingsDataModelNewFieldBreadcrumbDropDown.tsx b/packages/twenty-front/src/modules/settings/data-model/components/SettingsDataModelNewFieldBreadcrumbDropDown.tsx index 268cfd2cc8ca..967eb4c21621 100644 --- a/packages/twenty-front/src/modules/settings/data-model/components/SettingsDataModelNewFieldBreadcrumbDropDown.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/components/SettingsDataModelNewFieldBreadcrumbDropDown.tsx @@ -1,3 +1,4 @@ +import { SettingsFieldType } from '@/settings/data-model/types/SettingsFieldType'; import { Button } from '@/ui/input/button/components/Button'; import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu'; @@ -6,13 +7,18 @@ import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem'; import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; -import { useLocation, useNavigate, useParams } from 'react-router-dom'; -import { IconChevronDown } from 'twenty-ui'; +import { + useLocation, + useNavigate, + useParams, + useSearchParams, +} from 'react-router-dom'; +import { IconChevronDown, isDefined } from 'twenty-ui'; const StyledContainer = styled.div` align-items: center; color: ${({ theme }) => theme.font.color.tertiary}; - cursor: pointer; + cursor: default; display: flex; font-size: ${({ theme }) => theme.font.size.md}; `; @@ -30,10 +36,24 @@ const StyledDownChevron = styled(IconChevronDown)` transform: translateY(-50%); `; -const StyledMenuItem = styled(MenuItem)<{ selected?: boolean }>` +const StyledMenuItemWrapper = styled.div<{ disabled?: boolean }>` + cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')}; + width: 100%; +`; + +const StyledMenuItem = styled(MenuItem)<{ + selected?: boolean; + disabled?: boolean; +}>` background: ${({ theme, selected }) => selected ? theme.background.quaternary : 'transparent'}; - cursor: pointer; + opacity: ${({ disabled }) => (disabled ? 0.5 : 1)}; + pointer-events: ${({ disabled }) => (disabled ? 'none' : 'auto')}; + + &:hover { + background: ${({ theme, disabled }) => + disabled ? 'transparent' : theme.background.tertiary}; + } `; const StyledSpan = styled.span` @@ -51,15 +71,25 @@ export const SettingsDataModelNewFieldBreadcrumbDropDown = () => { const navigate = useNavigate(); const location = useLocation(); const { objectSlug = '' } = useParams(); + const [searchParams] = useSearchParams(); const theme = useTheme(); + const fieldType = searchParams.get('fieldType') as SettingsFieldType; const isConfigureStep = location.pathname.includes('/configure'); - const handleClick = (isConfigureStep: boolean) => { - if (isConfigureStep) { - navigate(`/settings/objects/${objectSlug}/new-field/configure`); + const handleClick = (step: 'select' | 'configure') => { + if (step === 'configure') { + if (isDefined(fieldType)) { + navigate( + `/settings/objects/${objectSlug}/new-field/configure?fieldType=${fieldType}`, + ); + } else { + return; + } } else { - navigate(`/settings/objects/${objectSlug}/new-field/select`); + navigate( + `/settings/objects/${objectSlug}/new-field/select${fieldType ? `?fieldType=${fieldType}` : ''}`, + ); } closeDropdown(); }; @@ -83,16 +113,21 @@ export const SettingsDataModelNewFieldBreadcrumbDropDown = () => { dropdownComponents={ - handleClick(false)} - selected={!isConfigureStep} - /> - handleClick(true)} - selected={isConfigureStep} - /> + + handleClick('select')} + selected={!isConfigureStep} + /> + + + handleClick('configure')} + selected={isConfigureStep} + disabled={!isDefined(fieldType)} + /> + } diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsObjectNewFieldSelector.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsObjectNewFieldSelector.tsx index ce83da6f7772..962fb7aaba5d 100644 --- a/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsObjectNewFieldSelector.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsObjectNewFieldSelector.tsx @@ -4,7 +4,6 @@ import { SETTINGS_FIELD_TYPE_CATEGORIES } from '@/settings/data-model/constants/ import { SETTINGS_FIELD_TYPE_CATEGORY_DESCRIPTIONS } from '@/settings/data-model/constants/SettingsFieldTypeCategoryDescriptions'; import { SETTINGS_FIELD_TYPE_CONFIGS } from '@/settings/data-model/constants/SettingsFieldTypeConfigs'; import { SettingsFieldTypeConfig } from '@/settings/data-model/constants/SettingsNonCompositeFieldTypeConfigs'; - import { useBooleanSettingsFormInitialValues } from '@/settings/data-model/fields/forms/boolean/hooks/useBooleanSettingsFormInitialValues'; import { useCurrencySettingsFormInitialValues } from '@/settings/data-model/fields/forms/currency/hooks/useCurrencySettingsFormInitialValues'; import { useSelectSettingsFormInitialValues } from '@/settings/data-model/fields/forms/select/hooks/useSelectSettingsFormInitialValues'; @@ -63,7 +62,8 @@ export const SettingsObjectNewFieldSelector = ({ objectSlug, }: SettingsObjectNewFieldSelectorProps) => { const theme = useTheme(); - const { control } = useFormContext(); + const { control, setValue } = + useFormContext(); const [searchQuery, setSearchQuery] = useState(''); const fieldTypeConfigs = Object.entries>( SETTINGS_FIELD_TYPE_CONFIGS, @@ -131,9 +131,10 @@ export const SettingsObjectNewFieldSelector = ({ - resetDefaultValueField(key as SettingsFieldType) - } + onClick={() => { + setValue('type', key as SettingsFieldType); + resetDefaultValueField(key as SettingsFieldType); + }} > { isSaveDisabled={!canSave} isCancelDisabled={isSubmitting} onCancel={() => - navigate(`/settings/objects/${objectSlug}/new-field/select`) + navigate( + `/settings/objects/${objectSlug}/new-field/select?fieldType=${fieldType}`, + ) } onSave={formConfig.handleSubmit(handleSave)} /> From 978fa7f385c96ca6c27d5ad37549a63f3e284e4e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=A9lix=20Malfait?= Date: Wed, 9 Oct 2024 22:04:28 +0200 Subject: [PATCH 2/2] Simplify if/else structure --- ...tingsDataModelNewFieldBreadcrumbDropDown.tsx | 17 +++++++---------- 1 file changed, 7 insertions(+), 10 deletions(-) diff --git a/packages/twenty-front/src/modules/settings/data-model/components/SettingsDataModelNewFieldBreadcrumbDropDown.tsx b/packages/twenty-front/src/modules/settings/data-model/components/SettingsDataModelNewFieldBreadcrumbDropDown.tsx index 967eb4c21621..18624a59fb34 100644 --- a/packages/twenty-front/src/modules/settings/data-model/components/SettingsDataModelNewFieldBreadcrumbDropDown.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/components/SettingsDataModelNewFieldBreadcrumbDropDown.tsx @@ -78,19 +78,16 @@ export const SettingsDataModelNewFieldBreadcrumbDropDown = () => { const isConfigureStep = location.pathname.includes('/configure'); const handleClick = (step: 'select' | 'configure') => { - if (step === 'configure') { - if (isDefined(fieldType)) { - navigate( - `/settings/objects/${objectSlug}/new-field/configure?fieldType=${fieldType}`, - ); - } else { - return; - } - } else { + if (step === 'configure' && isDefined(fieldType)) { navigate( - `/settings/objects/${objectSlug}/new-field/select${fieldType ? `?fieldType=${fieldType}` : ''}`, + `/settings/objects/${objectSlug}/new-field/configure?fieldType=${fieldType}`, ); + return; } + + navigate( + `/settings/objects/${objectSlug}/new-field/select${fieldType ? `?fieldType=${fieldType}` : ''}`, + ); closeDropdown(); };