Add toggle at 'respostas e compromissos' (program page)

Leonardo Merlin
1 parent 2b6de365
Showing 5 changed files with 104 additions and 22 deletions Show diff stats
src/app/components/article-service/article.service.js
src/app/components/dialoga-service/dialoga.service.js
src/app/pages/programas/programa.controller.js
src/app/pages/programas/programa.html
src/app/pages/programas/programas.scss
@@ -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){
@@ -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 ){
@@ -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');
+        });
+      }
+    }
+  };
+
 })();
@@ -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>
@@ -272,6 +272,10 @@
             }
         }
+        .gov-response {
+            background-color: #e1e1e1;
+        }
+
         .button--themed {
             position: relative;
             max-width: 500px;
	@@ -286,6 +286,7 @@		@@ -286,6 +286,7 @@
286	};	286	};
287		287
288	ProgramaPageController.prototype.toggleContentVisibility = function() {	288	ProgramaPageController.prototype.toggleContentVisibility = function() {
		289	+ var vm = this;
289	var $sectionContent = angular.element('.section-content');	290	var $sectionContent = angular.element('.section-content');
290		291
291	if (!$sectionContent \|\| $sectionContent.length === 0) {	292	if (!$sectionContent \|\| $sectionContent.length === 0) {
	@@ -300,4 +301,49 @@		@@ -300,4 +301,49 @@
300	angular.element('html,body').animate({scrollTop: $sectionContent.offset().top}, 'fast');	301	angular.element('html,body').animate({scrollTop: $sectionContent.offset().top}, 'fast');
301	}	302	}
302	};	303	};
		304	+
		305	+ ProgramaPageController.prototype.toggleResponseVisibility = function(proposal) {
		306	+ var vm = this;
		307	+
		308	+ if(!proposal){
		309	+ vm.$log.error('Error - proposal is:', proposal);
		310	+ return;
		311	+ }
		312	+
		313	+ if(proposal.response){
		314	+ // show response
		315	+ toggle();
		316	+ }else{
		317	+
		318	+ // load response
		319	+ proposal.response = {
		320	+ loading: true,
		321	+ error: false,
		322	+ content: null
		323	+ };
		324	+
		325	+ vm.DialogaService.getResponseByProposalId(proposal.id)
		326	+ .then(function(data){
		327	+ proposal.response.content = data.article.body;
		328	+ toggle();
		329	+ }).catch(function(){
		330	+ proposal.response.error = false;
		331	+ }).finally(function(){
		332	+ proposal.response.loading = false;
		333	+ });
		334	+ }
		335	+
		336	+ function toggle () {
		337	+ var $el = angular.element('.gov-response-' + proposal.id);
		338	+
		339	+ if ($el.is(':visible')) {
		340	+ $el.slideUp();
		341	+ }else {
		342	+ $el.slideDown(100, function(){
		343	+ angular.element('html,body').animate({scrollTop: $el.offset().top}, 'fast');
		344	+ });
		345	+ }
		346	+ }
		347	+ };
		348	+
303	})();	349	})();