Commit a0b137a9af51642e7b9b852f7e8df4b747283953
1 parent
670ba360
Exists in
master
and in
8 other branches
Small improvements at event-list directive
Showing
6 changed files
with
32 additions
and
75 deletions
Show diff stats
src/app/components/article-service/article.service.js
| @@ -138,7 +138,7 @@ | @@ -138,7 +138,7 @@ | ||
| 138 | }, params); | 138 | }, params); |
| 139 | 139 | ||
| 140 | UtilService.get(url, {params: paramsExtended}).then(function(data){ | 140 | UtilService.get(url, {params: paramsExtended}).then(function(data){ |
| 141 | - cbSuccess(data); | 141 | + cbSuccess(data.articles); |
| 142 | }).catch(function(error){ | 142 | }).catch(function(error){ |
| 143 | cbError(error); | 143 | cbError(error); |
| 144 | }); | 144 | }); |
src/app/components/event-list/event-list.directive.js
| @@ -19,18 +19,24 @@ | @@ -19,18 +19,24 @@ | ||
| 19 | vm.$log = $log; | 19 | vm.$log = $log; |
| 20 | 20 | ||
| 21 | vm.init(); | 21 | vm.init(); |
| 22 | + // vm.attachListeners(); | ||
| 22 | } | 23 | } |
| 23 | 24 | ||
| 24 | EventListController.prototype.init = function () { | 25 | EventListController.prototype.init = function () { |
| 25 | var vm = this; | 26 | var vm = this; |
| 26 | 27 | ||
| 27 | - vm.eventList = []; | ||
| 28 | - vm.isListVisible = false; | 28 | + if(!vm.events){ |
| 29 | + throw { name: 'NotDefined', message: 'The attribute "events" is undefined.'}; | ||
| 30 | + } | ||
| 31 | + | ||
| 32 | + if(!vm.isCollapsed){ | ||
| 33 | + vm.isCollapsed = true; | ||
| 34 | + } | ||
| 29 | }; | 35 | }; |
| 30 | 36 | ||
| 31 | EventListController.prototype.toggleView = function () { | 37 | EventListController.prototype.toggleView = function () { |
| 32 | var vm = this; | 38 | var vm = this; |
| 33 | - vm.isListVisible = !vm.isListVisible; | 39 | + vm.isCollapsed = !vm.isCollapsed; |
| 34 | }; | 40 | }; |
| 35 | 41 | ||
| 36 | EventListController.prototype.subscribe = function (data) { | 42 | EventListController.prototype.subscribe = function (data) { |
| @@ -42,8 +48,12 @@ | @@ -42,8 +48,12 @@ | ||
| 42 | var directive = { | 48 | var directive = { |
| 43 | restrict: 'E', | 49 | restrict: 'E', |
| 44 | templateUrl: 'app/components/event-list/event-list.html', | 50 | templateUrl: 'app/components/event-list/event-list.html', |
| 51 | + scope: { | ||
| 52 | + events: '=', | ||
| 53 | + isCollapsed: '=' | ||
| 54 | + }, | ||
| 45 | controller: EventListController, | 55 | controller: EventListController, |
| 46 | - controllerAs: 'eventListCtrl', | 56 | + controllerAs: 'vm', |
| 47 | bindToController: true | 57 | bindToController: true |
| 48 | }; | 58 | }; |
| 49 | 59 |
src/app/components/event-list/event-list.html
| @@ -3,7 +3,7 @@ | @@ -3,7 +3,7 @@ | ||
| 3 | <section class="color-theme-common-bg"> | 3 | <section class="color-theme-common-bg"> |
| 4 | 4 | ||
| 5 | <div class="container"> | 5 | <div class="container"> |
| 6 | - <div class="event-bar--trigger"> | 6 | + <div class="event-bar--trigger" ng-click="vm.toggleView()"> |
| 7 | <div class="event-bar--trigger-top"> | 7 | <div class="event-bar--trigger-top"> |
| 8 | <div class="col-sm-6"> | 8 | <div class="col-sm-6"> |
| 9 | <h1 class="title"> | 9 | <h1 class="title"> |
| @@ -12,19 +12,20 @@ | @@ -12,19 +12,20 @@ | ||
| 12 | </h1> | 12 | </h1> |
| 13 | </div> | 13 | </div> |
| 14 | <div class="col-sm-6"> | 14 | <div class="col-sm-6"> |
| 15 | - <h2 class="event-bar--trigger-toggle text-right" ng-click="eventListCtrl.toggleView()"> | 15 | + <h2 class="event-bar--trigger-toggle text-right"> |
| 16 | <span><b>18</b> bate papos <b>agendados</b></span> | 16 | <span><b>18</b> bate papos <b>agendados</b></span> |
| 17 | <span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span> | 17 | <span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span> |
| 18 | </h2> | 18 | </h2> |
| 19 | </div> | 19 | </div> |
| 20 | </div> | 20 | </div> |
| 21 | + <div class="clearfix"></div> | ||
| 21 | </div> | 22 | </div> |
| 22 | </div> | 23 | </div> |
| 23 | </section> | 24 | </section> |
| 24 | 25 | ||
| 25 | <section class="section-table"> | 26 | <section class="section-table"> |
| 26 | <div class="container"> | 27 | <div class="container"> |
| 27 | - <!-- <div class="event-tab--trigger" ng-show="!eventListCtrl.isListVisible" ng-click="eventListCtrl.toggleView()"> | 28 | + <!-- <div class="event-tab--trigger" ng-show="vm.isCollapsed" ng-click="vm.toggleView()"> |
| 28 | <div class="event-tab--header"> | 29 | <div class="event-tab--header"> |
| 29 | <div class="event-tab--icon"> | 30 | <div class="event-tab--icon"> |
| 30 | <span class="glyphicon glyphicon-calendar" aria-hidden="true"></span> | 31 | <span class="glyphicon glyphicon-calendar" aria-hidden="true"></span> |
| @@ -38,81 +39,26 @@ | @@ -38,81 +39,26 @@ | ||
| 38 | </button> | 39 | </button> |
| 39 | </div> --> | 40 | </div> --> |
| 40 | 41 | ||
| 41 | - <div class="event-list--panel ng-hide" ng-show="eventListCtrl.isListVisible"> | 42 | + <div class="event-list--panel ng-hide" ng-show="!vm.isCollapsed"> |
| 42 | <div class="event-list--table-wrapper"> | 43 | <div class="event-list--table-wrapper"> |
| 43 | <div class="table-responsive"> | 44 | <div class="table-responsive"> |
| 44 | <table class="table event-list--table"> | 45 | <table class="table event-list--table"> |
| 45 | <!-- <thead></thead> --> | 46 | <!-- <thead></thead> --> |
| 46 | <tbody> | 47 | <tbody> |
| 47 | - <tr> | 48 | + <tr ng-repeat="event in vm.events"> |
| 48 | <td> | 49 | <td> |
| 49 | - <span class="date">dd/mm/aaaa</span> | 50 | + <span class="date">{{event.start_date | date : "dd/MM/yyyy"}}</span> |
| 50 | <span class="separator">-</span> | 51 | <span class="separator">-</span> |
| 51 | - <span class="time">HH:mm</span> | 52 | + <span class="time">{{event.start_date | date : "HH:mm"}}</span> |
| 52 | <span class="separator">-</span> | 53 | <span class="separator">-</span> |
| 53 | - <span class="description">Mais médicos, Segurança Nacional, SAMU</span> | ||
| 54 | - <button type="button" class="btn color-theme-common-bg" ng-click="eventListCtrl.subscribe('EVENT_ID')"> | 54 | + <span class="description">[DESCRIÇÃO]</span> |
| 55 | + <button type="button" class="btn color-theme-common-bg" ng-click="vm.subscribe('EVENT_ID')"> | ||
| 55 | Inscreva-se | 56 | Inscreva-se |
| 56 | - <span class="sr-only">no bate-papo com (ministro) no dia (date) as (hh:mm) horas</span> | 57 | + <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> |
| 57 | </button> | 58 | </button> |
| 58 | <span class="subscribers">123 inscritos</span> | 59 | <span class="subscribers">123 inscritos</span> |
| 59 | </td> | 60 | </td> |
| 60 | </tr> | 61 | </tr> |
| 61 | - <tr> | ||
| 62 | - <td> | ||
| 63 | - <span class="date">dd/mm/aaaa</span> | ||
| 64 | - <span class="separator">-</span> | ||
| 65 | - <span class="time">HH:mm</span> | ||
| 66 | - <span class="separator">-</span> | ||
| 67 | - <span class="description">Mais médicos, Segurança Nacional, SAMU</span> | ||
| 68 | - <button type="button" class="btn color-theme-common-bg">Inscreva-se</button> | ||
| 69 | - <span class="subscribers">123 inscritos</span> | ||
| 70 | - </td> | ||
| 71 | - </tr> | ||
| 72 | - <tr> | ||
| 73 | - <td> | ||
| 74 | - <span class="date">dd/mm/aaaa</span> | ||
| 75 | - <span class="separator">-</span> | ||
| 76 | - <span class="time">HH:mm</span> | ||
| 77 | - <span class="separator">-</span> | ||
| 78 | - <span class="description">Mais médicos, Segurança Nacional, SAMU</span> | ||
| 79 | - <button type="button" class="btn color-theme-common-bg">Inscreva-se</button> | ||
| 80 | - <span class="subscribers">123 inscritos</span> | ||
| 81 | - </td> | ||
| 82 | - </tr> | ||
| 83 | - <tr> | ||
| 84 | - <td> | ||
| 85 | - <span class="date">dd/mm/aaaa</span> | ||
| 86 | - <span class="separator">-</span> | ||
| 87 | - <span class="time">HH:mm</span> | ||
| 88 | - <span class="separator">-</span> | ||
| 89 | - <span class="description">Mais médicos, Segurança Nacional, SAMU</span> | ||
| 90 | - <button type="button" class="btn color-theme-common-bg">Inscreva-se</button> | ||
| 91 | - <span class="subscribers">123 inscritos</span> | ||
| 92 | - </td> | ||
| 93 | - </tr> | ||
| 94 | - <tr> | ||
| 95 | - <td> | ||
| 96 | - <span class="date">dd/mm/aaaa</span> | ||
| 97 | - <span class="separator">-</span> | ||
| 98 | - <span class="time">HH:mm</span> | ||
| 99 | - <span class="separator">-</span> | ||
| 100 | - <span class="description">Mais médicos, Segurança Nacional, SAMU</span> | ||
| 101 | - <button type="button" class="btn color-theme-common-bg">Inscreva-se</button> | ||
| 102 | - <span class="subscribers">123 inscritos</span> | ||
| 103 | - </td> | ||
| 104 | - </tr> | ||
| 105 | - <tr> | ||
| 106 | - <td> | ||
| 107 | - <span class="date">dd/mm/aaaa</span> | ||
| 108 | - <span class="separator">-</span> | ||
| 109 | - <span class="time">HH:mm</span> | ||
| 110 | - <span class="separator">-</span> | ||
| 111 | - <span class="description">Mais médicos, Segurança Nacional, SAMU</span> | ||
| 112 | - <button type="button" class="btn color-theme-common-bg">Inscreva-se</button> | ||
| 113 | - <span class="subscribers">123 inscritos</span> | ||
| 114 | - </td> | ||
| 115 | - </tr> | ||
| 116 | </tbody> | 62 | </tbody> |
| 117 | <!-- <tfooter></tfooter> --> | 63 | <!-- <tfooter></tfooter> --> |
| 118 | </table> | 64 | </table> |
src/app/components/event-list/event-list.scss
| @@ -17,8 +17,8 @@ | @@ -17,8 +17,8 @@ | ||
| 17 | transition: .3s linear all; | 17 | transition: .3s linear all; |
| 18 | 18 | ||
| 19 | &.ng-hide { | 19 | &.ng-hide { |
| 20 | - height: 0px; | ||
| 21 | - line-height: 0px; | 20 | + height: 0; |
| 21 | + line-height: 0; | ||
| 22 | } | 22 | } |
| 23 | 23 | ||
| 24 | // .event-list--header { | 24 | // .event-list--header { |
| @@ -72,6 +72,7 @@ | @@ -72,6 +72,7 @@ | ||
| 72 | 72 | ||
| 73 | .event-bar--trigger { | 73 | .event-bar--trigger { |
| 74 | color: #fff; | 74 | color: #fff; |
| 75 | + cursor: pointer; | ||
| 75 | 76 | ||
| 76 | h1 { | 77 | h1 { |
| 77 | margin-bottom: 20px; | 78 | margin-bottom: 20px; |
src/app/pages/inicio/inicio.controller.js
| @@ -60,8 +60,8 @@ | @@ -60,8 +60,8 @@ | ||
| 60 | }); | 60 | }); |
| 61 | 61 | ||
| 62 | // Load event list | 62 | // Load event list |
| 63 | - vm.DialogaService.getEvents({}, function(data) { | ||
| 64 | - vm.events = data; | 63 | + vm.DialogaService.getEvents({}, function(events) { |
| 64 | + vm.events = events; | ||
| 65 | vm.loadingEvents = false; | 65 | vm.loadingEvents = false; |
| 66 | }, function(error) { | 66 | }, function(error) { |
| 67 | vm.$log.error('Error on getEvents.', error); | 67 | vm.$log.error('Error on getEvents.', error); |
src/app/pages/inicio/inicio.html
| @@ -23,7 +23,7 @@ | @@ -23,7 +23,7 @@ | ||
| 23 | 23 | ||
| 24 | <section class="section-event"> | 24 | <section class="section-event"> |
| 25 | <div ng-if="pageInicio.events"> | 25 | <div ng-if="pageInicio.events"> |
| 26 | - <event-list events="[]"></event-list> | 26 | + <event-list events="pageInicio.events"></event-list> |
| 27 | </div> | 27 | </div> |
| 28 | <div ng-if="!pageInicio.events && pageInicio.loadingEvents" class="container"> | 28 | <div ng-if="!pageInicio.events && pageInicio.loadingEvents" class="container"> |
| 29 | <div class="row"> | 29 | <div class="row"> |