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

Issue #PS-2611 chore: Added Table of Contents for course in course planner

src/components/CoursePlannerCards.tsx

@@ -28,6 +28,7 @@ const CoursePlannerCards: React.FC<CoursePlannerCardsProps> = ({
         {filteredResources?.map(
           (
             resource: {
+              resourceType: string;
               link: string;
               name?: string;
               appIcon?: string;
@@ -37,9 +38,36 @@ const CoursePlannerCards: React.FC<CoursePlannerCardsProps> = ({
             index: number
           ) => (
             <Grid item xs={6} md={4} lg={2} sx={{ mt: 2 }} key={index}>
-
-
-              <Box className="facilitator-bg">
+              <Box
+                className="facilitator-bg"
+                sx={{ backgroundImage: `url(${resource?.appIcon ? resource.appIcon : '/decorationBg.png'})`, position: 'relative', }}
+                onClick={() =>
+                  resource?.resourceType === "Course"
+                      ? router.push(`/course-hierarchy/${resource?.identifier || resource?.id}`)
+                      : router.push(`/play/content/${resource?.identifier || resource?.id}`)
+              }
+              >
+                <div
+                  style={{
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    backgroundColor: 'rgba(0, 0, 0, 0.5)', // Adjust opacity as needed
+                    zIndex: 1,
+                  }}
+                />
+                <Box
+                  sx={{
+                    fontSize: '16px',
+                    fontWeight: '500',
+                    color: theme?.palette?.warning['A400'],
+                    position: 'relative', zIndex: 2,
+                  }}
+                >
+                  {resource?.name || 'Untitled Resource'}
+                </Box>
                 <Box
                   sx={{ backgroundImage: `url(${resource?.appIcon ? resource.appIcon : '/decorationBg.png'})`, position: 'relative', }}
                   onClick={() => router.push(`/play/content/${resource?.identifier || resource?.id}`)}

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/CoursePlannerService';
+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} />;
+}

src/services/CoursePlannerService.ts

@@ -7,6 +7,8 @@ import {
 } from '../utils/Interfaces';
 import axios from 'axios';
 import { Role } from '@/utils/app.constant';
+import { URL_CONFIG } from '@/utils/url.config';
+import { get } from './RestClient';
 
 
 export const getTargetedSolutions = async ({
@@ -152,4 +154,22 @@ export const fetchCourseIdFromSolution = async (
     console.error('Error fetching solution details:', error);
     throw error;
   }
-};
+};
+
+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;
+  }
+};

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',
   },
 };