Skip to content
This repository has been archived by the owner on Jan 28, 2020. It is now read-only.

Commit

Permalink
Moved save button to right of the term for edit term inside taxonomy …
Browse files Browse the repository at this point in the history 
…panel
  • Loading branch information
@amir-qayyum-khan
amir-qayyum-khan committed Sep 18, 2015
1 parent d968511 commit faa0fb4
Show file tree
Hide file tree
Showing 3 changed files with 146 additions and 81 deletions.
154 changes: 102 additions & 52 deletions ui/jstests/test_manage_taxonomies.jsx
View file
Expand Up @@ -229,21 +229,26 @@ define(['QUnit', 'jquery', 'manage_taxonomies', 'react',
assert.equal(label.innerHTML, term.label);
assert.equal(component.state.formatActionState, 'show');

var formatButton = React.addons.TestUtils.
var editButton = React.addons.TestUtils.
findRenderedDOMComponentWithClass(
component,
'format-button'
);
var cancelButton = React.addons.TestUtils.
findRenderedDOMComponentWithClass(
component,
'revert-button'
);

//open edit mode
React.addons.TestUtils.Simulate.click(formatButton);
React.addons.TestUtils.Simulate.click(editButton);
component.forceUpdate(function() {
assert.equal(component.state.formatActionState, 'edit');
var saveButton = React.addons.TestUtils.
findRenderedDOMComponentWithClass(
component,
'save-button'
);
var cancelButton = React.addons.TestUtils.
findRenderedDOMComponentWithClass(
component,
'editable-cancel'
);
//edit term
var editTermBox = React.addons.TestUtils.
findRenderedDOMComponentWithTag(
Expand All @@ -258,7 +263,7 @@ define(['QUnit', 'jquery', 'manage_taxonomies', 'react',
//save term

assert.equal(refreshCount, 0);
React.addons.TestUtils.Simulate.click(formatButton);
React.addons.TestUtils.Simulate.click(saveButton);
component.forceUpdate(function() {
//after saved term using api
waitForAjax(1, function() {
Expand All @@ -270,8 +275,18 @@ define(['QUnit', 'jquery', 'manage_taxonomies', 'react',
assert.equal(refreshCount, 1);

// Edit term again
React.addons.TestUtils.Simulate.click(formatButton);
React.addons.TestUtils.Simulate.click(editButton);
component.forceUpdate(function() {
saveButton = React.addons.TestUtils.
findRenderedDOMComponentWithClass(
component,
'save-button'
);
cancelButton = React.addons.TestUtils.
findRenderedDOMComponentWithClass(
component,
'editable-cancel'
);
assert.equal(component.state.formatActionState, 'edit');
editTermBox = React.addons.TestUtils.
findRenderedDOMComponentWithTag(
Expand All @@ -297,8 +312,18 @@ define(['QUnit', 'jquery', 'manage_taxonomies', 'react',
assert.equal(editTermBoxes.length, 0);

// Edit again term with same label
React.addons.TestUtils.Simulate.click(formatButton);
React.addons.TestUtils.Simulate.click(editButton);
component.forceUpdate(function() {
saveButton = React.addons.TestUtils.
findRenderedDOMComponentWithClass(
component,
'save-button'
);
cancelButton = React.addons.TestUtils.
findRenderedDOMComponentWithClass(
component,
'editable-cancel'
);
assert.equal(component.state.formatActionState, 'edit');
editTermBox = React.addons.TestUtils.
findRenderedDOMComponentWithTag(
Expand All @@ -311,7 +336,7 @@ define(['QUnit', 'jquery', 'manage_taxonomies', 'react',

component.forceUpdate(function() {
// save term with label equals to previous label
React.addons.TestUtils.Simulate.click(formatButton);
React.addons.TestUtils.Simulate.click(saveButton);

component.forceUpdate(function() {
//assert editbox is hide (UI reset)
Expand Down Expand Up @@ -385,65 +410,83 @@ define(['QUnit', 'jquery', 'manage_taxonomies', 'react',
var label = termLabel.getDOMNode();
assert.equal(label.innerHTML, term.label);
assert.equal(component.state.formatActionState, 'show');
var formatButton = React.addons.TestUtils.
var editButton = React.addons.TestUtils.
findRenderedDOMComponentWithClass(
component,
'format-button'
);
var cancelButton = React.addons.TestUtils.
findRenderedDOMComponentWithClass(
component,
'revert-button'
);
React.addons.TestUtils.Simulate.click(formatButton);
React.addons.TestUtils.Simulate.click(editButton);
component.forceUpdate(function() {
var saveButton = React.addons.TestUtils.
findRenderedDOMComponentWithClass(
component,
'save-button'
);
var cancelButton = React.addons.TestUtils.
findRenderedDOMComponentWithClass(
component,
'editable-cancel'
);
assert.equal(component.state.formatActionState, 'edit');
var editTermBox = React.addons.TestUtils.
findRenderedDOMComponentWithTag(
component,
'input'
);
React.addons.TestUtils.Simulate.change(
editTermBox, {target: {value: "TestB"}}
editTermBox, {target: {value: ""}}
);
assert.equal(component.state.showError, false);
component.forceUpdate(function() {
assert.equal(component.state.label, "TestB");
assert.equal(component.state.label, "");

assert.equal(refreshCount, 0);
React.addons.TestUtils.Simulate.click(formatButton);
component.forceUpdate(function() {
waitForAjax(1, function() {
React.addons.TestUtils.Simulate.click(saveButton);
component.forceUpdate(function () {
assert.equal(component.state.showError, true);
React.addons.TestUtils.Simulate.change(
editTermBox, {target: {value: "TestB"}}
);
component.forceUpdate(function() {
assert.equal(component.state.label, "TestB");
assert.equal(
component.state.errorMessage, 'Unable to update term'
);
assert.equal(component.state.formatActionState, 'edit');
assert.equal(parentUpdateCount, 0);
// listing page was not asked to refresh

assert.equal(refreshCount, 0);
React.addons.TestUtils.Simulate.click(saveButton);
component.forceUpdate(function() {
waitForAjax(1, function() {
assert.equal(component.state.label, "TestB");
assert.equal(
component.state.errorMessage, 'Unable to update term'
);
assert.equal(component.state.formatActionState, 'edit');
assert.equal(parentUpdateCount, 0);
// listing page was not asked to refresh
assert.equal(refreshCount, 0);

editTermBox = React.addons.TestUtils.
findRenderedDOMComponentWithTag(
component,
'input'
);
React.addons.TestUtils.Simulate.change(
editTermBox, {target: {value: "TestB"}}
);
//after unable to save you can reset edit mode
component.forceUpdate(function () {
React.addons.TestUtils.Simulate.click(cancelButton);
component.forceUpdate(function () {
assert.equal(component.state.label, "test");
assert.equal(component.state.formatActionState, 'show');
//assert editbox is hide (UI reset)
var editTermBoxes = React.addons.TestUtils.
scryRenderedDOMComponentsWithTag(
editTermBox = React.addons.TestUtils.
findRenderedDOMComponentWithTag(
component,
'input'
);
assert.equal(editTermBoxes.length, 0);
done();
React.addons.TestUtils.Simulate.change(
editTermBox, {target: {value: "TestB"}}
);
//after unable to save you can reset edit mode
component.forceUpdate(function () {
React.addons.TestUtils.Simulate.click(cancelButton);
component.forceUpdate(function () {
assert.equal(component.state.label, "test");
assert.equal(component.state.formatActionState, 'show');
//assert editbox is hide (UI reset)
var editTermBoxes = React.addons.TestUtils.
scryRenderedDOMComponentsWithTag(
component,
'input'
);
assert.equal(editTermBoxes.length, 0);
done();
});
});
});
});
});
Expand Down Expand Up @@ -1477,15 +1520,22 @@ define(['QUnit', 'jquery', 'manage_taxonomies', 'react',
responseText: term,
type: "PATCH"
});
var formatButtons = React.addons.TestUtils.
var editButtons = React.addons.TestUtils.
scryRenderedDOMComponentsWithClass(
component,
'format-button'
);
var formatButton = formatButtons[0];
var editButton = editButtons[0];
//open edit mode
React.addons.TestUtils.Simulate.click(formatButton);
React.addons.TestUtils.Simulate.click(editButton);
component.forceUpdate(function() {
var saveButtons = React.addons.TestUtils.
scryRenderedDOMComponentsWithClass(
component,
'save-button'
);
var saveButton = saveButtons[0];

var editTermBoxes = React.addons.TestUtils.
scryRenderedDOMComponentsWithClass(
component,
Expand All @@ -1499,7 +1549,7 @@ define(['QUnit', 'jquery', 'manage_taxonomies', 'react',
component.forceUpdate(function() {
//save term
assert.equal($(React.findDOMNode(editTermBox)).val(), "TestB");
React.addons.TestUtils.Simulate.click(formatButton);
React.addons.TestUtils.Simulate.click(saveButton);
component.forceUpdate(function() {
//after saved term using api
waitForAjax(1, function () {
Expand Down
11 changes: 11 additions & 0 deletions ui/static/ui/css/mit-lore.css
View file
Expand Up @@ -591,3 +591,14 @@ input.repo-page-status {
-ms-user-select: none;
user-select: none;
}

a.disabled {
padding: 0px;
pointer-events: none;
cursor: none;
filter: alpha(opacity=65);
-webkit-box-shadow: none;
box-shadow: none;
opacity: .65;
}

62 changes: 33 additions & 29 deletions ui/static/ui/js/manage_taxonomies.jsx
View file
Expand Up @@ -12,36 +12,45 @@ define('manage_taxonomies', ['react', 'lodash', 'jquery', 'utils', 'bootstrap'],
formatActionState: 'show',
label: this.props.term.label,
errorMessage: '',
showError: false
};
},
render: function () {

var label = null;
var formatActionClassName = null;
var editButtonClass = 'format-button';
var deleteButtonClass = 'revert-button';
if (this.state.formatActionState === 'edit') {
label = <label className="help-inline control-label"> <input
ref="editText"
type="text"
valueLink={this.linkState('label')}
className='form-control edit-term-box' /> {this.state.errorMessage}
ref="editText" type="text" valueLink={this.linkState('label')}
className='form-control edit-term-box' /> <button
onClick={this.saveTerm} type="button"
className="save-button btn btn-primary btn-sm editable-submit"><i
className="glyphicon glyphicon-ok"></i></button> <button type="button"
className="btn btn-default btn-sm editable-cancel"
onClick={this.cancelAction}><i
className="glyphicon glyphicon-remove"></i>
</button> {this.state.errorMessage}
</label>;
formatActionClassName = "fa fa-save no-select";
formatActionClassName = "fa fa-pencil no-select";
editButtonClass = 'format-button disabled';
deleteButtonClass = 'revert-button disabled';
} else if (this.state.formatActionState === 'show') {
label = <label className="term-title"
htmlFor="minimal-checkbox-1-11">{this.state.label}</label>;
formatActionClassName = "fa fa-pencil no-select";
}

var listClassName = "form-group";
if (this.state.errorMessage !== '') {
if (this.state.showError) {
listClassName = "form-group has-error";
}

return <li className={listClassName}>
<span className="utility-features">
<a onClick={this.formatHandler} className="format-button">
<a onClick={this.editTerm} className={editButtonClass}>
<i className={formatActionClassName}></i>
</a> <a onClick={this.revertHandler} className="revert-button">
</a> <a className={deleteButtonClass}>
<i className="fa fa-remove"></i>
</a>
</span>{label}</li>;
Expand All @@ -50,28 +59,25 @@ define('manage_taxonomies', ['react', 'lodash', 'jquery', 'utils', 'bootstrap'],
* If user selects edit button then open edit mode
* Else call api to update term.
*/
formatHandler: function() {
var formatActionState = this.state.formatActionState;

if (formatActionState === 'show') {
this.setState({
formatActionState: 'edit',
editTerm: function() {
this.setState({
formatActionState: 'edit'
}, function() {
var $editText = $(React.findDOMNode(this.refs.editText));
$editText.focus();
});
} else if (formatActionState === 'edit') {
if (this.state.label !== this.props.term.label) {
this.updateTermSubmit();
} else {
this.resetUtilityFeatures();
}
var $editText = $(React.findDOMNode(this.refs.editText));
$editText.focus();
});
},
saveTerm: function() {
if (this.state.label !== this.props.term.label) {
this.updateTermSubmit();
} else {
this.resetUtilityFeatures();
}
},
/**
* On Close button select reset term UI
*/
revertHandler : function() {
cancelAction : function() {
var formatActionState = this.state.formatActionState;
if (formatActionState === 'edit') {
// user is in edit mode. Cancel edit if user presses cross icon.
Expand All @@ -89,10 +95,7 @@ define('manage_taxonomies', ['react', 'lodash', 'jquery', 'utils', 'bootstrap'],
*/
updateTermSubmit: function() {
if (_.isEmpty(this.state.label)) {
this.setState({
errorMessage: "Can't save empty term. If you want to revert then" +
" please click the cancel button (x)"
});
this.setState({showError: true});
return;
}
var API_ROOT_VOCAB_URL = '/api/v1/repositories/' + this.props.repoSlug +
Expand All @@ -110,6 +113,7 @@ define('manage_taxonomies', ['react', 'lodash', 'jquery', 'utils', 'bootstrap'],
contentType: "application/json"
}).fail(function() {
thiz.setState({
showError: true,
errorMessage: 'Unable to update term'
});
}).done(function(term) {
Expand Down

0 comments on commit faa0fb4

Please sign in to comment.