Add type filter, and fix filter to multiple tags Refs T773

Summary: - Add post type tab to filters - Fix tag filters to comma separate tags - previous was just filtered by the last tag selected Test Plan: - Load UI - Filter by 2 tags and check posts for both tags shown - Filter by type and check posts shown for that type Reviewers: aMoniker, spaudanjo, vladimir Maniphest Tasks: T773 Differential Revision: https://phabricator.ushahidi.com/D717
ushahidi · Mar 12, 2015 · cd6b412 · cd6b412
1 parent e551600
commit cd6b412
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 12 deletions.
diff --git a/app/common/locales/en.json b/app/common/locales/en.json
@@ -43,20 +43,16 @@
         "filter" : "Filter",
         "categories" : {
             "categories" : "Categories",
-            "all_categories" : "All Categories",
-            "category_1" : "Category 1",
-            "category_2" : "Category 2",
-            "category_3" : "Category 3",
-            "category_4" : "Category 4"
+            "all_categories" : "All Categories"
+        },
+        "post_types" : {
+            "post_types" : "Post Types",
+            "all_types" : "All Types"
         },
         "sets" : {
             "sets" : "Sets",
             "my_sets" : "My Sets",
-            "all_sets" : "All Sets",
-            "set_1" : "Set 1",
-            "set_2" : "Set 2",
-            "set_3" : "Set 3",
-            "set_4" : "Set 4"
+            "all_sets" : "All Sets"
         },
         "more" : "More",
         "keyword" : "Keyword",

diff --git a/app/common/services/global-filter.js b/app/common/services/global-filter.js
@@ -1,17 +1,20 @@
 module.exports = [
     'TagEndpoint',
+    'FormEndpoint',
     // 'SetEndpoint',
     'Util',
     '_',
 function(
     TagEndpoint,
+    FormEndpoint,
     // SetEndpoint
     Util,
     _
 ) {
 
     var GlobalFilter = {
         tags: [],
+        post_types: [],
         keyword: '',
         start_date: '',
         end_date: '',
@@ -28,11 +31,25 @@ function(
                 tag.selected = false;
             });
         },
+        getSelectedPostTypes: function() {
+            return _.pluck(_.where(this.post_types, { selected: true }), 'id');
+        },
+        hasSelectedPostTypes: function() {
+            return !_.isEmpty(this.getSelectedPostTypes());
+        },
+        clearSelectedPostTypes: function() {
+            _.each(this.post_types, function(postType) {
+                postType.selected = false;
+            });
+        },
         getPostQuery: function() {
             var query = {};
 
             var selected_tags = this.getSelectedTags();
-            if (!_.isEmpty(selected_tags)) { query.tags = selected_tags; }
+            if (!_.isEmpty(selected_tags)) { query.tags = selected_tags.join(','); }
+
+            var selected_types = this.getSelectedPostTypes();
+            if (!_.isEmpty(selected_types)) { query.form = selected_types.join(','); }
 
             if (this.keyword)    { query.q = this.keyword;                }
             if (this.start_date) { query.updated_after = this.start_date; }
@@ -51,6 +68,10 @@ function(
         GlobalFilter.tags = response.results;
     });
 
+    FormEndpoint.get().$promise.then(function(response) {
+        GlobalFilter.post_types = response.results;
+    });
+
     // @todo - uncomment when sets are ready
     // SetEndpoint.get().$promise.then(function(response) {
     //     GlobalFilter.sets = response.results;

diff --git a/app/post/directives/post-view-tabs-directive.js b/app/post/directives/post-view-tabs-directive.js
@@ -72,6 +72,12 @@ function(
                     GlobalFilter.clearSelectedTags();
                 }
             };
+
+            $scope.showAllPostTypesHandler = function() {
+                if (this.show_all_post_types) {
+                    GlobalFilter.clearSelectedPostTypes();
+                }
+            };
         },
     };
 }];
diff --git a/sass/modules/_dropdown.scss b/sass/modules/_dropdown.scss
@@ -1,6 +1,6 @@
 .dropdown.filters-menu {
     > ul.dropdown-menu {
-        min-width: 250px;
+        min-width: 350px;
 
         .tab-content {
             padding: 15px;

diff --git a/server/www/templates/partials/post-view-tabs.html b/server/www/templates/partials/post-view-tabs.html
@@ -81,6 +81,15 @@
                                     <tab heading="{{ 'globalFilter.sets.sets'|translate }}" ng-click="$event.stopPropagation()">
                                         TODO: Sets content
                                     </tab>
+                                    <tab heading="{{ 'globalFilter.post_types.post_types'|translate }}" ng-click="$event.stopPropagation()">
+                                        <ul class="list-unstyled">
+                                            <li class="checkbox"><label><input type="checkbox" ng-model="show_all_post_types" ng-checked="!global_filter.hasSelectedPostTypes()" ng-click="showAllPostTypesHandler()"> {{ 'globalFilter.post_types.all_types'|translate }}</label></li>
+                                            <li class="checkbox" ng-repeat="(idx, postType) in global_filter.post_types" postType="postType">
+                                                <label><input type="checkbox" value="{{postType.id}}" ng-model="global_filter.post_types[idx].selected">
+                                                {{postType.name}}</label>
+                                            </li>
+                                        </ul>
+                                    </tab>
                                     <tab heading="{{ 'globalFilter.more'|translate }}" ng-click="$event.stopPropagation()">
                                         <div class="form-group">
                                             <label for="keyword">{{ 'globalFilter.keyword'|translate }}</label>