Refactor 1
This commit is contained in:
parent
5c59506a6e
commit
e8e4d9abec
@ -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>
|
||||
);
|
||||
|
Loading…
Reference in New Issue
Block a user