From 0f4796bd1a86ca7e00de0a10daccda75256f7f72 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tha=C3=AFs?= Date: Tue, 21 Nov 2023 16:23:35 +0100 Subject: [PATCH] feat: improve Relation field type tag (#2606) * feat: improve Relation field type tag Closes #2359 * refactor: code review - rename dataTypes to settingsFieldMetadataTypes * refactor: code review - style Icon with styled --- .../hooks/useRelationMetadata.ts | 2 +- .../components/SettingsObjectFieldPreview.tsx | 4 +- .../SettingsObjectFieldTypeSelectSection.tsx | 8 ++-- ...Types.ts => settingsFieldMetadataTypes.ts} | 2 +- .../SettingsObjectFieldDataType.tsx | 39 +++++++++++---- .../SettingsObjectFieldItemTableRow.tsx | 48 +++++++++++++++---- .../ui/display/icon/types/IconComponent.ts | 1 + .../data-model/SettingsObjectDetail.tsx | 4 +- .../SettingsObjectNewFieldStep1.tsx | 4 +- 9 files changed, 82 insertions(+), 30 deletions(-) rename front/src/modules/settings/data-model/constants/{dataTypes.ts => settingsFieldMetadataTypes.ts} (97%) diff --git a/front/src/modules/object-metadata/hooks/useRelationMetadata.ts b/front/src/modules/object-metadata/hooks/useRelationMetadata.ts index 5276369d2..b6d2657d8 100644 --- a/front/src/modules/object-metadata/hooks/useRelationMetadata.ts +++ b/front/src/modules/object-metadata/hooks/useRelationMetadata.ts @@ -19,7 +19,7 @@ export const useRelationMetadata = ({ relationMetadata?.relationType === RelationMetadataType.OneToMany && fieldMetadataItem?.toRelationMetadata ? 'MANY_TO_ONE' - : (relationMetadata?.relationType as RelationType); + : (relationMetadata?.relationType as RelationType | undefined); const relationObjectMetadataId = relationMetadata && 'toObjectMetadata' in relationMetadata diff --git a/front/src/modules/settings/data-model/components/SettingsObjectFieldPreview.tsx b/front/src/modules/settings/data-model/components/SettingsObjectFieldPreview.tsx index f542751b3..f583600cf 100644 --- a/front/src/modules/settings/data-model/components/SettingsObjectFieldPreview.tsx +++ b/front/src/modules/settings/data-model/components/SettingsObjectFieldPreview.tsx @@ -10,7 +10,7 @@ import { Field } from '~/generated/graphql'; import { FieldMetadataType } from '~/generated-metadata/graphql'; import { SettingsObjectFieldPreviewValueEffect } from '../components/SettingsObjectFieldPreviewValueEffect'; -import { dataTypes } from '../constants/dataTypes'; +import { settingsFieldMetadataTypes } from '../constants/settingsFieldMetadataTypes'; import { useFieldPreview } from '../hooks/useFieldPreview'; import { useRelationFieldPreview } from '../hooks/useRelationFieldPreview'; @@ -99,7 +99,7 @@ export const SettingsObjectFieldPreview = ({ const defaultValue = fieldMetadata.type === FieldMetadataType.Relation ? relationDefaultValue - : dataTypes[fieldMetadata.type].defaultValue; + : settingsFieldMetadataTypes[fieldMetadata.type].defaultValue; return ( diff --git a/front/src/modules/settings/data-model/components/SettingsObjectFieldTypeSelectSection.tsx b/front/src/modules/settings/data-model/components/SettingsObjectFieldTypeSelectSection.tsx index 412e5fbc4..f8c717f75 100644 --- a/front/src/modules/settings/data-model/components/SettingsObjectFieldTypeSelectSection.tsx +++ b/front/src/modules/settings/data-model/components/SettingsObjectFieldTypeSelectSection.tsx @@ -5,8 +5,8 @@ import { Select } from '@/ui/input/components/Select'; import { Section } from '@/ui/layout/section/components/Section'; import { Field, FieldMetadataType } from '~/generated-metadata/graphql'; -import { dataTypes } from '../constants/dataTypes'; import { relationTypes } from '../constants/relationTypes'; +import { settingsFieldMetadataTypes } from '../constants/settingsFieldMetadataTypes'; import { SettingsObjectFieldPreview, @@ -55,11 +55,11 @@ export const SettingsObjectFieldTypeSelectSection = ({ }: SettingsObjectFieldTypeSelectSectionProps) => { const relationFormConfig = values?.relation; - const fieldTypeOptions = Object.entries(dataTypes) + const fieldTypeOptions = Object.entries(settingsFieldMetadataTypes) .filter(([key]) => !excludedFieldTypes?.includes(key as FieldMetadataType)) - .map(([key, dataType]) => ({ + .map(([key, dataTypeConfig]) => ({ value: key as FieldMetadataType, - ...dataType, + ...dataTypeConfig, })); return ( diff --git a/front/src/modules/settings/data-model/constants/dataTypes.ts b/front/src/modules/settings/data-model/constants/settingsFieldMetadataTypes.ts similarity index 97% rename from front/src/modules/settings/data-model/constants/dataTypes.ts rename to front/src/modules/settings/data-model/constants/settingsFieldMetadataTypes.ts index faf118579..f157d1c57 100644 --- a/front/src/modules/settings/data-model/constants/dataTypes.ts +++ b/front/src/modules/settings/data-model/constants/settingsFieldMetadataTypes.ts @@ -18,7 +18,7 @@ import { FieldMetadataType } from '~/generated-metadata/graphql'; const defaultDateValue = new Date(); defaultDateValue.setFullYear(defaultDateValue.getFullYear() + 2); -export const dataTypes: Record< +export const settingsFieldMetadataTypes: Record< FieldMetadataType, { label: string; Icon: IconComponent; defaultValue?: unknown } > = { diff --git a/front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldDataType.tsx b/front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldDataType.tsx index 2942cef57..a8d332bee 100644 --- a/front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldDataType.tsx +++ b/front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldDataType.tsx @@ -1,9 +1,17 @@ import { css, useTheme } from '@emotion/react'; import styled from '@emotion/styled'; +import { IconComponent } from '@/ui/display/icon/types/IconComponent'; import { FieldMetadataType } from '~/generated-metadata/graphql'; -import { dataTypes } from '../../constants/dataTypes'; +import { settingsFieldMetadataTypes } from '../../constants/settingsFieldMetadataTypes'; + +type SettingsObjectFieldDataTypeProps = { + onClick?: () => void; + Icon?: IconComponent; + label?: string; + value: FieldMetadataType; +}; const StyledDataType = styled.div<{ value: FieldMetadataType }>` align-items: center; @@ -13,8 +21,16 @@ const StyledDataType = styled.div<{ value: FieldMetadataType }>` font-size: ${({ theme }) => theme.font.size.sm}; gap: ${({ theme }) => theme.spacing(1)}; height: 20px; + overflow: hidden; padding: 0 ${({ theme }) => theme.spacing(2)}; + ${({ onClick }) => + onClick + ? css` + cursor: pointer; + ` + : ''} + ${({ theme, value }) => value === FieldMetadataType.Relation ? css` @@ -24,21 +40,28 @@ const StyledDataType = styled.div<{ value: FieldMetadataType }>` : ''} `; -type SettingsObjectFieldDataTypeProps = { - value: FieldMetadataType; -}; +const StyledLabelContainer = styled.div` + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +`; export const SettingsObjectFieldDataType = ({ + onClick, value, + Icon = settingsFieldMetadataTypes[value].Icon, + label = settingsFieldMetadataTypes[value].label, }: SettingsObjectFieldDataTypeProps) => { const theme = useTheme(); - const { label, Icon } = dataTypes?.[value]; + const StyledIcon = styled(Icon)` + flex: 1 0 auto; + `; return ( - - - {label} + + + {label} ); }; diff --git a/front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx b/front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx index d4009cb77..dd1cf7c92 100644 --- a/front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx +++ b/front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx @@ -1,19 +1,23 @@ import { ReactNode } from 'react'; +import { useNavigate } from 'react-router-dom'; import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; +import { useRelationMetadata } from '@/object-metadata/hooks/useRelationMetadata'; import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem'; +import { getObjectSlug } from '@/object-metadata/utils/getObjectSlug'; import { useLazyLoadIcon } from '@/ui/input/hooks/useLazyLoadIcon'; import { TableCell } from '@/ui/layout/table/components/TableCell'; import { TableRow } from '@/ui/layout/table/components/TableRow'; -import { dataTypes } from '../../constants/dataTypes'; +import { relationTypes } from '../../constants/relationTypes'; +import { settingsFieldMetadataTypes } from '../../constants/settingsFieldMetadataTypes'; import { SettingsObjectFieldDataType } from './SettingsObjectFieldDataType'; type SettingsObjectFieldItemTableRowProps = { ActionIcon: ReactNode; - fieldItem: FieldMetadataItem; + fieldMetadataItem: FieldMetadataItem; }; export const StyledObjectFieldTableRow = styled(TableRow)` @@ -32,27 +36,51 @@ const StyledIconTableCell = styled(TableCell)` export const SettingsObjectFieldItemTableRow = ({ ActionIcon, - fieldItem, + fieldMetadataItem: fieldMetadataItem, }: SettingsObjectFieldItemTableRowProps) => { const theme = useTheme(); - const { Icon } = useLazyLoadIcon(fieldItem.icon ?? ''); + const { Icon } = useLazyLoadIcon(fieldMetadataItem.icon ?? ''); + const navigate = useNavigate(); // TODO: parse with zod and merge types with FieldType (create a subset of FieldType for example) - const fieldDataTypeIsSupported = Object.keys(dataTypes).includes( - fieldItem.type, - ); + const fieldDataTypeIsSupported = + fieldMetadataItem.type in settingsFieldMetadataTypes; + + const { relationObjectMetadataItem, relationType } = useRelationMetadata({ + fieldMetadataItem, + }); if (!fieldDataTypeIsSupported) return null; + const RelationIcon = relationType + ? relationTypes[relationType].Icon + : undefined; + return ( {!!Icon && } - {fieldItem.label} + {fieldMetadataItem.label} - {fieldItem.isCustom ? 'Custom' : 'Standard'} - + {fieldMetadataItem.isCustom ? 'Custom' : 'Standard'} + + + + navigate( + `/settings/objects/${getObjectSlug( + relationObjectMetadataItem, + )}`, + ) + : undefined + } + value={fieldMetadataItem.type} + /> {ActionIcon} diff --git a/front/src/modules/ui/display/icon/types/IconComponent.ts b/front/src/modules/ui/display/icon/types/IconComponent.ts index 15fdafb1d..b66ffc568 100644 --- a/front/src/modules/ui/display/icon/types/IconComponent.ts +++ b/front/src/modules/ui/display/icon/types/IconComponent.ts @@ -1,6 +1,7 @@ import { FunctionComponent } from 'react'; export type IconComponent = FunctionComponent<{ + className?: string; color?: string; size?: number; stroke?: number; diff --git a/front/src/pages/settings/data-model/SettingsObjectDetail.tsx b/front/src/pages/settings/data-model/SettingsObjectDetail.tsx index 3946cfd82..0e6cc5f80 100644 --- a/front/src/pages/settings/data-model/SettingsObjectDetail.tsx +++ b/front/src/pages/settings/data-model/SettingsObjectDetail.tsx @@ -94,7 +94,7 @@ export const SettingsObjectDetail = () => { {activeMetadataFields.map((activeMetadataField) => ( { {disabledMetadataFields.map((disabledMetadataField) => ( { {activeMetadataFields.map((field) => ( { {disabledMetadataFields.map((field) => (