admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Refactor ObjectDataTable to work with new views system (#2274)

Browse Source 
Complete work
This commit is contained in:
Charles Bochet
2023-10-29 23:50:59 +01:00
committed by GitHub
parent 9bab28912d
commit d38497c46a
39 changed files with 578 additions and 373 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
front/src/modules/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds.ts
View File

@ -1,4 +1,4 @@
import { useRecoilValue } from 'recoil';
import { useRecoilCallback } from 'recoil';
import { selectedRowIdsSelector } from '@/ui/data/data-table/states/selectors/selectedRowIdsSelector';
import { ActivityType } from '~/generated/graphql';
@ -11,27 +11,31 @@ import {
import { useOpenCreateActivityDrawer } from './useOpenCreateActivityDrawer';
export const useOpenCreateActivityDrawerForSelectedRowIds = () => {
const selectedRowIds = useRecoilValue(selectedRowIdsSelector);
const openCreateActivityDrawer = useOpenCreateActivityDrawer();
return (
type: ActivityType,
entityType: ActivityTargetableEntityType,
relatedEntities?: ActivityTargetableEntity[],
) => {
let activityTargetableEntityArray: ActivityTargetableEntity[] =
selectedRowIds.map((id) => ({
type: entityType,
id,
}));
if (relatedEntities) {
activityTargetableEntityArray =
activityTargetableEntityArray.concat(relatedEntities);
}
openCreateActivityDrawer({
type,
targetableEntities: activityTargetableEntityArray,
});
};
return useRecoilCallback(
({ snapshot }) =>
(
type: ActivityType,
entityType: ActivityTargetableEntityType,
relatedEntities?: ActivityTargetableEntity[],
) => {
const selectedRowIds = Object.keys(
snapshot.getLoadable(selectedRowIdsSelector).getValue(),
);
let activityTargetableEntityArray: ActivityTargetableEntity[] =
selectedRowIds.map((id) => ({
type: entityType,
id,
}));
if (relatedEntities) {
activityTargetableEntityArray =
activityTargetableEntityArray.concat(relatedEntities);
}
openCreateActivityDrawer({
type,
targetableEntities: activityTargetableEntityArray,
});
},
);
};

43
front/src/modules/companies/hooks/useCompanyTableActionBarEntries.tsx
View File

@ -1,43 +0,0 @@
import { useSetRecoilState } from 'recoil';
import { useOpenCreateActivityDrawerForSelectedRowIds } from '@/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds';
import { ActivityTargetableEntityType } from '@/activities/types/ActivityTargetableEntity';
import { IconCheckbox, IconNotes, IconTrash } from '@/ui/display/icon';
import { actionBarEntriesState } from '@/ui/navigation/action-bar/states/actionBarEntriesState';
import { ActivityType } from '~/generated/graphql';
import { useDeleteSelectedComapnies } from './useDeleteCompanies';
export const useCompanyTableActionBarEntries = () => {
const setActionBarEntries = useSetRecoilState(actionBarEntriesState);
const openCreateActivityRightDrawer =
useOpenCreateActivityDrawerForSelectedRowIds();
const handleActivityClick = async (type: ActivityType) => {
openCreateActivityRightDrawer(type, ActivityTargetableEntityType.Company);
};
const deleteSelectedCompanies = useDeleteSelectedComapnies();
return {
setActionBarEntries: () =>
setActionBarEntries([
{
label: 'Note',
Icon: IconNotes,
onClick: () => handleActivityClick(ActivityType.Note),
},
{
label: 'Task',
Icon: IconCheckbox,
onClick: () => handleActivityClick(ActivityType.Task),
},
{
label: 'Delete',
Icon: IconTrash,
accent: 'danger',
onClick: () => deleteSelectedCompanies(),
},
]),
};
};

128
front/src/modules/companies/hooks/useCompanyTableContextMenuEntries.tsx
View File

@ -1,10 +1,10 @@
import { useRecoilValue, useSetRecoilState } from 'recoil';
import { getOperationName } from '@apollo/client/utilities';
import { useRecoilCallback, useSetRecoilState } from 'recoil';
import { useOpenCreateActivityDrawerForSelectedRowIds } from '@/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds';
import { ActivityTargetableEntityType } from '@/activities/types/ActivityTargetableEntity';
import { useFavorites } from '@/favorites/hooks/useFavorites';
import { useResetTableRowSelection } from '@/ui/data/data-table/hooks/useResetTableRowSelection';
import { selectedRowIdsSelector } from '@/ui/data/data-table/states/selectors/selectedRowIdsSelector';
import { tableRowIdsState } from '@/ui/data/data-table/states/tableRowIdsState';
import {
IconCheckbox,
IconHeart,
@ -12,58 +12,103 @@ import {
IconNotes,
IconTrash,
} from '@/ui/display/icon';
import { actionBarEntriesState } from '@/ui/navigation/action-bar/states/actionBarEntriesState';
import { contextMenuEntriesState } from '@/ui/navigation/context-menu/states/contextMenuEntriesState';
import { ActivityType, useGetFavoritesQuery } from '~/generated/graphql';
import {
ActivityType,
useDeleteManyCompaniesMutation,
useGetFavoritesQuery,
} from '~/generated/graphql';
import { useDeleteSelectedComapnies } from './useDeleteCompanies';
import { GET_COMPANY } from '../graphql/queries/getCompany';
import { useCreateActivityForCompany } from './useCreateActivityForCompany';
export const useCompanyTableContextMenuEntries = () => {
const setContextMenuEntries = useSetRecoilState(contextMenuEntriesState);
const setActionBarEntriesState = useSetRecoilState(actionBarEntriesState);
const createActivityForCompany = useCreateActivityForCompany();
const openCreateActivityRightDrawer =
useOpenCreateActivityDrawerForSelectedRowIds();
const handleButtonClick = async (type: ActivityType) => {
openCreateActivityRightDrawer(type, ActivityTargetableEntityType.Company);
};
const selectedRowIds = useRecoilValue(selectedRowIdsSelector);
const selectedCompanyId =
selectedRowIds.length === 1 ? selectedRowIds[0] : '';
const { insertCompanyFavorite, deleteCompanyFavorite } = useFavorites();
const setTableRowIds = useSetRecoilState(tableRowIdsState);
const resetRowSelection = useResetTableRowSelection();
const { data } = useGetFavoritesQuery();
const favorites = data?.findFavorites;
const { insertCompanyFavorite, deleteCompanyFavorite } = useFavorites();
const isFavorite =
!!selectedCompanyId &&
!!favorites?.find((favorite) => favorite.company?.id === selectedCompanyId);
const handleFavoriteButtonClick = useRecoilCallback(({ snapshot }) => () => {
const selectedRowIds = snapshot
.getLoadable(selectedRowIdsSelector)
.getValue();
const selectedCompanyId =
selectedRowIds.length === 1 ? selectedRowIds[0] : '';
const isFavorite =
!!selectedCompanyId &&
!!favorites?.find(
(favorite) => favorite.company?.id === selectedCompanyId,
);
const handleFavoriteButtonClick = () => {
resetRowSelection();
if (isFavorite) deleteCompanyFavorite(selectedCompanyId);
else insertCompanyFavorite(selectedCompanyId);
};
});
const deleteSelectedCompanies = useDeleteSelectedComapnies();
const [deleteManyCompany] = useDeleteManyCompaniesMutation({
refetchQueries: [getOperationName(GET_COMPANY) ?? ''],
});
const handleDeleteClick = useRecoilCallback(({ snapshot }) => async () => {
const rowIdsToDelete = snapshot
.getLoadable(selectedRowIdsSelector)
.getValue();
resetRowSelection();
await deleteManyCompany({
variables: {
ids: rowIdsToDelete,
},
optimisticResponse: {
__typename: 'Mutation',
deleteManyCompany: {
count: rowIdsToDelete.length,
},
},
update: () => {
setTableRowIds((tableRowIds) =>
tableRowIds.filter((id) => !rowIdsToDelete.includes(id)),
);
},
});
});
return {
setContextMenuEntries: () =>
setContextMenuEntries: useRecoilCallback(({ snapshot }) => () => {
const selectedRowIds = snapshot
.getLoadable(selectedRowIdsSelector)
.getValue();
const selectedCompanyId =
selectedRowIds.length === 1 ? selectedRowIds[0] : '';
const isFavorite =
!!selectedCompanyId &&
!!favorites?.find(
(favorite) => favorite.company?.id === selectedCompanyId,
);
setContextMenuEntries([
{
label: 'New task',
Icon: IconCheckbox,
onClick: () => handleButtonClick(ActivityType.Task),
onClick: () => createActivityForCompany(ActivityType.Task),
},
{
label: 'New note',
Icon: IconNotes,
onClick: () => handleButtonClick(ActivityType.Note),
onClick: () => createActivityForCompany(ActivityType.Note),
},
...(!!selectedCompanyId
? [
@ -80,8 +125,29 @@ export const useCompanyTableContextMenuEntries = () => {
label: 'Delete',
Icon: IconTrash,
accent: 'danger',
onClick: () => deleteSelectedCompanies(),
onClick: () => handleDeleteClick(),
},
]),
]);
}),
setActionBarEntries: useRecoilCallback(() => () => {
setActionBarEntriesState([
{
label: 'Task',
Icon: IconCheckbox,
onClick: () => createActivityForCompany(ActivityType.Task),
},
{
label: 'Note',
Icon: IconNotes,
onClick: () => createActivityForCompany(ActivityType.Note),
},
{
label: 'Delete',
Icon: IconTrash,
accent: 'danger',
onClick: () => handleDeleteClick(),
},
]);
}),
};
};

17
front/src/modules/companies/hooks/useCreateActivityForCompany.ts Normal file
View File

@ -0,0 +1,17 @@
import { useRecoilCallback } from 'recoil';
import { useOpenCreateActivityDrawerForSelectedRowIds } from '@/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds';
import { ActivityTargetableEntityType } from '@/activities/types/ActivityTargetableEntity';
import { ActivityType } from '~/generated/graphql';
export const useCreateActivityForCompany = () => {
const openCreateActivityRightDrawer =
useOpenCreateActivityDrawerForSelectedRowIds();
return useRecoilCallback(
() => (type: ActivityType) => {
openCreateActivityRightDrawer(type, ActivityTargetableEntityType.Company);
},
[openCreateActivityRightDrawer],
);
};

5
front/src/modules/companies/table/components/CompanyTable.tsx
View File

@ -3,7 +3,6 @@ import { useRecoilCallback, useSetRecoilState } from 'recoil';
import { companiesAvailableFieldDefinitions } from '@/companies/constants/companiesAvailableFieldDefinitions';
import { getCompaniesOptimisticEffectDefinition } from '@/companies/graphql/optimistic-effect-definitions/getCompaniesOptimisticEffectDefinition';
import { useCompanyTableActionBarEntries } from '@/companies/hooks/useCompanyTableActionBarEntries';
import { useCompanyTableContextMenuEntries } from '@/companies/hooks/useCompanyTableContextMenuEntries';
import { useSpreadsheetCompanyImport } from '@/companies/hooks/useSpreadsheetCompanyImport';
import { DataTable } from '@/ui/data/data-table/components/DataTable';
@ -63,8 +62,8 @@ export const CompanyTable = () => {
viewScopeId,
});
const { setContextMenuEntries } = useCompanyTableContextMenuEntries();
const { setActionBarEntries } = useCompanyTableActionBarEntries();
const { setContextMenuEntries, setActionBarEntries } =
useCompanyTableContextMenuEntries();
const updateCompany = async (
variables: UpdateOneCompanyMutationVariables,

18
front/src/modules/companies/table/components/CompanyTableEffect.tsx
View File

@ -40,24 +40,6 @@ const CompanyTableEffect = () => {
setViewType,
]);
// useEffect(() => {
// if (currentViewSorts) {
// setTableSorts(currentViewSorts);
// }
// }, [currentViewFields, currentViewSorts, setTableColumns, setTableSorts]);
// useEffect(() => {
// if (currentViewFilters) {
// setTableFilters(currentViewFilters);
// }
// }, [
// currentViewFields,
// currentViewFilters,
// setTableColumns,
// setTableFilters,
// setTableSorts,
// ]);
return <></>;
};

2
front/src/modules/companies/table/components/CompanyTableMockDataEffect.tsx
View File

@ -16,7 +16,7 @@ export const CompanyTableMockDataEffect = () => {
const setDataTableData = useSetDataTableData();
useEffect(() => {
setDataTableData(mockedCompaniesData, [], []);
setDataTableData(mockedCompaniesData);
setTableColumns(companiesAvailableFieldDefinitions);
}, [setDataTableData, setTableColumns]);

28
front/src/modules/companies/table/components/CompanyTableMockMode.tsx
View File

@ -1,15 +1,35 @@
import styled from '@emotion/styled';
import { DataTable } from '@/ui/data/data-table/components/DataTable';
import { TableOptionsDropdownId } from '@/ui/data/data-table/constants/TableOptionsDropdownId';
import { TableOptionsDropdown } from '@/ui/data/data-table/options/components/TableOptionsDropdown';
import { ViewBar } from '@/views/components/ViewBar';
import { ViewScope } from '@/views/scopes/ViewScope';
import { useUpdateOneCompanyMutation } from '~/generated/graphql';
import CompanyTableEffect from './CompanyTableEffect';
import { CompanyTableMockDataEffect } from './CompanyTableMockDataEffect';
const StyledContainer = styled.div`
display: flex;
flex-direction: column;
height: 100%;
overflow: auto;
`;
export const CompanyTableMockMode = () => {
return (
<ViewScope viewScopeId="company-table-mock-mode">
<CompanyTableMockDataEffect />
<StyledContainer>
<ViewScope viewScopeId="company-table-mock-mode">
<CompanyTableEffect />
<CompanyTableMockDataEffect />
<ViewBar
optionsDropdownButton={<TableOptionsDropdown />}
optionsDropdownScopeId={TableOptionsDropdownId}
/>
<DataTable updateEntityMutation={useUpdateOneCompanyMutation} />
</ViewScope>
<DataTable updateEntityMutation={useUpdateOneCompanyMutation} />
</ViewScope>
</StyledContainer>
);
};

31
front/src/modules/metadata/components/ObjectDataTableEffect.tsx
View File

@ -1,6 +1,14 @@
import { useEffect } from 'react';
import { TableRecoilScopeContext } from '@/ui/data/data-table/states/recoil-scope-contexts/TableRecoilScopeContext';
import { tableFiltersScopedState } from '@/ui/data/data-table/states/tableFiltersScopedState';
import { tableSortsScopedState } from '@/ui/data/data-table/states/tableSortsScopedState';
import { turnFiltersIntoWhereClauseV2 } from '@/ui/data/filter/utils/turnFiltersIntoWhereClauseV2';
import { turnSortsIntoOrderByV2 } from '@/ui/data/sort/utils/turnSortsIntoOrderByV2';
import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
import { useFindManyObjects } from '../hooks/useFindManyObjects';
import { useMetadataObjectInContext } from '../hooks/useMetadataObjectInContext';
import { useSetObjectDataTableData } from '../hooks/useSetDataTableData';
import { MetadataObjectIdentifier } from '../types/MetadataObjectIdentifier';
@ -9,14 +17,33 @@ export type ObjectDataTableEffectProps = Pick<
'objectNamePlural'
>;
// TODO: merge in a single effect component
// This should be migrated to DataTable at some point
export const ObjectDataTableEffect = ({
objectNamePlural,
}: ObjectDataTableEffectProps) => {
const setDataTableData = useSetObjectDataTableData();
const { foundMetadataObject } = useMetadataObjectInContext();
const tableFilters = useRecoilScopedValue(
tableFiltersScopedState,
TableRecoilScopeContext,
);
const tableSorts = useRecoilScopedValue(
tableSortsScopedState,
TableRecoilScopeContext,
);
const { objects, loading } = useFindManyObjects({
objectNamePlural,
objectNamePlural: objectNamePlural,
filter: turnFiltersIntoWhereClauseV2(
tableFilters,
foundMetadataObject?.fields ?? [],
),
orderBy: turnSortsIntoOrderByV2(
tableSorts,
foundMetadataObject?.fields ?? [],
),
});
useEffect(() => {

4
front/src/modules/metadata/components/ObjectShowPage.tsx
View File

@ -9,6 +9,7 @@ import { InlineCell } from '@/ui/data/inline-cell/components/InlineCell';
import { PropertyBox } from '@/ui/data/inline-cell/property-box/components/PropertyBox';
import { InlineCellHotkeyScope } from '@/ui/data/inline-cell/types/InlineCellHotkeyScope';
import { IconBuildingSkyscraper } from '@/ui/display/icon';
import { useLazyLoadIcons } from '@/ui/input/hooks/useLazyLoadIcons';
import { PageBody } from '@/ui/layout/page/PageBody';
import { PageContainer } from '@/ui/layout/page/PageContainer';
import { PageFavoriteButton } from '@/ui/layout/page/PageFavoriteButton';
@ -33,6 +34,8 @@ export const ObjectShowPage = () => {
objectId: string;
}>();
const { icons } = useLazyLoadIcons();
const { foundMetadataObject } = useFindOneMetadataObject({
objectNameSingular,
});
@ -130,6 +133,7 @@ export const ObjectShowPage = () => {
field: metadataField,
position: index,
metadataObject: foundMetadataObject,
icons,
}),
useUpdateEntityMutation: useUpdateOneObjectMutation,
hotkeyScope: InlineCellHotkeyScope.InlineCell,

53
front/src/modules/metadata/components/ObjectTable.tsx
View File

@ -1,11 +1,23 @@
import styled from '@emotion/styled';
import { useRecoilCallback, useSetRecoilState } from 'recoil';
import { DataTable } from '@/ui/data/data-table/components/DataTable';
import { TableOptionsDropdownId } from '@/ui/data/data-table/constants/TableOptionsDropdownId';
import { TableContext } from '@/ui/data/data-table/contexts/TableContext';
import { TableOptionsDropdown } from '@/ui/data/data-table/options/components/TableOptionsDropdown';
import { tableColumnsScopedState } from '@/ui/data/data-table/states/tableColumnsScopedState';
import { tableFiltersScopedState } from '@/ui/data/data-table/states/tableFiltersScopedState';
import { tableSortsScopedState } from '@/ui/data/data-table/states/tableSortsScopedState';
import { ViewBar } from '@/views/components/ViewBar';
import { useViewFields } from '@/views/hooks/internal/useViewFields';
import { useView } from '@/views/hooks/useView';
import { ViewScope } from '@/views/scopes/ViewScope';
import { columnDefinitionsToViewFields } from '@/views/utils/columnDefinitionToViewField';
import { viewFieldsToColumnDefinitions } from '@/views/utils/viewFieldsToColumnDefinitions';
import { viewFiltersToFilters } from '@/views/utils/viewFiltersToFilters';
import { viewSortsToSorts } from '@/views/utils/viewSortsToSorts';
import { useMetadataObjectInContext } from '../hooks/useMetadataObjectInContext';
import { useUpdateOneObject } from '../hooks/useUpdateOneObject';
import { MetadataObjectIdentifier } from '../types/MetadataObjectIdentifier';
@ -28,9 +40,26 @@ export const ObjectTable = ({ objectNamePlural }: ObjectTableProps) => {
const { updateOneObject } = useUpdateOneObject({
objectNamePlural,
});
const { columnDefinitions, foundMetadataObject } =
useMetadataObjectInContext();
const tableScopeId = foundMetadataObject?.namePlural ?? '';
const viewScopeId = objectNamePlural ?? '';
const { persistViewFields } = useViewFields(viewScopeId);
const { setCurrentViewFields } = useView({
viewScopeId,
});
const setTableColumns = useSetRecoilState(
tableColumnsScopedState(tableScopeId),
);
const setTableFilters = useSetRecoilState(
tableFiltersScopedState(tableScopeId),
);
const setTableSorts = useSetRecoilState(tableSortsScopedState(tableScopeId));
const updateEntity = ({
variables,
}: {
@ -48,16 +77,32 @@ export const ObjectTable = ({ objectNamePlural }: ObjectTableProps) => {
};
return (
<ViewScope viewScopeId={viewScopeId} onViewFieldsChange={() => {}}>
<ViewScope
viewScopeId={viewScopeId}
onViewFieldsChange={(viewFields) => {
setTableColumns(
viewFieldsToColumnDefinitions(viewFields, columnDefinitions),
);
}}
onViewFiltersChange={(viewFilters) => {
setTableFilters(viewFiltersToFilters(viewFilters));
}}
onViewSortsChange={(viewSorts) => {
setTableSorts(viewSortsToSorts(viewSorts));
}}
>
<StyledContainer>
<TableContext.Provider
value={{
onColumnsChange: () => {},
onColumnsChange: useRecoilCallback(() => (columns) => {
setCurrentViewFields?.(columnDefinitionsToViewFields(columns));
persistViewFields(columnDefinitionsToViewFields(columns));
}),
}}
>
<ViewBar
optionsDropdownButton={<TableOptionsDropdown />}
optionsDropdownScopeId="table-dropdown-option"
optionsDropdownScopeId={TableOptionsDropdownId}
/>
<ObjectTableEffect />
<ObjectDataTableEffect objectNamePlural={objectNamePlural} />

64
front/src/modules/metadata/components/ObjectTableEffect.tsx
View File

@ -16,69 +16,43 @@ export const ObjectTableEffect = () => {
setViewObjectId,
} = useView();
// const [, setTableColumns] = useRecoilScopedState(
// tableColumnsScopedState,
// TableRecoilScopeContext,
// );
const {
columnDefinitions,
filterDefinitions,
sortDefinitions,
foundMetadataObject,
} = useMetadataObjectInContext();
// const [, setTableSorts] = useRecoilScopedState(
// tableSortsScopedState,
// TableRecoilScopeContext,
// );
// const [, setTableFilters] = useRecoilScopedState(
// tableFiltersScopedState,
// TableRecoilScopeContext,
// );
const { columnDefinitions, objectNamePlural } = useMetadataObjectInContext();
const tableScopeId = foundMetadataObject?.namePlural ?? '';
const setAvailableTableColumns = useSetRecoilState(
availableTableColumnsScopedState(objectNamePlural ?? ''),
availableTableColumnsScopedState(tableScopeId),
);
useEffect(() => {
setAvailableSortDefinitions?.([]); // TODO: extract from metadata fields
setAvailableFilterDefinitions?.([]); // TODO: extract from metadata fields
setAvailableFieldDefinitions?.(columnDefinitions);
setViewObjectId?.(objectNamePlural);
if (!foundMetadataObject) {
return;
}
setViewObjectId?.(foundMetadataObject.id);
setViewType?.(ViewType.Table);
setAvailableSortDefinitions?.(sortDefinitions);
setAvailableFilterDefinitions?.(filterDefinitions);
setAvailableFieldDefinitions?.(columnDefinitions);
setAvailableTableColumns(columnDefinitions);
}, [
setAvailableTableColumns,
setViewObjectId,
setViewType,
columnDefinitions,
objectNamePlural,
setAvailableSortDefinitions,
setAvailableFilterDefinitions,
setAvailableFieldDefinitions,
foundMetadataObject,
sortDefinitions,
filterDefinitions,
]);
// useEffect(() => {
// if (currentViewFields) {
// setTableColumns([...currentViewFields].sort((a, b) => a.index - b.index));
// }
// }, [currentViewFields, setTableColumns]);
// useEffect(() => {
// if (currentViewSorts) {
// setTableSorts(currentViewSorts);
// }
// }, [currentViewFields, currentViewSorts, setTableColumns, setTableSorts]);
// useEffect(() => {
// if (currentViewFilters) {
// setTableFilters(currentViewFilters);
// }
// }, [
// currentViewFields,
// currentViewFilters,
// setTableColumns,
// setTableFilters,
// setTableSorts,
// ]);
return <></>;
};

4
front/src/modules/metadata/components/ObjectTablePage.tsx
View File

@ -49,9 +49,7 @@ export const ObjectTablePage = () => {
});
const handleAddButtonClick = async () => {
createOneObject?.({
name: 'Test',
});
createOneObject?.({});
};
return (

26
front/src/modules/metadata/hooks/useFindOneMetadataObject.ts
View File

@ -2,9 +2,14 @@ import { gql } from '@apollo/client';
import { ColumnDefinition } from '@/ui/data/data-table/types/ColumnDefinition';
import { FieldMetadata } from '@/ui/data/field/types/FieldMetadata';
import { FilterDefinition } from '@/ui/data/filter/types/FilterDefinition';
import { SortDefinition } from '@/ui/data/sort/types/SortDefinition';
import { useLazyLoadIcons } from '@/ui/input/hooks/useLazyLoadIcons';
import { MetadataObjectIdentifier } from '../types/MetadataObjectIdentifier';
import { formatMetadataFieldAsColumnDefinition } from '../utils/formatMetadataFieldAsColumnDefinition';
import { formatMetadataFieldAsFilterDefinition } from '../utils/formatMetadataFieldAsFilterDefinition';
import { formatMetadataFieldAsSortDefinition } from '../utils/formatMetadataFieldAsSortDefinition';
import { generateCreateOneObjectMutation } from '../utils/generateCreateOneObjectMutation';
import { generateDeleteOneObjectMutation } from '../utils/generateDeleteOneObjectMutation';
import { generateFindManyCustomObjectsQuery } from '../utils/generateFindManyCustomObjectsQuery';
@ -25,6 +30,8 @@ export const useFindOneMetadataObject = ({
object.nameSingular === objectNameSingular,
);
const { icons } = useLazyLoadIcons();
const objectNotFoundInMetadata =
metadataObjects.length === 0 ||
(metadataObjects.length > 0 && !foundMetadataObject);
@ -35,6 +42,23 @@ export const useFindOneMetadataObject = ({
position: index,
field,
metadataObject: foundMetadataObject,
icons,
}),
) ?? [];
const filterDefinitions: FilterDefinition[] =
foundMetadataObject?.fields.map((field) =>
formatMetadataFieldAsFilterDefinition({
field,
icons,
}),
) ?? [];
const sortDefinitions: SortDefinition[] =
foundMetadataObject?.fields.map((field) =>
formatMetadataFieldAsSortDefinition({
field,
icons,
}),
) ?? [];
@ -93,6 +117,8 @@ export const useFindOneMetadataObject = ({
foundMetadataObject,
objectNotFoundInMetadata,
columnDefinitions,
filterDefinitions,
sortDefinitions,
findManyQuery,
findOneQuery,
createOneMutation,

15
front/src/modules/metadata/hooks/useMetadataObjectInContext.ts
View File

@ -13,15 +13,22 @@ export const useMetadataObjectInContext = () => {
);
}
const { foundMetadataObject, loading, columnDefinitions } =
useFindOneMetadataObject({
objectNamePlural: context.objectNamePlural,
});
const {
foundMetadataObject,
loading,
columnDefinitions,
filterDefinitions,
sortDefinitions,
} = useFindOneMetadataObject({
objectNamePlural: context.objectNamePlural,
});
return {
...context,
foundMetadataObject,
loading,
columnDefinitions,
filterDefinitions,
sortDefinitions,
};
};

15
front/src/modules/metadata/hooks/useSetDataTableData.ts
View File

@ -3,16 +3,13 @@ import { useRecoilCallback } from 'recoil';
import { useResetTableRowSelection } from '@/ui/data/data-table/hooks/useResetTableRowSelection';
import { isFetchingDataTableDataState } from '@/ui/data/data-table/states/isFetchingDataTableDataState';
import { numberOfTableRowsState } from '@/ui/data/data-table/states/numberOfTableRowsState';
import { TableRecoilScopeContext } from '@/ui/data/data-table/states/recoil-scope-contexts/TableRecoilScopeContext';
import { tableRowIdsState } from '@/ui/data/data-table/states/tableRowIdsState';
import { entityFieldsFamilyState } from '@/ui/data/field/states/entityFieldsFamilyState';
import { useRecoilScopeId } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopeId';
import { availableSortDefinitionsScopedState } from '@/views/states/availableSortDefinitionsScopedState';
import { useView } from '@/views/hooks/useView';
export const useSetObjectDataTableData = () => {
const resetTableRowSelection = useResetTableRowSelection();
const tableContextScopeId = useRecoilScopeId(TableRecoilScopeContext);
const { setEntityCountInCurrentView } = useView();
return useRecoilCallback(
({ set, snapshot }) =>
@ -40,14 +37,10 @@ export const useSetObjectDataTableData = () => {
resetTableRowSelection();
set(numberOfTableRowsState, entityIds.length);
set(
availableSortDefinitionsScopedState({ scopeId: tableContextScopeId }),
[],
);
setEntityCountInCurrentView(entityIds.length);
set(isFetchingDataTableDataState, false);
},
[resetTableRowSelection, tableContextScopeId],
[resetTableRowSelection, setEntityCountInCurrentView],
);
};

18
front/src/modules/metadata/utils/formatMetadataFieldAsColumnDefinition.ts
View File

@ -1,30 +1,20 @@
import { ColumnDefinition } from '@/ui/data/data-table/types/ColumnDefinition';
import { FieldMetadata } from '@/ui/data/field/types/FieldMetadata';
import { FieldType } from '@/ui/data/field/types/FieldType';
import { IconBrandLinkedin } from '@/ui/display/icon';
import { MetadataObject } from '../types/MetadataObject';
const parseFieldType = (fieldType: string): FieldType => {
if (fieldType === 'url') {
return 'urlV2';
}
if (fieldType === 'money') {
return 'moneyAmountV2';
}
return fieldType as FieldType;
};
import { parseFieldType } from './parseFieldType';
export const formatMetadataFieldAsColumnDefinition = ({
position,
field,
metadataObject,
icons,
}: {
position: number;
field: MetadataObject['fields'][0];
metadataObject: Omit<MetadataObject, 'fields'>;
icons: Record<string, any>;
}): ColumnDefinition<FieldMetadata> => ({
position,
fieldId: field.id,
@ -35,7 +25,7 @@ export const formatMetadataFieldAsColumnDefinition = ({
fieldName: field.name,
placeHolder: field.label,
},
Icon: IconBrandLinkedin,
Icon: icons[field.icon ?? 'Icon123'],
isVisible: true,
basePathToShowPage: `/object/${metadataObject.nameSingular}/`,
});

16
front/src/modules/metadata/utils/formatMetadataFieldAsFilterDefinition.ts Normal file
View File

@ -0,0 +1,16 @@
import { FilterDefinition } from '@/ui/data/filter/types/FilterDefinition';
import { MetadataObject } from '../types/MetadataObject';
export const formatMetadataFieldAsFilterDefinition = ({
field,
icons,
}: {
field: MetadataObject['fields'][0];
icons: Record<string, any>;
}): FilterDefinition => ({
fieldId: field.id,
label: field.label,
Icon: icons[field.icon ?? 'Icon123'],
type: 'text',
});

15
front/src/modules/metadata/utils/formatMetadataFieldAsSortDefinition.ts Normal file
View File

@ -0,0 +1,15 @@
import { SortDefinition } from '@/ui/data/sort/types/SortDefinition';
import { MetadataObject } from '../types/MetadataObject';
export const formatMetadataFieldAsSortDefinition = ({
field,
icons,
}: {
field: MetadataObject['fields'][0];
icons: Record<string, any>;
}): SortDefinition => ({
fieldId: field.id,
label: field.label,
Icon: icons[field.icon ?? 'Icon123'],
});

13
front/src/modules/metadata/utils/parseFieldType.ts Normal file
View File

@ -0,0 +1,13 @@
import { FieldType } from '@/ui/data/field/types/FieldType';
export const parseFieldType = (fieldType: string): FieldType => {
if (fieldType === 'url') {
return 'urlV2';
}
if (fieldType === 'money') {
return 'moneyAmountV2';
}
return fieldType as FieldType;
};

8
front/src/modules/people/hooks/useCreateActivityForPeople.ts
View File

@ -1,4 +1,4 @@
import { useRecoilCallback, useRecoilValue } from 'recoil';
import { useRecoilCallback } from 'recoil';
import { useOpenCreateActivityDrawerForSelectedRowIds } from '@/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds';
import {
@ -12,12 +12,14 @@ import { ActivityType, Person } from '~/generated/graphql';
export const useCreateActivityForPeople = () => {
const openCreateActivityRightDrawer =
useOpenCreateActivityDrawerForSelectedRowIds();
const selectedRowIds = useRecoilValue(selectedRowIdsSelector);
return useRecoilCallback(
({ snapshot }) =>
(type: ActivityType) => {
const relatedEntites: ActivityTargetableEntity[] = [];
const selectedRowIds = Object.keys(
snapshot.getLoadable(selectedRowIdsSelector).getValue(),
);
for (const id of selectedRowIds) {
const person = snapshot
.getLoadable(entityFieldsFamilyState(id))
@ -39,6 +41,6 @@ export const useCreateActivityForPeople = () => {
relatedEntites,
);
},
[selectedRowIds, openCreateActivityRightDrawer],
[openCreateActivityRightDrawer],
);
};

75
front/src/modules/people/hooks/usePersonTableActionBarEntries.tsx
View File

@ -1,75 +0,0 @@
import { getOperationName } from '@apollo/client/utilities';
import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
import { useResetTableRowSelection } from '@/ui/data/data-table/hooks/useResetTableRowSelection';
import { selectedRowIdsSelector } from '@/ui/data/data-table/states/selectors/selectedRowIdsSelector';
import { tableRowIdsState } from '@/ui/data/data-table/states/tableRowIdsState';
import { IconCheckbox, IconNotes, IconTrash } from '@/ui/display/icon';
import { actionBarEntriesState } from '@/ui/navigation/action-bar/states/actionBarEntriesState';
import { ActivityType, useDeleteManyPersonMutation } from '~/generated/graphql';
import { GET_PEOPLE } from '../graphql/queries/getPeople';
import { useCreateActivityForPeople } from './useCreateActivityForPeople';
export const usePersonTableActionBarEntries = () => {
const selectedRowIds = useRecoilValue(selectedRowIdsSelector);
const [tableRowIds, setTableRowIds] = useRecoilState(tableRowIdsState);
const setActionBarEntries = useSetRecoilState(actionBarEntriesState);
const createActivityForPeople = useCreateActivityForPeople();
const resetRowSelection = useResetTableRowSelection();
const [deleteManyPerson] = useDeleteManyPersonMutation({
refetchQueries: [getOperationName(GET_PEOPLE) ?? ''],
});
const handleDeleteClick = async () => {
const rowIdsToDelete = selectedRowIds;
resetRowSelection();
await deleteManyPerson({
variables: {
ids: rowIdsToDelete,
},
optimisticResponse: {
__typename: 'Mutation',
deleteManyPerson: {
count: rowIdsToDelete.length,
},
},
update: (cache) => {
setTableRowIds(
tableRowIds.filter((id) => !rowIdsToDelete.includes(id)),
);
rowIdsToDelete.forEach((id) => {
cache.evict({ id: cache.identify({ id, __typename: 'Person' }) });
cache.gc();
});
},
});
};
return {
setActionBarEntries: () =>
setActionBarEntries([
{
label: 'Note',
Icon: IconNotes,
onClick: () => createActivityForPeople(ActivityType.Note),
},
{
label: 'Task',
Icon: IconCheckbox,
onClick: () => createActivityForPeople(ActivityType.Task),
},
{
label: 'Delete',
Icon: IconTrash,
accent: 'danger',
onClick: () => handleDeleteClick(),
},
]),
};
};

80
front/src/modules/people/hooks/usePersonTableContextMenuEntries.tsx
View File

@ -1,5 +1,5 @@
import { getOperationName } from '@apollo/client/utilities';
import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
import { useRecoilCallback, useSetRecoilState } from 'recoil';
import { useFavorites } from '@/favorites/hooks/useFavorites';
import { useResetTableRowSelection } from '@/ui/data/data-table/hooks/useResetTableRowSelection';
@ -12,6 +12,7 @@ import {
IconNotes,
IconTrash,
} from '@/ui/display/icon';
import { actionBarEntriesState } from '@/ui/navigation/action-bar/states/actionBarEntriesState';
import { contextMenuEntriesState } from '@/ui/navigation/context-menu/states/contextMenuEntriesState';
import {
ActivityType,
@ -25,38 +26,41 @@ import { useCreateActivityForPeople } from './useCreateActivityForPeople';
export const usePersonTableContextMenuEntries = () => {
const setContextMenuEntries = useSetRecoilState(contextMenuEntriesState);
const setActionBarEntriesState = useSetRecoilState(actionBarEntriesState);
const createActivityForPeople = useCreateActivityForPeople();
const selectedRowIds = useRecoilValue(selectedRowIdsSelector);
const [tableRowIds, setTableRowIds] = useRecoilState(tableRowIdsState);
const setTableRowIds = useSetRecoilState(tableRowIdsState);
const resetRowSelection = useResetTableRowSelection();
const selectedPersonId = selectedRowIds.length === 1 ? selectedRowIds[0] : '';
const { data } = useGetFavoritesQuery();
const favorites = data?.findFavorites;
const isFavorite =
!!selectedPersonId &&
!!favorites?.find((favorite) => favorite.person?.id === selectedPersonId);
const { insertPersonFavorite, deletePersonFavorite } = useFavorites();
const handleFavoriteButtonClick = () => {
const handleFavoriteButtonClick = useRecoilCallback(({ snapshot }) => () => {
const selectedRowIds = snapshot
.getLoadable(selectedRowIdsSelector)
.getValue();
const selectedPersonId =
selectedRowIds.length === 1 ? selectedRowIds[0] : '';
const isFavorite =
!!selectedPersonId &&
!!favorites?.find((favorite) => favorite.person?.id === selectedPersonId);
resetRowSelection();
if (isFavorite) deletePersonFavorite(selectedPersonId);
else insertPersonFavorite(selectedPersonId);
};
});
const [deleteManyPerson] = useDeleteManyPersonMutation({
refetchQueries: [getOperationName(GET_PEOPLE) ?? ''],
});
const handleDeleteClick = async () => {
const rowIdsToDelete = selectedRowIds;
const handleDeleteClick = useRecoilCallback(({ snapshot }) => async () => {
const rowIdsToDelete = snapshot
.getLoadable(selectedRowIdsSelector)
.getValue();
resetRowSelection();
@ -71,15 +75,28 @@ export const usePersonTableContextMenuEntries = () => {
},
},
update: () => {
setTableRowIds(
setTableRowIds((tableRowIds) =>
tableRowIds.filter((id) => !rowIdsToDelete.includes(id)),
);
},
});
};
});
return {
setContextMenuEntries: () =>
setContextMenuEntries: useRecoilCallback(({ snapshot }) => () => {
const selectedRowIds = snapshot
.getLoadable(selectedRowIdsSelector)
.getValue();
const selectedPersonId =
selectedRowIds.length === 1 ? selectedRowIds[0] : '';
const isFavorite =
!!selectedPersonId &&
!!favorites?.find(
(favorite) => favorite.person?.id === selectedPersonId,
);
setContextMenuEntries([
{
label: 'New task',
@ -108,6 +125,27 @@ export const usePersonTableContextMenuEntries = () => {
accent: 'danger',
onClick: () => handleDeleteClick(),
},
]),
]);
}),
setActionBarEntries: useRecoilCallback(() => () => {
setActionBarEntriesState([
{
label: 'Task',
Icon: IconCheckbox,
onClick: () => createActivityForPeople(ActivityType.Task),
},
{
label: 'Note',
Icon: IconNotes,
onClick: () => createActivityForPeople(ActivityType.Note),
},
{
label: 'Delete',
Icon: IconTrash,
accent: 'danger',
onClick: () => handleDeleteClick(),
},
]);
}),
};
};

6
front/src/modules/people/table/components/PersonTable.tsx
View File

@ -3,7 +3,6 @@ import { useRecoilCallback, useSetRecoilState } from 'recoil';
import { peopleAvailableFieldDefinitions } from '@/people/constants/peopleAvailableFieldDefinitions';
import { getPeopleOptimisticEffectDefinition } from '@/people/graphql/optimistic-effect-definitions/getPeopleOptimisticEffectDefinition';
import { usePersonTableActionBarEntries } from '@/people/hooks/usePersonTableActionBarEntries';
import { usePersonTableContextMenuEntries } from '@/people/hooks/usePersonTableContextMenuEntries';
import { useSpreadsheetPersonImport } from '@/people/hooks/useSpreadsheetPersonImport';
import { DataTable } from '@/ui/data/data-table/components/DataTable';
@ -53,8 +52,8 @@ export const PersonTable = () => {
viewScopeId,
});
const { setContextMenuEntries } = usePersonTableContextMenuEntries();
const { setActionBarEntries } = usePersonTableActionBarEntries();
const { setContextMenuEntries, setActionBarEntries } =
usePersonTableContextMenuEntries();
const updatePerson = async (variables: UpdateOnePersonMutationVariables) => {
updateEntityMutation({
@ -74,7 +73,6 @@ export const PersonTable = () => {
const StyledContainer = styled.div`
display: flex;
flex-direction: column;
height: 100%;
overflow: auto;
`;

23
front/src/modules/people/table/components/PersonTableEffect.tsx
View File

@ -46,29 +46,6 @@ const PeopleTableEffect = () => {
setViewObjectId,
setViewType,
]);
// useEffect(() => {
// if (currentViewFields) {
// setTableColumns([...currentViewFields].sort((a, b) => a.index - b.index));
// }
// }, [currentViewFields, setTableColumns]);
// useEffect(() => {
// if (currentViewSorts) {
// setTableSorts(currentViewSorts);
// }
// }, [currentViewFields, currentViewSorts, setTableColumns, setTableSorts]);
// useEffect(() => {
// if (currentViewFilters) {
// setTableFilters(currentViewFilters);
// }
// }, [
// currentViewFields,
// currentViewFilters,
// setTableColumns,
// setTableFilters,
// setTableSorts,
// ]);
return <></>;
};

15
front/src/modules/ui/data/data-table/components/DataTable.tsx
View File

@ -79,6 +79,7 @@ const StyledTableContainer = styled.div`
flex-direction: column;
height: 100%;
overflow: auto;
position: relative;
`;
type DataTableProps = {
@ -121,20 +122,20 @@ export const DataTable = ({ updateEntityMutation }: DataTableProps) => {
return (
<EntityUpdateMutationContext.Provider value={updateEntityMutation}>
<StyledTableWithHeader>
<StyledTableContainer ref={tableBodyRef}>
<StyledTableContainer>
<ScrollWrapper>
<div>
<div ref={tableBodyRef}>
<StyledTable className="entity-table-cell">
<DataTableHeader />
<DataTableBody />
</StyledTable>
<DragSelect
dragSelectable={tableBodyRef}
onDragSelectionStart={resetTableRowSelection}
onDragSelectionChange={setRowSelectedState}
/>
</div>
</ScrollWrapper>
<DragSelect
dragSelectable={tableBodyRef}
onDragSelectionStart={resetTableRowSelection}
onDragSelectionChange={setRowSelectedState}
/>
</StyledTableContainer>
</StyledTableWithHeader>
</EntityUpdateMutationContext.Provider>

4
front/src/modules/ui/data/data-table/components/DataTableEffect.tsx
View File

@ -23,10 +23,8 @@ export const DataTableEffect = ({
getRequestResultKey,
getRequestOptimisticEffectDefinition,
filterDefinitionArray,
setActionBarEntries,
setContextMenuEntries,
sortDefinitionArray,
}: {
useGetRequest: typeof useGetCompaniesQuery | typeof useGetPeopleQuery;
getRequestResultKey: string;
@ -59,7 +57,7 @@ export const DataTableEffect = ({
onCompleted: (data: any) => {
const entities = data[getRequestResultKey] ?? [];
setDataTableData(entities, filterDefinitionArray, sortDefinitionArray);
setDataTableData(entities);
registerOptimisticEffect({
variables: { orderBy: sortsOrderBy, where: tablefiltersWhere },

22
front/src/modules/ui/data/data-table/hooks/useSetDataTableData.ts
View File

@ -1,15 +1,10 @@
import { useRecoilCallback } from 'recoil';
import { entityFieldsFamilyState } from '@/ui/data/field/states/entityFieldsFamilyState';
import { FilterDefinition } from '@/ui/data/filter/types/FilterDefinition';
import { useRecoilScopeId } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopeId';
import { useView } from '@/views/hooks/useView';
import { availableSortDefinitionsScopedState } from '@/views/states/availableSortDefinitionsScopedState';
import { SortDefinition } from '../../sort/types/SortDefinition';
import { isFetchingDataTableDataState } from '../states/isFetchingDataTableDataState';
import { numberOfTableRowsState } from '../states/numberOfTableRowsState';
import { TableRecoilScopeContext } from '../states/recoil-scope-contexts/TableRecoilScopeContext';
import { tableRowIdsState } from '../states/tableRowIdsState';
import { useResetTableRowSelection } from './useResetTableRowSelection';
@ -18,15 +13,9 @@ export const useSetDataTableData = () => {
const resetTableRowSelection = useResetTableRowSelection();
const { setEntityCountInCurrentView } = useView();
const tableContextScopeId = useRecoilScopeId(TableRecoilScopeContext);
return useRecoilCallback(
({ set, snapshot }) =>
<T extends { id: string }>(
newEntityArray: T[],
filterDefinitionArray: FilterDefinition[],
sortDefinitionArray: SortDefinition[],
) => {
<T extends { id: string }>(newEntityArray: T[]) => {
for (const entity of newEntityArray) {
const currentEntity = snapshot
.getLoadable(entityFieldsFamilyState(entity.id))
@ -50,16 +39,9 @@ export const useSetDataTableData = () => {
resetTableRowSelection();
set(numberOfTableRowsState, entityIds.length);
setEntityCountInCurrentView(entityIds.length);
set(
availableSortDefinitionsScopedState({ scopeId: tableContextScopeId }),
sortDefinitionArray,
);
set(isFetchingDataTableDataState, false);
},
[resetTableRowSelection, setEntityCountInCurrentView, tableContextScopeId],
[resetTableRowSelection, setEntityCountInCurrentView],
);
};

53
front/src/modules/ui/data/filter/utils/turnFiltersIntoWhereClauseV2.ts Normal file
View File

@ -0,0 +1,53 @@
import { ViewFilterOperand } from '@/views/types/ViewFilterOperand';
import { Field } from '~/generated/graphql';
import { Filter } from '../types/Filter';
type FilterToTurnIntoWhereClause = Omit<Filter, 'definition'> & {
definition: {
type: Filter['definition']['type'];
};
};
export const turnFiltersIntoWhereClauseV2 = (
filters: FilterToTurnIntoWhereClause[],
fields: Pick<Field, 'id' | 'name'>[],
) => {
const whereClause: Record<string, any> = {};
filters.forEach((filter) => {
const correspondingField = fields.find(
(field) => field.id === filter.fieldId,
);
if (!correspondingField) {
throw new Error(
`Could not find field ${filter.fieldId} in metadata object`,
);
}
switch (filter.definition.type) {
case 'text':
switch (filter.operand) {
case ViewFilterOperand.Contains:
whereClause[correspondingField.name] = {
eq: filter.value,
};
return;
case ViewFilterOperand.DoesNotContain:
whereClause[correspondingField.name] = {
not: {
eq: filter.value,
},
};
return;
default:
throw new Error(
`Unknown operand ${filter.operand} for ${filter.definition.type} filter`,
);
}
default:
throw new Error('Unknown filter type');
}
});
return whereClause;
};

2
front/src/modules/ui/data/sort/hooks/useSortStates.ts
View File

@ -1,6 +1,6 @@
import { useRecoilScopedStateV2 } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedStateV2';
import { availableSortDefinitionsScopedState } from '@/views/states/availableSortDefinitionsScopedState';
import { availableSortDefinitionsScopedState } from '../states/availableSortDefinitionsScopedState';
import { isSortSelectedScopedState } from '../states/isSortSelectedScopedState';
export const useSortStates = (scopeId: string) => {

6
front/src/modules/ui/data/sort/states/availableSortsScopedState.ts → front/src/modules/ui/data/sort/states/availableSortDefinitionsScopedState.ts
View File

@ -2,7 +2,9 @@ import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScope
import { SortDefinition } from '../types/SortDefinition';
export const availableSortsScopedState = createScopedState<SortDefinition[]>({
key: 'availableSortsScopedState',
export const availableSortDefinitionsScopedState = createScopedState<
SortDefinition[]
>({
key: 'availableSortDefinitionsScopedState',
defaultValue: [],
});

26
front/src/modules/ui/data/sort/utils/turnSortsIntoOrderByV2.ts Normal file
View File

@ -0,0 +1,26 @@
import { Field } from '~/generated/graphql';
import { Sort } from '../types/Sort';
export const turnSortsIntoOrderByV2 = (
sorts: Sort[],
fields: Pick<Field, 'id' | 'name'>[],
) => {
const sortsObject: Record<string, 'AscNullsFirst' | 'DescNullsLast'> = {};
sorts.forEach((sort) => {
const correspondingField = fields.find(
(field) => field.id === sort.fieldId,
);
if (!correspondingField) {
throw new Error(
`Could not find field ${sort.fieldId} in metadata object`,
);
}
const direction =
sort.direction === 'asc' ? 'AscNullsFirst' : 'DescNullsLast';
sortsObject[correspondingField.name] = direction;
});
return sortsObject;
};

1
front/src/modules/ui/layout/board/components/EntityBoard.tsx
View File

@ -42,6 +42,7 @@ const StyledWrapper = styled.div`
flex-direction: column;
height: 100%;
overflow: hidden;
position: relative;
width: 100%;
`;

4
front/src/modules/ui/navigation/action-bar/components/__stories__/ActionBar.stories.tsx
View File

@ -2,7 +2,7 @@ import { MemoryRouter } from 'react-router-dom';
import { Meta, StoryObj } from '@storybook/react';
import { useSetRecoilState } from 'recoil';
import { useCompanyTableActionBarEntries } from '@/companies/hooks/useCompanyTableActionBarEntries';
import { useCompanyTableContextMenuEntries } from '@/companies/hooks/useCompanyTableContextMenuEntries';
import { CompanyTableMockMode } from '@/companies/table/components/CompanyTableMockMode';
import { TableRecoilScopeContext } from '@/ui/data/data-table/states/recoil-scope-contexts/TableRecoilScopeContext';
import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
@ -12,7 +12,7 @@ import { actionBarOpenState } from '../../states/actionBarIsOpenState';
import { ActionBar } from '../ActionBar';
const FilledActionBar = (props: { selectedIds: string[] }) => {
const { setActionBarEntries } = useCompanyTableActionBarEntries();
const { setActionBarEntries } = useCompanyTableContextMenuEntries();
setActionBarEntries();
const setActionBarOpenState = useSetRecoilState(actionBarOpenState);
setActionBarOpenState(true);

14
front/src/pages/settings/data-model/SettingsNewObject.tsx
View File

@ -1,6 +1,7 @@
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useCreateOneObject } from '@/metadata/hooks/useCreateOneObject';
import { useMetadataObjectForSettings } from '@/metadata/hooks/useMetadataObjectForSettings';
import { SaveAndCancelButtons } from '@/settings/components/SaveAndCancelButtons/SaveAndCancelButtons';
import { SettingsHeaderContainer } from '@/settings/components/SettingsHeaderContainer';
@ -17,6 +18,7 @@ import { H2Title } from '@/ui/display/typography/components/H2Title';
import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
import { Section } from '@/ui/layout/section/components/Section';
import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
import { ViewType } from '@/views/types/ViewType';
export const SettingsNewObject = () => {
const navigate = useNavigate();
@ -29,6 +31,10 @@ export const SettingsNewObject = () => {
disabledMetadataObjects: disabledObjects,
} = useMetadataObjectForSettings();
const { createOneObject: createOneView } = useCreateOneObject({
objectNamePlural: 'viewsV2',
});
const [selectedStandardObjectIds, setSelectedStandardObjectIds] = useState<
Record<string, boolean>
>({});
@ -60,12 +66,18 @@ export const SettingsNewObject = () => {
}
if (selectedObjectType === 'Custom') {
await createObject({
const createdObject = await createObject({
labelPlural: customFormValues.labelPlural,
labelSingular: customFormValues.labelSingular,
description: customFormValues.description,
icon: customFormValues.icon,
});
await createOneView?.({
objectId: createdObject.data?.createOneObject.id,
type: ViewType.Table,
name: `All ${customFormValues.labelPlural}`,
});
}
navigate('/settings/objects');

41
front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep2.tsx
View File

@ -1,8 +1,11 @@
import { useEffect, useState } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { useCreateOneObject } from '@/metadata/hooks/useCreateOneObject';
import { useFindManyObjects } from '@/metadata/hooks/useFindManyObjects';
import { useMetadataField } from '@/metadata/hooks/useMetadataField';
import { useMetadataObjectForSettings } from '@/metadata/hooks/useMetadataObjectForSettings';
import { PaginatedObjectTypeResults } from '@/metadata/types/PaginatedObjectTypeResults';
import { SaveAndCancelButtons } from '@/settings/components/SaveAndCancelButtons/SaveAndCancelButtons';
import { SettingsHeaderContainer } from '@/settings/components/SettingsHeaderContainer';
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
@ -13,6 +16,8 @@ import { AppPath } from '@/types/AppPath';
import { IconSettings } from '@/ui/display/icon';
import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
import { View } from '@/views/types/View';
import { ViewType } from '@/views/types/ViewType';
export const SettingsObjectNewFieldStep2 = () => {
const navigate = useNavigate();
@ -36,15 +41,47 @@ export const SettingsObjectNewFieldStep2 = () => {
type: MetadataFieldDataType;
}>({ icon: 'IconUsers', label: '', type: 'number' });
if (!activeMetadataObject) return null;
const [objectViews, setObjectViews] = useState<View[]>([]);
const { createOneObject: createOneViewField } = useCreateOneObject({
objectNamePlural: 'viewFieldsV2',
});
useFindManyObjects({
objectNamePlural: 'viewsV2',
filter: {
type: { eq: ViewType.Table },
objectId: { eq: activeMetadataObject?.id },
},
onCompleted: async (data: PaginatedObjectTypeResults<View>) => {
const views = data.edges;
if (!views) {
return;
}
setObjectViews(data.edges.map(({ node }) => node));
},
});
if (!activeMetadataObject || !objectViews.length) return null;
const canSave = !!formValues.label;
const handleSave = async () => {
await createMetadataField({
const createdField = await createMetadataField({
...formValues,
objectId: activeMetadataObject.id,
});
objectViews.forEach(async (view) => {
await createOneViewField?.({
viewId: view.id,
fieldId: createdField.data?.createOneField.id,
position: activeMetadataObject.fields.length,
isVisible: true,
size: 100,
});
});
navigate(`/settings/objects/${objectSlug}`);
};

4
server/src/metadata/commands/data-seed-tenant.command.ts
View File

@ -1,7 +1,7 @@
import { Command, CommandRunner, Option } from 'nest-commander';
import { TenantInitialisationService } from '../tenant-initialisation/tenant-initialisation.service';
import { DataSourceMetadataService } from '../data-source-metadata/data-source-metadata.service';
import { DataSourceMetadataService } from 'src/metadata/data-source-metadata/data-source-metadata.service';
import { TenantInitialisationService } from 'src/metadata/tenant-initialisation/tenant-initialisation.service';
// TODO: implement dry-run
interface DataSeedTenantOptions {

2
server/src/metadata/field-metadata/hooks/before-create-one-field.hook.ts
View File

@ -22,7 +22,7 @@ export class BeforeCreateOneField<T extends FieldMetadata>
}
instance.input.workspaceId = workspaceId;
instance.input.isActive = false;
instance.input.isActive = true;
instance.input.isCustom = true;
return instance;
}

2
server/src/metadata/object-metadata/hooks/before-create-one-object.hook.ts
View File

@ -32,7 +32,7 @@ export class BeforeCreateOneObject<T extends ObjectMetadata>
instance.input.dataSourceId = lastDataSourceMetadata.id;
instance.input.targetTableName = instance.input.namePlural;
instance.input.workspaceId = workspaceId;
instance.input.isActive = false;
instance.input.isActive = true;
instance.input.isCustom = true;
return instance;
}