Commit 49dc16a2 authored by Choi Ga Young's avatar Choi Ga Young
Browse files

check box 서버 연결

parent 088ded29
......@@ -7,6 +7,12 @@ const getDetail = async (planId) => {
return data
}
const saveCheck = async (planId, planCk) => {
const url = `${baseUrl}/api/plan/check/${planId}`
const { data } = await axios.put(url, {planCk})
return data
}
const submit = async (info) => {
const url = `${baseUrl}/api/plan`
const { data } = await axios.post(url, info)
......@@ -27,6 +33,7 @@ const remove = async (planId) => {
const planApi = {
getDetail,
saveCheck,
submit,
edit,
remove
......
import PlanItem from "./PlanItem";
import styles from "./studyplan.module.scss";
const AddplanList = ({ planList }) => {
const AddplanList = ({ planList, getPlanList }) => {
return (
<div className={`mt-4 ${styles.list}`}>
<div className={`accordion accordion-flush`} id="addplanlist">
<PlanItem planList={planList.planList} subjectId={planList.id} />
<PlanItem planList={planList.planList} subjectId={planList.id} getPlanList={getPlanList} />
</div>
</div>
)
......
......@@ -7,7 +7,7 @@ import styles from "../Schedule/schedule.module.scss";
import styles2 from "./studyplan.module.scss";
import moment from 'moment';
const PlanItem = ({ planList = [], subjectId }) => {
const PlanItem = ({ planList = [], subjectId, getPlanList }) => {
const { user } = useAuth()
const [error, setError] = useState("")
const history = useHistory()
......@@ -22,11 +22,25 @@ const PlanItem = ({ planList = [], subjectId }) => {
catchErrors(error, setError)
}
}
async function checkFn(e, planId, planCk) {
try {
setError("")
e.preventDefault();
const result = await planApi.saveCheck(planId, planCk)
console.log('check save result', result)
if (result === "success") {
getPlanList()
}
} catch (error) {
catchErrors(error, setError)
}
}
return (
<>
{planList.length !== 0 ? planList.map((plan, idx) => <div className="d-flex">
<input className={`form-check-input rounded-0 shadow-none mt-1 ${styles2.checkBox}`} style={{ width: "5%" }} type="checkbox" checked={plan.checked} />
<input className={`form-check-input rounded-0 shadow-none mt-1 ${styles2.checkBox}`} style={{ width: "5%" }} type="checkbox" checked={plan.checked} onClick={(e) => checkFn(e, plan.id, plan.checked)} />
<div className="accordion-item border-0 col" style={{ width: "95%" }}>
<button className={`d-flex flex-column align-items-start accordion-button collapsed bg-white shadow-none px-0 pt-0 ps-3 ${styles.activeBtn}`} type="button" data-bs-toggle="collapse" data-bs-target={"#plan" + idx} aria-expanded="false" aria-controls={"plan" + idx}>
<h5 className={`accordion-header ${styles.title}`} id={"plan-heading" + idx}>{plan.title}</h5>
......
import { Link } from "react-router-dom";
import styles from "./studyplan.module.scss";
const PlanLineList = ({ subjectId, planList = [] }) => {
const PlanLineList = ({ subjectId, planList = [], handleClick }) => {
return (
<>
{planList.length !== 0 ? planList.map(plan => <div className="d-flex justify-content-between">
<Link to={`/studyplan/${subjectId}`} className={`col-11 card-text text-decoration-none link-dark mb-1 ${styles.text}`}>- {plan.title}</Link>
<div className="col d-flex justify-content-end">
<input className={`form-check-input shadow-none ${styles.checkBox}`} type="checkbox" onClick={() => console.log("checkbox clicke")} />
<input className={`form-check-input shadow-none ${styles.checkBox}`} type="checkbox" checked={plan.checked} onClick={(e) => handleClick(e, plan.id, plan.checked)} />
</div>
</div>) : <Link className="d-flex text-decoration-none link-dark" to={`/studyplan/submit/${subjectId}`}>
<i className="bi bi-plus"></i>
......
import { Link } from "react-router-dom";
import PlanLineList from "./PlanLineList";
const StudyPlanCard = ({ renList, handleClick }) => {
const StudyPlanCard = ({ renList, handleClick, handleEdit }) => {
return (
<Link className="card text-decoration-none link-dark mb-3" to={`/studyplan/${renList.id}`} style={{ width: "20rem" }} >
......@@ -15,7 +15,7 @@ const StudyPlanCard = ({ renList, handleClick }) => {
</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>
<PlanLineList subjectId={renList.id} planList={renList.planList} />
<PlanLineList subjectId={renList.id} planList={renList.planList} handleClick={handleEdit} />
</div>
</Link>
)
......
......@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react';
import { Link, useHistory } from "react-router-dom";
import StudyPlanCard from "./StudyPlanCard";
import subjectApi from '../../apis/subject.api';
import planApi from '../../apis/plan.api';
import catchErrors from "../../utils/catchErrors";
import { useAuth } from "../../utils/context";
import styles from "./studyplan.module.scss";
......@@ -27,6 +28,19 @@ const StudyPlanList = () => {
}
}
async function checkFn(e, planId, planCk) {
try {
setError("")
e.preventDefault();
const result = await planApi.saveCheck(planId, planCk)
if (result === "success") {
getList(user.id)
}
} catch (error) {
catchErrors(error, setError)
}
}
async function delSubject(e, subjectId) {
e.preventDefault()
try {
......@@ -44,7 +58,7 @@ const StudyPlanList = () => {
return (
<div className={`mt-4 ${styles.list}`}>
<div className="d-flex flex-column align-items-center">
{renList.length !== 0 ? renList.map((info, idx) => <StudyPlanCard key={idx} renList={info} handleClick={delSubject} />) : null}
{renList.length !== 0 ? renList.map((info, idx) => <StudyPlanCard key={idx} renList={info} handleClick={delSubject} handleEdit={checkFn} />) : null}
<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">
<i className="bi bi-plus-lg d-flex justify-content-center fs-3"></i>
......
......@@ -33,7 +33,7 @@ const StudyPlanPage = () => {
<Menu />
<BackBtn />
<h2 className="text-center">{planList.name}</h2>
<AddplanList planList={planList} />
<AddplanList planList={planList} getPlanList={getPlanList} />
<Footer pathname={`studyplan/submit/${subjectId}`} />
</>
)
......
......@@ -55,6 +55,18 @@ const edit = async (req, res) => {
}
}
const putCk = async (req, res) => {
try {
console.log('server/planCtrl/putCk req.body', req.body)
const planId = req.planId
const result = await Plan.update({ checked: !req.body.planCk }, { where: { id: planId } })
if (!result) throw new Error("체크 상태 수정에 실패하였습니다.")
else return res.send("success")
} catch (error) {
return res.status(500).send(error.message || "체크 상태 저장 중 에러 발생")
}
}
const remove = async (req, res) => {
try {
const planId = req.planId
......@@ -80,6 +92,7 @@ export default {
getOne,
create,
edit,
putCk,
remove,
getParams
}
\ No newline at end of file
......@@ -7,6 +7,10 @@ router
.route("/")
.post(planCtrl.create)
router
.route("/check/:planId")
.put(planCtrl.putCk)
router
.route("/:planId")
.get(planCtrl.getOne)
......
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