mirror of
https://github.com/twentyhq/twenty.git
synced 2025-01-05 10:54:15 +03:00
Feat/add other metadata types v2 (#2224)
* Fix view fetch bug * Finished types * Removed console.log * Fixed todo * Reactivate no console * Change no-console to warn
This commit is contained in:
parent
00dd046798
commit
c335d19c97
@ -115,7 +115,7 @@ module.exports = {
|
|||||||
},
|
},
|
||||||
],
|
],
|
||||||
"@typescript-eslint/consistent-type-imports": ["error", { "prefer": "no-type-imports" }],
|
"@typescript-eslint/consistent-type-imports": ["error", { "prefer": "no-type-imports" }],
|
||||||
'no-console': ['error', { allow: ['group', 'groupCollapsed', 'groupEnd'] }],
|
'no-console': ['warn', { allow: ['group', 'groupCollapsed', 'groupEnd'] }],
|
||||||
},
|
},
|
||||||
settings: {
|
settings: {
|
||||||
"react": {
|
"react": {
|
||||||
|
@ -14,11 +14,6 @@ import { useFindManyMetadataObjects } from '../hooks/useFindManyMetadataObjects'
|
|||||||
export const MetadataObjectNavItems = () => {
|
export const MetadataObjectNavItems = () => {
|
||||||
const { metadataObjects } = useFindManyMetadataObjects();
|
const { metadataObjects } = useFindManyMetadataObjects();
|
||||||
|
|
||||||
// eslint-disable-next-line no-console
|
|
||||||
console.log({
|
|
||||||
metadataObjects,
|
|
||||||
});
|
|
||||||
|
|
||||||
const createNewTempCustomObject = useCreateNewTempsCustomObject();
|
const createNewTempCustomObject = useCreateNewTempsCustomObject();
|
||||||
|
|
||||||
const { deleteOneMetadataObject } = useDeleteOneMetadataObject();
|
const { deleteOneMetadataObject } = useDeleteOneMetadataObject();
|
||||||
|
@ -63,8 +63,6 @@ export const ObjectDataTableEffect = ({
|
|||||||
const viewId = searchParams.get('view');
|
const viewId = searchParams.get('view');
|
||||||
if (viewId) {
|
if (viewId) {
|
||||||
handleViewSelect(viewId);
|
handleViewSelect(viewId);
|
||||||
} else {
|
|
||||||
handleViewSelect(objectNamePlural);
|
|
||||||
}
|
}
|
||||||
}, [handleViewSelect, searchParams, objectNamePlural]);
|
}, [handleViewSelect, searchParams, objectNamePlural]);
|
||||||
|
|
||||||
|
@ -18,16 +18,55 @@ import { useCreateOneMetadataObject } from './useCreateOneMetadataObject';
|
|||||||
import { useUpdateOneMetadataField } from './useUpdateOneMetadataField';
|
import { useUpdateOneMetadataField } from './useUpdateOneMetadataField';
|
||||||
import { useUpdateOneMetadataObject } from './useUpdateOneMetadataObject';
|
import { useUpdateOneMetadataObject } from './useUpdateOneMetadataObject';
|
||||||
|
|
||||||
|
const useCreateActiveMetadataField = () => {
|
||||||
|
const { createOneMetadataField } = useCreateOneMetadataField();
|
||||||
|
const { updateOneMetadataField } = useUpdateOneMetadataField();
|
||||||
|
|
||||||
|
return async ({
|
||||||
|
objectId,
|
||||||
|
label,
|
||||||
|
name,
|
||||||
|
type,
|
||||||
|
}: {
|
||||||
|
objectId: string;
|
||||||
|
label: string;
|
||||||
|
name: string;
|
||||||
|
type: FieldType;
|
||||||
|
}) => {
|
||||||
|
const { data: createdField } = await createOneMetadataField({
|
||||||
|
objectId: objectId,
|
||||||
|
label: label,
|
||||||
|
name: name,
|
||||||
|
type: type,
|
||||||
|
description: label,
|
||||||
|
icon: 'IconMap',
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!createdField || !createdField.createOneField.name) {
|
||||||
|
throw new Error('Could not create metadata field');
|
||||||
|
}
|
||||||
|
|
||||||
|
await updateOneMetadataField({
|
||||||
|
fieldIdToUpdate: createdField?.createOneField?.id ?? '',
|
||||||
|
updatePayload: {
|
||||||
|
isActive: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
return createdField.createOneField;
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
export const useCreateNewTempsCustomObject = () => {
|
export const useCreateNewTempsCustomObject = () => {
|
||||||
const { createOneMetadataObject } = useCreateOneMetadataObject();
|
const { createOneMetadataObject } = useCreateOneMetadataObject();
|
||||||
const { createOneMetadataField } = useCreateOneMetadataField();
|
|
||||||
|
|
||||||
const { updateOneMetadataObject } = useUpdateOneMetadataObject();
|
const { updateOneMetadataObject } = useUpdateOneMetadataObject();
|
||||||
const { updateOneMetadataField } = useUpdateOneMetadataField();
|
|
||||||
|
|
||||||
const [createViewMutation] = useCreateViewMutation();
|
const [createViewMutation] = useCreateViewMutation();
|
||||||
const [createViewFieldsMutation] = useCreateViewFieldsMutation();
|
const [createViewFieldsMutation] = useCreateViewFieldsMutation();
|
||||||
|
|
||||||
|
const createActiveMetadataField = useCreateActiveMetadataField();
|
||||||
|
|
||||||
return async () => {
|
return async () => {
|
||||||
const date = new Date().toISOString().replace(/[\/:\.\-\_]/g, '');
|
const date = new Date().toISOString().replace(/[\/:\.\-\_]/g, '');
|
||||||
|
|
||||||
@ -53,64 +92,67 @@ export const useCreateNewTempsCustomObject = () => {
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const { data: nameFieldData } = await createOneMetadataField({
|
const nameFieldData = await createActiveMetadataField({
|
||||||
objectId: supplierObjectId,
|
|
||||||
name: 'name',
|
|
||||||
type: 'text',
|
|
||||||
description: 'Name',
|
|
||||||
label: 'Name',
|
label: 'Name',
|
||||||
icon: 'IconBuilding',
|
name: 'name',
|
||||||
});
|
|
||||||
|
|
||||||
if (!nameFieldData || !nameFieldData.createOneField.name) {
|
|
||||||
throw new Error('Could not create metadata field');
|
|
||||||
}
|
|
||||||
|
|
||||||
await updateOneMetadataField({
|
|
||||||
fieldIdToUpdate: nameFieldData?.createOneField?.id ?? '',
|
|
||||||
updatePayload: {
|
|
||||||
isActive: true,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const { data: cityFieldData } = await createOneMetadataField({
|
|
||||||
objectId: supplierObjectId,
|
objectId: supplierObjectId,
|
||||||
|
type: 'text',
|
||||||
|
});
|
||||||
|
|
||||||
|
const cityFieldData = await createActiveMetadataField({
|
||||||
label: 'City',
|
label: 'City',
|
||||||
name: 'city',
|
name: 'city',
|
||||||
type: 'text',
|
|
||||||
description: 'City',
|
|
||||||
icon: 'IconMap',
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!cityFieldData || !cityFieldData.createOneField.name) {
|
|
||||||
throw new Error('Could not create metadata field');
|
|
||||||
}
|
|
||||||
|
|
||||||
await updateOneMetadataField({
|
|
||||||
fieldIdToUpdate: cityFieldData?.createOneField?.id ?? '',
|
|
||||||
updatePayload: {
|
|
||||||
isActive: true,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const { data: emailFieldData } = await createOneMetadataField({
|
|
||||||
objectId: supplierObjectId,
|
objectId: supplierObjectId,
|
||||||
|
type: 'text',
|
||||||
|
});
|
||||||
|
|
||||||
|
const emailFieldData = await createActiveMetadataField({
|
||||||
label: 'Email',
|
label: 'Email',
|
||||||
name: 'email',
|
name: 'email',
|
||||||
type: 'url',
|
objectId: supplierObjectId,
|
||||||
description: 'Email',
|
type: 'email',
|
||||||
icon: 'IconMap',
|
|
||||||
});
|
});
|
||||||
|
|
||||||
if (!emailFieldData || !emailFieldData.createOneField.name) {
|
const phoneFieldData = await createActiveMetadataField({
|
||||||
throw new Error('Could not create metadata field');
|
label: 'Phone',
|
||||||
}
|
name: 'phone',
|
||||||
|
objectId: supplierObjectId,
|
||||||
|
type: 'phone',
|
||||||
|
});
|
||||||
|
|
||||||
await updateOneMetadataField({
|
const twitterFieldData = await createActiveMetadataField({
|
||||||
fieldIdToUpdate: emailFieldData?.createOneField?.id ?? '',
|
label: 'Twitter',
|
||||||
updatePayload: {
|
name: 'twitter',
|
||||||
isActive: true,
|
objectId: supplierObjectId,
|
||||||
},
|
type: 'url',
|
||||||
|
});
|
||||||
|
|
||||||
|
const booleanFieldData = await createActiveMetadataField({
|
||||||
|
label: 'Boolean example',
|
||||||
|
name: 'boolexample',
|
||||||
|
objectId: supplierObjectId,
|
||||||
|
type: 'boolean',
|
||||||
|
});
|
||||||
|
|
||||||
|
const employeesFieldData = await createActiveMetadataField({
|
||||||
|
label: 'Employees',
|
||||||
|
name: 'employees',
|
||||||
|
objectId: supplierObjectId,
|
||||||
|
type: 'number',
|
||||||
|
});
|
||||||
|
|
||||||
|
const ARRFieldData = await createActiveMetadataField({
|
||||||
|
label: 'ARR',
|
||||||
|
name: 'arr',
|
||||||
|
objectId: supplierObjectId,
|
||||||
|
type: 'money',
|
||||||
|
});
|
||||||
|
|
||||||
|
const createdAt = await createActiveMetadataField({
|
||||||
|
label: 'Created at',
|
||||||
|
name: 'createdAt',
|
||||||
|
objectId: supplierObjectId,
|
||||||
|
type: 'date',
|
||||||
});
|
});
|
||||||
|
|
||||||
const objectId = 'suppliers' + date;
|
const objectId = 'suppliers' + date;
|
||||||
@ -127,9 +169,15 @@ export const useCreateNewTempsCustomObject = () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
const createdFields = [
|
const createdFields = [
|
||||||
emailFieldData.createOneField,
|
emailFieldData,
|
||||||
nameFieldData.createOneField,
|
nameFieldData,
|
||||||
cityFieldData.createOneField,
|
cityFieldData,
|
||||||
|
phoneFieldData,
|
||||||
|
twitterFieldData,
|
||||||
|
booleanFieldData,
|
||||||
|
employeesFieldData,
|
||||||
|
ARRFieldData,
|
||||||
|
createdAt,
|
||||||
];
|
];
|
||||||
|
|
||||||
const tempColumnDefinitions: ColumnDefinition<FieldMetadata>[] =
|
const tempColumnDefinitions: ColumnDefinition<FieldMetadata>[] =
|
||||||
|
@ -31,12 +31,6 @@ export const useFindOneMetadataObject = ({
|
|||||||
}),
|
}),
|
||||||
) ?? [];
|
) ?? [];
|
||||||
|
|
||||||
// eslint-disable-next-line no-console
|
|
||||||
console.log({
|
|
||||||
foundMetadataObject,
|
|
||||||
columnDefinitions,
|
|
||||||
});
|
|
||||||
|
|
||||||
const findManyQuery = foundMetadataObject
|
const findManyQuery = foundMetadataObject
|
||||||
? generateFindManyCustomObjectsQuery({
|
? generateFindManyCustomObjectsQuery({
|
||||||
metadataObject: foundMetadataObject,
|
metadataObject: foundMetadataObject,
|
||||||
|
@ -10,6 +10,10 @@ const parseFieldType = (fieldType: string): FieldType => {
|
|||||||
return 'urlV2';
|
return 'urlV2';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (fieldType === 'money') {
|
||||||
|
return 'moneyAmountV2';
|
||||||
|
}
|
||||||
|
|
||||||
return fieldType as FieldType;
|
return fieldType as FieldType;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -1,9 +1,9 @@
|
|||||||
import { gql } from '@apollo/client';
|
import { gql } from '@apollo/client';
|
||||||
|
|
||||||
import { FieldType } from '@/ui/data/field/types/FieldType';
|
|
||||||
|
|
||||||
import { MetadataObject } from '../types/MetadataObject';
|
import { MetadataObject } from '../types/MetadataObject';
|
||||||
|
|
||||||
|
import { mapFieldMetadataToGraphQLQuery } from './mapFieldMetadataToGraphQLQuery';
|
||||||
|
|
||||||
export const generateFindManyCustomObjectsQuery = ({
|
export const generateFindManyCustomObjectsQuery = ({
|
||||||
metadataObject,
|
metadataObject,
|
||||||
_fromCursor,
|
_fromCursor,
|
||||||
@ -18,22 +18,7 @@ export const generateFindManyCustomObjectsQuery = ({
|
|||||||
node {
|
node {
|
||||||
id
|
id
|
||||||
${metadataObject.fields
|
${metadataObject.fields
|
||||||
.map((field) => {
|
.map(mapFieldMetadataToGraphQLQuery)
|
||||||
// TODO: parse
|
|
||||||
const fieldType = field.type as FieldType;
|
|
||||||
|
|
||||||
if (fieldType === 'text') {
|
|
||||||
return field.name;
|
|
||||||
} else if (fieldType === 'url') {
|
|
||||||
return `
|
|
||||||
${field.name}
|
|
||||||
{
|
|
||||||
text
|
|
||||||
link
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.join('\n')}
|
.join('\n')}
|
||||||
}
|
}
|
||||||
cursor
|
cursor
|
||||||
|
@ -0,0 +1,44 @@
|
|||||||
|
import { FieldType } from '@/ui/data/field/types/FieldType';
|
||||||
|
import { Field } from '~/generated/graphql';
|
||||||
|
|
||||||
|
export const mapFieldMetadataToGraphQLQuery = (field: Field) => {
|
||||||
|
// TODO: parse
|
||||||
|
const fieldType = field.type as FieldType;
|
||||||
|
|
||||||
|
const fieldIsSimpleValue = (
|
||||||
|
[
|
||||||
|
'text',
|
||||||
|
'phone',
|
||||||
|
'date',
|
||||||
|
'email',
|
||||||
|
'number',
|
||||||
|
'boolean',
|
||||||
|
'date',
|
||||||
|
] as FieldType[]
|
||||||
|
).includes(fieldType);
|
||||||
|
|
||||||
|
const fieldIsURL = fieldType === 'url' || fieldType === 'urlV2';
|
||||||
|
|
||||||
|
const fieldIsMoneyAmount =
|
||||||
|
fieldType === 'money' || fieldType === 'moneyAmountV2';
|
||||||
|
|
||||||
|
if (fieldIsSimpleValue) {
|
||||||
|
return field.name;
|
||||||
|
} else if (fieldIsURL) {
|
||||||
|
return `
|
||||||
|
${field.name}
|
||||||
|
{
|
||||||
|
text
|
||||||
|
link
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
} else if (fieldIsMoneyAmount) {
|
||||||
|
return `
|
||||||
|
${field.name}
|
||||||
|
{
|
||||||
|
amount
|
||||||
|
currency
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
};
|
@ -6,6 +6,7 @@ import { DateFieldDisplay } from '../meta-types/display/components/DateFieldDisp
|
|||||||
import { DoubleTextChipFieldDisplay } from '../meta-types/display/components/DoubleTextChipFieldDisplay';
|
import { DoubleTextChipFieldDisplay } from '../meta-types/display/components/DoubleTextChipFieldDisplay';
|
||||||
import { DoubleTextFieldDisplay } from '../meta-types/display/components/DoubleTextFieldDisplay';
|
import { DoubleTextFieldDisplay } from '../meta-types/display/components/DoubleTextFieldDisplay';
|
||||||
import { EmailFieldDisplay } from '../meta-types/display/components/EmailFieldDisplay';
|
import { EmailFieldDisplay } from '../meta-types/display/components/EmailFieldDisplay';
|
||||||
|
import { MoneyAmountV2FieldDisplay } from '../meta-types/display/components/MoneyAmountV2FieldDisplay';
|
||||||
import { MoneyFieldDisplay } from '../meta-types/display/components/MoneyFieldDisplay';
|
import { MoneyFieldDisplay } from '../meta-types/display/components/MoneyFieldDisplay';
|
||||||
import { NumberFieldDisplay } from '../meta-types/display/components/NumberFieldDisplay';
|
import { NumberFieldDisplay } from '../meta-types/display/components/NumberFieldDisplay';
|
||||||
import { PhoneFieldDisplay } from '../meta-types/display/components/PhoneFieldDisplay';
|
import { PhoneFieldDisplay } from '../meta-types/display/components/PhoneFieldDisplay';
|
||||||
@ -19,6 +20,7 @@ import { isFieldDoubleText } from '../types/guards/isFieldDoubleText';
|
|||||||
import { isFieldDoubleTextChip } from '../types/guards/isFieldDoubleTextChip';
|
import { isFieldDoubleTextChip } from '../types/guards/isFieldDoubleTextChip';
|
||||||
import { isFieldEmail } from '../types/guards/isFieldEmail';
|
import { isFieldEmail } from '../types/guards/isFieldEmail';
|
||||||
import { isFieldMoney } from '../types/guards/isFieldMoney';
|
import { isFieldMoney } from '../types/guards/isFieldMoney';
|
||||||
|
import { isFieldMoneyAmountV2 } from '../types/guards/isFieldMoneyAmountV2';
|
||||||
import { isFieldNumber } from '../types/guards/isFieldNumber';
|
import { isFieldNumber } from '../types/guards/isFieldNumber';
|
||||||
import { isFieldPhone } from '../types/guards/isFieldPhone';
|
import { isFieldPhone } from '../types/guards/isFieldPhone';
|
||||||
import { isFieldRelation } from '../types/guards/isFieldRelation';
|
import { isFieldRelation } from '../types/guards/isFieldRelation';
|
||||||
@ -47,6 +49,8 @@ export const FieldDisplay = () => {
|
|||||||
<URLFieldDisplay />
|
<URLFieldDisplay />
|
||||||
) : isFieldURLV2(fieldDefinition) ? (
|
) : isFieldURLV2(fieldDefinition) ? (
|
||||||
<URLV2FieldDisplay />
|
<URLV2FieldDisplay />
|
||||||
|
) : isFieldMoneyAmountV2(fieldDefinition) ? (
|
||||||
|
<MoneyAmountV2FieldDisplay />
|
||||||
) : isFieldPhone(fieldDefinition) ? (
|
) : isFieldPhone(fieldDefinition) ? (
|
||||||
<PhoneFieldDisplay />
|
<PhoneFieldDisplay />
|
||||||
) : isFieldChip(fieldDefinition) ? (
|
) : isFieldChip(fieldDefinition) ? (
|
||||||
|
@ -9,6 +9,7 @@ import { DateFieldInput } from '../meta-types/input/components/DateFieldInput';
|
|||||||
import { DoubleTextChipFieldInput } from '../meta-types/input/components/DoubleTextChipFieldInput';
|
import { DoubleTextChipFieldInput } from '../meta-types/input/components/DoubleTextChipFieldInput';
|
||||||
import { DoubleTextFieldInput } from '../meta-types/input/components/DoubleTextFieldInput';
|
import { DoubleTextFieldInput } from '../meta-types/input/components/DoubleTextFieldInput';
|
||||||
import { EmailFieldInput } from '../meta-types/input/components/EmailFieldInput';
|
import { EmailFieldInput } from '../meta-types/input/components/EmailFieldInput';
|
||||||
|
import { MoneyAmountV2FieldInput } from '../meta-types/input/components/MoneyAmountV2FieldInput';
|
||||||
import { MoneyFieldInput } from '../meta-types/input/components/MoneyFieldInput';
|
import { MoneyFieldInput } from '../meta-types/input/components/MoneyFieldInput';
|
||||||
import { NumberFieldInput } from '../meta-types/input/components/NumberFieldInput';
|
import { NumberFieldInput } from '../meta-types/input/components/NumberFieldInput';
|
||||||
import { PhoneFieldInput } from '../meta-types/input/components/PhoneFieldInput';
|
import { PhoneFieldInput } from '../meta-types/input/components/PhoneFieldInput';
|
||||||
@ -25,6 +26,7 @@ import { isFieldDoubleText } from '../types/guards/isFieldDoubleText';
|
|||||||
import { isFieldDoubleTextChip } from '../types/guards/isFieldDoubleTextChip';
|
import { isFieldDoubleTextChip } from '../types/guards/isFieldDoubleTextChip';
|
||||||
import { isFieldEmail } from '../types/guards/isFieldEmail';
|
import { isFieldEmail } from '../types/guards/isFieldEmail';
|
||||||
import { isFieldMoney } from '../types/guards/isFieldMoney';
|
import { isFieldMoney } from '../types/guards/isFieldMoney';
|
||||||
|
import { isFieldMoneyAmountV2 } from '../types/guards/isFieldMoneyAmountV2';
|
||||||
import { isFieldNumber } from '../types/guards/isFieldNumber';
|
import { isFieldNumber } from '../types/guards/isFieldNumber';
|
||||||
import { isFieldPhone } from '../types/guards/isFieldPhone';
|
import { isFieldPhone } from '../types/guards/isFieldPhone';
|
||||||
import { isFieldProbability } from '../types/guards/isFieldProbability';
|
import { isFieldProbability } from '../types/guards/isFieldProbability';
|
||||||
@ -108,6 +110,14 @@ export const FieldInput = ({
|
|||||||
onTab={onTab}
|
onTab={onTab}
|
||||||
onShiftTab={onShiftTab}
|
onShiftTab={onShiftTab}
|
||||||
/>
|
/>
|
||||||
|
) : isFieldMoneyAmountV2(fieldDefinition) ? (
|
||||||
|
<MoneyAmountV2FieldInput
|
||||||
|
onEnter={onEnter}
|
||||||
|
onEscape={onEscape}
|
||||||
|
onClickOutside={onClickOutside}
|
||||||
|
onTab={onTab}
|
||||||
|
onShiftTab={onShiftTab}
|
||||||
|
/>
|
||||||
) : isFieldPhone(fieldDefinition) ? (
|
) : isFieldPhone(fieldDefinition) ? (
|
||||||
<PhoneFieldInput
|
<PhoneFieldInput
|
||||||
onEnter={onEnter}
|
onEnter={onEnter}
|
||||||
|
@ -16,6 +16,8 @@ import { isFieldDoubleTextValue } from '../types/guards/isFieldDoubleTextValue';
|
|||||||
import { isFieldEmail } from '../types/guards/isFieldEmail';
|
import { isFieldEmail } from '../types/guards/isFieldEmail';
|
||||||
import { isFieldEmailValue } from '../types/guards/isFieldEmailValue';
|
import { isFieldEmailValue } from '../types/guards/isFieldEmailValue';
|
||||||
import { isFieldMoney } from '../types/guards/isFieldMoney';
|
import { isFieldMoney } from '../types/guards/isFieldMoney';
|
||||||
|
import { isFieldMoneyAmountV2 } from '../types/guards/isFieldMoneyAmountV2';
|
||||||
|
import { isFieldMoneyAmountV2Value } from '../types/guards/isFieldMoneyAmountV2Value';
|
||||||
import { isFieldMoneyValue } from '../types/guards/isFieldMoneyValue';
|
import { isFieldMoneyValue } from '../types/guards/isFieldMoneyValue';
|
||||||
import { isFieldNumber } from '../types/guards/isFieldNumber';
|
import { isFieldNumber } from '../types/guards/isFieldNumber';
|
||||||
import { isFieldNumberValue } from '../types/guards/isFieldNumberValue';
|
import { isFieldNumberValue } from '../types/guards/isFieldNumberValue';
|
||||||
@ -85,6 +87,10 @@ export const usePersistField = () => {
|
|||||||
const fieldIsMoney =
|
const fieldIsMoney =
|
||||||
isFieldMoney(fieldDefinition) && isFieldMoneyValue(valueToPersist);
|
isFieldMoney(fieldDefinition) && isFieldMoneyValue(valueToPersist);
|
||||||
|
|
||||||
|
const fieldIsMoneyAmountV2 =
|
||||||
|
isFieldMoneyAmountV2(fieldDefinition) &&
|
||||||
|
isFieldMoneyAmountV2Value(valueToPersist);
|
||||||
|
|
||||||
const fieldIsPhone =
|
const fieldIsPhone =
|
||||||
isFieldPhone(fieldDefinition) && isFieldPhoneValue(valueToPersist);
|
isFieldPhone(fieldDefinition) && isFieldPhoneValue(valueToPersist);
|
||||||
|
|
||||||
@ -160,7 +166,8 @@ export const usePersistField = () => {
|
|||||||
fieldIsMoney ||
|
fieldIsMoney ||
|
||||||
fieldIsDate ||
|
fieldIsDate ||
|
||||||
fieldIsPhone ||
|
fieldIsPhone ||
|
||||||
fieldIsURLV2
|
fieldIsURLV2 ||
|
||||||
|
fieldIsMoneyAmountV2
|
||||||
) {
|
) {
|
||||||
const fieldName = fieldDefinition.metadata.fieldName;
|
const fieldName = fieldDefinition.metadata.fieldName;
|
||||||
|
|
||||||
|
@ -0,0 +1,8 @@
|
|||||||
|
import { useMoneyAmountV2Field } from '../../hooks/useMoneyAmountV2Field';
|
||||||
|
import { MoneyAmountV2Display } from '../content-display/components/MoneyAmountV2Display';
|
||||||
|
|
||||||
|
export const MoneyAmountV2FieldDisplay = () => {
|
||||||
|
const { fieldValue } = useMoneyAmountV2Field();
|
||||||
|
|
||||||
|
return <MoneyAmountV2Display value={fieldValue} />;
|
||||||
|
};
|
@ -0,0 +1,15 @@
|
|||||||
|
import { FieldMoneyAmountV2Value } from '@/ui/data/field/types/FieldMetadata';
|
||||||
|
|
||||||
|
import { EllipsisDisplay } from './EllipsisDisplay';
|
||||||
|
|
||||||
|
type MoneyAmountV2DisplayProps = {
|
||||||
|
value?: FieldMoneyAmountV2Value;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const MoneyAmountV2Display = ({ value }: MoneyAmountV2DisplayProps) => {
|
||||||
|
return (
|
||||||
|
<EllipsisDisplay>
|
||||||
|
{value?.amount} {value?.currency}
|
||||||
|
</EllipsisDisplay>
|
||||||
|
);
|
||||||
|
};
|
@ -0,0 +1,43 @@
|
|||||||
|
import { useContext } from 'react';
|
||||||
|
import { useRecoilState } from 'recoil';
|
||||||
|
|
||||||
|
import { FieldContext } from '../../contexts/FieldContext';
|
||||||
|
import { usePersistField } from '../../hooks/usePersistField';
|
||||||
|
import { entityFieldsFamilySelector } from '../../states/selectors/entityFieldsFamilySelector';
|
||||||
|
import { FieldMoneyAmountV2Value } from '../../types/FieldMetadata';
|
||||||
|
import { assertFieldMetadata } from '../../types/guards/assertFieldMetadata';
|
||||||
|
import { isFieldMoneyAmountV2 } from '../../types/guards/isFieldMoneyAmountV2';
|
||||||
|
import { isFieldMoneyAmountV2Value } from '../../types/guards/isFieldMoneyAmountV2Value';
|
||||||
|
|
||||||
|
export const useMoneyAmountV2Field = () => {
|
||||||
|
const { entityId, fieldDefinition, hotkeyScope } = useContext(FieldContext);
|
||||||
|
|
||||||
|
assertFieldMetadata('moneyAmountV2', isFieldMoneyAmountV2, fieldDefinition);
|
||||||
|
|
||||||
|
const fieldName = fieldDefinition.metadata.fieldName;
|
||||||
|
|
||||||
|
const [fieldValue, setFieldValue] = useRecoilState<FieldMoneyAmountV2Value>(
|
||||||
|
entityFieldsFamilySelector({
|
||||||
|
entityId: entityId,
|
||||||
|
fieldName: fieldName,
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
|
||||||
|
const persistField = usePersistField();
|
||||||
|
|
||||||
|
const persistMoneyAmountV2Field = (newValue: FieldMoneyAmountV2Value) => {
|
||||||
|
if (!isFieldMoneyAmountV2Value(newValue)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
persistField(newValue);
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
fieldDefinition,
|
||||||
|
fieldValue,
|
||||||
|
setFieldValue,
|
||||||
|
hotkeyScope,
|
||||||
|
persistMoneyAmountV2Field,
|
||||||
|
};
|
||||||
|
};
|
@ -0,0 +1,93 @@
|
|||||||
|
import { DoubleTextInput } from '@/ui/data/field/meta-types/input/components/internal/DoubleTextInput';
|
||||||
|
|
||||||
|
import { usePersistField } from '../../../hooks/usePersistField';
|
||||||
|
import { FieldDoubleText } from '../../../types/FieldDoubleText';
|
||||||
|
import { useMoneyAmountV2Field } from '../../hooks/useMoneyAmountV2Field';
|
||||||
|
|
||||||
|
import { FieldInputOverlay } from './internal/FieldInputOverlay';
|
||||||
|
import { FieldInputEvent } from './DateFieldInput';
|
||||||
|
|
||||||
|
export type MoneyAmountV2FieldInputProps = {
|
||||||
|
onClickOutside?: FieldInputEvent;
|
||||||
|
onEnter?: FieldInputEvent;
|
||||||
|
onEscape?: FieldInputEvent;
|
||||||
|
onTab?: FieldInputEvent;
|
||||||
|
onShiftTab?: FieldInputEvent;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const MoneyAmountV2FieldInput = ({
|
||||||
|
onEnter,
|
||||||
|
onEscape,
|
||||||
|
onClickOutside,
|
||||||
|
onTab,
|
||||||
|
onShiftTab,
|
||||||
|
}: MoneyAmountV2FieldInputProps) => {
|
||||||
|
const { fieldValue, hotkeyScope } = useMoneyAmountV2Field();
|
||||||
|
|
||||||
|
const persistField = usePersistField();
|
||||||
|
|
||||||
|
const handleEnter = (newDoubleText: FieldDoubleText) => {
|
||||||
|
onEnter?.(() =>
|
||||||
|
persistField({
|
||||||
|
amount: parseFloat(newDoubleText.firstValue),
|
||||||
|
currency: newDoubleText.secondValue,
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleEscape = (newDoubleText: FieldDoubleText) => {
|
||||||
|
onEscape?.(() =>
|
||||||
|
persistField({
|
||||||
|
amount: parseFloat(newDoubleText.firstValue),
|
||||||
|
currency: newDoubleText.secondValue,
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleClickOutside = (
|
||||||
|
event: MouseEvent | TouchEvent,
|
||||||
|
newDoubleText: FieldDoubleText,
|
||||||
|
) => {
|
||||||
|
onClickOutside?.(() =>
|
||||||
|
persistField({
|
||||||
|
amount: parseFloat(newDoubleText.firstValue),
|
||||||
|
currency: newDoubleText.secondValue,
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleTab = (newDoubleText: FieldDoubleText) => {
|
||||||
|
onTab?.(() =>
|
||||||
|
persistField({
|
||||||
|
amount: parseFloat(newDoubleText.firstValue),
|
||||||
|
currency: newDoubleText.secondValue,
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleShiftTab = (newDoubleText: FieldDoubleText) => {
|
||||||
|
onShiftTab?.(() =>
|
||||||
|
persistField({
|
||||||
|
amount: parseFloat(newDoubleText.firstValue),
|
||||||
|
currency: newDoubleText.secondValue,
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<FieldInputOverlay>
|
||||||
|
<DoubleTextInput
|
||||||
|
firstValue={fieldValue.amount?.toString() ?? ''}
|
||||||
|
secondValue={fieldValue.currency ?? ''}
|
||||||
|
firstValuePlaceholder="Amount"
|
||||||
|
secondValuePlaceholder="Currency"
|
||||||
|
onClickOutside={handleClickOutside}
|
||||||
|
onEnter={handleEnter}
|
||||||
|
onEscape={handleEscape}
|
||||||
|
onShiftTab={handleShiftTab}
|
||||||
|
onTab={handleTab}
|
||||||
|
hotkeyScope={hotkeyScope}
|
||||||
|
/>
|
||||||
|
</FieldInputOverlay>
|
||||||
|
);
|
||||||
|
};
|
@ -37,6 +37,12 @@ export type FieldMoneyMetadata = {
|
|||||||
isPositive?: boolean;
|
isPositive?: boolean;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export type FieldMoneyAmountV2Metadata = {
|
||||||
|
fieldName: string;
|
||||||
|
placeHolder: string;
|
||||||
|
isPositive?: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
export type FieldEmailMetadata = {
|
export type FieldEmailMetadata = {
|
||||||
fieldName: string;
|
fieldName: string;
|
||||||
placeHolder: string;
|
placeHolder: string;
|
||||||
@ -90,6 +96,7 @@ export type FieldMetadata =
|
|||||||
| FieldURLV2Metadata
|
| FieldURLV2Metadata
|
||||||
| FieldNumberMetadata
|
| FieldNumberMetadata
|
||||||
| FieldMoneyMetadata
|
| FieldMoneyMetadata
|
||||||
|
| FieldMoneyAmountV2Metadata
|
||||||
| FieldEmailMetadata
|
| FieldEmailMetadata
|
||||||
| FieldDateMetadata
|
| FieldDateMetadata
|
||||||
| FieldProbabilityMetadata
|
| FieldProbabilityMetadata
|
||||||
@ -104,6 +111,8 @@ export type FieldURLValue = string;
|
|||||||
export type FieldURLV2Value = { link: string; text: string };
|
export type FieldURLV2Value = { link: string; text: string };
|
||||||
export type FieldNumberValue = number | null;
|
export type FieldNumberValue = number | null;
|
||||||
export type FieldMoneyValue = number | null;
|
export type FieldMoneyValue = number | null;
|
||||||
|
export type FieldMoneyAmountV2Value = { currency: string; amount: number };
|
||||||
|
|
||||||
export type FieldEmailValue = string;
|
export type FieldEmailValue = string;
|
||||||
export type FieldProbabilityValue = number;
|
export type FieldProbabilityValue = number;
|
||||||
export type FieldBooleanValue = boolean;
|
export type FieldBooleanValue = boolean;
|
||||||
|
@ -12,4 +12,6 @@ export type FieldType =
|
|||||||
| 'url'
|
| 'url'
|
||||||
| 'urlV2'
|
| 'urlV2'
|
||||||
| 'probability'
|
| 'probability'
|
||||||
| 'moneyAmount';
|
| 'moneyAmountV2'
|
||||||
|
| 'moneyAmount'
|
||||||
|
| 'money';
|
||||||
|
@ -7,6 +7,7 @@ import {
|
|||||||
FieldDoubleTextMetadata,
|
FieldDoubleTextMetadata,
|
||||||
FieldEmailMetadata,
|
FieldEmailMetadata,
|
||||||
FieldMetadata,
|
FieldMetadata,
|
||||||
|
FieldMoneyAmountV2Metadata,
|
||||||
FieldMoneyMetadata,
|
FieldMoneyMetadata,
|
||||||
FieldNumberMetadata,
|
FieldNumberMetadata,
|
||||||
FieldPhoneMetadata,
|
FieldPhoneMetadata,
|
||||||
@ -48,6 +49,8 @@ type AssertFieldMetadataFunction = <
|
|||||||
? FieldProbabilityMetadata
|
? FieldProbabilityMetadata
|
||||||
: E extends 'moneyAmount'
|
: E extends 'moneyAmount'
|
||||||
? FieldMoneyMetadata
|
? FieldMoneyMetadata
|
||||||
|
: E extends 'moneyAmountV2'
|
||||||
|
? FieldMoneyAmountV2Metadata
|
||||||
: never,
|
: never,
|
||||||
>(
|
>(
|
||||||
fieldType: E,
|
fieldType: E,
|
||||||
|
@ -0,0 +1,7 @@
|
|||||||
|
import { FieldDefinition } from '../FieldDefinition';
|
||||||
|
import { FieldMetadata, FieldMoneyAmountV2Metadata } from '../FieldMetadata';
|
||||||
|
|
||||||
|
export const isFieldMoneyAmountV2 = (
|
||||||
|
field: FieldDefinition<FieldMetadata>,
|
||||||
|
): field is FieldDefinition<FieldMoneyAmountV2Metadata> =>
|
||||||
|
field.type === 'moneyAmountV2';
|
@ -0,0 +1,13 @@
|
|||||||
|
import { z } from 'zod';
|
||||||
|
|
||||||
|
import { FieldMoneyValue } from '../FieldMetadata';
|
||||||
|
|
||||||
|
const moneyAmountV2Schema = z.object({
|
||||||
|
currency: z.string(),
|
||||||
|
amount: z.number(),
|
||||||
|
});
|
||||||
|
|
||||||
|
export const isFieldMoneyAmountV2Value = (
|
||||||
|
fieldValue: unknown,
|
||||||
|
): fieldValue is FieldMoneyValue =>
|
||||||
|
moneyAmountV2Schema.safeParse(fieldValue).success;
|
Loading…
Reference in New Issue
Block a user