Skip to content

Commit

Permalink
fix(GoalsGroup): common table for Goals groups
Browse files Browse the repository at this point in the history
  • Loading branch information
@asabotovich
asabotovich committed May 30, 2023
1 parent 241562b commit 7d6a30c
Show file tree
Hide file tree
Showing 4 changed files with 80 additions and 70 deletions.
5 changes: 4 additions & 1 deletion src/components/GoalListItem/GoalListItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,8 +38,11 @@ interface GoalListItemProps {
onTagClick?: (tag: Tag) => MouseEventHandler<HTMLDivElement>;
}

export const GoalsList = styled.div`
export const GoalsListContainer = styled.div`
display: table;
width: 100%;
margin: 0 -20px;
padding: 0 20px;
`;

const GoalCell = styled.div<{ align?: 'center' | 'left' | 'right' }>`
Expand Down
63 changes: 32 additions & 31 deletions src/components/GoalsGroup.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { Text, Link, nullable } from '@taskany/bricks';
import { routes } from '../hooks/router';
import { GoalByIdReturnType } from '../../trpc/inferredTypes';

import { GoalListItem, GoalsList } from './GoalListItem/GoalListItem';
import { GoalListItem } from './GoalListItem/GoalListItem';
import { PageSep } from './PageSep';
import { ProjectTitleList } from './ProjectTitleList';

Expand All @@ -19,9 +19,12 @@ interface GoalGroupProps {
onTagClick?: React.ComponentProps<typeof GoalListItem>['onTagClick'];
}

const StyledGoalsGroup = styled.div`
padding: 0 20px 40px 20px;
margin: 0 -20px;
const GoalsGroupContainer = styled.div`
padding-top: 40px;
&:first-child {
padding-top: 0;
}
`;

interface GoalsGroupProjectTitleProps {
Expand All @@ -47,35 +50,33 @@ export const GoalsGroupProjectTitle: React.FC<GoalsGroupProjectTitleProps> = ({

export const GoalsGroup: React.FC<GoalGroupProps> = React.memo(
({ goals, children, selectedResolver, onClickProvider, onTagClick }) => (
<StyledGoalsGroup>
{children}
<>
<GoalsGroupContainer>{children}</GoalsGroupContainer>

<PageSep />

<GoalsList>
{goals.map((g) => (
<GoalListItem
createdAt={g.createdAt}
updatedAt={g.updatedAt}
id={g.id}
shortId={g._shortId}
projectId={g.projectId}
state={g.state!}
title={g.title}
issuer={g.activity!}
owner={g.owner!}
tags={g.tags}
priority={g.priority!}
comments={g._count?.comments}
estimate={g.estimate?.length ? g.estimate[g.estimate.length - 1] : undefined}
participants={g.participants}
key={g.id}
focused={selectedResolver(g.id)}
onClick={onClickProvider(g)}
onTagClick={onTagClick}
/>
))}
</GoalsList>
</StyledGoalsGroup>
{goals.map((g) => (
<GoalListItem
createdAt={g.createdAt}
updatedAt={g.updatedAt}
id={g.id}
shortId={g._shortId}
projectId={g.projectId}
state={g.state!}
title={g.title}
issuer={g.activity!}
owner={g.owner!}
tags={g.tags}
priority={g.priority!}
comments={g._count?.comments}
estimate={g.estimate?.length ? g.estimate[g.estimate.length - 1] : undefined}
participants={g.participants}
key={g.id}
focused={selectedResolver(g.id)}
onClick={onClickProvider(g)}
onTagClick={onTagClick}
/>
))}
</>
),
);
41 changes: 22 additions & 19 deletions src/components/GoalsPage/GoalsPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import { Page, PageContent } from '../Page';
import { CommonHeader } from '../CommonHeader';
import { FiltersPanel } from '../FiltersPanel/FiltersPanel';
import { GoalsGroup, GoalsGroupProjectTitle } from '../GoalsGroup';
import { GoalsListContainer } from '../GoalListItem/GoalListItem';
import { PageTitle } from '../PageTitle';
import { Nullish } from '../../types/void';
import { trpc } from '../../utils/trpcClient';
Expand Down Expand Up @@ -199,25 +200,27 @@ export const GoalsPage = ({ user, ssrTime, locale }: ExternalPageProps) => {
</FiltersPanel>

<PageContent>
{groups?.map(
(group) =>
Boolean(group.goals.length) &&
group.project && (
<GoalsGroup
key={group.project.id}
goals={group.goals}
selectedResolver={selectedGoalResolver}
onClickProvider={onGoalPrewiewShow}
onTagClick={setTagsFilterOutside}
>
<GoalsGroupProjectTitle
id={group.project.id}
title={group.project.title}
parent={group.project.parent}
/>
</GoalsGroup>
),
)}
<GoalsListContainer>
{groups?.map(
(group) =>
Boolean(group.goals.length) &&
group.project && (
<GoalsGroup
key={group.project.id}
goals={group.goals}
selectedResolver={selectedGoalResolver}
onClickProvider={onGoalPrewiewShow}
onTagClick={setTagsFilterOutside}
>
<GoalsGroupProjectTitle
id={group.project.id}
title={group.project.title}
parent={group.project.parent}
/>
</GoalsGroup>
),
)}
</GoalsListContainer>
</PageContent>

{nullable(preview, (p) => (
Expand Down
41 changes: 22 additions & 19 deletions src/components/ProjectPage/ProjectPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import { createFilterKeys } from '../../utils/hotkeys';
import { Nullish } from '../../types/void';
import { trpc } from '../../utils/trpcClient';
import { FilterById, GoalByIdReturnType } from '../../../trpc/inferredTypes';
import { GoalsListContainer } from '../GoalListItem/GoalListItem';

import { tr } from './ProjectPage.i18n';

Expand Down Expand Up @@ -237,25 +238,27 @@ export const ProjectPage = ({ user, locale, ssrTime, params: { id } }: ExternalP
</FiltersPanel>

<PageContent>
{groups?.map(
(group) =>
Boolean(group.goals.length) &&
group.project && (
<GoalsGroup
key={group.project.id}
goals={group.goals}
selectedResolver={selectedGoalResolver}
onClickProvider={onGoalPrewiewShow}
onTagClick={setTagsFilterOutside}
>
<GoalsGroupProjectTitle
id={group.project.id}
title={group.project.title}
parent={group.project.parent}
/>
</GoalsGroup>
),
)}
<GoalsListContainer>
{groups?.map(
(group) =>
Boolean(group.goals.length) &&
group.project && (
<GoalsGroup
key={group.project.id}
goals={group.goals}
selectedResolver={selectedGoalResolver}
onClickProvider={onGoalPrewiewShow}
onTagClick={setTagsFilterOutside}
>
<GoalsGroupProjectTitle
id={group.project.id}
title={group.project.title}
parent={group.project.parent}
/>
</GoalsGroup>
),
)}
</GoalsListContainer>
</PageContent>

{nullable(preview, (p) => (
Expand Down

0 comments on commit 7d6a30c

Please sign in to comment.