From cbc2d631fb64aa001218967650d6de95621bca0a Mon Sep 17 00:00:00 2001 From: Jae Young Ahn Date: Fri, 2 May 2025 12:34:17 -0700 Subject: [PATCH 1/2] fetching assignment with API --- src/pages/AssignmentPage.jsx | 66 +++++++++++++++++++++------- src/scss/components/_assignment.scss | 39 ++++++++++++++++ 2 files changed, 89 insertions(+), 16 deletions(-) diff --git a/src/pages/AssignmentPage.jsx b/src/pages/AssignmentPage.jsx index 65f9ccd..5dd5d44 100644 --- a/src/pages/AssignmentPage.jsx +++ b/src/pages/AssignmentPage.jsx @@ -1,7 +1,5 @@ -import React, { useState } from "react"; +import React, { useState, useEffect } from "react"; import "../scss/components/_assignment.scss"; -import { useEffect } from "react"; - const AssignmentPage = () => { const [studentName, setStudentName] = useState(""); @@ -17,8 +15,30 @@ const AssignmentPage = () => { useEffect(() => { document.title = "Assignment"; + fetchAssignments(); }, []); - + + const fetchAssignments = async () => { + try { + const res = await fetch("http://localhost:8082/assignments/instructor/9", { + // credentials: "include", + }); + if (!res.ok) throw new Error("Failed to fetch"); + + const data = await res.json(); + console.log("Fetched assignments:", data); // ✅ This line shows what’s coming from the API + setProjects(data); + + // Optional: Remove duplicate assignment IDs if needed + const unique = Array.from( + new Map(data.map((item) => [item.assignmentid, item])).values() + ); + + setProjects(unique); + } catch (error) { + console.error("Error fetching assignments:", error); + } + }; const resetForm = () => { setStudentName(""); @@ -35,9 +55,9 @@ const AssignmentPage = () => { e.preventDefault(); const newProject = { - studentName, - campID, - programID, + studentname: studentName, + campid: campID, + programid: programID, title, description, fileName: file ? file.name : null, @@ -58,11 +78,11 @@ const AssignmentPage = () => { const handleEdit = (index) => { const project = projects[index]; - setStudentName(project.studentName); - setCampID(project.campID); - setProgramID(project.programID); - setTitle(project.title); - setDescription(project.description); + setStudentName(project.studentname || project.studentName || ""); + setCampID(project.campid || project.campID || ""); + setProgramID(project.programid || project.programID || ""); + setTitle(project.title || ""); + setDescription(project.description || ""); setFile(null); setEditingIndex(index); setShowModal(true); @@ -131,16 +151,30 @@ const AssignmentPage = () => { {projects.length > 0 && (
- {/*

📋 Projects

*/} {projects.map((project, index) => (
- Student Name: {project.studentName} | CampID: {project.campID} | ProgramID: {project.programID} + Student Name: {project.studentname || project.studentName} |{" "} + CampID: {project.campid || project.campID} |{" "} + ProgramID: {project.programid || project.programID}
-

{project.title}

-

{project.description}

+ + {project.title &&

{project.title}

} + {project.description &&

{project.description}

} {project.fileName &&

Uploaded File: {project.fileName}

} + {project.assignmenturl && ( +

+ View Assignment +

+ )} + {project.originalfile && ( +

+ Original File |{" "} + Editable File +

+ )} +
diff --git a/src/scss/components/_assignment.scss b/src/scss/components/_assignment.scss index ff3fe9b..9f440fc 100644 --- a/src/scss/components/_assignment.scss +++ b/src/scss/components/_assignment.scss @@ -297,3 +297,42 @@ 0 0 30px rgba(0, 191, 255, 0.9); } } + + +.assignment-list-box { + margin-top: 40px; + + h3 { + font-size: 1.5rem; + margin-bottom: 20px; + } + + .assignment-cards { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); + gap: 20px; + } + + .assignment-card { + background: #f5f5f5; + padding: 20px; + border-radius: 12px; + box-shadow: 0 2px 6px rgba(0,0,0,0.1); + transition: all 0.3s ease; + + p { + margin: 6px 0; + } + + a { + color: #2c7be5; + text-decoration: underline; + word-break: break-word; + } + + &:hover { + transform: translateY(-4px); + box-shadow: 0 4px 12px rgba(0,0,0,0.15); + } + } +} From 1f7124a786388c85b4feecf38c3ebbf8a4d944e8 Mon Sep 17 00:00:00 2001 From: Jae Young Ahn Date: Fri, 2 May 2025 13:51:25 -0700 Subject: [PATCH 2/2] assignment page styling updated --- src/pages/AssignmentPage.jsx | 5 +- src/scss/components/_assignment.scss | 105 ++++++++++++++++++++++----- 2 files changed, 90 insertions(+), 20 deletions(-) diff --git a/src/pages/AssignmentPage.jsx b/src/pages/AssignmentPage.jsx index 5dd5d44..d8b5941 100644 --- a/src/pages/AssignmentPage.jsx +++ b/src/pages/AssignmentPage.jsx @@ -20,14 +20,13 @@ const AssignmentPage = () => { const fetchAssignments = async () => { try { - const res = await fetch("http://localhost:8082/assignments/instructor/9", { + const res = await fetch("http://localhost:8082/instructor/list/9", { // credentials: "include", }); if (!res.ok) throw new Error("Failed to fetch"); const data = await res.json(); - console.log("Fetched assignments:", data); // ✅ This line shows what’s coming from the API - setProjects(data); + // Optional: Remove duplicate assignment IDs if needed const unique = Array.from( diff --git a/src/scss/components/_assignment.scss b/src/scss/components/_assignment.scss index 9f440fc..f83f856 100644 --- a/src/scss/components/_assignment.scss +++ b/src/scss/components/_assignment.scss @@ -1,7 +1,11 @@ .assignment-page { - max-width: 600px; - margin: auto; + max-width: 100%; padding: 20px; + margin-top: 70rem; + overflow-x: hidden; + overflow-y: auto; + min-height: 100vh; + box-sizing: border-box; form { margin-bottom: 20px; @@ -44,32 +48,97 @@ } } - .project-list { - margin-top: 2rem; + // .project-list { + // display: grid; + // grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + // gap: 1.5rem; + // margin-top: 2rem; + // padding-bottom: 3rem; + + // .project-item { + // background: #ffffff; + // border: 1px solid #e0e0e0; + // border-radius: 12px; + // padding: 1.5rem; + // box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); + // transition: transform 0.2s ease, box-shadow 0.2s ease; + + // .project-meta { + // margin-bottom: 0.75rem; + + // strong { + // color: #34495e; + // } + // } + + // h4 { + // margin: 0.5rem 0; + // font-size: 1.2rem; + // color: #2d3436; + // } + + // p { + // margin: 0.25rem 0; + // color: #555; + // line-height: 1.4; + + // strong { + // color: #2d3436; + // } + // } + + // .action-buttons { + // display: flex; + // gap: 0.5rem; + // margin-top: 0.75rem; + + // button { + // background-color: #f4f4f4; + // border: 1px solid #ddd; + // border-radius: 6px; + // padding: 0.4rem 0.8rem; + // cursor: pointer; + // font-size: 0.9rem; + + // &:hover { + // background-color: #e9ecef; + // } + + // &:nth-child(1) { + // color: #2c3e50; + // } + + // &:nth-child(2) { + // color: #c0392b; + // } + + // &:nth-child(3) { + // color: #16a085; + // } + // } + // } + // } + // } - h3 { - color: #4a90e2; - } + .project-list { + display: grid; + grid-template-columns: repeat(3, 1fr); // exactly 2 columns + gap: 1.5rem; + margin-top: 2rem; + padding-bottom: 3rem; .project-item { background: #ffffff; border: 1px solid #e0e0e0; border-radius: 12px; padding: 1.5rem; - margin-bottom: 1.5rem; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); transition: transform 0.2s ease, box-shadow 0.2s ease; - - // &:hover { - // transform: translateY(-2px); - // box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08); - // } + overflow-wrap: break-word; + box-shadow: rgb(211, 0, 197) 0px 0px 15px, rgb(255, 42, 109) 0px 0px 25px; .project-meta { - justify-content: space-between; - align-items: center; margin-bottom: 0.75rem; - flex-wrap: wrap; strong { color: #34495e; @@ -104,7 +173,6 @@ padding: 0.4rem 0.8rem; cursor: pointer; font-size: 0.9rem; - transition: background-color 0.2s ease; &:hover { background-color: #e9ecef; @@ -126,6 +194,7 @@ } } + .modal-overlay { position: fixed; @@ -138,6 +207,7 @@ align-items: center; justify-content: center; z-index: 1000; + overflow: hidden; } .modal { @@ -148,6 +218,7 @@ width: 100%; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); animation: fadeIn 0.3s ease; + overflow: auto; } .modal h3 {