Fixes #139. Show selected theme when the list is collapsed

Leonardo Merlin
1 parent 3ea656df
Showing 3 changed files with 66 additions and 40 deletions Show diff stats
src/app/components/category-list/category-list.directive.js
src/app/components/category-list/category-list.html
src/app/pages/ranking/ranking.controller.js
@@ -28,19 +28,18 @@
     CategoryListController.prototype.init = function() {
       var vm = this;
-      vm.pathUrl = vm.$location.path();
-
-      vm.showCloseBtn = true;
+      vm.isRankingPage = (vm.$location.path() === '/ranking');
       // Disable button 'remove' of page ranking
-      if (vm.pathUrl === '/ranking') {
+      vm.showCloseBtn = true;
+      if (vm.isRankingPage) {
         vm.showCloseBtn = false;
       }
       // Default values
-      if (!vm.isCollapsed) {
-        vm.isCollapsed = false;
-      }
+      vm.isCollapsed = false;
+
+      // vm.$element.find('.js-selected-category').hide();
     };
@@ -63,7 +62,11 @@
       if (category !== vm.selectedCategory) {
         vm.selectedCategory = category;
-      }else {
+        if (vm.isRankingPage) {
+          vm._getListGroup().slideUp();
+          vm.isCollapsed = true;
+        }
+      } else {
         if (vm._disableUnselect()) {
           vm.$log.info('Unselect is disabled.');
@@ -80,10 +83,23 @@
     CategoryListController.prototype.toogleList = function() {
       var vm = this;
+      if (vm.isCollapsed) {
+        vm._getListGroup().slideDown();
+      } else {
+        vm._getListGroup().slideUp();
+      }
+      vm.isCollapsed = !vm.isCollapsed;
+    };
+
+    CategoryListController.prototype._getListGroup = function() {
+      var vm = this;
+
       if (!vm._listGroup) {
-        vm._listGroup = vm.$element.find('.list-group');
+        vm._listGroup = vm.$element.find('.js-list-group');
       }
-      vm._listGroup.slideToggle();
+
+      return vm._listGroup;
+
     };
     var directive = {
-<div class="category-list">
+<div class="category-list" ng-class="vm.selectedCategory.slug">
   <nav class="navigation">
     <h3 class="category-list--title" ng-click="vm.toogleList()">
       <!-- <span class="hidden-xs"><b>Programas</b> por Tema</span> -->
       <!-- <span class="visible-xs"><b>Filtrar</b> por Tema <span class="glyphicon glyphicon-filter pull-right"></span></span> -->
       <b>Filtrar</b> por Tema <span class="glyphicon glyphicon-filter pull-right"></span>
     </h3>
-    <!-- <div class="list-group ng-hide" ng-show="!vm.isCollapsed" ng-class="vm.selectedCategory.slug"> -->
-    <div class="list-group is-mobile" ng-class="vm.selectedCategory.slug">
+    
+    <div class="list-group is-mobile js-list-group">
       <button type="button" class="list-group-item category-list--item"
         ng-repeat="category in vm.categories"
         ng-class="{active: vm.selectedCategory.slug === category.slug}"
@@ -22,5 +22,17 @@
         </div>
       </button>
     </div>
+
+    <div class="list-group is-mobile js-selected-category">
+      <button type="button" class="list-group-item category-list--item active" ng-if="vm.isCollapsed">
+        <span class="category-list--icon-circle" aria-hidden="true" ng-class="vm.selectedCategory.slug"></span>
+        <span class="category-list--icon icon" aria-hidden="true" ng-class="'icon-tema-' + vm.selectedCategory.slug + '-small'"></span>
+        <span class="category-list--label">{{vm.selectedCategory.name}}</span>
+        <span class="category-list--icon--right glyphicon glyphicon-chevron-right hidden-xs"></span>
+        <div ng-if="vm.selectedCategory.archived" class="category-list--icon-archived">
+          <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
+        </div>
+      </button>
+    </div>
   </nav>
 </div>
 \ No newline at end of file
@@ -24,7 +24,7 @@
     $log.debug('RankingPageController');
   }
-  RankingPageController.prototype.init = function () {
+  RankingPageController.prototype.init = function() {
     var vm = this;
     vm.page = 1;
@@ -39,7 +39,6 @@
     //Remove "X" from the theme at the ranking page
     vm.slug = vm.$location.$$path;
-
     if (vm.search.tema) {
       vm._filtredByThemeSlug = vm.search.tema;
     }
@@ -56,7 +55,7 @@
     vm.error = null;
   };
-  RankingPageController.prototype.loadData = function () {
+  RankingPageController.prototype.loadData = function() {
     var vm = this;
     vm.loading = true;
@@ -71,40 +70,39 @@
     // 1. Load themes
     vm.loadingThemes = true;
-    vm.DialogaService.getThemes(function(themes){
+    vm.DialogaService.getThemes(function(themes) {
       vm.themes = themes;
       vm.loadingThemes = false;
       // 2. Select a Random Theme (T)
       var selectedTheme = null;
-      if(vm.search.tema || vm._filtredByThemeSlug){
+      if (vm.search.tema || vm._filtredByThemeSlug) {
         // vanilla filter
-        var results = vm.themes.filter(function(t){
+        var results = vm.themes.filter(function(t) {
           return (t.slug === vm.search.tema || (t.slug === vm._filtredByThemeSlug));
         });
-        if(results && results.length > 0){
+        if (results && results.length > 0) {
           selectedTheme = results[0];
           vm.selectedTheme = selectedTheme;
         }
-
       }
-      if(!selectedTheme){
+      if (!selectedTheme) {
         vm.selectedTheme = vm.themes[Math.floor(Math.random() * vm.themes.length)];
       }
       // 3. Load programs of T
       // (AND 4)
       var themeId = vm.selectedTheme.id;
-      vm.loadPrograms(themeId, function(){
+      vm.loadPrograms(themeId, function() {
         // vm.loadProposals();
         vm.loading = false;
         vm.loadingFilter = false;
       });
-    }, function (error) {
+    }, function(error) {
       vm.error = error;
       vm.$log.error(error);
       vm.loadingThemes = false;
@@ -112,38 +110,38 @@
     });
   };
-  RankingPageController.prototype.loadPrograms = function (themeId, cb) {
+  RankingPageController.prototype.loadPrograms = function(themeId, cb) {
     var vm = this;
-    vm.DialogaService.getProgramsByThemeId(themeId, function (programs){
+    vm.DialogaService.getProgramsByThemeId(themeId, function(programs) {
       vm.filtredPrograms = programs;
       // 4. Select a random program of T
       var selectedProgram = null;
-      if(vm.search.programa || vm._filtredByProgramSlug){
+      if (vm.search.programa || vm._filtredByProgramSlug) {
         // vanilla filter
-        var results = vm.filtredPrograms.filter(function(p){
+        var results = vm.filtredPrograms.filter(function(p) {
           return (p.slug === vm.search.programa || (p.slug === vm._filtredByProgramSlug));
         });
-        if(results && results.length > 0){
+        if (results && results.length > 0) {
           selectedProgram = results[0];
           vm.selectedProgram = selectedProgram;
         }
       }
-      if(!selectedProgram){
+      if (!selectedProgram) {
         vm.selectedProgram = vm.filtredPrograms[Math.floor(Math.random() * vm.filtredPrograms.length)];
       }
-      if(cb){
+      if (cb) {
         cb();
       }
-    }, function(error){
+    }, function(error) {
       vm.$log.error(error);
-      if(cb){
+      if (cb) {
         cb();
       }
     });
@@ -152,7 +150,7 @@
   RankingPageController.prototype.attachListeners = function() {
     var vm = this;
-    vm.$scope.$on('change-selectedCategory', function (event, selectedCategory) {
+    vm.$scope.$on('change-selectedCategory', function(event, selectedCategory) {
       vm.selectedTheme = selectedCategory;
     });
@@ -160,14 +158,14 @@
       vm.search.tema = newValue ? newValue.slug : null;
       vm.$location.search('tema', vm.search.tema);
-      if(!vm.loadingFilter && vm.selectedTheme && vm.selectedTheme.id){
-        vm.loadPrograms(vm.selectedTheme.id, function(){
+      if (!vm.loadingFilter && vm.selectedTheme && vm.selectedTheme.id) {
+        vm.loadPrograms(vm.selectedTheme.id, function() {
           vm.filterProposals();
         });
       }
     });
-    vm.$scope.$on('change-selectedTopic', function (event, selectedTopic) {
+    vm.$scope.$on('change-selectedTopic', function(event, selectedTopic) {
       vm.selectedProgram = selectedTopic;
     });
@@ -207,7 +205,7 @@
   RankingPageController.prototype.filterProposals = function(_page, _per_page) {
     var vm = this;
-    if (vm.loadingProposals){
+    if (vm.loadingProposals) {
       vm.$log.debug('Content is not loaded yet.');
       return;
     }
@@ -228,11 +226,11 @@
     if (query) {params.query = query; }
     vm.loadingProposals = true;
-    vm.DialogaService.searchProposals(params, function(data){
+    vm.DialogaService.searchProposals(params, function(data) {
       vm.total_proposals = parseInt(data._obj.headers('total'));
       vm.filtredProposals = data.articles;
       vm.loadingProposals = false;
-    }, function (error) {
+    }, function(error) {
       vm.error = error;
       vm.$log.error(error);
       vm.loadingProposals = false;