From 9514edccec427b3c177f3623fb28e8eb301e442d Mon Sep 17 00:00:00 2001
From: vishnukaushik <vishnukoushik23@gmail.com>
Date: Fri, 20 Oct 2023 22:30:53 +0530
Subject: [PATCH] fix #467: Add task counter in Modal

---
 .../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..650beded 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: #888;
+    display: inline-block;
+    font-size: 15px;
+    line-height: 12px;
+    text-align: right;
+    vertical-align: top;
+    width: 50px;
+  }
+
   .taskButton {
     background: transparent;
     border: none;