Commit f3271b71 authored by Kim, Subin's avatar Kim, Subin
Browse files

TodoList 완성

parent 448f0334
......@@ -27,13 +27,13 @@ const Weekly = () => {
const [error, setError] = useState("")
const calendarRef = useRef(null)
let calendar = null
useEffect(() => {
if (calendarRef && calendarRef.current) {
calendar = calendarRef.current.getApi()
}
})
useEffect(() => {
setChooseDate(date)
getTodoList(date)
......
......@@ -44,4 +44,10 @@
&:focus {
border-color: crimson;
}
}
.list {
height: 60vh;
overflow-y: auto;
padding-bottom: 4em;
}
\ No newline at end of file
......@@ -5,30 +5,32 @@ import catchErrors from "../../utils/catchErrors";
import moment from "moment";
import styles from "./modal.module.scss";
const TodoModal = ({ curDate, selectTodo = "" }) => {
const TodoModal = ({ curDate, selectTodo, clicked, setClicked }) => {
const { user } = useAuth()
const [todo, setTodo] = useState({
todoTitle: "",
todoDate: moment(curDate).format("YYYY-MM-DD")
})
const [error, setError] = useState("");
const [error, setError] = useState("")
useEffect(() => {
setTodo({ ...todo, todoDate: curDate })
}, [curDate])
if (clicked) setTodo({ ...todo, ...selectTodo })
}, [clicked])
useEffect(() => {
if (selectTodo) {
console.log("selectTodo 값 변경으로 실행")
setTodo({ ...todo, ...selectTodo })
}
}, [selectTodo])
setTodo({ ...todo, todoDate: curDate })
}, [curDate])
const handleChange = (e) => {
const { name, value } = e.target
setTodo({ ...todo, [name]: value })
}
function handleClick() {
setTodo({ todoTitle: "", todoDate: "" })
setClicked(false)
}
async function handleSubmit() {
try {
setError("")
......@@ -39,6 +41,7 @@ const TodoModal = ({ curDate, selectTodo = "" }) => {
await todoApi.submit(todo, user.id)
alert("해당 할일이 성공적으로 등록되었습니다.")
}
setClicked(false)
window.location.reload()
} catch (error) {
catchErrors(error, setError)
......@@ -60,13 +63,13 @@ const TodoModal = ({ curDate, selectTodo = "" }) => {
<div className="d-flex justify-content-between mt-4">
<label className="col-2 col-form-label ms-2">날짜</label>
<div className="col-8 d-flex align-items-center">
<input type="date" className="form-control form-control-sm" name="todoDate" onChange={handleChange} value={todo.todoDate} />
<input type="date" className={`form-control form-control-sm shadow-none ${styles.dateInput}`} name="todoDate" onChange={handleChange} value={todo.todoDate} />
</div>
</div>
</div>
<div className="modal-footer bg-white p-1" >
<button type="button" className="btn btn-secondary btn-sm"
data-bs-dismiss="modal" onClick={() => setTodo({ todoTitle: "", todoDate: "" })}>취소</button>
data-bs-dismiss="modal" onClick={handleClick}>취소</button>
<button type="button" className="btn btn-crimson btn-sm" onClick={handleSubmit}>{selectTodo ? "수정" : "확인"}</button>
</div>
</div>
......
......@@ -19,6 +19,14 @@
}
}
.dateInput {
font-size: 0.75rem;
&:focus {
border-color: crimson;
}
}
.cursor {
cursor: pointer;
}
\ No newline at end of file
......@@ -13,7 +13,8 @@ const TodoList = () => {
const { date } = useParams()
const [todoList, setTodoList] = useState([])
const [selectTodo, setSelectTodo] = useState(null)
const [error, setError] = useState("");
const [clicked, setClicked] = useState(false)
const [error, setError] = useState("")
useEffect(() => {
getAll()
......@@ -29,12 +30,26 @@ const TodoList = () => {
}
}
async function checkFn(e, todoId) {
try {
setError("")
const check_v = e.target.value === "true" ? true : false
await todoApi.edit({ id: todoId, done: check_v }, user.id)
alert("해당 변경사항이 정상적으로 저장되었습니다.")
window.location.reload()
// getAll()
// getTodoList()
} catch (error) {
catchErrors(error, setError)
}
}
async function delayTodo() {
try {
setError("")
const nextDate = moment(date).add(1, 'day').format("YYYY-MM-DD")
await todoApi.edit({ id: selectTodo.id, todoDate: nextDate }, user.id)
getAll()
window.location.reload()
} catch (error) {
catchErrors(error, setError)
}
......@@ -45,28 +60,32 @@ const TodoList = () => {
setError("")
await todoApi.remove(todoId, user.id)
alert("해당 할일이 성공적으로 삭제되었습니다.")
getAll()
window.location.reload()
} catch (error) {
catchErrors(error, setError)
}
}
return (
<div className={"mt-3 " + (todoList.length ? "d-flex flex-column" : "d-block")}>
{todoList.length !== 0 ?
todoList.map((todo, idx) => <div className="d-flex">
<div className="d-flex align-items-center" style={{ width: "75%" }}>
<input className={`form-check-input rounded-0 shadow-none mt-0 me-2 ${styles.checkBox}`} type="checkbox" checked={todo.done} />
<label className="form-check-label fs-5 pe-2 text-nowrap" style={{ overflow: "hidden", textOverflow: "ellipsis" }}>{todo.todoTitle}</label>
</div>
<div className="d-flex justify-content-between" style={{ cursor: "pointer", width: "25%" }}>
<i className="bi bi-arrow-right fs-5" data-bs-toggle="modal" data-bs-target="#postmodal" onClick={() => setSelectTodo(todo)}></i>
<i className="bi bi-pencil-square fs-5" data-bs-toggle="modal" data-bs-target="#todomodal" onClick={() => setSelectTodo(todo)}></i>
<i className="bi bi-trash fs-5" onClick={() => delTodo(todo.id)}></i>
</div>
</div>) : <p className="text-center">등록된 할일이 없습니다.</p>}
<TodoPostModal handleClick={delayTodo} />
<TodoModal curDate={date} selectTodo={selectTodo} />
<div className={`mt-3 ${styles.list}`}>
<div className={todoList.length ? "d-flex flex-column" : "d-block"}>
{todoList.length !== 0 ?
todoList.map((todo, idx) => <div key={idx} className="d-flex mb-1">
<div className="d-flex align-items-center" style={{ width: "75%" }}>
<div className="col d-flex align-items-center">
<input className={`form-check-input rounded-0 shadow-none mt-0 ${styles.checkBox}`} type="checkbox" id={"todoCheck" + idx} value={todo.done} checked={todo.done} onClick={(e) => checkFn(e, todo.id)} />
</div>
<label className="col-11 form-check-label fs-5 pe-1 text-nowrap" style={{ overflow: "hidden", textOverflow: "ellipsis" }}>{todo.todoTitle}</label>
</div>
<div className="d-flex justify-content-between" style={{ cursor: "pointer", width: "25%" }}>
<i className="bi bi-arrow-right fs-5" data-bs-toggle="modal" data-bs-target="#postmodal" onClick={() => setSelectTodo(todo)}></i>
<i className="bi bi-pencil-square fs-5" data-bs-toggle="modal" data-bs-target="#todomodal" onClick={() => { setSelectTodo(todo); setClicked(true) }}></i>
<i className="bi bi-trash fs-5" onClick={() => delTodo(todo.id)}></i>
</div>
</div>) : <p className="text-center">등록된 할일이 없습니다.</p>}
<TodoPostModal handleClick={delayTodo} />
<TodoModal curDate={date} selectTodo={selectTodo} clicked={clicked} setClicked={setClicked} />
</div>
</div>
)
}
......
......@@ -6,7 +6,6 @@ const { Op } = sequelize
const findbyDate = async (req, res) => {
try {
// Todo 페이지
console.log("Todo 페이지에서의 요청 처리")
const userId = req.userId
const { date } = req.query
const nonCheck = await Todo.findAll({ where: { [Op.and]: [{ done: false }, { date: { [Op.eq]: date } }, { userId: userId }] }, attributes: ['id', ['title', 'todoTitle'], ['date', 'todoDate'], 'done'], order: [['updatedAt', "DESC"]] })
......
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