From df91baaedf50f4b9684cc7b79ee132b7d8c2f8c4 Mon Sep 17 00:00:00 2001
From: Arif <arifmajeed007.as@gmail.com>
Date: Wed, 25 Sep 2024 15:33:33 +0530
Subject: [PATCH] Issue #PS-1758: Course planner UI as per figma

---
 public/locales/en/common.json |   4 +-
 src/pages/course-planner.tsx  | 193 ++++++++++++++++++++--------------
 src/utils/app.constant.ts     |   6 ++
 3 files changed, 124 insertions(+), 79 deletions(-)

diff --git a/public/locales/en/common.json b/public/locales/en/common.json
index d6262ad3..6f80ddf5 100644
--- a/public/locales/en/common.json
+++ b/public/locales/en/common.json
@@ -556,7 +556,9 @@
     "OVERALL_SCORE": "Overall Score",
     "ASSESSMENT_NOT_STARTED_YET": "Assessment not started yet",
     "NUMBER_OUT_OF_COMPLETED": "{{completedCount}} out of {{totalCount}} completed",
-    "NO_SUBTOPIC_SELECTED": "No Subtopic selected"
+    "NO_SUBTOPIC_SELECTED": "No Subtopic selected",
+    "NO_SUBJECT_FOUND": "No Subject found",
+    "NO_ASSIGNED": "No assigned"
   },
   "BOARD_ENROLMENT": {
     "BOARD_ENROLLMENT": "Board Enrollment",
diff --git a/src/pages/course-planner.tsx b/src/pages/course-planner.tsx
index 80845f5f..f3b4076d 100644
--- a/src/pages/course-planner.tsx
+++ b/src/pages/course-planner.tsx
@@ -131,6 +131,13 @@ const CoursePlanner = () => {
 
   useEffect(() => {
     const fetchCohortSearchResults = async () => {
+
+      setLoading(true);
+      setState('');
+      setBoard('');
+      setMedium('');
+      setGrade('');
+
       try {
         const data = await getCohortSearch({
           cohortId: selectedValue,
@@ -167,6 +174,8 @@ const CoursePlanner = () => {
           //   }
           // });
 
+         
+
           stringFields.forEach(({ label, setter }) => {
             const field = cohortDetails.customFields.find(
               (field: any) => field.label === label
@@ -177,6 +186,10 @@ const CoursePlanner = () => {
             }
           });
         }
+
+        
+        
+        setLoading(false);
       } catch (error) {
         console.error('Failed to fetch cohort search results:', error);
       }
@@ -185,6 +198,7 @@ const CoursePlanner = () => {
     fetchCohortSearchResults();
   }, [selectedValue]);
 
+
   useEffect(() => {
     const fetchTaxonomyResults = async () => {
       try {
@@ -479,6 +493,19 @@ const CoursePlanner = () => {
     fetchTaxonomyResults();
   }, [value, selectedValue]);
 
+  const isStateEmpty = !tStore.state;
+  const isBoardEmpty = !tStore.board;
+  const isMediumEmpty = !tStore.medium;
+  const isGradeEmpty = !tStore.grade;
+
+  const emptyFields = [];
+  if (isStateEmpty) emptyFields.push(CoursePlannerConstants.STATES_SMALL);
+  if (isBoardEmpty) emptyFields.push(CoursePlannerConstants.BOARD_SMALL);
+  if (isMediumEmpty) emptyFields.push(CoursePlannerConstants.MEDIUM_SMALL);
+  if (isGradeEmpty) emptyFields.push(CoursePlannerConstants.GRADE_SMALL);
+
+  const anyFieldsEmpty = emptyFields.length > 0;
+
   return (
     <Box minHeight="100vh">
       <Box>
@@ -570,27 +597,29 @@ const CoursePlanner = () => {
           </Box>
         </Grid>
         <Grid item xs={12} md={6}>
-          <Box sx={{ mt: 2, px: '20px', width: '100%' }}>
-            <FormControl sx={{ width: '100%' }}>
-              <InputLabel id="course-type-select-label">Course Type</InputLabel>
-              <Select
-                labelId="course-type-select-label"
-                id="course-type-select"
-                value={tStore?.type}
-                onChange={handleChange}
-                label="Course Type"
-                sx={{ fontSize: '14px' }}
-              >
-                <MenuItem value={'Foundation Course'}>
-                  {t('COURSE_PLANNER.FOUNDATION_COURSE')}
-                </MenuItem>
-                <MenuItem value={'Main Course'}>
-                  {t('COURSE_PLANNER.MAIN_COURSE')}
-                </MenuItem>
-              </Select>
-            </FormControl>
-          </Box>
-        </Grid>
+  <Box sx={{ mt: 2, px: '20px', width: '100%' }}>
+    <FormControl sx={{ width: '100%' }}>
+      <InputLabel id="course-type-select-label">Course Type</InputLabel>
+      <Select
+        labelId="course-type-select-label"
+        id="course-type-select"
+        value={tStore?.type}
+        onChange={handleChange}
+        label="Course Type"
+        sx={{ fontSize: '14px' }}
+        disabled={!tStore.state || !tStore.board || !tStore.medium || !tStore.grade} // Disable if any field is empty
+      >
+        <MenuItem value={'Foundation Course'}>
+          {t('COURSE_PLANNER.FOUNDATION_COURSE')}
+        </MenuItem>
+        <MenuItem value={'Main Course'}>
+          {t('COURSE_PLANNER.MAIN_COURSE')}
+        </MenuItem>
+      </Select>
+    </FormControl>
+  </Box>
+</Grid>
+
       </Grid>
 
       <Box sx={{ m: 3 }}>
@@ -603,48 +632,55 @@ const CoursePlanner = () => {
               marginBottom: '20px',
             }}
           >
-            <Grid container>
-              {subjects?.length > 0 ? (
-                subjects.map((item: any) => (
-                  <Grid key={item.code} item xs={12} sm={6} md={4}>
+             <Grid container>
+      {anyFieldsEmpty ? (
+        <Box sx={{ ml: 2, p: 2 }}>
+          <Typography variant="h2">
+            {`No assigned ${emptyFields.join(', ')}`}
+          </Typography>
+        </Box>
+      ) : (
+        subjects?.length > 0 ? (
+          subjects.map((item:any) => (
+            <Grid key={item.code} item xs={12} sm={6} md={4}>
+              <Box
+                sx={{
+                  border: `1px solid ${theme.palette.warning.A100}`,
+                  borderRadius: '8px',
+                  padding: '12px',
+                  cursor: 'pointer',
+                  margin: '14px',
+                  background: theme.palette.warning['A400'],
+                }}
+                onClick={() => {
+                  setTaxonomySubject(item.name);
+                  router.push({
+                    pathname: '/course-planner-detail',
+                  });
+                }}
+              >
+                <Box
+                  sx={{
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                  }}
+                >
+                  <Box>
                     <Box
                       sx={{
-                        border: `1px solid ${theme.palette.warning.A100}`,
-                        borderRadius: '8px',
-                        padding: '12px',
-                        cursor: 'pointer',
-                        margin: '14px',
-                        background: theme.palette.warning['A400'],
-                      }}
-                      onClick={() => {
-                        setTaxonomySubject(item.name);
-                        router.push({
-                          pathname: '/course-planner-detail',
-                        });
+                        display: 'flex',
+                        gap: '15px',
+                        alignItems: 'center',
                       }}
                     >
                       <Box
                         sx={{
-                          display: 'flex',
-                          justifyContent: 'space-between',
-                          alignItems: 'center',
+                          position: 'relative',
+                          display: 'inline-flex',
                         }}
                       >
-                        <Box>
-                          <Box
-                            sx={{
-                              display: 'flex',
-                              gap: '15px',
-                              alignItems: 'center',
-                            }}
-                          >
-                            <Box
-                              sx={{
-                                position: 'relative',
-                                display: 'inline-flex',
-                              }}
-                            >
-                              {/* <Box sx={{ width: '40px', height: '40px' }}>
+                      {/* <Box sx={{ width: '40px', height: '40px' }}>
                                 <CircularProgressbar
                                   value={item.circular || 0}
                                   strokeWidth={10}
@@ -682,33 +718,34 @@ const CoursePlanner = () => {
                               </Box> */}
                             </Box>
 
-                            <Box
-                              sx={{
-                                fontSize: '16px',
-                                color: theme.palette.warning['300'],
-                              }}
-                            >
-                              {item.name}
-                            </Box>
-                          </Box>
-                        </Box>
-                        <Box>
-                          <KeyboardArrowRightIcon
-                            sx={{ color: theme.palette.warning['300'] }}
-                          />
-                        </Box>
+                      <Box
+                        sx={{
+                          fontSize: '16px',
+                          color: theme.palette.warning['300'],
+                        }}
+                      >
+                        {item.name}
                       </Box>
                     </Box>
-                  </Grid>
-                ))
-              ) : (
-                <Box sx={{ ml: 2, p: 2 }}>
-                  <Typography variant="h2">
-                    {t('ASSESSMENTS.NO_DATA_FOUND')}
-                  </Typography>
+                  </Box>
+                  <Box>
+                    <KeyboardArrowRightIcon
+                      sx={{ color: theme.palette.warning['300'] }}
+                    />
+                  </Box>
                 </Box>
-              )}
+              </Box>
             </Grid>
+          ))
+        ) : (
+          <Box sx={{ ml: 2, p: 2 }}>
+            <Typography variant="h2">
+              {t('ASSESSMENTS.NO_SUBJECT_FOUND')}
+            </Typography>
+          </Box>
+        )
+      )}
+    </Grid>
           </Box>
         </Box>
       </Box>
diff --git a/src/utils/app.constant.ts b/src/utils/app.constant.ts
index 9f787f9c..63b3a7b0 100644
--- a/src/utils/app.constant.ts
+++ b/src/utils/app.constant.ts
@@ -124,6 +124,12 @@ export enum CoursePlannerConstants {
   BOARD = 'BOARD',
   MEDIUM = 'MEDIUM',
   GRADE = 'GRADE',
+
+  SUBJECT_SMALL = 'Subject',
+  STATES_SMALL = 'State',
+  BOARD_SMALL = 'Board',
+  MEDIUM_SMALL = 'Medium',
+  GRADE_SMALL = 'Grade',
 }
 
 export enum EventStatus {