Download as
Browse Code »

Commit c3e6490b64e19096f35dca81e9fbdcfac2df4e1c

Authored by Leonardo Merlin
2 parents 406a1e4f 8ed1ad5a
Exists in master and in 8 other branches css-list, feature-captcha, feature-proposal-vote, feature-respostas, production, rafael, staging, the_glorious_return_of_piwik

Merge branch 'program'

Showing 7 changed files with 213 additions and 56 deletions   Show diff stats
src/app/components/programa/programa.directive.js
  Diff comments   View file @c3e6490
... ... @@ -6,43 +6,58 @@
6 6 .directive('programaBox', programaBox);
7 7  
8 8 /** @ngInject */
9   - function programaBox($log) {
  9 + function programaBox() {
10 10  
11 11 /** @ngInject */
12   - function ProgramaController() {
  12 + function ProgramaController($log) {
13 13 $log.debug('ProgramaController');
14 14  
15 15 var vm = this;
  16 + vm.$log = $log;
16 17  
17   - $log.debug('this.programa', vm.programa);
18   - vm.program = vm.programa;
  18 + vm.init();
19 19 }
20 20  
  21 + ProgramaController.prototype.init = function () {
  22 +
  23 + };
  24 +
21 25 ProgramaController.prototype.getCategory = function () {
22   - // return this.program.categories[0];
23   - return 'category-object';
  26 + var vm = this;
  27 +
  28 + return vm.program.categories[0];
24 29 };
  30 +
25 31 ProgramaController.prototype.getCategoryName = function () {
26   - // return this.getCategory().name;
27   - return 'category-name';
  32 + var vm = this;
  33 +
  34 + return vm.getCategory().name;
28 35 };
29 36  
30 37 ProgramaController.prototype.getImageUrl = function () {
31   - return 'http://login.dialoga.gov.br/image_uploads/dialoga/0000/0053/requalif_redim.jpg';
  38 + var vm = this;
  39 +
  40 + return 'http://login.dialoga.gov.br/' + vm.program.image.url;
32 41 };
  42 +
33 43 ProgramaController.prototype.getImageAlt = function () {
34   - return 'TODO: descrição da imagem.';
  44 + var vm = this;
  45 +
  46 + vm.$log.warn('image is not accessible.');
  47 + return 'TODO: create image alt on server-side.';
35 48 };
36 49  
37 50 ProgramaController.prototype.showContent = function () {
38   - $log.debug('TODO: showContent()', this.program);
  51 + var vm = this;
  52 +
  53 + vm.$log.debug('TODO: showContent()', vm.program);
39 54 };
40 55  
41 56 var directive = {
42 57 restrict: 'E',
43 58 templateUrl: 'app/components/programa/programa.html',
44 59 scope: {
45   - programa: '=programa'
  60 + program: '='
46 61 },
47 62 controller: ProgramaController,
48 63 controllerAs: 'vm',
... ...
src/app/components/programa/programa.html
  Diff comments   View file @c3e6490
1   -<div class="programa-box" ng-if="vm.program" ng-click="vm.showContent()">
  1 +<div class="program-box" ng-if="vm.program" ng-click="vm.showContent()">
2 2 <div class="category">{{::vm.getCategoryName()}}</div>
3 3 <div class="image-wrapper">
4 4 <image class="img-responsive" ng-src="{{::vm.getImageUrl()}}" alt="{{::vm.getImageAlt()}}" />
5 5 </div>
  6 + <div class="program-title">{{::vm.program.title}}</div>
  7 + <div class="program-abstract" ng-bind-html="vm.program.abstract"></div>
6 8 </div>
... ...
src/app/components/programa/programa.scss
  Diff comments   View file @c3e6490
... ... @@ -3,15 +3,20 @@ $scale: 1.1;
3 3 $time: 0.3s;
4 4  
5 5 // sandbox
6   -.programa-box {
  6 +.program-box {
7 7 cursor: pointer;
8 8  
  9 + .category {
  10 + display: block;
  11 + height: 30px;
  12 + line-height: 30px;
  13 + }
  14 +
9 15 .image-wrapper {
10 16 position: relative;
11 17 // width: 100%;
12 18 // width: 370px;
13 19 // height: 170px;
14   - background-color: red;
15 20 overflow: hidden;
16 21 text-align: center;
17 22 }
... ...
src/app/components/programas/programas.directive.js
  Diff comments   View file @c3e6490
... ... @@ -3,62 +3,162 @@
3 3  
4 4 angular
5 5 .module('dialoga')
  6 + .filter('filterByCategory', filterByCategory)
  7 + .filter('filterByCriteria', filterByCriteria)
6 8 .directive('programaList', programaList);
7 9  
8 10 /** @ngInject */
9   - function programaList($log) {
  11 + function programaList() {
10 12  
11 13 /** @ngInject */
12   - function ProgramaListController() {
  14 + function ProgramaListController($scope, $log) {
13 15 $log.debug('ProgramaListController');
14 16  
  17 + // alias
15 18 var vm = this;
16   - vm.filter = false;
17   - vm.categories = [
18   - {
19   - name: 'Saúde',
20   - slug: 'saude'
21   - },
22   - {
23   - name: 'Educação',
24   - slug: 'educacao'
25   - }
  19 +
  20 + // dependencies
  21 + vm.$scope = $scope;
  22 + vm.$log = $log;
  23 +
  24 + // initialization
  25 + vm.init();
  26 + }
  27 +
  28 + ProgramaListController.prototype.init = function () {
  29 + var vm = this;
  30 +
  31 + vm.query = null;
  32 + vm.categoryFilter = null;
  33 + vm.orderCriteries = [
  34 + { label: 'Título', name: 'title' },
  35 + { label: 'Tema', name: 'category' },
  36 + { label: 'Mais participações', name: 'more_participants' }
26 37 ];
27 38  
28   - for (var i = vm.categories.length - 1; i >= 0; i--) {
29   - var category = vm.categories[i];
30   - category.iconClass = vm.getIconClasses(category);
  39 + if(!vm.article){
  40 + vm.$log.warn('no article to display. Tip: use a ng-if before use this directive');
  41 + return;
31 42 }
32   - }
33 43  
34   - ProgramaListController.prototype.getIconClasses = function (tema) {
35   - $log.debug('[TODO] getIconClasses of tema:', tema);
  44 + vm.categories = vm.article.categories;
  45 + vm.programs = vm.article.children;
  46 + vm.filtredProgramList = [];
  47 + };
  48 +
  49 + ProgramaListController.prototype.getIconClasses = function (category) {
  50 + var vm = this;
  51 +
  52 + vm.$log.debug('[TODO] getIconClasses of category:', category);
36 53 return 'glyphicon glyphicon-exclamation-sign';
37 54 };
38 55  
39   - ProgramaListController.prototype.filterByTema = function (tema) {
40   - this.filter = tema.slug;
41   - $log.debug('[TODO] Filterting by tema:', this.filter);
  56 + ProgramaListController.prototype.filterByCategory = function (category) {
  57 + var vm = this;
  58 +
  59 + if(category !== vm.categoryFilter){
  60 + // selected new filter
  61 + vm.categoryFilter = category;
  62 + }else{
  63 + // already selected. Unselect.
  64 + vm.showAll();
  65 + }
42 66 };
  67 +
43 68 ProgramaListController.prototype.showAll = function () {
44   - this.filter = null;
45   - $log.debug('[TODO] Filterting by tema:', this.filter);
  69 + var vm = this;
  70 +
  71 + vm.query = null;
  72 + vm.categoryFilter = null;
  73 + vm.$log.debug('[TODO] showAll, no filter? ', vm.categoryFilter);
46 74 };
47 75  
  76 + // function ProgramaListLinker (scope, element, attrs) {
  77 +
  78 + // scope.$watch('article', function(newValue, oldValue){
  79 + // if(!newValue){
  80 + // return;
  81 + // }
  82 + // scope.vm.categories = scope.vm.article.categories;
  83 + // scope.vm.programs = scope.vm.article.children;
  84 + // });
  85 + // }
  86 +
48 87 var directive = {
49 88 restrict: 'E',
50 89 templateUrl: 'app/components/programas/programas.html',
51 90 scope: {
52   - programas: '=programas',
53   - temas: '=temas'
  91 + article: '='
54 92 },
55 93 controller: ProgramaListController,
56 94 controllerAs: 'vm',
57   - bindToController: true
  95 + bindToController: true,
  96 + // link: ProgramaListLinker
58 97 };
59 98  
60 99  
61 100 return directive;
62 101 }
63 102  
  103 + function filterByCategory(){
  104 + return function (input, category){
  105 + input = input || [];
  106 +
  107 + if(!category){
  108 + // no filter
  109 + return input;
  110 + }
  111 +
  112 + var out = [];
  113 + for (var i = 0; i < input.length; i++) {
  114 + var program = input[i];
  115 + if(program.categories[0].slug === category.slug){
  116 + out.push(program);
  117 + }
  118 + }
  119 +
  120 + return out;
  121 + };
  122 + }
  123 +
  124 + /** @ngInject */
  125 + function filterByCriteria($filter, $log){
  126 + var orderBy = $filter('orderBy');
  127 +
  128 + return function (input, criteria, reverse){
  129 + input = input || [];
  130 + reverse = reverse || false;
  131 +
  132 + if( !criteria ){
  133 + return input;
  134 + }
  135 +
  136 + var out = [];
  137 + // for (var i = 0; i < input.length; i++) {
  138 + // var program = input[i];
  139 +
  140 + // // todo ordering
  141 + // out.push(program);
  142 + // }
  143 +
  144 + switch(criteria.name){
  145 + case 'title':
  146 + out = orderBy(input, 'title', reverse);
  147 + break;
  148 + case 'category':
  149 + out = orderBy(input, 'categories[0].name', reverse);
  150 + break;
  151 + case 'more_participants':
  152 + // break;
  153 + default:
  154 + $log.info('Criteria not handled yet: ', criteria);
  155 + out = input;
  156 + break;
  157 + }
  158 +
  159 + return out;
  160 + };
  161 + }
  162 +
  163 +
64 164 })();
... ...
src/app/components/programas/programas.html
  Diff comments   View file @c3e6490
... ... @@ -4,10 +4,15 @@
4 4 <aside class="navigation">
5 5 <h3 class="title"><b>Programas</b> por Tema</h3>
6 6 <div class="list-group category-list">
7   - <button type="button" class="list-group-item category-item" ng-repeat="tema in vm.categories" ng-click="vm.filterByTema(tema)">
8   - <span ng-class="[tema.iconClass]"></span>
9   - <span>{{::tema.name}}</span>
  7 + <button type="button" class="list-group-item category-item"
  8 + ng-repeat="category in vm.categories"
  9 + ng-class="{active: vm.categoryFilter.slug === category.slug}"
  10 + ng-click="vm.filterByCategory(category)">
  11 +
  12 + <span ng-class="[category.iconClass]"></span>
  13 + <span>{{::category.name}}</span>
10 14 <span class="glyphicon glyphicon-chevron-right pull-right"></span>
  15 +
11 16 </button>
12 17 </div>
13 18 </aside>
... ... @@ -18,15 +23,40 @@
18 23 <div class="program-list">
19 24 <div class="header">
20 25 <h2>Programas</h2>
21   - <button type="button" ng-click="vm.showAll()" class="btn btn-link">
  26 + <button type="button" class="btn btn-link" ng-click="vm.showAll()">
22 27 <span class="glyphicon glyphicon-chevron-right"></span> Ver todos os programas
23 28 </button>
24 29 </div>
25   - <div class="row">
26   - <programa-box programa="{}" class="col-sm-12 col-md-6"></programa-box>
27   - <programa-box programa="{}" class="col-sm-12 col-md-6"></programa-box>
28   - <programa-box programa="{}" class="col-sm-12 col-md-6"></programa-box>
29   - <programa-box programa="{}" class="col-sm-12 col-md-6"></programa-box>
  30 + <div>
  31 + <div class="col-sm-12">
  32 + <div class="form-inline">
  33 + <div class="form-group">
  34 + <label for="programListFilter" class="control-label sr-only">Filtrar programas:</label>
  35 + <input id="programListFilter" type="search" class="form-control" ng-model="vm.query" placeholder="Filtrar programas" aria-label="Filtrar programas" >
  36 +
  37 + <select class="form-control" ng-model="vm.categoryFilter" ng-options="category.name for category in vm.categories track by category.slug">
  38 + <option value="">-- Filtrar por tema --</option>
  39 + </select>
  40 +
  41 + <select class="form-control" ng-model="vm.orderCriteria" ng-options="orderCriteria.label for orderCriteria in vm.orderCriteries">
  42 + <option value="">-- Ordernar por: --</option>
  43 + </select>
  44 +
  45 + <div class="checkbox">
  46 + <label>
  47 + <input type="checkbox" ng-model="orderReverse"> Reverso
  48 + </label>
  49 + </div>
  50 + </div>
  51 + </div>
  52 + </div>
  53 + <div ng-repeat="program in vm.programs | filterByCategory:vm.categoryFilter | filterByCriteria:vm.orderCriteria:orderReverse | filter:vm.query as results">
  54 + <programa-box program="program" class="col-sm-12 col-md-6"></programa-box>
  55 + <div ng-if="$odd" class="clearfix"></div>
  56 + </div>
  57 + <div class="animate-repeat" ng-if="results.length == 0">
  58 + Nenhum programa encontrado.
  59 + </div>
30 60 </div>
31 61 </div>
32 62 </div>
... ...
src/app/partials/inicio/inicio.html
  Diff comments   View file @c3e6490
... ... @@ -12,5 +12,5 @@
12 12 </div>
13 13 </section>
14 14 <section class="container-fluid section-programas">
15   - <programa-list></programa-list>
  15 + <programa-list ng-if="inicio.article" article="inicio.article"></programa-list>
16 16 </section>
... ...
src/app/partials/programas/programas.controller.js
  Diff comments   View file @c3e6490
... ... @@ -6,14 +6,19 @@
6 6 .controller('ProgramasController', ProgramasController);
7 7  
8 8 /** @ngInject */
9   - function ProgramasController(ProgramaService, $log) {
  9 + function ProgramasController(ArticleService, $log) {
10 10 $log.debug('ProgramasController');
11 11  
12 12 var vm = this;
13 13  
14   - vm.programaList = [
15   - ProgramaService.mockPrograma(),
16   - ProgramaService.mockPrograma()
17   - ];
  14 + vm.ArticleService = ArticleService;
  15 + vm.$log = $log;
  16 +
  17 + vm.init();
18 18 }
  19 +
  20 + ProgramasController.prototype.init = function () {
  21 +
  22 + vm.programaList = [];
  23 + };
19 24 })();
... ...