Skip to content

Commit

Permalink
fix: "Create goal" button is shown inside the tree
Browse files Browse the repository at this point in the history
  • Loading branch information
@DenisVorop
DenisVorop committed Nov 20, 2023
1 parent aa4ea68 commit 45eef52
Show file tree
Hide file tree
Showing 14 changed files with 347 additions and 549 deletions.
69 changes: 48 additions & 21 deletions src/components/DashboardPage/DashboardPage.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,12 @@
/* eslint-disable react-hooks/rules-of-hooks */
import React, { MouseEventHandler, useCallback, useEffect, useMemo } from 'react';
import { nullable, Table } from '@taskany/bricks';
import { nullable, TreeViewElement } from '@taskany/bricks';

import { refreshInterval } from '../../utils/config';
import { ExternalPageProps } from '../../utils/declareSsrProps';
import { useUrlFilterParams } from '../../hooks/useUrlFilterParams';
import { useFiltersPreset } from '../../hooks/useFiltersPreset';
import { Page } from '../Page';
import { CommonHeader } from '../CommonHeader';
import { GoalsGroup } from '../GoalsGroup';
import { trpc } from '../../utils/trpcClient';
import { GoalByIdReturnType } from '../../../trpc/inferredTypes';
import { PageTitlePreset } from '../PageTitlePreset/PageTitlePreset';
Expand All @@ -18,6 +16,10 @@ import { LoadMoreButton } from '../LoadMoreButton/LoadMoreButton';
import { InlineCreateGoalControl } from '../InlineCreateGoalControl/InlineCreateGoalControl';
import { safeGetUserName } from '../../utils/getUserName';
import { FilteredPage } from '../FilteredPage/FilteredPage';
import { ProjectListItemCollapsable } from '../ProjectListItemCollapsable/ProjectListItemCollapsable';
import { routes } from '../../hooks/router';
import { GoalListItem } from '../GoalListItem';
import { TableRowItem, Title } from '../Table';

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

Expand Down Expand Up @@ -82,7 +84,7 @@ export const DashboardPage = ({ user, ssrTime, defaultPresetFallback }: External
if (isGoalDeletedAlready) setPreview(null);
}, [goals, preview, setPreview]);

