1721/feature/drag and drop favorites (#2097)
* prisma schema updated: added index in favorite * update abilitiy added for favorite * update one favorite resolver added * update on favorite mutation added * updateFavoriteOrder added * Draglist added in favorite * nav item convert to div from button: because it was not working dragable with button * changed index to position * position added in getFavorites query * added recoil state for favorites * reordering updated according to new method * Use accurate type --------- Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Abhishek Thory
@ -395,6 +395,7 @@ export type Favorite = {
|
||||
id: Scalars['ID']['output'];
|
||||
person?: Maybe<Person>;
|
||||
personId?: Maybe<Scalars['String']['output']>;
|
||||
position: Scalars['Float']['output'];
|
||||
workspaceId?: Maybe<Scalars['String']['output']>;
|
||||
workspaceMember?: Maybe<WorkspaceMember>;
|
||||
workspaceMemberId?: Maybe<Scalars['String']['output']>;
|
||||
|
||||
@ -1226,6 +1226,7 @@ export type Favorite = {
|
||||
id: Scalars['ID'];
|
||||
person?: Maybe<Person>;
|
||||
personId?: Maybe<Scalars['String']>;
|
||||
position: Scalars['Float'];
|
||||
workspaceId?: Maybe<Scalars['String']>;
|
||||
workspaceMember?: Maybe<WorkspaceMember>;
|
||||
workspaceMemberId?: Maybe<Scalars['String']>;
|
||||
@ -1247,16 +1248,24 @@ export type FavoriteListRelationFilter = {
|
||||
|
||||
export type FavoriteMutationForCompanyArgs = {
|
||||
companyId: Scalars['String'];
|
||||
position: Scalars['Float'];
|
||||
};
|
||||
|
||||
export type FavoriteMutationForPersonArgs = {
|
||||
personId: Scalars['String'];
|
||||
position: Scalars['Float'];
|
||||
};
|
||||
|
||||
export type FavoriteOrderByRelationAggregateInput = {
|
||||
_count?: InputMaybe<SortOrder>;
|
||||
};
|
||||
|
||||
export type FavoriteUpdateInput = {
|
||||
id?: InputMaybe<Scalars['String']>;
|
||||
position?: InputMaybe<Scalars['Float']>;
|
||||
workspaceId?: InputMaybe<Scalars['String']>;
|
||||
};
|
||||
|
||||
export type FavoriteUpdateManyWithoutCompanyNestedInput = {
|
||||
connect?: InputMaybe<Array<FavoriteWhereUniqueInput>>;
|
||||
disconnect?: InputMaybe<Array<FavoriteWhereUniqueInput>>;
|
||||
@ -1282,6 +1291,7 @@ export type FavoriteWhereInput = {
|
||||
companyId?: InputMaybe<StringNullableFilter>;
|
||||
id?: InputMaybe<StringFilter>;
|
||||
personId?: InputMaybe<StringNullableFilter>;
|
||||
position?: InputMaybe<FloatFilter>;
|
||||
workspaceId?: InputMaybe<StringNullableFilter>;
|
||||
workspaceMemberId?: InputMaybe<StringNullableFilter>;
|
||||
};
|
||||
@ -1413,6 +1423,7 @@ export type Mutation = {
|
||||
signUp: LoginToken;
|
||||
updateOneActivity: Activity;
|
||||
updateOneCompany?: Maybe<Company>;
|
||||
updateOneFavorites: Favorite;
|
||||
updateOneField: Field;
|
||||
updateOneObject: Object;
|
||||
updateOnePerson?: Maybe<Person>;
|
||||
@ -1637,6 +1648,12 @@ export type MutationUpdateOneCompanyArgs = {
|
||||
};
|
||||
|
||||
|
||||
export type MutationUpdateOneFavoritesArgs = {
|
||||
data: FavoriteUpdateInput;
|
||||
where: FavoriteWhereUniqueInput;
|
||||
};
|
||||
|
||||
|
||||
export type MutationUpdateOnePersonArgs = {
|
||||
data: PersonUpdateInput;
|
||||
where: PersonWhereUniqueInput;
|
||||
@ -3854,10 +3871,18 @@ export type InsertPersonFavoriteMutationVariables = Exact<{
|
||||
|
||||
export type InsertPersonFavoriteMutation = { __typename?: 'Mutation', createFavoriteForPerson: { __typename?: 'Favorite', id: string, person?: { __typename?: 'Person', id: string, firstName?: string | null, lastName?: string | null, displayName: string } | null } };
|
||||
|
||||
export type UpdateOneFavoriteMutationVariables = Exact<{
|
||||
data: FavoriteUpdateInput;
|
||||
where: FavoriteWhereUniqueInput;
|
||||
}>;
|
||||
|
||||
|
||||
export type UpdateOneFavoriteMutation = { __typename?: 'Mutation', updateOneFavorites: { __typename?: 'Favorite', id: string, person?: { __typename?: 'Person', id: string, firstName?: string | null, lastName?: string | null, avatarUrl?: string | null } | null, company?: { __typename?: 'Company', id: string, name: string, domainName: string, accountOwner?: { __typename?: 'User', id: string, displayName: string, avatarUrl?: string | null } | null } | null } };
|
||||
|
||||
export type GetFavoritesQueryVariables = Exact<{ [key: string]: never; }>;
|
||||
|
||||
|
||||
export type GetFavoritesQuery = { __typename?: 'Query', findFavorites: Array<{ __typename?: 'Favorite', id: string, person?: { __typename?: 'Person', id: string, firstName?: string | null, lastName?: string | null, avatarUrl?: string | null } | null, company?: { __typename?: 'Company', id: string, name: string, domainName: string, accountOwner?: { __typename?: 'User', id: string, displayName: string, avatarUrl?: string | null } | null } | null }> };
|
||||
export type GetFavoritesQuery = { __typename?: 'Query', findFavorites: Array<{ __typename?: 'Favorite', id: string, position: number, person?: { __typename?: 'Person', id: string, firstName?: string | null, lastName?: string | null, avatarUrl?: string | null } | null, company?: { __typename?: 'Company', id: string, name: string, domainName: string, accountOwner?: { __typename?: 'User', id: string, displayName: string, avatarUrl?: string | null } | null } | null }> };
|
||||
|
||||
export type BasePersonFieldsFragmentFragment = { __typename?: 'Person', id: string, phone?: string | null, email?: string | null, city?: string | null, firstName?: string | null, lastName?: string | null, displayName: string, avatarUrl?: string | null, createdAt: string };
|
||||
|
||||
@ -5589,10 +5614,61 @@ export function useInsertPersonFavoriteMutation(baseOptions?: Apollo.MutationHoo
|
||||
export type InsertPersonFavoriteMutationHookResult = ReturnType<typeof useInsertPersonFavoriteMutation>;
|
||||
export type InsertPersonFavoriteMutationResult = Apollo.MutationResult<InsertPersonFavoriteMutation>;
|
||||
export type InsertPersonFavoriteMutationOptions = Apollo.BaseMutationOptions<InsertPersonFavoriteMutation, InsertPersonFavoriteMutationVariables>;
|
||||
export const UpdateOneFavoriteDocument = gql`
|
||||
mutation UpdateOneFavorite($data: FavoriteUpdateInput!, $where: FavoriteWhereUniqueInput!) {
|
||||
updateOneFavorites(data: $data, where: $where) {
|
||||
id
|
||||
person {
|
||||
id
|
||||
firstName
|
||||
lastName
|
||||
avatarUrl
|
||||
}
|
||||
company {
|
||||
id
|
||||
name
|
||||
domainName
|
||||
accountOwner {
|
||||
id
|
||||
displayName
|
||||
avatarUrl
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
export type UpdateOneFavoriteMutationFn = Apollo.MutationFunction<UpdateOneFavoriteMutation, UpdateOneFavoriteMutationVariables>;
|
||||
|
||||
/**
|
||||
* __useUpdateOneFavoriteMutation__
|
||||
*
|
||||
* To run a mutation, you first call `useUpdateOneFavoriteMutation` within a React component and pass it any options that fit your needs.
|
||||
* When your component renders, `useUpdateOneFavoriteMutation` returns a tuple that includes:
|
||||
* - A mutate function that you can call at any time to execute the mutation
|
||||
* - An object with fields that represent the current status of the mutation's execution
|
||||
*
|
||||
* @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
|
||||
*
|
||||
* @example
|
||||
* const [updateOneFavoriteMutation, { data, loading, error }] = useUpdateOneFavoriteMutation({
|
||||
* variables: {
|
||||
* data: // value for 'data'
|
||||
* where: // value for 'where'
|
||||
* },
|
||||
* });
|
||||
*/
|
||||
export function useUpdateOneFavoriteMutation(baseOptions?: Apollo.MutationHookOptions<UpdateOneFavoriteMutation, UpdateOneFavoriteMutationVariables>) {
|
||||
const options = {...defaultOptions, ...baseOptions}
|
||||
return Apollo.useMutation<UpdateOneFavoriteMutation, UpdateOneFavoriteMutationVariables>(UpdateOneFavoriteDocument, options);
|
||||
}
|
||||
export type UpdateOneFavoriteMutationHookResult = ReturnType<typeof useUpdateOneFavoriteMutation>;
|
||||
export type UpdateOneFavoriteMutationResult = Apollo.MutationResult<UpdateOneFavoriteMutation>;
|
||||
export type UpdateOneFavoriteMutationOptions = Apollo.BaseMutationOptions<UpdateOneFavoriteMutation, UpdateOneFavoriteMutationVariables>;
|
||||
export const GetFavoritesDocument = gql`
|
||||
query GetFavorites {
|
||||
findFavorites {
|
||||
id
|
||||
position
|
||||
person {
|
||||
id
|
||||
firstName
|
||||
|
||||
@ -1,11 +1,17 @@
|
||||
import styled from '@emotion/styled';
|
||||
import { useRecoilState } from 'recoil';
|
||||
|
||||
import { DraggableItem } from '@/ui/layout/draggable-list/components/DraggableItem';
|
||||
import { DraggableList } from '@/ui/layout/draggable-list/components/DraggableList';
|
||||
import NavItem from '@/ui/navigation/navbar/components/NavItem';
|
||||
import NavTitle from '@/ui/navigation/navbar/components/NavTitle';
|
||||
import { Avatar } from '@/users/components/Avatar';
|
||||
import { useGetFavoritesQuery } from '~/generated/graphql';
|
||||
import { getLogoUrlFromDomainName } from '~/utils';
|
||||
|
||||
import { useFavorites } from '../hooks/useFavorites';
|
||||
import { favoritesState } from '../states/favoritesState';
|
||||
|
||||
const StyledContainer = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -14,46 +20,94 @@ const StyledContainer = styled.div`
|
||||
`;
|
||||
|
||||
export const Favorites = () => {
|
||||
const { data } = useGetFavoritesQuery();
|
||||
const favorites = data?.findFavorites;
|
||||
const [favorites, setFavorites] = useRecoilState(favoritesState);
|
||||
const { handleReorderFavorite } = useFavorites();
|
||||
|
||||
useGetFavoritesQuery({
|
||||
onCompleted: (data) =>
|
||||
setFavorites(
|
||||
data?.findFavorites.map((favorite) => {
|
||||
return {
|
||||
id: favorite.id,
|
||||
person: favorite.person
|
||||
? {
|
||||
id: favorite.person.id,
|
||||
firstName: favorite.person.firstName,
|
||||
lastName: favorite.person.lastName,
|
||||
avatarUrl: favorite.person.avatarUrl,
|
||||
}
|
||||
: undefined,
|
||||
company: favorite.company
|
||||
? {
|
||||
id: favorite.company.id,
|
||||
name: favorite.company.name,
|
||||
domainName: favorite.company.domainName,
|
||||
}
|
||||
: undefined,
|
||||
position: favorite.position,
|
||||
};
|
||||
}) ?? [],
|
||||
),
|
||||
});
|
||||
|
||||
if (!favorites || favorites.length === 0) return <></>;
|
||||
|
||||
return (
|
||||
<StyledContainer>
|
||||
<NavTitle label="Favorites" />
|
||||
{favorites.map(
|
||||
({ id, person, company }) =>
|
||||
(person && (
|
||||
<NavItem
|
||||
key={id}
|
||||
label={`${person.firstName} ${person.lastName}`}
|
||||
Icon={() => (
|
||||
<Avatar
|
||||
colorId={person.id}
|
||||
avatarUrl={person.avatarUrl ?? ''}
|
||||
type="rounded"
|
||||
placeholder={`${person.firstName} ${person.lastName}`}
|
||||
<DraggableList
|
||||
onDragEnd={handleReorderFavorite}
|
||||
draggableItems={
|
||||
<>
|
||||
{favorites.map((favorite, index) => {
|
||||
const { id, person, company } = favorite;
|
||||
return (
|
||||
<DraggableItem
|
||||
key={id}
|
||||
draggableId={id}
|
||||
index={index}
|
||||
itemComponent={
|
||||
<>
|
||||
{person && (
|
||||
<NavItem
|
||||
key={id}
|
||||
label={`${person.firstName} ${person.lastName}`}
|
||||
Icon={() => (
|
||||
<Avatar
|
||||
colorId={person.id}
|
||||
avatarUrl={person.avatarUrl ?? ''}
|
||||
type="rounded"
|
||||
placeholder={`${person.firstName} ${person.lastName}`}
|
||||
/>
|
||||
)}
|
||||
to={`/person/${person.id}`}
|
||||
/>
|
||||
)}
|
||||
{company && (
|
||||
<NavItem
|
||||
key={id}
|
||||
label={company.name}
|
||||
Icon={() => (
|
||||
<Avatar
|
||||
avatarUrl={
|
||||
getLogoUrlFromDomainName(company.domainName) ??
|
||||
''
|
||||
}
|
||||
type="squared"
|
||||
placeholder={company.name}
|
||||
/>
|
||||
)}
|
||||
to={`/companies/${company.id}`}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
to={`/person/${person.id}`}
|
||||
/>
|
||||
)) ??
|
||||
(company && (
|
||||
<NavItem
|
||||
key={id}
|
||||
label={company.name}
|
||||
Icon={() => (
|
||||
<Avatar
|
||||
avatarUrl={getLogoUrlFromDomainName(company.domainName) ?? ''}
|
||||
type="squared"
|
||||
placeholder={company.name}
|
||||
/>
|
||||
)}
|
||||
to={`/companies/${company.id}`}
|
||||
/>
|
||||
)),
|
||||
)}
|
||||
);
|
||||
})}
|
||||
</>
|
||||
}
|
||||
/>
|
||||
</StyledContainer>
|
||||
);
|
||||
};
|
||||
|
||||
@ -0,0 +1,28 @@
|
||||
import { gql } from '@apollo/client';
|
||||
|
||||
export const UPDATE_FAVORITE = gql`
|
||||
mutation UpdateOneFavorite(
|
||||
$data: FavoriteUpdateInput!
|
||||
$where: FavoriteWhereUniqueInput!
|
||||
) {
|
||||
updateOneFavorites(data: $data, where: $where) {
|
||||
id
|
||||
person {
|
||||
id
|
||||
firstName
|
||||
lastName
|
||||
avatarUrl
|
||||
}
|
||||
company {
|
||||
id
|
||||
name
|
||||
domainName
|
||||
accountOwner {
|
||||
id
|
||||
displayName
|
||||
avatarUrl
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
@ -4,6 +4,7 @@ export const GET_FAVORITES = gql`
|
||||
query GetFavorites {
|
||||
findFavorites {
|
||||
id
|
||||
position
|
||||
person {
|
||||
id
|
||||
firstName
|
||||
|
||||
@ -1,25 +1,34 @@
|
||||
import { getOperationName } from '@apollo/client/utilities';
|
||||
import { OnDragEndResponder } from '@hello-pangea/dnd';
|
||||
import { useRecoilState } from 'recoil';
|
||||
|
||||
import { GET_COMPANY } from '@/companies/graphql/queries/getCompany';
|
||||
import { GET_PERSON } from '@/people/graphql/queries/getPerson';
|
||||
import {
|
||||
Favorite,
|
||||
useDeleteFavoriteMutation,
|
||||
useInsertCompanyFavoriteMutation,
|
||||
useInsertPersonFavoriteMutation,
|
||||
useUpdateOneFavoriteMutation,
|
||||
} from '~/generated/graphql';
|
||||
|
||||
import { GET_FAVORITES } from '../graphql/queries/getFavorites';
|
||||
import { favoritesState } from '../states/favoritesState';
|
||||
|
||||
export const useFavorites = () => {
|
||||
const [favorites, setFavorites] = useRecoilState(favoritesState);
|
||||
|
||||
const [insertCompanyFavoriteMutation] = useInsertCompanyFavoriteMutation();
|
||||
const [insertPersonFavoriteMutation] = useInsertPersonFavoriteMutation();
|
||||
const [deleteFavoriteMutation] = useDeleteFavoriteMutation();
|
||||
const [updateOneFavoritesMutation] = useUpdateOneFavoriteMutation();
|
||||
|
||||
const insertCompanyFavorite = (companyId: string) => {
|
||||
insertCompanyFavoriteMutation({
|
||||
variables: {
|
||||
data: {
|
||||
companyId,
|
||||
position: favorites.length + 1,
|
||||
},
|
||||
},
|
||||
refetchQueries: [
|
||||
@ -34,6 +43,7 @@ export const useFavorites = () => {
|
||||
variables: {
|
||||
data: {
|
||||
personId,
|
||||
position: favorites.length + 1,
|
||||
},
|
||||
},
|
||||
refetchQueries: [
|
||||
@ -43,6 +53,25 @@ export const useFavorites = () => {
|
||||
});
|
||||
};
|
||||
|
||||
const updateFavoritePosition = async (
|
||||
favorites: Pick<Favorite, 'id' | 'position'>,
|
||||
) => {
|
||||
await updateOneFavoritesMutation({
|
||||
variables: {
|
||||
data: {
|
||||
position: favorites?.position,
|
||||
},
|
||||
where: {
|
||||
id: favorites.id,
|
||||
},
|
||||
},
|
||||
refetchQueries: [
|
||||
getOperationName(GET_FAVORITES) ?? '',
|
||||
getOperationName(GET_PERSON) ?? '',
|
||||
getOperationName(GET_COMPANY) ?? '',
|
||||
],
|
||||
});
|
||||
};
|
||||
const deleteCompanyFavorite = (companyId: string) => {
|
||||
deleteFavoriteMutation({
|
||||
variables: {
|
||||
@ -75,10 +104,37 @@ export const useFavorites = () => {
|
||||
});
|
||||
};
|
||||
|
||||
const computeNewPosition = (destIndex: number) => {
|
||||
if (destIndex === 0) {
|
||||
return favorites[destIndex].position / 2;
|
||||
}
|
||||
|
||||
if (destIndex === favorites.length - 1) {
|
||||
return favorites[destIndex].position + 1;
|
||||
}
|
||||
return (
|
||||
(favorites[destIndex - 1].position + favorites[destIndex].position) / 2
|
||||
);
|
||||
};
|
||||
|
||||
const handleReorderFavorite: OnDragEndResponder = (result) => {
|
||||
if (!result.destination || !favorites) {
|
||||
return;
|
||||
}
|
||||
const newPosition = computeNewPosition(result.destination.index);
|
||||
|
||||
const reorderFavorites = Array.from(favorites);
|
||||
const [removed] = reorderFavorites.splice(result.source.index, 1);
|
||||
const removedFav = { ...removed, position: newPosition };
|
||||
reorderFavorites.splice(result.destination.index, 0, removedFav);
|
||||
setFavorites(reorderFavorites);
|
||||
updateFavoritePosition(removedFav);
|
||||
};
|
||||
return {
|
||||
insertCompanyFavorite,
|
||||
insertPersonFavorite,
|
||||
deleteCompanyFavorite,
|
||||
deletePersonFavorite,
|
||||
handleReorderFavorite,
|
||||
};
|
||||
};
|
||||
|
||||
16
front/src/modules/favorites/states/favoritesState.ts
Normal file
16
front/src/modules/favorites/states/favoritesState.ts
Normal file
@ -0,0 +1,16 @@
|
||||
import { atom } from 'recoil';
|
||||
|
||||
import { Company, Favorite, Person } from '~/generated/graphql';
|
||||
|
||||
export const favoritesState = atom<
|
||||
Array<
|
||||
Pick<Favorite, 'id' | 'position'> & {
|
||||
company?: Pick<Company, 'id' | 'name' | 'domainName'>;
|
||||
} & {
|
||||
person?: Pick<Person, 'id' | 'firstName' | 'lastName' | 'avatarUrl'>;
|
||||
}
|
||||
>
|
||||
>({
|
||||
key: 'favoritesState',
|
||||
default: [],
|
||||
});
|
||||
@ -27,7 +27,7 @@ type StyledItemProps = {
|
||||
soon?: boolean;
|
||||
};
|
||||
|
||||
const StyledItem = styled.button<StyledItemProps>`
|
||||
const StyledItem = styled.div<StyledItemProps>`
|
||||
align-items: center;
|
||||
background: ${(props) =>
|
||||
props.active ? props.theme.background.transparent.light : 'inherit'};
|
||||
|
||||
Reference in New Issue
Block a user