From 241f99d2ebb24c54a385d5292519a50eea927c6c Mon Sep 17 00:00:00 2001
From: Leonardo Merlin <leonardo.merlin@serpro.gov.br>
Date: Thu, 3 Dec 2015 15:18:06 -0200
Subject: [PATCH] Add toggle at 'respostas e compromissos' (program page)

---
 src/app/components/article-service/article.service.js |  8 ++++++++
 src/app/components/dialoga-service/dialoga.service.js |  7 +++++++
 src/app/pages/programas/programa.controller.js        | 46 ++++++++++++++++++++++++++++++++++++++++++++++
 src/app/pages/programas/programa.html                 | 61 +++++++++++++++++++++++++++++++++++++++----------------------
 src/app/pages/programas/programas.scss                |  4 ++++
 5 files changed, 104 insertions(+), 22 deletions(-)

diff --git a/src/app/components/article-service/article.service.js b/src/app/components/article-service/article.service.js
index f113b46..ef1be74 100644
--- a/src/app/components/article-service/article.service.js
+++ b/src/app/components/article-service/article.service.js
@@ -23,6 +23,7 @@
       getProposals: getProposals,
       getProposalById: getProposalById,
       getProposalsByTopicId: getProposalsByTopicId,
+      getResponseByProposalId: getResponseByProposalId,
       createProposal: createProposal,
       voteProposal: voteProposal,
       getEvents: getEvents,
@@ -139,6 +140,13 @@
       getProposalById(topicId + '/children', params, cbSuccess, cbError);
     }
 
+    function getResponseByProposalId (proposalId) {
+      var url = service.apiArticles + proposalId;
+      // var paramsExtended = {};
+      
+      return UtilService.get(url);
+    }
+
     function createProposal (proposal, targetId, categoryId, cbSuccess, cbError){
 
       if(!$rootScope.currentUser){
diff --git a/src/app/components/dialoga-service/dialoga.service.js b/src/app/components/dialoga-service/dialoga.service.js
index 3f5802e..139f253 100644
--- a/src/app/components/dialoga-service/dialoga.service.js
+++ b/src/app/components/dialoga-service/dialoga.service.js
@@ -22,6 +22,7 @@
     extendedService.getProgramsByThemeId = getProgramsByThemeId;
     extendedService.getProgramsRandom = getProgramsRandom;
     extendedService.getEvents = getEvents; // override
+    extendedService.getResponseByProposalId = getResponseByProposalId;
     extendedService.getQuestions = getQuestions;
     extendedService.searchPrograms = searchPrograms;
     extendedService.searchProposals = searchProposals;
@@ -212,6 +213,12 @@
       return ArticleService.getEvents(API.communityId, paramsExtended);
     }
 
+    function getResponseByProposalId(/*proposalId*/){
+
+      return ArticleService.getResponseByProposalId(API.articleId.terms);
+      // return ArticleService.getResponseByProposalId(proposalId);
+    }
+
     // TODO: implement
     function getQuestions (cbSuccess/*, cbError*/) {
       if( !!CACHE.questions ){
diff --git a/src/app/pages/programas/programa.controller.js b/src/app/pages/programas/programa.controller.js
index 6af691d..9721180 100644
--- a/src/app/pages/programas/programa.controller.js
+++ b/src/app/pages/programas/programa.controller.js
@@ -286,6 +286,7 @@
   };
 
   ProgramaPageController.prototype.toggleContentVisibility = function() {
+    var vm = this;
     var $sectionContent = angular.element('.section-content');
 
     if (!$sectionContent || $sectionContent.length === 0) {
@@ -300,4 +301,49 @@
       angular.element('html,body').animate({scrollTop: $sectionContent.offset().top}, 'fast');
     }
   };
+
+  ProgramaPageController.prototype.toggleResponseVisibility = function(proposal) {
+    var vm = this;
+
+    if(!proposal){
+      vm.$log.error('Error - proposal is:', proposal);
+      return;
+    }
+
+    if(proposal.response){
+      // show response
+      toggle();
+    }else{
+
+      // load response
+      proposal.response = {
+        loading: true,
+        error: false,
+        content: null
+      };
+
+      vm.DialogaService.getResponseByProposalId(proposal.id)
+      .then(function(data){
+        proposal.response.content = data.article.body;
+        toggle();
+      }).catch(function(){
+        proposal.response.error = false;
+      }).finally(function(){
+        proposal.response.loading = false;
+      });
+    }
+
+    function toggle () {
+      var $el = angular.element('.gov-response-' + proposal.id);
+      
+      if ($el.is(':visible')) {
+        $el.slideUp();
+      }else {
+        $el.slideDown(100, function(){
+          angular.element('html,body').animate({scrollTop: $el.offset().top}, 'fast');
+        });
+      }
+    }
+  };
+
 })();
