Actually remembered to bind one of the button presses
This commit is contained in:
James McKenzie
parent
a330c21f2a
commit
98d2764b1a
@ -8,7 +8,7 @@ type TaskPassback = {
|
||||
title: string;
|
||||
description: string;
|
||||
priority: "normal" | "important" | "urgent";
|
||||
}
|
||||
};
|
||||
|
||||
type Column = {
|
||||
id: number;
|
||||
@ -67,28 +67,21 @@ class App extends React.Component<{}, State> {
|
||||
});
|
||||
}
|
||||
|
||||
addTask(taskInstance? :TaskPassback) {
|
||||
addTask(taskInstance?: TaskPassback) {
|
||||
if (this.state.columns.length > 0) {
|
||||
let taskId = this.state.taskIterator;
|
||||
|
||||
if (taskInstance !== undefined){
|
||||
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
|
||||
priority: taskInstance.priority,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
else{
|
||||
alert("You might want to consider adding a column!")
|
||||
} else {
|
||||
alert("You might want to consider adding a column!");
|
||||
}
|
||||
}
|
||||
|
||||
@ -96,18 +89,18 @@ class App extends React.Component<{}, State> {
|
||||
return (
|
||||
<div className="App">
|
||||
<Header addColumn={this.addColumn} addTask={this.addTask} />
|
||||
<div className='panel'>
|
||||
{this.state.columns.map((column, index) => (
|
||||
<KBColumn
|
||||
color={column.color}
|
||||
title={column.name}
|
||||
key={index}
|
||||
onDelete={this.deleteColumn}
|
||||
id={column.id}
|
||||
tasks={column.tasks}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<div className="panel">
|
||||
{this.state.columns.map((column, index) => (
|
||||
<KBColumn
|
||||
color={column.color}
|
||||
title={column.name}
|
||||
key={index}
|
||||
onDelete={this.deleteColumn}
|
||||
id={column.id}
|
||||
tasks={column.tasks}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
import React from "react";
|
||||
import Modal from "./Modal"
|
||||
import { Component } from 'react';
|
||||
import Modal from "./Modal";
|
||||
import { Component } from "react";
|
||||
|
||||
type TaskPassback = {
|
||||
title: string;
|
||||
description: string;
|
||||
priority: priority;
|
||||
}
|
||||
};
|
||||
|
||||
type priority = "normal" | "important" | "urgent";
|
||||
type HeaderProps = {
|
||||
@ -15,104 +15,120 @@ type HeaderProps = {
|
||||
};
|
||||
|
||||
type State = {
|
||||
show: boolean
|
||||
titleVar: string,
|
||||
descVar: string,
|
||||
prioVar: 'normal'|'important'|'urgent',
|
||||
show: boolean;
|
||||
titleVar: string;
|
||||
descVar: string;
|
||||
prioVar: priority;
|
||||
};
|
||||
|
||||
class Header extends React.Component<HeaderProps, State> {
|
||||
constructor(props: HeaderProps) {
|
||||
super(props);
|
||||
this.showModal = this.showModal.bind(this);
|
||||
this.hideModal = this.hideModal.bind(this);
|
||||
this.handleInputChange = this.handleInputChange.bind(this);
|
||||
this.handleSelectChange = this.handleSelectChange.bind(this);
|
||||
|
||||
this.state = {
|
||||
show: false,
|
||||
titleVar: "",
|
||||
descVar: "",
|
||||
prioVar: "normal",
|
||||
};
|
||||
}
|
||||
|
||||
class Header extends React.Component<HeaderProps, State>{
|
||||
constructor(props: HeaderProps) {
|
||||
super(props);
|
||||
this.showModal = this.showModal.bind(this);
|
||||
this.hideModal = this.hideModal.bind(this);
|
||||
this.handleInputChange = this.handleInputChange.bind(this);
|
||||
|
||||
this.state = {
|
||||
show: false,
|
||||
titleVar: "",
|
||||
descVar: "",
|
||||
prioVar: 'normal'
|
||||
showModal = () => {
|
||||
this.setState({ show: true });
|
||||
};
|
||||
}
|
||||
|
||||
hideModal = () => {
|
||||
this.setState({ show: false });
|
||||
};
|
||||
|
||||
showModal = () => {
|
||||
this.setState({ show: true });
|
||||
};
|
||||
|
||||
hideModal = () => {
|
||||
this.setState({ show: false });
|
||||
};
|
||||
|
||||
handleInputChange(event: React.ChangeEvent<HTMLInputElement>) {
|
||||
const target = event.target.id
|
||||
if (target === "titleInput"){
|
||||
let hold = this.state.titleVar
|
||||
this.setState({titleVar: event.target.value})
|
||||
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 });
|
||||
}
|
||||
}
|
||||
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 });
|
||||
}
|
||||
}
|
||||
|
||||
handleSelectChange(event: React.ChangeEvent<HTMLSelectElement>){
|
||||
|
||||
event.target.value === 'normal' ? this.setState({prioVar: 'normal'})
|
||||
: event.target.value === 'important' ? this.setState({prioVar: 'important'})
|
||||
: this.setState({prioVar: 'urgent'})
|
||||
|
||||
}
|
||||
|
||||
|
||||
render(){
|
||||
return (
|
||||
|
||||
<div className="header" style={{ height: 60 }}>
|
||||
<h1
|
||||
style={{
|
||||
float: "left",
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
verticalAlign: "center",
|
||||
}}
|
||||
>
|
||||
Kango Bango
|
||||
render() {
|
||||
return (
|
||||
<div className="header" style={{ height: 60 }}>
|
||||
<h1
|
||||
style={{
|
||||
float: "left",
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
verticalAlign: "center",
|
||||
}}
|
||||
>
|
||||
Kango Bango
|
||||
</h1>
|
||||
<Modal show={this.state.show} handleClose={this.hideModal}>
|
||||
|
||||
<label> Title:
|
||||
<input type="text" id="titleInput" value={this.state.titleVar} onChange={this.handleInputChange} />
|
||||
<Modal show={this.state.show} handleClose={this.hideModal}>
|
||||
<label>
|
||||
{" "}
|
||||
Title:
|
||||
<input
|
||||
type="text"
|
||||
id="titleInput"
|
||||
value={this.state.titleVar}
|
||||
onChange={this.handleInputChange}
|
||||
/>
|
||||
</label>
|
||||
<br/>
|
||||
<label> Description:
|
||||
<input type="text" id='descInput' value={this.state.descVar} onChange={this.handleInputChange} />
|
||||
<br />
|
||||
<label>
|
||||
{" "}
|
||||
Description:
|
||||
<input
|
||||
type="text"
|
||||
id="descInput"
|
||||
value={this.state.descVar}
|
||||
onChange={this.handleInputChange}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<br/>
|
||||
<label> Priority:
|
||||
<select value={this.state.prioVar} onChange={this.handleSelectChange}>
|
||||
<option value='normal'>Normal</option>
|
||||
<option value='important'>Important</option>
|
||||
<option value='urgent'>Urgent</option>
|
||||
|
||||
<br />
|
||||
<label>
|
||||
{" "}
|
||||
Priority:
|
||||
<select
|
||||
value={this.state.prioVar}
|
||||
onChange={this.handleSelectChange}
|
||||
>
|
||||
<option value="normal">Normal</option>
|
||||
<option value="important">Important</option>
|
||||
<option value="urgent">Urgent</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<button onClick={() => this.props.addTask({title: this.state.titleVar, description: this.state.descVar, priority: this.state.prioVar})}> AHHHHH </button>
|
||||
|
||||
|
||||
|
||||
</Modal>
|
||||
<button onClick={this.showModal}> Add task </button>
|
||||
<button onClick={this.props.addColumn}> Add column </button>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
);
|
||||
};
|
||||
<button
|
||||
onClick={() =>
|
||||
this.props.addTask({
|
||||
title: this.state.titleVar,
|
||||
description: this.state.descVar,
|
||||
priority: this.state.prioVar,
|
||||
})
|
||||
}
|
||||
>
|
||||
{" "}
|
||||
AHHHHH{" "}
|
||||
</button>
|
||||
</Modal>
|
||||
<button onClick={this.showModal}> Add task </button>
|
||||
<button onClick={this.props.addColumn}> Add column </button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
export default Header;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user