Commit a0b137a9af51642e7b9b852f7e8df4b747283953

Authored by Leonardo Merlin
1 parent 670ba360

Small improvements at event-list directive

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