Fix 'participe' at proposal-box

Leonardo Merlin
1 parent 1ea912ba
Showing 12 changed files with 165 additions and 47 deletions Show diff stats
src/app/components/article-service/article.service.js
src/app/components/proposal-box/proposal-box.directive.js
src/app/components/proposal-box/proposal-box.html
src/app/components/proposal-box/proposal-box.scss
src/app/components/proposal-grid/proposal-grid.directive.js
src/app/index.route.js
src/app/pages/programas/programa-content.controller.js
src/app/pages/programas/programa.html
src/app/pages/programas/programas.scss
src/app/pages/propostas/propostas.controller.js
src/app/pages/propostas/propostas.html
src/app/pages/propostas/propostas.scss
@@ -19,6 +19,7 @@
       getTopics: getTopics,
       getTopicById: getTopicById,
       getProposals: getProposals,
+      getProposalById: getProposalById,
       getProposalsByTopicId: getProposalsByTopicId,
       getEvents: getEvents,
       subscribeToEvent: subscribeToEvent,
@@ -108,26 +109,18 @@
       // });
       //
-      searchTopics(params, cbSuccess, cbError);
+      searchProposals({
+        query: ''
+      }, cbSuccess, cbError);
     }
-    /**
-     * Ex.: /api/v1/articles/[article_id]/children?[params]content_type=ProposalsDiscussionPlugin::Proposal
-     * Ex.: /api/v1/articles/103644/children?limit=20&fields=id,name,slug,abstract,created_by&content_type=ProposalsDiscussionPlugin::Proposal
-     *
-     * @param  {Integer}  topicId   topic where has those proposals
-     * @param  {Object}   params    params for pagination ant others
-     * @param  {Function} cbSuccess callback for success
-     * @param  {Function} cbError   callback for error
-     * @return {Array}           [description]
-     */
-    function getProposalsByTopicId (topicId, params, cbSuccess, cbError) {
-      var url = service.apiArticles + topicId + '/children';
+    function getProposalById (proposalId, params, cbSuccess, cbError) {
+      var url = service.apiArticles + proposalId;
       var paramsExtended = angular.extend({
         // 'fields[]': ['id', 'title', 'abstract', 'children', 'children_count', 'ranking_position', 'hits', 'votes_for', 'votes_against'],
-        // 'limit':'20',
         // 'per_page':'1',
+        'limit':'1',
         'content_type':'ProposalsDiscussionPlugin::Proposal'
       }, params);
@@ -137,6 +130,21 @@
       }).catch(function(error){
         cbError(error);
       });
