From 2ebfb48ca94541f2da1ab0c492eaed706bd36680 Mon Sep 17 00:00:00 2001
From: Maksim Sviridov <enemyworld@gmail.com>
Date: Tue, 13 Aug 2024 17:45:19 +0300
Subject: [PATCH] feat(Criteria): show linked goal progress instead of state

---
 src/components/GoalBadge.tsx                  | 24 +++++++++++++++----
 .../GoalCriteria/GoalCriteria.module.css      | 17 +++++++++++++
 src/components/GoalCriteria/GoalCriteria.tsx  |  8 +++++--
 .../GoalTableList/GoalTableList.tsx           |  2 +-
 src/components/IssueStats/IssueStats.tsx      |  2 +-
 trpc/queries/criteria.ts                      |  1 +
 6 files changed, 45 insertions(+), 9 deletions(-)

diff --git a/src/components/GoalBadge.tsx b/src/components/GoalBadge.tsx
index abd531bd1..b624d6297 100644
--- a/src/components/GoalBadge.tsx
+++ b/src/components/GoalBadge.tsx
@@ -1,6 +1,6 @@
 import React, { ComponentProps } from 'react';
 import { nullable } from '@taskany/bricks';
-import { Badge } from '@taskany/bricks/harmony';
+import { Badge, CircleProgressBar } from '@taskany/bricks/harmony';
 
 import { NextLink } from './NextLink';
 import { StateDot } from './StateDot/StateDot';
@@ -12,16 +12,30 @@ interface GoalBadgeProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'co
     strike?: boolean;
     children?: React.ReactNode;
     className?: string;
+    progress?: number | null;
     onClick?: React.MouseEventHandler<HTMLAnchorElement>;
 }
 
