Merge pull request #362 from Rushikesh-Sonawane99/release-1.0.0

Issue #PS-000 chore: Added TOC for course planner in admin app
tekdi · Nov 29, 2024 · ef5ccac · ef5ccac
2 parents b6003c4 + 57b2bf8
commit ef5ccac
Show file tree

Hide file tree

Showing 6 changed files with 153 additions and 11 deletions.
diff --git a/src/components/ResourceCard.tsx b/src/components/ResourceCard.tsx
@@ -8,15 +8,15 @@ import { fetchContent } from "@/services/PlayerService";
 interface ResourceCardProps {
   title: string;
   // type: string;
-  // resource: string;
+  resource: string;
   identifier: string;
   appIcon?: string;
 }
 
 const ResourceCard: React.FC<ResourceCardProps> = ({
   title,
   // type,
-  // resource,
+  resource,
   identifier,
   appIcon,
 }) => {
@@ -42,7 +42,11 @@ const ResourceCard: React.FC<ResourceCardProps> = ({
 
   const openPlayers = () => {
     sessionStorage.setItem("previousPage", window.location.href);
-    router.push(`/play/content/${identifier}`);
+    if (resource === "Course") {
+      router.push(`/course-hierarchy/${identifier}`);
+    } else {
+      router.push(`/play/content/${identifier}`);
+    }
   };
 
   return (

diff --git a/src/components/RouteGuard.tsx b/src/components/RouteGuard.tsx
@@ -59,7 +59,8 @@ const RouteGuard: React.FC<{ children: React.ReactNode }> = ({ children }) => {
       "/csvDetails",
       "/csvList",
       "/play",
-      "/edit-password"
+      "/edit-password",
+      "/course-hierarchy"
     ];
 
     const isCoursePlannerContent = coursePlannerPaths.some((path) =>

diff --git a/src/pages/course-hierarchy/[identifier].tsx b/src/pages/course-hierarchy/[identifier].tsx
@@ -0,0 +1,121 @@
+import React, { useEffect, useState } from 'react';
+import {
+  Accordion,
+  AccordionSummary,
+  AccordionDetails,
+  Typography,
+  Link,
+  Box,
+} from '@mui/material';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import { getContentHierarchy } from '@/services/coursePlanner';
+import { useRouter } from 'next/router';
+import Loader from '@/components/Loader';
+
+const RecursiveAccordion = ({ data }: { data: any[] }) => {
+  let router = useRouter();
+
+  const renderAccordion = (nodes: any[], level = 0) => {
+    return nodes.map((node, index) => (
+      <Box key={`${node.name}-${index}`} sx={{ marginBottom: '16px' }}>
+        {level === 0 ? (
+          <>
+            {/* Render level 0 name as heading */}
+            <Typography
+              variant="h1"
+              sx={{
+                marginBottom: '0.75rem',
+                fontWeight: 'bold',
+                borderBottom: '1px solid #ddd',
+                paddingBottom: '4px',
+                paddingLeft: '4px'
+              }}
+            >
+              {node.name}
+            </Typography>
+            {/* Render children as accordions */}
+            {node.children && renderAccordion(node.children, level + 1)}
+          </>
+        ) : node.contentType === 'Resource' ? (
+          <Box
+            className="facilitator-bg"
+            sx={{
+              backgroundImage: `url(${node?.appIcon ? node.appIcon : '/decorationBg.png'})`,
+              position: 'relative',
+              marginLeft: `${(level - 1) * 2}px`, // Indentation for resources
+              cursor: 'pointer',
+              height: '50px',
+              width: '50px',
+              backgroundSize: 'cover',
+              backgroundPosition: 'center',
+            }}
+            onClick={() =>
+              router.push(`/play/content/${node?.identifier || node?.id}`)
+            }
+          ></Box>
+        ) : (
+          <Accordion sx={{ marginLeft: `${(level - 1) * 2}px` }}>
+            <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+              <Typography variant="body1" fontWeight={600}>
+                {node?.name}
+              </Typography>
+            </AccordionSummary>
+            <AccordionDetails>
+              {/* Recursively render children */}
+              {node?.children && renderAccordion(node?.children, level + 1)}
+            </AccordionDetails>
+          </Accordion>
+        )}
+      </Box>
+    ));
+  };
+
+  return <Box>{renderAccordion(data)}</Box>;
+};
+
+export default function CourseHierarchy() {
+  const router = useRouter();
+  const [doId, setDoId] = useState<string | null>(null);
+  const [courseHierarchyData, setCourseHierarchyData] = useState<any[]>([]);
+  const [loading, setLoading] = useState<boolean>(true);
+
+  useEffect(() => {
+    if (router.query.identifier) {
+      setDoId(router.query.identifier as string);
+    }
+  }, [router.query.identifier]);
+
+  useEffect(() => {
+    const fetchCohortHierarchy = async (doId: string): Promise<any> => {
+      try {
+        const hierarchyResponse = await getContentHierarchy({
+          doId,
+        });
+        setLoading(true);
+        const hierarchyData = hierarchyResponse?.data?.result?.content;
+        setCourseHierarchyData([hierarchyData]);
+
+        console.log('hierarchyData:', hierarchyData);
+
+        return hierarchyResponse;
+      } catch (error) {
+        console.error('Error fetching solution details:', error);
+        throw error;
+      } finally {
+        setLoading(false); 
+      }
+    };
+
+    if (typeof doId === 'string') {
+      fetchCohortHierarchy(doId);
+    }
+  }, [doId]);
+
+  if (loading) {
+    return (
+      <Loader showBackdrop={true} loadingText="Loading..." />
+    );
+  }
+
+  return <RecursiveAccordion data={courseHierarchyData} />;
+}
diff --git a/src/pages/resourceList.tsx b/src/pages/resourceList.tsx
@@ -95,7 +95,7 @@ const ResourceList = () => {
                 <ResourceCard
                   title={item.name}
                   // type={item.app}
-                  // resource={item.type}
+                  resource={item.contentType}
                   appIcon={item?.appIcon}
                   identifier={item.identifier}
                 />
@@ -118,7 +118,7 @@ const ResourceList = () => {
                 <ResourceCard
                   title={item.name}
                   // type={item.app}
-                  // resource={item.type}
+                  resource={item.contentType}
                   appIcon={item?.appIcon}
                   identifier={item.identifier}
                 />
@@ -141,7 +141,7 @@ const ResourceList = () => {
                 <ResourceCard
                   title={item.name}
                   // type={item.app || "Facilitator"}
-                  // resource="Facilitator Requisite"
+                   resource={item.contentType}
                   appIcon={item?.appIcon}
                   identifier={item.identifier}
                 />

diff --git a/src/services/coursePlanner.ts b/src/services/coursePlanner.ts
@@ -1,7 +1,8 @@
 import { CoursePlannerMetaData, GetSolutionDetailsParams, GetTargetedSolutionsParams, GetUserProjectTemplateParams } from "@/utils/Interfaces";
-import { post } from "./RestClient";
+import { get, post } from "./RestClient";
 import axios from 'axios';
 import { FRAMEWORK_ID } from "../../app.config";
+import { URL_CONFIG } from "@/utils/url.config";
 
 
 
@@ -150,7 +151,21 @@ export const uploadCoursePlanner = async (file: File, metaData: CoursePlannerMet
     }
   };
 
-
-
-
+  export const getContentHierarchy = async ({
+    doId,
+  }: {
+    doId: string;
+  }): Promise<any> => {
+    const apiUrl: string = `${URL_CONFIG.API.CONTENT_HIERARCHY}/${doId}`;
+
+    try {
+      console.log('Request data', apiUrl);
+      const response = await get(apiUrl);
+      // console.log('response', response);
+      return response;
+    } catch (error) {
+      console.error('Error in getContentHierarchy Service', error);
+      throw error;
+    }
+  };
 
diff --git a/src/utils/url.config.ts b/src/utils/url.config.ts
@@ -10,5 +10,6 @@ export const URL_CONFIG = {
     HIERARCHY_API: "/action/questionset/v2/hierarchy/",
     QUESTIONSET_READ: "/action/questionset/v2/read/",
     COMPOSITE_SEARCH: '/action/composite/v3/search',
+    CONTENT_HIERARCHY: '/action/content/v3/hierarchy',
   },
 };