From a62792af72f5ff0350b01c5bf4e28c9439ede6be Mon Sep 17 00:00:00 2001
From: linxiaoxin <lin_xiaoxin@hotmail.com>
Date: Fri, 2 Aug 2024 22:15:17 +0800
Subject: [PATCH] Integrate with question API to get topics

---
 app/(main)/questions/topics/page.tsx | 25 +++++++++++------------
 public/demo/data/topics.json         | 30 ++++++++++++++--------------
 service/QuestionsService.tsx         |  8 +++++++-
 types/questions.d.ts                 |  4 ++--
 4 files changed, 36 insertions(+), 31 deletions(-)

diff --git a/app/(main)/questions/topics/page.tsx b/app/(main)/questions/topics/page.tsx
index 197f97a..ca13d18 100644
--- a/app/(main)/questions/topics/page.tsx
+++ b/app/(main)/questions/topics/page.tsx
@@ -6,9 +6,9 @@ import { TreeTable } from 'primereact/treetable';
 import { Column } from 'primereact/column';
 import { InputText } from 'primereact/inputtext';
 import { Button } from 'primereact/button';
-import { ToggleButton } from 'primereact/togglebutton';
 import { Toolbar } from 'primereact/toolbar';
 import { Dialog } from 'primereact/dialog';
+import { SelectButton } from 'primereact/selectbutton';
 
 const ManageTopics = () => {
     const [topicNodes, setTopicNodes] = useState<any[]>([]);
@@ -34,11 +34,11 @@ const ManageTopics = () => {
                 if(item.skills){
                     childnode = item.skills.map( skill => {
                         return { "key": item.id+"-"+skill.id,
-                                "data": { "id": skill.id,"name": skill.name , "active": skill.active, "type": "skill", "edited": skill.edited, "topicId": item.id}
+                                "data": { "id": skill.id,"name": skill.name , "status": skill.status, "type": "skill", "edited": skill.edited, "topicId": item.id}
                                 };
                         });
                 }
-                return { "key" : item.id, "data" : { "id":item.id, "name": item.name, "active": item.active, "type": "topic", "edited": item.edited}, children : childnode }
+                return { "key" : item.id, "data" : { "id":item.id, "name": item.name, "status": item.status, "type": "topic", "edited": item.edited}, children : childnode }
             });
             setTopicNodes(nodes);
 
@@ -52,11 +52,10 @@ const ManageTopics = () => {
             </div>
         );
     };
