Complete Fix view work (#2272)
* Fix views * Make view sorts and view filters functional * Complete Company table view fix * Fix model creation * Start fixing board * Complete work
This commit is contained in:
Charles Bochet
@ -1,97 +0,0 @@
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { getPeopleOptimisticEffectDefinition } from '@/people/graphql/optimistic-effect-definitions/getPeopleOptimisticEffectDefinition';
|
||||
import { usePersonTableContextMenuEntries } from '@/people/hooks/usePeopleTableContextMenuEntries';
|
||||
import { usePersonTableActionBarEntries } from '@/people/hooks/usePersonTableActionBarEntries';
|
||||
import { useSpreadsheetPersonImport } from '@/people/hooks/useSpreadsheetPersonImport';
|
||||
import { DataTable } from '@/ui/data/data-table/components/DataTable';
|
||||
import { DataTableEffect } from '@/ui/data/data-table/components/DataTableEffect';
|
||||
import { TableContext } from '@/ui/data/data-table/contexts/TableContext';
|
||||
import { useUpsertDataTableItem } from '@/ui/data/data-table/hooks/useUpsertDataTableItem';
|
||||
import { TableOptionsDropdown } from '@/ui/data/data-table/options/components/TableOptionsDropdown';
|
||||
import { ViewBar } from '@/views/components/ViewBar';
|
||||
import { ViewBarEffect } from '@/views/components/ViewBarEffect';
|
||||
import { ViewScope } from '@/views/scopes/ViewScope';
|
||||
import {
|
||||
UpdateOnePersonMutationVariables,
|
||||
useGetPeopleQuery,
|
||||
useUpdateOnePersonMutation,
|
||||
} from '~/generated/graphql';
|
||||
import { peopleAvailableFilters } from '~/pages/people/people-filters';
|
||||
import { peopleAvailableSorts } from '~/pages/people/people-sorts';
|
||||
|
||||
import PersonTableEffect from './PersonTableEffect';
|
||||
|
||||
export const PeopleTable = () => {
|
||||
const tableViewScopeId = 'person-table';
|
||||
|
||||
const [updateEntityMutation] = useUpdateOnePersonMutation();
|
||||
const upsertDataTableItem = useUpsertDataTableItem();
|
||||
|
||||
const { setContextMenuEntries } = usePersonTableContextMenuEntries();
|
||||
const { setActionBarEntries } = usePersonTableActionBarEntries();
|
||||
|
||||
const { openPersonSpreadsheetImport: onImport } =
|
||||
useSpreadsheetPersonImport();
|
||||
|
||||
const StyledContainer = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
`;
|
||||
|
||||
return (
|
||||
<ViewScope
|
||||
viewScopeId={tableViewScopeId}
|
||||
onViewFieldsChange={() => {}}
|
||||
onViewSortsChange={() => {}}
|
||||
onViewFiltersChange={() => {}}
|
||||
>
|
||||
<StyledContainer>
|
||||
<TableContext.Provider
|
||||
value={{
|
||||
onColumnsChange: () => {},
|
||||
}}
|
||||
>
|
||||
<ViewBarEffect />
|
||||
|
||||
<ViewBar
|
||||
optionsDropdownButton={<TableOptionsDropdown onImport={onImport} />}
|
||||
optionsDropdownScopeId="table-dropdown-option"
|
||||
/>
|
||||
<PersonTableEffect />
|
||||
|
||||
<DataTableEffect
|
||||
getRequestResultKey="people"
|
||||
useGetRequest={useGetPeopleQuery}
|
||||
getRequestOptimisticEffectDefinition={
|
||||
getPeopleOptimisticEffectDefinition
|
||||
}
|
||||
filterDefinitionArray={peopleAvailableFilters}
|
||||
sortDefinitionArray={peopleAvailableSorts}
|
||||
setContextMenuEntries={setContextMenuEntries}
|
||||
setActionBarEntries={setActionBarEntries}
|
||||
/>
|
||||
<DataTable
|
||||
updateEntityMutation={({
|
||||
variables,
|
||||
}: {
|
||||
variables: UpdateOnePersonMutationVariables;
|
||||
}) =>
|
||||
updateEntityMutation({
|
||||
variables,
|
||||
onCompleted: (data) => {
|
||||
if (!data.updateOnePerson) {
|
||||
return;
|
||||
}
|
||||
upsertDataTableItem(data.updateOnePerson);
|
||||
},
|
||||
})
|
||||
}
|
||||
/>
|
||||
</TableContext.Provider>
|
||||
</StyledContainer>
|
||||
</ViewScope>
|
||||
);
|
||||
};
|
||||
135
front/src/modules/people/table/components/PersonTable.tsx
Normal file
135
front/src/modules/people/table/components/PersonTable.tsx
Normal file
@ -0,0 +1,135 @@
|
||||
import styled from '@emotion/styled';
|
||||
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';
|
||||
import { DataTableEffect } from '@/ui/data/data-table/components/DataTableEffect';
|
||||
import { TableContext } from '@/ui/data/data-table/contexts/TableContext';
|
||||
import { useUpsertDataTableItem } from '@/ui/data/data-table/hooks/useUpsertDataTableItem';
|
||||
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 {
|
||||
UpdateOnePersonMutationVariables,
|
||||
useGetPeopleQuery,
|
||||
useUpdateOnePersonMutation,
|
||||
} from '~/generated/graphql';
|
||||
import { personTableFilterDefinitions } from '~/pages/people/constants/personTableFilterDefinitions';
|
||||
import { personTableSortDefinitions } from '~/pages/people/constants/personTableSortDefinitions';
|
||||
|
||||
import PersonTableEffect from './PersonTableEffect';
|
||||
|
||||
export const PersonTable = () => {
|
||||
const viewScopeId = 'person-table-view';
|
||||
const tableScopeId = 'people';
|
||||
const setTableColumns = useSetRecoilState(
|
||||
tableColumnsScopedState(tableScopeId),
|
||||
);
|
||||
|
||||
const setTableFilters = useSetRecoilState(
|
||||
tableFiltersScopedState(tableScopeId),
|
||||
);
|
||||
|
||||
const setTableSorts = useSetRecoilState(tableSortsScopedState(tableScopeId));
|
||||
|
||||
const [updateEntityMutation] = useUpdateOnePersonMutation();
|
||||
const upsertDataTableItem = useUpsertDataTableItem();
|
||||
|
||||
const { persistViewFields } = useViewFields(viewScopeId);
|
||||
const { setCurrentViewFields } = useView({
|
||||
viewScopeId,
|
||||
});
|
||||
|
||||
const { setContextMenuEntries } = usePersonTableContextMenuEntries();
|
||||
const { setActionBarEntries } = usePersonTableActionBarEntries();
|
||||
|
||||
const updatePerson = async (variables: UpdateOnePersonMutationVariables) => {
|
||||
updateEntityMutation({
|
||||
variables: variables,
|
||||
onCompleted: (data) => {
|
||||
if (!data.updateOnePerson) {
|
||||
return;
|
||||
}
|
||||
upsertDataTableItem(data.updateOnePerson);
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const { openPersonSpreadsheetImport: onImport } =
|
||||
useSpreadsheetPersonImport();
|
||||
|
||||
const StyledContainer = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
`;
|
||||
|
||||
return (
|
||||
<ViewScope
|
||||
viewScopeId={viewScopeId}
|
||||
onViewFieldsChange={(viewFields) => {
|
||||
setTableColumns(
|
||||
viewFieldsToColumnDefinitions(
|
||||
viewFields,
|
||||
peopleAvailableFieldDefinitions,
|
||||
),
|
||||
);
|
||||
}}
|
||||
onViewFiltersChange={(viewFilters) => {
|
||||
setTableFilters(viewFiltersToFilters(viewFilters));
|
||||
}}
|
||||
onViewSortsChange={(viewSorts) => {
|
||||
setTableSorts(viewSortsToSorts(viewSorts));
|
||||
}}
|
||||
>
|
||||
<StyledContainer>
|
||||
<TableContext.Provider
|
||||
value={{
|
||||
onColumnsChange: useRecoilCallback(() => (columns) => {
|
||||
setCurrentViewFields?.(columnDefinitionsToViewFields(columns));
|
||||
persistViewFields(columnDefinitionsToViewFields(columns));
|
||||
}),
|
||||
}}
|
||||
>
|
||||
<ViewBar
|
||||
optionsDropdownButton={<TableOptionsDropdown onImport={onImport} />}
|
||||
optionsDropdownScopeId="table-dropdown-option"
|
||||
/>
|
||||
<PersonTableEffect />
|
||||
<DataTableEffect
|
||||
getRequestResultKey="people"
|
||||
useGetRequest={useGetPeopleQuery}
|
||||
getRequestOptimisticEffectDefinition={
|
||||
getPeopleOptimisticEffectDefinition
|
||||
}
|
||||
filterDefinitionArray={personTableFilterDefinitions}
|
||||
sortDefinitionArray={personTableSortDefinitions}
|
||||
setContextMenuEntries={setContextMenuEntries}
|
||||
setActionBarEntries={setActionBarEntries}
|
||||
/>
|
||||
<DataTable
|
||||
updateEntityMutation={({
|
||||
variables,
|
||||
}: {
|
||||
variables: UpdateOnePersonMutationVariables;
|
||||
}) => updatePerson(variables)}
|
||||
/>
|
||||
</TableContext.Provider>
|
||||
</StyledContainer>
|
||||
</ViewScope>
|
||||
);
|
||||
};
|
||||
@ -7,14 +7,14 @@ import { tableColumnsScopedState } from '@/ui/data/data-table/states/tableColumn
|
||||
import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
|
||||
import { useView } from '@/views/hooks/useView';
|
||||
import { ViewType } from '@/views/types/ViewType';
|
||||
import { peopleAvailableFilters } from '~/pages/people/people-filters';
|
||||
import { peopleAvailableSorts } from '~/pages/people/people-sorts';
|
||||
import { personTableFilterDefinitions } from '~/pages/people/constants/personTableFilterDefinitions';
|
||||
import { personTableSortDefinitions } from '~/pages/people/constants/personTableSortDefinitions';
|
||||
|
||||
const PeopleTableEffect = () => {
|
||||
const {
|
||||
setAvailableSorts,
|
||||
setAvailableFilters,
|
||||
setAvailableFields,
|
||||
setAvailableSortDefinitions,
|
||||
setAvailableFilterDefinitions,
|
||||
setAvailableFieldDefinitions,
|
||||
setViewType,
|
||||
setViewObjectId,
|
||||
} = useView();
|
||||
@ -30,17 +30,17 @@ const PeopleTableEffect = () => {
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
setAvailableSorts?.(peopleAvailableSorts);
|
||||
setAvailableFilters?.(peopleAvailableFilters);
|
||||
setAvailableFields?.(peopleAvailableFieldDefinitions);
|
||||
setAvailableSortDefinitions?.(personTableSortDefinitions);
|
||||
setAvailableFilterDefinitions?.(personTableFilterDefinitions);
|
||||
setAvailableFieldDefinitions?.(peopleAvailableFieldDefinitions);
|
||||
setViewObjectId?.('person');
|
||||
setViewType?.(ViewType.Table);
|
||||
|
||||
setAvailableTableColumns(peopleAvailableFieldDefinitions);
|
||||
}, [
|
||||
setAvailableFields,
|
||||
setAvailableFilters,
|
||||
setAvailableSorts,
|
||||
setAvailableFieldDefinitions,
|
||||
setAvailableFilterDefinitions,
|
||||
setAvailableSortDefinitions,
|
||||
setAvailableTableColumns,
|
||||
setTableColumns,
|
||||
setViewObjectId,
|
||||
|
||||
Reference in New Issue
Block a user