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
2023-10-27 10:52:26 +02:00
committed by GitHub
parent 6a72c14af3
commit 5ba68e997d
205 changed files with 3092 additions and 3249 deletions

View File

@ -0,0 +1,10 @@
import { ColumnDefinition } from '@/ui/data/data-table/types/ColumnDefinition';
import { FieldMetadata } from '@/ui/data/field/types/FieldMetadata';
import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
export const availableFieldsScopedState = createScopedState<
ColumnDefinition<FieldMetadata>[]
>({
key: 'availableFieldsScopedState',
defaultValue: [],
});

View File

@ -0,0 +1,9 @@
import { FilterDefinition } from '@/ui/data/filter/types/FilterDefinition';
import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
export const availableFiltersScopedState = createScopedState<
FilterDefinition[]
>({
key: 'availableFiltersScopedState',
defaultValue: [],
});

View File

@ -0,0 +1,7 @@
import { SortDefinition } from '@/ui/data/sort/types/SortDefinition';
import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
export const availableSortsScopedState = createScopedState<SortDefinition[]>({
key: 'availableSortsScopedState',
defaultValue: [],
});

View File

@ -0,0 +1,11 @@
import { ColumnDefinition } from '@/ui/data/data-table/types/ColumnDefinition';
import { FieldMetadata } from '@/ui/data/field/types/FieldMetadata';
import { createScopedFamilyState } from '@/ui/utilities/recoil-scope/utils/createScopedFamilyState';
export const currentViewFieldsScopedFamilyState = createScopedFamilyState<
ColumnDefinition<FieldMetadata>[],
string
>({
key: 'currentViewFieldsScopedFamilyState',
defaultValue: [],
});

View File

@ -0,0 +1,10 @@
import { Filter } from '@/ui/data/filter/types/Filter';
import { createScopedFamilyState } from '@/ui/utilities/recoil-scope/utils/createScopedFamilyState';
export const currentViewFiltersScopedFamilyState = createScopedFamilyState<
Filter[],
string
>({
key: 'currentViewFiltersScopedFamilyState',
defaultValue: [],
});

View File

@ -0,0 +1,6 @@
import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
export const currentViewIdScopedState = createScopedState<string | undefined>({
key: 'currentViewIdScopedState',
defaultValue: undefined,
});

View File

@ -0,0 +1,10 @@
import { Sort } from '@/ui/data/sort/types/Sort';
import { createScopedFamilyState } from '@/ui/utilities/recoil-scope/utils/createScopedFamilyState';
export const currentViewSortsScopedFamilyState = createScopedFamilyState<
Sort[],
string
>({
key: 'currentViewSortsScopedFamilyState',
defaultValue: [],
});

View File

@ -0,0 +1,6 @@
import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
export const entityCountInCurrentViewScopedState = createScopedState<number>({
key: 'entityCountInCurrentViewScopedState',
defaultValue: 0,
});

View File

@ -0,0 +1,6 @@
import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
export const isViewBarExpandedScopedState = createScopedState<boolean>({
key: 'isViewBarExpandedScopedState',
defaultValue: true,
});

View File

@ -0,0 +1,6 @@
import { createScopedFamilyState } from '@/ui/utilities/recoil-scope/utils/createScopedFamilyState';
export const noneScopedFamilyState = createScopedFamilyState<any, string>({
key: 'noneScopedFamilyState',
defaultValue: null,
});

View File

@ -0,0 +1,11 @@
import { ColumnDefinition } from '@/ui/data/data-table/types/ColumnDefinition';
import { FieldMetadata } from '@/ui/data/field/types/FieldMetadata';
import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
export const onViewFieldsChangeScopedState = createScopedState<
| ((fields: ColumnDefinition<FieldMetadata>[]) => void | Promise<void>)
| undefined
>({
key: 'onViewFieldsChangeScopedState',
defaultValue: undefined,
});

View File

@ -0,0 +1,9 @@
import { Filter } from '@/ui/data/filter/types/Filter';
import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
export const onViewFiltersChangeScopedState = createScopedState<
((filters: Filter[]) => void | Promise<void>) | undefined
>({
key: 'onViewFiltersChangeScopedState',
defaultValue: undefined,
});

View File

@ -0,0 +1,9 @@
import { Sort } from '@/ui/data/sort/types/Sort';
import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
export const onViewSortsChangeScopedState = createScopedState<
((sorts: Sort[]) => void | Promise<void>) | undefined
>({
key: 'onViewSortsChangeScopedState',
defaultValue: undefined,
});

View File

