mukeshs/twenty_crm
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

1721/feature/drag and drop favorites (#2097)

Browse Source 
* 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
2023-10-19 16:35:23 -05:00
committed by GitHub
parent f6b5943fc6
commit 08772b4456
14 changed files with 341 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
front/src/modules/favorites/components/Favorites.tsx
View File

@ -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>
);
};