admin

package.json

@@ -21,6 +21,7 @@
     "gh-pages": "^6.3.0",
     "graphql": "^16.10.0",
     "react": "^18.3.1",
+    "react-datasheet-grid": "^4.11.5",
     "react-doc-viewer": "^0.1.14",
     "react-dom": "^18.3.1",
     "react-fast-marquee": "^1.6.5",

src/Admin.tsx

@@ -0,0 +1,117 @@
+import React, { useEffect, useState } from "react";
+import { DataSheetGrid, textColumn, checkboxColumn, dateColumn, Column, keyColumn, intColumn } from 'react-datasheet-grid';
+import "react-datasheet-grid/dist/style.css";
+import { useNavigate } from "react-router-dom";
+import { ClassListing } from "./syllabus_comp";
+
+interface PreviewButtonProps {
+  fileName: string;
+}
+
+const PreviewButton = ({ fileName }: PreviewButtonProps) => {
+  const navigate = useNavigate();
+
+  const handlePreview = () => {
+    window.open(`/view/${encodeURIComponent(fileName)}`);
+  };
+
+  return (
+    <button className="bg-blue-500 text-white px-2 py-1 rounded" onClick={handlePreview}>
+      Preview
+    </button>
+  );
+};
+
+function Admin() {
+  const [username, setUsername] = useState("");
+  const [referenceDatabase, setReferenceDatabase] = useState<ClassListing[]>([]);
+  const [wholeDatabase, setWholeDatabase] = useState<ClassListing[]>([]);
+  const [databaseChanges, setDatabaseChanges] = useState<ClassListing[]>([]);
+  const columns: Column[] = [
+    {
+      component: ({ rowData }) => <PreviewButton fileName={rowData.fileName} />,
+      title: "Preview",
+    },
+    { ...keyColumn("reviewed", checkboxColumn), title: "Approved" },
+    { ...keyColumn("className", textColumn), title: "Class Name" },
+    { ...keyColumn("description", textColumn), title: "Description" },
+    { ...keyColumn("professor", textColumn), title: "Instructor" },
+    { ...keyColumn("length", intColumn), title: "Length" },
+    { ...keyColumn("createdByName", textColumn), title: "Submitted By" },
+    { ...keyColumn("createdByEmail", textColumn), title: "Email" },
+  ];
+
+  const fetchWholeDatabase = async () => {
+    try {
+      let formdata = new FormData();
+      formdata.append("username", username);
+      var response = await fetch(`http://api.sharesyllabus.me:4000/admin/wholedatabase`, {
+        method: "POST",
+        body: formdata,
+      });
+      var data = await response.json();
+      console.log(data);
+      setWholeDatabase(data);
+      setReferenceDatabase(data);
+    } catch {
+      console.log("error");
+    }
+  };
+
+  const changeServerDatabase = async () => {
+  }
+
+  useEffect(() => {
+    const changes = wholeDatabase.filter((item, index) => {
+        return JSON.stringify(item) !== JSON.stringify(referenceDatabase[index]);
+    });
+    setDatabaseChanges(changes);
+    console.log(changes);
+  }, [wholeDatabase]);
+
+  return (
+    <div className="flex flex-col items-center justify-center min-h-screen p-4">
+      <div className="text-black mb-4 w-full flex">
+        <input
+          type="text"
+          placeholder="Username"
+          value={username}
+          onChange={(e) => setUsername(e.target.value)}
+          onKeyDown={ (e) => {
+            if (e.key === "Enter") {
+              fetchWholeDatabase();
+            }
+          }}
+          className="p-2 border border-gray-300 rounded"
+        />
+        <button
+          onClick={fetchWholeDatabase}
+          className="ml-2 p-2 bg-blue-500 text-white rounded"
+        >
+          Fetch Whole Database
+        </button>
+        <div className="flex-1 flex items-center justify-end">
+            <span className="text-white">
+            {databaseChanges.length} changes
+            </span>
+        </div>
+        <button
+            onClick={changeServerDatabase}
+            className="ml-2 p-2 bg-purple-700 text-white rounded"
+        >
+            Push Changes
+        </button>
+      </div>
+      <div className="w-full flex-1 overflow-auto">
+        <DataSheetGrid
+          className="w-full h-full"
+          value={wholeDatabase}
+          columns={columns}
+          onChange={setWholeDatabase}
+        />
+      </div>
+    </div>
+  );
+}
+
+export default Admin;

src/App.tsx

@@ -150,7 +150,7 @@ function App() {
             </Marquee>
           </div>
           <div className="w-full p-6 flex justify-between text-sm underline">
-            <a href="portal.rcc.edu">MyPortal</a>
+            <a href="https://portal.rcc.edu">MyPortal</a>
             <a href="https://www.norcocollege.edu/articulation/documents/norco-igetc-2024-25.pdf">IGETC</a>
             <a href="https://www.norcocollege.edu/services/counseling/index.html">Counseling</a>
             <a href="https://mvc.edu/_resources/files/transfer/rccd-associate-degree-requirements.pdf ">RCCD GE (Graduation Requirements)</a>

src/index.css

@@ -17,6 +17,23 @@
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+
+  --dsg-border-color:
+  --dsg-selection-border-color:
+  --dsg-selection-border-radius:
+  --dsg-selection-border-width:
+  --dsg-selection-background-color:
+  --dsg-selection-disabled-border-color:
+  --dsg-selection-disabled-background-color:
+  --dsg-corner-indicator-width:
+  --dsg-header-text-color:
+  --dsg-header-active-text-color:
+  --dsg-cell-background-color:
+  --dsg-cell-disabled-background-color:
+  --dsg-transition-duration:
+  --dsg-expand-rows-indicator-width:
+  --dsg-scroll-shadow-width:
+  --dsg-scroll-shadow-color:
 }
 
 #root {

src/main.tsx

@@ -3,6 +3,7 @@ import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
 import './index.css'
 import App from './App.tsx'
 import View from './View.tsx'
+import Admin from './Admin.tsx'
 
 
 
@@ -14,6 +15,7 @@ createRoot(document.getElementById('root')!).render(
       <Routes>
         <Route path="/" element={<App />} />
         <Route path="/view/:file" element={<View />} />
+        <Route path="/admin" element={<Admin />} />
       </Routes>
     </Router>