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