Files
twenty/front/src/modules/companies/table/components/CompanyTable.tsx
Thaïs ab0cdbf960 feat: persist table columns on change (#1697)
* feat: persist table columns on change

Closes #1580

* fix: fix drag-and-select on Table Options dropdown toggle
2023-09-21 13:15:57 -07:00

121 lines
4.5 KiB
TypeScript

import { companiesAvailableColumnDefinitions } from '@/companies/constants/companiesAvailableColumnDefinitions';
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 { EntityTable } from '@/ui/table/components/EntityTable';
import { EntityTableEffect } from '@/ui/table/components/EntityTableEffect';
import { TableContext } from '@/ui/table/contexts/TableContext';
import { useUpsertEntityTableItem } from '@/ui/table/hooks/useUpsertEntityTableItem';
import { TableRecoilScopeContext } from '@/ui/table/states/recoil-scope-contexts/TableRecoilScopeContext';
import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
import { ViewBarContext } from '@/ui/view-bar/contexts/ViewBarContext';
import { filtersWhereScopedSelector } from '@/ui/view-bar/states/selectors/filtersWhereScopedSelector';
import { sortsOrderByScopedSelector } from '@/ui/view-bar/states/selectors/sortsOrderByScopedSelector';
import { useTableViews } from '@/views/hooks/useTableViews';
import {
UpdateOneCompanyMutationVariables,
useGetCompaniesQuery,
useGetWorkspaceMembersLazyQuery,
useUpdateOneCompanyMutation,
} from '~/generated/graphql';
import { companiesFilters } from '~/pages/companies/companies-filters';
import { companyAvailableSorts } from '~/pages/companies/companies-sorts';
export const CompanyTable = () => {
const sortsOrderBy = useRecoilScopedValue(
sortsOrderByScopedSelector,
TableRecoilScopeContext,
);
const filtersWhere = useRecoilScopedValue(
filtersWhereScopedSelector,
TableRecoilScopeContext,
);
const [updateEntityMutation] = useUpdateOneCompanyMutation();
const upsertEntityTableItem = useUpsertEntityTableItem();
const [getWorkspaceMember] = useGetWorkspaceMembersLazyQuery();
const {
createView,
deleteView,
persistColumns,
submitCurrentView,
updateView,
} = useTableViews({
objectId: 'company',
columnDefinitions: companiesAvailableColumnDefinitions,
});
const { openCompanySpreadsheetImport } = useSpreadsheetCompanyImport();
const { setContextMenuEntries } = useCompanyTableContextMenuEntries();
const { setActionBarEntries } = useCompanyTableActionBarEntries();
const updateCompany = async (
variables: UpdateOneCompanyMutationVariables,
) => {
if (variables.data.accountOwner?.connect?.id) {
const workspaceMemberAccountOwner = (
await getWorkspaceMember({
variables: {
where: {
userId: { equals: variables.data.accountOwner.connect?.id },
},
},
})
).data?.workspaceMembers?.[0];
variables.data.workspaceMemberAccountOwner = {
connect: { id: workspaceMemberAccountOwner?.id },
};
}
updateEntityMutation({
variables: variables,
onCompleted: (data) => {
if (!data.updateOneCompany) {
return;
}
upsertEntityTableItem(data.updateOneCompany);
},
});
};
return (
<TableContext.Provider value={{ onColumnsChange: persistColumns }}>
<EntityTableEffect
getRequestResultKey="companies"
useGetRequest={useGetCompaniesQuery}
getRequestOptimisticEffectDefinition={
getCompaniesOptimisticEffectDefinition
}
orderBy={sortsOrderBy}
whereFilters={filtersWhere}
filterDefinitionArray={companiesFilters}
sortDefinitionArray={companyAvailableSorts}
setContextMenuEntries={setContextMenuEntries}
setActionBarEntries={setActionBarEntries}
/>
<ViewBarContext.Provider
value={{
defaultViewName: 'All Companies',
onCurrentViewSubmit: submitCurrentView,
onViewCreate: createView,
onViewEdit: updateView,
onViewRemove: deleteView,
onImport: openCompanySpreadsheetImport,
ViewBarRecoilScopeContext: TableRecoilScopeContext,
}}
>
<EntityTable
updateEntityMutation={({
variables,
}: {
variables: UpdateOneCompanyMutationVariables;
}) => updateCompany(variables)}
/>
</ViewBarContext.Provider>
</TableContext.Provider>
);
};