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>
+ )
+}