Create Admin Page frontend

frontend/package.json

@@ -17,10 +17,12 @@
     "vite-plugin-solid": "^2.8.2"
   },
   "dependencies": {
+    "@solid-primitives/keyboard": "^1.2.8",
     "@solidjs/router": "^0.13.2",
     "@vercel/analytics": "^1.2.0",
     "solid-icons": "^1.1.0",
     "solid-js": "^1.8.11",
     "solid-toast": "^0.5.0"
-  }
+  },
+  "packageManager": "[email protected]+sha512.9df9cf27c91715646c7d675d1c9c8e41f6fce88246f1318c1aa6a1ed1aeb3c4f032fcdf4ba63cc69c4fe6d634279176b5358727d8f2cc1e65b65f43ce2f8bfb0"
 }

frontend/src/components/PDFLister.tsx

@@ -0,0 +1,59 @@
+import { AiFillCloseCircle, AiFillWarning, AiOutlineFilePdf as PDFIcon } from "solid-icons/ai";
+import { Component, createSignal } from "solid-js";
+import { createStore } from "solid-js/store";
+import { Exam, IAdminQuestionPaperResult, Semester, approvalStatus } from "../types/types";
+import { IoCheckmarkCircle } from "solid-icons/io";
+import { createShortcut } from "@solid-primitives/keyboard";
+
+type props = {
+    questionPaper: IAdminQuestionPaperResult;
+    isEditMode: boolean;
+}
+
+export const ListElement: Component<props> = (props) => {
+    const [questionPaperDetails, setQuestionPaperDetails] = createStore<IAdminQuestionPaperResult>(props.questionPaper);
+
+    function approvalStatus(approvalStatus: approvalStatus) {
+        if (approvalStatus == null) {
+            return (<AiFillWarning/>);
+        } else if (approvalStatus) {
+            return (<IoCheckmarkCircle/>);
+        } else {
+            return (<AiFillCloseCircle/>);
+        }
+    };
+
+    function paperApprove(approvalStatus: approvalStatus){
+        if (approvalStatus == null) {setQuestionPaperDetails("approval", true)}
+        else {
+            setQuestionPaperDetails("approval", null)
+        }
+    };
+
+    function paperReject(approvalStatus: approvalStatus){
+        if (approvalStatus == null) {setQuestionPaperDetails("approval", false)}
+        else {
+            setQuestionPaperDetails("approval", null)
+        }
+    }
+
+    // createShortcut(
+    //     ["Alt", "V"],
+    //     () => {
+    //         paperApprove(questionPaperDetails.approval);
+    //     },
+    //     { preventDefault: true},
+    // )
+
+    return (
+        <tr>
+            <td><input type="number" value={questionPaperDetails.year} onInput={(e) => setQuestionPaperDetails("year", parseInt(e.target.value))} readonly={!props.isEditMode}/></td>
+            <td><input type="string" value={questionPaperDetails.course_code} onInput={(e) => setQuestionPaperDetails("course_code", e.target.value)} readonly={!props.isEditMode}/></td>
+            <td><input type="string" value={questionPaperDetails.course_name} onInput={(e) => setQuestionPaperDetails("course_name", e.target.value)} readonly={!props.isEditMode}/></td>
+            <td><input type="string" value={questionPaperDetails.exam} onInput={(e) => setQuestionPaperDetails("exam", e.target.value)} readonly={!props.isEditMode}/></td>
+            <td><input type="string" value={questionPaperDetails.semester} onInput={(e) => setQuestionPaperDetails("semester", e.target.value)} readonly={!props.isEditMode}/></td>
+            <td><PDFIcon/><a href={props.questionPaper.filelink} target="_blank">{questionPaperDetails.course_code}.pdf</a></td>
+            <td><button onClick={(e) => {e.preventDefault();if (props.isEditMode) {paperApprove(questionPaperDetails.approval)}}} onContextMenu={(e) => {e.preventDefault();if (props.isEditMode){paperReject(questionPaperDetails.approval)}}}>{approvalStatus(questionPaperDetails.approval)} </button></td>
+        </tr>
+    )
+}

frontend/src/components/PDFTable.tsx

@@ -0,0 +1,51 @@
+import { Component, createSignal, For } from "solid-js";
+import { IAdminQuestionPaperResult } from "../types/types";
+import { ListElement } from "./PDFLister";
+import { IoPencil } from "solid-icons/io";
+import { createShortcut } from "@solid-primitives/keyboard";
+import { createStore } from "solid-js/store";
+
+type props =  {
+    QuestionPapers: IAdminQuestionPaperResult[];
+}
+
+export const PDFLister: Component<props> = (props) => {
+    const [reviewList, setReviewList] = createStore<IAdminQuestionPaperResult[]>(props.QuestionPapers);
+    const [isEditMode, setIsEditMode] = createSignal<boolean>(true)
+
+    function toggleEditMode(){
+        setIsEditMode(!isEditMode());
+    }
+
+    createShortcut(
+        ["Alt", "Z"],
+        () => {
+            toggleEditMode();
+        },
+        { preventDefault: true},
+    );
+
+    return (
+        <div>
+            <span><button onclick={toggleEditMode}><IoPencil/></button> is editable = {isEditMode().toString()}</span>
+            <table>
+                <thead>
+                    <tr>
+                        <th>Year</th>
+                        <th>Code</th>
+                        <th>Course Name</th>
+                        <th>Exam</th>
+                        <th>Semester</th>
+                        <th>File</th>
+                        <th>Approval</th>
+                    </tr>
+                </thead>
+
+                <For each={reviewList}>{(item) => (
+                    <ListElement questionPaper={item} isEditMode={isEditMode()}/>
+                )}
+                </For>
+            </table>
+        </div>
+    )
+}