Small improvements into event-list component

Leonardo Merlin
1 parent 8842e145
Showing 7 changed files with 118 additions and 75 deletions Show diff stats
src/app/components/article-service/article.service.js
src/app/components/auth/auth.service.js
src/app/components/dialoga-service/dialoga.service.js
src/app/components/event-list/event-list.directive.js
src/app/components/event-list/event-list.html
src/app/components/event-list/event-list.scss
src/app/pages/inicio/inicio.controller.js
@@ -178,7 +178,7 @@
       });
     }
-    function getEvents (community_id, params, cbSuccess, cbError) {
+    function getEvents (community_id, params) {
       // 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';
@@ -188,11 +188,9 @@
         'content_type':'Event'
       }, params);
-      UtilService.get(url, {params: paramsExtended}).then(function(data){
-        _pipeIsInThePast(data);
-        cbSuccess(data.articles);
-      }).catch(function(error){
-        cbError(error);
+      return UtilService.get(url, {params: paramsExtended}).then(function(data){
+        _pipeRemoveOldEvents(data);
+        return data;
       });
     }
@@ -210,21 +208,11 @@
     //   });
     // }
-    function subscribeToEvent (event_id, params, cbSuccess, cbError) {
+    function subscribeToEvent (event_id) {
+      var url = service.apiArticles + event_id + '/follow';
+      var encodedParams = 'private_token=' + $rootScope.currentUser.private_token;
-      if(!$rootScope.currentUser){
-        cbError({message: 'Usuário não logado.'});
-
-      }else{
-        var url = service.apiArticles + event_id + '/follow';
-        var encodedParams = 'private_token=' + $rootScope.currentUser.private_token;
-
-        UtilService.post(url, encodedParams).then(function(response){
-          cbSuccess(response);
-        }).catch(function(error){
-          cbError(error);
-        });
-      }
+      return UtilService.post(url, encodedParams);
     }
     function searchTopics (params, cbSuccess, cbError) {
@@ -282,14 +270,17 @@
       });
     }
-    function _pipeIsInThePast(data){
+    function _pipeRemoveOldEvents(data){
       if(!data.articles && data.article){
         data.articles = [data.article];
+        data.article = null;
       }
+
       var now = (new Date()).getTime();
       var eventDate = null;
       var events = data.articles;
+      var results = [];
       for (var i = events.length - 1; i >= 0; i--) {
         var event = events[i];
@@ -297,10 +288,16 @@
           eventDate = new Date(event.end_date);
         }
-        if(eventDate.getTime() < now){
-          event.isOld = true;
+        // if(eventDate.getTime() < now){
+        //   event.isOld = true;
+        // }
+        if(eventDate.getTime() >= now){
+          results.push(event);
         }
       }
+
+      data.articles = results;
     }
+
   }
 })();
