Files
twenty/packages/twenty-front/src/modules/views/hooks/useCreateViewFromCurrentView.ts
T
Jérémy M e8d96cfd10 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>
2024-10-24 15:38:52 +02:00

172 lines
6.2 KiB
TypeScript

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 { 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';
import { currentViewIdComponentState } from '@/views/states/currentViewIdComponentState';
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';
import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';
export const useCreateViewFromCurrentView = (viewBarComponentId?: string) => {
const currentViewIdCallbackState = useRecoilComponentCallbackStateV2(
currentViewIdComponentState,
viewBarComponentId,
);
const isPersistingViewFieldsCallbackState = useRecoilComponentCallbackStateV2(
isPersistingViewFieldsComponentState,
viewBarComponentId,
);
const { getViewFromCache } = useGetViewFromCache();
const { createOneRecord } = useCreateOneRecord<View>({
objectNameSingular: CoreObjectNameSingular.View,
});
const { createViewFieldRecords } = usePersistViewFieldRecords();
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 (
{
id,
name,
icon,
kanbanFieldMetadataId,
type,
}: Partial<
Pick<
GraphQLView,
'id' | 'name' | 'icon' | 'kanbanFieldMetadataId' | 'type'
>
>,
shouldCopyFiltersAndSorts?: boolean,
) => {
const currentViewId = getSnapshotValue(
snapshot,
currentViewIdCallbackState,
);
if (!isDefined(currentViewId)) {
return;
}
// Here we might instead want to get view from unsaved filters ?
const view = await getViewFromCache(currentViewId);
if (!isDefined(view)) {
return;
}
set(isPersistingViewFieldsCallbackState, true);
const newView = await createOneRecord({
id: id ?? v4(),
name: name ?? view.name,
icon: icon ?? view.icon,
key: null,
kanbanFieldMetadataId:
kanbanFieldMetadataId ?? view.kanbanFieldMetadataId,
type: type ?? view.type,
objectMetadataId: view.objectMetadataId,
});
if (isUndefinedOrNull(newView)) {
throw new Error('Failed to create view');
}
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 createViewSortRecords(sourceViewCombinedSorts, view);
await createViewFilterRecords(sourceViewCombinedFilters, view);
}
set(isPersistingViewFieldsCallbackState, false);
},
[
objectMetadataItem,
createViewSortRecords,
createViewFilterRecords,
createOneRecord,
createViewFieldRecords,
getViewSortsCombined,
getViewFiltersCombined,
currentViewIdCallbackState,
getViewFromCache,
isPersistingViewFieldsCallbackState,
createViewGroupRecords,
],
);
return { createViewFromCurrentView };
};