On Company Show, in team section, I can delete a person (#1206)
* On Company Show, in team section, I can detach a person from a company Co-authored-by: v1b3m <vibenjamin6@gmail.com> Co-authored-by: RubensRafael <rubensrafael2@live.com> * On Company Show, in team section, I can detach a person from a company Co-authored-by: v1b3m <vibenjamin6@gmail.com> Co-authored-by: RubensRafael <rubensrafael2@live.com> * Temporary fix disconnect optional relations Co-authored-by: v1b3m <vibenjamin6@gmail.com> Co-authored-by: RubensRafael <rubensrafael2@live.com> * Refactor the PR logic Co-authored-by: v1b3m <vibenjamin6@gmail.com> Co-authored-by: RubensRafael <rubensrafael2@live.com> * On Company Show, in team section, I can delete a person Co-authored-by: Matheus <matheus_benini@hotmail.com> Co-authored-by: v1b3m <vibenjamin6@gmail.com> Co-authored-by: RubensRafael <rubensrafael2@live.com> * Fix styling Co-authored-by: Matheus <matheus_benini@hotmail.com> Co-authored-by: v1b3m <vibenjamin6@gmail.com> Co-authored-by: RubensRafael <rubensrafael2@live.com> * Add requested changes Co-authored-by: v1b3m <vibenjamin6@gmail.com> Co-authored-by: RubensRafael <rubensrafael2@live.com> * Refactor the dropdown Co-authored-by: v1b3m <vibenjamin6@gmail.com> Co-authored-by: RubensRafael <rubensrafael2@live.com> * Update styling Co-authored-by: v1b3m <vibenjamin6@gmail.com> Co-authored-by: Matheus <matheus_benini@hotmail.com> Co-authored-by: RubensRafael <rubensrafael2@live.com> --------- Co-authored-by: v1b3m <vibenjamin6@gmail.com> Co-authored-by: RubensRafael <rubensrafael2@live.com> Co-authored-by: Matheus <matheus_benini@hotmail.com> Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
@ -4,7 +4,7 @@ import { getOperationName } from '@apollo/client/utilities';
|
||||
import { useTheme } from '@emotion/react';
|
||||
import styled from '@emotion/styled';
|
||||
import { autoUpdate, flip, offset, useFloating } from '@floating-ui/react';
|
||||
import { IconDotsVertical, IconLinkOff } from '@tabler/icons-react';
|
||||
import { IconDotsVertical, IconLinkOff, IconTrash } from '@tabler/icons-react';
|
||||
|
||||
import { IconButton } from '@/ui/button/components/IconButton';
|
||||
import { DropdownMenu } from '@/ui/dropdown/components/DropdownMenu';
|
||||
@ -12,7 +12,11 @@ import { DropdownMenuItemsContainer } from '@/ui/dropdown/components/DropdownMen
|
||||
import { DropdownMenuSelectableItem } from '@/ui/dropdown/components/DropdownMenuSelectableItem';
|
||||
import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
|
||||
import { Avatar } from '@/users/components/Avatar';
|
||||
import { Person, useUpdateOnePersonMutation } from '~/generated/graphql';
|
||||
import {
|
||||
Person,
|
||||
useDeleteManyPersonMutation,
|
||||
useUpdateOnePersonMutation,
|
||||
} from '~/generated/graphql';
|
||||
|
||||
import { GET_PEOPLE } from '../graphql/queries/getPeople';
|
||||
|
||||
@ -68,6 +72,10 @@ const StyledJobTitle = styled.div`
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledRemoveOption = styled.div`
|
||||
color: ${({ theme }) => theme.color.red};
|
||||
`;
|
||||
|
||||
export function PeopleCard({
|
||||
person,
|
||||
hasBottomBorder = true,
|
||||
@ -76,6 +84,8 @@ export function PeopleCard({
|
||||
const [isHovered, setIsHovered] = useState(false);
|
||||
const [isOptionsOpen, setIsOptionsOpen] = useState(false);
|
||||
const [updatePerson] = useUpdateOnePersonMutation();
|
||||
const [deletePerson] = useDeleteManyPersonMutation();
|
||||
|
||||
const { refs, floatingStyles } = useFloating({
|
||||
strategy: 'absolute',
|
||||
middleware: [offset(10), flip()],
|
||||
@ -126,6 +136,15 @@ export function PeopleCard({
|
||||
});
|
||||
}
|
||||
|
||||
function handleDeletePerson() {
|
||||
deletePerson({
|
||||
variables: {
|
||||
ids: person.id,
|
||||
},
|
||||
refetchQueries: [getOperationName(GET_PEOPLE) ?? ''],
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<StyledCard
|
||||
isHovered={isHovered}
|
||||
@ -159,6 +178,14 @@ export function PeopleCard({
|
||||
<IconButton icon={<IconLinkOff size={14} />} size="small" />
|
||||
Detach relation
|
||||
</DropdownMenuSelectableItem>
|
||||
<DropdownMenuSelectableItem onClick={handleDeletePerson}>
|
||||
<IconButton
|
||||
icon={<IconTrash size={14} />}
|
||||
size="small"
|
||||
textColor="danger"
|
||||
/>
|
||||
<StyledRemoveOption>Delete person</StyledRemoveOption>
|
||||
</DropdownMenuSelectableItem>
|
||||
</DropdownMenuItemsContainer>
|
||||
</DropdownMenu>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user