Wire up the rest of the filters

- Wire up visible to
- Wire up location filter
- Wire up show/hide on mode context filter
- Populate default form value
- Hide share button

app/common/locales/en.json

@@ -261,6 +261,7 @@
         "today" : "Today",
         "general" : "General Settings",
         "type" : "Type",
+        "unknown" : "Unknown",
         "unselect_all" : "Unselect All",
         "user" : "User",
         "users" : "Users",
@@ -308,6 +309,7 @@
         "edit_post" : "Edit Post",
         "history" : "History",
         "hide_form" : "Hide {{form}}",
+        "hide_unknown_form" : "Hide Unknown",
         "publish" : "Publish to...",
         "published" : "Published",
         "unpublished" : "Unpublished",
@@ -329,6 +331,7 @@
         "visible_to_you": "This post is visible to just you and admins",
         "visible_to_roles": "This post is visible to {{roles}}",
         "show_only_form" : "Show only {{form}}",
+        "show_only_unknown_form" : "Show only Unknown",
         "post_actions" : {
             "edit" : "Edit",
             "delete" : "Delete",

app/post/directives/views/post-view-chart-directive.js

@@ -7,12 +7,14 @@ function (
         'PostEndpoint',
         'd3',
         '_',
+        'PostFilters',
     function (
         $scope,
         $filter,
         PostEndpoint,
         d3,
-        _
+        _,
+        PostFilters
     ) {
         $scope.options = {
             chart: {
@@ -83,7 +85,7 @@ function (
             if (newValue !== oldValue) {
                 getPostStats();
             }
-        });
+        }, true);
 
         // Initial values
         $scope.reload = getPostStats;

app/post/directives/views/post-view-map-directive.js

@@ -6,11 +6,13 @@ function (
         'PostEndpoint',
         'Maps',
         '_',
+        'PostFilters',
     function (
         $scope,
         PostEndpoint,
         Maps,
-        _
+        _,
+        PostFilters
     ) {
         // Set initial map params
         angular.extend($scope, Maps.getInitialScope());
@@ -38,7 +40,7 @@ function (
             if (newValue !== oldValue) {
                 reloadMapPosts();
             }
-        });
+        }, true);
 
         // Initial load
         reloadMapPosts();

app/post/directives/views/post-view-timeline-directive.js

@@ -7,12 +7,14 @@ function (
         'PostEndpoint',
         'd3',
         '_',
+        'PostFilters',
     function (
         $scope,
         $filter,
         PostEndpoint,
         d3,
-        _
+        _,
+        PostFilters
     ) {
         var yAxisLabelCumulative = $filter('translate')('graph.cumulative_post_count'),
             yAxisLabel = $filter('translate')('graph.new_post_count'),
@@ -94,7 +96,7 @@ function (
             if (newValue !== oldValue) {
                 getPostStats();
             }
-        });
+        }, true);
 
         $scope.$watch(function () {
             return $scope.showCumulative;

app/post/post-module.js

@@ -27,6 +27,7 @@ angular.module('ushahidi.posts', [])
 .directive('filterDate', require('./views/filters/filter-date.directive.js'))
 .directive('filterForm', require('./views/filters/filter-form.directive.js'))
 .directive('filterVisibleTo', require('./views/filters/filter-visible-to.directive.js'))
+.directive('filterLocation', require('./views/filters/filter-location.directive.js'))
 
 .service('PostFilters', require('./views/post-filters.service.js'))
 

app/post/views/filters/filter-date.directive.js

@@ -5,7 +5,8 @@ function DateSelectDirective() {
     return {
         restrict: 'E',
         scope: {
-            model: '='
+            createdBeforeModel: '=',
+            createdAfterModel: '='
         },
         controller: DateSelectController,
         templateUrl: 'templates/posts/views/filters/filter-date.html'

app/post/views/filters/filter-location.directive.js

@@ -0,0 +1,68 @@
+module.exports = LocationFilterDirective;
+
+LocationFilterDirective.$inject = ['Geocoding', '$q'];
+function LocationFilterDirective(Geocoding, $q) {
+    return {
+        restrict: 'E',
+        scope: {
+            centerPointModel: '=',
+            withinKmModel: '='
+        },
+        require: '^form',
+        link: LocationFilterLink,
+        templateUrl: 'templates/posts/views/filters/filter-location.html'
+    };
+
+    //LocationFilterLink.$inject = ['Geocoding'];
+    function LocationFilterLink($scope, element, attrs, formCtrl) {
+        $scope.geocoding = false;
+        $scope.locationSearchText = '';
+
+        $scope.$watch('centerPointModel', updateStateFromModels);
+        $scope.$watch('locationSearchText', updateModelsFromState);
+
+        function updateStateFromModels(newValue, oldValue) {
+            if (!$scope.locationSearchText) {
+                $scope.locationSearchText = $scope.centerPointModel;
+            }
+        }
+
+        function updateModelsFromState() {
+            if ($scope.locationSearchText) {
+                geocode($scope.locationSearchText).then(function (coords) {
+                    $scope.centerPointModel = coords;
+                });
+            } else {
+                $scope.centerPointModel = '';
+            }
+        }
+
+        function geocode(location) {
+            var defer = $q.defer(),
+                valid_coords = /\-?[0-9]+(\.[0-9]+)?\s*,\s*\-?[0-9]+(\.[0-9]+)?/;
+
+            if (!location) {
+                return;
+            }
+
+            if (valid_coords.test(location)) {
+                defer.resolve(location);
+            } else { // perform a geocoding lookup on the location
+                $scope.geocoding = true;
+
+                Geocoding.search(location).then(function (coordinates) {
+                    if (!coordinates) {
+                        defer.reject();
+                        return;
+                    } // @todo - handle bad lookup
+
+                    $scope.geocoding = false;
+                    defer.resolve(coordinates[0] + ',' + coordinates[1]);
+                });
+            }
+
+            return defer.promise;
+        }
+    }
+}
+

app/post/views/filters/filter-visible-to.directive.js

@@ -5,7 +5,8 @@ function VisibleToSelectDirective() {
     return {
         restrict: 'E',
         scope: {
-            model: '='
+            statusModel: '=',
+            publishedToModel: '='
         },
         controller: VisibleToSelectController,
         templateUrl: 'templates/posts/views/filters/filter-visible-to.html'
@@ -15,9 +16,38 @@ function VisibleToSelectDirective() {
 VisibleToSelectController.$inject = ['$scope', 'RoleEndpoint'];
 function VisibleToSelectController($scope, RoleEndpoint) {
     $scope.roles = [];
+    $scope.visible_to = '';
+
     activate();
 
+    $scope.$watch('statusModel', updateStateFromModels);
+    $scope.$watch('publishedToModel', updateStateFromModels);
+    $scope.$watch('visible_to', updateModelsFromState);
+
     function activate() {
         $scope.roles = RoleEndpoint.query();
     }
+
+    function updateStateFromModels() {
+        if ($scope.statusModel === 'draft') {
+            $scope.visible_to = 'draft';
+        }  else if ($scope.statusModel === 'published' && !$scope.publishedToModel) {
+            $scope.visible_to = 'everyone';
+        } else {
+            $scope.visible_to = $scope.publishedToModel;
+        }
+    }
+
+    function updateModelsFromState() {
+        if ($scope.visible_to === 'everyone') {
+            $scope.statusModel = 'published';
+            $scope.publishedToModel = '';
+        } else if ($scope.visible_to === 'draft') {
+            $scope.statusModel = 'draft';
+            $scope.publishedToModel = '';
+        } else {
+            $scope.statusModel = 'published';
+            $scope.publishedToModel = $scope.visible_to;
+        }
+    }
 }

app/post/views/mode-context-form-filter.directive.js

@@ -4,7 +4,9 @@ ModeContextFormFilterDirective.$inject = [];
 function ModeContextFormFilterDirective() {
     return {
         restrict: 'E',
-        scope: {},
+        scope: {
+            model: '='
+        },
         controller: ModeContextFormFilter,
         templateUrl: 'templates/posts/views/mode-context-form-filter.html'
     };
@@ -13,12 +15,24 @@ function ModeContextFormFilterDirective() {
 ModeContextFormFilter.$inject = ['$scope', 'FormEndpoint'];
 function ModeContextFormFilter($scope, FormEndpoint) {
     $scope.forms = [];
-    $scope.selectedForms = [];
+    $scope.showOnly = showOnly;
+    $scope.hide = hide;
 
     activate();
 
     function activate() {
         // Load forms
         $scope.forms = FormEndpoint.query();
     }
+
+    function showOnly(formId) {
+        $scope.model.splice(0, $scope.model.length, formId);
+    }
+
+    function hide(formId) {
+        var index = $scope.model.indexOf(formId);
+        if (index !== -1) {
+            $scope.model.splice(index, 1);
+        }
+    }
 }

app/post/views/post-filters.service.js

@@ -1,9 +1,13 @@
 module.exports = PostFiltersService;
 
-PostFiltersService.inject = ['_'];
-function PostFiltersService(_) {
+PostFiltersService.inject = ['_', 'FormEndpoint'];
+function PostFiltersService(_, FormEndpoint) {
     // Create initial filter state
-    var filterState = getDefaults();
+    var filterState = window.filterState = getDefaults();
+
+    // @todo take this out of the service
+    // but ensure it happens at the right times
+    activate();
 
     return {
         getDefaults: getDefaults,
@@ -14,6 +18,14 @@ function PostFiltersService(_) {
         hasFilters: hasFilters
     };
 
+    function activate() {
+        FormEndpoint.query().$promise.then(function (forms) {
+            if (filterState.form.length == 0) { // just in case of race conditions
+                Array.prototype.splice.apply(filterState.form, [0, 0].concat(_.pluck(forms, 'id')));
+            }
+        });
+    }
+
     // Get filterState
     function getFilters() {
         return filterState;
@@ -32,7 +44,8 @@ function PostFiltersService(_) {
             q: '',
             created_after: '',
             created_before: '',
-            status: 'all',
+            status: 'published',
+            published_to: '',
             center_point: '',
             within_km: '1',
             current_stage: [],
@@ -55,6 +68,8 @@ function PostFiltersService(_) {
         if (filters.center_point) {
             query.center_point = filters.center_point;
             query.within_km = filters.within_km || 10;
+        } else {
+            delete query.within_km;
         }
 
         return query;

app/post/views/post-view-list.directive.js

@@ -59,7 +59,7 @@ function PostListController(
         if (newValue !== oldValue) {
             getPostsForPagination();
         }
-    });
+    }, true);
 
     function activate() {
         // Initial load

app/setting/users/directives/filter-users.js

@@ -31,7 +31,7 @@ function (
                 $scope.filtersMenuOpen = false;
             };
 
-            $scope.applyFilters = function () {console.log($scope.filters);
+            $scope.applyFilters = function () {
                 // ngFormController automatically commits changes to the model ($scope.filters)
                 // Just close the dropdown
                 $scope.filtersMenuOpen = false;

server/www/templates/posts/views/filters/filter-category.html

@@ -1,9 +1,9 @@
 <fieldset ng-show="categories.length">
     <legend translate="nav.categories">Categories</legend>
 
-    <div class="form-field checkbox" ng-repeat="(index, category) in categories">
+    <div class="form-field checkbox" ng-repeat="(index, category) in categories" ng-class="{ overflow : ($index > 1) }">
         <label>
-            <input checklist-value="category.id" checklist-model="model" type="checkbox" name="selectedCategories" > {{ ::category.name }}
+            <input checklist-value="category.id" checklist-model="model" type="checkbox" name="selectedCategories" > {{ ::category.tag }}
         </label>
     </div>
     <span class="form-field-toggle" translate="nav.more">More</span>

server/www/templates/posts/views/filters/filter-date.html

@@ -6,7 +6,7 @@
           <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../img/iconic-sprite.svg#calendar"></use>
         </svg>
         <label class="hidden" translate="global_filter.filter_tabs.created_after">Start date</label>
-        <input type="text" placeholder="{{ 'global_filter.filter_tabs.created_after' | translate }}" id="P1206222737" class="picker__input" aria-haspopup="true" aria-expanded="false" aria-readonly="false" aria-owns="P1206222737_root" style="background-image: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGP6zwAAAgcBApocMXEAAAAASUVORK5CYII=&quot;);">
+        <input type="text" placeholder="{{ 'global_filter.filter_tabs.created_after' | translate }}" id="P1206222737" class="picker__input" aria-haspopup="true" aria-expanded="false" aria-readonly="false" aria-owns="P1206222737_root" style="background-image: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGP6zwAAAgcBApocMXEAAAAASUVORK5CYII=&quot;);" ng-model="createdAfterModel">
         <span class="date-joiner">to</span>
     </div>
 
@@ -15,7 +15,7 @@
           <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../img/iconic-sprite.svg#calendar"></use>
         </svg>
         <label class="hidden" translate="global_filter.filter_tabs.created_before">End date</label>
-        <input type="text" placeholder="{{ 'global_filter.filter_tabs.created_before' | translate }}" id="P396168542" class="picker__input" aria-haspopup="true" aria-expanded="false" aria-readonly="false" aria-owns="P396168542_root">
+        <input type="text" placeholder="{{ 'global_filter.filter_tabs.created_before' | translate }}" id="P396168542" class="picker__input" aria-haspopup="true" aria-expanded="false" aria-readonly="false" aria-owns="P396168542_root" ng-model="createdBeforeModel">
     </div>
 
 </fieldset>

server/www/templates/posts/views/filters/filter-form.html

@@ -1,10 +1,15 @@
 <fieldset>
     <legend translate="app.surveys">Surveys</legend>
 
-    <div class="form-field checkbox" ng-repeat="(index, form) in forms">
+    <div class="form-field checkbox" ng-repeat="(index, form) in forms" ng-class="{ overflow : ($index > 1) }">
         <label>
             <input checklist-value="form.id" checklist-model="model" type="checkbox" name="selectedForms" > {{ ::form.name }}
         </label>
     </div>
+    <div class="form-field checkbox" ng-class="{ overflow : (forms.length > 2) }">
+        <label>
+            <input checklist-value="'none'" checklist-model="model" type="checkbox" name="selectedForms" > <span translate="nav.unknown">Unknown</span>
+        </label>
+    </div>
     <span class="form-field-toggle" translate="nav.more">More</span>
 </fieldset>