Skip to content

Commit 1d56397

Browse files
danesparzadanesparza
committed
UI: Edit config
Edit configuration item functionality is now working!
1 parent 8f92907 commit 1d56397

File tree

4 files changed

+40371
-26
lines changed

4 files changed

+40371
-26
lines changed

‎js/bundle.js

Lines changed: 40226 additions & 15 deletions
Large diffs are not rendered by default.

‎js/components/AddItemModal.react.js

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -112,9 +112,6 @@ class AddItemModal extends Component {
112112
// Set the item and get all items:
113113
CentralConfigAPIUtils.setConfigItem(this.state.newItem).then(CentralConfigAPIUtils.getAllConfigItems);
114114

115-
// Reset state:
116-
this.state.newItem = {};
117-
118115
// Hide the dialog:
119116
this.props.hide();
120117
}

‎js/components/EditItemModal.react.js

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
import update from 'react-addons-update';
2+
import {Component} from 'react';
3+
import ReactDOM from 'react-dom';
4+
import Modal from 'react-bootstrap-modal'
5+
6+
// The API utils
7+
import CentralConfigAPIUtils from '../utils/CentralConfigAPIUtils';
8+
9+
class EditItemModal extends Component {
10+
11+
constructor(props){
12+
13+
super(props);
14+
15+
// Set initial state:
16+
this.state = {
17+
configItem: props.configItem
18+
};
19+
20+
// Bind our events:
21+
this._onApplicationChange = this._onApplicationChange.bind(this);
22+
this._onNameChange = this._onNameChange.bind(this);
23+
this._onValueChange = this._onValueChange.bind(this);
24+
this._onMachineChange = this._onMachineChange.bind(this);
25+
26+
this._handleKeyPress = this._handleKeyPress.bind(this);
27+
this._saveItem = this._saveItem.bind(this);
28+
}
29+
30+
render() {
31+
// Return the app HTML to render
32+
return (
33+
<Modal show={this.props.show} onHide={this.props.hide} aria-labelledby="ModalHeader">
34+
<Modal.Header closeButton>
35+
<Modal.Title id='ModalHeader'>Edit config item</Modal.Title>
36+
</Modal.Header>
37+
38+
<Modal.Body>
39+
<div className="form-group">
40+
<label htmlFor="txtNewAppName">Application</label>
41+
<input type="text" className="form-control" id="txtNewAppName" autoFocus value={this.state.configItem.application} onChange={this._onApplicationChange} onKeyPress={this._handleKeyPress} placeholder="Your application name"/>
42+
</div>
43+
<div className="form-group">
44+
<label htmlFor="txtNewName">Name</label>
45+
<input type="text" className="form-control" id="txtNewName" value={this.state.configItem.name} onChange={this._onNameChange} onKeyPress={this._handleKeyPress} placeholder="Config item name"/>
46+
</div>
47+
<div className="form-group">
48+
<label htmlFor="txtNewValue">Value</label>
49+
<input type="text" className="form-control" id="txtNewValue" value={this.state.configItem.value} onChange={this._onValueChange} onKeyPress={this._handleKeyPress} placeholder="Config value"/>
50+
</div>
51+
<div className="form-group">
52+
<label htmlFor="txtNewMachine">Machine</label>
53+
<input type="text" className="form-control" id="txtNewMachine" value={this.state.configItem.machine} onChange={this._onMachineChange} onKeyPress={this._handleKeyPress} placeholder="Optional machine name"/>
54+
</div>
55+
</Modal.Body>
56+
57+
<Modal.Footer>
58+
<Modal.Dismiss className='btn btn-default'>Cancel</Modal.Dismiss>
59+
<button className='btn btn-primary' type='button' onClick={this._saveItem}>
60+
Save
61+
</button>
62+
</Modal.Footer>
63+
</Modal>
64+
);
65+
}
66+
67+
_handleKeyPress(event){
68+
if(event.which == 13){
69+
this._saveItem(event);
70+
}
71+
}
72+
73+
_onApplicationChange(event){
74+
// Using new Immutability helpers from
75+
// https://facebook.github.io/react/docs/update.html
76+
var newState = update(this.state, {
77+
configItem: {application: {$set: event.target.value}}
78+
});
79+
this.setState(newState);
80+
}
81+
82+
_onNameChange(event){
83+
// Using new Immutability helpers from
84+
// https://facebook.github.io/react/docs/update.html
85+
var newState = update(this.state, {
86+
configItem: {name: {$set: event.target.value}}
87+
});
88+
this.setState(newState);
89+
}
90+
91+
_onValueChange(event){
92+
// Using new Immutability helpers from
93+
// https://facebook.github.io/react/docs/update.html
94+
var newState = update(this.state, {
95+
configItem: {value: {$set: event.target.value}}
96+
});
97+
this.setState(newState);
98+
}
99+
100+
_onMachineChange(event){
101+
// Using new Immutability helpers from
102+
// https://facebook.github.io/react/docs/update.html
103+
var newState = update(this.state, {
104+
configItem: {machine: {$set: event.target.value}}
105+
});
106+
this.setState(newState);
107+
}
108+
109+
_saveItem(event){
110+
// Validate inputs
111+
112+
// Set the item and get all items:
113+
CentralConfigAPIUtils.setConfigItem(this.state.configItem).then(CentralConfigAPIUtils.getAllConfigItems);
114+
115+
// Reset state:
116+
this.state.configItem = {};
117+
118+
// Hide the dialog:
119+
this.props.hide();
120+
}
121+
122+
}
123+
124+
export default EditItemModal

