@@ -49,7 +49,6 @@ class App extends React.Component<{}, State> { | |||||
); | ); | ||||
columnsNew[corrIndex] = alteredColumn; | columnsNew[corrIndex] = alteredColumn; | ||||
this.setState({ columns: columnsNew }); | this.setState({ columns: columnsNew }); | ||||
alert("Deleted Task" + taskID + "from Col" + columnID); | |||||
}; | }; | ||||
/* Deletes a column with a specific ID | /* Deletes a column with a specific ID | ||||
@@ -89,6 +88,70 @@ class App extends React.Component<{}, State> { | |||||
}); | }); | ||||
} | } | ||||
}; | }; | ||||
/* Progresses the task to the column immediately to the right | |||||
@param columnId: The column which the task is originally hosted at | |||||
@param taskId: The UID for the task | |||||
@return void | |||||
Bugs: None that I am aware of | |||||
Last Edited: 2020/04/30 10:30 | |||||
*/ | |||||
progressTask = (columnId: number, taskId: number) => { | |||||
let columns = this.state.columns; | |||||
let fromColumn = columns.find((column) => column.id === columnId); | |||||
if (!fromColumn) { | |||||
alert("Initial Column not found. State bad"); | |||||
return; | |||||
} | |||||
let fromColumnIndex = columns.indexOf(fromColumn); | |||||
if (!columns[fromColumnIndex + 1]) { | |||||
alert("There is no column to progress to. Voiding action"); | |||||
return; | |||||
} | |||||
let toColumn = columns[fromColumnIndex + 1]; | |||||
let movingTask = fromColumn.tasks.find((task) => task.id === taskId); | |||||
if (!movingTask) { | |||||
alert("Moving task not found. Voiding action"); | |||||
return; | |||||
} | |||||
toColumn.tasks.push(movingTask); | |||||
this.deleteTask(columnId, taskId); | |||||
columns[fromColumnIndex + 1] = toColumn; | |||||
this.setState({ columns: columns }); | |||||
}; | |||||
/* Regresses the task to the column immediately to the left | |||||
@param columnId: The column which the task is originally hosted at | |||||
@param taskId: The UID for the task | |||||
@return void | |||||
Bugs: None that I am aware of | |||||
Last Edited: 2020/04/30 10:50 | |||||
*/ | |||||
regressTask = (columnId: number, taskId: number) => { | |||||
let columns = this.state.columns; | |||||
let fromColumn = columns.find((column) => column.id === columnId); | |||||
if (!fromColumn) { | |||||
alert("Initial Column not found. State bad"); | |||||
return; | |||||
} | |||||
let fromColumnIndex = columns.indexOf(fromColumn); | |||||
if (!columns[fromColumnIndex - 1]) { | |||||
alert("There is no column to regress to. Voiding action"); | |||||
return; | |||||
} | |||||
let toColumn = columns[fromColumnIndex - 1]; | |||||
let movingTask = fromColumn.tasks.find((task) => task.id === taskId); | |||||
if (!movingTask) { | |||||
alert("Moving task not found. Voiding action"); | |||||
return; | |||||
} | |||||
toColumn.tasks.push(movingTask); | |||||
this.deleteTask(columnId, taskId); | |||||
columns[fromColumnIndex - 1] = toColumn; | |||||
this.setState({ columns: columns }); | |||||
}; | |||||
/* Adds a task to a specified column | /* Adds a task to a specified column | ||||
@param taskInstance: Data passed back from the modal which contains the necessary information to create the task | @param taskInstance: Data passed back from the modal which contains the necessary information to create the task | ||||
@@ -98,6 +161,7 @@ class App extends React.Component<{}, State> { | |||||
Last Edited 2020/04/29 15:00 | Last Edited 2020/04/29 15:00 | ||||
*/ | */ | ||||
addTask = (taskInstance?: TaskPassback) => { | addTask = (taskInstance?: TaskPassback) => { | ||||
if (this.state.columns.length === 0) { | if (this.state.columns.length === 0) { | ||||
alert("You might want to consider adding a column!"); | alert("You might want to consider adding a column!"); | ||||
@@ -147,6 +211,8 @@ class App extends React.Component<{}, State> { | |||||
key={index} | key={index} | ||||
onDelete={this.deleteColumn} | onDelete={this.deleteColumn} | ||||
deleteTask={this.deleteTask} | deleteTask={this.deleteTask} | ||||
progressTask={this.progressTask} | |||||
regressTask={this.regressTask} | |||||
id={column.id} | id={column.id} | ||||
tasks={column.tasks} | tasks={column.tasks} | ||||
/> | /> | ||||
@@ -1,7 +1,10 @@ | |||||
import Task from "../types/Task"; | import Task from "../types/Task"; | ||||
import React from 'react'; | |||||
import { FaTimes } from 'react-icons/fa' | |||||
import React from "react"; | |||||
import { | |||||
FaTimes, | |||||
FaLongArrowAltRight, | |||||
FaLongArrowAltLeft, | |||||
} from "react-icons/fa"; | |||||
type KBColumnProps = { | type KBColumnProps = { | ||||
color: string; | color: string; | ||||
@@ -9,19 +12,13 @@ type KBColumnProps = { | |||||
tasks: Task[]; | tasks: Task[]; | ||||
id: number; | id: number; | ||||
onDelete?: (id: number) => void; | onDelete?: (id: number) => void; | ||||
progressTask?: (cId: number, tId: number) => void; | |||||
regressTask?: (cId: number, tId: number) => void; | |||||
deleteTask?: (cId: number, tId: number) => void; | deleteTask?: (cId: number, tId: number) => void; | ||||
}; | }; | ||||
let bgc = "hotpink"; | let bgc = "hotpink"; | ||||
class KBColumn extends React.Component<KBColumnProps> { | class KBColumn extends React.Component<KBColumnProps> { | ||||
/* Creates the JSX for all the tasks in the tasks array | /* Creates the JSX for all the tasks in the tasks array | ||||
@param None | @param None | ||||
@return A JSX.Element[] containing each of the Divs for the task | @return A JSX.Element[] containing each of the Divs for the task | ||||
@@ -31,61 +28,79 @@ class KBColumn extends React.Component<KBColumnProps> { | |||||
Last Edited: XXXX-XX-XX XX:XX | Last Edited: XXXX-XX-XX XX:XX | ||||
*/ | */ | ||||
getTaskRender = () =>{ | |||||
return this.props.tasks.map((task) => { | |||||
if (task.priority === "urgent") { | |||||
bgc = "red"; | |||||
} else if (task.priority === "important") { | |||||
bgc = "yellow"; | |||||
} else if (task.priority === "normal") { | |||||
bgc = "blue"; | |||||
} | |||||
return ( | |||||
<div | |||||
style={{ | |||||
borderColor: "#ccc", | |||||
borderWidth: "1px", | |||||
borderStyle: "solid", | |||||
margin: "10px", | |||||
}} | |||||
className="taskWrapper" | |||||
> | |||||
<div | |||||
style={{ backgroundColor: bgc, display: "inline" }} | |||||
className="prioBlock" | |||||
title={task.priority} | |||||
></div> | |||||
<div className="taskText"> | |||||
<h3> {task.title} </h3> | |||||
getTaskRender = () => { | |||||
return this.props.tasks.map((task) => { | |||||
if (task.priority === "urgent") { | |||||
bgc = "red"; | |||||
} else if (task.priority === "important") { | |||||
bgc = "yellow"; | |||||
} else if (task.priority === "normal") { | |||||
bgc = "blue"; | |||||
} | |||||
<p> {task.description} </p> | |||||
return ( | |||||
<div | |||||
style={{ | |||||
borderColor: "#ccc", | |||||
borderWidth: "1px", | |||||
borderStyle: "solid", | |||||
margin: "10px", | |||||
}} | |||||
className="taskWrapper" | |||||
> | |||||
<div | |||||
style={{ backgroundColor: bgc, display: "inline" }} | |||||
className="prioBlock" | |||||
title={task.priority} | |||||
></div> | |||||
<div className="taskText"> | |||||
<h3> {task.title} </h3> | |||||
<p> {task.description} </p> | |||||
</div> | |||||
<div className="actionBlock"> | |||||
<FaTimes | |||||
style={{ color: "red", cursor: "pointer" }} | |||||
onClick={() => | |||||
this.props.deleteTask && | |||||
this.props.deleteTask(this.props.id, task.id) | |||||
} | |||||
/> | |||||
<FaLongArrowAltRight | |||||
style={{ color: "red", cursor: "pointer" }} | |||||
onClick={() => | |||||
this.props.progressTask && | |||||
this.props.progressTask(this.props.id, task.id) | |||||
} | |||||
/> | |||||
<FaLongArrowAltLeft | |||||
style={{ color: "red", cursor: "pointer" }} | |||||
onClick={() => | |||||
this.props.regressTask && | |||||
this.props.regressTask(this.props.id, task.id) | |||||
} | |||||
/> | |||||
</div> | |||||
</div> | </div> | ||||
<div className="actionBlock"> | |||||
<FaTimes style={{color: 'red', cursor: 'pointer'}} onClick={() => this.props.deleteTask && this.props.deleteTask(this.props.id, task.id)} /> | |||||
); | |||||
}); | |||||
}; | |||||
</div> | |||||
render() { | |||||
return ( | |||||
<div className="KBColumn" style={{ backgroundColor: this.props.color }}> | |||||
<h3>{this.props.title} </h3> | |||||
{this.getTaskRender()} | |||||
<button | |||||
onClick={() => { | |||||
this.props.onDelete && this.props.onDelete(this.props.id); | |||||
}} | |||||
> | |||||
Delete | |||||
</button> | |||||
</div> | </div> | ||||
); | ); | ||||
}); | |||||
}; | |||||
render() { | |||||
return ( | |||||
<div className="KBColumn" style={{ backgroundColor: this.props.color }}> | |||||
<h3>{this.props.title} </h3> | |||||
{this.getTaskRender()} | |||||
<button | |||||
onClick={() => { | |||||
this.props.onDelete && this.props.onDelete(this.props.id); | |||||
}} | |||||
> | |||||
Delete | |||||
</button> | |||||
</div> | |||||
); | |||||
} | |||||
} | |||||
} | |||||
} | |||||
export default KBColumn; | export default KBColumn; |