Download as
Browse Code »

Commit 8ed1ad5aafcbcfae311d36c68c101a0a41a90156

Authored by Leonardo Merlin
1 parent 406a1e4f
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

Add initial filter to program list

Showing 7 changed files with 213 additions and 56 deletions   Show diff stats
src/app/components/programa/programa.directive.js
  Diff comments   View file @8ed1ad5
@@ -6,43 +6,58 @@ @@ -6,43 +6,58 @@
6 .directive('programaBox', programaBox); 6 .directive('programaBox', programaBox);
7 7
8 /** @ngInject */ 8 /** @ngInject */
9 - function programaBox($log) { 9 + function programaBox() {
10 10
11 /** @ngInject */ 11 /** @ngInject */
12 - function ProgramaController() { 12 + function ProgramaController($log) {
13 $log.debug('ProgramaController'); 13 $log.debug('ProgramaController');
14 14
15 var vm = this; 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 ProgramaController.prototype.getCategory = function () { 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 ProgramaController.prototype.getCategoryName = function () { 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 ProgramaController.prototype.getImageUrl = function () { 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 ProgramaController.prototype.getImageAlt = function () { 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 ProgramaController.prototype.showContent = function () { 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 var directive = { 56 var directive = {
42 restrict: 'E', 57 restrict: 'E',
43 templateUrl: 'app/components/programa/programa.html', 58 templateUrl: 'app/components/programa/programa.html',
44 scope: { 59 scope: {
45 - programa: '=programa' 60 + program: '='
46 }, 61 },
47 controller: ProgramaController, 62 controller: ProgramaController,
48 controllerAs: 'vm', 63 controllerAs: 'vm',
src/app/components/programa/programa.html
  Diff comments   View file @8ed1ad5
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 <div class="category">{{::vm.getCategoryName()}}</div> 2 <div class="category">{{::vm.getCategoryName()}}</div>
3 <div class="image-wrapper"> 3 <div class="image-wrapper">
4 <image class="img-responsive" ng-src="{{::vm.getImageUrl()}}" alt="{{::vm.getImageAlt()}}" /> 4 <image class="img-responsive" ng-src="{{::vm.getImageUrl()}}" alt="{{::vm.getImageAlt()}}" />
5 </div> 5 </div>
  6 + <div class="program-title">{{::vm.program.title}}</div>
  7 + <div class="program-abstract" ng-bind-html="vm.program.abstract"></div>
6 </div> 8 </div>
src/app/components/programa/programa.scss
  Diff comments   View file @8ed1ad5
@@ -3,15 +3,20 @@ $scale: 1.1; @@ -3,15 +3,20 @@ $scale: 1.1;
3 $time: 0.3s; 3 $time: 0.3s;
4 4
5 // sandbox 5 // sandbox
6 -.programa-box { 6 +.program-box {
7 cursor: pointer; 7 cursor: pointer;
8 8
  9 + .category {
  10 + display: block;
  11 + height: 30px;
  12 + line-height: 30px;
  13 + }
  14 +
9 .image-wrapper { 15 .image-wrapper {
10 position: relative; 16 position: relative;
11 // width: 100%; 17 // width: 100%;
12 // width: 370px; 18 // width: 370px;
13 // height: 170px; 19 // height: 170px;
14 - background-color: red;  
15 overflow: hidden; 20 overflow: hidden;
16 text-align: center; 21 text-align: center;
17 } 22 }
src/app/components/programas/programas.directive.js
  Diff comments   View file @8ed1ad5
@@ -3,62 +3,162 @@ @@ -3,62 +3,162 @@
3 3
4 angular 4 angular
5 .module('dialoga') 5 .module('dialoga')
  6 + .filter('filterByCategory', filterByCategory)
  7 + .filter('filterByCriteria', filterByCriteria)
6 .directive('programaList', programaList); 8 .directive('programaList', programaList);
7 9
8 /** @ngInject */ 10 /** @ngInject */
9 - function programaList($log) { 11 + function programaList() {
10 12
11 /** @ngInject */ 13 /** @ngInject */
12 - function ProgramaListController() { 14 + function ProgramaListController($scope, $log) {
13 $log.debug('ProgramaListController'); 15 $log.debug('ProgramaListController');
14 16
  17 + // alias
15 var vm = this; 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 return 'glyphicon glyphicon-exclamation-sign'; 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 ProgramaListController.prototype.showAll = function () { 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 var directive = { 87 var directive = {
49 restrict: 'E', 88 restrict: 'E',
50 templateUrl: 'app/components/programas/programas.html', 89 templateUrl: 'app/components/programas/programas.html',
51 scope: { 90 scope: {
52 - programas: '=programas',  
53 - temas: '=temas' 91 + article: '='
54 }, 92 },
55 controller: ProgramaListController, 93 controller: ProgramaListController,
56 controllerAs: 'vm', 94 controllerAs: 'vm',
57 - bindToController: true 95 + bindToController: true,
  96 + // link: ProgramaListLinker
58 }; 97 };
59 98
60 99
61 return directive; 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 @8ed1ad5
@@ -4,10 +4,15 @@ @@ -4,10 +4,15 @@
4 <aside class="navigation"> 4 <aside class="navigation">
5 <h3 class="title"><b>Programas</b> por Tema</h3> 5 <h3 class="title"><b>Programas</b> por Tema</h3>
6 <div class="list-group category-list"> 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 <span class="glyphicon glyphicon-chevron-right pull-right"></span> 14 <span class="glyphicon glyphicon-chevron-right pull-right"></span>
  15 +
11 </button> 16 </button>
12 </div> 17 </div>
13 </aside> 18 </aside>
@@ -18,15 +23,40 @@ @@ -18,15 +23,40 @@
18 <div class="program-list"> 23 <div class="program-list">
19 <div class="header"> 24 <div class="header">
20 <h2>Programas</h2> 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 <span class="glyphicon glyphicon-chevron-right"></span> Ver todos os programas 27 <span class="glyphicon glyphicon-chevron-right"></span> Ver todos os programas
23 </button> 28 </button>
24 </div> 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 </div> 60 </div>
31 </div> 61 </div>
32 </div> 62 </div>
src/app/partials/inicio/inicio.html
  Diff comments   View file @8ed1ad5
@@ -12,5 +12,5 @@ @@ -12,5 +12,5 @@
12 </div> 12 </div>
13 </section> 13 </section>
14 <section class="container-fluid section-programas"> 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 </section> 16 </section>
src/app/partials/programas/programas.controller.js
  Diff comments   View file @8ed1ad5
@@ -6,14 +6,19 @@ @@ -6,14 +6,19 @@
6 .controller('ProgramasController', ProgramasController); 6 .controller('ProgramasController', ProgramasController);
7 7
8 /** @ngInject */ 8 /** @ngInject */
9 - function ProgramasController(ProgramaService, $log) { 9 + function ProgramasController(ArticleService, $log) {
10 $log.debug('ProgramasController'); 10 $log.debug('ProgramasController');
11 11
12 var vm = this; 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 })();