View courses

apps/backend/src/courses/course.controller.ts

@@ -0,0 +1,9 @@
+import { Controller, Get, Post, Query } from "@nestjs/common";
+import { CoursesService } from "./course.service";
+
+@Controller()
+export class CoursesController {
+	constructor(readonly courseService: CoursesService) {}
+	// Responsibility: handle API requests
+
+}

apps/backend/src/courses/course.dto.ts

@@ -0,0 +1,3 @@
+export class CourseDTO{
+    courseName: string
+}

apps/backend/src/courses/course.module.ts

@@ -0,0 +1,12 @@
+import { Module } from '@nestjs/common';
+import { CoursesController } from './course.controller';
+import { CoursesService } from './course.service';
+import { TypeOrmModule } from "@nestjs/typeorm";
+import { Course } from '../entities/course.entity';
+
+@Module({
+	imports: [TypeOrmModule.forFeature([Course])],
+	controllers: [CoursesController],
+	providers: [CoursesService],
+})
+export class CoursesModule {}

apps/backend/src/courses/course.service.ts

@@ -0,0 +1,24 @@
+import { Injectable } from '@nestjs/common';
+import { InjectRepository } from '@nestjs/typeorm';
+import { Repository } from 'typeorm';
+import { Course } from '../entities/course.entity';
+
+@Injectable()
+export class CoursesService {
+	constructor(
+		@InjectRepository(Course)
+		private readonly courseRepository: Repository<Course>,
+	) {}
+
+	// Responsibility: handle business logic - make DB requests
+	async getCourses(department: string): Promise<Course[]> {
+		//Make DB Request
+		const courses = await this.courseRepository.find({
+			where: {
+				department,
+			},
+		});
+
+		return courses;
+	}
+}

apps/backend/src/degrees/degree.controller.ts

@@ -0,0 +1,13 @@
+import { Controller, Get, Post, Query } from "@nestjs/common";
+import { DegreeService } from "./degree.service";
+
+@Controller()
+export class DegreeController {
+	constructor(readonly degreeService: DegreeService) {}
+	// Responsibility: handle API requests
+
+    @Get()
+    async find(){
+        return this.degreeService.findAll();
+    }
+}

apps/backend/src/degrees/degree.module.ts

@@ -0,0 +1,12 @@
+import { Module } from '@nestjs/common';
+import { DegreeController } from './degree.controller';
+import { DegreeService } from './degree.service';
+import { TypeOrmModule } from "@nestjs/typeorm";
+import { Degree } from '../entities/degree.entity';
+
+@Module({
+	imports: [TypeOrmModule.forFeature([Degree])],
+	controllers: [DegreeController],
+	providers: [DegreeService],
+})
+export class DegreeModule {}

apps/backend/src/degrees/degree.service.ts

@@ -0,0 +1,16 @@
+import { Injectable } from '@nestjs/common';
+import { InjectRepository } from '@nestjs/typeorm';
+import { Repository } from 'typeorm';
+import { Degree } from '../entities/degree.entity';
+
+@Injectable()
+export class DegreeService {
+	constructor(
+		@InjectRepository(Degree)
+		private readonly degreeRepository: Repository<Degree>,
+	) {}
+
+    async findAll(): Promise<Degree[]>{
+        return this.degreeRepository.find();
+    }
+}

apps/backend/src/routes.module.ts

@@ -1,10 +1,15 @@
 import { Module } from '@nestjs/common';
 import { HelloModule } from './hello/hello.module';
 import { RouterModule } from '@nestjs/core';
