Fix/company team crud (#2614)
* Fixed basePathToShowPage * Fixed company team list * Fixed : create, update, delete and detach people from company.
This commit is contained in:
Lucas Bordeau
@ -1,8 +1,11 @@
|
||||
import { useState } from 'react';
|
||||
import { useMutation, useQuery } from '@apollo/client';
|
||||
import { getOperationName } from '@apollo/client/utilities';
|
||||
import styled from '@emotion/styled';
|
||||
import { flip, offset, useFloating } from '@floating-ui/react';
|
||||
import { v4 } from 'uuid';
|
||||
|
||||
import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
|
||||
import { IconPlus } from '@/ui/display/icon';
|
||||
import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
|
||||
import { RelationPickerHotkeyScope } from '@/ui/input/relation-picker/types/RelationPickerHotkeyScope';
|
||||
@ -62,23 +65,43 @@ export const AddPersonToCompany = ({
|
||||
goBackToPreviousHotkeyScope,
|
||||
} = usePreviousHotkeyScope();
|
||||
|
||||
const handlePersonSelected =
|
||||
(companyId: string) => async (newPerson: any | null) => {
|
||||
if (newPerson) {
|
||||
// await updatePerson({
|
||||
// variables: {
|
||||
// where: {
|
||||
// id: newPerson.id,
|
||||
// },
|
||||
// data: {
|
||||
// company: { connect: { id: companyId } },
|
||||
// },
|
||||
// },
|
||||
// refetchQueries: [getOperationName(GET_PEOPLE) ?? ''],
|
||||
// });
|
||||
handleClosePicker();
|
||||
}
|
||||
};
|
||||
// TODO: refactor with useObjectMetadataItem V2 with typed hooks
|
||||
const { findManyQuery, updateOneMutation, createOneMutation } =
|
||||
useObjectMetadataItem({
|
||||
objectNameSingular: 'person',
|
||||
});
|
||||
|
||||
const { data: peopleNotInCompany } = useQuery(findManyQuery, {
|
||||
variables: {
|
||||
filter: {
|
||||
companyId: {
|
||||
neq: companyId,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const [updatePerson] = useMutation(updateOneMutation);
|
||||
const [createPerson] = useMutation(createOneMutation);
|
||||
|
||||
const handlePersonSelected = async ({
|
||||
selectedPersonId,
|
||||
companyId,
|
||||
}: {
|
||||
selectedPersonId: string;
|
||||
companyId: string | null;
|
||||
}) => {
|
||||
await updatePerson({
|
||||
variables: {
|
||||
idToUpdate: selectedPersonId,
|
||||
input: {
|
||||
companyId: companyId,
|
||||
},
|
||||
},
|
||||
refetchQueries: [getOperationName(findManyQuery) ?? ''],
|
||||
});
|
||||
handleClosePicker();
|
||||
};
|
||||
|
||||
const handleClosePicker = () => {
|
||||
if (isDropdownOpen) {
|
||||
@ -88,31 +111,44 @@ export const AddPersonToCompany = ({
|
||||
};
|
||||
|
||||
const handleOpenPicker = () => {
|
||||
if (!isDropdownOpen) {
|
||||
setIsDropdownOpen(true);
|
||||
setHotkeyScopeAndMemorizePreviousScope(
|
||||
RelationPickerHotkeyScope.RelationPicker,
|
||||
);
|
||||
}
|
||||
// TODO: TEMPORARY - example to implement when the picker is back
|
||||
handleCreatePerson({
|
||||
firstValue: 'John',
|
||||
secondValue: 'Doe',
|
||||
});
|
||||
// handlePersonSelected({
|
||||
// companyId,
|
||||
// selectedPersonId: peopleNotInCompany.people.edges[0].node.id,
|
||||
// });
|
||||
// if (!isDropdownOpen) {
|
||||
// setIsDropdownOpen(true);
|
||||
// setHotkeyScopeAndMemorizePreviousScope(
|
||||
// RelationPickerHotkeyScope.RelationPicker,
|
||||
// );
|
||||
// }
|
||||
};
|
||||
|
||||
const handleInputKeyDown = async ({
|
||||
const handleCreatePerson = async ({
|
||||
firstValue,
|
||||
secondValue,
|
||||
}: FieldDoubleText) => {
|
||||
if (!firstValue && !secondValue) return;
|
||||
const newPersonId = v4();
|
||||
// await insertOnePerson({
|
||||
// variables: {
|
||||
// data: {
|
||||
// company: { connect: { id: companyId } },
|
||||
// id: newPersonId,
|
||||
// firstName: firstValue,
|
||||
// lastName: secondValue,
|
||||
// },
|
||||
// },
|
||||
// refetchQueries: [getOperationName(GET_PEOPLE) ?? ''],
|
||||
// });
|
||||
|
||||
await createPerson({
|
||||
variables: {
|
||||
input: {
|
||||
companyId: companyId,
|
||||
id: newPersonId,
|
||||
name: {
|
||||
firstName: firstValue,
|
||||
lastName: secondValue,
|
||||
},
|
||||
},
|
||||
},
|
||||
refetchQueries: [getOperationName(findManyQuery) ?? ''],
|
||||
});
|
||||
|
||||
setIsCreationDropdownOpen(false);
|
||||
};
|
||||
|
||||
@ -136,7 +172,7 @@ export const AddPersonToCompany = ({
|
||||
firstValuePlaceholder="First Name"
|
||||
secondValuePlaceholder="Last Name"
|
||||
onClickOutside={handleEscape}
|
||||
onEnter={handleInputKeyDown}
|
||||
onEnter={handleCreatePerson}
|
||||
onEscape={handleEscape}
|
||||
hotkeyScope={RelationPickerHotkeyScope.RelationPicker}
|
||||
/>
|
||||
|
||||
@ -1,8 +1,11 @@
|
||||
import { useQuery } from '@apollo/client';
|
||||
import styled from '@emotion/styled';
|
||||
import { isNonEmptyArray } from '@sniptt/guards';
|
||||
|
||||
import { Company } from '@/companies/types/Company';
|
||||
import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
|
||||
import { mapPaginatedObjectsToObjects } from '@/object-record/utils/mapPaginatedObjectsToObjects';
|
||||
import { PeopleCard } from '@/people/components/PeopleCard';
|
||||
import { Person } from '@/people/types/Person';
|
||||
|
||||
import { AddPersonToCompany } from './AddPersonToCompany';
|
||||
|
||||
@ -43,37 +46,44 @@ const StyledTitle = styled.div`
|
||||
line-height: ${({ theme }) => theme.text.lineHeight.lg};
|
||||
`;
|
||||
|
||||
export const CompanyTeam = ({ company }: CompanyTeamProps) => {
|
||||
// const { data } = useGetPeopleQuery({
|
||||
// variables: {
|
||||
// orderBy: [],
|
||||
// where: {
|
||||
// companyId: {
|
||||
// equals: company.id,
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
// });
|
||||
const data = {
|
||||
people: [],
|
||||
};
|
||||
export const CompanyTeam = ({ company }: { company: any }) => {
|
||||
const { findManyQuery } = useObjectMetadataItem({
|
||||
objectNameSingular: 'person',
|
||||
});
|
||||
|
||||
const peopleIds = data?.people?.map(({ id }) => id);
|
||||
const { data } = useQuery(findManyQuery, {
|
||||
variables: {
|
||||
filter: {
|
||||
companyId: {
|
||||
eq: company.id,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const people = mapPaginatedObjectsToObjects({
|
||||
objectNamePlural: 'people',
|
||||
pagedObjects: data ?? [],
|
||||
});
|
||||
|
||||
const peopleIds = people.map((person) => person.id);
|
||||
|
||||
const hasPeople = isNonEmptyArray(peopleIds);
|
||||
|
||||
return (
|
||||
<>
|
||||
{Boolean(data?.people?.length) && (
|
||||
{hasPeople && (
|
||||
<StyledContainer>
|
||||
<StyledTitleContainer>
|
||||
<StyledTitle>Team</StyledTitle>
|
||||
<AddPersonToCompany companyId={company.id} peopleIds={peopleIds} />
|
||||
</StyledTitleContainer>
|
||||
<StyledListContainer>
|
||||
{data?.people?.map((person: Person, id) => (
|
||||
{people.map((person: any) => (
|
||||
<PeopleCard
|
||||
key={person.id}
|
||||
person={person}
|
||||
hasBottomBorder={id !== data.people.length - 1}
|
||||
hasBottomBorder={person.id !== people.length - 1}
|
||||
/>
|
||||
))}
|
||||
</StyledListContainer>
|
||||
|
||||
Reference in New Issue
Block a user