Added Progression and Regression of tasks in the kanban via buttons
This commit is contained in:
parent
cfaccacf68
commit
3ed95ec796
@ -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";
|
||||
}
|
||||
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"
|
||||
>
|
||||
return (
|
||||
<div
|
||||
style={{ backgroundColor: bgc, display: "inline" }}
|
||||
className="prioBlock"
|
||||
title={task.priority}
|
||||
></div>
|
||||
<div className="taskText">
|
||||
<h3> {task.title} </h3>
|
||||
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>
|
||||
<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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user