Issue #1817 feat: View course planner on admin app UI development fixes

tekdi · Oct 15, 2024 · 85c5b7b · 85c5b7b
1 parent d7a7d1b
commit 85c5b7b
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 80 deletions.
diff --git a/src/data/cardData.js b/src/data/cardData.js
@@ -1,18 +1,12 @@
 let state;
 
-if (typeof window !== 'undefined') {
-  state = 'Maharashtra'
+if (typeof window !== "undefined") {
+  state = localStorage.getItem("stateName");
 }
 const cardData = [
   {
     id: "1",
     state: state,
-    boardsUploaded: 0,
-    totalBoards: 1,
-    details:
-      "Maharashtra is a state in the southeastern coastal region of India.",
-    boards: ["Maharashtra Board"],
-    subjects: ["English"],
   },
 ];
 

diff --git a/src/pages/course-planner/index.tsx b/src/pages/course-planner/index.tsx
@@ -7,6 +7,7 @@ import {
   useMediaQuery,
   useTheme,
   Grid,
+  Divider,
 } from "@mui/material";
 import FolderOutlinedIcon from "@mui/icons-material/FolderOutlined";
 import InsertLinkOutlinedIcon from "@mui/icons-material/InsertLinkOutlined";
@@ -21,7 +22,7 @@ import Loader from "@/components/Loader";
 import { getChannelDetails } from "@/services/coursePlanner";
 import { getOptionsByCategory } from "@/utils/Helper";
 import coursePlannerStore from "@/store/coursePlannerStore";
-import taxonomyStore from "@/store/tanonomyStore"
+import taxonomyStore from "@/store/tanonomyStore";
 
 const Foundation = () => {
   const router = useRouter();
@@ -158,19 +159,15 @@ const Foundation = () => {
           <Loader showBackdrop={true} loadingText={t("COMMON.LOADING")} />
         ) : (
           <Box sx={{ pl: "20px", mt: 5 }}>
-            {/* <Box
+            <Box
               sx={{
-                display: "grid",
-                gridTemplateColumns: "1fr 2fr 1fr",
-                gap: isSmallScreen ? "8px" : "16px",
                 mb: 2,
               }}
             >
               <Typography>{t("MASTER.STATE")}</Typography>
-              <Typography>{t("COURSE_PLANNER.ACTIVITY")}</Typography>
-              <Typography>{t("COURSE_PLANNER.COPY_LINK")}</Typography>
-            </Box> */}
-            <Grid container spacing={2}>
+            </Box>
+            <Divider />
+            <Grid container spacing={2} mt={2}>
               {!selectedCardId ? (
                 cardData?.map((card: any) => (
                   <Grid item xs={12} md={4} key={card.id}>
@@ -227,8 +224,7 @@ const Foundation = () => {
                             handleCopyLink(card.state);
                           }}
                           sx={{ minWidth: "auto", padding: 0 }}
-                        >
-                        </Button>
+                        ></Button>
                       </Box>
                     </Box>
                   </Grid>

diff --git a/src/pages/stateDetails.tsx b/src/pages/stateDetails.tsx
@@ -8,6 +8,7 @@ import {
   useTheme,
   useMediaQuery,
   Grid,
+  Divider,
 } from "@mui/material";
 import FolderOutlinedIcon from "@mui/icons-material/FolderOutlined";
 import InsertLinkOutlinedIcon from "@mui/icons-material/InsertLinkOutlined";
@@ -49,7 +50,7 @@ const StateDetails = () => {
 
         const channel = store?.boards;
         setBoards(channel);
-        localStorage.removeItem("overallCommonSubjects")
+        localStorage.removeItem("overallCommonSubjects");
         setLoading(false);
       }, 1000);
     };
@@ -107,16 +108,25 @@ const StateDetails = () => {
 
   return (
     <Box>
-
-      <Box sx={{ display: "flex", alignItems: "center", gap: 2, mb: 2, mt: 2 }}>
+      <Box sx={{ display: "flex", alignItems: "center", mb: 2, mt: 2 }}>
         <IconButton onClick={handleBackClick}>
           <ArrowBackIcon />
         </IconButton>
+
         <Typography variant="h2">{card.state}</Typography>
-        <Box sx={{ display: "flex", gap: 3, alignItems: "center" }}>
-        </Box>
+        <Typography variant="h2" sx={{ ml: 1 }}>
+          State
+        </Typography>
+
+        <Box sx={{ display: "flex", gap: 3, alignItems: "center" }}></Box>
       </Box>
+      <Divider />
       <Grid spacing={2} container sx={{ marginTop: "16px", ml: 2 }}>
+        <Box
+          sx={{ display: "flex", alignItems: "center", gap: 2, mb: 2, mt: 2 }}
+        >
+          <Typography variant="h2">Boards :</Typography>
+        </Box>
         {boards.map((board: any, index: number) => (
           <Grid item xs={12} md={4} key={index}>
             <Box
@@ -151,8 +161,6 @@ const StateDetails = () => {
                     {board?.name}
                   </Typography>
                 </Box>
-
-
               </Box>
               <Box sx={{ display: "flex", justifyContent: "center" }}>
                 <Button
@@ -161,9 +169,7 @@ const StateDetails = () => {
                     handleCopyLink(board?.identifier);
                   }}
                   sx={{ minWidth: "auto", padding: 0 }}
-                >
-
-                </Button>
+                ></Button>
               </Box>
             </Box>
           </Grid>

diff --git a/src/pages/subjectDetails.tsx b/src/pages/subjectDetails.tsx
@@ -9,6 +9,8 @@ import {
   IconButton,
   MenuItem,
   Select,
+  Divider,
+  Tooltip,
 } from "@mui/material";
 import FolderOutlinedIcon from "@mui/icons-material/FolderOutlined";
 import InsertLinkOutlinedIcon from "@mui/icons-material/InsertLinkOutlined";
@@ -81,8 +83,8 @@ const SubjectDetails = () => {
   const setTaxonomySubject = taxonomyStore((state) => state.setTaxonomySubject);
 
   useEffect(() => {
-    const subjects = localStorage.getItem('overallCommonSubjects');
-  
+    const subjects = localStorage.getItem("overallCommonSubjects");
+
     if (subjects) {
       try {
         const parsedData = JSON.parse(subjects);
@@ -95,8 +97,6 @@ const SubjectDetails = () => {
       setSubject([]);
     }
   }, []);
-
-
 
   useEffect(() => {
     const fetchFrameworkDetails = async () => {
@@ -172,7 +172,7 @@ const SubjectDetails = () => {
   const handleCopyLink = (subject: any) => {};
 
   const handleCardClick = (subject: any) => {
-    setTaxonomySubject(subject?.name)
+    setTaxonomySubject(subject?.name);
     router.push(`/importCsv?subject=${encodeURIComponent(subject?.name)}`);
 
     setTaxanomySubject(subject?.name);
@@ -188,7 +188,10 @@ const SubjectDetails = () => {
 
     if (medium) {
       const getGrades = getOptionsByCategory(store?.framedata, "gradeLevel");
-      const mediumAssociations = getAssociationsByCodeNew(mediumOptions, medium);
+      const mediumAssociations = getAssociationsByCodeNew(
+        mediumOptions,
+        medium
+      );
       setMediumAssociations(mediumAssociations);
 
       console.log(getGrades);
@@ -359,9 +362,12 @@ const SubjectDetails = () => {
       ];
 
       const overallCommonSubjects = findOverallCommonSubjects(arrays);
-      
+
       setSubject(overallCommonSubjects);
-      localStorage.setItem("overallCommonSubjects", JSON.stringify(overallCommonSubjects))
+      localStorage.setItem(
+        "overallCommonSubjects",
+        JSON.stringify(overallCommonSubjects)
+      );
     }
   };
 
@@ -421,7 +427,7 @@ const SubjectDetails = () => {
             }}
           >
             <MenuItem value="">
-              <Typography >Select Grade</Typography>
+              <Typography>Select Grade</Typography>
             </MenuItem>
             {grade.map((item: any) => (
               <MenuItem key={item.name} value={item.name}>
@@ -467,7 +473,7 @@ const SubjectDetails = () => {
         sx={{
           display: "flex",
           alignItems: "center",
-          gap: "16px",
+
           marginTop: "16px",
           marginBottom: "16px",
         }}
@@ -476,75 +482,56 @@ const SubjectDetails = () => {
           <ArrowBackIcon />
         </IconButton>
         <Typography variant="h2">{boardName}</Typography>
-
+        <Typography variant="h2" sx={{ ml: 1 }}>
+          Board
+        </Typography>
         <Box sx={{ width: "40px", height: "40px" }}></Box>
       </Box>
+      <Divider />
       <Box sx={{ marginTop: "16px" }}>
         {subject && subject.length > 1 ? (
-          subject.map((subj: any, index: any) => (
+          subject.map((subj: any, index: number) => (
             <MuiCard
               key={index}
               sx={{
                 display: "grid",
                 gridTemplateColumns: "1fr 2fr 1fr",
                 padding: "14px",
                 cursor: "pointer",
-                border: "1px solid #0000001A",
-                boxShadow: "none",
-                transition: "background-color 0.3s",
+                border: "1px solid rgba(0, 0, 0, 0.1)",
+                boxShadow: "0px 2px 8px rgba(0, 0, 0, 0.05)",
+                borderRadius: "8px",
+                transition: "all 0.3s ease",
                 "&:hover": {
                   backgroundColor: "#EAF2FF",
+                  transform: "scale(1.02)",
                 },
-                marginTop: "8px",
+                marginTop: "12px",
               }}
               onClick={() => handleCardClick(subj)}
             >
+              {/* Left Section: Folder Icon and Subject Name */}
               <Box
                 sx={{
                   display: "flex",
                   alignItems: "center",
-                  gap: "8px",
+                  gap: "10px",
                 }}
               >
-                <FolderOutlinedIcon />
-                <Typography variant="h6">{subj?.name}</Typography>
-              </Box>
-              <Box
-                sx={{
-                  display: "flex",
-                  alignItems: "center",
-                  gap: "16px",
-                }}
-              >
-                <CircularProgress
-                  variant="determinate"
-                  sx={{
-                    color: "#06A816",
-                    "& .MuiCircularProgress-circle": {
-                      strokeLinecap: "round",
-                      stroke: "#06A816",
-                    },
-                  }}
-                />
-                <Typography sx={{ fontSize: "14px" }}>
-                  {/* {subj.uploaded} / {subj.total} {"topics uploaded"} */}
+                <FolderOutlinedIcon sx={{ color: "#3C3C3C" }} />
+                <Typography variant="h6" noWrap>
+                  {subj?.name || "Untitled Subject"}
                 </Typography>
               </Box>
-              <Box sx={{ display: "flex", justifyContent: "center" }}>
-                <Button
-                  onClick={(e: MouseEvent<HTMLButtonElement>) => {
-                    e.stopPropagation();
-                    handleCopyLink(subj);
-                  }}
-                  sx={{ minWidth: "auto", padding: 0 }}
-                >
-                </Button>
-              </Box>
             </MuiCard>
           ))
         ) : (
-          <Typography variant="h2" align="center" sx={{ marginTop: "16px" }}>
-            Select Medium, Grade and Type
+          <Typography
+            variant="h4"
+            align="center"
+            sx={{ marginTop: "24px", color: "#6B7280" }}
+          >
+            Select Medium, Grade, and Type
           </Typography>
         )}
       </Box>