-    const activeTemplate = (node: any) => {
+    const statusTemplate = (node: any) => {
         return(<>
             {!node.data.id ||
-            <ToggleButton onLabel="Active" offLabel="Inactive"
-                checked={node.data.active} onChange={(e) => onActiveStatusChange(node, e.target.value)}/>
+            <SelectButton value={node.data.status} onChange={(e) => onStatusChange(node, e.target.value)} options={['ACTIVE','INACTIVE']}/>
             }
             {node.data.id != undefined ||
             <Button label='Undo' icon="pi pi-undo" onClick={(e)=> undoAddSkill(node)}/>
@@ -65,18 +64,18 @@ const ManageTopics = () => {
         );
     }
     //edit active status
-    const onActiveStatusChange = (node: any, value: boolean) => {
+    const onStatusChange = (node: any, value: string) => {
         var found = false;
         let updatedTopics = topics.map( (t)=> {
             if(node.data.type === 'topic' && t.id === node.key){
-                t.active = value;
+                t.status = value;
                 t.edited = true;
                 found = true;
             }
             else if(node.data.type === 'skill' && t.skills){
                 t.skills.map((s) => {
                     if(s.id === node.data.id){
-                        s.active = value;
+                        s.status = value;
                         s.edited = true;
                         found = true;
                     }
@@ -125,7 +124,7 @@ const ManageTopics = () => {
                 found = true;
                 let newSkill: Questions.Skill = {
                     name: "",
-                    active: true,
+                    status: "ACTIVE",
                     edited: true,
                     topicId: node.key
                 }
@@ -172,7 +171,7 @@ const ManageTopics = () => {
         setAddTopic(false);
         let newTopic: Questions.Topic = {
             name: newTopicName,
-            active: true,
+            status: "ACTIVE",
             skills: [],
             edited: true
         }
@@ -223,8 +222,8 @@ const ManageTopics = () => {
                         expandedKeys={expandedKeys} onToggle={(e) => setExpandedKeys(e.value)} >
                         <Column field="name" header="Name" expander 
                             editor={nameEditor} style={{ height: '3.5rem' }} className="w-20rem"/>
-                        <Column body={activeTemplate} field="active" header="Active" className="w-4rem"/>
-                        <Column body={actionTemplate} className="w-4rem" />
+                        <Column body={statusTemplate} field="status" header="Status" className="w-16rem"/>
+                        <Column body={actionTemplate} className="w-8rem" />
                     </TreeTable>
                 </div>
             </div>
diff --git a/public/demo/data/topics.json b/public/demo/data/topics.json
index 8e0de0b..6f1874b 100644
--- a/public/demo/data/topics.json
+++ b/public/demo/data/topics.json
@@ -2,26 +2,26 @@
     "topics": [{
         "id": 1,
         "name": "Chemical Bonding",
-        "active": true,
+        "status": "ACTIVE",
         "skills": [
             {
                 "id": 1,
-                "active": true,
+                "status": "ACTIVE",
                 "name": "Simple molecular structure"
             },
             {
                 "id": 2,
-                "active": true,
+                "status": "ACTIVE",
                 "name": "Intermolecular forces"
             },
             {
                 "id": 3,
-                "active": true,
+                "status": "ACTIVE",
                 "name": "Types of structure"
             },
             {
                 "id": 4,
-                "active": true,
+                "status": "ACTIVE",
                 "name": "Comparing physical property"
             }
         ]
@@ -29,16 +29,16 @@
         {
             "id": 2,
             "name": "Atomic Structure",
-            "active": true,
+            "status": "ACTIVE",
             "skills": [
                 {
                     "id": 5,
-                    "active": true,
+                    "status": "ACTIVE",
                     "name": "Atomic and proton number, mass and nucleon number"
                 },
                 {
                     "id": 6,
-                    "active": true,
+                    "status": "ACTIVE",
                     "name": "Distribution of mass and charge"
                }
     
@@ -46,39 +46,39 @@
         },
         {
             "id": 3,
-            "active": true,
+            "status": "ACTIVE",
             "name": "State of matter"
         },
         {
             "id": 4,
-            "active": true,
+            "status": "ACTIVE",
             "name": "Atoms, molecules and stoichiometry"
         },
         {
             "id": 5,
-            "active": true,
+            "status": "ACTIVE",
             "name": "Chemical energetics"
         }
     ],
     "skills": [{
         "id": 1,
         "name": "Simple molecular structure",
-        "active": true,
+        "status": "ACTIVE",
         "topic_id": 1 
     },{
         "id": 2,
         "name": "Intermolecular forces",
-        "active": true,
+        "status": "ACTIVE",
         "topic_id": 1 
     },{
         "id": 3,
         "name": "Types of structure",
-        "active": true,
+        "status": "ACTIVE",
         "topic_id": 1 
     },{
         "id": 4,
         "name": "Comparing physical property",
-        "active": true,
+        "status": "ACTIVE",
         "topic_id": 1 
     }]
 }
\ No newline at end of file
diff --git a/service/QuestionsService.tsx b/service/QuestionsService.tsx
index 10c6624..31927dd 100644
--- a/service/QuestionsService.tsx
+++ b/service/QuestionsService.tsx
@@ -3,6 +3,7 @@ import { Questions } from '@/types';
 const QuesionsSvcUrl = process.env.NEXT_PUBLIC_QUEMISTRY_QUESTIONS_URL || ''
 const retrieveQuestionUrl = `${process.env.NEXT_PUBLIC_QUEMISTRY_GATEWAY_URL}/questions/retrieve`
 const saveQuestionUrl = `${process.env.NEXT_PUBLIC_QUEMISTRY_GATEWAY_URL}/questions`
+const QuestionsTopicsUrl = `${process.env.NEXT_PUBLIC_QUEMISTRY_QUESTIONS_URL}/topics`
 
 export const QuestionsService = {
     addMCQ(data : any) {
@@ -69,7 +70,12 @@ export const QuestionsService = {
     //         );
     // },
     getTopics() {
-        return fetch('/demo/data/topics.json', { headers: { 'Cache-Control': 'no-cache' } })
+        return fetch(QuestionsTopicsUrl, { 
+                headers: { 
+                    'Content-Type': 'application/json' 
+                },
+                credentials: 'include'
+            })
             .then((res) => res.json())
             .then((d) => d.topics as Questions.Topic[]);
     },
diff --git a/types/questions.d.ts b/types/questions.d.ts
index 1feb79b..5266aee 100644
--- a/types/questions.d.ts
+++ b/types/questions.d.ts
@@ -26,7 +26,7 @@ declare namespace Questions {
     interface Topic{
         id?: number;
         name: string;
-        active: boolean;
+        status: string;
         skills: Skill[];
         edited: boolean = false; //false by default (only used by UI)
     }
@@ -34,7 +34,7 @@ declare namespace Questions {
     interface Skill{
         id?: number;
         name: string;
-        active: boolean;
+        status: string;
         topicId: number;
         edited: boolean = false; //false by default (only used by UI)
     }