Sync: improve vote box actions and feedback

Leonardo Merlin
1 parent 2720397f
Showing 4 changed files with 58 additions and 20 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
@@ -23,6 +23,7 @@
       getProposalById: getProposalById,
       getProposalsByTopicId: getProposalsByTopicId,
       createProposal: createProposal,
+      voteProposal: voteProposal,
       getEvents: getEvents,
       subscribeToEvent: subscribeToEvent,
       searchTopics: searchTopics,
@@ -172,6 +173,19 @@
       }
     }
  
+    function voteProposal (proposal_id, params, cbSuccess, cbError){
+      var url = service.apiArticles + proposal_id + '/vote';
+      var paramsExtended = angular.extend({
+        private_token: $rootScope.currentUser.private_token
+      }, params);
+
+      UtilService.post(url, paramsExtended).then(function(response){
+        cbSuccess(response);
+      }).catch(function(error){
+        cbError(error);
+      });
+    }
+
     function getEvents (community_id, params, cbSuccess, cbError) {
       // Ex.: /api/v1/communities/19195/articles?categories_ids[]=' + cat_id + '&content_type=Event';
       // Ex.: /api/v1/communities/' + community_id + '/articles?categories_ids[]=' + cat_id + '&content_type=Event';
@@ -9,11 +9,12 @@
   function proposalBox() {
  
     /** @ngInject */
-    function ProposalBoxController($scope, $state, VOTE_STATUS, VOTE_OPTIONS, $log) {
+    function ProposalBoxController($scope, $rootScope, $state, VOTE_STATUS, VOTE_OPTIONS, $log) {
       $log.debug('ProposalBoxController');
  
       var vm = this;
       vm.$scope = $scope;
+      vm.$rootScope = $rootScope;
       vm.$state = $state;
       vm.VOTE_STATUS = VOTE_STATUS;
       vm.VOTE_OPTIONS = VOTE_OPTIONS;
@@ -30,12 +31,26 @@
       vm.canVote = vm.canVote || false;
       vm.focus = vm.focus || false;
       vm.STATE = null;
+      vm.errorOnSkip = false;
     };
  
     ProposalBoxController.prototype.addListeners = function () {
       var vm = this;
  
-      vm.$scope.$on('proposal-box:vote-response', function(e, data){
+      vm.$scope.$on('proposal-box:proposal-loaded', function(event, data){
+        if(data.success){
+          vm.STATE = null;  
+        }
+
+        if(data.error){
+          vm.errorOnSkip = true;
+        }
+      });
+      vm.$scope.$on('proposal-box:vote-response', function(event, data){
+        vm.$log.debug('proposal-box:vote-response');
+        vm.$log.debug('event', event);
+        vm.$log.debug('data', data);
+
         if(data.success) {
           vm.STATE = vm.VOTE_STATUS.SUCCESS;
         }
@@ -59,15 +74,19 @@
       });
     };
  
-    ProposalBoxController.prototype.voteUp = function () {
+    ProposalBoxController.prototype.vote = function (value) {
       var vm = this;
  
-      vm.STATE = vm.VOTE_STATUS.LOADING;
-      vm.$scope.$emit('proposal-box:vote', {
-        OPTION: vm.VOTE_OPTIONS.UP,
-        proposal_id: vm.proposal.id
-      });
-      vm.$log.debug('Sending vote');
+      if(vm.$rootScope.currentUser){
+        vm.$scope.$emit('proposal-box:vote', {
+          OPTION: value,
+          proposal_id: vm.proposal.id
+        });
+        vm.$log.debug('Sending vote', value);
+      }else{
+        vm.$log.info('Must be logged in...');
+
+      }
     };
  
     ProposalBoxController.prototype.voteDown = function () {
@@ -84,6 +103,7 @@
     ProposalBoxController.prototype.skip = function () {
       var vm = this;
  
+      vm.errorOnSkip = false;
       vm.STATE = vm.VOTE_STATUS.LOADING;
       vm.$scope.$emit('proposal-box:vote', {
         OPTION: vm.VOTE_OPTIONS.SKIP,
@@ -6,18 +6,21 @@
     <div ng-show="vm.STATE === vm.VOTE_STATUS.LOADING">
       <div class="proposal-loading">
         <div class="shadow"></div>
-        <div class="text">
+        <div class="text text-center" ng-show="!vm.errorOnSkip">
           Carregando...
         </div>
+        <div class="text" ng-show="vm.errorOnSkip">
+          Erro ao carregar nova proposta.
+        </div>
       </div>
     </div>
     <div class="proposal-box--top">
-      <div class="proposal-box--theme color-theme-bg-complementar-2">{{::vm.category.name}}</div>
-      <div class="proposal-box--program color-theme-bg">{{::vm.topic.title}}</div>
+      <div class="proposal-box--theme color-theme-bg-complementar-2">{{vm.category.name}}</div>
+      <div class="proposal-box--program color-theme-bg">{{vm.topic.title}}</div>
     </div>
     <div class="proposal-box--middle">
       <div class="proposal-box--content">
-       <div class="proposal-box--content-inner">{{::vm.proposal.abstract}}</div>
+       <div class="proposal-box--content-inner">{{vm.proposal.abstract}}</div>
      </div>
      <div ng-hide="vm.canVote" class="proposal-box--join">
       <button class="btn btn-link color-theme-common-fg" ng-click="vm.showContent(vm.topic.slug)">
@@ -25,10 +28,10 @@
         <span class="glyphicon glyphicon-menu-right color-theme-common-fg" aria-hidde="true"></span>
       </button>
     </div>
-    <div ng-show="vm.canVote"class="proposal-box--actions text-center">
+    <div ng-show="vm.canVote" class="proposal-box--actions text-center">
       <div class="row">
         <div class="col-xs-4">
-          <div class="action vote_for" ng-click="vm.voteUp()">
+          <div class="action vote_for" ng-click="vm.vote(vm.VOTE_OPTIONS.UP)">
             <div class="icon-circle">
               <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
             </div>
@@ -44,7 +47,7 @@
           </div>
         </div>
         <div class="col-xs-4">
-          <div class="action vote_against" ng-click="vm.voteDown()">
+          <div class="action vote_against" ng-click="vm.vote(vm.VOTE_OPTIONS.DOWN)">
             <div class="icon-circle">
               <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
             </div>
@@ -66,7 +69,7 @@
        <div class="proposal-box--ranking-inner">
          <span class="icon icon-small icon-ranking" aria-hidden="true"></span>
          <span>Colocação nos resultados:</span>
-         <span>{{::vm.proposal.ranking_position}}º</span>
+         <span>{{vm.proposal.ranking_position}}º</span>
        </div>
      </div>
     </div>
@@ -78,11 +78,12 @@
             position: absolute;
             color: #fff;
             font-size: 24px;
+            line-height: 24px;
             z-index: 1000;
+            width: 100%
             top: 50%;
-            left: 50%;
-            margin-top: -17px;
-            margin-left: -75px;
+            left: 0;
+            margin-top: -12px;
         }
  
         .shadow {
...	...	@@ -23,6 +23,7 @@
23	23	getProposalById: getProposalById,
24	24	getProposalsByTopicId: getProposalsByTopicId,
25	25	createProposal: createProposal,
	26	+ voteProposal: voteProposal,
26	27	getEvents: getEvents,
27	28	subscribeToEvent: subscribeToEvent,
28	29	searchTopics: searchTopics,
...	...	@@ -172,6 +173,19 @@
172	173	}
173	174	}
174	175
	176	+ function voteProposal (proposal_id, params, cbSuccess, cbError){
	177	+ var url = service.apiArticles + proposal_id + '/vote';
	178	+ var paramsExtended = angular.extend({
	179	+ private_token: $rootScope.currentUser.private_token
	180	+ }, params);
	181	+
	182	+ UtilService.post(url, paramsExtended).then(function(response){
	183	+ cbSuccess(response);
	184	+ }).catch(function(error){
	185	+ cbError(error);
	186	+ });
	187	+ }
	188	+
175	189	function getEvents (community_id, params, cbSuccess, cbError) {
176	190	// Ex.: /api/v1/communities/19195/articles?categories_ids[]=' + cat_id + '&content_type=Event';
177	191	// Ex.: /api/v1/communities/' + community_id + '/articles?categories_ids[]=' + cat_id + '&content_type=Event';
...	...
...	...	@@ -9,11 +9,12 @@
9	9	function proposalBox() {
10	10
11	11	/** @ngInject */
12		- function ProposalBoxController($scope, $state, VOTE_STATUS, VOTE_OPTIONS, $log) {
	12	+ function ProposalBoxController($scope, $rootScope, $state, VOTE_STATUS, VOTE_OPTIONS, $log) {
13	13	$log.debug('ProposalBoxController');
14	14
15	15	var vm = this;
16	16	vm.$scope = $scope;
	17	+ vm.$rootScope = $rootScope;
17	18	vm.$state = $state;
18	19	vm.VOTE_STATUS = VOTE_STATUS;
19	20	vm.VOTE_OPTIONS = VOTE_OPTIONS;
...	...	@@ -30,12 +31,26 @@
30	31	vm.canVote = vm.canVote \|\| false;
31	32	vm.focus = vm.focus \|\| false;
32	33	vm.STATE = null;
	34	+ vm.errorOnSkip = false;
33	35	};
34	36
35	37	ProposalBoxController.prototype.addListeners = function () {
36	38	var vm = this;
37	39
38		- vm.$scope.$on('proposal-box:vote-response', function(e, data){
	40	+ vm.$scope.$on('proposal-box:proposal-loaded', function(event, data){
	41	+ if(data.success){
	42	+ vm.STATE = null;
	43	+ }
	44	+
	45	+ if(data.error){
	46	+ vm.errorOnSkip = true;
	47	+ }
	48	+ });
	49	+ vm.$scope.$on('proposal-box:vote-response', function(event, data){
	50	+ vm.$log.debug('proposal-box:vote-response');
	51	+ vm.$log.debug('event', event);
	52	+ vm.$log.debug('data', data);
	53	+
39	54	if(data.success) {
40	55	vm.STATE = vm.VOTE_STATUS.SUCCESS;
41	56	}
...	...	@@ -59,15 +74,19 @@
59	74	});
60	75	};
61	76
62		- ProposalBoxController.prototype.voteUp = function () {
	77	+ ProposalBoxController.prototype.vote = function (value) {
63	78	var vm = this;
64	79
65		- vm.STATE = vm.VOTE_STATUS.LOADING;
66		- vm.$scope.$emit('proposal-box:vote', {
67		- OPTION: vm.VOTE_OPTIONS.UP,
68		- proposal_id: vm.proposal.id
69		- });
70		- vm.$log.debug('Sending vote');
	80	+ if(vm.$rootScope.currentUser){
	81	+ vm.$scope.$emit('proposal-box:vote', {
	82	+ OPTION: value,
	83	+ proposal_id: vm.proposal.id
	84	+ });
	85	+ vm.$log.debug('Sending vote', value);
	86	+ }else{
	87	+ vm.$log.info('Must be logged in...');
	88	+
	89	+ }
71	90	};
72	91
73	92	ProposalBoxController.prototype.voteDown = function () {
...	...	@@ -84,6 +103,7 @@
84	103	ProposalBoxController.prototype.skip = function () {
85	104	var vm = this;
86	105
	106	+ vm.errorOnSkip = false;
87	107	vm.STATE = vm.VOTE_STATUS.LOADING;
88	108	vm.$scope.$emit('proposal-box:vote', {
89	109	OPTION: vm.VOTE_OPTIONS.SKIP,
...	...
...	...	@@ -6,18 +6,21 @@
6	6	<div ng-show="vm.STATE === vm.VOTE_STATUS.LOADING">
7	7	<div class="proposal-loading">
8	8	<div class="shadow"></div>
9		- <div class="text">
	9	+ <div class="text text-center" ng-show="!vm.errorOnSkip">
10	10	Carregando...
11	11	</div>
	12	+ <div class="text" ng-show="vm.errorOnSkip">
	13	+ Erro ao carregar nova proposta.
	14	+ </div>
12	15	</div>
13	16	</div>
14	17	<div class="proposal-box--top">
15		- <div class="proposal-box--theme color-theme-bg-complementar-2">{{::vm.category.name}}</div>
16		- <div class="proposal-box--program color-theme-bg">{{::vm.topic.title}}</div>
	18	+ <div class="proposal-box--theme color-theme-bg-complementar-2">{{vm.category.name}}</div>
	19	+ <div class="proposal-box--program color-theme-bg">{{vm.topic.title}}</div>
17	20	</div>
18	21	<div class="proposal-box--middle">
19	22	<div class="proposal-box--content">
20		- <div class="proposal-box--content-inner">{{::vm.proposal.abstract}}</div>
	23	+ <div class="proposal-box--content-inner">{{vm.proposal.abstract}}</div>
21	24	</div>
22	25	<div ng-hide="vm.canVote" class="proposal-box--join">
23	26	<button class="btn btn-link color-theme-common-fg" ng-click="vm.showContent(vm.topic.slug)">
...	...	@@ -25,10 +28,10 @@
25	28	<span class="glyphicon glyphicon-menu-right color-theme-common-fg" aria-hidde="true"></span>
26	29	</button>
27	30	</div>
28		- <div ng-show="vm.canVote"class="proposal-box--actions text-center">
	31	+ <div ng-show="vm.canVote" class="proposal-box--actions text-center">
29	32	<div class="row">
30	33	<div class="col-xs-4">
31		- <div class="action vote_for" ng-click="vm.voteUp()">
	34	+ <div class="action vote_for" ng-click="vm.vote(vm.VOTE_OPTIONS.UP)">
32	35	<div class="icon-circle">
33	36	<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
34	37	</div>
...	...	@@ -44,7 +47,7 @@
44	47	</div>
45	48	</div>
46	49	<div class="col-xs-4">
47		- <div class="action vote_against" ng-click="vm.voteDown()">
	50	+ <div class="action vote_against" ng-click="vm.vote(vm.VOTE_OPTIONS.DOWN)">
48	51	<div class="icon-circle">
49	52	<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
50	53	</div>
...	...	@@ -66,7 +69,7 @@
66	69	<div class="proposal-box--ranking-inner">
67	70	<span class="icon icon-small icon-ranking" aria-hidden="true"></span>
68	71	<span>Colocação nos resultados:</span>
69		- <span>{{::vm.proposal.ranking_position}}º</span>
	72	+ <span>{{vm.proposal.ranking_position}}º</span>
70	73	</div>
71	74	</div>
72	75	</div>
...	...
...	...	@@ -78,11 +78,12 @@
78	78	position: absolute;
79	79	color: #fff;
80	80	font-size: 24px;
	81	+ line-height: 24px;
81	82	z-index: 1000;
	83	+ width: 100%
82	84	top: 50%;
83		- left: 50%;
84		- margin-top: -17px;
85		- margin-left: -75px;
	85	+ left: 0;
	86	+ margin-top: -12px;
86	87	}
87	88
88	89	.shadow {
...	...