feat: Real-Dev-Squad#1263 Added code changes for purpose field in tas…

…k card
Saitharun279 · Jan 8, 2025 · 96602a6 · 96602a6
1 parent 00519da
commit 96602a6
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 7 deletions.
diff --git a/src/components/tasks/card/card.module.scss b/src/components/tasks/card/card.module.scss
@@ -91,6 +91,16 @@
     color: #aeaeae;
 }
 
+.cardPurposeAndStatusFont {
+    font-size: 1.1rem;
+    color: #555;
+}
+.cardPurposeText{
+    padding: 8px;
+    color: #aeaeae;
+    font-size: 1rem;
+}
+
 .cardStatusFont {
     font-size: 1.3rem;
     font-weight: 500;
@@ -242,9 +252,13 @@
     cursor: pointer;
 }
 
-.taskStatusAndDateContainer {
-    display: flex;
-    justify-content: space-between;
+.taskStatusDateAndPurposeContainer {
+    display: grid;
+    align-items: baseline;
+    grid-template-columns: 2fr 3fr;
+    gap: 2rem;
+    grid-auto-flow: column;
+    margin-bottom: 1rem;
 }
 
 .taskStatusEditMode {

diff --git a/src/components/tasks/card/index.tsx b/src/components/tasks/card/index.tsx
@@ -32,6 +32,7 @@ import {
 import { useGetUsersByUsernameQuery } from '@/app/services/usersApi';
 import { ConditionalLinkWrapper } from './ConditionalLinkWrapper';
 import useUserData from '@/hooks/useUserData';
+import { useGetUserQuery } from '@/app/services/userApi';
 import { isTaskDetailsPageLinkEnabled } from '@/constants/FeatureFlags';
 import { useUpdateTaskMutation } from '@/app/services/tasksApi';
 import ProgressIndicator from './progressContainer/ProgressIndicator';
@@ -75,16 +76,18 @@ const Card: FC<CardProps> = ({
 
     const { isUserAuthorized } = useUserData();
 
+    const { data: userData } = useGetUserQuery();
+
     const [showEditButton, setShowEditButton] = useState(false);
 
     const [keyLongPressed] = useKeyLongPressed();
 
     const [isEditMode, setIsEditMode] = useState(false);
 
-    const { data: taskTagLevel, isLoading } = useGetTaskTagsQuery({
+    const { data: taskTagLevel, isLoading } = useGetTaskTagsQuery({ // revisit
         itemId: cardDetails.id,
     });
-    const [deleteTaskTagLevel] = useDeleteTaskTagLevelMutation();
+    const [deleteTaskTagLevel] = useDeleteTaskTagLevelMutation(); //revisit
     const [updateTask, { isLoading: isLoadingUpdateTaskDetails }] =
         useUpdateTaskMutation();
 
@@ -266,7 +269,7 @@ const Card: FC<CardProps> = ({
         setIsEditMode(true);
     };
     const isEditable = shouldEdit && isUserAuthorized && isEditMode;
-
+    const isSelfTask = editedTaskDetails.assignee === userData?.username;
     const getFormattedClosedAtDate = () => {
         const closedAt = cardDetails?.github?.issue?.closedAt;
         return getDateInString(new Date(closedAt ?? Date.now()));
@@ -543,7 +546,7 @@ const Card: FC<CardProps> = ({
                     </div>
                 )}
             </div>
-            <div className={styles.taskStatusAndDateContainer}>
+            <div className={styles.taskStatusDateAndPurposeContainer}>
                 <div className={styles.dateInfo}>
                     <div className={styles.dateSection}>
                         <p className={styles.cardSpecialFont}>
@@ -569,6 +572,15 @@ const Card: FC<CardProps> = ({
                             : `Started ${getStartedAgo()}`}
                     </span>
                 </div>
+
+                {/*card purpose*/}
+                {isSelfTask && editedTaskDetails.purpose && (
+                    <div>
+                        <b className={styles.cardPurposeAndStatusFont}>Purpose: </b>
+                        <span className={styles.cardPurposeText}>{editedTaskDetails.purpose}</span>
+                    </div>
+                )}
+
                 {/* EDIT task status */}
                 <div className={styles.taskStatusEditMode}>
                     {isEditable ? (