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"> | ... | ... |