admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Integrate favorites into release (#1168)

Browse Source
This commit is contained in:
Charles Bochet
2023-08-11 00:42:58 +02:00
committed by GitHub
parent 0490c6b6ea
commit 285bf773de
8 changed files with 79 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
front/src/AppNavbar.tsx
View File

@ -57,7 +57,6 @@ export function AppNavbar() {
active={currentPath === '/tasks'} active={currentPath === '/tasks'}
icon={<IconCheckbox size={theme.icon.size.md} />} icon={<IconCheckbox size={theme.icon.size.md} />}
/> />
<NavTitle label="Favorite" />
<Favorites /> <Favorites />
<NavTitle label="Workspace" /> <NavTitle label="Workspace" />
<NavItem <NavItem

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

@ -1,11 +1,12 @@
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import NavItem from '@/ui/navbar/components/NavItem'; import NavItem from '@/ui/navbar/components/NavItem';
import NavTitle from '@/ui/navbar/components/NavTitle';
import { Avatar } from '@/users/components/Avatar'; import { Avatar } from '@/users/components/Avatar';
import { useGetFavoritesQuery } from '~/generated/graphql'; import { useGetFavoritesQuery } from '~/generated/graphql';
import { getLogoUrlFromDomainName } from '~/utils'; import { getLogoUrlFromDomainName } from '~/utils';
const Wrapper = styled.div` const StyledContainer = styled.div`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow-x: auto; overflow-x: auto;
@ -16,48 +17,46 @@ export function Favorites() {
const { data } = useGetFavoritesQuery(); const { data } = useGetFavoritesQuery();
const favorites = data?.findFavorites; const favorites = data?.findFavorites;
if (!favorites) return <></>; if (!favorites || favorites.length === 0) return <></>;
return ( return (
<Wrapper> <StyledContainer>
{favorites && <NavTitle label="Favorites" />
favorites.map( {favorites.map(
({ id, person, company }) => ({ id, person, company }) =>
(person && ( (person && (
<NavItem <NavItem
key={id} key={id}
label={`${person.firstName} ${person.lastName}`} label={`${person.firstName} ${person.lastName}`}
icon={ icon={
<Avatar <Avatar
key={id} key={id}
avatarUrl={person.avatarUrl ?? ''} avatarUrl={person.avatarUrl ?? ''}
type="rounded" type="rounded"
placeholder={`${person.firstName} ${person.lastName}`} placeholder={`${person.firstName} ${person.lastName}`}
size="md" size="md"
/> />
} }
to={`/person/${person.id}`} to={`/person/${person.id}`}
/> />
)) || )) ||
(company && ( (company && (
<NavItem <NavItem
key={id} key={id}
label={company.name} label={company.name}
icon={ icon={
<Avatar <Avatar
key={id} key={id}
avatarUrl={ avatarUrl={getLogoUrlFromDomainName(company.domainName) ?? ''}
getLogoUrlFromDomainName(company.domainName) ?? '' type="squared"
} placeholder={company.name}
type="squared" size="md"
placeholder={company.name} />
size="md" }
/> to={`/companies/${company.id}`}
} />
to={`/companies/${company.id}`} )),
/> )}
)), </StyledContainer>
)}
</Wrapper>
); );
} }

19
front/src/modules/ui/button/components/IconButton.tsx
View File

@ -5,20 +5,21 @@ export type IconButtonVariant = 'transparent' | 'border' | 'shadow' | 'white';
export type IconButtonSize = 'large' | 'medium' | 'small'; export type IconButtonSize = 'large' | 'medium' | 'small';
export type IconButtonFontColor = 'primary' | 'secondary' | 'tertiary'; export type IconButtonFontColor =
| 'primary'
export type IconButtonAccent = 'regular' | 'red'; | 'secondary'
| 'tertiary'
| 'danger';
export type ButtonProps = { export type ButtonProps = {
icon?: React.ReactNode; icon?: React.ReactNode;
variant?: IconButtonVariant; variant?: IconButtonVariant;
size?: IconButtonSize; size?: IconButtonSize;
textColor?: IconButtonFontColor; textColor?: IconButtonFontColor;
accent?: IconButtonAccent;
} & React.ComponentProps<'button'>; } & React.ComponentProps<'button'>;
const StyledIconButton = styled.button< const StyledIconButton = styled.button<
Pick<ButtonProps, 'variant' | 'size' | 'textColor' | 'accent'> Pick<ButtonProps, 'variant' | 'size' | 'textColor'>
>` >`
align-items: center; align-items: center;
background: ${({ theme, variant }) => { background: ${({ theme, variant }) => {
@ -69,13 +70,13 @@ const StyledIconButton = styled.button<
return 'none'; return 'none';
} }
}}; }};
color: ${({ theme, disabled, textColor, accent }) => { color: ${({ theme, disabled, textColor }) => {
if (disabled) { if (disabled) {
return theme.font.color.extraLight; return theme.font.color.extraLight;
} }
return accent return textColor === 'danger'
? theme.color[accent] ? theme.color.red
: theme.font.color[textColor ?? 'secondary']; : theme.font.color[textColor ?? 'secondary'];
}}; }};
cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')}; cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
@ -126,7 +127,6 @@ export function IconButton({
size = 'medium', size = 'medium',
textColor = 'tertiary', textColor = 'tertiary',
disabled = false, disabled = false,
accent = 'regular',
...props ...props
}: ButtonProps) { }: ButtonProps) {
return ( return (
@ -135,7 +135,6 @@ export function IconButton({
size={size} size={size}
disabled={disabled} disabled={disabled}
textColor={textColor} textColor={textColor}
accent={accent}
{...props} {...props}
> >
{icon} {icon}

6
front/src/modules/ui/layout/components/WithTopBarContainer.tsx
View File

@ -13,7 +13,7 @@ type OwnProps = {
isFavorite?: boolean; isFavorite?: boolean;
icon: ReactNode; icon: ReactNode;
onAddButtonClick?: () => void; onAddButtonClick?: () => void;
onFavouriteButtonClick?: () => void; onFavoriteButtonClick?: () => void;
}; };
const StyledContainer = styled.div` const StyledContainer = styled.div`
@ -29,7 +29,7 @@ export function WithTopBarContainer({
isFavorite, isFavorite,
icon, icon,
onAddButtonClick, onAddButtonClick,
onFavouriteButtonClick, onFavoriteButtonClick,
}: OwnProps) { }: OwnProps) {
return ( return (
<StyledContainer> <StyledContainer>
@ -40,7 +40,7 @@ export function WithTopBarContainer({
isFavorite={isFavorite} isFavorite={isFavorite}
icon={icon} icon={icon}
onAddButtonClick={onAddButtonClick} onAddButtonClick={onAddButtonClick}
onFavouriteButtonClick={onFavouriteButtonClick} onFavoriteButtonClick={onFavoriteButtonClick}
/> />
<RightDrawerContainer topMargin={PAGE_BAR_MIN_HEIGHT + 16 + 16}> <RightDrawerContainer topMargin={PAGE_BAR_MIN_HEIGHT + 16 + 16}>
{children} {children}

10
front/src/modules/ui/layout/page-bar/components/PageBar.tsx
View File

@ -69,7 +69,7 @@ type OwnProps = {
isFavorite?: boolean; isFavorite?: boolean;
icon: ReactNode; icon: ReactNode;
onAddButtonClick?: () => void; onAddButtonClick?: () => void;
onFavouriteButtonClick?: () => void; onFavoriteButtonClick?: () => void;
}; };
export function PageBar({ export function PageBar({
@ -78,7 +78,7 @@ export function PageBar({
isFavorite, isFavorite,
icon, icon,
onAddButtonClick, onAddButtonClick,
onFavouriteButtonClick, onFavoriteButtonClick,
}: OwnProps) { }: OwnProps) {
const navigate = useNavigate(); const navigate = useNavigate();
const navigateBack = useCallback(() => navigate(-1), [navigate]); const navigateBack = useCallback(() => navigate(-1), [navigate]);
@ -114,13 +114,13 @@ export function PageBar({
</StyledTopBarIconTitleContainer> </StyledTopBarIconTitleContainer>
</StyledLeftContainer> </StyledLeftContainer>
<ActionButtonsContainer> <ActionButtonsContainer>
{onFavouriteButtonClick && ( {onFavoriteButtonClick && (
<IconButton <IconButton
icon={<IconHeart size={16} />} icon={<IconHeart size={16} />}
size="large" size="large"
data-testid="add-button" data-testid="add-button"
accent={isFavorite ? 'red' : 'regular'} textColor={isFavorite ? 'danger' : 'secondary'}
onClick={onFavouriteButtonClick} onClick={onFavoriteButtonClick}
variant="border" variant="border"
/> />
)} )}

2
front/src/pages/companies/CompanyShow.tsx
View File

@ -45,7 +45,7 @@ export function CompanyShow() {
hasBackButton hasBackButton
isFavorite={isFavorite} isFavorite={isFavorite}
icon={<IconBuildingSkyscraper size={theme.icon.size.md} />} icon={<IconBuildingSkyscraper size={theme.icon.size.md} />}
onFavouriteButtonClick={handleFavoriteButtonClick} onFavoriteButtonClick={handleFavoriteButtonClick}
> >
<ShowPageContainer> <ShowPageContainer>
<ShowPageLeftContainer> <ShowPageLeftContainer>

2
front/src/pages/people/PersonShow.tsx
View File

@ -55,7 +55,7 @@ export function PersonShow() {
icon={<IconUser size={theme.icon.size.md} />} icon={<IconUser size={theme.icon.size.md} />}
hasBackButton hasBackButton
isFavorite={isFavorite} isFavorite={isFavorite}
onFavouriteButtonClick={handleFavoriteButtonClick} onFavoriteButtonClick={handleFavoriteButtonClick}
> >
<ShowPageContainer> <ShowPageContainer>
<ShowPageLeftContainer> <ShowPageLeftContainer>

19
server/src/database/migrations/20230810222531_add_favorites/migration.sql Normal file
View File

@ -0,0 +1,19 @@
-- CreateTable
CREATE TABLE "favorites" (
"id" TEXT NOT NULL,
"workspaceId" TEXT,
"personId" TEXT,
"companyId" TEXT,
"workspaceMemberId" TEXT,
CONSTRAINT "favorites_pkey" PRIMARY KEY ("id")
);
-- AddForeignKey
ALTER TABLE "favorites" ADD CONSTRAINT "favorites_personId_fkey" FOREIGN KEY ("personId") REFERENCES "people"("id") ON DELETE SET NULL ON UPDATE CASCADE;
-- AddForeignKey
ALTER TABLE "favorites" ADD CONSTRAINT "favorites_companyId_fkey" FOREIGN KEY ("companyId") REFERENCES "companies"("id") ON DELETE SET NULL ON UPDATE CASCADE;
-- AddForeignKey
ALTER TABLE "favorites" ADD CONSTRAINT "favorites_workspaceMemberId_fkey" FOREIGN KEY ("workspaceMemberId") REFERENCES "workspace_members"("id") ON DELETE SET NULL ON UPDATE CASCADE;