Merge pull request #23 from suvarnakale/main

Issue #PS-2122 feat: redirected to editor on clicking cards and fetching user specific data
tekdi · Oct 10, 2024 · 571f227 · 571f227
2 parents 007a0bb + 4632812
commit 571f227
Show file tree

Hide file tree

Showing 9 changed files with 198 additions and 146 deletions.
diff --git a/src/components/CourseCard.tsx b/src/components/CourseCard.tsx
@@ -13,13 +13,16 @@ import {
 import DeleteIcon from "@mui/icons-material/Delete";
 import ImageIcon from "@mui/icons-material/Image";
 import { Status } from "@/utils/app.constant";
+import router from "next/router";
 
 interface ContentCardProps {
   title: string;
   description?: string;
   type: string;
   imageUrl?: string;
   status: string;
+  identifier?: string;
+  mimeType?: string;
   onDelete?: () => void;
 }
 
@@ -29,10 +32,21 @@ const CourseCard: React.FC<ContentCardProps> = ({
   type,
   imageUrl,
   status,
+  identifier,
+  mimeType,
   onDelete,
 }) => {
   const theme = useTheme<any>();
 
+  const openEditor = () => {
+    if (mimeType === "application/vnd.sunbird.questionset") {
+      router.push({
+        pathname: `/editor`,
+        query: { identifier },
+      });
+    }
+  };
+
   return (
     <Card
       sx={{
@@ -42,7 +56,7 @@ const CourseCard: React.FC<ContentCardProps> = ({
         width: "250px",
       }}
     >
-      <Box position="relative">
+      <Box position="relative" onClick={openEditor}>
         <CardMedia
           component="div"
           sx={{

diff --git a/src/components/QuestionSetEditor.tsx b/src/components/QuestionSetEditor.tsx
@@ -1,144 +1,136 @@
 import React, { useEffect, useRef } from "react";
 import { createQuestionSet } from "@/services/ContentService";
+import { useRouter } from "next/router";
 
-const questionSetEditorConfig = {
-  context: {
-    programId: '',
-    contributionOrgId: '',
-    user: {
-      id: 'ef99949b-7f3a-4a5f-806a-e67e683e38f3',
-      fullName: 'Rahul Tekdi',
-      firstName: 'Rahul ',
-      lastName: 'Tekdi',
-      orgIds: ['test-k12-channel']
-    },
-    identifier: '',
-    authToken: ' ',
-    sid: 'iYO2K6dOSdA0rwq7NeT1TDzS-dbqduvV',
-    did: '7e85b4967aebd6704ba1f604f20056b6',
-    uid: 'bf020396-0d7b-436f-ae9f-869c6780fc45',
-    channel: 'test-k12-channel',
-    pdata: {
-      id: 'dev.dock.portal',
-      ver: '2.8.0',
-      pid: 'creation-portal'
-    },
-    contextRollup: {
-      l1: '01307938306521497658',
-    },
-    tags: ['01307938306521497658'],
-    cdata: [
-      {
-        id: '01307938306521497658',
-        type: 'sourcing_organization',
+const QuestionSetEditor: React.FC = () => {
+  const router = useRouter();
+  const { identifier } = router.query;
+  const questionSetEditorConfig = {
+    context: {
+      programId: "",
+      contributionOrgId: "",
+      user: {
+        id: "ef99949b-7f3a-4a5f-806a-e67e683e38f3",
+        fullName: "Rahul Tekdi",
+        firstName: "Rahul ",
+        lastName: "Tekdi",
+        orgIds: ["test-k12-channel"],
       },
-      {
-        type: 'project',
-        id: 'ec5cc850-3f71-11eb-aae1-fb99d9fb6737',
+      identifier: identifier,
+      authToken: " ",
+      sid: "iYO2K6dOSdA0rwq7NeT1TDzS-dbqduvV",
+      did: "7e85b4967aebd6704ba1f604f20056b6",
+      uid: "bf020396-0d7b-436f-ae9f-869c6780fc45",
+      channel: "test-k12-channel",
+      pdata: {
+        id: "dev.dock.portal",
+        ver: "2.8.0",
+        pid: "creation-portal",
+      },
+      contextRollup: {
+        l1: "01307938306521497658",
+      },
+      tags: ["01307938306521497658"],
+      cdata: [
+        {
+          id: "01307938306521497658",
+          type: "sourcing_organization",
+        },
+        {
+          type: "project",
+          id: "ec5cc850-3f71-11eb-aae1-fb99d9fb6737",
+        },
+        {
+          type: "linked_collection",
+          id: "do_113140468925825024117",
+        },
+      ],
+      timeDiff: 5,
+      objectRollup: {
+        l1: "do_113140468925825024117",
+        l2: "do_113140468926914560125",
+      },
+      host: "",
+      defaultLicense: "CC BY 4.0",
+      endpoint: "/data/v3/telemetry",
+      env: "questionset_editor",
+      framework: "test_k12_framework",
+      cloudStorageUrls: ["https://knowlg-public.s3-ap-south-1.amazonaws.com/"],
+      labels: {
+        save_collection_btn_label: "Save as Draft",
+      },
+      correctionComments: false,
+      sourcingResourceStatus: true,
+      cloudStorage: {
+        provider: "aws",
+        presigned_headers: {},
       },
-      {
-        type: 'linked_collection',
-        id: 'do_113140468925825024117'
-      }
-    ],
-    timeDiff: 5,
-    objectRollup: {
-      l1: 'do_113140468925825024117',
-      l2: 'do_113140468926914560125'
-    },
-    host: '',
-    defaultLicense: 'CC BY 4.0',
-    endpoint: '/data/v3/telemetry',
-    env: 'questionset_editor',
-    framework: 'test_k12_framework',
-    cloudStorageUrls: ['https://knowlg-public.s3-ap-south-1.amazonaws.com/'],
-    labels: {
-      save_collection_btn_label: 'Save as Draft',
-    },
-    correctionComments: false,
-    sourcingResourceStatus: true,
-    cloudStorage: {
-      provider: 'azure',
-      presigned_headers: {
-        'x-ms-blob-type': 'BlockBlob'
-      }
-    }
-  },
-  config: {
-    mode: 'edit',
-    enableQuestionCreation: true,
-    enableAddFromLibrary: true,
-    editableFields: {
-      sourcingreview: ['instructions'],
-      orgreview: ['name', 'instructions', 'learningOutcome'],
-      review: ['name', 'description'],
-    },
-    maxDepth: 4,
-    objectType: 'QuestionSet',
-    primaryCategory: 'Practice Question Set',
-    isRoot: true,
-    iconClass: 'fa fa-book',
-    hideSubmitForReviewBtn: false,
-    children: {
-      Question: [
-        'Multiple Choice Question',
-        'Subjective Question'
-      ]
     },
-    addFromLibrary: false,
-    hierarchy: {
-      level1: {
-        name: 'Section',
-        type: 'Unit',
-        mimeType: 'application/vnd.sunbird.questionset',
-        primaryCategory: 'Practice Question Set',
-        iconClass: 'fa fa-folder-o',
-        children: {},
-        addFromLibrary: true
+    config: {
+      mode: "edit",
+      enableQuestionCreation: true,
+      enableAddFromLibrary: true,
+      editableFields: {
+        sourcingreview: ["instructions"],
+        orgreview: ["name", "instructions", "learningOutcome"],
+        review: ["name", "description"],
+      },
+      maxDepth: 4,
+      objectType: "QuestionSet",
+      primaryCategory: "Practice Question Set",
+      isRoot: true,
+      iconClass: "fa fa-book",
+      hideSubmitForReviewBtn: false,
+      children: {
+        Question: ["Multiple Choice Question", "Subjective Question"],
       },
-      level2: {
-        name: 'Sub Section',
-        type: 'Unit',
-        mimeType: 'application/vnd.sunbird.questionset',
-        primaryCategory: 'Practice Question Set',
-        iconClass: 'fa fa-folder-o',
-        children: {
-          Question: [
-            'Multiple Choice Question',
-            'Subjective Question'
-          ]
+      addFromLibrary: false,
+      hierarchy: {
+        level1: {
+          name: "Section",
+          type: "Unit",
+          mimeType: "application/vnd.sunbird.questionset",
+          primaryCategory: "Practice Question Set",
+          iconClass: "fa fa-folder-o",
+          children: {},
+          addFromLibrary: true,
+        },
+        level2: {
+          name: "Sub Section",
+          type: "Unit",
+          mimeType: "application/vnd.sunbird.questionset",
+          primaryCategory: "Practice Question Set",
+          iconClass: "fa fa-folder-o",
+          children: {
+            Question: ["Multiple Choice Question", "Subjective Question"],
+          },
+          addFromLibrary: true,
+        },
+        level3: {
+          name: "Sub Section",
+          type: "Unit",
+          mimeType: "application/vnd.sunbird.questionset",
+          primaryCategory: "Practice Question Set",
+          iconClass: "fa fa-folder-o",
+          children: {
+            Question: ["Subjective Question"],
+          },
         },
-        addFromLibrary: true
       },
-      level3: {
-        name: 'Sub Section',
-        type: 'Unit',
-        mimeType: 'application/vnd.sunbird.questionset',
-        primaryCategory: 'Practice Question Set',
-        iconClass: 'fa fa-folder-o',
-        children: {
-          Question: [
-            'Subjective Question'
-          ]
-        }
-      }
+      contentPolicyUrl: "/term-of-use.html",
+      assetProxyUrl: "/assets/public/",
+      commonFrameworkLicenseUrl: "https://creativecommons.org/licenses/",
     },
-    contentPolicyUrl: '/term-of-use.html',
-    assetProxyUrl: '/assets/public/',
-    commonFrameworkLicenseUrl: 'https://creativecommons.org/licenses/'
-  }
-};
-
-const QuestionSetEditor: React.FC = () => {
+  };
   const editorRef = useRef<HTMLDivElement | null>(null);
   let isAppended = false;
 
   useEffect(() => {
     const fetchData = async () => {
       try {
-        const response = await createQuestionSet();
-        const identifier = response?.result?.identifier;
-        console.log('DO ID created successfully:', identifier);
+        // const response = await createQuestionSet();
+        // const identifier = response?.result?.identifier;
+        console.log("DO ID created successfully:", identifier);
 
         questionSetEditorConfig.context.identifier = identifier;
 
@@ -153,19 +145,21 @@ const QuestionSetEditor: React.FC = () => {
             JSON.stringify(editorConfig)
           );
 
-          questionsetEditorElement.addEventListener("editorEmitter", (event: Event) => {
-            console.log("On editorEvent", event);
-          });
+          questionsetEditorElement.addEventListener(
+            "editorEmitter",
+            (event: Event) => {
+              console.log("On editorEvent", event);
+            }
+          );
 
           if (editorRef.current) {
             console.log("Element appended");
             editorRef.current.appendChild(questionsetEditorElement);
             isAppended = true;
           }
         }
-
       } catch (error) {
-        console.error('Error creating question set:', error);
+        console.error("Error creating question set:", error);
       }
     };
 

diff --git a/src/pages/workspace/content/draft/index.tsx b/src/pages/workspace/content/draft/index.tsx
@@ -4,6 +4,7 @@ import { Typography, Box, TablePagination } from "@mui/material";
 import CourseCard from "../../../../components/CourseCard";
 import SearchBox from "../../../../components/SearchBox";
 import { getContent } from "@/services/ContentService";
+import { ContentType } from "@/utils/app.constant";
 
 const DraftPage = () => {
   const [selectedKey, setSelectedKey] = useState("draft");
@@ -13,6 +14,7 @@ const DraftPage = () => {
   const [filter, setFilter] = useState("all");
   const [sortBy, setSortBy] = useState("updated");
   const [contentList, setContentList] = React.useState<content[]>([]);
+  const [contentType, setContentType] = React.useState<string>("");
 
   const handleChangePage = (event: unknown, newPage: number) => {
     setPage(newPage);
@@ -59,6 +61,9 @@ const DraftPage = () => {
       try {
         const response = await getContent(["Draft", "FlagDraft"]);
         const contentList = response?.content || response?.QuestionSet;
+        if (response?.QuestionSet) {
+          setContentType(ContentType.QUESTION_SET);
+        }
         setContentList(contentList);
       } catch (error) {
         console.log(error);
@@ -85,7 +90,7 @@ const DraftPage = () => {
         <Box display="flex" flexWrap="wrap" gap={3}>
           {contentList?.map((content, index) => (
             <Box
-              key={index}
+              key={content?.identifier}
               sx={{
                 minWidth: "250px",
                 maxWidth: "250px",
@@ -96,9 +101,11 @@ const DraftPage = () => {
               <CourseCard
                 title={content?.name}
                 description={content?.description}
-                type={content?.contentType}
+                type={content?.contentType || contentType}
                 imageUrl={content.appIcon}
                 status={content.status}
+                identifier={content?.identifier}
+                mimeType={content?.mimeType}
                 onDelete={() => handleDelete(index)}
               />
             </Box>