@ -0,0 +1,11 @@
import { ColumnDefinition } from '@/ui/data/data-table/types/ColumnDefinition';
import { FieldMetadata } from '@/ui/data/field/types/FieldMetadata';
import { createScopedFamilyState } from '@/ui/utilities/recoil-scope/utils/createScopedFamilyState';
export const savedViewFieldsScopedFamilyState = createScopedFamilyState<
ColumnDefinition<FieldMetadata>[],
string
>({
key: 'savedViewFieldsScopedFamilyState',
defaultValue: [],
});

View File

@ -0,0 +1,10 @@
import { Filter } from '@/ui/data/filter/types/Filter';
import { createScopedFamilyState } from '@/ui/utilities/recoil-scope/utils/createScopedFamilyState';
export const savedViewFiltersScopedFamilyState = createScopedFamilyState<
Filter[],
string
>({
key: 'savedViewFiltersScopedFamilyState',
defaultValue: [],
});

View File

@ -0,0 +1,10 @@
import { Sort } from '@/ui/data/sort/types/Sort';
import { createScopedFamilyState } from '@/ui/utilities/recoil-scope/utils/createScopedFamilyState';
export const savedViewSortsScopedFamilyState = createScopedFamilyState<
Sort[],
string
>({
key: 'savedViewSortsScopedFamilyState',
defaultValue: [],
});

View File

@ -0,0 +1,31 @@
import { selectorFamily } from 'recoil';
import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
import { currentViewFiltersScopedFamilyState } from '../currentViewFiltersScopedFamilyState';
import { savedViewFiltersScopedFamilyState } from '../savedViewFiltersScopedFamilyState';
export const canPersistViewFiltersScopedFamilySelector = selectorFamily({
key: 'canPersistFiltersScopedFamilySelector',
get:
({ viewScopeId, viewId }: { viewScopeId: string; viewId?: string }) =>
({ get }) => {
if (!viewId) {
return;
}
return !isDeeplyEqual(
get(
savedViewFiltersScopedFamilyState({
scopeId: viewScopeId,
familyKey: viewId,
}),
),
get(
currentViewFiltersScopedFamilyState({
scopeId: viewScopeId,
familyKey: viewId,
}),
),
);
},
});

View File

@ -0,0 +1,31 @@
import { selectorFamily } from 'recoil';
import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
import { currentViewSortsScopedFamilyState } from '../currentViewSortsScopedFamilyState';
import { savedViewSortsScopedFamilyState } from '../savedViewSortsScopedFamilyState';
export const canPersistViewSortsScopedFamilySelector = selectorFamily({
key: 'canPersistSortsScopedFamilySelector',
get:
({ viewScopeId, viewId }: { viewScopeId: string; viewId?: string }) =>
({ get }) => {
if (!viewId) {
return;
}
return !isDeeplyEqual(
get(
savedViewSortsScopedFamilyState({
scopeId: viewScopeId,
familyKey: viewId,
}),
),
get(
currentViewSortsScopedFamilyState({
scopeId: viewScopeId,
familyKey: viewId,
}),
),
);
},
});

View File

@ -0,0 +1,22 @@
import { selectorFamily } from 'recoil';
import { View } from '@/views/types/View';
import { currentViewIdScopedState } from '../currentViewIdScopedState';
import { viewsByIdScopedSelector } from './viewsByIdScopedSelector';
export const currentViewScopedSelector = selectorFamily<
View | undefined,
string
>({
key: 'currentViewScopedSelector',
get:
(scopeId) =>
({ get }) => {
const currentViewId = get(currentViewIdScopedState({ scopeId: scopeId }));
return currentViewId
? get(viewsByIdScopedSelector(scopeId))[currentViewId]
: undefined;
},
});

View File

@ -0,0 +1,26 @@
import { selectorFamily } from 'recoil';
import { reduceSortsToOrderBy } from '@/ui/data/sort/utils/helpers';
import { SortOrder } from '~/generated/graphql';
import { currentViewSortsScopedFamilyState } from '../currentViewSortsScopedFamilyState';
export const currentViewSortsOrderByScopedFamilySelector = selectorFamily({
key: 'currentViewSortsOrderByScopedFamilySelector',
get:
({ viewScopeId, viewId }: { viewScopeId: string; viewId?: string }) =>
({ get }) => {
if (!viewId) {
return;
}
const orderBy = reduceSortsToOrderBy(
get(
currentViewSortsScopedFamilyState({
scopeId: viewScopeId,
familyKey: viewId,
}),
),
);
return orderBy.length ? orderBy : [{ createdAt: SortOrder.Desc }];
},
});

