diff --git a/ReactLearning/kanban-board/src/App.tsx b/ReactLearning/kanban-board/src/App.tsx index 7560422..93739ab 100644 --- a/ReactLearning/kanban-board/src/App.tsx +++ b/ReactLearning/kanban-board/src/App.tsx @@ -3,11 +3,12 @@ import KBColumn from "./components/KBColumn"; import "./App.css"; import Header from "./components/Header"; import Task from "./types/Task"; - +import { isThisTypeNode } from "typescript"; type TaskPassback = { title: string; description: string; priority: "normal" | "important" | "urgent"; + column: number; }; type Column = { @@ -59,6 +60,7 @@ class App extends React.Component<{}, State> { addColumn() { let columnId = this.state.columnIterator; this.setState({ columnIterator: columnId + 1 }); + this.state.columns.push({ id: columnId, name: "tempName" + columnId, @@ -68,17 +70,27 @@ class App extends React.Component<{}, State> { } addTask(taskInstance?: TaskPassback) { + console.log(taskInstance); if (this.state.columns.length > 0) { let taskId = this.state.taskIterator; - + let index = -1; if (taskInstance !== undefined) { this.setState({ taskIterator: taskId + 1 }); - this.state.columns[0].tasks.push({ - id: taskId, - title: taskInstance.title, - description: taskInstance.description, - priority: taskInstance.priority, - }); + let indexObj = this.state.columns.find( + (o) => o.id === taskInstance.column + ); + if (indexObj) { + index = this.state.columns.indexOf(indexObj); + } + + if (index >= 0) { + this.state.columns[index].tasks.push({ + id: taskId, + title: taskInstance.title, + description: taskInstance.description, + priority: taskInstance.priority, + }); + } } } else { alert("You might want to consider adding a column!"); @@ -88,7 +100,11 @@ class App extends React.Component<{}, State> { render() { return (
-
+
{this.state.columns.map((column, index) => ( void; addTask: (taskInstance?: TaskPassback) => void; + columns: Column[]; }; type State = { @@ -19,6 +28,7 @@ type State = { titleVar: string; descVar: string; prioVar: priority; + columnNumber: number; }; class Header extends React.Component { @@ -34,6 +44,7 @@ class Header extends React.Component { titleVar: "", descVar: "", prioVar: "normal", + columnNumber: props.columns[0].id, }; } @@ -48,18 +59,23 @@ class Header extends React.Component { handleInputChange(event: React.ChangeEvent) { const target = event.target.id; if (target === "titleInput") { - let hold = this.state.titleVar; this.setState({ titleVar: event.target.value }); } if (target === "descInput") { - let hold = this.state.descVar; this.setState({ descVar: event.target.value }); } } handleSelectChange(event: React.ChangeEvent) { - const selectedValue = event.target.value as priority; - this.setState({ prioVar: selectedValue }); + if (event.target.id === "prioritySelect") { + const selectedValue = event.target.value as priority; + this.setState({ prioVar: selectedValue }); + } + + if (event.target.id === "columnSelect") { + const selectedValue = parseInt(event.target.value); + this.setState({ columnNumber: selectedValue }); + } } render() { @@ -76,6 +92,18 @@ class Header extends React.Component { Kango Bango +

Add Task

+

{this.props.columns.length}

+ - +
+
diff --git a/ReactLearning/kanban-board/src/components/Modal.tsx b/ReactLearning/kanban-board/src/components/Modal.tsx index b18be9c..3e1c941 100644 --- a/ReactLearning/kanban-board/src/components/Modal.tsx +++ b/ReactLearning/kanban-board/src/components/Modal.tsx @@ -1,24 +1,20 @@ -import './modal.css'; +import "./modal.css"; type ModalProps = { - handleClose: () => void, - show: boolean, - children: any - -} -const Modal = ( props: ModalProps ) => { - const showHideClassName = props.show ? "modal display-block" : "modal display-none"; + handleClose: () => void; + show: boolean; + children: any; +}; +const Modal = (props: ModalProps) => { + const showHideClassName = props.show + ? "modal display-block" + : "modal display-none"; return (
-
- {props.children} - -
+
{props.children}
); }; -export default Modal; \ No newline at end of file +export default Modal; diff --git a/ReactLearning/kanban-board/src/components/modal.css b/ReactLearning/kanban-board/src/components/modal.css index 154d2e6..d4ee8e4 100644 --- a/ReactLearning/kanban-board/src/components/modal.css +++ b/ReactLearning/kanban-board/src/components/modal.css @@ -1,26 +1,59 @@ .modal { - position: fixed; - top: 0; - left: 0; - width:100%; - height: 100%; - background: rgba(0, 0, 0, 0.6); - } - - .modal-main { - position:fixed; - background: white; - width: 80%; - height: auto; - top:50%; - left:50%; - transform: translate(-50%,-50%); - } - - .display-block { - display: block; - } - - .display-none { - display: none; - } \ No newline at end of file + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + color: black; + background: rgba(0, 0, 0, 0.5); +} + +.modal-main label { + float: left; + margin-left: 20%; +} +.modal-main input { + display: block; + float: right; +} +select { + background-color: red; + text-align: right; + margin-left: auto; +} +.modal-main button { + margin: 0 auto; + float: left; + display: block; + transform: translate(-50%); + margin-left: 0; + background-color: dodgerblue; +} + +.modal-main button:first-of-type { + clear: left; + display: block; + margin-left: 50%; + margin-right: 0; + text-align: center; + background-color: green; +} + +.modal-main { + position: fixed; + text-align: center; + background: white; + width: 50%; + height: auto; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.display-block { + display: block; +} + +.display-none { + display: none; +}