dynamically prefilling relation label and icon source

twentyhq · Oct 7, 2024 · 21e46e4 · 21e46e4
1 parent b693f7d
commit 21e46e4
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 7 deletions.
diff --git a/...dules/settings/data-model/fields/forms/components/SettingsDataModelFieldIconLabelForm.tsx b/...dules/settings/data-model/fields/forms/components/SettingsDataModelFieldIconLabelForm.tsx
@@ -3,10 +3,14 @@ import { Controller, useFormContext } from 'react-hook-form';
 import { z } from 'zod';
 
 import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
+import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 import { fieldMetadataItemSchema } from '@/object-metadata/validation-schemas/fieldMetadataItemSchema';
 import { getErrorMessageFromError } from '@/settings/data-model/fields/forms/utils/errorMessages';
+import { RelationType } from '@/settings/data-model/types/RelationType';
 import { IconPicker } from '@/ui/input/components/IconPicker';
 import { TextInput } from '@/ui/input/components/TextInput';
+import { useEffect, useState } from 'react';
+import { RelationDefinitionType } from '~/generated-metadata/graphql';
 
 export const settingsDataModelFieldIconLabelFormSchema = (
   existingOtherLabels: string[] = [],
@@ -32,19 +36,47 @@ type SettingsDataModelFieldIconLabelFormProps = {
   disabled?: boolean;
   fieldMetadataItem?: FieldMetadataItem;
   maxLength?: number;
+  relationObjectMetadataItem?: ObjectMetadataItem;
+  relationType?: RelationType;
 };
 
 export const SettingsDataModelFieldIconLabelForm = ({
   disabled,
   fieldMetadataItem,
   maxLength,
+  relationObjectMetadataItem,
+  relationType,
 }: SettingsDataModelFieldIconLabelFormProps) => {
   const {
     control,
     trigger,
     formState: { errors },
+    setValue,
   } = useFormContext<SettingsDataModelFieldIconLabelFormValues>();
 
+  const [labelEditedManually, setLabelEditedManually] = useState(false);
+  const [iconEditedManually, setIconEditedManually] = useState(false);
+
+  useEffect(() => {
+    if (labelEditedManually) return;
+    const label = [
+      RelationDefinitionType.ManyToOne,
+      RelationDefinitionType.ManyToMany,
+    ].includes(relationType ?? RelationDefinitionType.OneToMany)
+      ? relationObjectMetadataItem?.labelPlural
+      : relationObjectMetadataItem?.labelSingular;
+    setValue('label', label ?? '');
+
+    if (iconEditedManually) return;
+    setValue('icon', relationObjectMetadataItem?.icon ?? 'IconUsers');
+  }, [
+    labelEditedManually,
+    iconEditedManually,
+    relationObjectMetadataItem,
+    setValue,
+    relationType,
+  ]);
+
   return (
     <StyledInputsContainer>
       <Controller
@@ -55,7 +87,10 @@ export const SettingsDataModelFieldIconLabelForm = ({
           <IconPicker
             disabled={disabled}
             selectedIconKey={value ?? ''}
-            onChange={({ iconKey }) => onChange(iconKey)}
+            onChange={({ iconKey }) => {
+              setIconEditedManually(true);
+              onChange(iconKey);
+            }}
             variant="primary"
           />
         )}
@@ -69,6 +104,7 @@ export const SettingsDataModelFieldIconLabelForm = ({
             placeholder="Employees"
             value={value}
             onChange={(e) => {
+              setLabelEditedManually(true);
               onChange(e);
               trigger('label');
             }}

diff --git a/...ront/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep2.tsx b/...ront/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep2.tsx
@@ -2,6 +2,7 @@ import { useCreateOneRelationMetadataItem } from '@/object-metadata/hooks/useCre
 import { useFieldMetadataItem } from '@/object-metadata/hooks/useFieldMetadataItem';
 import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
+import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
 import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
 import { RecordFieldValueSelectorContextProvider } from '@/object-record/record-store/contexts/RecordFieldValueSelectorContext';
 import { SaveAndCancelButtons } from '@/settings/components/SaveAndCancelButtons/SaveAndCancelButtons';
@@ -50,7 +51,7 @@ export const SettingsObjectNewFieldStep2 = () => {
   const { enqueueSnackBar } = useSnackBar();
 
   const [isConfigureStep, setIsConfigureStep] = useState(false);
-  const { findActiveObjectMetadataItemBySlug } =
+  const { findActiveObjectMetadataItemBySlug, findObjectMetadataItemById } =
     useFilteredObjectMetadataItems();
 
   const activeObjectMetadataItem =
@@ -66,6 +67,13 @@ export const SettingsObjectNewFieldStep2 = () => {
     ),
   });
 
+  const fieldMetadataItem: Pick<FieldMetadataItem, 'icon' | 'label' | 'type'> =
+    {
+      icon: formConfig.watch('icon'),
+      label: formConfig.watch('label') || 'Employees',
+      type: formConfig.watch('type'),
+    };
+
   useEffect(() => {
     if (!activeObjectMetadataItem) {
       navigate(AppPath.NotFound);
@@ -91,6 +99,10 @@ export const SettingsObjectNewFieldStep2 = () => {
   const relationObjectMetadataId = formConfig.watch(
     'relation.objectMetadataId',
   );
+  const relationType = formConfig.watch('relation.type');
+  const relationObjectMetadataItem = findObjectMetadataItemById(
+    relationObjectMetadataId,
+  );
 
   useFindManyRecords<View>({
     objectNameSingular: CoreObjectNameSingular.View,
@@ -238,6 +250,8 @@ export const SettingsObjectNewFieldStep2 = () => {
                     description="The name and icon of this field"
                   />
                   <SettingsDataModelFieldIconLabelForm
+                    relationObjectMetadataItem={relationObjectMetadataItem}
+                    relationType={relationType}
                     maxLength={FIELD_NAME_MAXIMUM_LENGTH}
                   />
                 </Section>
@@ -249,11 +263,7 @@ export const SettingsObjectNewFieldStep2 = () => {
 
                   <SettingsDataModelFieldSettingsFormCard
                     isCreatingField
-                    fieldMetadataItem={{
-                      icon: formConfig.watch('icon'),
-                      label: formConfig.watch('label') || 'Employees',
-                      type: formConfig.watch('type'),
-                    }}
+                    fieldMetadataItem={fieldMetadataItem}
                     objectMetadataItem={activeObjectMetadataItem}
                   />
                 </Section>