Commit 364d943a authored by Choi Ga Young's avatar Choi Ga Young
Browse files

DB데이터 연결작업

parent 411e53a3
...@@ -11,7 +11,7 @@ const addPlan = async (info, id) => { ...@@ -11,7 +11,7 @@ const addPlan = async (info, id) => {
const editPlan = async (info, id) => { const editPlan = async (info, id) => {
console.log('editPlan확인', id) console.log('editPlan확인', id)
const url = `${baseUrl}/api/plan/edit/${id}` const url = `${baseUrl}/api/plan/edit/${id}`
const { data } = await axios.put(url, info); const { data } = await axios.put(url, { info, id });
return data return data
} }
......
import { useState } from "react";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import styles from "../Form/form.module.scss"; import styles from "../Form/form.module.scss";
const StudyPlanCard = () => { const StudyPlanCard = ({ renList }) => {
// studyPlanList에서 props로 받아서 뿌리기 console.log('props 확인', renList)
return ( return (
<> <div className="d-flex justify-content-center mt-3">
<div className="d-flex justify-content-center mt-3"> <Link className="card text-decoration-none link-dark" style={{ width: "20rem" }} to={`/studyplan/${renList.id}`}>
<div className="card" style={{ width: "20rem" }}> <div className="card-body">
<Link className="text-decoration-none link-dark" to="/studyplan/1be7e4db-796d-4d9b-bfab-fdc440d25171"> <div className="d-flex">
<div className="card-body"> <h5 className="card-title col-10 text-nowrap" style={{ overflow: "hidden", textOverflow: "ellipsis" }}>{renList.name}</h5>
<div className="d-flex justify-content-between"> <div className="col-2 d-flex justify-content-end">
<h5 className="card-title col-10">운영체제</h5> <Link className="text-decoration-none link-dark" to={`/subject/edit/${renList.id}`}><i className="bi bi-pencil-square pe-2"></i></Link>
<div className="col-2 d-flex justify-content-end"> <i className="bi bi-trash"></i>
<Link className="text-decoration-none link-dark" to="/subject/edit/ed56bebd-b9ae-4065-aae2-d39aeac5f18e"><i className="bi bi-pencil-square pe-2"></i></Link> </div>
<i className="bi bi-trash"></i> </div>
</div> <p className="card-subtitle ms-1 mb-2 text-muted">{renList.prof && renList.room ? renList.prof + '-' + renList.room : (renList.prof || renList.room)}</p>
</div> {renList.planList.length !== 0 ?
<p className="card-subtitle ms-1 mb-2 text-muted">김민호 - 과학기술2관 310</p> renList.planList.map((info, idx) => <><div key={idx} className="d-flex justify-content-between">
<div className="d-flex justify-content-between"> <p className="card-text mb-1">- {info.title}</p>
<p className="card-text mb-1">- ch02 내용정리하기</p> <input className={`form-check-input shadow-none ${styles.checkBox}`} type="checkbox" />
</div><div key={idx} className="d-flex justify-content-between">
<p className="card-text mb-1">- {info.title}</p>
<input className={`form-check-input shadow-none ${styles.checkBox}`} type="checkbox" /> <input className={`form-check-input shadow-none ${styles.checkBox}`} type="checkbox" />
</div> </div> <div key={idx} className="d-flex justify-content-between">
<div className="d-flex justify-content-between"> <p className="card-text mb-1">- {info.title}</p>
<p className="card-text mb-1">- ch03 내용정리하기</p>
<input className={`form-check-input shadow-none ${styles.checkBox}`} type="checkbox" /> <input className={`form-check-input shadow-none ${styles.checkBox}`} type="checkbox" />
</div> </div></>)
</div>
</Link> : <Link className="text-decoration-none link-dark" to={`/studyplan/edit/add/${renList.id}`}>
</div>
</div>
{/*계획 없을 때 보여질 카드*/}
<div className="d-flex justify-content-center mt-3">
<div className="card" style={{ width: "20rem" }}>
<div className="card-body">
<div className="d-flex ">
<h5 className="card-title col-10 text-nowrap" style={{ overflow: "hidden", textOverflow: "ellipsis" }}>네트워크 프로그래밍 실습</h5>
<div className="col-2 d-flex justify-content-end">
<Link className="text-decoration-none link-dark" to="/subject/edit"><i className="bi bi-pencil-square pe-2"></i></Link>
<i className="bi bi-trash"></i>
</div>
</div>
<p className="card-subtitle ms-1 mb-2 text-muted">임치헌 - 과학기술2관 323</p>
<Link className="text-decoration-none link-dark" to="/studyplan/edit">
<div className="d-flex"> <div className="d-flex">
<i className="bi bi-plus"></i> <i className="bi bi-plus"></i>
<p className="card-text mb-1">새로운 계획 추가하기</p> <p className="card-text mb-1">새로운 계획 추가하기</p>
</div> </div>
</Link> </Link>}
</div>
</div> </div>
</div> </Link>
</> </div>
) )
} }
......
...@@ -13,10 +13,10 @@ const StudyPlanEditForm = () => { ...@@ -13,10 +13,10 @@ const StudyPlanEditForm = () => {
const [disabled, setDisabled] = useState(true) const [disabled, setDisabled] = useState(true)
const [selected, setSelected] = useState(""); const [selected, setSelected] = useState("");
const [error, setError] = useState(""); const [error, setError] = useState("");
const [subName, setSubName] = useState("");
const [studyplan, setStudyplan] = useState({ const [studyplan, setStudyplan] = useState({
studyplanTitle: "", studyplanTitle: "",
endDate: "", endDate: "",
deadline: "",
memo: "", memo: "",
deadline: "", deadline: "",
selected: "" selected: ""
...@@ -51,6 +51,26 @@ const StudyPlanEditForm = () => { ...@@ -51,6 +51,26 @@ const StudyPlanEditForm = () => {
async function getInfo(id) { async function getInfo(id) {
const result = await planApi.getDetail(id) const result = await planApi.getDetail(id)
console.log('수정 getInfo result', result) console.log('수정 getInfo result', result)
if (result.endTime) {
setStudyplan({
studyplanTitle: result.title,
endDate: result.endDate,
endTime: result.endTime,
memo: result.memo,
deadline: result.deadline,
selected: result.subjectId
})
setSubName(result.subjectName)
} else {
setStudyplan({
studyplanTitle: result.title,
endDate: result.endDate,
memo: result.memo,
deadline: result.deadline,
selected: result.subjectId
})
setSubName(result.subjectName)
}
} }
async function subjectTitle(id) { async function subjectTitle(id) {
...@@ -93,7 +113,7 @@ const StudyPlanEditForm = () => { ...@@ -93,7 +113,7 @@ const StudyPlanEditForm = () => {
} else { } else {
//수정함수 실행 //수정함수 실행
console.log('수정함수') console.log('수정함수')
const result = await planApi.editPlan(studyplan, params.subjectId) const result = await planApi.editPlan(studyplan, params.planId)
console.log('수정 후 result확인', result) console.log('수정 후 result확인', result)
} }
...@@ -115,7 +135,7 @@ const StudyPlanEditForm = () => { ...@@ -115,7 +135,7 @@ const StudyPlanEditForm = () => {
return ( return (
<div className="pt-5"> <div className="pt-5">
<select className={`form-select mb-4 ${styles.selectInput}`} aria-label="Choose subject" onChange={handleSelect}> <select className={`form-select mb-4 ${styles.selectInput}`} aria-label="Choose subject" onChange={handleSelect}>
<option selected>관련 과목을 선택해주세요.</option> {studyplan.selected ? <option value={studyplan.selected} selected>{subName}</option> : <option selected>관련 과목을 선택해주세요.</option>}
{list.length !== 0 ? list.map((i) => <option value={i.id}>{i.name}</option>) : null} {list.length !== 0 ? list.map((i) => <option value={i.id}>{i.name}</option>) : null}
</select> </select>
<input type="text" name="studyplanTitle" <input type="text" name="studyplanTitle"
...@@ -131,7 +151,7 @@ const StudyPlanEditForm = () => { ...@@ -131,7 +151,7 @@ const StudyPlanEditForm = () => {
</div> </div>
</div> </div>
<div className="d-flex justify-content-end form-check mb-4"> <div className="d-flex justify-content-end form-check mb-4">
<input className={`form-check-input shadow-none ${styles.checkBox} me-2`} type="checkbox" id="deadline" name="deadline" onChange={handleChange} /> <input className={`form-check-input shadow-none ${styles.checkBox} me-2`} type="checkbox" id="deadline" name="deadline" onChange={handleChange} checked={studyplan.deadline === "on" ? true : false} />
<label className="form-check-label" htmlFor="deadline">시간 </label> <label className="form-check-label" htmlFor="deadline">시간 </label>
</div> </div>
<div className="d-flex justify-content-between mb-5"> <div className="d-flex justify-content-between mb-5">
......
...@@ -49,7 +49,7 @@ const SubjectForm = () => { ...@@ -49,7 +49,7 @@ const SubjectForm = () => {
}) })
} }
async function handleSubmit(e) { async function handleSubmit(e) {
e.preventDefault(); e.preventDefault();
try { try {
setError("") setError("")
...@@ -60,7 +60,15 @@ const SubjectForm = () => { ...@@ -60,7 +60,15 @@ const SubjectForm = () => {
setSuccess(true) setSuccess(true)
} else { } else {
//등록함수 실행 //등록함수 실행
await subjectApi.addsubject(subject, user.id) const result = await subjectApi.addsubject(subject, user.id)
if (result) {
alert("등록되었습니다")
setSubject({
lectureName: "",
prof: "",
classRoom: ""
})
} else alert("등록에 실패하였습니다.")
} }
} catch (error) { } catch (error) {
catchErrors(error, setError) catchErrors(error, setError)
...@@ -72,31 +80,31 @@ const SubjectForm = () => { ...@@ -72,31 +80,31 @@ const SubjectForm = () => {
} }
} }
if (success) { if (success) {
return <Redirect to="/studyplan" /> return <Redirect to="/studyplan" />
} }
return ( return (
<div className="position-absolute top-50 start-50 translate-middle" style={{ width: "80%" }}> <div className="position-absolute top-50 start-50 translate-middle" style={{ width: "80%" }}>
<div> <div>
<div className="mb-5 d-flex flex-row"> <div className="mb-5 d-flex flex-row">
<label className="form-label fs-4" style={{ width: "100px" }}>강의명</label> <label className="form-label fs-4" style={{ width: "100px" }}>강의명</label>
<input className={`form-control shadow-none rounded-0 ${styles.textInput}`} value={subject.lectureName} name="lectureName" onChange={handleChange} /> <input className={`form-control shadow-none rounded-0 ${styles.textInput}`} value={subject.lectureName} name="lectureName" onChange={handleChange} />
</div> </div>
<div className="mb-5 pt-2 d-flex flex-row"> <div className="mb-5 pt-2 d-flex flex-row">
<label className="form-label fs-4" style={{ width: "100px" }}>교수명</label> <label className="form-label fs-4" style={{ width: "100px" }}>교수명</label>
<input className={`form-control shadow-none rounded-0 ${styles.textInput}`} value={subject.prof} name="prof" onChange={handleChange} /> <input className={`form-control shadow-none rounded-0 ${styles.textInput}`} value={subject.prof} name="prof" onChange={handleChange} />
</div>
<div className="mb-5 pt-2 d-flex flex-row">
<label className="form-label fs-4 " style={{ width: "100px", letterSpacing: "15px" }}>장소</label>
<input className={`form-control shadow-none rounded-0 ${styles.textInput}`} value={subject.classRoom} name="classRoom" onChange={handleChange} />
</div>
</div> </div>
<div className="pt-2"> <div className="mb-5 pt-2 d-flex flex-row">
<BtnGroup text={subjectId} disabled={disabled} handleSubmit={handleSubmit} /> <label className="form-label fs-4 " style={{ width: "100px", letterSpacing: "15px" }}>장소</label>
<input className={`form-control shadow-none rounded-0 ${styles.textInput}`} value={subject.classRoom} name="classRoom" onChange={handleChange} />
</div> </div>
</div> </div>
<div className="pt-2">
<BtnGroup text={subjectId} disabled={disabled} handleSubmit={handleSubmit} />
</div>
</div>
) )
} }
......
...@@ -3,20 +3,24 @@ import { useAuth } from "../utils/context"; ...@@ -3,20 +3,24 @@ import { useAuth } from "../utils/context";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import StudyPlanCard from "./Card/StudyPlanCard"; import StudyPlanCard from "./Card/StudyPlanCard";
import subjectApi from '../apis/subject.api'; import subjectApi from '../apis/subject.api';
import styles from "./StudyPlan/studyplan.module.scss";
const StudyPlanList = () => { const StudyPlanList = () => {
const { user } = useAuth(); const { user } = useAuth();
const [renList, setRenList] = useState([]);
useEffect(() => { useEffect(() => {
getList(user.id); getList(user.id);
}, []) }, [])
async function getList(id) { async function getList(id) {
const result = await subjectApi.allSubject(id) const result = await subjectApi.allSubject(id)
setRenList(result)
} }
//여기서 삭제함수 만들어서 StudyPlanCard에게 넘기기
return ( return (
<> <div className={`mt-4 ${styles.list}`}>
<StudyPlanCard /> {renList.length !== 0 ? renList.map((info, idx) => <StudyPlanCard key={idx} renList={info} />) : null}
<div className="d-flex justify-content-center mt-3"> <div className="d-flex justify-content-center mt-3">
<Link className="card text-decoration-none link-dark" to="/subject/edit" style={{ width: "20rem" }}> <Link className="card text-decoration-none link-dark" to="/subject/edit" style={{ width: "20rem" }}>
<div className="card-body d-flex flex-column bg-secondary bg-opacity-25"> <div className="card-body d-flex flex-column bg-secondary bg-opacity-25">
...@@ -27,7 +31,7 @@ const StudyPlanList = () => { ...@@ -27,7 +31,7 @@ const StudyPlanList = () => {
</div> </div>
</Link> </Link>
</div> </div>
</> </div>
) )
} }
......
import { Plan } from "../db/index.js"; import { Plan, Subject } from "../db/index.js";
import * as ConvertDate from "./schedule.controller.js";
const addPlan = async (req, res) => { const addPlan = async (req, res) => {
console.log('server/addPlan req.body', req.body) console.log('server/addPlan req.body', req.body)
...@@ -30,9 +31,37 @@ const addPlan = async (req, res) => { ...@@ -30,9 +31,37 @@ const addPlan = async (req, res) => {
} }
const editPlan = async (req, res) => { const editPlan = async (req, res) => {
console.log('server/editPlan req.body', req.body) const { info, id } = req.body
console.log('editPlan info', info, '|', id)
try { try {
let result = null
if (info.deadline === "on") {
result = await Plan.update({
subjectId: info.selected,
title: info.studyplanTitle,
deadline: new Date(info.endDate + " " + info.endTime),
memo: info.memo,
timeChecked: true,
checked: false
}, { where: { id: id } })
res.send(200)
} else {
result = await Plan.update({
subjectId: info.selected,
title: info.studyplanTitle,
deadline: new Date(info.endDate),
memo: info.memo,
timeChecked: false,
checked: false
}, {
where: { id: id }
})
}
if (!result) {
throw new Error("과목정보 수정 에러발생")
} else {
return res.send(200)
}
} catch (error) { } catch (error) {
console.log(error) console.log(error)
return res.status(500).send(error.message || "계획수정 에러발생") return res.status(500).send(error.message || "계획수정 에러발생")
...@@ -42,9 +71,41 @@ const editPlan = async (req, res) => { ...@@ -42,9 +71,41 @@ const editPlan = async (req, res) => {
const getInfo = async (req, res) => { const getInfo = async (req, res) => {
console.log('server/getInfo req.params', req.params) console.log('server/getInfo req.params', req.params)
try { try {
let deadlineStr = null
let endTimeStr = null
const { planId } = req.params; const { planId } = req.params;
const findInfo = await Plan.findOne({ where: { id: planId } }) const findInfo = await Plan.findOne({ where: { id: planId } })
console.log('findInfo확인', findInfo.dataValues) const Info = findInfo.dataValues;
const getSubTitle = await Subject.findAll({
attributes: ['name'],
where: { id: Info.subjectId }
})
deadlineStr = ConvertDate.dateToString(Info.deadline, "full")
endTimeStr = ConvertDate.dateToString(Info.deadline, "time")
if (Info.timeChecked) {
res.json({
subjectId: Info.subjectId,
subjectName: getSubTitle[0].dataValues.name,
title: Info.title,
endDate: deadlineStr,
endTime: endTimeStr,
deadline: "on",
memo: Info.memo
})
} else {
res.json({
subjectId: Info.subjectId,
subjectName: getSubTitle[0].dataValues.name,
title: Info.title,
endDate: deadlineStr,
deadline: "",
memo: Info.memo
})
}
} catch (error) { } catch (error) {
console.log(error) console.log(error)
return res.status(500).send(error.message || "계획 가져오기 에러발생") return res.status(500).send(error.message || "계획 가져오기 에러발생")
......
...@@ -255,7 +255,7 @@ const send = async (req, res) => { ...@@ -255,7 +255,7 @@ const send = async (req, res) => {
} }
} }
function dateToString(dateObj, method) { export function dateToString(dateObj, method) {
const year = dateObj.getFullYear() const year = dateObj.getFullYear()
const year_disit = String(year).substring(2, 4) const year_disit = String(year).substring(2, 4)
const month = dateObj.getMonth() + 1 const month = dateObj.getMonth() + 1
......
import { Subject } from '../db/index.js'; import { Subject, Plan } from '../db/index.js';
const addsubject = async (req, res) => { const addsubject = async (req, res) => {
console.log('server/addsubject req.body', req.body) console.log('server/addsubject req.body', req.body)
...@@ -8,12 +8,17 @@ const addsubject = async (req, res) => { ...@@ -8,12 +8,17 @@ const addsubject = async (req, res) => {
if (findName) { if (findName) {
throw new Error("이미 있는 과목입니다.") throw new Error("이미 있는 과목입니다.")
} }
await Subject.create({ const result = await Subject.create({
name: info.lectureName, name: info.lectureName,
prof: info.prof, prof: info.prof,
room: info.classRoom, room: info.classRoom,
userId: userId userId: userId
}) })
if (!result) {
throw new Error("과목추가 에러발생")
} else {
return res.send(200)
}
} catch (error) { } catch (error) {
console.log(error) console.log(error)
...@@ -53,7 +58,7 @@ const editSubject = async (req, res) => { ...@@ -53,7 +58,7 @@ const editSubject = async (req, res) => {
if (!result) { if (!result) {
throw new Error("과목정보 수정 에러발생") throw new Error("과목정보 수정 에러발생")
} else { } else {
res.send(200) return res.send(200)
} }
} catch (error) { } catch (error) {
console.log(error) console.log(error)
...@@ -76,10 +81,14 @@ const allSubject = async (req, res) => { ...@@ -76,10 +81,14 @@ const allSubject = async (req, res) => {
} }
return newList return newList
}) })
// const addplanlist = sublist.map(async(info)=>{
// const resplan = await Plan
// })
const addplanlist = await Promise.all(sublist.map(async (info) => {
const resplan = await Plan.findAll({ where: { subjectId: info.id } })
info.planList = resplan
return info
}))
return res.json(addplanlist)
} catch (error) { } catch (error) {
console.log(error) console.log(error)
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment