@@ -49,7 +49,6 @@ class App extends React.Component<{}, State> { | |||
); | |||
columnsNew[corrIndex] = alteredColumn; | |||
this.setState({ columns: columnsNew }); | |||
alert("Deleted Task" + taskID + "from Col" + columnID); | |||
}; | |||
/* 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 | |||
@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 | |||
*/ | |||
addTask = (taskInstance?: TaskPassback) => { | |||
if (this.state.columns.length === 0) { | |||
alert("You might want to consider adding a column!"); | |||
@@ -147,6 +211,8 @@ class App extends React.Component<{}, State> { | |||
key={index} | |||
onDelete={this.deleteColumn} | |||
deleteTask={this.deleteTask} | |||
progressTask={this.progressTask} | |||
regressTask={this.regressTask} | |||
id={column.id} | |||
tasks={column.tasks} | |||
/> | |||
@@ -1,7 +1,10 @@ | |||
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 = { | |||
color: string; | |||
@@ -9,19 +12,13 @@ type KBColumnProps = { | |||
tasks: Task[]; | |||
id: number; | |||
onDelete?: (id: number) => void; | |||
progressTask?: (cId: number, tId: number) => void; | |||
regressTask?: (cId: number, tId: number) => void; | |||
deleteTask?: (cId: number, tId: number) => void; | |||
}; | |||
let bgc = "hotpink"; | |||
class KBColumn extends React.Component<KBColumnProps> { | |||
/* Creates the JSX for all the tasks in the tasks array | |||
@param None | |||
@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 | |||
*/ | |||
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 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> | |||
); | |||
}); | |||
}; | |||
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; |