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
src/app/components/event-list/event-list.directive.js
| ... | ... | @@ -19,18 +19,24 @@ |
| 19 | 19 | vm.$log = $log; |
| 20 | 20 | |
| 21 | 21 | vm.init(); |
| 22 | + // vm.attachListeners(); | |
| 22 | 23 | } |
| 23 | 24 | |
| 24 | 25 | EventListController.prototype.init = function () { |
| 25 | 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 | 37 | EventListController.prototype.toggleView = function () { |
| 32 | 38 | var vm = this; |
| 33 | - vm.isListVisible = !vm.isListVisible; | |
| 39 | + vm.isCollapsed = !vm.isCollapsed; | |
| 34 | 40 | }; |
| 35 | 41 | |
| 36 | 42 | EventListController.prototype.subscribe = function (data) { |
| ... | ... | @@ -42,8 +48,12 @@ |
| 42 | 48 | var directive = { |
| 43 | 49 | restrict: 'E', |
| 44 | 50 | templateUrl: 'app/components/event-list/event-list.html', |
| 51 | + scope: { | |
| 52 | + events: '=', | |
| 53 | + isCollapsed: '=' | |
| 54 | + }, | |
| 45 | 55 | controller: EventListController, |
| 46 | - controllerAs: 'eventListCtrl', | |
| 56 | + controllerAs: 'vm', | |
| 47 | 57 | bindToController: true |
| 48 | 58 | }; |
| 49 | 59 | ... | ... |
src/app/components/event-list/event-list.html
| ... | ... | @@ -3,7 +3,7 @@ |
| 3 | 3 | <section class="color-theme-common-bg"> |
| 4 | 4 | |
| 5 | 5 | <div class="container"> |
| 6 | - <div class="event-bar--trigger"> | |
| 6 | + <div class="event-bar--trigger" ng-click="vm.toggleView()"> | |
| 7 | 7 | <div class="event-bar--trigger-top"> |
| 8 | 8 | <div class="col-sm-6"> |
| 9 | 9 | <h1 class="title"> |
| ... | ... | @@ -12,19 +12,20 @@ |
| 12 | 12 | </h1> |
| 13 | 13 | </div> |
| 14 | 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 | 16 | <span><b>18</b> bate papos <b>agendados</b></span> |
| 17 | 17 | <span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span> |
| 18 | 18 | </h2> |
| 19 | 19 | </div> |
| 20 | 20 | </div> |
| 21 | + <div class="clearfix"></div> | |
| 21 | 22 | </div> |
| 22 | 23 | </div> |
| 23 | 24 | </section> |
| 24 | 25 | |
| 25 | 26 | <section class="section-table"> |
| 26 | 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 | 29 | <div class="event-tab--header"> |
| 29 | 30 | <div class="event-tab--icon"> |
| 30 | 31 | <span class="glyphicon glyphicon-calendar" aria-hidden="true"></span> |
| ... | ... | @@ -38,81 +39,26 @@ |
| 38 | 39 | </button> |
| 39 | 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 | 43 | <div class="event-list--table-wrapper"> |
| 43 | 44 | <div class="table-responsive"> |
| 44 | 45 | <table class="table event-list--table"> |
| 45 | 46 | <!-- <thead></thead> --> |
| 46 | 47 | <tbody> |
| 47 | - <tr> | |
| 48 | + <tr ng-repeat="event in vm.events"> | |
| 48 | 49 | <td> |
| 49 | - <span class="date">dd/mm/aaaa</span> | |
| 50 | + <span class="date">{{event.start_date | date : "dd/MM/yyyy"}}</span> | |
| 50 | 51 | <span class="separator">-</span> |
| 51 | - <span class="time">HH:mm</span> | |
| 52 | + <span class="time">{{event.start_date | date : "HH:mm"}}</span> | |
| 52 | 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 | 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 | 58 | </button> |
| 58 | 59 | <span class="subscribers">123 inscritos</span> |
| 59 | 60 | </td> |
| 60 | 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 | 62 | </tbody> |
| 117 | 63 | <!-- <tfooter></tfooter> --> |
| 118 | 64 | </table> | ... | ... |
src/app/components/event-list/event-list.scss
| ... | ... | @@ -17,8 +17,8 @@ |
| 17 | 17 | transition: .3s linear all; |
| 18 | 18 | |
| 19 | 19 | &.ng-hide { |
| 20 | - height: 0px; | |
| 21 | - line-height: 0px; | |
| 20 | + height: 0; | |
| 21 | + line-height: 0; | |
| 22 | 22 | } |
| 23 | 23 | |
| 24 | 24 | // .event-list--header { |
| ... | ... | @@ -72,6 +72,7 @@ |
| 72 | 72 | |
| 73 | 73 | .event-bar--trigger { |
| 74 | 74 | color: #fff; |
| 75 | + cursor: pointer; | |
| 75 | 76 | |
| 76 | 77 | h1 { |
| 77 | 78 | margin-bottom: 20px; | ... | ... |
src/app/pages/inicio/inicio.controller.js
| ... | ... | @@ -60,8 +60,8 @@ |
| 60 | 60 | }); |
| 61 | 61 | |
| 62 | 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 | 65 | vm.loadingEvents = false; |
| 66 | 66 | }, function(error) { |
| 67 | 67 | vm.$log.error('Error on getEvents.', error); | ... | ... |
src/app/pages/inicio/inicio.html
| ... | ... | @@ -23,7 +23,7 @@ |
| 23 | 23 | |
| 24 | 24 | <section class="section-event"> |
| 25 | 25 | <div ng-if="pageInicio.events"> |
| 26 | - <event-list events="[]"></event-list> | |
| 26 | + <event-list events="pageInicio.events"></event-list> | |
| 27 | 27 | </div> |
| 28 | 28 | <div ng-if="!pageInicio.events && pageInicio.loadingEvents" class="container"> |
| 29 | 29 | <div class="row"> | ... | ... |