Fix phone input and link input (#2679)

* wip

* phone picker is appearing

* fixing picker placement

* set phone picker width

* fix link input

front/src/modules/ui/object/field/components/FieldInput.tsx

@@ -48,12 +48,22 @@ export const FieldInput = ({
 }: FieldInputProps) => {
   const { fieldDefinition } = useContext(FieldContext);
 
+  console.log(fieldDefinition);
+
   return (
     <>
       {isFieldRelation(fieldDefinition) ? (
         <RecoilScope>
           <RelationFieldInput onSubmit={onSubmit} onCancel={onCancel} />
         </RecoilScope>
+      ) : isFieldPhone(fieldDefinition) ? (
+        <PhoneFieldInput
+          onEnter={onEnter}
+          onEscape={onEscape}
+          onClickOutside={onClickOutside}
+          onTab={onTab}
+          onShiftTab={onShiftTab}
+        />
       ) : isFieldText(fieldDefinition) ? (
         <TextFieldInput
           onEnter={onEnter}
@@ -110,14 +120,6 @@ export const FieldInput = ({
           onTab={onTab}
           onShiftTab={onShiftTab}
         />
-      ) : isFieldPhone(fieldDefinition) ? (
-        <PhoneFieldInput
-          onEnter={onEnter}
-          onEscape={onEscape}
-          onClickOutside={onClickOutside}
-          onTab={onTab}
-          onShiftTab={onShiftTab}
-        />
       ) : isFieldBoolean(fieldDefinition) ? (
         <BooleanFieldInput onSubmit={onSubmit} />
       ) : isFieldProbability(fieldDefinition) ? (

front/src/modules/ui/object/field/meta-types/hooks/usePhoneField.ts

@@ -12,7 +12,8 @@ import { isFieldPhone } from '../../types/guards/isFieldPhone';
 export const usePhoneField = () => {
   const { entityId, fieldDefinition, hotkeyScope } = useContext(FieldContext);
 
-  assertFieldMetadata('PHONE', isFieldPhone, fieldDefinition);
+  //assertFieldMetadata('PHONE', isFieldPhone, fieldDefinition);
+  assertFieldMetadata('TEXT', isFieldPhone, fieldDefinition);
 
   const fieldName = fieldDefinition.metadata.fieldName;
 

front/src/modules/ui/object/field/meta-types/input/components/LinkFieldInput.tsx

@@ -1,7 +1,7 @@
-import { FieldDoubleText } from '../../../types/FieldDoubleText';
+import { TextInput } from '@/ui/object/field/meta-types/input/components/internal/TextInput';
+
 import { useLinkField } from '../../hooks/useLinkField';
 
-import { DoubleTextInput } from './internal/DoubleTextInput';
 import { FieldInputOverlay } from './internal/FieldInputOverlay';
 import { FieldInputEvent } from './DateFieldInput';
 
@@ -22,61 +22,59 @@ export const LinkFieldInput = ({
 }: LinkFieldInputProps) => {
   const { initialValue, hotkeyScope, persistLinkField } = useLinkField();
 
-  const handleEnter = (newURL: FieldDoubleText) => {
+  const handleEnter = (newURL: string) => {
     onEnter?.(() =>
       persistLinkField({
-        url: newURL.firstValue,
-        label: newURL.secondValue,
+        url: newURL,
+        label: newURL,
       }),
     );
   };
 
-  const handleEscape = (newURL: FieldDoubleText) => {
+  const handleEscape = (newURL: string) => {
     onEscape?.(() =>
       persistLinkField({
-        url: newURL.firstValue,
-        label: newURL.secondValue,
+        url: newURL,
+        label: newURL,
       }),
     );
   };
 
   const handleClickOutside = (
     event: MouseEvent | TouchEvent,
-    newURL: FieldDoubleText,
+    newURL: string,
   ) => {
     onClickOutside?.(() =>
       persistLinkField({
-        url: newURL.firstValue,
-        label: newURL.secondValue,
+        url: newURL,
+        label: newURL,
       }),
     );
   };
 
-  const handleTab = (newURL: FieldDoubleText) => {
+  const handleTab = (newURL: string) => {
     onTab?.(() =>
       persistLinkField({
-        url: newURL.firstValue,
-        label: newURL.secondValue,
+        url: newURL,
+        label: newURL,
       }),
     );
   };
 
-  const handleShiftTab = (newURL: FieldDoubleText) => {
+  const handleShiftTab = (newURL: string) => {
     onShiftTab?.(() =>
       persistLinkField({
-        url: newURL.firstValue,
-        label: newURL.secondValue,
+        url: newURL,
+        label: newURL,
       }),
     );
   };
 
   return (
     <FieldInputOverlay>
-      <DoubleTextInput
-        firstValue={initialValue.url}
-        secondValue={initialValue.label}
-        firstValuePlaceholder={'Url'}
-        secondValuePlaceholder={'Label'}
+      <TextInput
+        value={initialValue.url}
+        placeholder="URL"
         hotkeyScope={hotkeyScope}
         onClickOutside={handleClickOutside}
         onEnter={handleEnter}

front/src/modules/ui/object/field/states/selectors/isEntityFieldEmptyFamilySelector.ts

@@ -15,7 +15,6 @@ import { isFieldEmail } from '../../types/guards/isFieldEmail';
 import { isFieldLink } from '../../types/guards/isFieldLink';
 import { isFieldLinkValue } from '../../types/guards/isFieldLinkValue';
 import { isFieldNumber } from '../../types/guards/isFieldNumber';
-import { isFieldPhone } from '../../types/guards/isFieldPhone';
 import { isFieldProbability } from '../../types/guards/isFieldProbability';
 import { isFieldRelation } from '../../types/guards/isFieldRelation';
 import { isFieldRelationValue } from '../../types/guards/isFieldRelationValue';
@@ -43,8 +42,8 @@ export const isEntityFieldEmptyFamilySelector = selectorFamily({
         isFieldNumber(fieldDefinition) ||
         isFieldProbability(fieldDefinition) ||
         isFieldEmail(fieldDefinition) ||
-        isFieldBoolean(fieldDefinition) ||
-        isFieldPhone(fieldDefinition)
+        isFieldBoolean(fieldDefinition)
+        //|| isFieldPhone(fieldDefinition)
       ) {
         const fieldValue = get(entityFieldsFamilyState(entityId))?.[
           fieldName

front/src/modules/ui/object/field/types/FieldMetadata.ts

@@ -1,58 +1,67 @@
 import { EntityForSelect } from '@/ui/input/relation-picker/types/EntityForSelect';
 
 export type FieldUuidMetadata = {
+  objectMetadataNameSingular?: string;
   fieldName: string;
 };
 
 export type FieldBooleanMetadata = {
+  objectMetadataNameSingular?: string;
   fieldName: string;
 };
 
 export type FieldTextMetadata = {
-  objectMetadataNameSingular: string;
+  objectMetadataNameSingular?: string;
   placeHolder: string;
   fieldName: string;
 };
 
 export type FieldDateTimeMetadata = {
+  objectMetadataNameSingular?: string;
   placeHolder: string;
   fieldName: string;
 };
 
 export type FieldNumberMetadata = {
+  objectMetadataNameSingular?: string;
   fieldName: string;
   placeHolder: string;
   isPositive?: boolean;
 };
 
 export type FieldLinkMetadata = {
+  objectMetadataNameSingular?: string;
   placeHolder: string;
   fieldName: string;
 };
 
 export type FieldCurrencyMetadata = {
+  objectMetadataNameSingular?: string;
   fieldName: string;
   placeHolder: string;
   isPositive?: boolean;
 };
 
 export type FieldFullNameMetadata = {
-  objectMetadataNameSingular: string;
+  objectMetadataNameSingular?: string;
   placeHolder: string;
   fieldName: string;
 };
 
 export type FieldEmailMetadata = {
+  objectMetadataNameSingular?: string;
   placeHolder: string;
   fieldName: string;
 };
 
 export type FieldPhoneMetadata = {
+  objectMetadataNameSingular?: string;
   placeHolder: string;
   fieldName: string;
 };
 
 export type FieldProbabilityMetadata = {
+  objectMetadataNameSingular?: string;
   fieldName: string;
 };
 
@@ -63,6 +72,7 @@ export type FieldDefinitionRelationType =
   | 'TO_ONE_OBJECT';
 
 export type FieldRelationMetadata = {
+  objectMetadataNameSingular?: string;
   fieldName: string;
   useEditButton?: boolean;
   relationType?: FieldDefinitionRelationType;

front/src/modules/ui/object/field/types/guards/isFieldPhone.ts

@@ -2,5 +2,8 @@ import { FieldDefinition } from '../FieldDefinition';
 import { FieldMetadata, FieldPhoneMetadata } from '../FieldMetadata';
 
 export const isFieldPhone = (
-  field: Pick<FieldDefinition<FieldMetadata>, 'type'>,
-): field is FieldDefinition<FieldPhoneMetadata> => field.type === 'PHONE';
+  field: Pick<FieldDefinition<FieldMetadata>, 'type' | 'metadata'>,
+): field is FieldDefinition<FieldPhoneMetadata> =>
+  field.metadata.objectMetadataNameSingular === 'person' &&
+  field.metadata.fieldName === 'phone' &&
+  field.type === 'TEXT';