View File

@ -0,0 +1,32 @@
import { selectorFamily } from 'recoil';
import { ColumnDefinition } from '@/ui/data/data-table/types/ColumnDefinition';
import { FieldMetadata } from '@/ui/data/field/types/FieldMetadata';
import { savedViewFieldsScopedFamilyState } from '../savedViewFieldsScopedFamilyState';
export const savedViewFieldByKeyScopedFamilySelector = selectorFamily({
key: 'savedViewFieldByKeyScopedFamilySelector',
get:
({
viewScopeId,
viewId,
}: {
viewScopeId: string;
viewId: string | undefined;
}) =>
({ get }) => {
if (viewId === undefined) {
return undefined;
}
return get(
savedViewFieldsScopedFamilyState({
scopeId: viewScopeId,
familyKey: viewId,
}),
).reduce<Record<string, ColumnDefinition<FieldMetadata>>>(
(result, column) => ({ ...result, [column.key]: column }),
{},
);
},
});

View File

@ -0,0 +1,25 @@
import { selectorFamily } from 'recoil';
import { Filter } from '@/ui/data/filter/types/Filter';
import { savedViewFiltersScopedFamilyState } from '../savedViewFiltersScopedFamilyState';
export const savedViewFiltersByKeyScopedFamilySelector = selectorFamily({
key: 'savedViewFiltersByKeyScopedFamilySelector',
get:
({ scopeId, viewId }: { scopeId: string; viewId: string | undefined }) =>
({ get }) => {
if (viewId === undefined) {
return undefined;
}
return get(
savedViewFiltersScopedFamilyState({
scopeId: scopeId,
familyKey: viewId,
}),
).reduce<Record<string, Filter>>(
(result, filter) => ({ ...result, [filter.key]: filter }),
{},
);
},
});

View File

@ -0,0 +1,25 @@
import { selectorFamily } from 'recoil';
import { Sort } from '@/ui/data/sort/types/Sort';
import { savedViewSortsScopedFamilyState } from '../savedViewSortsScopedFamilyState';
export const savedViewSortsByKeyScopedFamilySelector = selectorFamily({
key: 'savedViewSortsByKeyScopedFamilySelector',
get:
({ scopeId, viewId }: { scopeId: string; viewId: string | undefined }) =>
({ get }) => {
if (viewId === undefined) {
return undefined;
}
return get(
savedViewSortsScopedFamilyState({
scopeId: scopeId,
familyKey: viewId,
}),
).reduce<Record<string, Sort>>(
(result, sort) => ({ ...result, [sort.key]: sort }),
{},
);
},
});

View File

@ -0,0 +1,16 @@
import { selectorFamily } from 'recoil';
import { savedViewSortsScopedFamilyState } from '../savedViewSortsScopedFamilyState';
export const savedViewSortsFamilySelector = selectorFamily({
key: 'savedViewSortsFamilySelector',
get:
({ scopeId, viewId }: { scopeId: string; viewId: string }) =>
({ get }) =>
get(
savedViewSortsScopedFamilyState({
scopeId: scopeId,
familyKey: viewId,
}),
),
});

View File

@ -0,0 +1,19 @@
import { selectorFamily } from 'recoil';
import { View } from '@/views/types/View';
import { viewsScopedState } from '../viewsScopedState';
export const viewsByIdScopedSelector = selectorFamily<
Record<string, View>,
string
>({
key: 'viewsByIdScopedSelector',
get:
(scopeId) =>
({ get }) =>
get(viewsScopedState({ scopeId: scopeId })).reduce<Record<string, View>>(
(result, view) => ({ ...result, [view.id]: view }),
{},
),
});

View File

@ -0,0 +1,8 @@
import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
export const viewEditModeScopedState = createScopedState<
'none' | 'edit' | 'create'
>({
key: 'viewEditModeScopedState',
defaultValue: 'none',
});

View File

@ -0,0 +1,6 @@
import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
export const viewObjectIdScopeState = createScopedState<string | undefined>({
key: 'viewObjectIdScopeState',
defaultValue: undefined,
});

View File

@ -0,0 +1,7 @@
import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
import { ViewType } from '~/generated/graphql';
export const viewTypeScopedState = createScopedState<ViewType>({
key: 'viewTypeScopedState',
defaultValue: ViewType.Table,
});

View File

@ -0,0 +1,8 @@
import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
import { View } from '../types/View';
export const viewsScopedState = createScopedState<View[]>({
key: 'viewsScopedState',
defaultValue: [],
});