[#1746] Move "add org" button to typeahead

akvo · Oct 6, 2015 · 1b12e58 · 1b12e58
1 parent c19b901
commit 1b12e58
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 46 deletions.
diff --git a/akvo/rsr/static/scripts-src/myrsr-admin.js b/akvo/rsr/static/scripts-src/myrsr-admin.js
@@ -872,9 +872,21 @@ function buildReactComponents(typeaheadOptions, typeaheadCallback, displayOption
     selectorClass = document.querySelector('.' + selector);
 
     TypeaheadContainer = React.createClass({displayName: 'TypeaheadContainer',
+
+        getInitialState: function() {
+            return ({focusClass: 'inactive'});
+        },
+        onKeyUp: function() {
+            if (inputType === 'org') {
+                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,
@@ -883,6 +895,8 @@ function buildReactComponents(typeaheadOptions, typeaheadCallback, displayOption
                             displayOption:displayOption,
                             filterOption:filterOption,
                             childID:selector,
+                            onKeyUp:this.onKeyUp,
+                            onBlur:this.onBlur,
                             customClasses:{
                               typeahead: "",
                               input: inputClass,
@@ -894,7 +908,8 @@ function buildReactComponents(typeaheadOptions, typeaheadCallback, displayOption
                             inputProps:{
                                 name: selector,
                                 id: selector
-                            }} )
+                            }} ),
+                        React.DOM.div( {className:"addOrg", onMouseDown:addOrgModal}, "+Add organisation")
                     )
             );
         }
@@ -2110,23 +2125,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() {
 
@@ -2164,6 +2162,7 @@ function addOrgModal() {
                     organisation_id = response.id;
 
                     // Add location (fails silently)
+                    // TODO: Check if location has all fields
                     var request_loc;
                     api_url = '/rest/v1/organisation_location/?format=json';
                     request_loc = new XMLHttpRequest();
@@ -2194,6 +2193,8 @@ function addOrgModal() {
                     var response;
                     response = JSON.parse(request.responseText);
 
+                    // TODO: Scroll to top of modal
+
                     for (var key in response) {
                         if (response.hasOwnProperty(key)) {
                             var input = form.querySelector('#' + key);
@@ -2213,6 +2214,7 @@ function addOrgModal() {
 
             request.onerror = function() {
                 // There was a connection error of some sort
+                // TODO: Add better message on top of the modal
                 elAddClass(form, 'has-error');
                 return false;
             };
@@ -2457,5 +2459,4 @@ document.addEventListener('DOMContentLoaded', function() {
     setAllSectionsCompletionPercentage();
     setAllSectionsChangeListerner();
     setPageCompletionPercentage();
-    setModalOnClicks();
 });
diff --git a/akvo/rsr/static/scripts-src/myrsr-admin.jsx b/akvo/rsr/static/scripts-src/myrsr-admin.jsx
@@ -872,9 +872,21 @@ function buildReactComponents(typeaheadOptions, typeaheadCallback, displayOption
     selectorClass = document.querySelector('.' + selector);
 
     TypeaheadContainer = React.createClass({
+
+        getInitialState: function() {
+            return ({focusClass: 'inactive'});
+        },
+        onKeyUp: function() {
+            if (inputType === 'org') {
+                this.setState({focusClass: 'active'});
+            }
+        },
+        onBlur: function() {
+            this.setState({focusClass: 'inactive'});
+        },
         render: function() {
             return (
-                    <div>
+                    <div className={this.state.focusClass}>
                         <Typeahead
                             placeholder=''
                             options={typeaheadOptions}
@@ -883,6 +895,8 @@ function buildReactComponents(typeaheadOptions, typeaheadCallback, displayOption
                             displayOption={displayOption}
                             filterOption={filterOption}
                             childID={selector}
+                            onKeyUp={this.onKeyUp}
+                            onBlur={this.onBlur}
                             customClasses={{
                               typeahead: "",
                               input: inputClass,
@@ -895,6 +909,7 @@ function buildReactComponents(typeaheadOptions, typeaheadCallback, displayOption
                                 name: selector,
                                 id: selector
                             }} />
+                        <div className="addOrg" onMouseDown={addOrgModal}>+Add organisation</div>
                     </div>
             );
         }
@@ -2110,23 +2125,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() {
 
@@ -2461,5 +2459,4 @@ document.addEventListener('DOMContentLoaded', function() {
     setAllSectionsCompletionPercentage();
     setAllSectionsChangeListerner();
     setPageCompletionPercentage();
-    setModalOnClicks();
 });
diff --git a/akvo/rsr/static/styles-src/main.css b/akvo/rsr/static/styles-src/main.css
@@ -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: #646464; }
+  div.active .addOrg:hover {
+    font-weight: bold; }
+  div.active .addOrg:active {
+    opacity: 0.8; }
 
 .modalBackground {
   position: fixed;

diff --git a/akvo/rsr/static/styles-src/main.scss b/akvo/rsr/static/styles-src/main.scss
@@ -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: rgb(100,100,100);
+
+        &:hover {
+            font-weight: bold;
+        }
+        &:active {
+            opacity: 0.8;
+        }
+    }
 }
 
 .modalBackground {

diff --git a/akvo/templates/myrsr/project_editor.html b/akvo/templates/myrsr/project_editor.html
@@ -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 %}