@@ -53,7 +53,7 @@
     }
     function activate (code) {
-      var url = '/api/v1/activate';
+      var url = PATH.host +'/api/v1/activate';
       // var data = {
       //   private_token: API.token,
       //   activation_code: code
@@ -77,7 +77,7 @@
     }
     function changePassword (code, newPassword, newPasswordConfirmation){
-      var url = '/api/v1/new_password';
+      var url = PATH.host +'/api/v1/new_password';
       // var data = {
       //   code: code,
       //   password: newPassword,
@@ -103,7 +103,7 @@
     }
     function forgotPassword (data){
-      var url = 'http://hom.login.dialoga.gov.br/api/v1/forgot_password';
+      var url = PATH.host +'/api/v1/forgot_password';
       var encodedData = ([
         'value=' + data.login,
         'captcha_text=' + data.captcha_text,
@@ -129,8 +129,7 @@
     }
     function login (credentials) {
-      var hostProd = 'http://login.dialoga.gov.br';
-      var url = hostProd + '/api/v1/login';
+      var url = PATH.host + '/api/v1/login';
       var encodedData = 'login=' + credentials.username + '&password=' + credentials.password;
       return $http
@@ -205,10 +205,10 @@
       }
     }
-    function getEvents (params, cbSuccess, cbError) {
+    function getEvents (params) {
       var paramsExtended = angular.extend({}, params);
-      ArticleService.getEvents(API.communityId, paramsExtended, cbSuccess, cbError);
+      return ArticleService.getEvents(API.communityId, paramsExtended);
     }
     // TODO: implement
@@ -23,48 +23,62 @@
       // vm.attachListeners();
     }
-    EventListController.prototype.init = function () {
+    EventListController.prototype.init = function() {
       var vm = this;
-      if(!vm.events){
+      if (!vm.events) {
         throw { name: 'NotDefined', message: 'The attribute "events" is undefined.'};
       }
-      if(!vm.isCollapsed){
+      if (!vm.isCollapsed) {
         vm.isCollapsed = true;
       }
     };
-    EventListController.prototype.toggleView = function () {
+    EventListController.prototype.toggleView = function() {
       var vm = this;
       vm.isCollapsed = !vm.isCollapsed;
     };
-    EventListController.prototype.subscribe = function (event) {
+    EventListController.prototype.subscribe = function(event) {
       var vm = this;
-      if(event.isOld){
-        vm.$log.debug('Event already happened. Abort.');
-        return;
-      }
-
       var event_id = event.id;
-      vm.$log.debug('event_id', event_id);
-      if(!vm.$rootScope.currentUser){
+      // must be authenticated
+      if (!vm.$rootScope.currentUser) {
         vm.$log.info('User is not logged in. Redirect to Auth page.');
-        vm.$state.go('entrar',{
+        vm.$state.go('entrar', {
           redirect_uri: 'state=inicio&task=subscribe&event_id=' + event_id
-        },{
+        }, {
           location: true
         });
-      }else{
-        vm.ArticleService.subscribeToEvent(event_id, {}, function(response){
-          vm.$log.debug('response', response);
-        }, function(error){
-          vm.$log.debug('error', error);
-        });
+
+        return;
       }
+
+      // do the subscription
+      event._loading = true;
+      vm.ArticleService.subscribeToEvent(event_id).then(function (data) {
+        vm.$log.debug('success', data);
+
+        if(data.success === true){
+          // subscribed with success
+          event.already_follow = true;
+        }
+
+        if(data.success === false && data.already_follow === true){
+          // already subscribed
+          event.already_follow = true;
+        }
+      }, function (data) {
+        vm.$log.debug('error', data);
+      }, function (data){
+        vm.$log.debug('update', data);
+      }).finally(function(data){
+        vm.$log.debug('finally', data);
+        event._loading = false;
+      });
     };
     var directive = {
@@ -40,11 +40,8 @@
               </span>
             </div>
             <div class="col-xs-12 col-sm-4 col-md-5 vcenter">
-              <span class="description">{{::event.title.split('-')[0]}}</span>
+              <span class="description">{{::event.setting.presenter}}</span>
             </div>
-            <!-- <div class="col-xs-12 col-sm-4 col-md-3 text-center vcenter">
-              <span class="theme">{{::event.categories[0].name}}</span>
-            </div> -->
             <div class="col-xs-12 col-sm-4 col-md-4 text-right vcenter" style="padding-right: 20px;">
               <div class="row">
                 <div class="col-xs-6 text-right">
@@ -55,10 +52,19 @@
                   </div>
                 </div>
                 <div class="col-xs-6">
-                  <button type="button" class="btn color-theme-common-bg btn-disabled" disabled ng-click="vm.subscribe(event)">
-                    Inscreva-se
-                    <span class="sr-only">no bate-papo com (ministro) no dia {event.start_date | date : "dd/MM/yyyy"}} as {{event.start_date | date : "HH:mm"}} horas</span>
-                  </button>
+                  <div ng-show="!event.already_follow">
+                    <button type="button" class="btn btn-subscribe" ng-click="vm.subscribe(event)">
+                      Inscreva-se
+                      <span class="sr-only">no bate-papo com (ministro) no dia {event.start_date | date : "dd/MM/yyyy"}} as {{event.start_date | date : "HH:mm"}} horas</span>
+                    </button>
+                  </div>
+                  <div ng-show="event.already_follow">
+                    <button type="button" class="btn btn-subscribed disabled" disabled="disabled">
+                      <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
+                      Inscrito
+                      <span class="sr-only">Você já está inscrito neste evento.</span>
+                    </button>
+                  </div>
                 </div>
               </div>
             </div>
@@ -10,6 +10,7 @@
     }
     .event-list--panel {
+        color: #484848;
         width: 100%;
         height: 240px;
         margin: 8px 0;
@@ -24,9 +25,22 @@
         }
         .btn {
-            color: #e1e1e1;
             text-transform: uppercase;
-            font-weight: bold;
+            // font-weight: bold;
+
+            &.btn-subscribe {
+                color: #fff;
+                background-color: $defaultblue;
+            }
+
+            &.btn-subscribed {
+                color: $defaultblue;
+                border: 1px solid $defaultblue;
+
+                .glyphicon {
+                    color: #4eca74;
+                }
+            }
         }
         .row-level-1 {
@@ -45,6 +59,20 @@
             height: auto;
             overflow: visible;
         }
+
+
+        .date-wrapper {margin-left: 16px; }
+        .time-wrapper {margin-left: 22px; }
+        // .description {margin-left: 22px; }
+
+        .date-wrapper .glyphicon,
+        .time-wrapper .glyphicon {
+            color: $defaultblue;
+            font-size: 18px;
+            font-size: 1.8rem;
+            position: relative;
+            top: 3px;
+        }
     }
     &--table{
@@ -110,12 +138,6 @@
         }
     }
-    .event-list--panel {
-        .date-wrapper {margin-left: 16px; }
-        .time-wrapper {margin-left: 22px; }
-        // .description {margin-left: 22px; }
-    }
-
     .event-tab--icon {
         font-size: 25px;
     }
@@ -76,13 +76,18 @@
     // Load event list
     vm.loadingEvents = true;
-    vm.DialogaService.getEvents({}, function(events) {
-      vm.events = events;
-      vm.loadingEvents = false;
+    vm.DialogaService.getEvents().then(function(data) {
+      vm.$log.debug('getEvents.success', data);
+      vm.events = data.articles;
+
     }, function(error) {
-      vm.$log.error('Error on getEvents.', error);
-      vm.loadingEvents = false;
+      vm.$log.debug('Error on getEvents.', error);
       vm.eventsError = error;
+    }, function(data) {
+      vm.$log.debug('{UPDATE}', data);
+    }).finally(function(data){
+      vm.$log.debug('{FINALLY}', data);
+      vm.loadingEvents = false;
     });
     function _loadAfterHome () {
@@ -167,10 +172,10 @@
     // scroll to result grid
     var $searchResult = angular.element('#search-result');
-    if($searchResult && $searchResult.length > 0){
+    if ($searchResult && $searchResult.length > 0) {
       angular.element('body').animate({scrollTop: $searchResult.offset().top}, 'fast');
       vm.filtredPrograms = vm.getFiltredPrograms();
-    }else{
+    }else {
       vm.$log.warn('#search-result element not found.');
     }
   };
@@ -251,7 +256,7 @@
     return output;
   };
-  InicioPageController.prototype._filterByCategory = function (input, category) {
+  InicioPageController.prototype._filterByCategory = function(input, category) {
     var vm = this;
     input = input || [];
@@ -265,7 +270,7 @@
     for (var i = 0; i < input.length; i++) {
       var program = input[i];
-      if(!program.categories || program.categories.length === 0){
+      if (!program.categories || program.categories.length === 0) {
         vm.$log.warn('Program without theme (category)', program.slug);
         continue;
       }
	@@ -205,10 +205,10 @@		@@ -205,10 +205,10 @@
205	}	205	}
206	}	206	}
207		207
208	- function getEvents (params, cbSuccess, cbError) {	208	+ function getEvents (params) {
209	var paramsExtended = angular.extend({}, params);	209	var paramsExtended = angular.extend({}, params);
210		210
211	- ArticleService.getEvents(API.communityId, paramsExtended, cbSuccess, cbError);	211	+ return ArticleService.getEvents(API.communityId, paramsExtended);
212	}	212	}
213		213
214	// TODO: implement	214	// TODO: implement