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,6 +23,7 @@
23	getProposalById: getProposalById,	23	getProposalById: getProposalById,
24	getProposalsByTopicId: getProposalsByTopicId,	24	getProposalsByTopicId: getProposalsByTopicId,
25	createProposal: createProposal,	25	createProposal: createProposal,
		26	+ voteProposal: voteProposal,
26	getEvents: getEvents,	27	getEvents: getEvents,
27	subscribeToEvent: subscribeToEvent,	28	subscribeToEvent: subscribeToEvent,
28	searchTopics: searchTopics,	29	searchTopics: searchTopics,
	@@ -172,6 +173,19 @@		@@ -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	function getEvents (community_id, params, cbSuccess, cbError) {	189	function getEvents (community_id, params, cbSuccess, cbError) {
176	// Ex.: /api/v1/communities/19195/articles?categories_ids[]=' + cat_id + '&content_type=Event';	190	// Ex.: /api/v1/communities/19195/articles?categories_ids[]=' + cat_id + '&content_type=Event';
177	// Ex.: /api/v1/communities/' + community_id + '/articles?categories_ids[]=' + cat_id + '&content_type=Event';	191	// Ex.: /api/v1/communities/' + community_id + '/articles?categories_ids[]=' + cat_id + '&content_type=Event';