feat(NewGoalCriteria): preview in goal lists

taskany-inc · Feb 26, 2024 · 578a4c9 · 578a4c9
1 parent 9892306
commit 578a4c9
Show file tree

Hide file tree

Showing 12 changed files with 1,345 additions and 1,123 deletions.
diff --git a/cypress/fixtures/langs.json b/cypress/fixtures/langs.json
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/GoalBadge.tsx b/src/components/GoalBadge.tsx
@@ -5,8 +5,8 @@ import { Badge } from './Badge';
 import { NextLink } from './NextLink';
 import { StateDot } from './StateDot';
 
-interface GoalBadgeProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'color'> {
-    title: string;
+interface GoalBadgeProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'color' | 'title'> {
+    title: React.ReactNode;
     href?: string;
     color?: number;
     children?: React.ReactNode;

diff --git a/src/components/GoalTableList/GoalTableList.tsx b/src/components/GoalTableList/GoalTableList.tsx
@@ -1,4 +1,4 @@
-import { Badge, CircleProgressBar, State, Table, Tag, Text, User, UserGroup } from '@taskany/bricks/harmony';
+import { Badge, State, Table, Tag, Text, User, UserGroup } from '@taskany/bricks/harmony';
 import { MouseEventHandler, useMemo } from 'react';
 import { Link, ListViewItem, nullable } from '@taskany/bricks';
 import { IconMessageTextOutline } from '@taskany/icons';
@@ -14,6 +14,7 @@ import { NextLink } from '../NextLink';
 import { routes } from '../../hooks/router';
 import { TagsList } from '../TagsList';
 import { RelativeTime } from '../RelativeTime/RelativeTime';
+import { GoalCriteriaPreview } from '../NewGoalCriteria/NewGoalCriteria';
 
 import s from './GoalTableList.module.css';
 
@@ -41,7 +42,14 @@ export const GoalTableList = <T extends Partial<NonNullable<GoalByIdReturnType>>
                     {
                         content: (
                             <>
-                                <Text>{goal.title}</Text>
+                                <Link
+                                    as={NextLink}
+                                    href={routes.goal(goal?._shortId as string)}
+                                    inline
+                                    onClick={onGoalPreviewShow(goal)}
+                                >
+                                    <Text>{goal.title}</Text>
+                                </Link>
                                 {nullable(goal.tags, (tags) => (
                                     <TagsList>
                                         {tags.map((tag) => (
@@ -120,38 +128,36 @@ export const GoalTableList = <T extends Partial<NonNullable<GoalByIdReturnType>>
                         width: 90,
                     },
                     {
-                        content: nullable(goal._achivedCriteriaWeight, (weight) => (
-                            <CircleProgressBar value={weight} />
-                        )),
+                        content: goal._achivedCriteriaWeight != null && goal.id != null && (
+                            <GoalCriteriaPreview achievedWeight={goal._achivedCriteriaWeight} goalId={goal.id} />
+                        ),
                         width: 24,
                     },
                 ],
             })),
-        [goals, locale, onTagClick],
+        [goals, locale, onGoalPreviewShow, onTagClick],
     );
 
     return (
         <Table {...attrs}>
             {data.map((row) => (
-                <Link key={row.goal.id} as={NextLink} href={routes.goal(row.goal?._shortId as string)} inline>
-                    <ListViewItem
-                        value={row.goal}
-                        renderItem={({ active, hovered: _, ...props }) => (
-                            <TableListItem
-                                onClick={onGoalPreviewShow(row.goal)}
-                                selected={selectedGoalResolver?.(row.goal?.id as string)}
-                                hovered={active}
-                                {...props}
-                            >
-                                {row.list.map(({ content, width, className }, index) => (
-                                    <TableListItemElement key={index} width={width} className={className}>
-                                        {content}
-                                    </TableListItemElement>
-                                ))}
-                            </TableListItem>
-                        )}
-                    />
-                </Link>
+                <ListViewItem
+                    key={row.goal.id}
+                    value={row.goal}
+                    renderItem={({ active, hovered: _, ...props }) => (
+                        <TableListItem
+                            selected={selectedGoalResolver?.(row.goal?.id as string)}
+                            hovered={active}
+                            {...props}
+                        >
+                            {row.list.map(({ content, width, className }, index) => (
+                                <TableListItemElement key={index} width={width} className={className}>
+                                    {content}
+                                </TableListItemElement>
+                            ))}
+                        </TableListItem>
+                    )}
+                />
             ))}
         </Table>
     );

diff --git a/src/components/NewGoalCriteria/NewGoalCriteria.i18n/en.json b/src/components/NewGoalCriteria/NewGoalCriteria.i18n/en.json
@@ -0,0 +1,4 @@
+{
+    "Achievement criteria": "Achievement criteria",
+    "Loading ...": "Loading ..."
+}
diff --git a/src/components/NewGoalCriteria/NewGoalCriteria.i18n/index.ts b/src/components/NewGoalCriteria/NewGoalCriteria.i18n/index.ts
@@ -0,0 +1,17 @@
+/* eslint-disable */
+// Do not edit, use generator to update
+import { i18n, fmt, I18nLangSet } from 'easy-typed-intl';
+import getLang from '../../../utils/getLang';
+
+import ru from './ru.json';
+import en from './en.json';
+
+export type I18nKey = keyof typeof ru & keyof typeof en;
+type I18nLang = 'ru' | 'en';
+
+const keyset: I18nLangSet<I18nKey> = {};
+
+keyset['ru'] = ru;
+keyset['en'] = en;
+
+export const tr = i18n<I18nLang, I18nKey>(keyset, fmt, getLang);
diff --git a/src/components/NewGoalCriteria/NewGoalCriteria.i18n/ru.json b/src/components/NewGoalCriteria/NewGoalCriteria.i18n/ru.json
@@ -0,0 +1,4 @@
+{
+    "Achievement criteria": "Критерии достижимости",
+    "Loading ...": "Загрузка ..."
+}
diff --git a/src/components/NewGoalCriteria/NewGoalCriteria.module.css b/src/components/NewGoalCriteria/NewGoalCriteria.module.css
@@ -0,0 +1,58 @@
+.NewGoalCriteria {
+    /* for non-interactive popups allow inner events */
+    pointer-events: all;
+    width: 400px;
+}
+
+.NewGoalCriteriaTitle {
+    color: var(--text-secondary);
+    padding-bottom: var(--gap-xs);
+    border-bottom: 1px solid var(--gray-900);
+}
+
+.NewGoalCriteriaTable {
+    margin-top: var(--gap-sm);
+}
+
+.NewGoalCriteriaItemTitle {
+    line-height: 24px;
+}
+
+.NewGoalCriteriaItemTitleStrike,
+.NewGoalCriteriaItemWeight {
+    color: var(--text-secondary);
+}
+
+.NewGoalCriteriaWeightColumn {
+    text-align: right;
+}
+
+.NewGoalCriteriaTableRow {
+    align-items: baseline;
+}
+
+.NewGoalCriteriaGoalBadge {
+    padding: 0;
+    align-items: baseline;
+}
+
+.NewGoalCriteriaTrigger {
+    cursor: pointer;
+}
+.NewGoalCriteriaLoader {
+    display: flex;
+    justify-content: center;
+}
+
+.NewGoalCriteriaItemCheckbox {
+    align-items: baseline;
+    /* FIXME: https://github.com/taskany-inc/bricks/issues/868 */
+    cursor: default;
+    pointer-events: none;
+}
+
+/* FIXME: https://github.com/taskany-inc/bricks/issues/863 */
+.NewGoalCriteriaGoalBadgeState,
+.NewGoalCriteriaItemCheckbox input[type="checkbox"] {
+    transform: translateY(3px);
+}