+import { TermModule } from './terms/term.module';
+import { DegreeModule } from './degrees/degree.module';
+import { Degree } from './entities/degree.entity';
 
 @Module({
 	imports: [
 		HelloModule,
+		TermModule,
+		DegreeModule,
 		RouterModule.register([
 			{
 				path: '/rest-api',
@@ -13,6 +18,14 @@ import { RouterModule } from '@nestjs/core';
 						path: '/hello',
 						module: HelloModule,
 					},
+					{
+						path:'/term',
+						module: TermModule,
+					},
+					{
+						path:'/degree',
+						module: DegreeModule,
+					},
 				],
 			},
 		]),

apps/backend/src/terms/term.controller.ts

@@ -0,0 +1,23 @@
+import { Controller, Get, Post, Query } from "@nestjs/common";
+import { TermService } from "./term.service";
+import { Term } from "../entities/term.entity";
+import { Course } from "../entities/course.entity";
+
+@Controller()
+export class TermController {
+	constructor(readonly termService: TermService) {}
+
+	// Responsibility: handle API requests
+	@Get()
+	async findAll():Promise<Term[]>{
+		return this.termService.findAll();
+	}
+
+	@Get('search')
+	async find(
+		@Query('tid') tid: number,
+		@Query('department') department: string
+	): Promise<Course[]>{
+		return this.termService.find(tid,department);
+	}
+}

apps/backend/src/terms/term.module.ts

@@ -0,0 +1,12 @@
+import { Module } from '@nestjs/common';
+import { TermController } from './term.controller';
+import { TermService } from './term.service';
+import { TypeOrmModule } from "@nestjs/typeorm";
+import { Term } from '../entities/term.entity';
+
+@Module({
+	imports: [TypeOrmModule.forFeature([Term])],
+	controllers: [TermController],
+	providers: [TermService],
+})
+export class TermModule {}

apps/backend/src/terms/term.service.ts

@@ -0,0 +1,31 @@
+import { Injectable, Query } from '@nestjs/common';
+import { InjectRepository } from '@nestjs/typeorm';
+import { Repository } from 'typeorm';
+import { Term } from '../entities/term.entity';
+import { Course } from '../entities/course.entity';
+
+@Injectable()
+export class TermService {
+	constructor(
+		@InjectRepository(Term)
+		private readonly termRepository: Repository<Term>,
+	) {}
+
+	// Responsibility: handle business logic - make DB requests
+	async findAll(): Promise<Term[]>{
+		return await this.termRepository.find();
+	}
+
+	async find(tid: any, department: string): Promise<Course[]>{
+		const termCourse = await this.termRepository.findOne({
+			relations:{
+				courses:true
+			},
+			where: {
+				tid: tid
+			}
+		});
+
+		return termCourse.courses.filter(Course => Course.department === department);
+	}
+}

apps/frontend/src/App.tsx

@@ -3,13 +3,17 @@ import './App.css';
 import { APPS_NAME } from '@team8/constants/apps';
 import MainScreen from './Screens/MainScreen';
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import LookUpScreen from './Screens/LookUpScreen';
+import CoursesScreen from './Screens/CoursesScreen';
 
 const App = () => {
 	return (
 		<>
 			<Router>
 				<Routes>
 					<Route index={true} path="/" element={<MainScreen />} />
+					<Route path="/lookup" element={<LookUpScreen />}/>
+					<Route path='/courses' element={<CoursesScreen/>}/>
 				</Routes>
 			</Router>
 		</>

apps/frontend/src/Components/Navbar.tsx

@@ -13,9 +13,9 @@ import MenuItem from '@mui/material/MenuItem';
 import Stack from '@mui/material/Stack';
 import Divider from '@mui/material/Divider';
 import AutoStoriesIcon from '@mui/icons-material/AutoStories';
-import { amber } from '@mui/material/colors';
 import { styled } from '@mui/material/styles';
 import { brown } from '@mui/material/colors';
+import { Link } from "react-router-dom";
 
 const pages = ['Products', 'Pricing', 'Blog'];
 const settings = ['Profile', 'Account', 'Dashboard', 'Logout'];
@@ -115,7 +115,9 @@ const Navbar = () => {
                 <Divider sx={{bgcolor:"black"}}></Divider>
                 <Toolbar sx={{justifyContent:"space-between"}}>
                     <ColorButton variant="contained">Home</ColorButton>
-                    <ColorButton variant="contained">Courses Look Up</ColorButton>
+                    <Link to='/lookup'>
+                      <ColorButton variant="contained">Courses Look Up</ColorButton>
+                    </Link>
                     <ColorButton variant="contained">Add/Drop Courses</ColorButton>
                     <ColorButton variant="contained">Calendar</ColorButton>
                     <ColorButton variant="contained">Roadmap</ColorButton>

apps/frontend/src/Screens/CoursesScreen.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import Navbar from "../Components/Navbar";
+import { useLocation } from "react-router-dom";
+import { Box, Button, Container, Stack, Typography } from "@mui/material";
+
+const CoursesScreen = () => {
+    const location = useLocation();
+    const courses = location.state.res;
+    console.log(courses);
+
+    return (
+        <>
+        <Navbar/>
+        <Container maxWidth="lg" sx={{mt: 2}}>
+            <div>
+                {courses.map((course) => (
+                    <Button sx={{height:200}}>
+                        <Stack direction="row" spacing={2}>
+                            <Typography>{course.cid}</Typography>
+                            <Typography>{course.courseName}</Typography>
+                            <Typography>{course.courseNumber}</Typography>
+                            <Typography>{course.description}</Typography>
+                        </Stack>
+                    </Button>
+                ))}
+            </div>
+        </Container>
+        </>
+    );
+};
+
+export default CoursesScreen;

apps/frontend/src/Screens/LookUpScreen.tsx

@@ -0,0 +1,111 @@
+import React, { useEffect, useState } from "react";
+import { Button, Container, Grid, List, ListItem, Typography, Box, Stack, ListItemText, ListItemButton } from "@mui/material";
+import Navbar from "../Components/Navbar";
+import { useNavigate } from "react-router-dom";
+
+const LookUpScreen = () => {
+  const [degree, setDegree] = useState([]);
+  const [term, setTerm] = useState([]);
+  const [selectDegree, setSelectDegree] = useState(null);
+  const [selectTerm, setSelectTerm] = useState(null);
+  const navigate = useNavigate();
+
+  const handleSubmit = () =>{
+    if(selectDegree !== null && selectTerm !== null){
+      fetch(`/rest-api/term/search?tid=${selectTerm.tid}&department=${selectDegree.name}`)
+            .then((res) => res.json())
+            .then(res => {
+              navigate('/courses', {state: {res}});
+            })
+    }
+    else{
+      console.log("Please select something");
+    }
+  }
+  const handleSeclectDegree = (value) =>{
+    setSelectDegree(value);
+  }
+
+  const handleSeclectTerm = (value) =>{
+    setSelectTerm(value);
+  } 
+
+  useEffect(() => {
+    fetch('/rest-api/term')
+    .then((res) => res.json())
+    .then(res => {setTerm(res)})
+    .then(console.log)
+
+    fetch('/rest-api/degree')
+    .then((res) => res.json())
+    .then(res => {setDegree(res)})
+    .then(console.log)
+  }, [])
+
+  return (
+    <>
+    <Navbar/>
+    <Container maxWidth="lg" sx={{mt: 2}}>
+      <Grid container sx={{border: '1px solid black'}}>
+        <Grid item xs={6}>
+        <Container maxWidth="xl" sx={{mt:1, mb:1}}>
+          <Stack>
+            <Typography variant="h4">Degree: </Typography>
+            <List sx={{
+              width: '100%',
+              maxWidth: 360,
+              bgcolor: 'background.paper',
+              position: 'relative',
+              overflow: 'auto',
+              maxHeight: 300,
+              '& ul': { padding: 0 },
+            }}>
+              {degree.map((degrees) => (
+                <ListItem
+                key={degrees}>
+                  <ListItemButton onClick={() => handleSeclectDegree(degrees)} sx={{background: selectDegree === degrees ? 'red' : 'inherit', '&:hover': {backgroundColor: "red",},}}>
+                    <ListItemText primary={`${degrees.name}`}/>
+                  </ListItemButton>
+                </ListItem>
+              ))}
+            </List>
+          </Stack>
+          </Container>
+        </Grid>
+        <Grid item xs={6}>
+        <Container maxWidth="xl" sx={{mt:1, mb:1}}>
+          <Stack>
+            <Typography variant="h4">Term: </Typography>
+            <List sx={{
+              width: '100%',
+              maxWidth: 360,
+              bgcolor: 'background.paper',
+              position: 'relative',
+              overflow: 'auto',
+              maxHeight: 300,
+              '& ul': { padding: 0 },
+            }}>
+              {term.map((terms) => (
+                <ListItem
+                key={terms}>
+                  <ListItemButton onClick={()=> handleSeclectTerm(terms)} sx={{background: selectTerm === terms ? 'red' : 'inherit', '&:hover': {backgroundColor: "red",},}}>
+                    <ListItemText primary={`${terms.season} ${terms.year}`}/>
+                  </ListItemButton>
+                </ListItem>
+              ))}
+            </List>
+          </Stack>
+          </Container>
+        </Grid>
+      </Grid>
+      <Container maxWidth="xl" sx={{mt:4, mb:1}}>
+        <Box sx={{display:'flex', justifyContent:"center"}}>
+          <Button onClick={() => handleSubmit()} sx={{background:"grey"}}>Submit</Button>
+        </Box>
+      </Container>
+    </Container>
+    </>
+  );
+};
+
+export default LookUpScreen;