diff --git a/src/app/pages/programas/programa.html b/src/app/pages/programas/programa.html
index a473f2d..6489ae8 100644
--- a/src/app/pages/programas/programa.html
+++ b/src/app/pages/programas/programa.html
@@ -32,7 +32,7 @@
                                     <div ng-if="pagePrograma.article.archived" class="img-mask--background">
                                         <div class="icon icon-programa-respondido">
                                             <div class="icon-circle">
-                                              <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
+                                                <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
                                             </div>
                                         </div>
                                     </div>
@@ -220,34 +220,51 @@
                 </div>
             </div>
             <div ng-if="pagePrograma.proposalsTopRated">
-                <div class="sub-section" ng-repeat="proposal in pagePrograma.proposalsTopRated">
-                    <div class="container">
-                        <div class="row">
-                            <div class="col-sm-4 col-md-3">
-                                <div class="img-mask--container" ng-style="{'background-image':'url( {{::pagePrograma.banner.src}} )'}">
-                                    <div class="img-mask--background">
-                                        <div class="icon icon-programa-respondido">
-                                            <div class="icon-circle">
-                                              <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
+                <div ng-repeat="proposal in pagePrograma.proposalsTopRated">
+                    <div class="sub-section">
+                        <div class="container">
+                            <div class="row">
+                                <div class="col-sm-4 col-md-3">
+                                    <div class="img-mask--container" ng-style="{'background-image':'url( {{::pagePrograma.banner.src}} )'}">
+                                        <div class="img-mask--background">
+                                            <div class="icon icon-programa-respondido">
+                                                <div class="icon-circle">
+                                                    <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
+                                                </div>
                                             </div>
                                         </div>
                                     </div>
                                 </div>
+                                <div class="col-sm-8 col-md-9">
+                                    <br>
+                                    <h3 class="color-theme-fg">{{($index+1)}}a proposta mais votada:</h3>
+                                    <p>{{::proposal.abstract}}</p>
+                                    <div class="button--themed">
+                                        <button class="btn btn-block" ng-click="pagePrograma.toggleResponseVisibility(proposal)">
+                                            Veja a resposta e o compromisso do governo
+                                            <div class="button-left-icon">
+                                                <span class="glyphicon glyphicon-chevron-down pull-right color-theme-common-fg" aria-hidden="true"></span>
+                                            </div>
+                                        </button>
+                                    </div>
+                                    <br>
+                                </div>
                             </div>
-                            <div class="col-sm-8 col-md-9">
-                                <br>
-                                <h3 class="color-theme-fg">{{($index+1)}}a proposta mais votada:</h3>
-                                <p>{{::proposal.abstract}}</p>
-                                
-                                <div class="button--themed">
-                                    <button class="btn btn-block">
-                                        Veja a resposta e o compromisso do governo
-                                        <div class="button-left-icon">
-                                            <span class="glyphicon glyphicon-chevron-down pull-right color-theme-common-fg" aria-hidden="true"></span>
+                        </div>
+                    </div>
+                    <div ng-if="proposal.response" class="gov-response gov-response-{{::proposal.id}}" style="display:none;">
+                        <div class="container">
+                            <div class="row">
+                                <div class="col-sm-12">
+                                    <div ng-if="proposal.response.loading" class="alert alert-info" role="alert">Carregando a resposta e compromisso do governo.</div>
+                                    <div ng-if="proposal.response.error" class="alert alert-warning" role="alert">Erro ao carregar a resposta e compromisso. Tente novamente ou <a ui-sref="duvidas">entre em contato</a>.</div>
+                                    <div ng-if="proposal.response.content">
+                                        <h3 class="color-theme-fg">Compromissos:</h3>
+                                        <div class="gov-response--content">
+                                            <div ng-bind-html="proposal.response.content"></div>
                                         </div>
-                                    </button>
+                                    </div>
                                 </div>
-                                <br>
                             </div>
                         </div>
                     </div>
diff --git a/src/app/pages/programas/programas.scss b/src/app/pages/programas/programas.scss
index c9dcf2b..cbfafbd 100644
--- a/src/app/pages/programas/programas.scss
+++ b/src/app/pages/programas/programas.scss
@@ -272,6 +272,10 @@
             }
         }
 
+        .gov-response {
+            background-color: #e1e1e1;
+        }
+
         .button--themed {
             position: relative;
             max-width: 500px;
--
libgit2 0.21.2