Merge branch 'feature/progress-update-flow-modal' into test/progress-…

…update-flow-modal
Real-Dev-Squad · Dec 4, 2024 · a6e781b · a6e781b
2 parents bd2f228 + 1c29370
commit a6e781b
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 23 deletions.
diff --git a/src/components/taskDetails/TaskDetailsSection.tsx b/src/components/taskDetails/TaskDetailsSection.tsx
@@ -29,13 +29,14 @@ export const TaskDetailsSection: React.FC<TaskDetailsSectionProps> = ({
     taskDetailsData,
 }) => {
     const router = useRouter();
-
     const { dev } = router.query;
     const isDevMode = dev === 'true';
+
     return (
         <div className={styles['sub_details_grid_container']}>
             <Details detailType={'Type'} value={type} />
             <Details detailType={'Priority'} value={priority} />
+
             {isEditing ? (
                 <TaskDropDown
                     onChange={handleTaskStatusUpdate}
@@ -51,12 +52,13 @@ export const TaskDetailsSection: React.FC<TaskDetailsSectionProps> = ({
                 />
             )}
             <Details detailType={'Link'} value={link} />
-            {isDevMode ? null : (
+            <div className={styles.progressWrapper}>
                 <ProgressContainer
                     content={taskDetailsData}
+                    readOnly={true}
                     key={percentCompleted}
                 />
-            )}
+            </div>
         </div>
     );
 };
diff --git a/src/components/taskDetails/TaskUpdateModal.tsx b/src/components/taskDetails/TaskUpdateModal.tsx
@@ -47,9 +47,9 @@ function TaskUpdateModal({
                 </section>
                 <div className={styles.hr} />
                 <ProgressContainer
-                    isDev={isDev}
                     content={taskDetailsData}
                     key={editedTaskDetails?.percentCompleted}
+                    readOnly={false}
                 />
             </div>
         </Modal>

diff --git a/src/components/tasks/card/card.module.scss b/src/components/tasks/card/card.module.scss
@@ -149,9 +149,7 @@
 
 @media screen and (max-width: 1128px) {
     .progressContainerUpdated {
-        flex-direction: column;
-        justify-content: start;
-        align-items: start;
+        width: 100%;
         gap: 1rem;
     }
 }

diff --git a/src/components/tasks/card/progressContainer/ProgressBar.tsx b/src/components/tasks/card/progressContainer/ProgressBar.tsx
@@ -4,36 +4,44 @@ import ProgressSlider from './ProgressSlider';
 import ProgressIndicator from './ProgressIndicator';
 import styles from '@/components/tasks/card/card.module.scss';
 
-const Progressbar: FC<ProgressBarProps> = ({
+interface ExtendedProgressBarProps extends ProgressBarProps {
+    readOnly?: boolean;
+}
+
+const Progressbar: FC<ExtendedProgressBarProps> = ({
     progress,
     progressValue,
     handleProgressChange,
     debounceSlider,
     startedOn,
     endsOn,
     isLoading,
+    readOnly = false,
 }) => {
-    if (progress) {
+    // If readOnly or not in progress mode, show the indicator
+    if (readOnly || !progress) {
         return (
             <>
-                <ProgressSlider
-                    value={progressValue}
-                    debounceSlider={debounceSlider}
-                    handleProgressChange={handleProgressChange}
-                    isLoading={isLoading}
+                <ProgressIndicator
+                    percentCompleted={progressValue}
+                    startedOn={startedOn}
+                    endsOn={endsOn}
                 />
                 <div className={styles.progressPercentageCompleted}>
                     {progressValue}%
                 </div>
             </>
         );
     }
+
+    // Show slider when in edit mode
     return (
         <>
-            <ProgressIndicator
-                percentCompleted={progressValue}
-                startedOn={startedOn}
-                endsOn={endsOn}
+            <ProgressSlider
+                value={progressValue}
+                debounceSlider={debounceSlider}
+                handleProgressChange={handleProgressChange}
+                isLoading={isLoading}
             />
             <div className={styles.progressPercentageCompleted}>
                 {progressValue}%

diff --git a/src/components/tasks/card/progressContainer/index.tsx b/src/components/tasks/card/progressContainer/index.tsx
@@ -13,9 +13,13 @@ import { ERROR_MESSAGE, PROGRESS_SUCCESSFUL } from '@/constants/constants';
 import styles from '@/components/tasks/card/card.module.scss';
 import { ProgressContainerProps } from '@/interfaces/task.type';
 
-const ProgressContainer: FC<ProgressContainerProps> = ({ content }) => {
+const ProgressContainer: FC<ProgressContainerProps> = ({
+    content,
+    readOnly = false,
+}) => {
     const router = useRouter();
     const { dev } = router.query;
+    const isDev = dev === 'true';
 
     const [isProgressMade, setIsProgressMade] = useState<boolean>(false);
     const [progressValue, setProgressValue] = useState<number>(
@@ -89,9 +93,12 @@ const ProgressContainer: FC<ProgressContainerProps> = ({ content }) => {
     };
 
     const showUpdateButton = () => {
+        // Only show update button in modal (not readOnly) and in dev mode
         if (
-            content.assignee === userData?.username ||
-            !!userData?.roles.super_user
+            !readOnly &&
+            isDev &&
+            (content.assignee === userData?.username ||
+                !!userData?.roles.super_user)
         ) {
             return (
                 <ProgressText
@@ -100,20 +107,22 @@ const ProgressContainer: FC<ProgressContainerProps> = ({ content }) => {
                 />
             );
         }
+        return null;
     };
 
     return (
         <>
             <div className={styles.progressContainerUpdated}>
                 <Progressbar
-                    progress={isProgressMade}
+                    progress={!readOnly && isProgressMade}
                     progressValue={progressValue}
                     percentCompleted={content.percentCompleted}
                     handleProgressChange={handleProgressChange}
                     debounceSlider={debounceSlider}
                     startedOn={content.startedOn}
                     endsOn={String(content.endsOn)}
                     isLoading={checkingLoading}
+                    readOnly={readOnly}
                 />
                 {showUpdateButton()}
             </div>

diff --git a/src/interfaces/task.type.ts b/src/interfaces/task.type.ts
@@ -113,7 +113,7 @@ export type CardProps = {
 
 export type ProgressContainerProps = {
     content: task;
-    isDev?: boolean;
+    readOnly: boolean;
 };
 
 export default task;