@@ -3,9 +3,6 @@ | |||
"version": "0.1.0", | |||
"private": true, | |||
"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/react": "^11.2.6", | |||
"@testing-library/user-event": "^12.8.3", | |||
@@ -13,7 +10,6 @@ | |||
"@types/node": "^12.20.10", | |||
"@types/react": "^17.0.3", | |||
"@types/react-dom": "^17.0.3", | |||
"font-awesome": "^4.7.0", | |||
"react": "^17.0.2", | |||
"react-dom": "^17.0.2", | |||
"react-icons": "^4.2.0", | |||
@@ -1,5 +1,7 @@ | |||
html { | |||
background-color: #383c4a; | |||
overflow: hidden; | |||
} | |||
.header { | |||
@@ -26,67 +28,85 @@ html { | |||
text-align: center; | |||
flex-direction: column; | |||
justify-content: flex-start; | |||
float: left; | |||
width: initial; | |||
position: relative; | |||
height: auto; | |||
flex-grow: inherit; | |||
max-width: 22vw; | |||
min-width: 22vw; | |||
min-height: 25vh; | |||
border-color: #ddd; | |||
border-width: 2px; | |||
min-width: 300px; | |||
min-height: 200px; | |||
max-width: 25%; | |||
border-style: solid; | |||
color: "orange"; | |||
color: #eee; | |||
margin: 5px; | |||
padding: 5px; | |||
flex-wrap: nowrap; | |||
overflow-y: auto; | |||
overflow-x: hidden; | |||
padding-left: 1px; | |||
margin-left: 1px; | |||
margin-right: 1px; | |||
padding-right: 1px; | |||
max-height: 88vh; | |||
} | |||
.taskWrapper { | |||
display: flex; | |||
min-height: 100px; | |||
flex-direction: row; | |||
align-items: stretch; | |||
position: relative; | |||
border-color: #ccc; | |||
border-width: 2px; | |||
border-style: solid; | |||
margin: 2px; | |||
} | |||
.prioBlock { | |||
order: 1; | |||
flex: 1; | |||
flex: 3; | |||
display: flex; | |||
overflow: hidden; | |||
} | |||
.taskText { | |||
order: 5; | |||
flex: 5; | |||
flex: 20; | |||
height: 100%; | |||
overflow: auto; | |||
} | |||
.actionBlock{ | |||
.actionBlock { | |||
order: 10; | |||
flex: 1; | |||
display: flex; | |||
background-color: purple; | |||
justify-content: flex-end; | |||
background-color: #ddd; | |||
justify-content: flex-start; | |||
flex-direction: column; | |||
align-items: flex-end; | |||
} | |||
.App { | |||
display: flex; | |||
align-items: stretch; | |||
order: 1; | |||
flex: 1; | |||
flex-direction: column; | |||
min-height: 100vh; | |||
overflow: hidden; | |||
} | |||
.footer { | |||
display: flex; | |||
order: 400; | |||
color: #eee; | |||
} | |||
.panel { | |||
display: flex; | |||
flex: 1; | |||
order: 1; | |||
justify-content: flex-start; | |||
flex-direction: row; | |||
flex-wrap: nowrap; | |||
width: 100%; | |||
overflow-x:auto; | |||
overflow-x: auto; | |||
overflow-y: hidden; | |||
height: 100%; | |||
align-items: stretch; | |||
background-color: lavender; | |||
background-color: #404552; | |||
} | |||
.modal { | |||
position: fixed; | |||
z-index: 20; | |||
@@ -140,4 +160,3 @@ html { | |||
.display-none { | |||
display: none; | |||
} | |||
@@ -120,7 +120,7 @@ class App extends React.Component<{}, State> { | |||
columns[fromColumnIndex + 1] = toColumn; | |||
this.setState({ columns: columns }); | |||
}; | |||
/* Regresses the task to the column immediately to the left | |||
/* 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 | |||
@@ -218,6 +218,10 @@ class App extends React.Component<{}, State> { | |||
/> | |||
))} | |||
</div> | |||
<div className="footer"> | |||
Not to be taken seriously. Done as a practice React + TS + MobX | |||
project | |||
</div> | |||
</div> | |||
); | |||
} | |||
@@ -66,9 +66,7 @@ class Header extends React.Component<HeaderProps, State> { | |||
if (target === "titleInput") { | |||
this.setState({ taskTitle: event.target.value }); | |||
} | |||
if (target === "descInput") { | |||
this.setState({ taskDesc: event.target.value }); | |||
} | |||
if (target === "columnTitle") { | |||
this.setState({ columnTitle: event.target.value }); | |||
} | |||
@@ -76,6 +74,9 @@ class Header extends React.Component<HeaderProps, State> { | |||
this.setState({ columnColor: event.target.value }); | |||
} | |||
}; | |||
handleTextAreaChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => { | |||
this.setState({ taskDesc: event?.target.value }); | |||
}; | |||
handleSelectChange = (event: React.ChangeEvent<HTMLSelectElement>) => { | |||
if (event.target.id === "prioritySelect") { | |||
@@ -93,6 +94,7 @@ class Header extends React.Component<HeaderProps, State> { | |||
return ( | |||
<div className="header" style={{ height: 60 }}> | |||
<h1 | |||
key="Title" | |||
style={{ | |||
float: "left", | |||
margin: 0, | |||
@@ -102,16 +104,23 @@ class Header extends React.Component<HeaderProps, State> { | |||
> | |||
Kango Bango | |||
</h1> | |||
<Modal show={this.state.showTask} handleClose={this.hideModal}> | |||
<h3> Add Task</h3> | |||
<p>{this.props.columns[0] && this.props.columns[0].id}</p> | |||
<Modal | |||
show={this.state.showTask} | |||
handleClose={this.hideModal} | |||
key="addTask" | |||
> | |||
<h3> Add Task 🤔</h3> | |||
<select | |||
value={this.state.taskColumnNumber} | |||
onChange={this.handleSelectChange} | |||
id="columnSelect" | |||
title="columnSelect" | |||
> | |||
{this.props.columns.map((column) => ( | |||
<option value={column.id}>{column.name}</option> | |||
<option value={column.id} key={column.id}> | |||
{column.name} | |||
</option> | |||
))} | |||
; | |||
</select> | |||
@@ -129,11 +138,10 @@ class Header extends React.Component<HeaderProps, State> { | |||
<label> | |||
{" "} | |||
Description: | |||
<input | |||
type="textarea" | |||
<textarea | |||
id="descInput" | |||
value={this.state.taskDesc} | |||
onChange={this.handleInputChange} | |||
onChange={this.handleTextAreaChange} | |||
/> | |||
</label> | |||
@@ -145,6 +153,7 @@ class Header extends React.Component<HeaderProps, State> { | |||
value={this.state.taskPrio} | |||
onChange={this.handleSelectChange} | |||
id="prioritySelect" | |||
title="prioSelect" | |||
> | |||
<option value="normal">Normal</option> | |||
<option value="important">Important</option> | |||
@@ -172,8 +181,11 @@ class Header extends React.Component<HeaderProps, State> { | |||
Close | |||
</button> | |||
</Modal> | |||
<Modal show={this.state.showColumn} handleClose={this.hideModal}> | |||
<Modal | |||
show={this.state.showColumn} | |||
handleClose={this.hideModal} | |||
key="addColumn" | |||
> | |||
<h3>Lets add a column! 🤔</h3> | |||
<label> | |||
@@ -219,8 +231,14 @@ class Header extends React.Component<HeaderProps, State> { | |||
Close | |||
</button> | |||
</Modal> | |||
<button onClick={this.showTaskModal}> Add task </button> | |||
<button onClick={this.showColumnModal}> Add column </button> | |||
<button onClick={this.showTaskModal} key="Task Button"> | |||
{" "} | |||
Add task{" "} | |||
</button> | |||
<button onClick={this.showColumnModal} key="Column Button"> | |||
{" "} | |||
Add column{" "} | |||
</button> | |||
</div> | |||
); | |||
} | |||
@@ -39,15 +39,7 @@ class KBColumn extends React.Component<KBColumnProps> { | |||
} | |||
return ( | |||
<div | |||
style={{ | |||
borderColor: "#ccc", | |||
borderWidth: "1px", | |||
borderStyle: "solid", | |||
margin: "10px", | |||
}} | |||
className="taskWrapper" | |||
> | |||
<div key={task.id} className="taskWrapper"> | |||
<div | |||
style={{ backgroundColor: bgc, display: "inline" }} | |||
className="prioBlock" | |||
@@ -67,14 +59,14 @@ class KBColumn extends React.Component<KBColumnProps> { | |||
} | |||
/> | |||
<FaLongArrowAltRight | |||
style={{ color: "red", cursor: "pointer" }} | |||
style={{ color: "red", cursor: "pointer", marginTop: "10px" }} | |||
onClick={() => | |||
this.props.progressTask && | |||
this.props.progressTask(this.props.id, task.id) | |||
} | |||
/> | |||
<FaLongArrowAltLeft | |||
style={{ color: "red", cursor: "pointer" }} | |||
style={{ color: "red", cursor: "pointer", marginTop: "10px" }} | |||
onClick={() => | |||
this.props.regressTask && | |||
this.props.regressTask(this.props.id, task.id) | |||
@@ -88,7 +80,11 @@ class KBColumn extends React.Component<KBColumnProps> { | |||
render() { | |||
return ( | |||
<div className="KBColumn" style={{ backgroundColor: this.props.color }}> | |||
<div | |||
className="KBColumn" | |||
style={{ backgroundColor: this.props.color }} | |||
key={this.props.id} | |||
> | |||
<h3>{this.props.title} </h3> | |||
{this.getTaskRender()} | |||
<button | |||
@@ -96,7 +92,7 @@ class KBColumn extends React.Component<KBColumnProps> { | |||
this.props.onDelete && this.props.onDelete(this.props.id); | |||
}} | |||
> | |||
Delete | |||
Delete Column | |||
</button> | |||
</div> | |||
); | |||