Skip to content

Commit

Permalink
Merge pull request #165 from makeopensource/updated-devu
Browse files Browse the repository at this point in the history
Updated the styling for the coursedetil page and assignment page. I added a button to the assignment page. renamed a button on the course, fixed the course name format, padding in page wrapper
  • Loading branch information
jessehartloff authored Oct 29, 2024
2 parents 134dd4f + 5f5b848 commit abdf79f
Show file tree
Hide file tree
Showing 6 changed files with 80 additions and 29 deletions.
4 changes: 2 additions & 2 deletions devU-api/src/entities/user/user.controller.ts
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export async function detail(req: Request, res: Response, next: NextFunction) {
next(err)
}
}

//USE THIS
export async function getByCourse(req: Request, res: Response, next: NextFunction) {
try {
const courseId = parseInt(req.params.id)
Expand All @@ -41,7 +41,7 @@ export async function getByCourse(req: Request, res: Response, next: NextFunctio
const response = users.map(u => {
if (u) return serialize(u)
})

// TODO: This should return users, not userRoles
res.status(200).json(response)
} catch (err) {
next(err)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -168,8 +168,16 @@ const AssignmentDetailPage = () => {
{role.isInstructor() && <button className={styles.buttons} onClick={() => {
history.push(`/course/${courseId}/assignment/${assignmentId}/update`)
}}>Edit Assignment</button>}
</div>
</div>

<hr className = {styles.line} />
{role.isInstructor() && <button className={styles.buttons} onClick={() => {
history.push
(`/course/${courseId}/assignment/${assignmentId}/submissions`)
}}>Grade Submissions</button>}


</div>
</div>
</>
)}

Expand Down
15 changes: 13 additions & 2 deletions devU-client/src/components/pages/courses/courseDetailPage.scss
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@
//flex-direction: row;
gap: 20px;
margin-top:20px;
justify-content: flex-start;
}
.courseCard {
display: flex;
Expand Down Expand Up @@ -71,6 +72,7 @@


.courseDetailPage {

padding: 40px;


Expand All @@ -90,15 +92,24 @@

h1 {
margin: 0 0 10px 0;
font-size: 2.5rem;
font-size: 1.5rem;
text-align: left;
font-weight: bold;

}

h2 {
.h2 {
padding-top: 20px;
margin: 0 0 20px 0;
font-size: 1.0rem;
padding-bottom: 10px;
}

h3{
font-size: 1.5rem;
border-bottom: 1px solid;
color: $text-color;
}
}

.buttons-container {
Expand Down
22 changes: 14 additions & 8 deletions devU-client/src/components/pages/courses/courseDetailPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import ListItemText from '@mui/material/ListItemText'

import styles from './courseDetailPage.scss'
import {SET_ALERT} from "../../../redux/types/active.types";
import {useActionless} from "../../../redux/hooks";
import {useActionless, useAppSelector} from "../../../redux/hooks";
//import TextField from "../../shared/inputs/textField";
//import {useActionless, useAppSelector} from "redux/hooks";

Expand All @@ -30,6 +30,8 @@ const CourseDetailPage = () => {
const [courseInfo, setCourseInfo] = useState<Course | null>(null)
const [categoryMap, setCategoryMap] = useState<Record<string, Assignment[]>>({})
const [setAlert] = useActionless(SET_ALERT)
const role = useAppSelector((store) => store.roleMode);

// const[User, setUser]= useState < User <string>,preferredName>>({})

// const role = useAppSelector((store) => store.roleMode)
Expand Down Expand Up @@ -85,7 +87,7 @@ const CourseDetailPage = () => {

useEffect(() => {
fetchCourseInfo()
//fetchUserinfo()

}, [])
const history = useHistory()
return(
Expand All @@ -97,7 +99,7 @@ const CourseDetailPage = () => {
<div>

<div className={styles.header}>
<h1>{courseInfo.name}({courseInfo.semester})</h1>
<h1>CSE{courseInfo.number}: {courseInfo.name} ({courseInfo.semester})</h1>
<h2> Instructor: </h2>


Expand All @@ -111,38 +113,42 @@ const CourseDetailPage = () => {
</button>



{role.isInstructor() &&(
<button className={styles.actual_button} onClick={() => {
history.push(`/course/${courseId}/createAssignment`)
}}>Add Assignment
</button>
)}


{role.isInstructor() &&(
<button className={styles.actual_button} onClick={() => {
history.push(`/course/${courseId}/update`)
}}>Course WebSite
}}>Update Course Form
</button>
)}


<button className={styles.actual_button} onClick={handleDropCourse}
> Drop Course
</button>



</div>


</div>


<h1>Assignments</h1>
<h3>Assignments</h3>



<div className={styles.coursesContainer}>
{Object.keys(categoryMap).map((category, index) => (

<Card key={index} className={styles.courseCard}>
<CardContent>
<CardContent sx={{padding:0}}>
<Typography variant="h5" className={styles.color} style={{ textAlign: 'center' }}>
{category}
</Typography>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ interface RowProps {

user: User;

submission: Submission;
submission: Submission ;

submissionScore: SubmissionScore | undefined;

Expand Down Expand Up @@ -89,7 +89,8 @@ const SubmissionsTable: React.FC<TableProps> = ({ users, submissions, submission

<th>External ID</th>

<th>{assignment.name} Score</th> {/* Display assignment name */}
<th>{assignment.name} Score</th>
{/* Display assignment name + score*/}

<th>Feedback</th>

Expand All @@ -107,7 +108,7 @@ const SubmissionsTable: React.FC<TableProps> = ({ users, submissions, submission

return user ? (

<TableRow key={submission.id} user={user} submission={submission} submissionScore={submissionScore} />
<TableRow key={submission.id} user={user} submission={submission} submissionScore={submissionScore}/>

) : null;

Expand All @@ -120,7 +121,6 @@ const SubmissionsTable: React.FC<TableProps> = ({ users, submissions, submission
);



const InstructorSubmissionsPage: React.FC = () => {

const [loading, setLoading] = useState(true);
Expand All @@ -135,7 +135,7 @@ const InstructorSubmissionsPage: React.FC = () => {

const [assignment, setAssignment] = useState<Assignment | null>(null);

const { assignmentId, courseId } = useParams<
const {assignmentId, courseId } = useParams<

{assignmentId: string, courseId: string}>()

Expand All @@ -144,11 +144,6 @@ const InstructorSubmissionsPage: React.FC = () => {








useEffect(() => {

const fetchData = async () => {
Expand All @@ -171,6 +166,9 @@ const InstructorSubmissionsPage: React.FC = () => {

setUsers(users);

//const enrolledusers = await RequestService.get<User[]>(`/api/course/${courseId}/users`);
//setUsers(enrolledusers);



// Fetch submissions for the assignment
Expand Down Expand Up @@ -205,6 +203,9 @@ const InstructorSubmissionsPage: React.FC = () => {

setAssignment(assignment);

//setOriginalUsers(users); // Store fetched users in originalUsers
// setFilteredUsers(users);

} catch (error: any) {

console.error("Error fetching data:", error);
Expand All @@ -224,9 +225,29 @@ const InstructorSubmissionsPage: React.FC = () => {
fetchData();

}, [courseId, assignmentId]);
const handleStudentSearch = () => {

}
//const [filterUsers, setFilterUsers] = useState<User[]>([]);


const handleStudentSearch = (value:string) /*e : React.ChangeEvent<HTMLInputElement>)*/ => {

console.log("Search term:", value);
//const search = value.toLowerCase();

const filterusers = users.filter((user) =>{
//return(
const matchuser =
user.email.toLowerCase().includes(value.toLowerCase()) ||
user.externalId.toLowerCase().includes(value.toLowerCase())
// );
console.log(`User ${user.email} matches:`, matchuser);

return matchuser;
});
console.log("Filtered Users:",filterusers);
setUsers(filterusers);

};



Expand All @@ -252,13 +273,16 @@ const InstructorSubmissionsPage: React.FC = () => {
<TextField
onChange={handleStudentSearch}
label='Search'
id='preferredName'
id='email'
placeholder='search students'
/>


<SubmissionsTable

users={users}
//users={filteredUsers}

users = {users}

submissions={submissions}

Expand Down
4 changes: 3 additions & 1 deletion devU-client/src/components/shared/layouts/pageWrapper.scss
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,13 @@
display: flex;
flex-direction: column;

//navigation bar should be on top of the page each time
overflow-y: auto;
padding: 0vw; //navigation bar should be on top of the page each time
padding: 0vw;
}

.content {
margin-top: 20px;
flex-grow: 1;
padding: 10px 50px;
}

0 comments on commit abdf79f

Please sign in to comment.