From 8ed1ad5aafcbcfae311d36c68c101a0a41a90156 Mon Sep 17 00:00:00 2001 From: Leonardo Merlin Date: Fri, 7 Aug 2015 14:29:00 -0300 Subject: [PATCH] Add initial filter to program list --- src/app/components/programa/programa.directive.js | 39 +++++++++++++++++++++++++++------------ src/app/components/programa/programa.html | 4 +++- src/app/components/programa/programa.scss | 9 +++++++-- src/app/components/programas/programas.directive.js | 152 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-------------------------- src/app/components/programas/programas.html | 48 +++++++++++++++++++++++++++++++++++++++--------- src/app/partials/inicio/inicio.html | 2 +- src/app/partials/programas/programas.controller.js | 15 ++++++++++----- 7 files changed, 213 insertions(+), 56 deletions(-) diff --git a/src/app/components/programa/programa.directive.js b/src/app/components/programa/programa.directive.js index 00dcdb9..1240295 100644 --- a/src/app/components/programa/programa.directive.js +++ b/src/app/components/programa/programa.directive.js @@ -6,43 +6,58 @@ .directive('programaBox', programaBox); /** @ngInject */ - function programaBox($log) { + function programaBox() { /** @ngInject */ - function ProgramaController() { + function ProgramaController($log) { $log.debug('ProgramaController'); var vm = this; + vm.$log = $log; - $log.debug('this.programa', vm.programa); - vm.program = vm.programa; + vm.init(); } + ProgramaController.prototype.init = function () { + + }; + ProgramaController.prototype.getCategory = function () { - // return this.program.categories[0]; - return 'category-object'; + var vm = this; + + return vm.program.categories[0]; }; + ProgramaController.prototype.getCategoryName = function () { - // return this.getCategory().name; - return 'category-name'; + var vm = this; + + return vm.getCategory().name; }; ProgramaController.prototype.getImageUrl = function () { - return 'http://login.dialoga.gov.br/image_uploads/dialoga/0000/0053/requalif_redim.jpg'; + var vm = this; + + return 'http://login.dialoga.gov.br/' + vm.program.image.url; }; + ProgramaController.prototype.getImageAlt = function () { - return 'TODO: descrição da imagem.'; + var vm = this; + + vm.$log.warn('image is not accessible.'); + return 'TODO: create image alt on server-side.'; }; ProgramaController.prototype.showContent = function () { - $log.debug('TODO: showContent()', this.program); + var vm = this; + + vm.$log.debug('TODO: showContent()', vm.program); }; var directive = { restrict: 'E', templateUrl: 'app/components/programa/programa.html', scope: { - programa: '=programa' + program: '=' }, controller: ProgramaController, controllerAs: 'vm', diff --git a/src/app/components/programa/programa.html b/src/app/components/programa/programa.html index 7a119c0..96997ef 100644 --- a/src/app/components/programa/programa.html +++ b/src/app/components/programa/programa.html @@ -1,6 +1,8 @@ -
+
{{::vm.getCategoryName()}}
{{::vm.getImageAlt()}}
+
{{::vm.program.title}}
+
diff --git a/src/app/components/programa/programa.scss b/src/app/components/programa/programa.scss index eb43d5d..262365c 100644 --- a/src/app/components/programa/programa.scss +++ b/src/app/components/programa/programa.scss @@ -3,15 +3,20 @@ $scale: 1.1; $time: 0.3s; // sandbox -.programa-box { +.program-box { cursor: pointer; + .category { + display: block; + height: 30px; + line-height: 30px; + } + .image-wrapper { position: relative; // width: 100%; // width: 370px; // height: 170px; - background-color: red; overflow: hidden; text-align: center; } diff --git a/src/app/components/programas/programas.directive.js b/src/app/components/programas/programas.directive.js index c0e1f6d..01c5e61 100644 --- a/src/app/components/programas/programas.directive.js +++ b/src/app/components/programas/programas.directive.js @@ -3,62 +3,162 @@ angular .module('dialoga') + .filter('filterByCategory', filterByCategory) + .filter('filterByCriteria', filterByCriteria) .directive('programaList', programaList); /** @ngInject */ - function programaList($log) { + function programaList() { /** @ngInject */ - function ProgramaListController() { + function ProgramaListController($scope, $log) { $log.debug('ProgramaListController'); + // alias var vm = this; - vm.filter = false; - vm.categories = [ - { - name: 'Saúde', - slug: 'saude' - }, - { - name: 'Educação', - slug: 'educacao' - } + + // dependencies + vm.$scope = $scope; + vm.$log = $log; + + // initialization + vm.init(); + } + + ProgramaListController.prototype.init = function () { + var vm = this; + + vm.query = null; + vm.categoryFilter = null; + vm.orderCriteries = [ + { label: 'Título', name: 'title' }, + { label: 'Tema', name: 'category' }, + { label: 'Mais participações', name: 'more_participants' } ]; - for (var i = vm.categories.length - 1; i >= 0; i--) { - var category = vm.categories[i]; - category.iconClass = vm.getIconClasses(category); + if(!vm.article){ + vm.$log.warn('no article to display. Tip: use a ng-if before use this directive'); + return; } - } - ProgramaListController.prototype.getIconClasses = function (tema) { - $log.debug('[TODO] getIconClasses of tema:', tema); + vm.categories = vm.article.categories; + vm.programs = vm.article.children; + vm.filtredProgramList = []; + }; + + ProgramaListController.prototype.getIconClasses = function (category) { + var vm = this; + + vm.$log.debug('[TODO] getIconClasses of category:', category); return 'glyphicon glyphicon-exclamation-sign'; }; - ProgramaListController.prototype.filterByTema = function (tema) { - this.filter = tema.slug; - $log.debug('[TODO] Filterting by tema:', this.filter); + ProgramaListController.prototype.filterByCategory = function (category) { + var vm = this; + + if(category !== vm.categoryFilter){ + // selected new filter + vm.categoryFilter = category; + }else{ + // already selected. Unselect. + vm.showAll(); + } }; + ProgramaListController.prototype.showAll = function () { - this.filter = null; - $log.debug('[TODO] Filterting by tema:', this.filter); + var vm = this; + + vm.query = null; + vm.categoryFilter = null; + vm.$log.debug('[TODO] showAll, no filter? ', vm.categoryFilter); }; + // function ProgramaListLinker (scope, element, attrs) { + + // scope.$watch('article', function(newValue, oldValue){ + // if(!newValue){ + // return; + // } + // scope.vm.categories = scope.vm.article.categories; + // scope.vm.programs = scope.vm.article.children; + // }); + // } + var directive = { restrict: 'E', templateUrl: 'app/components/programas/programas.html', scope: { - programas: '=programas', - temas: '=temas' + article: '=' }, controller: ProgramaListController, controllerAs: 'vm', - bindToController: true + bindToController: true, + // link: ProgramaListLinker }; return directive; } + function filterByCategory(){ + return function (input, category){ + input = input || []; + + if(!category){ + // no filter + return input; + } + + var out = []; + for (var i = 0; i < input.length; i++) { + var program = input[i]; + if(program.categories[0].slug === category.slug){ + out.push(program); + } + } + + return out; + }; + } + + /** @ngInject */ + function filterByCriteria($filter, $log){ + var orderBy = $filter('orderBy'); + + return function (input, criteria, reverse){ + input = input || []; + reverse = reverse || false; + + if( !criteria ){ + return input; + } + + var out = []; + // for (var i = 0; i < input.length; i++) { + // var program = input[i]; + + // // todo ordering + // out.push(program); + // } + + switch(criteria.name){ + case 'title': + out = orderBy(input, 'title', reverse); + break; + case 'category': + out = orderBy(input, 'categories[0].name', reverse); + break; + case 'more_participants': + // break; + default: + $log.info('Criteria not handled yet: ', criteria); + out = input; + break; + } + + return out; + }; + } + + })(); diff --git a/src/app/components/programas/programas.html b/src/app/components/programas/programas.html index 880d833..8528730 100644 --- a/src/app/components/programas/programas.html +++ b/src/app/components/programas/programas.html @@ -4,10 +4,15 @@ @@ -18,15 +23,40 @@

Programas

-
-
- - - - +
+
+
+
+ + + + + + + +
+ +
+
+
+
+
+ +
+
+
+ Nenhum programa encontrado. +
diff --git a/src/app/partials/inicio/inicio.html b/src/app/partials/inicio/inicio.html index ab0b0d0..4fc8da2 100644 --- a/src/app/partials/inicio/inicio.html +++ b/src/app/partials/inicio/inicio.html @@ -12,5 +12,5 @@
- +
diff --git a/src/app/partials/programas/programas.controller.js b/src/app/partials/programas/programas.controller.js index 7ec7c58..727cfee 100644 --- a/src/app/partials/programas/programas.controller.js +++ b/src/app/partials/programas/programas.controller.js @@ -6,14 +6,19 @@ .controller('ProgramasController', ProgramasController); /** @ngInject */ - function ProgramasController(ProgramaService, $log) { + function ProgramasController(ArticleService, $log) { $log.debug('ProgramasController'); var vm = this; - vm.programaList = [ - ProgramaService.mockPrograma(), - ProgramaService.mockPrograma() - ]; + vm.ArticleService = ArticleService; + vm.$log = $log; + + vm.init(); } + + ProgramasController.prototype.init = function () { + + vm.programaList = []; + }; })(); -- libgit2 0.21.2