Refactoring filters and pagination

Caio Almeida
1 parent d13b205c
Showing 5 changed files with 57 additions and 79 deletions Show diff stats
ConfJuvApp/www/html/_proposal_list.html
ConfJuvApp/www/html/_right_sidebar.html
ConfJuvApp/www/index.html
ConfJuvApp/www/js/config.js.example
ConfJuvApp/www/js/controllers.js
@@ -32,15 +32,15 @@
   <h2>Como você vai mudar o Brasil?</h2>
   <td-cards>
-    <p id="loading-cards" ng-show="!forceReload">
-    </p>
-    <div id='force-reload' ng-show="forceReload">
+    <p id="loading-cards" ng-show="loading">Carregando propostas...</p>
+    <div id="force-reload" ng-show="(emptyTopicsCount == topics.length) && !loading">
       <p>Você já visualizou todas as propostas.</p>
-      <p>Deseja <a ng-click="loadTopics()">Carregar novamente</a>? </p>
+      <p>Deseja <a ng-click="reloadTopics()">Carregar novamente</a>?</p>
     </div>
+ 
     <td-card ng-repeat="proposal in cards" on-destroy="cardDestroyed($index)"
              on-swipe-left="" on-swipe-right="" on-partial-swipe="cardPartialSwipe(amt)">
-      <div class="card animate-show" ng-show="proposal.topic.selected">
+      <div class="card animate-show">
         <h3>
           <a ng-click="openProposal(proposal)">{{proposal.title | limitTo:100}}</a>
           <br />
@@ -58,6 +58,6 @@
   </td-cards>
   <div class="cards-footer">
-    <a ng-click="nextCard()" class="button flat">Próxima</a>
+    <a ng-click="nextCard()" ng-show="cards.length > 0" class="button flat">Próxima</a>
   </div>
 </div>
@@ -4,14 +4,12 @@
       <span>Filtros</span>
       <button menu-toggle="right" class="button button-icon icon ion-close-circled" hide-when="large"></button>
     </h2>
-    <h3>Filtrar propostas por tema</h2>
+    <h3>Mostrar apenas propostas do eixo:</h2>
+    <ion-radio class="radio-balanced" ng-value="'all'" ng-model="topicFilter.value" ng-click="$parent.reloadProposals()">Todos</ion-radio>
     <label ng-repeat="topic in topics">
-      <ion-checkbox
-        class="checkbox-balanced"
-        name="selectedTopics[]"
-        value="{{topic.title}}"
-        ng-model="topic.selected"
-      >{{topic.title}}</ion-checkbox>
+      <ion-radio class="radio-balanced" ng-value="topic.id" ng-model="topicFilter.value" ng-click="$parent.reloadProposals()">
+        {{topic.title}}
+      </ion-radio>
     </label>
   </ion-content>
 </div>
@@ -32,13 +32,13 @@
         <ng-include src="'html/_header.html?2'"></ng-include>
         <ion-pane>
           <ion-content id="proposals-container" no-scroll="">
-            <ng-include src="'html/_proposal_list.html?4'"></ng-include>
+            <ng-include src="'html/_proposal_list.html?8'"></ng-include>
           </ion-content>
         </ion-pane>
       </ion-side-menu-content>
-      <ion-side-menu side="right" is-enabled="true" expose-aside-when="large" ng-show="proposalList.length > 0">
-        <ng-include src="'html/_right_sidebar.html'"></ng-include>
+      <ion-side-menu side="right" is-enabled="true" expose-aside-when="large">
+        <ng-include src="'html/_right_sidebar.html?8'"></ng-include>
       </ion-side-menu>
     </ion-side-menus>
@@ -3,6 +3,5 @@ var ConfJuvAppConfig = {
   noosferoApiPublicHost: 'http://app.juventude.gov.br',
   noosferoApiVersion: 'v1',
   noosferoDiscussion: 99895,
-  noosferoStatutePath: 'articles/participatorio/0010/2309/Resolucao-01-2015-etapa-digital.pdf',
-  proposalsPerPageAndTopic: 1
+  noosferoStatutePath: 'articles/participatorio/0010/2309/Resolucao-01-2015-etapa-digital.pdf'
 };
