mukeshs/twenty_crm
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Migrate view field to new data model - Part 2 (#2270)

Browse Source 
* Migrate view field to new data model

* Migrate view fields to new model
This commit is contained in:
Charles Bochet
2023-10-28 19:13:48 +02:00
committed by GitHub
parent b591023eb3
commit 685d342170
168 changed files with 960 additions and 4568 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
front/src/modules/metadata/components/MetadataObjectNavItems.tsx
View File

@ -1,52 +1,30 @@
import { useNavigate } from 'react-router-dom';
import { IconArchive } from '@/ui/display/icon';
import { IconBuildingSkyscraper } from '@/ui/display/icon';
import { Button } from '@/ui/input/button/components/Button';
import { IconButton } from '@/ui/input/button/components/IconButton';
import NavItem from '@/ui/navigation/navbar/components/NavItem';
import { capitalize } from '~/utils/string/capitalize';
import { useCreateNewTempsCustomObject } from '../hooks/useCreateNewTempCustomObject';
import { useDeleteOneMetadataObject } from '../hooks/useDeleteOneMetadataObject';
import { useFindManyMetadataObjects } from '../hooks/useFindManyMetadataObjects';
export const MetadataObjectNavItems = () => {
const { metadataObjects } = useFindManyMetadataObjects();
const createNewTempCustomObject = useCreateNewTempsCustomObject();
const { deleteOneMetadataObject } = useDeleteOneMetadataObject();
const navigate = useNavigate();
return (
<>
<Button
title="+ Create new object"
variant="secondary"
onClick={createNewTempCustomObject}
/>
{metadataObjects
.filter((metadataObject) => !!metadataObject.isActive)
.map((metadataObject) => (
<div style={{ display: 'flex', flexDirection: 'row', width: '60%' }}>
<IconButton
Icon={IconArchive}
onClick={() => {
deleteOneMetadataObject(metadataObject.id);
}}
/>
<NavItem
key={metadataObject.id}
label={capitalize(metadataObject.namePlural)}
to={`/objects/${metadataObject.namePlural}`}
Icon={IconBuildingSkyscraper}
onClick={() => {
navigate(`/objects/${metadataObject.namePlural}`);
}}
/>
</div>
<NavItem
key={metadataObject.id}
label={capitalize(metadataObject.namePlural)}
to={`/objects/${metadataObject.namePlural}`}
Icon={IconBuildingSkyscraper}
onClick={() => {
navigate(`/objects/${metadataObject.namePlural}`);
}}
/>
))}
</>
);

2
front/src/modules/metadata/components/ObjectShowPage.tsx
View File

@ -128,7 +128,7 @@ export const ObjectShowPage = () => {
fieldDefinition:
formatMetadataFieldAsColumnDefinition({
field: metadataField,
index: index,
position: index,
metadataObject: foundMetadataObject,
}),
useUpdateEntityMutation: useUpdateOneObjectMutation,

28
front/src/modules/metadata/components/ObjectTable.tsx
View File

@ -1,15 +1,9 @@
import styled from '@emotion/styled';
import { useRecoilCallback } from 'recoil';
import { DataTable } from '@/ui/data/data-table/components/DataTable';
import { TableContext } from '@/ui/data/data-table/contexts/TableContext';
import { TableOptionsDropdown } from '@/ui/data/data-table/options/components/TableOptionsDropdown';
import { tableColumnsScopedState } from '@/ui/data/data-table/states/tableColumnsScopedState';
import { ColumnDefinition } from '@/ui/data/data-table/types/ColumnDefinition';
import { FieldMetadata } from '@/ui/data/field/types/FieldMetadata';
import { ViewBar } from '@/views/components/ViewBar';
import { useViewFields } from '@/views/hooks/internal/useViewFields';
import { useView } from '@/views/hooks/useView';
import { ViewScope } from '@/views/scopes/ViewScope';
import { useUpdateOneObject } from '../hooks/useUpdateOneObject';
@ -37,9 +31,6 @@ export const ObjectTable = ({ objectNamePlural }: ObjectTableProps) => {
const viewScopeId = objectNamePlural ?? '';
const { persistViewFields } = useViewFields(viewScopeId);
const { setCurrentViewFields } = useView({ viewScopeId: viewScopeId });
const updateEntity = ({
variables,
}: {
@ -56,27 +47,12 @@ export const ObjectTable = ({ objectNamePlural }: ObjectTableProps) => {
});
};
const updateTableColumns = useRecoilCallback(
({ set, snapshot }) =>
(viewFields: ColumnDefinition<FieldMetadata>[]) => {
set(tableColumnsScopedState(viewScopeId), viewFields);
},
);
return (
<ViewScope
viewScopeId={viewScopeId}
onViewFieldsChange={(viewFields) => {
// updateTableColumns(viewFields);
}}
>
<ViewScope viewScopeId={viewScopeId} onViewFieldsChange={() => {}}>
<StyledContainer>
<TableContext.Provider
value={{
onColumnsChange: (columns) => {
// setCurrentViewFields?.(columns);
// persistViewFields(columns);
},
onColumnsChange: () => {},
}}
>
<ViewBar

4
front/src/modules/metadata/components/ObjectTableEffect.tsx
View File

@ -3,13 +3,11 @@ import { useSetRecoilState } from 'recoil';
import { availableTableColumnsScopedState } from '@/ui/data/data-table/states/availableTableColumnsScopedState';
import { useView } from '@/views/hooks/useView';
import { ViewType } from '~/generated/graphql';
import { ViewType } from '@/views/types/ViewType';
import { useMetadataObjectInContext } from '../hooks/useMetadataObjectInContext';
export const ObjectTableEffect = () => {
console.log('ObjectTableEffect');
const {
setAvailableSorts,
setAvailableFilters,

208
front/src/modules/metadata/hooks/useCreateNewTempCustomObject.ts
View File

@ -1,208 +0,0 @@
import { getOperationName } from '@apollo/client/utilities';
import { ColumnDefinition } from '@/ui/data/data-table/types/ColumnDefinition';
import { FieldMetadata } from '@/ui/data/field/types/FieldMetadata';
import { FieldType } from '@/ui/data/field/types/FieldType';
import { IconBrandLinkedin } from '@/ui/display/icon';
import { GET_VIEW_FIELDS } from '@/views/graphql/queries/getViewFields';
import { GET_VIEWS } from '@/views/graphql/queries/getViews';
import { toViewFieldInput } from '@/views/hooks/internal/useViewFields';
import {
useCreateViewFieldsMutation,
useCreateViewMutation,
ViewType,
} from '~/generated/graphql';
import { useCreateOneMetadataField } from './useCreateOneMetadataField';
import { useCreateOneMetadataObject } from './useCreateOneMetadataObject';
import { useUpdateOneMetadataField } from './useUpdateOneMetadataField';
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 = () => {
const { createOneMetadataObject } = useCreateOneMetadataObject();
const { updateOneMetadataObject } = useUpdateOneMetadataObject();
const [createViewMutation] = useCreateViewMutation();
const [createViewFieldsMutation] = useCreateViewFieldsMutation();
const createActiveMetadataField = useCreateActiveMetadataField();
return async () => {
const date = new Date().toISOString().replace(/[\/:\.\-\_]/g, '');
const { data: createdMetadataObject } = await createOneMetadataObject({
labelPlural: 'Suppliers' + date,
labelSingular: 'Supplier' + date,
nameSingular: 'supplier' + date,
namePlural: 'suppliers' + date,
description: 'Suppliers' + date,
icon: 'IconBuilding',
});
const supplierObjectId = createdMetadataObject?.createOneObject?.id ?? '';
if (!createdMetadataObject) {
throw new Error('Could not create metadata object');
}
await updateOneMetadataObject({
idToUpdate: supplierObjectId,
updatePayload: {
isActive: true,
},
});
const nameFieldData = await createActiveMetadataField({
label: 'Name',
name: 'name',
objectId: supplierObjectId,
type: 'text',
});
const cityFieldData = await createActiveMetadataField({
label: 'City',
name: 'city',
objectId: supplierObjectId,
type: 'text',
});
const emailFieldData = await createActiveMetadataField({
label: 'Email',
name: 'email',
objectId: supplierObjectId,
type: 'email',
});
const phoneFieldData = await createActiveMetadataField({
label: 'Phone',
name: 'phone',
objectId: supplierObjectId,
type: 'phone',
});
const twitterFieldData = await createActiveMetadataField({
label: 'Twitter',
name: 'twitter',
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 { data: newView } = await createViewMutation({
variables: {
data: {
name: 'Default',
objectId: objectId,
type: ViewType.Table,
},
},
refetchQueries: [getOperationName(GET_VIEWS) ?? ''],
});
const createdFields = [
nameFieldData,
emailFieldData,
cityFieldData,
phoneFieldData,
twitterFieldData,
booleanFieldData,
employeesFieldData,
ARRFieldData,
createdAt,
];
const tempColumnDefinitions: ColumnDefinition<FieldMetadata>[] =
createdFields.map((field, index) => ({
index,
key: field.name,
name: field.label,
size: 100,
type: field.type as FieldType,
metadata: {
fieldName: field.name,
placeHolder: field.label,
},
Icon: IconBrandLinkedin,
isVisible: true,
})) ?? [];
await createViewFieldsMutation({
variables: {
data: tempColumnDefinitions.map((column) => ({
...toViewFieldInput(objectId, column),
viewId: newView?.view.id ?? '',
})),
},
refetchQueries: [getOperationName(GET_VIEW_FIELDS) ?? ''],
});
};
};

9
front/src/modules/metadata/hooks/useFindManyMetadataObjects.ts
View File

@ -6,6 +6,7 @@ import {
MetadataObjectsQuery,
MetadataObjectsQueryVariables,
} from '~/generated-metadata/graphql';
import { logError } from '~/utils/logError';
import { FIND_MANY_METADATA_OBJECTS } from '../graphql/queries';
import { formatPagedMetadataObjectsToMetadataObjects } from '../utils/formatPagedMetadataObjectsToMetadataObjects';
@ -29,8 +30,7 @@ export const useFindManyMetadataObjects = () => {
client: apolloMetadataClient ?? undefined,
skip: !apolloMetadataClient,
onError: (error) => {
// eslint-disable-next-line no-console
console.error('useFindManyMetadataObjects error : ', error);
logError('useFindManyMetadataObjects error : ' + error);
enqueueSnackBar(
`Error during useFindManyMetadataObjects, ${error.message}`,
{
@ -38,10 +38,7 @@ export const useFindManyMetadataObjects = () => {
},
);
},
onCompleted: (data) => {
// eslint-disable-next-line no-console
//console.log('useFindManyMetadataObjects data : ', data);
},
onCompleted: () => {},
},
);

7
front/src/modules/metadata/hooks/useFindManyObjects.ts
View File

@ -2,6 +2,7 @@ import { useMemo } from 'react';
import { useQuery } from '@apollo/client';
import { useSnackBar } from '@/ui/feedback/snack-bar/hooks/useSnackBar';
import { logError } from '~/utils/logError';
import { MetadataObjectIdentifier } from '../types/MetadataObjectIdentifier';
import { PaginatedObjectType } from '../types/PaginatedObjectType';
@ -41,10 +42,8 @@ export const useFindManyObjects = <
onCompleted: (data) =>
objectNamePlural && onCompleted?.(data[objectNamePlural]),
onError: (error) => {
// eslint-disable-next-line no-console
console.error(
`useFindManyObjects for "${objectNamePlural}" error : `,
error,
logError(
`useFindManyObjects for "${objectNamePlural}" error : ` + error,
);
enqueueSnackBar(
`Error during useFindManyObjects for "${objectNamePlural}", ${error.message}`,

14
front/src/modules/metadata/hooks/useFindOneMetadataObject.ts
View File

@ -8,6 +8,7 @@ import { formatMetadataFieldAsColumnDefinition } from '../utils/formatMetadataFi
import { generateCreateOneObjectMutation } from '../utils/generateCreateOneObjectMutation';
import { generateFindManyCustomObjectsQuery } from '../utils/generateFindManyCustomObjectsQuery';
import { generateFindOneCustomObjectQuery } from '../utils/generateFindOneCustomObjectQuery';
import { generateUpdateOneObjectMutation } from '../utils/generateUpdateOneObjectMutation';
import { useFindManyMetadataObjects } from './useFindManyMetadataObjects';
@ -30,7 +31,7 @@ export const useFindOneMetadataObject = ({
const columnDefinitions: ColumnDefinition<FieldMetadata>[] =
foundMetadataObject?.fields.map((field, index) =>
formatMetadataFieldAsColumnDefinition({
index,
position: index,
field,
metadataObject: foundMetadataObject,
}),
@ -66,6 +67,16 @@ export const useFindOneMetadataObject = ({
}
`;
const updateOneMutation = foundMetadataObject
? generateUpdateOneObjectMutation({
metadataObject: foundMetadataObject,
})
: gql`
mutation EmptyMutation {
empty
}
`;
// TODO: implement backend delete
const deleteOneMutation = foundMetadataObject
? generateCreateOneObjectMutation({
@ -84,6 +95,7 @@ export const useFindOneMetadataObject = ({
findManyQuery,
findOneQuery,
createOneMutation,
updateOneMutation,
deleteOneMutation,
loading,
};

29
front/src/modules/metadata/hooks/useUpdateOneObject.ts
View File

@ -1,8 +1,7 @@
import { gql, useMutation } from '@apollo/client';
import { useMutation } from '@apollo/client';
import { getOperationName } from '@apollo/client/utilities';
import { MetadataObjectIdentifier } from '../types/MetadataObjectIdentifier';
import { generateUpdateOneObjectMutation } from '../utils/generateUpdateOneObjectMutation';
import { useFindOneMetadataObject } from './useFindOneMetadataObject';
@ -10,24 +9,18 @@ export const useUpdateOneObject = ({
objectNamePlural,
objectNameSingular,
}: MetadataObjectIdentifier) => {
const { foundMetadataObject, objectNotFoundInMetadata, findManyQuery } =
useFindOneMetadataObject({
objectNamePlural,
objectNameSingular,
});
const generatedMutation = foundMetadataObject
? generateUpdateOneObjectMutation({
metadataObject: foundMetadataObject,
})
: gql`
mutation EmptyMutation {
empty
}
`;
const {
foundMetadataObject,
objectNotFoundInMetadata,
findManyQuery,
updateOneMutation,
} = useFindOneMetadataObject({
objectNamePlural,
objectNameSingular,
});
// TODO: type this with a minimal type at least with Record<string, any>
const [mutate] = useMutation(generatedMutation, {
const [mutate] = useMutation(updateOneMutation, {
refetchQueries: [getOperationName(findManyQuery) ?? ''],
});

10
front/src/modules/metadata/utils/formatMetadataFieldAsColumnDefinition.ts
View File

@ -18,17 +18,17 @@ const parseFieldType = (fieldType: string): FieldType => {
};
export const formatMetadataFieldAsColumnDefinition = ({
index,
position,
field,
metadataObject,
}: {
index: number;
position: number;
field: MetadataObject['fields'][0];
metadataObject: Omit<MetadataObject, 'fields'>;
}): ColumnDefinition<FieldMetadata> => ({
index,
key: field.name,
name: field.label,
position,
fieldId: field.id,
label: field.label,
size: 100,
type: parseFieldType(field.type),
metadata: {