Added column adding

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 (
       <div className="App">
-        <Header addColumn={this.addColumn} addTask={this.addTask} />
+        <Header
+          addColumn={this.addColumn}
+          addTask={this.addTask}
+          columns={this.state.columns}
+        />
         <div className="panel">
           {this.state.columns.map((column, index) => (
             <KBColumn

ReactLearning/kanban-board/src/components/Header.tsx

@@ -1,17 +1,26 @@
 import React from "react";
 import Modal from "./Modal";
 import { Component } from "react";
+import Task from "../types/Task";
 
 type TaskPassback = {
   title: string;
   description: string;
   priority: priority;
+  column: number;
+};
+type Column = {
+  id: number;
+  name: string;
+  color: string;
+  tasks: Task[];
 };
 
 type priority = "normal" | "important" | "urgent";
 type HeaderProps = {
   addColumn: () => 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<HeaderProps, State> {
@@ -34,6 +44,7 @@ class Header extends React.Component<HeaderProps, State> {
       titleVar: "",
       descVar: "",
       prioVar: "normal",
+      columnNumber: props.columns[0].id,
     };
   }
 
@@ -48,18 +59,23 @@ class Header extends React.Component<HeaderProps, State> {
   handleInputChange(event: React.ChangeEvent<HTMLInputElement>) {
     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<HTMLSelectElement>) {
-    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<HeaderProps, State> {
           Kango Bango
         </h1>
         <Modal show={this.state.show} handleClose={this.hideModal}>
+          <h3> Add Task</h3>
+          <p>{this.props.columns.length}</p>
+          <select
+            value={this.state.columnNumber}
+            onChange={this.handleSelectChange}
+            id="columnSelect"
+          >
+            {this.props.columns.map((column) => (
+              <option value={column.id}>{column.name}</option>
+            ))}
+            ;
+          </select>
           <label>
             {" "}
             Title:
@@ -91,7 +119,7 @@ class Header extends React.Component<HeaderProps, State> {
             {" "}
             Description:
             <input
-              type="text"
+              type="textarea"
               id="descInput"
               value={this.state.descVar}
               onChange={this.handleInputChange}
@@ -105,24 +133,32 @@ class Header extends React.Component<HeaderProps, State> {
             <select
               value={this.state.prioVar}
               onChange={this.handleSelectChange}
+              id="prioritySelect"
             >
               <option value="normal">Normal</option>
               <option value="important">Important</option>
               <option value="urgent">Urgent</option>
             </select>
           </label>
-
+          <br />
           <button
             onClick={() =>
               this.props.addTask({
                 title: this.state.titleVar,
                 description: this.state.descVar,
                 priority: this.state.prioVar,
+                column: this.state.columnNumber,
               })
             }
           >
-            {" "}
-            AHHHHH{" "}
+            Add Task
+          </button>
+          <button
+            onClick={() => {
+              this.hideModal();
+            }}
+          >
+            Close
           </button>
         </Modal>
         <button onClick={this.showModal}> Add task </button>

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 (
     <div className={showHideClassName}>
-      <section className="modal-main">
-        {props.children}
-        <button type="button" onClick={props.handleClose}>
-          Close
-        </button>
-      </section>
+      <section className="modal-main">{props.children}</section>
     </div>
   );
 };
 
-export default Modal;
+export default Modal;

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