sync

Leonardo Merlin
1 parent b91f2ae9
Showing 12 changed files with 109 additions and 115 deletions Show diff stats
src/app/components/article-service/article.service.js
src/app/components/category-list/category-list.directive.js
src/app/components/category-list/category-list.html
src/app/components/category-list/category-list.scss
src/app/components/event-list/event-list.scss
src/app/components/proposal-carousel/proposal-carousel.scss
src/app/components/proposal-related/proposal-related.directive.js
src/app/components/proposal-related/proposal-related.html
src/app/components/proposal-related/proposal-related.scss
src/app/pages/programas/programa-content.controller.js
src/app/pages/programas/programa.html
src/assets/images/icons/sprite.png
@@ -121,7 +121,7 @@
       var url = service.apiArticles + topicId + '/children';
       var paramsExtended = angular.extend({
-        'fields[]': ['id', 'title', 'abstract', 'children', 'children_count'],
+        'fields[]': ['id', 'title', 'abstract', 'children', 'children_count', 'ranking_position', 'hits', 'votes_for', 'votes_against'],
         'limit':'20',
         'page':'1',
         'content_type':'ProposalsDiscussionPlugin::Proposal'
@@ -9,7 +9,7 @@
   function categoryList() {
     /** @ngInject */
-    function CategoryListController($rootScope, $location, $log) {
+    function CategoryListController($rootScope, $element, $log) {
       $log.debug('CategoryListController');
       // alias
@@ -17,7 +17,7 @@
       // dependencies
       vm.$rootScope = $rootScope;
-      vm.$location = $location;
+      vm.$element = $element;
       vm.$log = $log;
       // initialization
@@ -25,7 +25,11 @@
     }
     CategoryListController.prototype.init = function() {
-      // var vm = this;
+      var vm = this;
+
+      if(!vm.isCollapsed){
+        vm.isCollapsed = false;
+      }
     };
     CategoryListController.prototype.selectCategory = function(category, $event) {
@@ -45,6 +49,17 @@
       vm.$rootScope.$broadcast('change-selectedCategory', vm.selectedCategory);
     };
+
+    CategoryListController.prototype.toogleList = function() {
+      var vm = this;
+
+      if(!vm._listGroup){
+        vm._listGroup = vm.$element.find('.list-group');
+      }
+
+      vm._listGroup.slideToggle();
+    };
+
     var directive = {
       restrict: 'E',
       templateUrl: 'app/components/category-list/category-list.html',
@@ -53,7 +68,7 @@
         selectedCategory: '@'
       },
       controller: CategoryListController,
-      controllerAs: 'categoryListCtrl',
+      controllerAs: 'vm',
       bindToController: true
     };
 <div class="category-list">
   <nav class="navigation">
-    <h3 class="category-list--title"><b>Programas</b> por Tema</h3>
-    <div class="list-group category-list" ng-class="categoryListCtrl.selectedCategory.slug">
+    <h3 class="category-list--title" ng-click="vm.toogleList()">
+      <span class="hidden-xs"><b>Programas</b> por Tema</span>
+      <span class="visible-xs"><b>Filtrar</b> por Tema <span class="glyphicon glyphicon-filter pull-right"></span></span>
+    </h3>
+
+    <!-- <div class="list-group ng-hide" ng-show="!vm.isCollapsed" ng-class="vm.selectedCategory.slug"> -->
+    <div class="list-group" ng-class="vm.selectedCategory.slug">
       <button type="button" class="list-group-item category-list--item"
-        ng-repeat="category in categoryListCtrl.categories"
-        ng-class="{active: categoryListCtrl.selectedCategory.slug === category.slug}"
-        ng-click="categoryListCtrl.selectCategory(category, $event)">
+        ng-repeat="category in vm.categories"
+        ng-class="{active: vm.selectedCategory.slug === category.slug}"
+        ng-click="vm.selectCategory(category, $event)">
         <span class="category-list--icon-circle"  aria-hidden="true" ng-class="category.slug"></span>
         <span class="category-list--icon icon" aria-hidden="true" ng-class="'icon-tema-' + category.slug"></span>
         <span class="category-list--label">{{::category.name}}</span>
-        <span class="category-list--icon--right glyphicon glyphicon-chevron-right"></span>
+        <span class="category-list--icon--right glyphicon glyphicon-chevron-right hidden-xs"></span>
       </button>
     </div>
   </nav>
 .category-list {
-    .category-list--title {
+    &--title {
         color: #ffffff;
         font-size: 16px;
         margin: 0;
@@ -8,10 +8,7 @@
         border-top-left-radius: 5px;
         border-top-right-radius: 5px;
         overflow: hidden;
-    }
-
-
-    .category-list--group {
+        cursor: pointer;
     }
     .category-list--item {
@@ -23,6 +20,8 @@
         overflow: hidden;
     }
+
+
     .category-list--label {
         margin-left: 70px;
         margin-right: 30px;
@@ -93,19 +92,25 @@
         transform: scale(1.4);
     }
+    .list-group {
+
+        -webkit-transition: -webkit-transform .3s ease-in-out;
+        -moz-transition: -moz-transform .3s ease-in-out;
+        -o-transition: -o-transform .3s ease-in-out;
+        transition: transform .3s ease-in-out;
+
+        opacity: 1;
+
+        &.ng-hide {
+            opacity: 0;
+            // height: 0;
+            // line-height: 0;
+        }
+    }
+
     .list-group-item.active,
     .list-group-item.active:hover,
     .list-group-item.active:focus {
         background-color: #f5f5f5;
     }
-
-    // @each $category, $color in $categories {
-    //     &.#{$category} {
-    //         .list-group-item.active,
-    //         .list-group-item.active:hover,
-    //         .list-group-item.active:focus {
-    //             background-color: $color;
-    //         }
-    //     }
-    // }
 }
@@ -55,7 +55,12 @@
         text-align: center;
         line-height: 20px;
         cursor: pointer;
-        transition: .3s linear all;
+
+        -webkit-transition: -webkit-transform 0.3s linear all;
+        -moz-transition: -moz-transform 0.3s linear all;
+        -o-transition: -o-transform 0.3s linear all;
+        transition: transform 0.3s linear all;
+
         overflow: hidden;
         z-index: 100;
@@ -2,6 +2,7 @@
     background-color: #f1f1f1;
     border-radius: 5px;
     overflow: hidden;
+    margin-bottom: 30px;
     &-top {
         position: relative;
@@ -57,21 +58,20 @@
             font-weight: bold;
             line-height: 116px;
             z-index: 1;
-
         }
     }
     &-bottom {
         position: relative;
         color: #fff;
-        padding: 10px;
+        padding: 15px 30px;
         font-weight: bold;
         cursor: pointer;
         z-index: 10;
         &-icon {
             position: absolute;
-            top: 10px;
+            top: 15px;
             right: 15px;
             .glyphicon {
@@ -9,14 +9,10 @@
   function proposalRelated() {
     /** @ngInject */
-    function ProposalRelatedController(ArticleService, $scope, $element, $timeout, $log) {
+    function ProposalRelatedController($log) {
       $log.debug('ProposalRelatedController');
       var vm = this;
-      vm.ArticleService = ArticleService;
-      vm.$scope = $scope;
-      vm.$element = $element;
-      vm.$timeout = $timeout;
       vm.$log = $log;
       vm.init();
@@ -24,69 +20,16 @@
     ProposalRelatedController.prototype.init = function () {
       // initial values
-      var vm = this;
-
-      vm.activeIndex = 1;
-      vm.loading = false;
-
-      if(angular.isDefined(vm.limit) && angular.isString(vm.limit)){
-        vm.limit = parseInt(vm.limit);
-      }else{
-        vm.limit = 3;
-      }
-
-      vm.loadData();
-    };
-
-    ProposalRelatedController.prototype.loadData = function () {
-      // async values
-      var vm = this;
-
-      vm.loading = true;
-
-      // simulate delay
-      vm.$timeout(function(){
-        vm.loading = false;
-
-        // Fake Data
-        // vm.proposals = vm.ArticleService.getProposals();
-        vm.proposals = [{
-          id: 4159,
-          abstract: 'Ut odio unde porro in. Aut fuga magni adipisci. Recusandae ipsum distinctio omnis ut illum.',
-          effective_support: 0.1572052401746725,
-          hits: 4159,
-          votes_against: 3779,
-          votes_for: 1780
-        },{
-          id: 935,
-          abstract: 'Magni sunt ut molestiae. A porro et quod saepe placeat amet nihil. Aut ut id voluptatem doloribus quia.',
-          effective_support: 0.1572052401746725,
-          hits: 8602,
-          votes_against: 7005,
-          votes_for: 8728
-        },{
-          id: 1008,
-          abstract: 'Cum quas assumenda nihil delectus eos. Minus fugit velit voluptatem nisi nam esse ut id.',
-          effective_support: 0.1572052401746725,
-          hits: 9181,
-          votes_against: 612,
-          votes_for: 1786
-        }];
-
-        if(vm.display === 'list'){
-          // wait until DOM be created
-          vm.$timeout(function(){
-            // attachPopover.call(vm);
-          }, 20);
-        }
-      }, 2000);
+      // var vm = this;
     };
     var directive = {
       restrict: 'E',
       templateUrl: 'app/components/proposal-related/proposal-related.html',
       scope: {
-        article: '='
+        proposal: '=',
+        topic: '=',
+        category: '='
       },
       controller: ProposalRelatedController,
       controllerAs: 'vm',
 <div class="proposal-related" ng-class="{'focus':vm.isFocused}">
   <div class="proposal-related--top">
-  	<div class="proposal-related--theme color-theme-bg-darker">[Nome do Tema]</div>
-  	<div class="proposal-related--program color-theme-bg">[Nome do Programa]</div>
+  	<div class="proposal-related--theme color-theme-bg-darker">{{::vm.category.name}}</div>
+  	<div class="proposal-related--program color-theme-bg">{{::vm.topic.title}}</div>
   </div>
   <div class="proposal-related--middle">
-  	<div class="proposal-related--content">[Conteúdo ad proposta enviada]</div>
+    <div class="proposal-related--content">
+  	 <div class="proposal-related--content-inner" ng-bind-html="vm.proposal.abstract"></div>
+    </div>
   	<div class="proposal-related--actions">
   		<div class="row">
   			<div class="col-sm-4">
@@ -2,7 +2,7 @@
 	background-color: #f1f1f1;
 	border-radius: 5px;
 	overflow: hidden;
-	
+
 	&.focus {
 		border: 7px solid #000;
 		border-radius: 12px;
@@ -18,8 +18,10 @@
 		overflow: hidden;
 	}
-	// &--middle {}
-	
+	&--middle {
+        padding: 30px;
+    }
+
 	&--bottom {
 		border-bottom-left-radius: 5px;
 		border-bottom-right-radius: 5px;
@@ -34,6 +36,10 @@
         padding: 20px 15px;
 	}
+    &--content {
+        padding-bottom: 20px;
+    }
+
 	.glyphicon {
 		color: #fff;
 	}
@@ -44,4 +50,4 @@
 		-moz-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.3);
 		box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.3);
 	}
-}
 \ No newline at end of file
+}
@@ -54,22 +54,28 @@
       }
       vm.DialogaService.getProposalsByTopicId(vm.article.id, {}, function(data){
-        vm.proposals = data.children;
-        vm.proposalsTopRated = [
-          {abstract: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tristique consectetur neque, at tincidunt enim volutpat sit amet. Integer sed cursus metus, non luctus risus. Mauris elementum est quis vehicula ullamcorper.'},
-          {abstract: 'Mauris elementum est quis vehicula ullamcorper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tristique consectetur neque, at tincidunt enim volutpat sit amet. Integer sed cursus metus, non luctus risus.'},
-          {abstract: 'Integer sed cursus metus, non luctus risus. Mauris elementum est quis vehicula ullamcorper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tristique consectetur neque, at tincidunt enim volutpat sit amet.'},
-        ];
+        vm.proposals = data.articles;
+        vm.proposalsTopRated = vm.proposals.slice(0, 3);
       }, function (error) {
         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) {
+        vm.$log.error(error);
+      });
+
       vm.loading = false;
     }, function(error) {
       vm.$log.error(error);
       vm.error = error;
       vm.loading = false;
-      
+
       // vm.$log.info('Rollback to home page.');
       // vm.$state.go('inicio', {}, {location: true});
     });
@@ -23,7 +23,7 @@
       <div class="container">
         <div class="row">
           <article class="program-preview">
-            
+
               <div class="col-md-12">
                 <h1 class="program-preview--title color-theme-fg">{{::pageProgramaContent.article.title}}</h1>
               </div>
@@ -60,15 +60,22 @@
               </div>
               <div class="col-md-4">
                 <div class="row">
-                  <div class="col-xs-12">
+                  <div class="col-xs-12" ng-if="pageProgramaContent.proposalsTopRated && pageProgramaContent.proposalsTopRated.lenght > 0">
                     <h3 class="color-theme-fg">Propostas mais votadas</h3>
-                    <div ng-if="pageProgramaContent.proposalsTopRated">
-                      <proposal-carousel proposals="pageProgramaContent.proposalsTopRated"></proposal-carousel>
-                    </div>
+                    <proposal-carousel proposals="pageProgramaContent.proposalsTopRated"></proposal-carousel>
                   </div>
-                  <div class="col-xs-12">
+                  <div class="col-xs-12" ng-if="pageProgramaContent.randomProposal">
                     <h3 class="color-theme-fg">Propostas nesse programa</h3>
-                    <proposal-related article="pageProgramaContent.article"></proposal-related>
+                    <proposal-related proposal="pageProgramaContent.randomProposal" topic="pageProgramaContent.article" category="pageProgramaContent.category"></proposal-related>
+                  </div>
+                  <div class="col-xs-12" ng-if="!pageProgramaContent.randomProposal && !(pageProgramaContent.proposalsTopRated && pageProgramaContent.proposalsTopRated.lenght > 0)">
+                    <h3>Programas sem propostas</h3>
+                    <p>
+                      Este programa ainda não possui nenhuma proposta.
+                      <div class="button--themed">
+                        <button type="button" class="btn btn-block" ng-click="pageProgramaContent.makeProposal()">Faça uma proposta</button>
+                      </div>
+                    </p>
                   </div>
                 </div>
               </div>
@@ -87,7 +94,7 @@
         </div>
       </div>
     </section>
-    
+
     <section class="section-content">
       <article class="program-content" ng-if="pageProgramaContent.article">
           <div ng-bind-html="pageProgramaContent.article.body"></div>
	@@ -121,7 +121,7 @@		@@ -121,7 +121,7 @@
121	var url = service.apiArticles + topicId + '/children';	121	var url = service.apiArticles + topicId + '/children';
122		122
123	var paramsExtended = angular.extend({	123	var paramsExtended = angular.extend({
124	- 'fields[]': ['id', 'title', 'abstract', 'children', 'children_count'],	124	+ 'fields[]': ['id', 'title', 'abstract', 'children', 'children_count', 'ranking_position', 'hits', 'votes_for', 'votes_against'],
125	'limit':'20',	125	'limit':'20',
126	'page':'1',	126	'page':'1',
127	'content_type':'ProposalsDiscussionPlugin::Proposal'	127	'content_type':'ProposalsDiscussionPlugin::Proposal'
	@@ -9,14 +9,10 @@		@@ -9,14 +9,10 @@
9	function proposalRelated() {	9	function proposalRelated() {
10		10
11	/** @ngInject */	11	/** @ngInject */
12	- function ProposalRelatedController(ArticleService, $scope, $element, $timeout, $log) {	12	+ function ProposalRelatedController($log) {
13	$log.debug('ProposalRelatedController');	13	$log.debug('ProposalRelatedController');
14		14
15	var vm = this;	15	var vm = this;
16	- vm.ArticleService = ArticleService;
17	- vm.$scope = $scope;
18	- vm.$element = $element;
19	- vm.$timeout = $timeout;
20	vm.$log = $log;	16	vm.$log = $log;
21		17
22	vm.init();	18	vm.init();
	@@ -24,69 +20,16 @@		@@ -24,69 +20,16 @@
24		20
25	ProposalRelatedController.prototype.init = function () {	21	ProposalRelatedController.prototype.init = function () {
26	// initial values	22	// initial values
27	- var vm = this;
28	-
29	- vm.activeIndex = 1;
30	- vm.loading = false;
31	-
32	- if(angular.isDefined(vm.limit) && angular.isString(vm.limit)){
33	- vm.limit = parseInt(vm.limit);
34	- }else{
35	- vm.limit = 3;
36	- }
37	-
38	- vm.loadData();
39	- };
40	-
41	- ProposalRelatedController.prototype.loadData = function () {
42	- // async values
43	- var vm = this;
44	-
45	- vm.loading = true;
46	-
47	- // simulate delay
48	- vm.$timeout(function(){
49	- vm.loading = false;
50	-
51	- // Fake Data
52	- // vm.proposals = vm.ArticleService.getProposals();
53	- vm.proposals = [{
54	- id: 4159,
55	- abstract: 'Ut odio unde porro in. Aut fuga magni adipisci. Recusandae ipsum distinctio omnis ut illum.',
56	- effective_support: 0.1572052401746725,
57	- hits: 4159,
58	- votes_against: 3779,
59	- votes_for: 1780
60	- },{
61	- id: 935,
62	- abstract: 'Magni sunt ut molestiae. A porro et quod saepe placeat amet nihil. Aut ut id voluptatem doloribus quia.',
63	- effective_support: 0.1572052401746725,
64	- hits: 8602,
65	- votes_against: 7005,
66	- votes_for: 8728
67	- },{
68	- id: 1008,
69	- abstract: 'Cum quas assumenda nihil delectus eos. Minus fugit velit voluptatem nisi nam esse ut id.',
70	- effective_support: 0.1572052401746725,
71	- hits: 9181,
72	- votes_against: 612,
73	- votes_for: 1786
74	- }];
75	-
76	- if(vm.display === 'list'){
77	- // wait until DOM be created
78	- vm.$timeout(function(){
79	- // attachPopover.call(vm);
80	- }, 20);
81	- }
82	- }, 2000);	23	+ // var vm = this;
83	};	24	};
84		25
85	var directive = {	26	var directive = {
86	restrict: 'E',	27	restrict: 'E',
87	templateUrl: 'app/components/proposal-related/proposal-related.html',	28	templateUrl: 'app/components/proposal-related/proposal-related.html',
88	scope: {	29	scope: {
89	- article: '='	30	+ proposal: '=',
		31	+ topic: '=',
		32	+ category: '='
90	},	33	},
91	controller: ProposalRelatedController,	34	controller: ProposalRelatedController,
92	controllerAs: 'vm',	35	controllerAs: 'vm',