Merge branch 'main' of https://github.com/mtech-31-quemistry/quemistr…

…y_client_web

app/(main)/questions/topics/page.tsx

@@ -1,16 +1,63 @@
-import React from 'react';
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { QuestionsService } from '../../../../service/QuestionsService';
+import { TreeTable } from 'primereact/treetable';
+import { Column } from 'primereact/column';
+import { InputText } from 'primereact/inputtext';
+import { Button } from 'primereact/button';
+import { SelectButton } from 'primereact/selectbutton';
+
+const ManageTopics = () => {
+
+    const [topics, setTopics] = useState<any[]>([]);
+    useEffect(()=>{
+        QuestionsService.getTopics().then((t) => {
+            var nodes = t.map( item => {
+                    let  childnode: any[] = [];
+                    if(item.skills){
+                        childnode = item.skills.map( skill => {
+                            return { "key": item.id+"-"+skill.id,
+                                    "data": { "name": skill.name , "active": skill.active, "type": "skill"}
+                                    };
+                            });
+                    }
+                    return { "key" : item.id, "data" : { "name": item.name, "active": item.active, "type": "topic"}, children : childnode }
+                });
+            setTopics(nodes);
+        });
+
+    }, [])
+    const actionTemplate = (node: any) => {
+        return (
+            node.data.type === "skill" ||
+            <div className="flex gap-1">
+                <Button icon="pi pi-plus" label='Skill'></Button>
+            </div>
+        );
+    };
+    //edit name
+    const onEditorValueChange = (options: any, value: string) => {
+
+    }
+    const inputTextEditor = (options: any) => {
+        return <InputText type="text" value={options.rowData[options.field]} onChange={(e) => onEditorValueChange(options, e.target.value)} onKeyDown={(e) => e.stopPropagation()} />;
+    };
 
-const EmptyPage = () => {
     return (
         <div className="grid">
             <div className="col-12">
                 <div className="card">
                     <h5>Manage Topics</h5>
-                    <p>Use this page to start from scratch and place your custom content.</p>
+                    <TreeTable value={topics}>
+                        <Column field="name" header="Name" expander/>
+                        <Column field="active" header="Active"/>
+                        <Column body={actionTemplate} headerClassName="w-20rem" />
+                    </TreeTable>
                 </div>
             </div>
         </div>
     );
 };
 
-export default EmptyPage;
+export default ManageTopics;

public/demo/data/topics.json

@@ -1,31 +1,84 @@
 {
     "topics": [{
         "id": 1,
-        "name": "Chemical Bonding"
-        },{
-        "id": 2,
-        "name": "Atomic Structure"
+        "name": "Chemical Bonding",
+        "active": true,
+        "skills": [
+            {
+                "id": 1,
+                "active": true,
+                "name": "Simple molecular structure"
+            },
+            {
+                "id": 2,
+                "active": true,
+                "name": "Intermolecular forces"
+            },
+            {
+                "id": 3,
+                "active": true,
+                "name": "Types of structure"
+            },
+            {
+                "id": 4,
+                "active": true,
+                "name": "Comparing physical property"
+            }
+        ]
+        },
+        {
+            "id": 2,
+            "name": "Atomic Structure",
+            "active": true,
+            "skills": [
+                {
+                    "id": 5,
+                    "active": true,
+                    "name": "Atomic and proton number, mass and nucleon number"
+                },
+                {
+                    "id": 6,
+                    "active": true,
+                    "name": "Distribution of mass and charge"
+               }
+
+            ]
         },
         {
             "id": 3,
+            "active": true,
             "name": "State of matter"
+        },
+        {
+            "id": 4,
+            "active": true,
+            "name": "Atoms, molecules and stoichiometry"
+        },
+        {
+            "id": 5,
+            "active": true,
+            "name": "Chemical energetics"
         }
     ],
     "skills": [{
         "id": 1,
         "name": "Simple molecular structure",
+        "active": true,
         "topic_id": 1 
     },{
         "id": 2,
         "name": "Intermolecular forces",
+        "active": true,
         "topic_id": 1 
     },{
         "id": 3,
         "name": "Types of structure",
+        "active": true,
         "topic_id": 1 
     },{
         "id": 4,
         "name": "Comparing physical property",
+        "active": true,
         "topic_id": 1 
     }]
 }

service/QuestionsService.tsx

@@ -27,7 +27,7 @@ export const QuestionsService = {
                 headers: { 
                     'Content-Type': 'application/json' 
                 },
-                credentials: "include" 
+                credentials: 'include'
             })
             .then((res) => {
                 return res.json();

types/questions.d.ts

@@ -26,11 +26,15 @@ declare namespace Questions {
     interface Topic{
         id?: number;
         name: string;
+        active: boolean;
+        skills: Skill[];
     }
 
     interface Skill{
         id?: number;
         name: string;
+        active: boolean;
+        topic_id: number;
         topicId: number;
     }