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

Issue #PS-000 chore: Added TOC for contentType course in workspace

src/components/KaTableComponent.tsx

@@ -82,18 +82,22 @@ const KaTableComponent: React.FC<CustomTableProps> = ({ data, columns, tableTitl
       router.push({ pathname: `/editor`, query: { identifier, mode } });
     }
     else if ( tableTitle==='submitted')  {
+      content.contentType === "Course" ? router.push({ pathname: `/course-hierarchy/${identifier}`, query: { identifier, mode }}) : 
       router.push({ pathname: `/workspace/content/review`, query: { identifier, mode } });
     }
     else if ( tableTitle==='all-content' && mode==="review")  {
+      content.contentType === "Course" ? router.push({ pathname: `/course-hierarchy/${identifier}`, query: { identifier, mode, isReadOnly: true } }) : 
         router.push({ pathname: `/workspace/content/review`, query: { identifier, mode, isReadOnly: true } });
     }
     else if ( tableTitle==='discover-contents')  {
+      content.contentType === "Course" ? router.push({ pathname: `/course-hierarchy/${identifier}`, query: { identifier, mode, isDiscoverContent: true } }) : 
       router.push({ pathname: `/workspace/content/review`, query: { identifier, mode, isDiscoverContent: true } });
     }
      else if (content?.mimeType && MIME_TYPE.GENERIC_MIME_TYPE.includes(content?.mimeType)) {
       localStorage.setItem('contentCreatedBy', content?.createdBy);
       console.log(content)
       const pathname = tableTitle === 'upForReview' ? `/workspace/content/review` : `/upload-editor`;
+      // content.contentType === "Course" ? router.push({ pathname:`/course-hierarchy/${identifier}`, query: { identifier, mode } }) :
       router.push({ pathname, query: { identifier, mode } });
     } else if (content?.mimeType && MIME_TYPE.COLLECTION_MIME_TYPE.includes(content?.mimeType)) {
       router.push({ pathname: `/collection`, query: { identifier, mode } });

src/pages/course-hierarchy/[identifier].tsx

@@ -0,0 +1,127 @@
+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/ContentService';
+import { useRouter } from 'next/router';
+import Loader from '@/components/Loader';
+
+const RecursiveAccordion = ({ data }: { data: any[] }) => {
+  let router = useRouter();
+  const queryParams = router.query;
+  const { identifier, ...otherQueryParams } = queryParams;
+
+  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({
+                pathname: '/workspace/content/review', 
+                query: { ...otherQueryParams, identifier: node.identifier }
+              })
+            }
+
+          ></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/ContentService.ts

@@ -292,3 +292,21 @@ export const submitComment = async (identifier: any, comment: any) => {
     throw error;
   }
 };
+
+export const getContentHierarchy = async ({
+  doId,
+}: {
+  doId: string;
+}): Promise<any> => {
+  const apiUrl: string = `/action/content/v3/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;
+  }
+};