Improve viewbar api (#2233)
* create scopes * fix import bug * add useView hook * wip * wip * currentViewId is now retrieved via useView * working on sorts with useView * refactor in progress * refactor in progress * refactor in progress * refactor in progress * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * fix code * fix code * wip * push * Fix issue dependencies * Fix resize --------- Co-authored-by: bosiraphael <raphael.bosi@gmail.com>
This commit is contained in:
Charles Bochet
121
front/src/modules/views/hooks/internal/useViewFields.ts
Normal file
121
front/src/modules/views/hooks/internal/useViewFields.ts
Normal file
@ -0,0 +1,121 @@
|
||||
/* eslint-disable no-console */
|
||||
import { getOperationName } from '@apollo/client/utilities';
|
||||
import { useRecoilCallback } from 'recoil';
|
||||
|
||||
import { ColumnDefinition } from '@/ui/data/data-table/types/ColumnDefinition';
|
||||
import { FieldMetadata } from '@/ui/data/field/types/FieldMetadata';
|
||||
import { currentViewIdScopedState } from '@/views/states/currentViewIdScopedState';
|
||||
import { savedViewFieldByKeyScopedFamilySelector } from '@/views/states/selectors/savedViewFieldByKeyScopedFamilySelector';
|
||||
import { viewObjectIdScopeState } from '@/views/states/viewObjectIdScopeState';
|
||||
import {
|
||||
useCreateViewFieldsMutation,
|
||||
useUpdateViewFieldMutation,
|
||||
} from '~/generated/graphql';
|
||||
|
||||
import { GET_VIEW_FIELDS } from '../../graphql/queries/getViewFields';
|
||||
|
||||
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,
|
||||
});
|
||||
|
||||
export const useViewFields = (viewScopeId: string) => {
|
||||
const [createViewFieldsMutation] = useCreateViewFieldsMutation();
|
||||
const [updateViewFieldMutation] = useUpdateViewFieldMutation();
|
||||
|
||||
const persistViewFields = useRecoilCallback(
|
||||
({ snapshot }) =>
|
||||
async (viewFieldsToPersist: ColumnDefinition<FieldMetadata>[]) => {
|
||||
const currentViewId = snapshot
|
||||
.getLoadable(currentViewIdScopedState({ scopeId: viewScopeId }))
|
||||
.getValue();
|
||||
|
||||
const viewObjectId = snapshot
|
||||
.getLoadable(viewObjectIdScopeState({ scopeId: viewScopeId }))
|
||||
.getValue();
|
||||
|
||||
const savedViewFieldsByKey = snapshot
|
||||
.getLoadable(
|
||||
savedViewFieldByKeyScopedFamilySelector({
|
||||
viewScopeId: viewScopeId,
|
||||
viewId: currentViewId,
|
||||
}),
|
||||
)
|
||||
.getValue();
|
||||
|
||||
if (!currentViewId || !savedViewFieldsByKey || !viewObjectId) {
|
||||
return;
|
||||
}
|
||||
const _createViewFields = (
|
||||
viewFieldsToCreate: ColumnDefinition<FieldMetadata>[],
|
||||
objectId: string,
|
||||
) => {
|
||||
if (!currentViewId || !viewFieldsToCreate.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
return createViewFieldsMutation({
|
||||
variables: {
|
||||
data: viewFieldsToCreate.map((viewField) => ({
|
||||
...toViewFieldInput(objectId, viewField),
|
||||
viewId: currentViewId,
|
||||
})),
|
||||
},
|
||||
refetchQueries: [getOperationName(GET_VIEW_FIELDS) ?? ''],
|
||||
});
|
||||
};
|
||||
|
||||
const _updateViewFields = (
|
||||
viewFieldsToUpdate: ColumnDefinition<FieldMetadata>[],
|
||||
) => {
|
||||
if (!currentViewId || !viewFieldsToUpdate.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
return Promise.all(
|
||||
viewFieldsToUpdate.map((viewField) =>
|
||||
updateViewFieldMutation({
|
||||
variables: {
|
||||
data: {
|
||||
isVisible: viewField.isVisible,
|
||||
size: viewField.size,
|
||||
index: viewField.index,
|
||||
},
|
||||
where: {
|
||||
viewId_key: { key: viewField.key, viewId: currentViewId },
|
||||
},
|
||||
},
|
||||
}),
|
||||
),
|
||||
);
|
||||
};
|
||||
|
||||
const viewFieldsToCreate = viewFieldsToPersist.filter(
|
||||
(viewField) => !savedViewFieldsByKey[viewField.key],
|
||||
);
|
||||
await _createViewFields(viewFieldsToCreate, viewObjectId);
|
||||
|
||||
const viewFieldsToUpdate = viewFieldsToPersist.filter(
|
||||
(viewFieldToPersit) =>
|
||||
savedViewFieldsByKey[viewFieldToPersit.key] &&
|
||||
(savedViewFieldsByKey[viewFieldToPersit.key].size !==
|
||||
viewFieldToPersit.size ||
|
||||
savedViewFieldsByKey[viewFieldToPersit.key].index !==
|
||||
viewFieldToPersit.index ||
|
||||
savedViewFieldsByKey[viewFieldToPersit.key].isVisible !==
|
||||
viewFieldToPersit.isVisible),
|
||||
);
|
||||
|
||||
await _updateViewFields(viewFieldsToUpdate);
|
||||
},
|
||||
);
|
||||
|
||||
return { persistViewFields };
|
||||
};
|
||||
165
front/src/modules/views/hooks/internal/useViewFilters.ts
Normal file
165
front/src/modules/views/hooks/internal/useViewFilters.ts
Normal file
@ -0,0 +1,165 @@
|
||||
import { useCallback } from 'react';
|
||||
import { useRecoilCallback } from 'recoil';
|
||||
|
||||
import { Filter } from '@/ui/data/filter/types/Filter';
|
||||
import { FilterDefinition } from '@/ui/data/filter/types/FilterDefinition';
|
||||
import { availableFiltersScopedState } from '@/views/states/availableFiltersScopedState';
|
||||
import { currentViewFiltersScopedFamilyState } from '@/views/states/currentViewFiltersScopedFamilyState';
|
||||
import { savedViewFiltersByKeyScopedFamilySelector } from '@/views/states/selectors/savedViewFiltersByKeyScopedFamilySelector';
|
||||
import {
|
||||
useCreateViewFiltersMutation,
|
||||
useDeleteViewFiltersMutation,
|
||||
useUpdateViewFilterMutation,
|
||||
} from '~/generated/graphql';
|
||||
|
||||
import { useViewStates } from '../useViewStates';
|
||||
|
||||
export const useViewFilters = (viewScopeId: string) => {
|
||||
const { currentViewId } = useViewStates(viewScopeId);
|
||||
|
||||
const [createViewFiltersMutation] = useCreateViewFiltersMutation();
|
||||
const [updateViewFilterMutation] = useUpdateViewFilterMutation();
|
||||
const [deleteViewFiltersMutation] = useDeleteViewFiltersMutation();
|
||||
|
||||
const _createViewFilters = useCallback(
|
||||
(
|
||||
filters: Filter[],
|
||||
availableFilters: FilterDefinition[] = [],
|
||||
viewId = currentViewId,
|
||||
) => {
|
||||
if (!viewId || !filters.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!availableFilters) {
|
||||
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,
|
||||
})),
|
||||
},
|
||||
});
|
||||
},
|
||||
[createViewFiltersMutation, currentViewId],
|
||||
);
|
||||
|
||||
const _updateViewFilters = useCallback(
|
||||
(filters: Filter[], viewId = currentViewId) => {
|
||||
if (!viewId || !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, updateViewFilterMutation],
|
||||
);
|
||||
|
||||
const _deleteViewFilters = useCallback(
|
||||
(filterKeys: string[], viewId = currentViewId) => {
|
||||
if (!viewId || !filterKeys.length) return;
|
||||
|
||||
return deleteViewFiltersMutation({
|
||||
variables: {
|
||||
where: {
|
||||
key: { in: filterKeys },
|
||||
viewId: { equals: viewId },
|
||||
},
|
||||
},
|
||||
});
|
||||
},
|
||||
[currentViewId, deleteViewFiltersMutation],
|
||||
);
|
||||
|
||||
const persistViewFilters = useRecoilCallback(
|
||||
({ snapshot }) =>
|
||||
async () => {
|
||||
if (!currentViewId) {
|
||||
return;
|
||||
}
|
||||
|
||||
const currentViewFilters = snapshot
|
||||
.getLoadable(
|
||||
currentViewFiltersScopedFamilyState({
|
||||
scopeId: viewScopeId,
|
||||
familyKey: currentViewId,
|
||||
}),
|
||||
)
|
||||
.getValue();
|
||||
|
||||
const savedViewFiltersByKey = snapshot
|
||||
.getLoadable(
|
||||
savedViewFiltersByKeyScopedFamilySelector({
|
||||
scopeId: viewScopeId,
|
||||
viewId: currentViewId,
|
||||
}),
|
||||
)
|
||||
.getValue();
|
||||
|
||||
if (!currentViewFilters) {
|
||||
return;
|
||||
}
|
||||
if (!savedViewFiltersByKey) {
|
||||
return;
|
||||
}
|
||||
|
||||
const availableFilters = snapshot
|
||||
.getLoadable(
|
||||
availableFiltersScopedState({
|
||||
scopeId: viewScopeId,
|
||||
}),
|
||||
)
|
||||
.getValue();
|
||||
|
||||
const filtersToCreate = currentViewFilters.filter(
|
||||
(filter) => !savedViewFiltersByKey[filter.key],
|
||||
);
|
||||
await _createViewFilters(filtersToCreate, availableFilters);
|
||||
|
||||
const filtersToUpdate = currentViewFilters.filter(
|
||||
(filter) =>
|
||||
savedViewFiltersByKey[filter.key] &&
|
||||
(savedViewFiltersByKey[filter.key].operand !== filter.operand ||
|
||||
savedViewFiltersByKey[filter.key].value !== filter.value),
|
||||
);
|
||||
await _updateViewFilters(filtersToUpdate);
|
||||
|
||||
const filterKeys = currentViewFilters.map((filter) => filter.key);
|
||||
const filterKeysToDelete = Object.keys(savedViewFiltersByKey).filter(
|
||||
(previousFilterKey) => !filterKeys.includes(previousFilterKey),
|
||||
);
|
||||
await _deleteViewFilters(filterKeysToDelete);
|
||||
},
|
||||
[
|
||||
currentViewId,
|
||||
viewScopeId,
|
||||
_createViewFilters,
|
||||
_updateViewFilters,
|
||||
_deleteViewFilters,
|
||||
],
|
||||
);
|
||||
|
||||
return { persistViewFilters };
|
||||
};
|
||||
157
front/src/modules/views/hooks/internal/useViewSorts.ts
Normal file
157
front/src/modules/views/hooks/internal/useViewSorts.ts
Normal file
@ -0,0 +1,157 @@
|
||||
/* eslint-disable no-console */
|
||||
import { useCallback } from 'react';
|
||||
import { produce } from 'immer';
|
||||
import { useRecoilCallback } from 'recoil';
|
||||
|
||||
import { Sort } from '@/ui/data/sort/types/Sort';
|
||||
import { currentViewSortsScopedFamilyState } from '@/views/states/currentViewSortsScopedFamilyState';
|
||||
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 { currentViewId, setCurrentViewSorts } = useViewStates(viewScopeId);
|
||||
|
||||
const [createViewSortsMutation] = useCreateViewSortsMutation();
|
||||
const [updateViewSortMutation] = useUpdateViewSortMutation();
|
||||
const [deleteViewSortsMutation] = useDeleteViewSortsMutation();
|
||||
|
||||
const _createViewSorts = useCallback(
|
||||
(sorts: Sort[], viewId = currentViewId) => {
|
||||
if (!viewId || !sorts.length) return;
|
||||
|
||||
return createViewSortsMutation({
|
||||
variables: {
|
||||
data: sorts.map((sort) => ({
|
||||
key: sort.key,
|
||||
direction: sort.direction as ViewSortDirection,
|
||||
name: sort.definition.label,
|
||||
viewId,
|
||||
})),
|
||||
},
|
||||
});
|
||||
},
|
||||
[createViewSortsMutation, currentViewId],
|
||||
);
|
||||
|
||||
const _updateViewSorts = useCallback(
|
||||
(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: currentViewId },
|
||||
},
|
||||
},
|
||||
}),
|
||||
),
|
||||
);
|
||||
},
|
||||
[currentViewId, updateViewSortMutation],
|
||||
);
|
||||
|
||||
const _deleteViewSorts = useCallback(
|
||||
(sortKeys: string[]) => {
|
||||
if (!currentViewId || !sortKeys.length) return;
|
||||
|
||||
return deleteViewSortsMutation({
|
||||
variables: {
|
||||
where: {
|
||||
key: { in: sortKeys },
|
||||
viewId: { equals: currentViewId },
|
||||
},
|
||||
},
|
||||
});
|
||||
},
|
||||
[currentViewId, deleteViewSortsMutation],
|
||||
);
|
||||
|
||||
const persistViewSorts = useRecoilCallback(
|
||||
({ snapshot }) =>
|
||||
async () => {
|
||||
if (!currentViewId) {
|
||||
return;
|
||||
}
|
||||
|
||||
const currentViewSorts = snapshot
|
||||
.getLoadable(
|
||||
currentViewSortsScopedFamilyState({
|
||||
scopeId: viewScopeId,
|
||||
familyKey: currentViewId,
|
||||
}),
|
||||
)
|
||||
.getValue();
|
||||
|
||||
const savedViewSortsByKey = snapshot
|
||||
.getLoadable(
|
||||
savedViewSortsByKeyScopedFamilySelector({
|
||||
scopeId: viewScopeId,
|
||||
viewId: currentViewId,
|
||||
}),
|
||||
)
|
||||
.getValue();
|
||||
|
||||
if (!currentViewSorts) {
|
||||
return;
|
||||
}
|
||||
if (!savedViewSortsByKey) {
|
||||
return;
|
||||
}
|
||||
|
||||
const sortsToCreate = currentViewSorts.filter(
|
||||
(sort) => !savedViewSortsByKey[sort.key],
|
||||
);
|
||||
await _createViewSorts(sortsToCreate);
|
||||
|
||||
const sortsToUpdate = currentViewSorts.filter(
|
||||
(sort) =>
|
||||
savedViewSortsByKey[sort.key] &&
|
||||
savedViewSortsByKey[sort.key].direction !== sort.direction,
|
||||
);
|
||||
await _updateViewSorts(sortsToUpdate);
|
||||
|
||||
const sortKeys = currentViewSorts.map((sort) => sort.key);
|
||||
const sortKeysToDelete = Object.keys(savedViewSortsByKey).filter(
|
||||
(previousSortKey) => !sortKeys.includes(previousSortKey),
|
||||
);
|
||||
await _deleteViewSorts(sortKeysToDelete);
|
||||
},
|
||||
[
|
||||
currentViewId,
|
||||
viewScopeId,
|
||||
_createViewSorts,
|
||||
_updateViewSorts,
|
||||
_deleteViewSorts,
|
||||
],
|
||||
);
|
||||
|
||||
const upsertViewSort = (sortToUpsert: Sort) => {
|
||||
setCurrentViewSorts?.((sorts) => {
|
||||
return produce(sorts, (sortsDraft) => {
|
||||
const index = sortsDraft.findIndex(
|
||||
(sort) => sort.key === sortToUpsert.key,
|
||||
);
|
||||
|
||||
if (index === -1) {
|
||||
sortsDraft.push(sortToUpsert);
|
||||
} else {
|
||||
sortsDraft[index] = sortToUpsert;
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
return { persistViewSorts, upsertViewSort };
|
||||
};
|
||||
67
front/src/modules/views/hooks/internal/useViews.ts
Normal file
67
front/src/modules/views/hooks/internal/useViews.ts
Normal file
@ -0,0 +1,67 @@
|
||||
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: View) => {
|
||||
const viewObjectId = await snapshot
|
||||
.getLoadable(viewObjectIdScopeState({ scopeId }))
|
||||
.getValue();
|
||||
|
||||
const viewType = await snapshot
|
||||
.getLoadable(viewTypeScopedState({ scopeId }))
|
||||
.getValue();
|
||||
|
||||
if (!viewObjectId || !viewType) {
|
||||
return;
|
||||
}
|
||||
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 deleteView = async (viewId: string) => {
|
||||
await deleteViewMutation({
|
||||
variables: { where: { id: viewId } },
|
||||
refetchQueries: [getOperationName(GET_VIEWS) ?? ''],
|
||||
});
|
||||
};
|
||||
|
||||
return {
|
||||
createView,
|
||||
deleteView,
|
||||
isFetchingViews: false,
|
||||
updateView,
|
||||
};
|
||||
};
|
||||
@ -1,167 +0,0 @@
|
||||
import { useRecoilValue, useSetRecoilState } from 'recoil';
|
||||
|
||||
import { RecoilScopeContext } from '@/types/RecoilScopeContext';
|
||||
import { FieldMetadata } from '@/ui/data/field/types/FieldMetadata';
|
||||
import { currentViewIdScopedState } from '@/ui/data/view-bar/states/currentViewIdScopedState';
|
||||
import { availableBoardCardFieldsScopedState } from '@/ui/layout/board/states/availableBoardCardFieldsScopedState';
|
||||
import { boardCardFieldsScopedState } from '@/ui/layout/board/states/boardCardFieldsScopedState';
|
||||
import { savedBoardCardFieldsFamilyState } from '@/ui/layout/board/states/savedBoardCardFieldsFamilyState';
|
||||
import { savedBoardCardFieldsByKeyFamilySelector } from '@/ui/layout/board/states/selectors/savedBoardCardFieldsByKeyFamilySelector';
|
||||
import { BoardFieldDefinition } from '@/ui/layout/board/types/BoardFieldDefinition';
|
||||
import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
|
||||
import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
|
||||
import {
|
||||
SortOrder,
|
||||
useCreateViewFieldsMutation,
|
||||
useGetViewFieldsQuery,
|
||||
useUpdateViewFieldMutation,
|
||||
} from '~/generated/graphql';
|
||||
import { assertNotNull } from '~/utils/assert';
|
||||
import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
|
||||
|
||||
const toViewFieldInput = (
|
||||
objectId: 'company' | 'person',
|
||||
columDefinition: BoardFieldDefinition<FieldMetadata>,
|
||||
) => ({
|
||||
key: columDefinition.key,
|
||||
name: columDefinition.name,
|
||||
index: columDefinition.index,
|
||||
isVisible: columDefinition.isVisible ?? true,
|
||||
objectId,
|
||||
});
|
||||
|
||||
export const useBoardViewFields = ({
|
||||
objectId,
|
||||
viewFieldDefinition,
|
||||
skipFetch,
|
||||
RecoilScopeContext,
|
||||
}: {
|
||||
objectId: 'company' | 'person';
|
||||
viewFieldDefinition: BoardFieldDefinition<FieldMetadata>[];
|
||||
skipFetch?: boolean;
|
||||
RecoilScopeContext: RecoilScopeContext;
|
||||
}) => {
|
||||
const currentViewId = useRecoilScopedValue(
|
||||
currentViewIdScopedState,
|
||||
RecoilScopeContext,
|
||||
);
|
||||
const [availableBoardCardFields, setAvailableBoardCardFields] =
|
||||
useRecoilScopedState(
|
||||
availableBoardCardFieldsScopedState,
|
||||
RecoilScopeContext,
|
||||
);
|
||||
const [boardCardFields, setBoardCardFields] = useRecoilScopedState(
|
||||
boardCardFieldsScopedState,
|
||||
RecoilScopeContext,
|
||||
);
|
||||
const setSavedBoardCardFields = useSetRecoilState(
|
||||
savedBoardCardFieldsFamilyState(currentViewId),
|
||||
);
|
||||
const savedBoardCardFieldsByKey = useRecoilValue(
|
||||
savedBoardCardFieldsByKeyFamilySelector(currentViewId),
|
||||
);
|
||||
|
||||
const [createViewFieldsMutation] = useCreateViewFieldsMutation();
|
||||
const [updateViewFieldMutation] = useUpdateViewFieldMutation();
|
||||
|
||||
const createViewFields = (
|
||||
viewFieldDefinitions: BoardFieldDefinition<FieldMetadata>[],
|
||||
viewId = currentViewId,
|
||||
) => {
|
||||
if (!viewId || !viewFieldDefinitions.length) return;
|
||||
|
||||
return createViewFieldsMutation({
|
||||
variables: {
|
||||
data: viewFieldDefinitions.map((field) => ({
|
||||
...toViewFieldInput(objectId, field),
|
||||
viewId,
|
||||
})),
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const updateViewFields = (
|
||||
viewFieldDefinitions: BoardFieldDefinition<FieldMetadata>[],
|
||||
) => {
|
||||
if (!currentViewId || !viewFieldDefinitions.length) return;
|
||||
|
||||
return Promise.all(
|
||||
viewFieldDefinitions.map((field) =>
|
||||
updateViewFieldMutation({
|
||||
variables: {
|
||||
data: {
|
||||
isVisible: field.isVisible,
|
||||
},
|
||||
where: {
|
||||
viewId_key: { key: field.key, viewId: currentViewId },
|
||||
},
|
||||
},
|
||||
}),
|
||||
),
|
||||
);
|
||||
};
|
||||
|
||||
const { refetch } = useGetViewFieldsQuery({
|
||||
skip: !currentViewId || skipFetch,
|
||||
variables: {
|
||||
orderBy: { index: SortOrder.Asc },
|
||||
where: {
|
||||
viewId: { equals: currentViewId },
|
||||
},
|
||||
},
|
||||
onCompleted: async (data) => {
|
||||
if (!data.viewFields.length) {
|
||||
// Populate if empty
|
||||
await createViewFields(viewFieldDefinition);
|
||||
return refetch();
|
||||
}
|
||||
|
||||
const nextFields = data.viewFields
|
||||
.map<BoardFieldDefinition<FieldMetadata> | null>((viewField) => {
|
||||
const fieldDefinition = viewFieldDefinition.find(
|
||||
({ key }) => viewField.key === key,
|
||||
);
|
||||
|
||||
return fieldDefinition
|
||||
? {
|
||||
...fieldDefinition,
|
||||
key: viewField.key,
|
||||
name: viewField.name,
|
||||
index: viewField.index,
|
||||
isVisible: viewField.isVisible,
|
||||
}
|
||||
: null;
|
||||
})
|
||||
.filter<BoardFieldDefinition<FieldMetadata>>(assertNotNull);
|
||||
|
||||
if (!isDeeplyEqual(boardCardFields, nextFields)) {
|
||||
setSavedBoardCardFields(nextFields);
|
||||
setBoardCardFields(nextFields);
|
||||
}
|
||||
|
||||
if (!availableBoardCardFields.length) {
|
||||
setAvailableBoardCardFields(viewFieldDefinition);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const persistCardFields = async () => {
|
||||
if (!currentViewId) return;
|
||||
|
||||
const viewFieldsToCreate = boardCardFields.filter(
|
||||
(field) => !savedBoardCardFieldsByKey[field.key],
|
||||
);
|
||||
await createViewFields(viewFieldsToCreate);
|
||||
|
||||
const viewFieldsToUpdate = boardCardFields.filter(
|
||||
(field) =>
|
||||
savedBoardCardFieldsByKey[field.key] &&
|
||||
savedBoardCardFieldsByKey[field.key].isVisible !== field.isVisible,
|
||||
);
|
||||
await updateViewFields(viewFieldsToUpdate);
|
||||
|
||||
return refetch();
|
||||
};
|
||||
|
||||
return { createViewFields, persistCardFields };
|
||||
};
|
||||
@ -1,77 +0,0 @@
|
||||
import { useSearchParams } from 'react-router-dom';
|
||||
|
||||
import { RecoilScopeContext } from '@/types/RecoilScopeContext';
|
||||
import { FieldMetadata } from '@/ui/data/field/types/FieldMetadata';
|
||||
import { filtersScopedState } from '@/ui/data/view-bar/states/filtersScopedState';
|
||||
import { sortsScopedState } from '@/ui/data/view-bar/states/sortsScopedState';
|
||||
import { useBoardColumns } from '@/ui/layout/board/hooks/useBoardColumns';
|
||||
import { boardCardFieldsScopedState } from '@/ui/layout/board/states/boardCardFieldsScopedState';
|
||||
import { BoardFieldDefinition } from '@/ui/layout/board/types/BoardFieldDefinition';
|
||||
import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
|
||||
import { ViewType } from '~/generated/graphql';
|
||||
|
||||
import { useBoardViewFields } from './useBoardViewFields';
|
||||
import { useViewFilters } from './useViewFilters';
|
||||
import { useViews } from './useViews';
|
||||
import { useViewSorts } from './useViewSorts';
|
||||
|
||||
export const useBoardViews = ({
|
||||
fieldDefinitions,
|
||||
objectId,
|
||||
RecoilScopeContext,
|
||||
}: {
|
||||
fieldDefinitions: BoardFieldDefinition<FieldMetadata>[];
|
||||
objectId: 'company';
|
||||
RecoilScopeContext: RecoilScopeContext;
|
||||
}) => {
|
||||
const boardCardFields = useRecoilScopedValue(
|
||||
boardCardFieldsScopedState,
|
||||
RecoilScopeContext,
|
||||
);
|
||||
const filters = useRecoilScopedValue(filtersScopedState, RecoilScopeContext);
|
||||
const sorts = useRecoilScopedValue(sortsScopedState, RecoilScopeContext);
|
||||
|
||||
const [_, setSearchParams] = useSearchParams();
|
||||
|
||||
const handleViewCreate = async (viewId: string) => {
|
||||
await createViewFields(boardCardFields, viewId);
|
||||
await createViewFilters(filters, viewId);
|
||||
await createViewSorts(sorts, viewId);
|
||||
setSearchParams({ view: viewId });
|
||||
};
|
||||
|
||||
const { createView, deleteView, isFetchingViews, updateView } = useViews({
|
||||
objectId,
|
||||
onViewCreate: handleViewCreate,
|
||||
type: ViewType.Pipeline,
|
||||
RecoilScopeContext,
|
||||
});
|
||||
|
||||
const { createViewFields, persistCardFields } = useBoardViewFields({
|
||||
objectId,
|
||||
viewFieldDefinition: fieldDefinitions,
|
||||
skipFetch: isFetchingViews,
|
||||
RecoilScopeContext,
|
||||
});
|
||||
|
||||
const { persistBoardColumns } = useBoardColumns();
|
||||
|
||||
const { createViewFilters, persistFilters } = useViewFilters({
|
||||
skipFetch: isFetchingViews,
|
||||
RecoilScopeContext,
|
||||
});
|
||||
|
||||
const { createViewSorts, persistSorts } = useViewSorts({
|
||||
skipFetch: isFetchingViews,
|
||||
RecoilScopeContext,
|
||||
});
|
||||
|
||||
const submitCurrentView = async () => {
|
||||
await persistCardFields();
|
||||
await persistBoardColumns();
|
||||
await persistFilters();
|
||||
await persistSorts();
|
||||
};
|
||||
|
||||
return { createView, deleteView, submitCurrentView, updateView };
|
||||
};
|
||||
@ -1,35 +0,0 @@
|
||||
export const useMoveViewColumns = () => {
|
||||
const handleColumnMove = <T extends { index: number }>(
|
||||
direction: 'left' | 'right',
|
||||
currentArrayindex: number,
|
||||
targetArray: T[],
|
||||
) => {
|
||||
const targetArrayIndex =
|
||||
direction === 'left' ? currentArrayindex - 1 : currentArrayindex + 1;
|
||||
const targetArraySize = targetArray.length - 1;
|
||||
if (
|
||||
currentArrayindex >= 0 &&
|
||||
targetArrayIndex >= 0 &&
|
||||
currentArrayindex <= targetArraySize &&
|
||||
targetArrayIndex <= targetArraySize
|
||||
) {
|
||||
const currentEntity = targetArray[currentArrayindex];
|
||||
const targetEntity = targetArray[targetArrayIndex];
|
||||
const newArray = [...targetArray];
|
||||
|
||||
newArray[currentArrayindex] = {
|
||||
...targetEntity,
|
||||
index: currentEntity.index,
|
||||
};
|
||||
newArray[targetArrayIndex] = {
|
||||
...currentEntity,
|
||||
index: targetEntity.index,
|
||||
};
|
||||
return newArray;
|
||||
}
|
||||
|
||||
return targetArray;
|
||||
};
|
||||
|
||||
return { handleColumnMove };
|
||||
};
|
||||
15
front/src/modules/views/hooks/useRemoveFilter.ts
Normal file
15
front/src/modules/views/hooks/useRemoveFilter.ts
Normal file
@ -0,0 +1,15 @@
|
||||
import { useView } from '@/views/hooks/useView';
|
||||
|
||||
export const useRemoveFilter = () => {
|
||||
const { setCurrentViewFilters } = useView();
|
||||
|
||||
const removeFilter = (filterKey: string) => {
|
||||
setCurrentViewFilters?.((filters) => {
|
||||
return filters.filter((filter) => {
|
||||
return filter.key !== filterKey;
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
return removeFilter;
|
||||
};
|
||||
@ -1,183 +0,0 @@
|
||||
import { useCallback, useState } from 'react';
|
||||
import { getOperationName } from '@apollo/client/utilities';
|
||||
import { useRecoilValue, useSetRecoilState } from 'recoil';
|
||||
|
||||
import { availableTableColumnsScopedState } from '@/ui/data/data-table/states/availableTableColumnsScopedState';
|
||||
import { TableRecoilScopeContext } from '@/ui/data/data-table/states/recoil-scope-contexts/TableRecoilScopeContext';
|
||||
import { savedTableColumnsFamilyState } from '@/ui/data/data-table/states/savedTableColumnsFamilyState';
|
||||
import { savedTableColumnsByKeyFamilySelector } from '@/ui/data/data-table/states/selectors/savedTableColumnsByKeyFamilySelector';
|
||||
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 { currentViewIdScopedState } from '@/ui/data/view-bar/states/currentViewIdScopedState';
|
||||
import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
|
||||
import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
|
||||
import {
|
||||
SortOrder,
|
||||
useCreateViewFieldsMutation,
|
||||
useGetViewFieldsQuery,
|
||||
useUpdateViewFieldMutation,
|
||||
} from '~/generated/graphql';
|
||||
import { assertNotNull } from '~/utils/assert';
|
||||
import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
|
||||
|
||||
import { GET_VIEW_FIELDS } from '../graphql/queries/getViewFields';
|
||||
|
||||
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,
|
||||
});
|
||||
|
||||
export const useTableViewFields = ({
|
||||
objectId,
|
||||
columnDefinitions,
|
||||
skipFetch,
|
||||
}: {
|
||||
objectId: string;
|
||||
columnDefinitions: ColumnDefinition<FieldMetadata>[];
|
||||
skipFetch?: boolean;
|
||||
}) => {
|
||||
const currentViewId = useRecoilScopedValue(
|
||||
currentViewIdScopedState,
|
||||
TableRecoilScopeContext,
|
||||
);
|
||||
const [previousViewId, setPreviousViewId] = useState<string | undefined>();
|
||||
const [availableTableColumns, setAvailableTableColumns] =
|
||||
useRecoilScopedState(
|
||||
availableTableColumnsScopedState,
|
||||
TableRecoilScopeContext,
|
||||
);
|
||||
const [tableColumns, setTableColumns] = useRecoilScopedState(
|
||||
tableColumnsScopedState,
|
||||
TableRecoilScopeContext,
|
||||
);
|
||||
const setSavedTableColumns = useSetRecoilState(
|
||||
savedTableColumnsFamilyState(currentViewId),
|
||||
);
|
||||
const savedTableColumnsByKey = useRecoilValue(
|
||||
savedTableColumnsByKeyFamilySelector(currentViewId),
|
||||
);
|
||||
|
||||
const [createViewFieldsMutation] = useCreateViewFieldsMutation();
|
||||
const [updateViewFieldMutation] = useUpdateViewFieldMutation();
|
||||
|
||||
const createViewFields = useCallback(
|
||||
(columns: ColumnDefinition<FieldMetadata>[], viewId = currentViewId) => {
|
||||
if (!viewId || !columns.length) return;
|
||||
|
||||
return createViewFieldsMutation({
|
||||
variables: {
|
||||
data: columns.map((column) => ({
|
||||
...toViewFieldInput(objectId, column),
|
||||
viewId,
|
||||
})),
|
||||
},
|
||||
refetchQueries: [getOperationName(GET_VIEW_FIELDS) ?? ''],
|
||||
});
|
||||
},
|
||||
[createViewFieldsMutation, currentViewId, objectId],
|
||||
);
|
||||
|
||||
const updateViewFields = useCallback(
|
||||
(columns: ColumnDefinition<FieldMetadata>[]) => {
|
||||
if (!currentViewId || !columns.length) return;
|
||||
|
||||
return Promise.all(
|
||||
columns.map((column) =>
|
||||
updateViewFieldMutation({
|
||||
variables: {
|
||||
data: {
|
||||
isVisible: column.isVisible,
|
||||
size: column.size,
|
||||
index: column.index,
|
||||
},
|
||||
where: {
|
||||
viewId_key: { key: column.key, viewId: currentViewId },
|
||||
},
|
||||
},
|
||||
}),
|
||||
),
|
||||
);
|
||||
},
|
||||
[currentViewId, updateViewFieldMutation],
|
||||
);
|
||||
|
||||
useGetViewFieldsQuery({
|
||||
skip: !currentViewId || skipFetch || columnDefinitions.length === 0,
|
||||
variables: {
|
||||
orderBy: { index: SortOrder.Asc },
|
||||
where: {
|
||||
viewId: { equals: currentViewId },
|
||||
},
|
||||
},
|
||||
onCompleted: async (data) => {
|
||||
if (!data.viewFields.length) {
|
||||
// Populate if empty
|
||||
return createViewFields(columnDefinitions);
|
||||
}
|
||||
|
||||
const nextColumns = data.viewFields
|
||||
.map<ColumnDefinition<FieldMetadata> | null>((viewField) => {
|
||||
const columnDefinition = columnDefinitions.find(
|
||||
({ key }) => viewField.key === key,
|
||||
);
|
||||
|
||||
return columnDefinition
|
||||
? {
|
||||
...columnDefinition,
|
||||
key: viewField.key,
|
||||
name: viewField.name,
|
||||
index: viewField.index,
|
||||
size: viewField.size ?? columnDefinition.size,
|
||||
isVisible: viewField.isVisible,
|
||||
}
|
||||
: null;
|
||||
})
|
||||
.filter<ColumnDefinition<FieldMetadata>>(assertNotNull);
|
||||
|
||||
setSavedTableColumns(nextColumns);
|
||||
|
||||
if (
|
||||
previousViewId !== currentViewId &&
|
||||
!isDeeplyEqual(tableColumns, nextColumns)
|
||||
) {
|
||||
setTableColumns(nextColumns);
|
||||
setPreviousViewId(currentViewId);
|
||||
}
|
||||
|
||||
if (!availableTableColumns.length) {
|
||||
setAvailableTableColumns(columnDefinitions);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const persistColumns = useCallback(
|
||||
async (nextColumns: ColumnDefinition<FieldMetadata>[]) => {
|
||||
if (!currentViewId) return;
|
||||
|
||||
const viewFieldsToCreate = nextColumns.filter(
|
||||
(column) => !savedTableColumnsByKey[column.key],
|
||||
);
|
||||
await createViewFields(viewFieldsToCreate);
|
||||
|
||||
const viewFieldsToUpdate = nextColumns.filter(
|
||||
(column) =>
|
||||
savedTableColumnsByKey[column.key] &&
|
||||
(savedTableColumnsByKey[column.key].size !== column.size ||
|
||||
savedTableColumnsByKey[column.key].index !== column.index ||
|
||||
savedTableColumnsByKey[column.key].isVisible !== column.isVisible),
|
||||
);
|
||||
await updateViewFields(viewFieldsToUpdate);
|
||||
},
|
||||
[createViewFields, currentViewId, savedTableColumnsByKey, updateViewFields],
|
||||
);
|
||||
|
||||
return { createViewFields, persistColumns };
|
||||
};
|
||||
@ -1,83 +0,0 @@
|
||||
import { useSearchParams } from 'react-router-dom';
|
||||
|
||||
import { TableRecoilScopeContext } from '@/ui/data/data-table/states/recoil-scope-contexts/TableRecoilScopeContext';
|
||||
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 { filtersScopedState } from '@/ui/data/view-bar/states/filtersScopedState';
|
||||
import { sortsScopedState } from '@/ui/data/view-bar/states/sortsScopedState';
|
||||
import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
|
||||
import { ViewType } from '~/generated/graphql';
|
||||
|
||||
import { useTableViewFields } from './useTableViewFields';
|
||||
import { useViewFilters } from './useViewFilters';
|
||||
import { useViews } from './useViews';
|
||||
import { useViewSorts } from './useViewSorts';
|
||||
|
||||
export const useTableViews = ({
|
||||
objectId,
|
||||
columnDefinitions,
|
||||
}: {
|
||||
objectId: string;
|
||||
columnDefinitions: ColumnDefinition<FieldMetadata>[];
|
||||
}) => {
|
||||
const tableColumns = useRecoilScopedValue(
|
||||
tableColumnsScopedState,
|
||||
TableRecoilScopeContext,
|
||||
);
|
||||
const filters = useRecoilScopedValue(
|
||||
filtersScopedState,
|
||||
TableRecoilScopeContext,
|
||||
);
|
||||
const sorts = useRecoilScopedValue(sortsScopedState, TableRecoilScopeContext);
|
||||
|
||||
const [_, setSearchParams] = useSearchParams();
|
||||
|
||||
const handleViewCreate = async (viewId: string) => {
|
||||
await createViewFields(tableColumns, viewId);
|
||||
await createViewFilters(filters, viewId);
|
||||
await createViewSorts(sorts, viewId);
|
||||
setSearchParams({ view: viewId });
|
||||
};
|
||||
|
||||
const { createView, deleteView, isFetchingViews, updateView } = useViews({
|
||||
objectId,
|
||||
onViewCreate: handleViewCreate,
|
||||
type: ViewType.Table,
|
||||
RecoilScopeContext: TableRecoilScopeContext,
|
||||
});
|
||||
const { createViewFields, persistColumns } = useTableViewFields({
|
||||
objectId,
|
||||
columnDefinitions,
|
||||
skipFetch: isFetchingViews,
|
||||
});
|
||||
|
||||
const createDefaultViewFields = async () => {
|
||||
await createViewFields(tableColumns);
|
||||
};
|
||||
|
||||
const { createViewFilters, persistFilters } = useViewFilters({
|
||||
RecoilScopeContext: TableRecoilScopeContext,
|
||||
skipFetch: isFetchingViews,
|
||||
});
|
||||
|
||||
const { createViewSorts, persistSorts } = useViewSorts({
|
||||
RecoilScopeContext: TableRecoilScopeContext,
|
||||
skipFetch: isFetchingViews,
|
||||
});
|
||||
|
||||
const submitCurrentView = async () => {
|
||||
await persistFilters();
|
||||
await persistSorts();
|
||||
};
|
||||
|
||||
return {
|
||||
createView,
|
||||
deleteView,
|
||||
persistColumns,
|
||||
submitCurrentView,
|
||||
updateView,
|
||||
createDefaultViewFields,
|
||||
isFetchingViews,
|
||||
};
|
||||
};
|
||||
26
front/src/modules/views/hooks/useUpsertFilter.ts
Normal file
26
front/src/modules/views/hooks/useUpsertFilter.ts
Normal file
@ -0,0 +1,26 @@
|
||||
import { produce } from 'immer';
|
||||
|
||||
import { Filter } from '@/ui/data/filter/types/Filter';
|
||||
import { useView } from '@/views/hooks/useView';
|
||||
|
||||
export const useUpsertFilter = () => {
|
||||
const { setCurrentViewFilters } = useView();
|
||||
|
||||
const upsertFilter = (filterToUpsert: Filter) => {
|
||||
setCurrentViewFilters?.((filters) => {
|
||||
return produce(filters, (filtersDraft) => {
|
||||
const index = filtersDraft.findIndex(
|
||||
(filter) => filter.key === filterToUpsert.key,
|
||||
);
|
||||
|
||||
if (index === -1) {
|
||||
filtersDraft.push(filterToUpsert);
|
||||
} else {
|
||||
filtersDraft[index] = filterToUpsert;
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
return upsertFilter;
|
||||
};
|
||||
189
front/src/modules/views/hooks/useView.ts
Normal file
189
front/src/modules/views/hooks/useView.ts
Normal file
@ -0,0 +1,189 @@
|
||||
import { useCallback } from 'react';
|
||||
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';
|
||||
import { currentViewFieldsScopedFamilyState } from '../states/currentViewFieldsScopedFamilyState';
|
||||
import { currentViewIdScopedState } from '../states/currentViewIdScopedState';
|
||||
import { savedViewFiltersScopedFamilyState } from '../states/savedViewFiltersScopedFamilyState';
|
||||
import { savedViewSortsScopedFamilyState } from '../states/savedViewSortsScopedFamilyState';
|
||||
import { viewEditModeScopedState } from '../states/viewEditModeScopedState';
|
||||
import { viewsScopedState } from '../states/viewsScopedState';
|
||||
|
||||
import { useViewFields } from './internal/useViewFields';
|
||||
import { useViewFilters } from './internal/useViewFilters';
|
||||
import { useViews } from './internal/useViews';
|
||||
import { useViewSorts } from './internal/useViewSorts';
|
||||
import { useViewStates } from './useViewStates';
|
||||
|
||||
type UseViewProps = {
|
||||
viewScopeId?: string;
|
||||
};
|
||||
|
||||
export const useView = (props?: UseViewProps) => {
|
||||
const scopeId = useAvailableScopeIdOrThrow(
|
||||
ViewScopeInternalContext,
|
||||
props?.viewScopeId,
|
||||
);
|
||||
|
||||
const {
|
||||
setCurrentViewId,
|
||||
currentViewId,
|
||||
|
||||
setViews,
|
||||
setViewEditMode,
|
||||
setViewObjectId,
|
||||
setViewType,
|
||||
setEntityCountInCurrentView,
|
||||
setIsViewBarExpanded,
|
||||
|
||||
setAvailableSorts,
|
||||
setCurrentViewSorts,
|
||||
setSavedViewSorts,
|
||||
|
||||
setAvailableFilters,
|
||||
setCurrentViewFilters,
|
||||
setSavedViewFilters,
|
||||
|
||||
setAvailableFields,
|
||||
setCurrentViewFields,
|
||||
setSavedViewFields,
|
||||
} = useViewStates(scopeId);
|
||||
|
||||
const { persistViewSorts, upsertViewSort } = useViewSorts(scopeId);
|
||||
const { persistViewFilters } = useViewFilters(scopeId);
|
||||
const { persistViewFields } = useViewFields(scopeId);
|
||||
const { createView: internalCreateView, deleteView: internalDeleteView } =
|
||||
useViews(scopeId);
|
||||
const [_, setSearchParams] = useSearchParams();
|
||||
|
||||
const resetViewBar = useRecoilCallback(({ snapshot }) => () => {
|
||||
const savedViewFilters = snapshot
|
||||
.getLoadable(
|
||||
savedViewFiltersScopedFamilyState({
|
||||
scopeId,
|
||||
familyKey: currentViewId || '',
|
||||
}),
|
||||
)
|
||||
.getValue();
|
||||
|
||||
const savedViewSorts = snapshot
|
||||
.getLoadable(
|
||||
savedViewSortsScopedFamilyState({
|
||||
scopeId,
|
||||
familyKey: currentViewId || '',
|
||||
}),
|
||||
)
|
||||
.getValue();
|
||||
|
||||
if (savedViewFilters) {
|
||||
setCurrentViewFilters?.(savedViewFilters);
|
||||
}
|
||||
if (savedViewSorts) {
|
||||
setCurrentViewSorts?.(savedViewSorts);
|
||||
}
|
||||
setViewEditMode?.('none');
|
||||
setIsViewBarExpanded?.(false);
|
||||
});
|
||||
|
||||
const createView = useCallback(
|
||||
async (name: string) => {
|
||||
const newViewId = v4();
|
||||
await internalCreateView({ id: v4(), name });
|
||||
|
||||
// await persistViewFields();
|
||||
await persistViewFilters();
|
||||
await persistViewSorts();
|
||||
//setCurrentViewId(newViewId);
|
||||
|
||||
setSearchParams({ view: newViewId });
|
||||
},
|
||||
[internalCreateView, persistViewFilters, persistViewSorts, setSearchParams],
|
||||
);
|
||||
|
||||
const updateCurrentView = async () => {
|
||||
await persistViewFilters();
|
||||
await persistViewSorts();
|
||||
};
|
||||
|
||||
const removeView = useRecoilCallback(
|
||||
({ set, snapshot }) =>
|
||||
async (viewId: string) => {
|
||||
const currentViewId = await snapshot.getPromise(
|
||||
currentViewIdScopedState({ scopeId }),
|
||||
);
|
||||
|
||||
if (currentViewId === viewId)
|
||||
set(currentViewIdScopedState({ scopeId }), undefined);
|
||||
|
||||
set(viewsScopedState({ scopeId }), (previousViews) =>
|
||||
previousViews.filter((view) => view.id !== viewId),
|
||||
);
|
||||
internalDeleteView(viewId);
|
||||
},
|
||||
[internalDeleteView, scopeId],
|
||||
);
|
||||
|
||||
const handleViewNameSubmit = useRecoilCallback(
|
||||
({ snapshot, set }) =>
|
||||
async (name?: string) => {
|
||||
const viewEditMode = snapshot
|
||||
.getLoadable(viewEditModeScopedState({ scopeId }))
|
||||
.getValue();
|
||||
|
||||
const currentViewFields = snapshot
|
||||
.getLoadable(
|
||||
currentViewFieldsScopedFamilyState({
|
||||
scopeId,
|
||||
familyKey: currentViewId || '',
|
||||
}),
|
||||
)
|
||||
.getValue();
|
||||
|
||||
const isCreateMode = viewEditMode === 'create';
|
||||
|
||||
if (isCreateMode && name && currentViewFields) {
|
||||
await createView(name);
|
||||
set(savedTableColumnsFamilyState(currentViewId), currentViewFields);
|
||||
}
|
||||
},
|
||||
[createView, currentViewId, scopeId],
|
||||
);
|
||||
|
||||
return {
|
||||
scopeId,
|
||||
currentViewId,
|
||||
setCurrentViewId,
|
||||
updateCurrentView,
|
||||
createView,
|
||||
removeView,
|
||||
setIsViewBarExpanded,
|
||||
resetViewBar,
|
||||
handleViewNameSubmit,
|
||||
|
||||
setViews,
|
||||
setViewEditMode,
|
||||
setViewObjectId,
|
||||
setViewType,
|
||||
setEntityCountInCurrentView,
|
||||
|
||||
setAvailableSorts,
|
||||
setCurrentViewSorts,
|
||||
setSavedViewSorts,
|
||||
upsertViewSort,
|
||||
|
||||
setAvailableFilters,
|
||||
setCurrentViewFilters,
|
||||
setSavedViewFilters,
|
||||
|
||||
setAvailableFields,
|
||||
setCurrentViewFields,
|
||||
setSavedViewFields,
|
||||
|
||||
persistViewFields,
|
||||
};
|
||||
};
|
||||
@ -1,178 +0,0 @@
|
||||
import { useCallback } from 'react';
|
||||
import { useRecoilState, useRecoilValue } from 'recoil';
|
||||
|
||||
import { RecoilScopeContext } from '@/types/RecoilScopeContext';
|
||||
import { availableFiltersScopedState } from '@/ui/data/view-bar/states/availableFiltersScopedState';
|
||||
import { currentViewIdScopedState } from '@/ui/data/view-bar/states/currentViewIdScopedState';
|
||||
import { filtersScopedState } from '@/ui/data/view-bar/states/filtersScopedState';
|
||||
import { savedFiltersFamilyState } from '@/ui/data/view-bar/states/savedFiltersFamilyState';
|
||||
import { savedFiltersByKeyFamilySelector } from '@/ui/data/view-bar/states/selectors/savedFiltersByKeyFamilySelector';
|
||||
import { Filter } from '@/ui/data/view-bar/types/Filter';
|
||||
import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
|
||||
import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
|
||||
import {
|
||||
useCreateViewFiltersMutation,
|
||||
useDeleteViewFiltersMutation,
|
||||
useGetViewFiltersQuery,
|
||||
useUpdateViewFilterMutation,
|
||||
} from '~/generated/graphql';
|
||||
import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
|
||||
|
||||
export const useViewFilters = ({
|
||||
RecoilScopeContext,
|
||||
skipFetch,
|
||||
}: {
|
||||
RecoilScopeContext: RecoilScopeContext;
|
||||
skipFetch?: boolean;
|
||||
}) => {
|
||||
const currentViewId = useRecoilScopedValue(
|
||||
currentViewIdScopedState,
|
||||
RecoilScopeContext,
|
||||
);
|
||||
const [filters, setFilters] = useRecoilScopedState(
|
||||
filtersScopedState,
|
||||
RecoilScopeContext,
|
||||
);
|
||||
const [availableFilters] = useRecoilScopedState(
|
||||
availableFiltersScopedState,
|
||||
RecoilScopeContext,
|
||||
);
|
||||
const [, setSavedFilters] = useRecoilState(
|
||||
savedFiltersFamilyState(currentViewId),
|
||||
);
|
||||
const savedFiltersByKey = useRecoilValue(
|
||||
savedFiltersByKeyFamilySelector(currentViewId),
|
||||
);
|
||||
|
||||
const { refetch } = useGetViewFiltersQuery({
|
||||
skip: !currentViewId || skipFetch,
|
||||
variables: {
|
||||
where: {
|
||||
viewId: { equals: currentViewId },
|
||||
},
|
||||
},
|
||||
onCompleted: (data) => {
|
||||
const nextFilters = data.viewFilters
|
||||
.map(({ __typename, name: _name, ...viewFilter }) => {
|
||||
const availableFilter = availableFilters.find(
|
||||
(filter) => filter.key === viewFilter.key,
|
||||
);
|
||||
|
||||
return availableFilter
|
||||
? {
|
||||
...viewFilter,
|
||||
displayValue: viewFilter.displayValue ?? viewFilter.value,
|
||||
type: availableFilter.type,
|
||||
}
|
||||
: undefined;
|
||||
})
|
||||
.filter((filter): filter is Filter => !!filter);
|
||||
|
||||
if (!isDeeplyEqual(filters, nextFilters)) {
|
||||
setSavedFilters(nextFilters);
|
||||
setFilters(nextFilters);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const [createViewFiltersMutation] = useCreateViewFiltersMutation();
|
||||
const [updateViewFilterMutation] = useUpdateViewFilterMutation();
|
||||
const [deleteViewFiltersMutation] = useDeleteViewFiltersMutation();
|
||||
|
||||
const createViewFilters = useCallback(
|
||||
(filters: Filter[], viewId = currentViewId) => {
|
||||
if (!viewId || !filters.length) 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,
|
||||
})),
|
||||
},
|
||||
});
|
||||
},
|
||||
[availableFilters, createViewFiltersMutation, currentViewId],
|
||||
);
|
||||
|
||||
const updateViewFilters = useCallback(
|
||||
(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: currentViewId },
|
||||
},
|
||||
},
|
||||
}),
|
||||
),
|
||||
);
|
||||
},
|
||||
[currentViewId, updateViewFilterMutation],
|
||||
);
|
||||
|
||||
const deleteViewFilters = useCallback(
|
||||
(filterKeys: string[]) => {
|
||||
if (!currentViewId || !filterKeys.length) return;
|
||||
|
||||
return deleteViewFiltersMutation({
|
||||
variables: {
|
||||
where: {
|
||||
key: { in: filterKeys },
|
||||
viewId: { equals: currentViewId },
|
||||
},
|
||||
},
|
||||
});
|
||||
},
|
||||
[currentViewId, deleteViewFiltersMutation],
|
||||
);
|
||||
|
||||
const persistFilters = useCallback(async () => {
|
||||
if (!currentViewId) return;
|
||||
|
||||
const filtersToCreate = filters.filter(
|
||||
(filter) => !savedFiltersByKey[filter.key],
|
||||
);
|
||||
await createViewFilters(filtersToCreate);
|
||||
|
||||
const filtersToUpdate = filters.filter(
|
||||
(filter) =>
|
||||
savedFiltersByKey[filter.key] &&
|
||||
(savedFiltersByKey[filter.key].operand !== filter.operand ||
|
||||
savedFiltersByKey[filter.key].value !== filter.value),
|
||||
);
|
||||
await updateViewFilters(filtersToUpdate);
|
||||
|
||||
const filterKeys = filters.map((filter) => filter.key);
|
||||
const filterKeysToDelete = Object.keys(savedFiltersByKey).filter(
|
||||
(previousFilterKey) => !filterKeys.includes(previousFilterKey),
|
||||
);
|
||||
await deleteViewFilters(filterKeysToDelete);
|
||||
|
||||
return refetch();
|
||||
}, [
|
||||
currentViewId,
|
||||
filters,
|
||||
createViewFilters,
|
||||
updateViewFilters,
|
||||
savedFiltersByKey,
|
||||
deleteViewFilters,
|
||||
refetch,
|
||||
]);
|
||||
|
||||
return { createViewFilters, persistFilters };
|
||||
};
|
||||
244
front/src/modules/views/hooks/useViewInternalStates.ts
Normal file
244
front/src/modules/views/hooks/useViewInternalStates.ts
Normal file
@ -0,0 +1,244 @@
|
||||
import { useRecoilValue } from 'recoil';
|
||||
|
||||
import { useRecoilScopedFamilyState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedFamilyState';
|
||||
import { useRecoilScopedStateV2 } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedStateV2';
|
||||
import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
|
||||
|
||||
import { ViewScopeInternalContext } from '../scopes/scope-internal-context/ViewScopeInternalContext';
|
||||
import { availableFieldsScopedState } from '../states/availableFieldsScopedState';
|
||||
import { availableFiltersScopedState } from '../states/availableFiltersScopedState';
|
||||
import { availableSortsScopedState } from '../states/availableSortsScopedState';
|
||||
import { currentViewFieldsScopedFamilyState } from '../states/currentViewFieldsScopedFamilyState';
|
||||
import { currentViewFiltersScopedFamilyState } from '../states/currentViewFiltersScopedFamilyState';
|
||||
import { currentViewIdScopedState } from '../states/currentViewIdScopedState';
|
||||
import { currentViewSortsScopedFamilyState } from '../states/currentViewSortsScopedFamilyState';
|
||||
import { entityCountInCurrentViewScopedState } from '../states/entityCountInCurrentViewScopedState';
|
||||
import { isViewBarExpandedScopedState } from '../states/isViewBarExpandedScopedState';
|
||||
import { onViewFieldsChangeScopedState } from '../states/onViewFieldsChangeScopedState';
|
||||
import { onViewFiltersChangeScopedState } from '../states/onViewFiltersChangeScopedState';
|
||||
import { onViewSortsChangeScopedState } from '../states/onViewSortsChangeScopedState';
|
||||
import { savedViewFieldsScopedFamilyState } from '../states/savedViewFieldsScopedFamilyState';
|
||||
import { savedViewFiltersScopedFamilyState } from '../states/savedViewFiltersScopedFamilyState';
|
||||
import { savedViewSortsScopedFamilyState } from '../states/savedViewSortsScopedFamilyState';
|
||||
import { canPersistViewFiltersScopedFamilySelector } from '../states/selectors/canPersistViewFiltersScopedFamilySelector';
|
||||
import { canPersistViewSortsScopedFamilySelector } from '../states/selectors/canPersistViewSortsScopedFamilySelector';
|
||||
import { currentViewScopedSelector } from '../states/selectors/currentViewScopedSelector';
|
||||
import { currentViewSortsOrderByScopedFamilySelector } from '../states/selectors/currentViewSortsOrderByScopedFamilySelector';
|
||||
import { savedViewFieldByKeyScopedFamilySelector } from '../states/selectors/savedViewFieldByKeyScopedFamilySelector';
|
||||
import { savedViewFiltersByKeyScopedFamilySelector } from '../states/selectors/savedViewFiltersByKeyScopedFamilySelector';
|
||||
import { savedViewSortsByKeyScopedFamilySelector } from '../states/selectors/savedViewSortsByKeyScopedFamilySelector';
|
||||
import { viewEditModeScopedState } from '../states/viewEditModeScopedState';
|
||||
import { viewObjectIdScopeState } from '../states/viewObjectIdScopeState';
|
||||
import { viewsScopedState } from '../states/viewsScopedState';
|
||||
import { viewTypeScopedState } from '../states/viewTypeScopedState';
|
||||
|
||||
export const useViewInternalStates = (
|
||||
viewScopeId?: string,
|
||||
viewId?: string,
|
||||
) => {
|
||||
const scopeId = useAvailableScopeIdOrThrow(
|
||||
ViewScopeInternalContext,
|
||||
viewScopeId,
|
||||
);
|
||||
|
||||
// View
|
||||
const [currentViewId, setCurrentViewId] = useRecoilScopedStateV2(
|
||||
currentViewIdScopedState,
|
||||
scopeId,
|
||||
);
|
||||
|
||||
const familyItemId = viewId ? viewId : currentViewId;
|
||||
|
||||
const currentView = useRecoilValue(currentViewScopedSelector(scopeId));
|
||||
|
||||
const [viewEditMode, setViewEditMode] = useRecoilScopedStateV2(
|
||||
viewEditModeScopedState,
|
||||
scopeId,
|
||||
);
|
||||
|
||||
const [views, setViews] = useRecoilScopedStateV2(viewsScopedState, scopeId);
|
||||
|
||||
const [viewObjectId, setViewObjectId] = useRecoilScopedStateV2(
|
||||
viewObjectIdScopeState,
|
||||
scopeId,
|
||||
);
|
||||
|
||||
const [viewType, setViewType] = useRecoilScopedStateV2(
|
||||
viewTypeScopedState,
|
||||
scopeId,
|
||||
);
|
||||
|
||||
const [entityCountInCurrentView, setEntityCountInCurrentView] =
|
||||
useRecoilScopedStateV2(entityCountInCurrentViewScopedState, scopeId);
|
||||
|
||||
const [isViewBarExpanded, setIsViewBarExpanded] = useRecoilScopedStateV2(
|
||||
isViewBarExpandedScopedState,
|
||||
scopeId,
|
||||
);
|
||||
|
||||
// ViewSorts
|
||||
const [currentViewSorts, setCurrentViewSorts] = useRecoilScopedFamilyState(
|
||||
currentViewSortsScopedFamilyState,
|
||||
scopeId,
|
||||
familyItemId,
|
||||
);
|
||||
|
||||
const [savedViewSorts, setSavedViewSorts] = useRecoilScopedFamilyState(
|
||||
savedViewSortsScopedFamilyState,
|
||||
scopeId,
|
||||
familyItemId,
|
||||
);
|
||||
|
||||
const savedViewSortsByKey = useRecoilValue(
|
||||
savedViewSortsByKeyScopedFamilySelector({
|
||||
scopeId: scopeId,
|
||||
viewId: familyItemId,
|
||||
}),
|
||||
);
|
||||
|
||||
const [availableSorts, setAvailableSorts] = useRecoilScopedStateV2(
|
||||
availableSortsScopedState,
|
||||
scopeId,
|
||||
);
|
||||
|
||||
const canPersistSorts = useRecoilValue(
|
||||
canPersistViewSortsScopedFamilySelector({
|
||||
viewScopeId: scopeId,
|
||||
viewId: familyItemId,
|
||||
}),
|
||||
);
|
||||
|
||||
const currentViewSortsOrderBy = useRecoilValue(
|
||||
currentViewSortsOrderByScopedFamilySelector({
|
||||
viewScopeId: scopeId,
|
||||
viewId: familyItemId,
|
||||
}),
|
||||
);
|
||||
|
||||
// ViewFilters
|
||||
const [currentViewFilters, setCurrentViewFilters] =
|
||||
useRecoilScopedFamilyState(
|
||||
currentViewFiltersScopedFamilyState,
|
||||
scopeId,
|
||||
familyItemId,
|
||||
);
|
||||
|
||||
const [savedViewFilters, setSavedViewFilters] = useRecoilScopedFamilyState(
|
||||
savedViewFiltersScopedFamilyState,
|
||||
scopeId,
|
||||
familyItemId,
|
||||
);
|
||||
|
||||
const savedViewFiltersByKey = useRecoilValue(
|
||||
savedViewFiltersByKeyScopedFamilySelector({
|
||||
scopeId: scopeId,
|
||||
viewId: familyItemId,
|
||||
}),
|
||||
);
|
||||
|
||||
const [availableFilters, setAvailableFilters] = useRecoilScopedStateV2(
|
||||
availableFiltersScopedState,
|
||||
scopeId,
|
||||
);
|
||||
|
||||
const canPersistFilters = useRecoilValue(
|
||||
canPersistViewFiltersScopedFamilySelector({
|
||||
viewScopeId: scopeId,
|
||||
viewId: familyItemId,
|
||||
}),
|
||||
);
|
||||
|
||||
// ViewFields
|
||||
const [availableFields, setAvailableFields] = useRecoilScopedStateV2(
|
||||
availableFieldsScopedState,
|
||||
scopeId,
|
||||
);
|
||||
|
||||
const [currentViewFields, setCurrentViewFields] = useRecoilScopedFamilyState(
|
||||
currentViewFieldsScopedFamilyState,
|
||||
scopeId,
|
||||
familyItemId,
|
||||
);
|
||||
|
||||
const [savedViewFields, setSavedViewFields] = useRecoilScopedFamilyState(
|
||||
savedViewFieldsScopedFamilyState,
|
||||
scopeId,
|
||||
familyItemId,
|
||||
);
|
||||
|
||||
const savedViewFieldsByKey = useRecoilValue(
|
||||
savedViewFieldByKeyScopedFamilySelector({
|
||||
viewScopeId: scopeId,
|
||||
viewId: familyItemId,
|
||||
}),
|
||||
);
|
||||
|
||||
// ViewChangeHandlers
|
||||
const [onViewSortsChange, setOnViewSortsChange] = useRecoilScopedStateV2(
|
||||
onViewSortsChangeScopedState,
|
||||
scopeId,
|
||||
);
|
||||
|
||||
const [onViewFiltersChange, setOnViewFiltersChange] = useRecoilScopedStateV2(
|
||||
onViewFiltersChangeScopedState,
|
||||
scopeId,
|
||||
);
|
||||
|
||||
const [onViewFieldsChange, setOnViewFieldsChange] = useRecoilScopedStateV2(
|
||||
onViewFieldsChangeScopedState,
|
||||
scopeId,
|
||||
);
|
||||
|
||||
return {
|
||||
currentViewId,
|
||||
currentView,
|
||||
setCurrentViewId,
|
||||
isViewBarExpanded,
|
||||
setIsViewBarExpanded,
|
||||
|
||||
views,
|
||||
setViews,
|
||||
viewEditMode,
|
||||
setViewEditMode,
|
||||
viewObjectId,
|
||||
setViewObjectId,
|
||||
viewType,
|
||||
setViewType,
|
||||
entityCountInCurrentView,
|
||||
setEntityCountInCurrentView,
|
||||
|
||||
availableSorts,
|
||||
setAvailableSorts,
|
||||
currentViewSorts,
|
||||
setCurrentViewSorts,
|
||||
savedViewSorts,
|
||||
savedViewSortsByKey,
|
||||
setSavedViewSorts,
|
||||
canPersistSorts,
|
||||
currentViewSortsOrderBy,
|
||||
|
||||
availableFilters,
|
||||
setAvailableFilters,
|
||||
currentViewFilters,
|
||||
setCurrentViewFilters,
|
||||
savedViewFilters,
|
||||
savedViewFiltersByKey,
|
||||
setSavedViewFilters,
|
||||
canPersistFilters,
|
||||
|
||||
availableFields,
|
||||
setAvailableFields,
|
||||
currentViewFields,
|
||||
savedViewFieldsByKey,
|
||||
setCurrentViewFields,
|
||||
savedViewFields,
|
||||
setSavedViewFields,
|
||||
|
||||
onViewSortsChange,
|
||||
setOnViewSortsChange,
|
||||
onViewFiltersChange,
|
||||
setOnViewFiltersChange,
|
||||
onViewFieldsChange,
|
||||
setOnViewFieldsChange,
|
||||
};
|
||||
};
|
||||
@ -1,172 +0,0 @@
|
||||
import { useCallback } from 'react';
|
||||
import { useRecoilState, useRecoilValue } from 'recoil';
|
||||
|
||||
import { RecoilScopeContext } from '@/types/RecoilScopeContext';
|
||||
import { availableSortsScopedState } from '@/ui/data/view-bar/states/availableSortsScopedState';
|
||||
import { currentViewIdScopedState } from '@/ui/data/view-bar/states/currentViewIdScopedState';
|
||||
import { savedSortsFamilyState } from '@/ui/data/view-bar/states/savedSortsFamilyState';
|
||||
import { savedSortsByKeyFamilySelector } from '@/ui/data/view-bar/states/selectors/savedSortsByKeyFamilySelector';
|
||||
import { sortsScopedState } from '@/ui/data/view-bar/states/sortsScopedState';
|
||||
import { Sort } from '@/ui/data/view-bar/types/Sort';
|
||||
import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
|
||||
import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
|
||||
import {
|
||||
useCreateViewSortsMutation,
|
||||
useDeleteViewSortsMutation,
|
||||
useGetViewSortsQuery,
|
||||
useUpdateViewSortMutation,
|
||||
ViewSortDirection,
|
||||
} from '~/generated/graphql';
|
||||
import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
|
||||
|
||||
export const useViewSorts = ({
|
||||
RecoilScopeContext,
|
||||
skipFetch,
|
||||
}: {
|
||||
RecoilScopeContext: RecoilScopeContext;
|
||||
skipFetch?: boolean;
|
||||
}) => {
|
||||
const currentViewId = useRecoilScopedValue(
|
||||
currentViewIdScopedState,
|
||||
RecoilScopeContext,
|
||||
);
|
||||
const [sorts, setSorts] = useRecoilScopedState(
|
||||
sortsScopedState,
|
||||
RecoilScopeContext,
|
||||
);
|
||||
const [availableSorts] = useRecoilScopedState(
|
||||
availableSortsScopedState,
|
||||
RecoilScopeContext,
|
||||
);
|
||||
const [, setSavedSorts] = useRecoilState(
|
||||
savedSortsFamilyState(currentViewId),
|
||||
);
|
||||
const savedSortsByKey = useRecoilValue(
|
||||
savedSortsByKeyFamilySelector(currentViewId),
|
||||
);
|
||||
|
||||
const { refetch } = useGetViewSortsQuery({
|
||||
skip: !currentViewId || skipFetch,
|
||||
variables: {
|
||||
where: {
|
||||
viewId: { equals: currentViewId },
|
||||
},
|
||||
},
|
||||
onCompleted: (data) => {
|
||||
const nextSorts = data.viewSorts
|
||||
.map((viewSort) => {
|
||||
const foundCorrespondingSortDefinition = availableSorts.find(
|
||||
(sort) => sort.key === viewSort.key,
|
||||
);
|
||||
|
||||
if (foundCorrespondingSortDefinition) {
|
||||
return {
|
||||
key: viewSort.key,
|
||||
definition: foundCorrespondingSortDefinition,
|
||||
direction: viewSort.direction.toLowerCase(),
|
||||
} as Sort;
|
||||
} else {
|
||||
return undefined;
|
||||
}
|
||||
})
|
||||
.filter((sort): sort is Sort => !!sort);
|
||||
|
||||
if (!isDeeplyEqual(sorts, nextSorts)) {
|
||||
setSavedSorts(nextSorts);
|
||||
setSorts(nextSorts);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const [createViewSortsMutation] = useCreateViewSortsMutation();
|
||||
const [updateViewSortMutation] = useUpdateViewSortMutation();
|
||||
const [deleteViewSortsMutation] = useDeleteViewSortsMutation();
|
||||
|
||||
const createViewSorts = useCallback(
|
||||
(sorts: Sort[], viewId = currentViewId) => {
|
||||
if (!viewId || !sorts.length) return;
|
||||
|
||||
return createViewSortsMutation({
|
||||
variables: {
|
||||
data: sorts.map((sort) => ({
|
||||
key: sort.key,
|
||||
direction: sort.direction as ViewSortDirection,
|
||||
name: sort.definition.label,
|
||||
viewId,
|
||||
})),
|
||||
},
|
||||
});
|
||||
},
|
||||
[createViewSortsMutation, currentViewId],
|
||||
);
|
||||
|
||||
const updateViewSorts = useCallback(
|
||||
(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: currentViewId },
|
||||
},
|
||||
},
|
||||
}),
|
||||
),
|
||||
);
|
||||
},
|
||||
[currentViewId, updateViewSortMutation],
|
||||
);
|
||||
|
||||
const deleteViewSorts = useCallback(
|
||||
(sortKeys: string[]) => {
|
||||
if (!currentViewId || !sortKeys.length) return;
|
||||
|
||||
return deleteViewSortsMutation({
|
||||
variables: {
|
||||
where: {
|
||||
key: { in: sortKeys },
|
||||
viewId: { equals: currentViewId },
|
||||
},
|
||||
},
|
||||
});
|
||||
},
|
||||
[currentViewId, deleteViewSortsMutation],
|
||||
);
|
||||
|
||||
const persistSorts = useCallback(async () => {
|
||||
if (!currentViewId) return;
|
||||
|
||||
const sortsToCreate = sorts.filter((sort) => !savedSortsByKey[sort.key]);
|
||||
await createViewSorts(sortsToCreate);
|
||||
|
||||
const sortsToUpdate = sorts.filter(
|
||||
(sort) =>
|
||||
savedSortsByKey[sort.key] &&
|
||||
savedSortsByKey[sort.key].direction !== sort.direction,
|
||||
);
|
||||
await updateViewSorts(sortsToUpdate);
|
||||
|
||||
const sortKeys = sorts.map((sort) => sort.key);
|
||||
const sortKeysToDelete = Object.keys(savedSortsByKey).filter(
|
||||
(previousSortKey) => !sortKeys.includes(previousSortKey),
|
||||
);
|
||||
await deleteViewSorts(sortKeysToDelete);
|
||||
|
||||
return refetch();
|
||||
}, [
|
||||
currentViewId,
|
||||
sorts,
|
||||
createViewSorts,
|
||||
updateViewSorts,
|
||||
savedSortsByKey,
|
||||
deleteViewSorts,
|
||||
refetch,
|
||||
]);
|
||||
|
||||
return { createViewSorts, persistSorts };
|
||||
};
|
||||
138
front/src/modules/views/hooks/useViewStates.ts
Normal file
138
front/src/modules/views/hooks/useViewStates.ts
Normal file
@ -0,0 +1,138 @@
|
||||
import { useRecoilScopedStateV2 } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedStateV2';
|
||||
import { useSetRecoilScopedFamilyState } from '@/ui/utilities/recoil-scope/hooks/useSetRecoilScopedFamilyState';
|
||||
import { useSetRecoilScopedStateV2 } from '@/ui/utilities/recoil-scope/hooks/useSetRecoilScopedStateV2';
|
||||
import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
|
||||
|
||||
import { ViewScopeInternalContext } from '../scopes/scope-internal-context/ViewScopeInternalContext';
|
||||
import { availableFieldsScopedState } from '../states/availableFieldsScopedState';
|
||||
import { availableFiltersScopedState } from '../states/availableFiltersScopedState';
|
||||
import { availableSortsScopedState } from '../states/availableSortsScopedState';
|
||||
import { currentViewFieldsScopedFamilyState } from '../states/currentViewFieldsScopedFamilyState';
|
||||
import { currentViewFiltersScopedFamilyState } from '../states/currentViewFiltersScopedFamilyState';
|
||||
import { currentViewIdScopedState } from '../states/currentViewIdScopedState';
|
||||
import { currentViewSortsScopedFamilyState } from '../states/currentViewSortsScopedFamilyState';
|
||||
import { entityCountInCurrentViewScopedState } from '../states/entityCountInCurrentViewScopedState';
|
||||
import { isViewBarExpandedScopedState } from '../states/isViewBarExpandedScopedState';
|
||||
import { savedViewFieldsScopedFamilyState } from '../states/savedViewFieldsScopedFamilyState';
|
||||
import { savedViewFiltersScopedFamilyState } from '../states/savedViewFiltersScopedFamilyState';
|
||||
import { savedViewSortsScopedFamilyState } from '../states/savedViewSortsScopedFamilyState';
|
||||
import { viewEditModeScopedState } from '../states/viewEditModeScopedState';
|
||||
import { viewObjectIdScopeState } from '../states/viewObjectIdScopeState';
|
||||
import { viewsScopedState } from '../states/viewsScopedState';
|
||||
import { viewTypeScopedState } from '../states/viewTypeScopedState';
|
||||
|
||||
export const useViewStates = (viewScopeId?: string, viewId?: string) => {
|
||||
const scopeId = useAvailableScopeIdOrThrow(
|
||||
ViewScopeInternalContext,
|
||||
viewScopeId,
|
||||
);
|
||||
// View
|
||||
const [currentViewId, setCurrentViewId] = useRecoilScopedStateV2(
|
||||
currentViewIdScopedState,
|
||||
scopeId,
|
||||
);
|
||||
|
||||
const familyItemId = viewId ? viewId : currentViewId;
|
||||
|
||||
const setViewEditMode = useSetRecoilScopedStateV2(
|
||||
viewEditModeScopedState,
|
||||
scopeId,
|
||||
);
|
||||
|
||||
const setViews = useSetRecoilScopedStateV2(viewsScopedState, scopeId);
|
||||
|
||||
const setViewObjectId = useSetRecoilScopedStateV2(
|
||||
viewObjectIdScopeState,
|
||||
scopeId,
|
||||
);
|
||||
|
||||
const setViewType = useSetRecoilScopedStateV2(viewTypeScopedState, scopeId);
|
||||
|
||||
const setEntityCountInCurrentView = useSetRecoilScopedStateV2(
|
||||
entityCountInCurrentViewScopedState,
|
||||
scopeId,
|
||||
);
|
||||
|
||||
const setIsViewBarExpanded = useSetRecoilScopedStateV2(
|
||||
isViewBarExpandedScopedState,
|
||||
scopeId,
|
||||
);
|
||||
|
||||
// ViewSorts
|
||||
const setCurrentViewSorts = useSetRecoilScopedFamilyState(
|
||||
currentViewSortsScopedFamilyState,
|
||||
scopeId,
|
||||
familyItemId,
|
||||
);
|
||||
|
||||
const setSavedViewSorts = useSetRecoilScopedFamilyState(
|
||||
savedViewSortsScopedFamilyState,
|
||||
scopeId,
|
||||
familyItemId,
|
||||
);
|
||||
|
||||
const setAvailableSorts = useSetRecoilScopedStateV2(
|
||||
availableSortsScopedState,
|
||||
scopeId,
|
||||
);
|
||||
|
||||
// ViewFilters
|
||||
const setCurrentViewFilters = useSetRecoilScopedFamilyState(
|
||||
currentViewFiltersScopedFamilyState,
|
||||
scopeId,
|
||||
familyItemId,
|
||||
);
|
||||
|
||||
const setSavedViewFilters = useSetRecoilScopedFamilyState(
|
||||
savedViewFiltersScopedFamilyState,
|
||||
scopeId,
|
||||
familyItemId,
|
||||
);
|
||||
|
||||
const setAvailableFilters = useSetRecoilScopedStateV2(
|
||||
availableFiltersScopedState,
|
||||
scopeId,
|
||||
);
|
||||
|
||||
// ViewFields
|
||||
const setAvailableFields = useSetRecoilScopedStateV2(
|
||||
availableFieldsScopedState,
|
||||
scopeId,
|
||||
);
|
||||
|
||||
const setCurrentViewFields = useSetRecoilScopedFamilyState(
|
||||
currentViewFieldsScopedFamilyState,
|
||||
scopeId,
|
||||
familyItemId,
|
||||
);
|
||||
|
||||
const setSavedViewFields = useSetRecoilScopedFamilyState(
|
||||
savedViewFieldsScopedFamilyState,
|
||||
scopeId,
|
||||
familyItemId,
|
||||
);
|
||||
|
||||
return {
|
||||
currentViewId,
|
||||
setCurrentViewId,
|
||||
setIsViewBarExpanded,
|
||||
|
||||
setViews,
|
||||
setViewEditMode,
|
||||
setViewObjectId,
|
||||
setViewType,
|
||||
setEntityCountInCurrentView,
|
||||
|
||||
setAvailableSorts,
|
||||
setCurrentViewSorts,
|
||||
setSavedViewSorts,
|
||||
|
||||
setAvailableFilters,
|
||||
setCurrentViewFilters,
|
||||
setSavedViewFilters,
|
||||
|
||||
setAvailableFields,
|
||||
setCurrentViewFields,
|
||||
setSavedViewFields,
|
||||
};
|
||||
};
|
||||
@ -1,102 +0,0 @@
|
||||
import { getOperationName } from '@apollo/client/utilities';
|
||||
|
||||
import { RecoilScopeContext } from '@/types/RecoilScopeContext';
|
||||
import { currentViewIdScopedState } from '@/ui/data/view-bar/states/currentViewIdScopedState';
|
||||
import { viewsScopedState } from '@/ui/data/view-bar/states/viewsScopedState';
|
||||
import { View } from '@/ui/data/view-bar/types/View';
|
||||
import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
|
||||
import {
|
||||
useCreateViewMutation,
|
||||
useDeleteViewMutation,
|
||||
useGetViewsQuery,
|
||||
useUpdateViewMutation,
|
||||
ViewType,
|
||||
} from '~/generated/graphql';
|
||||
import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
|
||||
|
||||
import { GET_VIEWS } from '../graphql/queries/getViews';
|
||||
|
||||
export const useViews = ({
|
||||
objectId,
|
||||
onViewCreate,
|
||||
RecoilScopeContext,
|
||||
type,
|
||||
}: {
|
||||
objectId: string;
|
||||
onViewCreate?: (viewId: string) => Promise<void>;
|
||||
RecoilScopeContext: RecoilScopeContext;
|
||||
type: ViewType;
|
||||
}) => {
|
||||
const [currentViewId, setCurrentViewId] = useRecoilScopedState(
|
||||
currentViewIdScopedState,
|
||||
RecoilScopeContext,
|
||||
);
|
||||
const [views, setViews] = useRecoilScopedState(
|
||||
viewsScopedState,
|
||||
RecoilScopeContext,
|
||||
);
|
||||
|
||||
const [createViewMutation] = useCreateViewMutation();
|
||||
const [updateViewMutation] = useUpdateViewMutation();
|
||||
const [deleteViewMutation] = useDeleteViewMutation();
|
||||
|
||||
const createView = async (view: View) => {
|
||||
const { data } = await createViewMutation({
|
||||
variables: {
|
||||
data: {
|
||||
...view,
|
||||
objectId,
|
||||
type,
|
||||
},
|
||||
},
|
||||
refetchQueries: [getOperationName(GET_VIEWS) ?? ''],
|
||||
});
|
||||
|
||||
if (data?.view) await onViewCreate?.(data.view.id);
|
||||
};
|
||||
|
||||
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 { loading } = useGetViewsQuery({
|
||||
variables: {
|
||||
where: {
|
||||
objectId: { equals: objectId },
|
||||
type: { equals: type },
|
||||
},
|
||||
},
|
||||
onCompleted: (data) => {
|
||||
const nextViews = data.views.map((view) => ({
|
||||
id: view.id,
|
||||
name: view.name,
|
||||
}));
|
||||
|
||||
if (!isDeeplyEqual(views, nextViews)) setViews(nextViews);
|
||||
|
||||
if (!nextViews.length) return;
|
||||
|
||||
if (!currentViewId) return setCurrentViewId(nextViews[0].id);
|
||||
},
|
||||
});
|
||||
|
||||
return {
|
||||
createView,
|
||||
deleteView,
|
||||
isFetchingViews: loading,
|
||||
updateView,
|
||||
};
|
||||
};
|
||||
Reference in New Issue
Block a user