[#1447] Add button and help text

akvo · May 15, 2015 · e624658 · e624658
1 parent 88388f4
commit e624658
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 4 deletions.
diff --git a/akvo/rsr/static/scripts-src/my-iati.js b/akvo/rsr/static/scripts-src/my-iati.js
@@ -70,15 +70,41 @@ function getProjectLabels() {
         project_id = labels[i].getElementsByTagName('input')[0].value;
         loadAsync('/rest/v1/project_iati_check/' + project_id + '/?format=json', 0, 3, labels[i]);
     }
+
+    return true;
 }
 
 function loadComponent(component_id) {
     var Container;
 
     Container = React.createClass({displayName: 'Container',
+        getInitialState: function() {
+            return {active_button: true};
+        },
+
+        handleClick: function() {
+            this.setState({active_button: false});
+            getProjectLabels();
+        },
+
         render: function() {
             return (
-                React.DOM.a( {onClick:getProjectLabels}, "Perform checks")
+                React.DOM.p(null, 
+                React.DOM.div( {className:"row"}, 
+                    React.DOM.div( {className:"col-md-8"}, 
+                        "In order to see which of your projects is fully IATI compliant, you can"+' '+
+                        "perform checks by clicking the \"Perform checks\" button. ", React.DOM.br(null),
+                        "Projects with all mandatory IATI information filled in will be"+' '+
+                        "marked ", React.DOM.span( {className:"success"}, "green"), " and projects with missing"+' '+
+                        "information will be marked ", React.DOM.span( {className:"error"}, "red"),"."
+                    ),
+                    React.DOM.div( {className:"col-md-4"}, 
+                        React.DOM.button( {onClick:this.handleClick, className:this.state.active_button ? 'btn btn-primary' : 'btn btn-primary disabled'}, 
+                            this.state.active_button ? 'Perform checks' : 'Performing checks...'
+                        )
+                    )
+                )
+                )
                 );
         }
     });

diff --git a/akvo/rsr/static/scripts-src/my-iati.jsx b/akvo/rsr/static/scripts-src/my-iati.jsx
@@ -70,15 +70,41 @@ function getProjectLabels() {
         project_id = labels[i].getElementsByTagName('input')[0].value;
         loadAsync('/rest/v1/project_iati_check/' + project_id + '/?format=json', 0, 3, labels[i]);
     }
+
+    return true;
 }
 
 function loadComponent(component_id) {
     var Container;
 
     Container = React.createClass({
+        getInitialState: function() {
+            return {active_button: true};
+        },
+
+        handleClick: function() {
+            this.setState({active_button: false});
+            getProjectLabels();
+        },
+
         render: function() {
             return (
-                <a onClick={getProjectLabels}>Perform checks</a>
+                <p>
+                <div className="row">
+                    <div className="col-md-8">
+                        In order to see which of your projects is fully IATI compliant, you can
+                        perform checks by clicking the "Perform checks" button. <br/>
+                        Projects with all mandatory IATI information filled in will be
+                        marked <span className="success">green</span> and projects with missing
+                        information will be marked <span className="error">red</span>.
+                    </div>
+                    <div className="col-md-4">
+                        <button onClick={this.handleClick} className={this.state.active_button ? 'btn btn-primary' : 'btn btn-primary disabled'}>
+                            {this.state.active_button ? 'Perform checks' : 'Performing checks...'}
+                        </button>
+                    </div>
+                </div>
+                </p>
                 );
         }
     });

diff --git a/akvo/templates/myrsr/my_iati.html b/akvo/templates/myrsr/my_iati.html
@@ -7,10 +7,10 @@
 {% block head %}
 {{block.super}}
 <style>
-    #id_projects label span.error {
+    span.error {
         color: indianred;
     }
-    #id_projects label span.success {
+    span.success {
         color: darkseagreen;
     }
 </style>