feat: view groups (#7176)
Fix #4244 and #4356 This pull request introduces the new "view groups" capability, enabling the reordering, hiding, and showing of columns in Kanban mode. The core enhancement includes the addition of a new entity named `ViewGroup`, which manages column behaviors and interactions. #### Key Changes: 1. **ViewGroup Entity**: The newly added `ViewGroup` entity is responsible for handling the organization and state of columns. This includes: - The ability to reorder columns. - The option to hide or show specific columns based on user preferences. #### Conclusion: This PR adds a significant new feature that enhances the flexibility of Kanban views through the `ViewGroup` entity. We'll later add the view group logic to table view too. --------- Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
This commit is contained in:
Jérémy M
@ -0,0 +1,118 @@
|
||||
import { useApolloClient } from '@apollo/client';
|
||||
import { useCallback } from 'react';
|
||||
import { v4 } from 'uuid';
|
||||
|
||||
import { triggerCreateRecordsOptimisticEffect } from '@/apollo/optimistic-effect/utils/triggerCreateRecordsOptimisticEffect';
|
||||
import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
|
||||
import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems';
|
||||
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
|
||||
import { useCreateOneRecordMutation } from '@/object-record/hooks/useCreateOneRecordMutation';
|
||||
import { useUpdateOneRecordMutation } from '@/object-record/hooks/useUpdateOneRecordMutation';
|
||||
import { GraphQLView } from '@/views/types/GraphQLView';
|
||||
import { ViewGroup } from '@/views/types/ViewGroup';
|
||||
|
||||
export const usePersistViewGroupRecords = () => {
|
||||
const { objectMetadataItem } = useObjectMetadataItem({
|
||||
objectNameSingular: CoreObjectNameSingular.ViewGroup,
|
||||
});
|
||||
|
||||
const { createOneRecordMutation } = useCreateOneRecordMutation({
|
||||
objectNameSingular: CoreObjectNameSingular.ViewGroup,
|
||||
});
|
||||
|
||||
const { updateOneRecordMutation } = useUpdateOneRecordMutation({
|
||||
objectNameSingular: CoreObjectNameSingular.ViewGroup,
|
||||
});
|
||||
|
||||
const { objectMetadataItems } = useObjectMetadataItems();
|
||||
|
||||
const apolloClient = useApolloClient();
|
||||
|
||||
const createViewGroupRecords = useCallback(
|
||||
(viewGroupsToCreate: ViewGroup[], view: GraphQLView) => {
|
||||
if (!viewGroupsToCreate.length) return;
|
||||
|
||||
return Promise.all(
|
||||
viewGroupsToCreate.map((viewGroup) =>
|
||||
apolloClient.mutate({
|
||||
mutation: createOneRecordMutation,
|
||||
variables: {
|
||||
input: {
|
||||
fieldMetadataId: viewGroup.fieldMetadataId,
|
||||
viewId: view.id,
|
||||
isVisible: viewGroup.isVisible,
|
||||
position: viewGroup.position,
|
||||
id: v4(),
|
||||
fieldValue: viewGroup.fieldValue,
|
||||
},
|
||||
},
|
||||
update: (cache, { data }) => {
|
||||
const record = data?.['createViewGroup'];
|
||||
if (!record) return;
|
||||
|
||||
triggerCreateRecordsOptimisticEffect({
|
||||
cache,
|
||||
objectMetadataItem,
|
||||
recordsToCreate: [record],
|
||||
objectMetadataItems,
|
||||
});
|
||||
},
|
||||
}),
|
||||
),
|
||||
);
|
||||
},
|
||||
[
|
||||
apolloClient,
|
||||
createOneRecordMutation,
|
||||
objectMetadataItem,
|
||||
objectMetadataItems,
|
||||
],
|
||||
);
|
||||
|
||||
const updateViewGroupRecords = useCallback(
|
||||
async (viewGroupsToUpdate: ViewGroup[]) => {
|
||||
if (!viewGroupsToUpdate.length) return;
|
||||
|
||||
const mutationPromises = viewGroupsToUpdate.map((viewGroup) =>
|
||||
apolloClient.mutate<{ updateViewGroup: ViewGroup }>({
|
||||
mutation: updateOneRecordMutation,
|
||||
variables: {
|
||||
idToUpdate: viewGroup.id,
|
||||
input: {
|
||||
isVisible: viewGroup.isVisible,
|
||||
position: viewGroup.position,
|
||||
},
|
||||
},
|
||||
// Avoid cache being updated with stale data
|
||||
fetchPolicy: 'no-cache',
|
||||
}),
|
||||
);
|
||||
|
||||
const mutationResults = await Promise.all(mutationPromises);
|
||||
|
||||
// FixMe: Using triggerCreateRecordsOptimisticEffect is actaully causing multiple records to be created
|
||||
mutationResults.forEach(({ data }) => {
|
||||
const record = data?.['updateViewGroup'];
|
||||
|
||||
if (!record) return;
|
||||
|
||||
apolloClient.cache.modify({
|
||||
id: apolloClient.cache.identify({
|
||||
__typename: 'ViewGroup',
|
||||
id: record.id,
|
||||
}),
|
||||
fields: {
|
||||
isVisible: () => record.isVisible,
|
||||
position: () => record.position,
|
||||
},
|
||||
});
|
||||
});
|
||||
},
|
||||
[apolloClient, updateOneRecordMutation],
|
||||
);
|
||||
|
||||
return {
|
||||
createViewGroupRecords,
|
||||
updateViewGroupRecords,
|
||||
};
|
||||
};
|
||||
@ -1,34 +0,0 @@
|
||||
import { usePersistViewFilterRecords } from '@/views/hooks/internal/usePersistViewFilterRecords';
|
||||
import { usePersistViewSortRecords } from '@/views/hooks/internal/usePersistViewSortRecords';
|
||||
|
||||
import { useGetViewFromCache } from '@/views/hooks/useGetViewFromCache';
|
||||
import { ViewFilter } from '@/views/types/ViewFilter';
|
||||
import { ViewSort } from '@/views/types/ViewSort';
|
||||
import { isDefined } from '~/utils/isDefined';
|
||||
|
||||
export const useCreateViewFiltersAndSorts = () => {
|
||||
const { getViewFromCache } = useGetViewFromCache();
|
||||
|
||||
const { createViewSortRecords } = usePersistViewSortRecords();
|
||||
|
||||
const { createViewFilterRecords } = usePersistViewFilterRecords();
|
||||
|
||||
const createViewFiltersAndSorts = async (
|
||||
viewIdToCreateOn: string,
|
||||
filtersToCreate: ViewFilter[],
|
||||
sortsToCreate: ViewSort[],
|
||||
) => {
|
||||
const view = await getViewFromCache(viewIdToCreateOn);
|
||||
|
||||
if (!isDefined(view)) {
|
||||
return;
|
||||
}
|
||||
|
||||
await createViewSortRecords(sortsToCreate, view);
|
||||
await createViewFilterRecords(filtersToCreate, view);
|
||||
};
|
||||
|
||||
return {
|
||||
createViewFiltersAndSorts,
|
||||
};
|
||||
};
|
||||
@ -1,9 +1,12 @@
|
||||
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
|
||||
import { useCreateOneRecord } from '@/object-record/hooks/useCreateOneRecord';
|
||||
import { RecordIndexRootPropsContext } from '@/object-record/record-index/contexts/RecordIndexRootPropsContext';
|
||||
import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
|
||||
import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
|
||||
import { usePersistViewFieldRecords } from '@/views/hooks/internal/usePersistViewFieldRecords';
|
||||
import { useCreateViewFiltersAndSorts } from '@/views/hooks/useCreateViewFiltersAndSorts';
|
||||
import { usePersistViewFilterRecords } from '@/views/hooks/internal/usePersistViewFilterRecords';
|
||||
import { usePersistViewGroupRecords } from '@/views/hooks/internal/usePersistViewGroupRecords';
|
||||
import { usePersistViewSortRecords } from '@/views/hooks/internal/usePersistViewSortRecords';
|
||||
import { useGetViewFiltersCombined } from '@/views/hooks/useGetCombinedViewFilters';
|
||||
import { useGetViewSortsCombined } from '@/views/hooks/useGetCombinedViewSorts';
|
||||
import { useGetViewFromCache } from '@/views/hooks/useGetViewFromCache';
|
||||
@ -11,6 +14,10 @@ import { currentViewIdComponentState } from '@/views/states/currentViewIdCompone
|
||||
import { isPersistingViewFieldsComponentState } from '@/views/states/isPersistingViewFieldsComponentState';
|
||||
import { GraphQLView } from '@/views/types/GraphQLView';
|
||||
import { View } from '@/views/types/View';
|
||||
import { ViewGroup } from '@/views/types/ViewGroup';
|
||||
import { ViewType } from '@/views/types/ViewType';
|
||||
import { isNonEmptyArray } from '@sniptt/guards';
|
||||
import { useContext } from 'react';
|
||||
import { useRecoilCallback } from 'recoil';
|
||||
import { isDefined } from 'twenty-ui';
|
||||
import { v4 } from 'uuid';
|
||||
@ -35,12 +42,18 @@ export const useCreateViewFromCurrentView = (viewBarComponentId?: string) => {
|
||||
|
||||
const { createViewFieldRecords } = usePersistViewFieldRecords();
|
||||
|
||||
const { createViewFiltersAndSorts } = useCreateViewFiltersAndSorts();
|
||||
|
||||
const { getViewSortsCombined } = useGetViewSortsCombined(viewBarComponentId);
|
||||
const { getViewFiltersCombined } =
|
||||
useGetViewFiltersCombined(viewBarComponentId);
|
||||
|
||||
const { createViewSortRecords } = usePersistViewSortRecords();
|
||||
|
||||
const { createViewGroupRecords } = usePersistViewGroupRecords();
|
||||
|
||||
const { createViewFilterRecords } = usePersistViewFilterRecords();
|
||||
|
||||
const { objectMetadataItem } = useContext(RecordIndexRootPropsContext);
|
||||
|
||||
const createViewFromCurrentView = useRecoilCallback(
|
||||
({ snapshot, set }) =>
|
||||
async (
|
||||
@ -93,20 +106,56 @@ export const useCreateViewFromCurrentView = (viewBarComponentId?: string) => {
|
||||
|
||||
await createViewFieldRecords(view.viewFields, newView);
|
||||
|
||||
if (type === ViewType.Kanban) {
|
||||
if (!isNonEmptyArray(view.viewGroups)) {
|
||||
if (!isDefined(kanbanFieldMetadataId)) {
|
||||
throw new Error('Kanban view must have a kanban field');
|
||||
}
|
||||
|
||||
const viewGroupsToCreate =
|
||||
objectMetadataItem?.fields
|
||||
?.find((field) => field.id === kanbanFieldMetadataId)
|
||||
?.options?.map(
|
||||
(option, index) =>
|
||||
({
|
||||
id: v4(),
|
||||
__typename: 'ViewGroup',
|
||||
fieldMetadataId: kanbanFieldMetadataId,
|
||||
fieldValue: option.value,
|
||||
isVisible: true,
|
||||
position: index,
|
||||
}) satisfies ViewGroup,
|
||||
) ?? [];
|
||||
|
||||
viewGroupsToCreate.push({
|
||||
__typename: 'ViewGroup',
|
||||
id: v4(),
|
||||
fieldValue: '',
|
||||
position: viewGroupsToCreate.length,
|
||||
isVisible: true,
|
||||
fieldMetadataId: kanbanFieldMetadataId,
|
||||
} satisfies ViewGroup);
|
||||
|
||||
await createViewGroupRecords(viewGroupsToCreate, newView);
|
||||
} else {
|
||||
await createViewGroupRecords(view.viewGroups, newView);
|
||||
}
|
||||
}
|
||||
|
||||
if (shouldCopyFiltersAndSorts === true) {
|
||||
const sourceViewCombinedFilters = getViewFiltersCombined(view.id);
|
||||
const sourceViewCombinedSorts = getViewSortsCombined(view.id);
|
||||
|
||||
await createViewFiltersAndSorts(
|
||||
newView.id,
|
||||
sourceViewCombinedFilters,
|
||||
sourceViewCombinedSorts,
|
||||
);
|
||||
await createViewSortRecords(sourceViewCombinedSorts, view);
|
||||
await createViewFilterRecords(sourceViewCombinedFilters, view);
|
||||
}
|
||||
|
||||
set(isPersistingViewFieldsCallbackState, false);
|
||||
},
|
||||
[
|
||||
objectMetadataItem,
|
||||
createViewSortRecords,
|
||||
createViewFilterRecords,
|
||||
createOneRecord,
|
||||
createViewFieldRecords,
|
||||
getViewSortsCombined,
|
||||
@ -114,7 +163,7 @@ export const useCreateViewFromCurrentView = (viewBarComponentId?: string) => {
|
||||
currentViewIdCallbackState,
|
||||
getViewFromCache,
|
||||
isPersistingViewFieldsCallbackState,
|
||||
createViewFiltersAndSorts,
|
||||
createViewGroupRecords,
|
||||
],
|
||||
);
|
||||
|
||||
|
||||
@ -0,0 +1,96 @@
|
||||
import { useRecoilCallback } from 'recoil';
|
||||
|
||||
import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
|
||||
import { usePersistViewGroupRecords } from '@/views/hooks/internal/usePersistViewGroupRecords';
|
||||
import { useGetViewFromCache } from '@/views/hooks/useGetViewFromCache';
|
||||
import { currentViewIdComponentState } from '@/views/states/currentViewIdComponentState';
|
||||
import { ViewGroup } from '@/views/types/ViewGroup';
|
||||
import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
|
||||
import { isDefined } from '~/utils/isDefined';
|
||||
import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';
|
||||
|
||||
export const useSaveCurrentViewGroups = (viewBarComponentId?: string) => {
|
||||
const { createViewGroupRecords, updateViewGroupRecords } =
|
||||
usePersistViewGroupRecords();
|
||||
|
||||
const { getViewFromCache } = useGetViewFromCache();
|
||||
|
||||
const currentViewIdCallbackState = useRecoilComponentCallbackStateV2(
|
||||
currentViewIdComponentState,
|
||||
viewBarComponentId,
|
||||
);
|
||||
|
||||
const saveViewGroups = useRecoilCallback(
|
||||
({ snapshot }) =>
|
||||
async (viewGroupsToSave: ViewGroup[]) => {
|
||||
const currentViewId = snapshot
|
||||
.getLoadable(currentViewIdCallbackState)
|
||||
.getValue();
|
||||
|
||||
if (!currentViewId) {
|
||||
return;
|
||||
}
|
||||
|
||||
const view = await getViewFromCache(currentViewId);
|
||||
|
||||
if (isUndefinedOrNull(view)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const currentViewGroups = view.viewGroups;
|
||||
|
||||
const viewGroupsToUpdate = viewGroupsToSave
|
||||
.map((viewGroupToSave) => {
|
||||
const existingField = currentViewGroups.find(
|
||||
(currentViewGroup) =>
|
||||
currentViewGroup.fieldValue === viewGroupToSave.fieldValue,
|
||||
);
|
||||
|
||||
if (isUndefinedOrNull(existingField)) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
if (
|
||||
isDeeplyEqual(
|
||||
{
|
||||
position: existingField.position,
|
||||
isVisible: existingField.isVisible,
|
||||
},
|
||||
{
|
||||
position: viewGroupToSave.position,
|
||||
isVisible: viewGroupToSave.isVisible,
|
||||
},
|
||||
)
|
||||
) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
return { ...viewGroupToSave, id: existingField.id };
|
||||
})
|
||||
.filter(isDefined);
|
||||
|
||||
const viewGroupsToCreate = viewGroupsToSave.filter(
|
||||
(viewFieldToSave) =>
|
||||
!currentViewGroups.some(
|
||||
(currentViewGroup) =>
|
||||
currentViewGroup.fieldValue === viewFieldToSave.fieldValue,
|
||||
),
|
||||
);
|
||||
|
||||
await Promise.all([
|
||||
createViewGroupRecords(viewGroupsToCreate, view),
|
||||
updateViewGroupRecords(viewGroupsToUpdate),
|
||||
]);
|
||||
},
|
||||
[
|
||||
createViewGroupRecords,
|
||||
currentViewIdCallbackState,
|
||||
getViewFromCache,
|
||||
updateViewGroupRecords,
|
||||
],
|
||||
);
|
||||
|
||||
return {
|
||||
saveViewGroups,
|
||||
};
|
||||
};
|
||||
Reference in New Issue
Block a user