Skip to content

Commit

Permalink
[#1746] Added location checks and final modal
Browse files Browse the repository at this point in the history
  • Loading branch information
@KasperBrandt
KasperBrandt committed Oct 6, 2015
2 parents b92217f + 89f1d03 commit 36caa88
Show file tree
Hide file tree
Showing 5 changed files with 102 additions and 71 deletions.
62 changes: 30 additions & 32 deletions akvo/rsr/static/scripts-src/myrsr-admin.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -866,15 +866,29 @@ function buildReactComponents(typeaheadOptions, typeaheadCallback, displayOption
}
return short + ' (' + long + ')';
}

inputClass = selector + " form-control " + childClass;

selectorClass = document.querySelector('.' + selector);

TypeaheadContainer = React.createClass({displayName: 'TypeaheadContainer',

getInitialState: function() {
return ({focusClass: 'inactive'});
},
onKeyUp: function() {

/* Only activate the "add org" button for typeaheads that i) are for organisations,
** and ii) are not for reporting organisations. */
if (inputType === 'org' && selector.indexOf('reportingOrganisation') === -1) {
this.setState({focusClass: 'active'});
}
},
onBlur: function() {
this.setState({focusClass: 'inactive'});
},
render: function() {
return (
React.DOM.div(null,
React.DOM.div( {className:this.state.focusClass},
Typeahead(
{placeholder:"",
options:typeaheadOptions,
Expand All @@ -883,6 +897,8 @@ function buildReactComponents(typeaheadOptions, typeaheadCallback, displayOption
displayOption:displayOption,
filterOption:filterOption,
childID:selector,
onKeyUp:this.onKeyUp,
onBlur:this.onBlur,
customClasses:{
typeahead: "",
input: inputClass,
Expand All @@ -894,7 +910,8 @@ function buildReactComponents(typeaheadOptions, typeaheadCallback, displayOption
inputProps:{
name: selector,
id: selector
}} )
}} ),
React.DOM.div( {className:"addOrg", onMouseDown:addOrgModal}, "+ ", defaultValues.add_new_organisation)
)
);
}
Expand Down Expand Up @@ -2110,23 +2127,6 @@ function setUnsavedChangesMessage() {
};
}

/* Set each "add organisation" link to open the "add organisation"
** modal dialog on click */

function setModalOnClicks() {
var links = document.querySelectorAll('.add-organisation');

for (var i = 0; i < links.length; i++) {
var el = links[i];

el.removeEventListener('click');
el.addEventListener('click', function(e) {
e.preventDefault();
addOrgModal();
});
}
}

/* Show the "add organisation" modal dialog */
function addOrgModal() {

Expand Down Expand Up @@ -2217,9 +2217,8 @@ function addOrgModal() {

request.onerror = function() {
// There was a connection error of some sort
// TODO: Add better message on top of the modal
document.querySelector('#addOrgGeneralError').textContent = defaultValues.general_error;
document.querySelector('.orgModal').scrollTop = 0;
elAddClass(form, 'has-error');
return false;
};

Expand Down Expand Up @@ -2270,24 +2269,24 @@ function addOrgModal() {
longitudeNode = document.querySelector('#longitude');
countryNode = document.querySelector('#country');

if (latitudeNode.value == '' && longitudeNode.value == '' && countryNode.value == '') {
if (latitudeNode.value === '' && longitudeNode.value === '' && countryNode.value === '') {
result = true;
} else if (latitudeNode.value == '' || longitudeNode.value == '' || countryNode.value == '') {
if (latitudeNode.value == '') {
} else if (latitudeNode.value === '' || longitudeNode.value === '' || countryNode.value === '') {
if (latitudeNode.value === '') {
var latitudeHelp = document.querySelector('#latitude + label + .help-block');
latitudeHelp.textContent = defaultValues.blank_name;
latitudeHelp.textContent = defaultValues.location_check;
elAddClass(latitudeHelp, 'help-block-error');
elAddClass(latitudeHelp.parentNode, 'has-error');
}
if (longitudeNode.value == '') {
if (longitudeNode.value === '') {
var longitudeHelp = document.querySelector('#longitude + label + .help-block');
longitudeHelp.textContent = defaultValues.blank_name;
longitudeHelp.textContent = defaultValues.location_check;
elAddClass(longitudeHelp, 'help-block-error');
elAddClass(longitudeHelp.parentNode, 'has-error');
}
if (countryNode.value == '') {
if (countryNode.value === '') {
var countryHelp = document.querySelector('#country + label + .help-block');
countryHelp.textContent = defaultValues.blank_name;
countryHelp.textContent = defaultValues.location_check;
elAddClass(countryHelp, 'help-block-error');
elAddClass(countryHelp.parentNode, 'has-error');
}
Expand Down Expand Up @@ -2316,7 +2315,7 @@ function addOrgModal() {
React.DOM.h4(null, defaultValues.add_new_organisation),
React.DOM.form( {id:"addOrganisation"},
React.DOM.div( {className:"row"},
React.DOM.div( {id:"addOrgGeneralError", className:"col-md-12"})
React.DOM.div( {id:"addOrgGeneralError", className:"col-md-12 help-block-error"})
),
React.DOM.div( {className:"row"},
React.DOM.div( {className:"inputContainer newOrgName col-md-4"},
Expand Down Expand Up @@ -2500,5 +2499,4 @@ document.addEventListener('DOMContentLoaded', function() {
setAllSectionsCompletionPercentage();
setAllSectionsChangeListerner();
setPageCompletionPercentage();
setModalOnClicks();
});
60 changes: 29 additions & 31 deletions akvo/rsr/static/scripts-src/myrsr-admin.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -866,15 +866,29 @@ function buildReactComponents(typeaheadOptions, typeaheadCallback, displayOption
}
return short + ' (' + long + ')';
}

inputClass = selector + " form-control " + childClass;

selectorClass = document.querySelector('.' + selector);

TypeaheadContainer = React.createClass({

getInitialState: function() {
return ({focusClass: 'inactive'});
},
onKeyUp: function() {

/* Only activate the "add org" button for typeaheads that i) are for organisations,
** and ii) are not for reporting organisations. */
if (inputType === 'org' && selector.indexOf('reportingOrganisation') === -1) {
this.setState({focusClass: 'active'});
}
},
onBlur: function() {
this.setState({focusClass: 'inactive'});
},
render: function() {
return (
<div>
<div className={this.state.focusClass}>
<Typeahead
placeholder=''
options={typeaheadOptions}
Expand All @@ -883,6 +897,8 @@ function buildReactComponents(typeaheadOptions, typeaheadCallback, displayOption
displayOption={displayOption}
filterOption={filterOption}
childID={selector}
onKeyUp={this.onKeyUp}
onBlur={this.onBlur}
customClasses={{
typeahead: "",
input: inputClass,
Expand All @@ -895,6 +911,7 @@ function buildReactComponents(typeaheadOptions, typeaheadCallback, displayOption
name: selector,
id: selector
}} />
<div className="addOrg" onMouseDown={addOrgModal}>+ {defaultValues.add_new_organisation}</div>
</div>
);
}
Expand Down Expand Up @@ -2110,23 +2127,6 @@ function setUnsavedChangesMessage() {
};
}

/* Set each "add organisation" link to open the "add organisation"
** modal dialog on click */

function setModalOnClicks() {
var links = document.querySelectorAll('.add-organisation');

for (var i = 0; i < links.length; i++) {
var el = links[i];

el.removeEventListener('click');
el.addEventListener('click', function(e) {
e.preventDefault();
addOrgModal();
});
}
}

/* Show the "add organisation" modal dialog */
function addOrgModal() {

Expand Down Expand Up @@ -2217,9 +2217,8 @@ function addOrgModal() {

request.onerror = function() {
// There was a connection error of some sort
// TODO: Add better message on top of the modal
document.querySelector('#addOrgGeneralError').textContent = defaultValues.general_error;
document.querySelector('.orgModal').scrollTop = 0;
elAddClass(form, 'has-error');
return false;
};

Expand Down Expand Up @@ -2270,24 +2269,24 @@ function addOrgModal() {
longitudeNode = document.querySelector('#longitude');
countryNode = document.querySelector('#country');

if (latitudeNode.value == '' && longitudeNode.value == '' && countryNode.value == '') {
if (latitudeNode.value === '' && longitudeNode.value === '' && countryNode.value === '') {
result = true;
} else if (latitudeNode.value == '' || longitudeNode.value == '' || countryNode.value == '') {
if (latitudeNode.value == '') {
} else if (latitudeNode.value === '' || longitudeNode.value === '' || countryNode.value === '') {
if (latitudeNode.value === '') {
var latitudeHelp = document.querySelector('#latitude + label + .help-block');
latitudeHelp.textContent = defaultValues.blank_name;
latitudeHelp.textContent = defaultValues.location_check;
elAddClass(latitudeHelp, 'help-block-error');
elAddClass(latitudeHelp.parentNode, 'has-error');
}
if (longitudeNode.value == '') {
if (longitudeNode.value === '') {
var longitudeHelp = document.querySelector('#longitude + label + .help-block');
longitudeHelp.textContent = defaultValues.blank_name;
longitudeHelp.textContent = defaultValues.location_check;
elAddClass(longitudeHelp, 'help-block-error');
elAddClass(longitudeHelp.parentNode, 'has-error');
}
if (countryNode.value == '') {
if (countryNode.value === '') {
var countryHelp = document.querySelector('#country + label + .help-block');
countryHelp.textContent = defaultValues.blank_name;
countryHelp.textContent = defaultValues.location_check;
elAddClass(countryHelp, 'help-block-error');
elAddClass(countryHelp.parentNode, 'has-error');
}
Expand Down Expand Up @@ -2316,7 +2315,7 @@ function addOrgModal() {
<h4>{defaultValues.add_new_organisation}</h4>
<form id="addOrganisation">
<div className="row">
<div id="addOrgGeneralError" className="col-md-12"></div>
<div id="addOrgGeneralError" className="col-md-12 help-block-error"></div>
</div>
<div className="row">
<div className="inputContainer newOrgName col-md-4">
Expand Down Expand Up @@ -2500,5 +2499,4 @@ document.addEventListener('DOMContentLoaded', function() {
setAllSectionsCompletionPercentage();
setAllSectionsChangeListerner();
setPageCompletionPercentage();
setModalOnClicks();
});
18 changes: 16 additions & 2 deletions akvo/rsr/static/styles-src/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1962,8 +1962,22 @@ body.translationBarActive div.skiptranslate ~ article, body.translationBarActive
margin-left: -1.25em; } } }

/* Modal dialog stuff for the Project Editor */
.btn.add-organisation {
margin-top: 10px; }
div.inactive .addOrg {
display: none; }

div.active .addOrg {
display: block;
padding: 0.5em;
background-color: white;
border: 1px solid #c8c8c8;
border-radius: 0 0 4px 4px;
margin-top: -3px;
cursor: pointer;
color: #5cb85c; }
div.active .addOrg:hover {
font-weight: bold; }
div.active .addOrg:active {
opacity: 0.8; }

.modalBackground {
position: fixed;
Expand Down
26 changes: 24 additions & 2 deletions akvo/rsr/static/styles-src/main.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2534,8 +2534,30 @@ body {

/* Modal dialog stuff for the Project Editor */

.btn.add-organisation {
margin-top: 10px;
div.inactive {
.addOrg {
display: none;
}
}

div.active {
.addOrg {
display: block;
padding: 0.5em;
background-color: white;
border: 1px solid rgb(200,200,200);
border-radius: 0 0 4px 4px;
margin-top: -3px;
cursor: pointer;
color: rgba($progressSuccess, 1);

&:hover {
font-weight: bold;
}
&:active {
opacity: 0.8;
}
}
}

.modalBackground {
Expand Down
7 changes: 3 additions & 4 deletions akvo/templates/myrsr/project_editor.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -486,9 +486,6 @@ <h5>{% trans 'Reporting organisation' %}</h5>
</div>
<h5>{% trans 'Participating organisations' %}<span class="glyphicon glyphicon-info-sign info-icon activated" onclick="toggleId(event, this, 'partners-helptext');"></span></h5>
<p class="help-block" id="partners-helptext">{% trans 'Select an organisation that is playing a role in the project. If an organisation is not currently featured in RSR, please use the "Add a new organisation" button to add a new organisation to the database.' %}</p>
<button class="add-organisation btn btn-success">
<span class="glyphicon glyphicon-plus"></span> {% trans 'Add a new organisation' %}
</button>
<div class="partner-container" id="partner-container">
{% for partnership in project.partnerships.all %}
{% include "myrsr/project_editor_partials/partner_input.html" with key=partnership.pk %}
Expand Down Expand Up @@ -1259,7 +1256,9 @@ <h5>{% trans 'Keywords' %}</h5>
"country": "{% trans 'Country' %}",
"use_link": "{% trans 'Use the link to' %}",
"coordinates": "{% trans 'to obtain the coordinates for your locations to ensure the pins are correctly placed.' %}",
"org_logo": "{% trans 'Organisation logo' %}"
"org_logo": "{% trans 'Organisation logo' %}",
"location_check": "{% trans 'All location fields have to be filled in' %}",
"general_error": "{% trans 'Something went wrong while adding the organisation' %}"
}
</script>

Expand Down

0 comments on commit 36caa88

Please sign in to comment.