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}
-
-
+
);
};
-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;
+}