const onGoalPrewiewShow = useCallback(
const onGoalPreviewShow = useCallback(
(goal: GoalByIdReturnType): MouseEventHandler<HTMLAnchorElement> =>
(e) => {
if (e.metaKey || e.ctrlKey || !goal?._shortId) return;
Expand Down Expand Up @@ -130,25 +132,50 @@ export const DashboardPage = ({ user, ssrTime, defaultPresetFallback }: External
onFilterStar={onFilterStar}
isLoading={isLoading}
>
<Table>
{groupsOnScreen?.map((group) => (
<React.Fragment key={group.project.id}>
<GoalsGroup
goals={group.goals as NonNullable<GoalByIdReturnType>[]}
selectedResolver={selectedGoalResolver}
onClickProvider={onGoalPrewiewShow}
onTagClick={setTagsFilterOutside}
project={group.project}
/>
{nullable(!group.goals.length, () => (
<InlineCreateGoalControl projectId={group.project.id} />
))}
</React.Fragment>
))}
</Table>
{groupsOnScreen?.map(({ project, goals }) => (
<ProjectListItemCollapsable
key={project.id}
interactive={false}
visible
project={project}
href={routes.project(project.id)}
goals={goals.map((g) => (
<TreeViewElement key={g.id}>
<TableRowItem
title={<Title size="m">{g.title}</Title>}
onClick={onGoalPreviewShow(g as GoalByIdReturnType)}
>
<GoalListItem
createdAt={g.createdAt}
updatedAt={g.updatedAt}
id={g.id}
state={g.state}
issuer={g.activity}
owner={g.owner}
tags={g.tags}
priority={g.priority}
comments={g._count?.comments}
estimate={g.estimate}
estimateType={g.estimateType}
participants={g.participants}
starred={g._isStarred}
watching={g._isWatching}
achivedCriteriaWeight={g._achivedCriteriaWeight}
focused={selectedGoalResolver(g.id)}
onTagClick={setTagsFilterOutside}
/>
</TableRowItem>
</TreeViewElement>
))}
>
{nullable(!goals.length, () => (
<InlineCreateGoalControl project={project} />
))}
</ProjectListItemCollapsable>
))}

{nullable(hasNextPage, () => (
<LoadMoreButton onClick={() => fetchNextPage()} />
<LoadMoreButton onClick={fetchNextPage as () => void} />
))}
</FilteredPage>
</Page>
Expand Down
18 changes: 10 additions & 8 deletions src/components/ExploreProjectsPage/ExploreProjectsPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import { ExplorePageLayout } from '../ExplorePageLayout/ExplorePageLayout';
import { ProjectListItem } from '../ProjectListItem';
import { WrappedRowLink } from '../WrappedRowLink';
import { trpc } from '../../utils/trpcClient';
import { TableRowItem, Title } from '../Table';

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

Expand All @@ -28,14 +29,15 @@ export const ExploreProjectsPage = ({ user, ssrTime }: ExternalPageProps) => {
nullable(project, (p) => (
<NextLink key={p.id} href={routes.project(p.id)} passHref legacyBehavior>
<WrappedRowLink>
<ProjectListItem
title={p.title}
owner={p.activity}
starred={p._isStarred}
watching={p._isWatching}
participants={p.participants}
averageScore={p.averageScore}
/>
<TableRowItem title={<Title size="l">{p.title}</Title>}>
<ProjectListItem
owner={p.activity}
starred={p._isStarred}
watching={p._isWatching}
participants={p.participants}
averageScore={p.averageScore}
/>
</TableRowItem>
</WrappedRowLink>
</NextLink>
)),
Expand Down
18 changes: 10 additions & 8 deletions src/components/ExploreTopProjectsPage/ExploreTopProjectsPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import { ExplorePageLayout } from '../ExplorePageLayout/ExplorePageLayout';
import { ProjectListItem } from '../ProjectListItem';
import { trpc } from '../../utils/trpcClient';
import { WrappedRowLink } from '../WrappedRowLink';
import { TableRowItem, Title } from '../Table';

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

Expand All @@ -28,14 +29,15 @@ export const ExploreProjectsPage = ({ user, ssrTime }: ExternalPageProps) => {
nullable(project, (p) => (
<NextLink key={p.id} href={routes.project(p.id)} passHref>
<WrappedRowLink>
<ProjectListItem
title={p.title}
owner={p.activity}
starred={p._isStarred}
watching={p._isWatching}
participants={p.participants}
averageScore={p.averageScore}
/>
<TableRowItem title={<Title size="l">{p.title}</Title>}>
<ProjectListItem
owner={p.activity}
starred={p._isStarred}
watching={p._isWatching}
participants={p.participants}
averageScore={p.averageScore}
/>
</TableRowItem>
</WrappedRowLink>
</NextLink>
)),
Expand Down
50 changes: 26 additions & 24 deletions src/components/FlatGoalList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import { useFMPMetric } from '../utils/telemetry';
import { useGoalPreview } from './GoalPreview/GoalPreviewProvider';
import { GoalListItem } from './GoalListItem';
import { LoadMoreButton } from './LoadMoreButton/LoadMoreButton';
import { TableRowItem, Title } from './Table';

interface GoalListProps {
queryState?: QueryState;
Expand Down Expand Up @@ -67,7 +68,7 @@ export const FlatGoalList: React.FC<GoalListProps> = ({ queryState, setTagFilter

const selectedGoalResolver = useCallback((id: string) => id === preview?.id, [preview]);

const onGoalPrewiewShow = useCallback(
const onGoalPreviewShow = useCallback(
(goal: GoalByIdReturnType): MouseEventHandler<HTMLAnchorElement> =>
(e) => {
if (e.metaKey || e.ctrlKey || !goal?._shortId) return;
Expand All @@ -81,30 +82,31 @@ export const FlatGoalList: React.FC<GoalListProps> = ({ queryState, setTagFilter
<>
<Table>
{goalsOnScreen?.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}
estimateType={g.estimateType}
participants={g.participants}
starred={g._isStarred}
watching={g._isWatching}
achivedCriteriaWeight={g._achivedCriteriaWeight}
<TableRowItem
key={g.id}
focused={selectedGoalResolver(g.id)}
onClick={onGoalPrewiewShow(g as GoalByIdReturnType)}
onTagClick={setTagFilterOutside}
/>
title={<Title size="m">{g.title}</Title>}
onClick={onGoalPreviewShow(g as GoalByIdReturnType)}
>
<GoalListItem
createdAt={g.createdAt}
updatedAt={g.updatedAt}
id={g.id}
state={g.state}
issuer={g.activity}
owner={g.owner}
tags={g.tags}
priority={g.priority}
comments={g._count?.comments}
estimate={g.estimate}
estimateType={g.estimateType}
participants={g.participants}
starred={g._isStarred}
watching={g._isWatching}
achivedCriteriaWeight={g._achivedCriteriaWeight}
focused={selectedGoalResolver(g.id)}
onTagClick={setTagFilterOutside}
/>
</TableRowItem>
))}
</Table>

Expand Down
4 changes: 1 addition & 3 deletions src/components/GoalDependency/GoalDependency.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,9 +101,7 @@ export const GoalDependency: FC<GoalDependencyProps> = ({ id, items = [], onSubm
name: 'title',
renderColumn: (values) => (
<CustomCell col={6}>
<Title size="s" weight="bold">
{values.title}
</Title>
<Title size="s">{values.title}</Title>
</CustomCell>
),
},
Expand Down
Loading

0 comments on commit 45eef52

Please sign in to comment.