diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 0000000..b58b603 --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,5 @@ +# Default ignored files +/shelf/ +/workspace.xml +# Editor-based HTTP Client requests +/httpRequests/ diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml new file mode 100644 index 0000000..03d9549 --- /dev/null +++ b/.idea/inspectionProfiles/Project_Default.xml @@ -0,0 +1,6 @@ + + + + \ No newline at end of file diff --git a/.idea/misc.xml b/.idea/misc.xml new file mode 100644 index 0000000..28a804d --- /dev/null +++ b/.idea/misc.xml @@ -0,0 +1,6 @@ + + + + + \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 0000000..7f9b010 --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/todo-frontend.iml b/.idea/todo-frontend.iml new file mode 100644 index 0000000..24643cc --- /dev/null +++ b/.idea/todo-frontend.iml @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 0000000..94a25f7 --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/static/src/component/atom/Button.jsx b/static/src/component/atom/Button.jsx index faf1f7f..eddecb9 100644 --- a/static/src/component/atom/Button.jsx +++ b/static/src/component/atom/Button.jsx @@ -15,5 +15,4 @@ function Button(props) { ); } - export default Button; diff --git a/static/src/component/board/card/index.jsx b/static/src/component/board/card/index.jsx index 17931f6..4acf11c 100644 --- a/static/src/component/board/card/index.jsx +++ b/static/src/component/board/card/index.jsx @@ -9,7 +9,7 @@ function Card(props) {
{subject}
{ tasks.map(task => { - return + return }) } diff --git a/static/src/component/board/task/index.jsx b/static/src/component/board/task/index.jsx index bc3abbf..a918f77 100644 --- a/static/src/component/board/task/index.jsx +++ b/static/src/component/board/task/index.jsx @@ -5,22 +5,36 @@ import {isDone, isTodo, toToggledValue} from "../../../utility/status"; import Button from "../../atom/Button"; function Task(props) { - const {title, subject, id, move} = props; + const {title, subject, id, move, created, assignee, priority} = props; const onClick = (event) => { event.stopPropagation(); const toggledValue = toToggledValue(subject); - move(id, toggledValue); + move(id, toggledValue); //board에서 정의해놓은 함수가 실행된다. }; + function handle(event) { + // x 클릭하면 task 삭제 하기 + const remove = props.remove; //props로 전달받은 remove를 받는다. + remove(id); + } + return (
+ title : {title}
+ {priority}순위
+ assignee : {assignee}
+ date : {created} { - isTodo(subject) &&
); } diff --git a/static/src/css/Enrollment.css b/static/src/css/Enrollment.css index 2081f47..32cb057 100644 --- a/static/src/css/Enrollment.css +++ b/static/src/css/Enrollment.css @@ -31,4 +31,8 @@ label { display: inline-block; } +select { + padding: 12px 12px 12px 0; + width:950px; +} diff --git a/static/src/css/Input.css b/static/src/css/Input.css index b537cf2..590372c 100644 --- a/static/src/css/Input.css +++ b/static/src/css/Input.css @@ -4,3 +4,10 @@ border: 1px solid #ccc; border-radius: 4px; } + +.select{ + width: 50%; + padding: 1rem; + border: 1px solid #ccc; + border-radius: 4px; +} diff --git a/static/src/css/Task.css b/static/src/css/Task.css index cc680b0..933746e 100644 --- a/static/src/css/Task.css +++ b/static/src/css/Task.css @@ -7,6 +7,10 @@ margin-bottom: 1rem; padding: 1.5rem; } +.task-remove-btn{ + float:right; + margin : 0px 10px +} .task-left-btn { float: right; diff --git a/static/src/page/Board.jsx b/static/src/page/Board.jsx index d6967d3..196c566 100644 --- a/static/src/page/Board.jsx +++ b/static/src/page/Board.jsx @@ -1,14 +1,15 @@ import React, {useEffect, useState} from 'react'; import Card from '../component/board/card'; -import getCards from "../service/getCards"; +import getCards from '../service/getCards'; import '../css/Board.css'; -import moveTo from "../service/moveTo"; -import {Link} from "react-router-dom"; +import moveTo from '../service/moveTo'; +import {Link} from 'react-router-dom'; import {toName, toToggleName} from '../utility/status'; +import removeCard from "../service/removeCard"; function Board() { const [cards, updateCards] = useState({}); - useEffect(() => { + useEffect(() => { // 실행했을 때 딱 한번만 실행 (async () => { const cards = await getCards(); updateCards(cards); @@ -17,32 +18,79 @@ function Board() { const move = async (id, targetStatus) => { const result = await moveTo(id, targetStatus); - if (!!result) { + if (result) { const originStatus = toToggleName(targetStatus); - const index = cards[originStatus].findIndex(task => task.id === id); + const index = cards[originStatus].findIndex((task) => task.id === id); cards[originStatus].splice(index, 1); const changedStatus = toName(result.status); cards[changedStatus].push(result); updateCards({ - todo: cards.todo, - done: cards.done + todo: cards.todo.sort(function(a,b){ + return a.priorityb.priority?1:0; + }), + done: cards.done.sort(function(a,b){ + return a.priorityb.priority?1:0; + }), }); } }; + function remove(id) { + const isSuccesses = removeCard(id); + if (isSuccesses) { + console.log(id); + const todo = cards.todo; + const done = cards.done; + console.log(todo); + console.log(done); + + let index = todo.findIndex((value) => { //index 알아내기 + return value.id === id; + }) + + if (index !== -1) { //todod에서 찾았을 경우 + todo.splice(index,1); //(삭제 시작할 index, 삭제할 개수) + }else{ //todo에서 못찾았을 경우 done에서 찾는다. + index = done.findIndex((value) => { //index 알아내기 + return value.id === id; + }); + done.splice(index,1); + } + + console.log(todo); + console.log(done); + + //변경된 상태를 react에게 알려주어야한다. 아래 코드 안쓰면 x눌러도 화면에서 안사라짐. + updateCards({ + "todo" : todo, + "done":done + //todo, done + //이렇게 한줄로만 써도 된다. 똑같은것이다. + }); + + //updateCards 호출 + // react 해당 데이터가 변경이 됐구나! + // react 해당 데이터를 사용하는 모든 컴포넌트를 부라우저에서 다시 그려준다. + } else { + alert('카드 삭제에 실패했습니다.'); + } + } + return ( -
-
+
+
{ - Object.entries(cards).map(([subject, tasks]) => { - return ; - }) + Object.entries(cards).map(([subject, tasks]) => + // Object.entries(cards) : ㅏkey에 done, value에 해당값들. 즉 [todo,[{},{}]]로 만들어준다. + , // map(function) : function를 적용시켜서 변환 + //remove={remove} : 자식한테 props로 전달해준다. + ) }
- ADD + ADD
); } diff --git a/static/src/page/Enrollment.jsx b/static/src/page/Enrollment.jsx index e30a456..2788942 100644 --- a/static/src/page/Enrollment.jsx +++ b/static/src/page/Enrollment.jsx @@ -6,19 +6,35 @@ import Input from "../component/atom/Input"; function Enrollment({history}) { const [title, setTitle] = useState(''); + const [assignee, setAssignee] = useState(''); + const [priority, setPriority]=useState(2); const onChange = (event) => { event.stopPropagation(); setTitle(event.target.value); }; + const onChangeAssignee = (event) => { + event.stopPropagation(); + setAssignee(event.target.value); + }; + + const onChangePriority = (event) => { + event.stopPropagation(); + setPriority(event.target.value); + }; + + function onDisplayPriority(){ + document.getElementById("priority").selectedIndex="1"; + } + const onPreviousClick = (event) => { event.stopPropagation(); history.goBack(); }; const add = async () => { - const isSuccesses = await createCard(title); + const isSuccesses = await createCard(title, assignee, priority); if (isSuccesses) { history.goBack(); } else { @@ -41,13 +57,29 @@ function Enrollment({history}) { const onClearClick = (event) => { event.stopPropagation(); setTitle(''); + setAssignee(''); + setPriority(2); + onDisplayPriority(); + }; + return (
+
+ + +
+ + +