-export const GoalBadge: React.FC<GoalBadgeProps> = ({ href, title, children, className, onClick, state, ...attrs }) => {
+export const GoalBadge: React.FC<GoalBadgeProps> = ({
+    href,
+    title,
+    children,
+    className,
+    onClick,
+    state,
+    progress,
+    ...attrs
+}) => {
     return (
         <Badge
             className={className}
-            iconLeft={nullable(state, (s) => (
-                <StateDot view="stroke" state={s} size="l" />
-            ))}
+            iconLeft={nullable(
+                progress,
+                (value) => (
+                    <CircleProgressBar value={value} size="xs" />
+                ),
+                nullable(state, (s) => <StateDot view="stroke" state={s} size="l" />),
+            )}
             iconRight={children}
             text={nullable(
                 href,
diff --git a/src/components/GoalCriteria/GoalCriteria.module.css b/src/components/GoalCriteria/GoalCriteria.module.css
index 79ffb7ba5..e779b019f 100644
--- a/src/components/GoalCriteria/GoalCriteria.module.css
+++ b/src/components/GoalCriteria/GoalCriteria.module.css
@@ -12,6 +12,7 @@
 
 .GoalCriteriaTable {
     margin-top: var(--gap-sm);
+    margin-bottom: var(--gap-s);
 }
 
 .GoalCriteriaItemTitle {
@@ -87,4 +88,20 @@
 .GoalCriteriaIsolate::after {
     content: none;
     display: none;
+}
+
+.GoalCriteriaProgress {
+    position: absolute;
+    bottom: -10px;
+    left: 0;
+    width: 100%;
+    z-index: 0;
+}
+
+.GoalCriteriaTitleCell {
+    position: relative;
+}
+
+.GoalCriteriaTable {
+    gap: var(--gap-sm);
 }
\ No newline at end of file
diff --git a/src/components/GoalCriteria/GoalCriteria.tsx b/src/components/GoalCriteria/GoalCriteria.tsx
index cec32f96f..e6d5def1c 100644
--- a/src/components/GoalCriteria/GoalCriteria.tsx
+++ b/src/components/GoalCriteria/GoalCriteria.tsx
@@ -59,6 +59,7 @@ interface GoalCriteriaProps extends CriteriaProps {
         state?: State | null;
         project?: string;
         owner?: ActivityByIdReturnType;
+        progress?: number | null;
     };
 }
 
@@ -83,6 +84,7 @@ export function mapCriteria<
         projectId: string | null;
         owner: ActivityByIdReturnType | null;
         state: State | null;
+        completedCriteriaWeight?: number | null;
     },
 >(criteria: T, connectedGoal: G | null): UnionCriteria {
     if (connectedGoal) {
@@ -94,6 +96,7 @@ export function mapCriteria<
                 shortId: connectedGoal._shortId,
                 project: connectedGoal.projectId ?? undefined,
                 owner: connectedGoal.owner ?? undefined,
+                progress: connectedGoal.completedCriteriaWeight ?? null,
             },
             title: connectedGoal.title,
             isDone: criteria.isDone,
@@ -160,12 +163,13 @@ const GoalCriteria = ({ title, goal, weight, isDone }: Omit<GoalCriteriaProps, '
 
     return (
         <>
-            <TableCell width={200}>
+            <TableCell className={classes.GoalCriteriaTitleCell} width={200}>
                 <GoalBadge
                     title={title}
                     state={goal.state ?? undefined}
                     href={routes.goal(goal.shortId)}
                     onClick={handleGoalCriteriaClick}
+                    progress={goal.progress}
                     strike={isDone}
                 />
             </TableCell>
@@ -417,7 +421,7 @@ export const CriteriaList: React.FC<CriteriaListProps> = ({
 }) => {
     const validityData = useCriteriaValidityData(list);
     return (
-        <Table className={className}>
+        <Table className={classNames(classes.GoalCriteriaTable, className)}>
             {list.map((criteria) => (
                 <Criteria
                     goalId={goalId}
diff --git a/src/components/GoalTableList/GoalTableList.tsx b/src/components/GoalTableList/GoalTableList.tsx
index 5848541d5..66d43d8ac 100644
--- a/src/components/GoalTableList/GoalTableList.tsx
+++ b/src/components/GoalTableList/GoalTableList.tsx
@@ -191,7 +191,7 @@ export const GoalTableList = <T extends GoalTableListItem>({
                             content: goal.achievedCriteriaWeight != null && goal.id != null && (
                                 <GoalCriteriaPreview achievedWeight={goal.achievedCriteriaWeight} goalId={goal.id} />
                             ),
-                            width: 24,
+                            width: 32,
                         },
                     ],
                 };
diff --git a/src/components/IssueStats/IssueStats.tsx b/src/components/IssueStats/IssueStats.tsx
index cbdcea7cc..80ffcb979 100644
--- a/src/components/IssueStats/IssueStats.tsx
+++ b/src/components/IssueStats/IssueStats.tsx
@@ -78,7 +78,7 @@ export const IssueStats: React.FC<IssueStatsProps> = ({
             {achivedCriteriaWeight != null && (
                 <Separator>
                     <div className={s.IssueComponentContainer}>
-                        <CircleProgressBar value={achivedCriteriaWeight} size="l" />
+                        <CircleProgressBar value={achivedCriteriaWeight} size="m" />
                     </div>
                 </Separator>
             )}
diff --git a/trpc/queries/criteria.ts b/trpc/queries/criteria.ts
index 7cc6384ee..a4da33c7b 100644
--- a/trpc/queries/criteria.ts
+++ b/trpc/queries/criteria.ts
@@ -51,6 +51,7 @@ export const criteriaQuery = (params: CriteriaParams = {}) => {
                             _shortId: sql<string>`concat(${ref('criteriaGoal.projectId')}, '-', ${ref(
                                 'criteriaGoal.scopeId',
                             )})`,
+                            completedCriteriaWeight: sql<number | null>`"criteriaGoal"."completedCriteriaWeight"`,
                             state: fn.toJson('state'),
                             owner: jsonBuildObject({
                                 id: sql<string>`activity.id`,