From ded58dc8b0b96ff2ee93e24889ccafb957591b3b Mon Sep 17 00:00:00 2001
From: Vishnu Kaushik <50923653+vishnukaushik@users.noreply.github.com>
Date: Sat, 21 Oct 2023 00:50:04 +0530
Subject: [PATCH] fix: Add task counter in card modal (#525)

Closes #467
---
 .../src/components/CardModal/Tasks/Tasks.jsx  | 23 ++++++++++++-------
 .../CardModal/Tasks/Tasks.module.scss         | 17 ++++++++++++++
 2 files changed, 32 insertions(+), 8 deletions(-)

diff --git a/client/src/components/CardModal/Tasks/Tasks.jsx b/client/src/components/CardModal/Tasks/Tasks.jsx
index 54d5194a..1f947e07 100755
--- a/client/src/components/CardModal/Tasks/Tasks.jsx
+++ b/client/src/components/CardModal/Tasks/Tasks.jsx
@@ -48,14 +48,21 @@ const Tasks = React.memo(({ items, canEdit, onCreate, onUpdate, onMove, onDelete
   return (
     <>
       {items.length > 0 && (
-        <Progress
-          autoSuccess
-          value={completedItems.length}
-          total={items.length}
-          color="blue"
-          size="tiny"
-          className={styles.progress}
-        />
+        <>
+          <span className={styles.progressWrapper}>
+            <Progress
+              autoSuccess
+              value={completedItems.length}
+              total={items.length}
+              color="blue"
+              size="tiny"
+              className={styles.progress}
+            />
+          </span>
+          <span className={styles.count}>
+            {completedItems.length}/{items.length}
+          </span>
+        </>
       )}
       <DragDropContext onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
         <Droppable droppableId="tasks" type={DroppableTypes.TASK}>
diff --git a/client/src/components/CardModal/Tasks/Tasks.module.scss b/client/src/components/CardModal/Tasks/Tasks.module.scss
index f222ba04..68d25cca 100644
--- a/client/src/components/CardModal/Tasks/Tasks.module.scss
+++ b/client/src/components/CardModal/Tasks/Tasks.module.scss
@@ -3,6 +3,23 @@
     margin: 0 0 16px;
   }
 
+  .progressWrapper {
+    display: inline-block;
+    padding: 3px 0;
+    vertical-align: top;
+    width: calc(100% - 50px);
+  }
+
+  .count {
+    color: #8c8c8c;
+    display: inline-block;
+    font-size: 14px;
+    line-height: 14px;
+    text-align: right;
+    vertical-align: top;
+    width: 50px;
+  }
+
   .taskButton {
     background: transparent;
     border: none;