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

94
front/src/modules/views/hooks/internal/useViewFields.ts
View File

@ -1,37 +1,21 @@
import { useApolloClient } from '@apollo/client';
import { useRecoilCallback } from 'recoil';
import { ColumnDefinition } from '@/ui/data/data-table/types/ColumnDefinition';
import { FieldMetadata } from '@/ui/data/field/types/FieldMetadata';
import { useFindOneMetadataObject } from '@/metadata/hooks/useFindOneMetadataObject';
import { currentViewIdScopedState } from '@/views/states/currentViewIdScopedState';
import { savedViewFieldByKeyScopedFamilySelector } from '@/views/states/selectors/savedViewFieldByKeyScopedFamilySelector';
import { viewObjectIdScopeState } from '@/views/states/viewObjectIdScopeState';
import {
CreateViewFieldsDocument,
UpdateViewFieldDocument,
} from '~/generated/graphql';
export const toViewFieldInput = (
objectId: string,
fieldDefinition: ColumnDefinition<FieldMetadata>,
) => ({
key: fieldDefinition.key,
name: fieldDefinition.name,
index: fieldDefinition.index,
isVisible: fieldDefinition.isVisible ?? true,
objectId,
size: fieldDefinition.size,
});
import { ViewField } from '@/views/types/ViewField';
export const useViewFields = (viewScopeId: string) => {
const { updateOneMutation, createOneMutation } = useFindOneMetadataObject({
objectNameSingular: 'viewFieldV2',
});
const apolloClient = useApolloClient();
const persistViewFields = useRecoilCallback(
({ snapshot }) =>
async (
viewFieldsToPersist: ColumnDefinition<FieldMetadata>[],
viewId?: string,
) => {
async (viewFieldsToPersist: ViewField[], viewId?: string) => {
const currentViewId = snapshot
.getLoadable(currentViewIdScopedState({ scopeId: viewScopeId }))
.getValue();
@ -52,47 +36,45 @@ export const useViewFields = (viewScopeId: string) => {
if (!currentViewId || !savedViewFieldsByKey || !viewObjectId) {
return;
}
const _createViewFields = (
viewFieldsToCreate: ColumnDefinition<FieldMetadata>[],
objectId: string,
) => {
if (!currentViewId || !viewFieldsToCreate.length) {
const _createViewFields = (viewFieldsToCreate: ViewField[]) => {
if (!viewFieldsToCreate.length) {
return;
}
return apolloClient.mutate({
mutation: CreateViewFieldsDocument,
variables: {
data: viewFieldsToCreate.map((viewField) => ({
...toViewFieldInput(objectId, viewField),
viewId: viewId ?? currentViewId,
})),
},
});
return Promise.all(
viewFieldsToCreate.map((viewField) =>
apolloClient.mutate({
mutation: createOneMutation,
variables: {
input: {
fieldId: viewField.fieldId,
viewId: currentViewId,
isVisible: viewField.isVisible,
size: viewField.size,
position: viewField.position,
},
},
}),
),
);
};
const _updateViewFields = (
viewFieldsToUpdate: ColumnDefinition<FieldMetadata>[],
) => {
if (!currentViewId || !viewFieldsToUpdate.length) {
const _updateViewFields = (viewFieldsToUpdate: ViewField[]) => {
if (!viewFieldsToUpdate.length) {
return;
}
return Promise.all(
viewFieldsToUpdate.map((viewField) =>
apolloClient.mutate({
mutation: UpdateViewFieldDocument,
mutation: updateOneMutation,
variables: {
data: {
idToUpdate: viewField.id,
input: {
isVisible: viewField.isVisible,
size: viewField.size,
index: viewField.index,
},
where: {
viewId_key: {
key: viewField.key,
viewId: viewId ?? currentViewId,
},
position: viewField.position,
},
},
}),
@ -101,18 +83,18 @@ export const useViewFields = (viewScopeId: string) => {
};
const viewFieldsToCreate = viewFieldsToPersist.filter(
(viewField) => !savedViewFieldsByKey[viewField.key],
(viewField) => !savedViewFieldsByKey[viewField.fieldId],
);
await _createViewFields(viewFieldsToCreate, viewObjectId);
await _createViewFields(viewFieldsToCreate);
const viewFieldsToUpdate = viewFieldsToPersist.filter(
(viewFieldToPersit) =>
savedViewFieldsByKey[viewFieldToPersit.key] &&
(savedViewFieldsByKey[viewFieldToPersit.key].size !==
savedViewFieldsByKey[viewFieldToPersit.fieldId] &&
(savedViewFieldsByKey[viewFieldToPersit.fieldId].size !==
viewFieldToPersit.size ||
savedViewFieldsByKey[viewFieldToPersit.key].index !==
viewFieldToPersit.index ||
savedViewFieldsByKey[viewFieldToPersit.key].isVisible !==
savedViewFieldsByKey[viewFieldToPersit.fieldId].position !==
viewFieldToPersit.position ||
savedViewFieldsByKey[viewFieldToPersit.fieldId].isVisible !==
viewFieldToPersit.isVisible),
);

98
front/src/modules/views/hooks/internal/useViewFilters.ts
View File

@ -7,17 +7,8 @@ import { currentViewFiltersScopedFamilyState } from '@/views/states/currentViewF
import { currentViewIdScopedState } from '@/views/states/currentViewIdScopedState';
import { savedViewFiltersScopedFamilyState } from '@/views/states/savedViewFiltersScopedFamilyState';
import { savedViewFiltersByKeyScopedFamilySelector } from '@/views/states/selectors/savedViewFiltersByKeyScopedFamilySelector';
import {
useCreateViewFiltersMutation,
useDeleteViewFiltersMutation,
useUpdateViewFilterMutation,
} from '~/generated/graphql';
export const useViewFilters = (viewScopeId: string) => {
const [createViewFiltersMutation] = useCreateViewFiltersMutation();
const [updateViewFilterMutation] = useUpdateViewFilterMutation();
const [deleteViewFiltersMutation] = useDeleteViewFiltersMutation();
const persistViewFilters = useRecoilCallback(
({ snapshot, set }) =>
async (viewId?: string) => {
@ -40,57 +31,57 @@ export const useViewFilters = (viewScopeId: string) => {
return;
}
return createViewFiltersMutation({
variables: {
data: filters.map((filter) => ({
displayValue: filter.displayValue ?? filter.value,
key: filter.key,
name:
availableFilters.find(({ key }) => key === filter.key)
?.label ?? '',
operand: filter.operand,
value: filter.value,
viewId: viewId ?? currentViewId,
})),
},
});
// return createViewFiltersMutation({
// variables: {
// data: filters.map((filter) => ({
// displayValue: filter.displayValue ?? filter.value,
// key: filter.key,
// name:
// availableFilters.find(({ key }) => key === filter.key)
// ?.label ?? '',
// operand: filter.operand,
// value: filter.value,
// viewId: viewId ?? currentViewId,
// })),
// },
// });
};
const _updateViewFilters = (filters: Filter[]) => {
if (!currentViewId || !filters.length) return;
return Promise.all(
filters.map((filter) =>
updateViewFilterMutation({
variables: {
data: {
displayValue: filter.displayValue ?? filter.value,
operand: filter.operand,
value: filter.value,
},
where: {
viewId_key: {
key: filter.key,
viewId: viewId ?? currentViewId,
},
},
},
}),
),
);
// return Promise.all(
// filters.map((filter) =>
// updateViewFilterMutation({
// variables: {
// data: {
// displayValue: filter.displayValue ?? filter.value,
// operand: filter.operand,
// value: filter.value,
// },
// where: {
// viewId_key: {
// key: filter.key,
// viewId: viewId ?? currentViewId,
// },
// },
// },
// }),
// ),
// );
};
const _deleteViewFilters = (filterKeys: string[]) => {
if (!currentViewId || !filterKeys.length) return;
return deleteViewFiltersMutation({
variables: {
where: {
key: { in: filterKeys },
viewId: { equals: viewId ?? currentViewId },
},
},
});
// return deleteViewFiltersMutation({
// variables: {
// where: {
// key: { in: filterKeys },
// viewId: { equals: viewId ?? currentViewId },
// },
// },
// });
};
const currentViewFilters = snapshot
@ -152,12 +143,7 @@ export const useViewFilters = (viewScopeId: string) => {
currentViewFilters,
);
},
[
viewScopeId,
createViewFiltersMutation,
updateViewFilterMutation,
deleteViewFiltersMutation,
],
[viewScopeId],
);
return { persistViewFilters };

86
front/src/modules/views/hooks/internal/useViewSorts.ts
View File

@ -6,20 +6,11 @@ import { currentViewIdScopedState } from '@/views/states/currentViewIdScopedStat
import { currentViewSortsScopedFamilyState } from '@/views/states/currentViewSortsScopedFamilyState';
import { savedViewSortsScopedFamilyState } from '@/views/states/savedViewSortsScopedFamilyState';
import { savedViewSortsByKeyScopedFamilySelector } from '@/views/states/selectors/savedViewSortsByKeyScopedFamilySelector';
import {
useCreateViewSortsMutation,
useDeleteViewSortsMutation,
useUpdateViewSortMutation,
ViewSortDirection,
} from '~/generated/graphql';
import { useViewStates } from '../useViewStates';
export const useViewSorts = (viewScopeId: string) => {
const { setCurrentViewSorts } = useViewStates(viewScopeId);
const [createViewSortsMutation] = useCreateViewSortsMutation();
const [updateViewSortMutation] = useUpdateViewSortMutation();
const [deleteViewSortsMutation] = useDeleteViewSortsMutation();
const persistViewSorts = useRecoilCallback(
({ snapshot, set }) =>
@ -34,51 +25,51 @@ export const useViewSorts = (viewScopeId: string) => {
const _createViewSorts = (sorts: Sort[]) => {
if (!currentViewId || !sorts.length) return;
return createViewSortsMutation({
variables: {
data: sorts.map((sort) => ({
key: sort.key,
direction: sort.direction as ViewSortDirection,
name: sort.definition.label,
viewId: viewId ?? currentViewId,
})),
},
});
// return createViewSortsMutation({
// variables: {
// data: sorts.map((sort) => ({
// key: sort.key,
// direction: sort.direction as ViewSortDirection,
// name: sort.definition.label,
// viewId: viewId ?? currentViewId,
// })),
// },
// });
};
const _updateViewSorts = (sorts: Sort[]) => {
if (!currentViewId || !sorts.length) return;
return Promise.all(
sorts.map((sort) =>
updateViewSortMutation({
variables: {
data: {
direction: sort.direction as ViewSortDirection,
},
where: {
viewId_key: {
key: sort.key,
viewId: viewId ?? currentViewId,
},
},
},
}),
),
);
// return Promise.all(
// sorts.map((sort) =>
// updateViewSortMutation({
// variables: {
// data: {
// direction: sort.direction as ViewSortDirection,
// },
// where: {
// viewId_key: {
// key: sort.key,
// viewId: viewId ?? currentViewId,
// },
// },
// },
// }),
// ),
// );
};
const _deleteViewSorts = (sortKeys: string[]) => {
if (!currentViewId || !sortKeys.length) return;
return deleteViewSortsMutation({
variables: {
where: {
key: { in: sortKeys },
viewId: { equals: viewId ?? currentViewId },
},
},
});
// return deleteViewSortsMutation({
// variables: {
// where: {
// key: { in: sortKeys },
// viewId: { equals: viewId ?? currentViewId },
// },
// },
// });
};
const currentViewSorts = snapshot
@ -131,12 +122,7 @@ export const useViewSorts = (viewScopeId: string) => {
currentViewSorts,
);
},
[
viewScopeId,
createViewSortsMutation,
updateViewSortMutation,
deleteViewSortsMutation,
],
[viewScopeId],
);
const upsertViewSort = (sortToUpsert: Sort) => {

60
front/src/modules/views/hooks/internal/useViews.ts
View File

@ -1,25 +1,13 @@
import { getOperationName } from '@apollo/client/utilities';
import { useRecoilCallback } from 'recoil';
import { viewObjectIdScopeState } from '@/views/states/viewObjectIdScopeState';
import { viewTypeScopedState } from '@/views/states/viewTypeScopedState';
import { View } from '@/views/types/View';
import {
useCreateViewMutation,
useDeleteViewMutation,
useUpdateViewMutation,
} from '~/generated/graphql';
import { GET_VIEWS } from '../../graphql/queries/getViews';
export const useViews = (scopeId: string) => {
const [createViewMutation] = useCreateViewMutation();
const [updateViewMutation] = useUpdateViewMutation();
const [deleteViewMutation] = useDeleteViewMutation();
const createView = useRecoilCallback(
({ snapshot }) =>
async (view: Pick<View, 'id' | 'name'>) => {
async (_view: Pick<View, 'id' | 'name'>) => {
const viewObjectId = await snapshot
.getLoadable(viewObjectIdScopeState({ scopeId }))
.getValue();
@ -31,34 +19,34 @@ export const useViews = (scopeId: string) => {
if (!viewObjectId || !viewType) {
return;
}
await createViewMutation({
variables: {
data: {
...view,
objectId: viewObjectId,
type: viewType,
},
},
refetchQueries: [getOperationName(GET_VIEWS) ?? ''],
});
// await createViewMutation({
// variables: {
// data: {
// ...view,
// objectId: viewObjectId,
// type: viewType,
// },
// },
// refetchQueries: [getOperationName(GET_VIEWS) ?? ''],
// });
},
);
const updateView = async (view: View) => {
await updateViewMutation({
variables: {
data: { name: view.name },
where: { id: view.id },
},
refetchQueries: [getOperationName(GET_VIEWS) ?? ''],
});
const updateView = async (_view: View) => {
// await updateViewMutation({
// variables: {
// data: { name: view.name },
// where: { id: view.id },
// },
// refetchQueries: [getOperationName(GET_VIEWS) ?? ''],
// });
};
const deleteView = async (viewId: string) => {
await deleteViewMutation({
variables: { where: { id: viewId } },
refetchQueries: [getOperationName(GET_VIEWS) ?? ''],
});
const deleteView = async (_viewId: string) => {
// await deleteViewMutation({
// variables: { where: { id: viewId } },
// refetchQueries: [getOperationName(GET_VIEWS) ?? ''],
// });
};
return {

20
front/src/modules/views/hooks/useView.ts
View File

@ -3,7 +3,6 @@ import { useSearchParams } from 'react-router-dom';
import { useRecoilCallback } from 'recoil';
import { v4 } from 'uuid';
import { savedTableColumnsFamilyState } from '@/ui/data/data-table/states/savedTableColumnsFamilyState';
import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
import { ViewScopeInternalContext } from '../scopes/scope-internal-context/ViewScopeInternalContext';
@ -194,34 +193,23 @@ export const useView = (props?: UseViewProps) => {
);
const handleViewNameSubmit = useRecoilCallback(
({ snapshot, set }) =>
({ snapshot }) =>
async (name?: string) => {
const viewEditMode = snapshot
.getLoadable(viewEditModeScopedState({ scopeId }))
.getValue();
const currentViewFields = snapshot
.getLoadable(
currentViewFieldsScopedFamilyState({
scopeId,
familyKey: currentViewId || '',
}),
)
.getValue();
const isCreateModeOrEditMode = viewEditMode === 'create' || 'edit';
if (isCreateModeOrEditMode && name && currentViewFields) {
if (viewEditMode === 'create' && name) {
await createView(name);
set(savedTableColumnsFamilyState(currentViewId), currentViewFields);
}
},
[createView, currentViewId, scopeId],
[createView, scopeId],
);
return {
scopeId,
currentViewId,
setCurrentViewId,
updateCurrentView,
createView,

18
front/src/modules/views/hooks/useViewStates.ts
View File

@ -32,6 +32,13 @@ export const useViewStates = (viewScopeId?: string, viewId?: string) => {
scopeId,
);
const setViewObjectId = useSetRecoilScopedStateV2(
viewObjectIdScopeState,
scopeId,
);
const setViewType = useSetRecoilScopedStateV2(viewTypeScopedState, scopeId);
const familyItemId = viewId ? viewId : currentViewId;
const setViewEditMode = useSetRecoilScopedStateV2(
@ -41,13 +48,6 @@ export const useViewStates = (viewScopeId?: string, viewId?: string) => {
const setViews = useSetRecoilScopedStateV2(viewsScopedState, scopeId);
const setViewObjectId = useSetRecoilScopedStateV2(
viewObjectIdScopeState,
scopeId,
);
const setViewType = useSetRecoilScopedStateV2(viewTypeScopedState, scopeId);
const setEntityCountInCurrentView = useSetRecoilScopedStateV2(
entityCountInCurrentViewScopedState,
scopeId,
@ -116,11 +116,11 @@ export const useViewStates = (viewScopeId?: string, viewId?: string) => {
currentViewId,
setCurrentViewId,
setIsViewBarExpanded,
setViewObjectId,
setViewType,
setViews,
setViewEditMode,
setViewObjectId,
setViewType,
setEntityCountInCurrentView,
setAvailableSorts,