@@ -330,35 +330,30 @@ angular.module(&#39;confjuvapp.controllers&#39;, [])
      ******************************************************************************/
     $scope.topics = [];
-    $scope.proposalList = [];
-    $scope.proposalsByTopic = {};
     $scope.cards = [];
-    $scope.forceReload = false;
+    $scope.emptyTopicsCount = 0;
+    $scope.topicFilter = { value: 'all' };
-    // Selected topics
+    $scope.reloadTopics = function() {
+      $scope.emptyTopicsCount = 0;
-    $scope.selection = [];
-
-    // Helper method to get selected topics
+      if ($scope.filterTopic != 'all') {
+        $scope.emptyTopicsCount = $scope.topics.length - 1;
+      }
-    $scope.selectedTopics = function selectedTopics() {
-      return filterFilter($scope.topics, { selected: true });
+      $scope.topics = [];
+      $scope.loadTopics($scope.token);
     };
-    // Watch topics for changes
-
-    $scope.$watch('topics|filter:{selected:true}', function (nv) {
-      $scope.selection = nv.map(function (topic) {
-        return topic.title;
-      });
-    }, true);
+    $scope.reloadProposals = function() {
+      $scope.cards = [];
+      $scope.reloadTopics();
+    };
     // Load topics
     $scope.loadTopics = function(token) {
-      $scope.forceReload = false;
       $scope.loading = true;
-      // var path = '?private_token=' + token + '&fields=title,image,body,abstract&content_type=ProposalsDiscussionPlugin::Proposal';
       var params = '?private_token=' + token + '&fields=title,id&content_type=ProposalsDiscussionPlugin::Topic';
       var path = 'articles/' + ConfJuvAppConfig.noosferoDiscussion + '/children' + params;
@@ -367,19 +362,11 @@ angular.module(&#39;confjuvapp.controllers&#39;, [])
         $scope.loading = false;
         var topics = resp.data.articles;
         for (var i = 0; i < topics.length; i++) {
-          var topic_id = topics[i].id;
-          var topic = null;
-          for (var j = 0; j < $scope.topics.length; j++) {
-            if (topic_id == $scope.topics[j].id) {
-              topic = $scope.topics[j];
-            }
-          }
-          if (topic == null) {
-            topic = topics[i];
-            topic.selected = true;
-            $scope.topics.push(topic);
-          }
-          $scope.proposalsByTopic[topic.id] = [];
+          var topic = topics[i];
+          topic = topics[i];
+          topic.lastProposalId = null;
+          topic.empty = false;
+          $scope.topics.push(topic);
           $scope.loadProposals(token, topic);
         }
         $scope.loading = false;
@@ -392,25 +379,36 @@ angular.module(&#39;confjuvapp.controllers&#39;, [])
     // Load proposals
     $scope.loadProposals = function(token, topic) {
+      if ($scope.topicFilter.value != 'all' && topic.id != $scope.topicFilter.value) {
+        return;
+      }
+
       $scope.loading = true;
-      last_proposal = $scope.proposalsByTopic[topic.id][$scope.proposalsByTopic[topic.id].length -1];
-      last_proposal = last_proposal == undefined ? null : last_proposal.id;
-      var params = '?private_token=' + token + '&fields=title,image,body,abstract,id,tag_list,categories,created_by&content_type=ProposalsDiscussionPlugin::Proposal&limit=' + ConfJuvAppConfig.proposalsPerPageAndTopic + '&oldest=younger_than&reference_id=' + last_proposal;
+      var perPage = 1;
+      if ($scope.topicFilter.value != 'all') {
+        perPage = 11;
+      }
+
+      var params = '?private_token=' + token + '&fields=title,image,body,abstract,id,tag_list,categories,created_by&content_type=ProposalsDiscussionPlugin::Proposal&limit=' + perPage + '&oldest=younger_than&reference_id=' + topic.lastProposalId;
       var path = 'articles/' + topic.id + '/children' + params;
       $http.get(ConfJuvAppUtils.pathTo(path))
       .then(function(resp) {
         var proposals = resp.data.articles;
-        $scope.proposalsByTopic[topic.id] = [];
+
         for (var i = 0; i < proposals.length; i++) {
           var proposal = proposals[i];
           proposal.topic = topic;
-          $scope.proposalList.push(proposal);
-          $scope.proposalsByTopic[topic.id].push(proposal);
           $scope.cards.push(proposal);
         }
+
+        if (proposals.length == 0 && !topic.empty) {
+          topic.empty = true;
+          $scope.emptyTopicsCount++;
+        }
+
         $scope.loading = false;
       }, function(err) {
         $ionicPopup.alert({ title: 'Propostas', template: 'Não foi possível carregar as propostas do tópico ' + topic.title });
@@ -421,21 +419,17 @@ angular.module(&#39;confjuvapp.controllers&#39;, [])
     // Cards
     $scope.cardDestroyed = function(index) {
+      var thisProposal = $scope.cards[index];
+      var topic = thisProposal.topic;
+      if (topic.lastProposalId == null || topic.lastProposalId > thisProposal.id) {
+        topic.lastProposalId = thisProposal.id;
+      }
       $scope.cards.splice(index, 1);
       if ($scope.cards.length === 0) {
         for (var i = 0; i < $scope.topics.length; i++) {
           var topic = $scope.topics[i];
-          topic.selected = true;
-          $scope.proposalList= [];
-          $scope.loadProposals($scope.token, topic);
-        }
-        if ($scope.proposalList.length == 0){
-          $scope.forceReload = true;
-        }
-        for (var i = 0; i < $scope.proposalList.length; i++) {
-          var card = $scope.proposalList[i];
-          if (card.topic.selected) {
-            $scope.cards.push(card);
+          if (!topic.empty) {
+            $scope.loadProposals($scope.token, topic);
           }
         }
       }
@@ -449,17 +443,6 @@ angular.module(&#39;confjuvapp.controllers&#39;, [])
       $scope.cardDestroyed(index);
     };
-    // Swipe cards when filters are selected
-    $scope.$watch('selection', function() {
-      $scope.cards = [];
-      for (var i = 0; i < $scope.proposalList.length; i++) {
-        var card = $scope.proposalList[i];
-        if (card.topic.selected) {
-          $scope.cards.push(card);
-        }
-      }
-    });
-
     /******************************************************************************
      S I N G L E  P R O P O S A L
      ******************************************************************************/
@@ -599,9 +582,7 @@ angular.module(&#39;confjuvapp.controllers&#39;, [])
               topic: topic,
               author: { name: $scope.user.name, id: $scope.user.id }
             };
-            $scope.proposalList.push(proposal);
             $scope.cards.push(proposal);
-            $scope.proposalsByTopic[data.topic_id.id].push(proposal);
             $scope.loading = false;
             $scope.data.title = $scope.data.description = $scope.data.topic_id = null;
             document.getElementById('save-proposal').innerHTML = 'Criar';
	@@ -3,6 +3,5 @@ var ConfJuvAppConfig = {		@@ -3,6 +3,5 @@ var ConfJuvAppConfig = {
3	noosferoApiPublicHost: 'http://app.juventude.gov.br',	3	noosferoApiPublicHost: 'http://app.juventude.gov.br',
4	noosferoApiVersion: 'v1',	4	noosferoApiVersion: 'v1',
5	noosferoDiscussion: 99895,	5	noosferoDiscussion: 99895,
6	- noosferoStatutePath: 'articles/participatorio/0010/2309/Resolucao-01-2015-etapa-digital.pdf',
7	- proposalsPerPageAndTopic: 1	6	+ noosferoStatutePath: 'articles/participatorio/0010/2309/Resolucao-01-2015-etapa-digital.pdf'
8	};	7	};