‎js/components/MainApp.react.js

Lines changed: 21 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import Modal from 'react-bootstrap-modal'
66

77
// Modals
88
import AddItemModal from './AddItemModal.react'
9+
import EditItemModal from './EditItemModal.react'
910

1011
// Grid component
1112
import FixedDataTable from 'fixed-data-table';
@@ -25,14 +26,16 @@ class MainApp extends Component {
2526

2627
// Set initial state:
2728
this.state = {
28-
configItems: []
29+
configItems: [],
30+
currentEditConfigItem: {}
2931
};
3032

3133
// Bind our events:
3234
this._onChange = this._onChange.bind(this);
33-
this.handleEdit = this.handleEdit.bind(this);
3435
this.showNewConfigItem = this.showNewConfigItem.bind(this);
3536
this.hideNewConfigItem = this.hideNewConfigItem.bind(this);
37+
this.showEditConfigItem = this.showEditConfigItem.bind(this);
38+
this.hideEditConfigItem = this.hideEditConfigItem.bind(this);
3639
}
3740

3841
componentDidMount() {
@@ -72,7 +75,7 @@ class MainApp extends Component {
7275
rowHeight={40}
7376
headerHeight={40}
7477
width={this.props.containerWidth}
75-
height={500}
78+
height={400}
7679
{...this.props}>
7780
<Column
7881
header={<Cell>Application</Cell>}
@@ -128,7 +131,7 @@ class MainApp extends Component {
128131
header={<Cell>Actions</Cell>}
129132
cell={props => (
130133
<Cell {...props}>
131-
<button onClick={()=>this.handleEdit(this.state.configItems[props.rowIndex])}>Edit</button>&nbsp;
134+
<button onClick={()=>this.showEditConfigItem(this.state.configItems[props.rowIndex])}>Edit</button>&nbsp;
132135
<button onClick={()=>this.handleRemove(this.state.configItems[props.rowIndex])}>Remove</button>
133136
</Cell>
134137
)}
@@ -137,7 +140,8 @@ class MainApp extends Component {
137140
</Table>
138141
</div>
139142

140-
<AddItemModal show={this.state.showNewItemDialog} hide={this.hideNewConfigItem} />
143+
{this.state.showNewItemDialog ? <AddItemModal show={this.state.showNewItemDialog} hide={this.hideNewConfigItem} /> : null}
144+
{this.state.showEditItemDialog ? <EditItemModal show={this.state.showEditItemDialog} hide={this.hideEditConfigItem} configItem={this.state.currentEditConfigItem} /> : null}
141145
</div>
142146
);
143147
}
@@ -160,9 +164,18 @@ class MainApp extends Component {
160164
});
161165
}
162166

163-
handleEdit(e) {
164-
console.log("Edit");
165-
console.log(e);
167+
showEditConfigItem(configItem) {
168+
// Set the current item to edit and show the modal:
169+
this.setState({
170+
showEditItemDialog: true,
171+
currentEditConfigItem: configItem
172+
});
173+
}
174+
175+
hideEditConfigItem(e) {
176+
this.setState({
177+
showEditItemDialog: false
178+
});
166179
}
167180

168181
// Remove the item:

0 commit comments

Comments
 (0)