+
+    }
+
+    /**
+     * Ex.: /api/v1/articles/[article_id]/children?[params]content_type=ProposalsDiscussionPlugin::Proposal
+     * Ex.: /api/v1/articles/103644/children?limit=20&fields=id,name,slug,abstract,created_by&content_type=ProposalsDiscussionPlugin::Proposal
+     *
+     * @param  {Integer}  topicId   topic where has those proposals
+     * @param  {Object}   params    params for pagination ant others
+     * @param  {Function} cbSuccess callback for success
+     * @param  {Function} cbError   callback for error
+     * @return {Array}           [description]
+     */
+    function getProposalsByTopicId (topicId, params, cbSuccess, cbError) {
+      getProposalById(topicId + '/children', params, cbSuccess, cbError);
     }
     function getEvents (community_id, params, cbSuccess, cbError) {
@@ -205,11 +213,12 @@
       // Ex.: /api/v1/search/article?type=ProposalsDiscussionPlugin::Proposal&query=cisternas
       var url = '/api/v1/search/article';
       var paramsExtended = angular.extend({
-        'fields[]': ['id', 'title', 'slug', 'abstract', 'categories', 'setting', 'children_count', 'hits'],
+        // 'fields[]': ['id', 'title', 'slug', 'abstract', 'categories', 'setting', 'children_count', 'hits'],
         'type': 'ProposalsDiscussionPlugin::Proposal'
       }, params);
       UtilService.get(url, {params: paramsExtended}).then(function(data){
+        _pipeInjectSlugIntoParentProgram(data);
         cbSuccess(data);
       }).catch(function(error){
         cbError(error);
@@ -217,6 +226,9 @@
     }
     function _pipeInjectSlugIntoParentProgram(data){
+      if(!data.articles && data.article){
+        data.articles = [data.article];
+      }
       var proposals = data.articles;
       for (var i = proposals.length - 1; i >= 0; i--) {
         var proposal = proposals[i];
@@ -27,11 +27,12 @@
     };
-    ProposalBoxController.prototype.showContent2 = function (topic) {
+    ProposalBoxController.prototype.showContent = function (slug) {
       var vm = this;
       vm.$state.go('programa-conteudo', {
-        slug: topic.slug
+        slug: slug,
+        proposal_id: vm.proposal.id
       }, {
         location: true
       });
@@ -5,10 +5,13 @@
   </div>
   <div class="proposal-box--middle">
     <div class="proposal-box--content">
-     <div class="proposal-box--content-inner" ng-bind-html="vm.proposal.abstract"></div>
+     <div class="proposal-box--content-inner">{{::vm.proposal.abstract}}</div>
    </div>
-   <div ng-show="!vm.vote" class="proposal-box--join">
-    <button class="btn btn-link" ng-click="vm.showContent2(vm.topic)">Participe</button>
+   <div ng-hide="vm.vote" class="proposal-box--join">
+    <button class="btn btn-link color-theme-common-fg" ng-click="vm.showContent(vm.topic.slug)">
+      Participe
+      <span class="glyphicon glyphicon-menu-right color-theme-common-fg" aria-hidde="true"></span>
+    </button>
   </div>
   <div ng-show="vm.vote"class="proposal-box--actions text-center">
     <div class="row">
@@ -2,6 +2,7 @@
 	background-color: #f1f1f1;
 	border-radius: 5px;
 	// overflow: hidden;
+    margin-bottom: 20px;
 	&.focus {
 		border: 7px solid #000;
@@ -20,6 +21,14 @@
 	&--middle {
         padding: 30px;
+        min-height: 180px;
+
+        // position: relative;
+        // .proposal-box--join {
+        //     position: absolute;
+        //     bottom: 10px;
+        //     left: 30px;
+        // }
     }
 	&--bottom {
@@ -56,17 +65,27 @@
         margin-top: 10px;
     }
+    .proposal-box--join {
+        .btn {
+            font-weight: bold;
+        }
+    }
+
+    .action {
+        .glyphicon {
+            color: #fff;
+        }
+    }
+
     .dropdown {
         display: inline-block;
     }
+
     .dropdown-menu {
         padding: 0;
         margin: 0;
     }
-	.glyphicon {
-		color: #fff;
-	}
 	.icon-circle {
 		cursor: pointer;
@@ -22,7 +22,6 @@
       vm.$location = $location;
       vm.$filter = $filter;
       vm.$log = $log;
-      vm.defaultLimit = 6;
       // initialization
       vm.init();
@@ -30,8 +29,7 @@
     }
     ProposalGridController.prototype.init = function() {
-      // var vm = this;
-      // vm.programs = null; // scope var
+      var vm = this;
     };
     ProposalGridController.prototype.attachListeners = function() {
@@ -88,7 +88,7 @@
         }
       })
       .state('programa-conteudo', {
-        url: '/programa/:slug',
+        url: '/programa/:slug?proposal_id',
         ncyBreadcrumb: {
           label: '{{$parent.$root.contentTitle}}',
           parent: 'programas'
@@ -6,13 +6,14 @@
     .controller('ProgramaContentPageController', ProgramaContentPageController);
   /** @ngInject */
-  function ProgramaContentPageController(DialogaService, $state, $scope, $rootScope, $element, $log) {
+  function ProgramaContentPageController(DialogaService, $state, $location, $scope, $rootScope, $element, $log) {
     $log.debug('ProgramaContentPageController');
     var vm = this;
     vm.DialogaService = DialogaService;
     vm.$state = $state;
+    vm.$location = $location;
     vm.$scope = $scope;
     vm.$rootScope = $rootScope;
     vm.$element = $element;
@@ -28,6 +29,7 @@
     vm.article = null;
     vm.category = null;
+    vm.search = vm.$location.search();
     vm.error = false;
   };
@@ -68,15 +70,33 @@
         vm.$log.error(error);
       });
-      // get random proposal
-      vm.DialogaService.getProposalsByTopicId(vm.article.id, {
-        'order': 'random()',
-        'limit': '1'
-      }, function(data){
-        vm.randomProposal = data.articles[0];
-      }, function (error) {
+      if(vm.search.proposal_id){
+        var proposalUrlId = vm.search.proposal_id;
+        vm.DialogaService.getProposalById(proposalUrlId, {
+          'limit': '1'
+        }, _handleSuccessGetProposal, _handleErrorGetProposal);
+
+      }else{
+        // get random proposal
+        vm.DialogaService.getProposalsByTopicId(vm.article.id, {
+          'order': 'random()',
+          'limit': '1'
+        }, _handleSuccessGetProposal, _handleErrorGetProposal);
+      }
+
+      function _handleSuccessGetProposal(data){
+        if(data && data.articles){
+          vm.randomProposal = data.articles[0];
+        }
+
+        if(data && data.article){
+          vm.randomProposal = data.article;
+        }
+      }
+
+      function _handleErrorGetProposal(error){
         vm.$log.error(error);
-      });
+      }
       vm.loading = false;
     }, function(error) {
@@ -64,7 +64,7 @@
                   </div>
                   <div class="col-xs-12" ng-if="pageProgramaContent.randomProposal">
                     <h3 class="color-theme-fg">Propostas nesse programa</h3>
-                    <proposal-box proposal="pageProgramaContent.randomProposal" topic="pageProgramaContent.article" category="pageProgramaContent.category" vote="false" ></proposal-box>
+                    <proposal-box proposal="pageProgramaContent.randomProposal" topic="pageProgramaContent.article" category="pageProgramaContent.category" vote="true" ></proposal-box>
                   </div>
                   <div class="col-xs-12" ng-if="!pageProgramaContent.randomProposal && !(pageProgramaContent.proposalsTopRated && pageProgramaContent.proposalsTopRated.length > 0)">
                     <h3>Programas sem propostas</h3>
@@ -57,6 +57,10 @@
         vertical-align: middle;
     }
+    .program-preview--abstract h2 {
+        font-size: 40px;
+    }
+
     h2,
     h3{
         font-weight: bold;
@@ -11,33 +11,36 @@
     .controller('PropostasPageController', PropostasPageController);
   /** @ngInject */
-  function PropostasPageController(DialogaService, $log) {
+  function PropostasPageController(DialogaService, $scope, $location, $filter, $log) {
     var vm = this;
     vm.DialogaService = DialogaService;
+    vm.$scope = $scope;
+    vm.$location = $location;
+    vm.$filter = $filter;
     vm.$log = $log;
     vm.init();
+    vm.loadData();
+    vm.attachListeners();
+
     $log.debug('PropostasPageController');
   }
   PropostasPageController.prototype.init = function () {
     var vm = this;
-    vm.article = null;
     vm.themes = null;
     vm.selectedTheme = null;
     vm.proposals = null;
     vm.filtredProposals = null;
     vm.query = null;
+    vm.search = vm.$location.search();
     vm.loading = null;
     vm.error = null;
-
-    vm.loadData();
   };
-
   PropostasPageController.prototype.loadData = function () {
     var vm = this;
@@ -49,10 +52,12 @@
       vm.proposals = data.articles;
       vm.filtredProposals = vm.proposals;
       vm.loadingProposals = false;
+      vm.loading = false;
     }, function (error) {
       vm.error = error;
       vm.$log.error(error);
       vm.loadingProposals = false;
+      vm.loading = false;
     });
     // load themes
@@ -60,10 +65,40 @@
     vm.DialogaService.getThemes(function(themes){
       vm.themes = themes;
       vm.loadingThemes = false;
+      vm.loading = false;
     }, function (error) {
       vm.error = error;
       vm.$log.error(error);
       vm.loadingThemes = false;
+      vm.loading = false;
     });
   };
+
+  PropostasPageController.prototype.attachListeners = function() {
+    var vm = this;
+
+    vm.$scope.$on('change-selectedCategory', function (event, selectedCategory) {
+      vm.selectedTheme = selectedCategory;
+      vm.$log.debug('vm.selectedTheme', vm.selectedTheme);
+    });
+
+    vm.$scope.$watch('pagePropostas.selectedTheme', function(newValue/*, oldValue*/) {
+      vm.search.tema = newValue ? newValue.slug : null;
+      vm.$location.search('tema', vm.search.tema);
+      vm.filtredProposals = vm.getFiltredProposals();
+    });
+
+    vm.$scope.$watch('pagePropostas.query', function(newValue/*, oldValue*/) {
+      vm.search.filtro = newValue ? newValue : null;
+      vm.$location.search('filtro', vm.search.filtro);
+      vm.filtredProposals = vm.getFiltredProposals();
+    });
+  };
+
+  PropostasPageController.prototype.getFiltredProposals = function() {
+    var vm = this;
+
+    return vm.proposals;
+  };
+
 })();
@@ -7,7 +7,26 @@
 </div>
 <div class="page--propostas">
-  <section class="section--info">
+
+  <section class="section-info" ng-if="pagePropostas.loading || pagePropostas.error">
+    <div class="container">
+      <div class="row">
+        <div class="col-md-12">
+          <div ng-if="pagePropostas.loading && !pagePropostas.error">
+            <div class="alert alert-info" role="alert">Carregando conteúdo...</div>
+          </div>
+
+          <div ng-if="pagePropostas.error">
+            <div class="alert alert-danger" role="alert">
+              Erro ao carregar o conteúdo principal.
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <section class="section--header" ng-if="pagePropostas.proposals || pagePropostas.themes">
     <div class="container">
       <div class="row">
         <div class="col-sm-12">
@@ -16,7 +35,8 @@
       </div>
     </div>
   </section>
-  <section class="section--articles section-gray section-space-up" ng-if="pagePropostas.proposals">
+
+  <section class="section--articles section-gray section-space-up" ng-if="pagePropostas.proposals || pagePropostas.themes">
     <div class="container">
       <div id="lista-de-propostas" class="row">
         <div class="col-sm-4 col-md-3">
@@ -52,7 +72,7 @@
           </div>
         </div>
         <div class="col-sm-8 col-md-9">
-          <div class="row hidden-xs">
+          <div class="row hidden-xs" ng-if="pagePropostas.proposals">
             <div class="col-xs-12">
               <div class="input-group input-group-lg input-group-search">
                 <label for="articleQueryFilter" class="control-label sr-only">Buscar propostas:</label>
@@ -68,10 +88,11 @@
               </div>
             </div>
           </div>
-          <div class="row">
+
+          <div class="row" ng-if="pagePropostas.proposals">
             <div class="col-sm-12">
               <header class="header">
-                <h2>Total de Propostas as propostas: "<span>{{::pagePropostas.proposals.length}} propostas</span>"</h2>
+                <h2>Total de Propostas: "<b>{{::pagePropostas.proposals.length}} propostas</b>"</h2>
               </header>
             </div>
           </div>
@@ -0,0 +1,5 @@
+.page--propostas {
+    .proposal-box--middle {
+        background-color: #fff;
+    }
+}
	@@ -88,7 +88,7 @@		@@ -88,7 +88,7 @@
88	}	88	}
89	})	89	})
90	.state('programa-conteudo', {	90	.state('programa-conteudo', {
91	- url: '/programa/:slug',	91	+ url: '/programa/:slug?proposal_id',
92	ncyBreadcrumb: {	92	ncyBreadcrumb: {
93	label: '{{$parent.$root.contentTitle}}',	93	label: '{{$parent.$root.contentTitle}}',
94	parent: 'programas'	94	parent: 'programas'
	@@ -64,7 +64,7 @@		@@ -64,7 +64,7 @@
64	</div>	64	</div>
65	<div class="col-xs-12" ng-if="pageProgramaContent.randomProposal">	65	<div class="col-xs-12" ng-if="pageProgramaContent.randomProposal">
66	<h3 class="color-theme-fg">Propostas nesse programa</h3>	66	<h3 class="color-theme-fg">Propostas nesse programa</h3>
67	- <proposal-box proposal="pageProgramaContent.randomProposal" topic="pageProgramaContent.article" category="pageProgramaContent.category" vote="false" ></proposal-box>	67	+ <proposal-box proposal="pageProgramaContent.randomProposal" topic="pageProgramaContent.article" category="pageProgramaContent.category" vote="true" ></proposal-box>
68	</div>	68	</div>
69	<div class="col-xs-12" ng-if="!pageProgramaContent.randomProposal && !(pageProgramaContent.proposalsTopRated && pageProgramaContent.proposalsTopRated.length > 0)">	69	<div class="col-xs-12" ng-if="!pageProgramaContent.randomProposal && !(pageProgramaContent.proposalsTopRated && pageProgramaContent.proposalsTopRated.length > 0)">
70	<h3>Programas sem propostas</h3>	70	<h3>Programas sem propostas</h3>
@@ -0,0 +1,5 @@		@@ -0,0 +1,5 @@
	1	+.page--propostas {
	2	+ .proposal-box--middle {
	3	+ background-color: #fff;
	4	+ }
	5	+}