@@ -1192,6 +1192,35 @@ | |||||
} | } | ||||
} | } | ||||
}, | }, | ||||
"@fortawesome/fontawesome-common-types": { | |||||
"version": "0.2.35", | |||||
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.35.tgz", | |||||
"integrity": "sha512-IHUfxSEDS9dDGqYwIW7wTN6tn/O8E0n5PcAHz9cAaBoZw6UpG20IG/YM3NNLaGPwPqgjBAFjIURzqoQs3rrtuw==" | |||||
}, | |||||
"@fortawesome/fontawesome-svg-core": { | |||||
"version": "1.2.35", | |||||
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.35.tgz", | |||||
"integrity": "sha512-uLEXifXIL7hnh2sNZQrIJWNol7cTVIzwI+4qcBIq9QWaZqUblm0IDrtSqbNg+3SQf8SMGHkiSigD++rHmCHjBg==", | |||||
"requires": { | |||||
"@fortawesome/fontawesome-common-types": "^0.2.35" | |||||
} | |||||
}, | |||||
"@fortawesome/free-solid-svg-icons": { | |||||
"version": "5.15.3", | |||||
"resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.3.tgz", | |||||
"integrity": "sha512-XPeeu1IlGYqz4VWGRAT5ukNMd4VHUEEJ7ysZ7pSSgaEtNvSo+FLurybGJVmiqkQdK50OkSja2bfZXOeyMGRD8Q==", | |||||
"requires": { | |||||
"@fortawesome/fontawesome-common-types": "^0.2.35" | |||||
} | |||||
}, | |||||
"@fortawesome/react-fontawesome": { | |||||
"version": "0.1.14", | |||||
"resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.14.tgz", | |||||
"integrity": "sha512-4wqNb0gRLVaBm/h+lGe8UfPPivcbuJ6ecI4hIgW0LjI7kzpYB9FkN0L9apbVzg+lsBdcTf0AlBtODjcSX5mmKA==", | |||||
"requires": { | |||||
"prop-types": "^15.7.2" | |||||
} | |||||
}, | |||||
"@hapi/address": { | "@hapi/address": { | ||||
"version": "2.1.4", | "version": "2.1.4", | ||||
"resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz", | "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz", | ||||
@@ -6617,6 +6646,11 @@ | |||||
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.13.3.tgz", | "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.13.3.tgz", | ||||
"integrity": "sha512-DUgl6+HDzB0iEptNQEXLx/KhTmDb8tZUHSeLqpnjpknR70H0nC2t9N73BK6fN4hOvJ84pKlIQVQ4k5FFlBedKA==" | "integrity": "sha512-DUgl6+HDzB0iEptNQEXLx/KhTmDb8tZUHSeLqpnjpknR70H0nC2t9N73BK6fN4hOvJ84pKlIQVQ4k5FFlBedKA==" | ||||
}, | }, | ||||
"font-awesome": { | |||||
"version": "4.7.0", | |||||
"resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz", | |||||
"integrity": "sha1-j6jPBBGhoxr9B7BtKQK7n8gVoTM=" | |||||
}, | |||||
"for-in": { | "for-in": { | ||||
"version": "1.0.2", | "version": "1.0.2", | ||||
"resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz", | "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz", | ||||
@@ -12445,6 +12479,11 @@ | |||||
"resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz", | "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz", | ||||
"integrity": "sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==" | "integrity": "sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==" | ||||
}, | }, | ||||
"react-icons": { | |||||
"version": "4.2.0", | |||||
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.2.0.tgz", | |||||
"integrity": "sha512-rmzEDFt+AVXRzD7zDE21gcxyBizD/3NqjbX6cmViAgdqfJ2UiLer8927/QhhrXQV7dEj/1EGuOTPp7JnLYVJKQ==" | |||||
}, | |||||
"react-is": { | "react-is": { | ||||
"version": "16.13.1", | "version": "16.13.1", | ||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", | "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", | ||||
@@ -3,6 +3,9 @@ | |||||
"version": "0.1.0", | "version": "0.1.0", | ||||
"private": true, | "private": true, | ||||
"dependencies": { | "dependencies": { | ||||
"@fortawesome/fontawesome-svg-core": "^1.2.35", | |||||
"@fortawesome/free-solid-svg-icons": "^5.15.3", | |||||
"@fortawesome/react-fontawesome": "^0.1.14", | |||||
"@testing-library/jest-dom": "^5.12.0", | "@testing-library/jest-dom": "^5.12.0", | ||||
"@testing-library/react": "^11.2.6", | "@testing-library/react": "^11.2.6", | ||||
"@testing-library/user-event": "^12.8.3", | "@testing-library/user-event": "^12.8.3", | ||||
@@ -10,8 +13,10 @@ | |||||
"@types/node": "^12.20.10", | "@types/node": "^12.20.10", | ||||
"@types/react": "^17.0.3", | "@types/react": "^17.0.3", | ||||
"@types/react-dom": "^17.0.3", | "@types/react-dom": "^17.0.3", | ||||
"font-awesome": "^4.7.0", | |||||
"react": "^17.0.2", | "react": "^17.0.2", | ||||
"react-dom": "^17.0.2", | "react-dom": "^17.0.2", | ||||
"react-icons": "^4.2.0", | |||||
"react-modal": "^3.13.1", | "react-modal": "^3.13.1", | ||||
"react-scripts": "4.0.3", | "react-scripts": "4.0.3", | ||||
"typescript": "^4.2.4", | "typescript": "^4.2.4", | ||||
@@ -62,6 +62,13 @@ html { | |||||
flex: 5; | flex: 5; | ||||
height: 100%; | height: 100%; | ||||
} | } | ||||
.actionBlock{ | |||||
order: 10; | |||||
flex: 1; | |||||
display: flex; | |||||
background-color: purple; | |||||
} | |||||
.panel { | .panel { | ||||
display: flex; | display: flex; | ||||
@@ -17,6 +17,7 @@ class App extends React.Component<{}, State> { | |||||
constructor(props: any) { | constructor(props: any) { | ||||
super(props); | super(props); | ||||
this.deleteColumn = this.deleteColumn.bind(this); | this.deleteColumn = this.deleteColumn.bind(this); | ||||
this.deleteTask = this.deleteTask.bind(this); | |||||
this.addColumn = this.addColumn.bind(this); | this.addColumn = this.addColumn.bind(this); | ||||
this.addTask = this.addTask.bind(this); | this.addTask = this.addTask.bind(this); | ||||
this.state = { | this.state = { | ||||
@@ -26,9 +27,25 @@ class App extends React.Component<{}, State> { | |||||
}; | }; | ||||
} | } | ||||
deleteColumn(id: number) { | |||||
deleteTask(cId: number, tId: number) { | |||||
/* Find Column */ | |||||
const correctColunm = this.state.columns.filter( | |||||
(column) => column.id === cId //Grabs the correct column according to the column ID | |||||
); | |||||
let columnsNew = this.state.columns; //Clones columns. Should be done earlier??????? | |||||
const corrIndex = columnsNew.indexOf(correctColunm[0]); //Grabs the index of the correct column. [0] is bad programming, but makes sense due to IDs being unique | |||||
/* Find and Remove Task from Found Column */ | |||||
let alteredColumn = columnsNew[corrIndex]; //Collects a copt of the correct column. Again... unsure if timing is correct | |||||
alteredColumn.tasks = alteredColumn.tasks.filter((task) => task.id !== tId); //Filter all the tasks to allow all except from the wanted. Maybe could be more efficient | |||||
// Unsure how TS works under the hood | |||||
columnsNew[corrIndex] = alteredColumn; //Input the altered column into the cloned list of columns | |||||
this.setState({ columns: columnsNew }); //Push the cloned list with the altered column into the state | |||||
alert("Deleted Task" + tId + "from Col" + cId); // Test for column numbers and IDs | |||||
} | |||||
deleteColumn(id: number) { | |||||
const { columns } = { ...this.state }; | const { columns } = { ...this.state }; | ||||
const filteredColumns = columns.filter((column) => column.id !== id); | const filteredColumns = columns.filter((column) => column.id !== id); | ||||
@@ -104,6 +121,7 @@ class App extends React.Component<{}, State> { | |||||
title={column.name} | title={column.name} | ||||
key={index} | key={index} | ||||
onDelete={this.deleteColumn} | onDelete={this.deleteColumn} | ||||
deleteTask={this.deleteTask} | |||||
id={column.id} | id={column.id} | ||||
tasks={column.tasks} | tasks={column.tasks} | ||||
/> | /> | ||||
@@ -1,11 +1,15 @@ | |||||
import Task from "../types/Task"; | import Task from "../types/Task"; | ||||
import React from 'react'; | import React from 'react'; | ||||
import { FaTimes } from 'react-icons/fa' | |||||
type KBColumnProps = { | type KBColumnProps = { | ||||
color: string; | color: string; | ||||
title: string; | title: string; | ||||
tasks: Task[]; | tasks: Task[]; | ||||
id: number; | id: number; | ||||
onDelete?: (id: number) => void; | onDelete?: (id: number) => void; | ||||
deleteTask?: (cId: number, tId: number) => void; | |||||
}; | }; | ||||
@@ -13,6 +17,10 @@ type KBColumnProps = { | |||||
let bgc = "hotpink"; | let bgc = "hotpink"; | ||||
class KBColumn extends React.Component<KBColumnProps> { | class KBColumn extends React.Component<KBColumnProps> { | ||||
getTaskRender = () =>{ | getTaskRender = () =>{ | ||||
@@ -46,6 +54,10 @@ class KBColumn extends React.Component<KBColumnProps> { | |||||
<p> {task.description} </p> | <p> {task.description} </p> | ||||
</div> | </div> | ||||
<div className="actionBlock"> | |||||
<FaTimes style={{color: 'red', cursor: 'pointer'}} onClick={() => this.props.deleteTask && this.props.deleteTask(this.props.id, task.id)} /> | |||||
</div> | |||||
</div> | </div> | ||||
); | ); | ||||
}); | }); | ||||