Event filter fix for map filter and Events Dashboard (#355)

* initial fix

* remove comments

Author: ryanslatten

service/src/routes/events.ts

@@ -211,16 +211,16 @@ function EventRoutes(app: express.Application, security: { authentication: authe
       if (req.parameters!.userId) {
         filter.userId = req.parameters!.userId
       }
-      const limit = req.query!.limit || 20
-      const start = req.query!.start || 0
-      EventModel.getEvents({ access: req.access, filter: filter, populate: req.parameters!.populate, projection: req.parameters!.projection, limit: limit, start: start }, (err, events, totalCount) => {
+      const pageSize = parseInt(String(req.query.page_size)) || parseInt(String(req.query.limit)) || 20
+      const page = parseInt(String(req.query.page)) || parseInt(String(req.query.start)) || 0
+      EventModel.getEvents({ access: req.access, filter: filter, populate: req.parameters!.populate, projection: req.parameters!.projection, limit: pageSize, start: page }, (err, events, totalCount) => {
         if (err) {
           return next(err);
         }
         if (req.query.includePagination) {
           res.json({
-            pageSize: limit,
-            pageIndex: start,
+            pageSize: pageSize,
+            page: page,
             items: events!.map((event) => {
               return event.toObject({ access: req.access!, projection: req.parameters!.projection });
             }),

web-app/admin/src/app/admin/admin-event/events.service.ts

@@ -12,6 +12,7 @@ export interface SearchOptions {
     page?: number;
     page_size?: number;
     userId?: string;
+    state?: string;
 }
 
 interface EventsResponse {
@@ -35,10 +36,13 @@ export class EventsService {
             params = params.set('term', options.term);
         }
         if (options.page !== undefined) {
-            params = params.set('start', String(options.page));
+            params = params.set('page', String(options.page));
         }
         if (options.page_size !== undefined) {
-            params = params.set('limit', String(options.page_size));
+            params = params.set('page_size', String(options.page_size));
+        }
+        if (options.state !== undefined) {
+            params = params.set('state', options.state);
         }
         if (options.teamId !== undefined) {
             params = params.set('teamId', options.teamId);

web-app/admin/src/ng1/admin/events/events.component.js

@@ -9,68 +9,83 @@ class AdminEventsController {
     this.UserService = UserService;
 
     this.events = [];
+    this.totalEvents = 0;
     this.filter = 'active'; // possible values all, active, complete
     this.page = 0;
     this.itemsPerPage = 10;
     this.eventSearch = '';
+    this.searchTimeout = null;
 
     this.projection = {
       name: true,
       description: true,
       acl: true,
       complete: true
     };
-
-    // For some reason angular is not calling into filter function with correct context
-    this.filterEvents = this._filterEvents.bind(this);
-    this.filterComplete = this._filterComplete.bind(this);
   }
 
   $onInit() {
-    this.Event.query(
-      {
-        state: 'all',
-        populate: false,
-        projection: JSON.stringify(this.projection)
-      },
-      (events) => {
-        this.events = events;
-      }
-    );
+    this.loadEvents();
+  }
+
+  loadEvents() {
+    const params = {
+      state: this.filter,
+      populate: false,
+      projection: JSON.stringify(this.projection),
+      page: this.page,
+      page_size: this.itemsPerPage,
+      includePagination: true
+    };
+
+    if (this.eventSearch && this.eventSearch.trim()) {
+      params.term = this.eventSearch.trim();
+    }
+
+    this.Event.queryWithPagination(params, (response) => {
+      this.events = response.items || [];
+      this.totalEvents = response.totalCount || 0;
+    });
   }
 
   handleSearchChange() {
-    const filtered = this.events.filter((event) => this._filterEvents(event));
+    if (this.searchTimeout) {
+      clearTimeout(this.searchTimeout);
+    }
+    this.searchTimeout = setTimeout(() => {
+      this.page = 0;
+      this.loadEvents();
+    }, 300);
+  }
+
+  handleFilterChange() {
+    this.page = 0;
+    this.loadEvents();
+  }
 
-    // If there are filtered results, reset to page 0, else keep the current page
-    this.page = filtered.length > 0 ? 0 : this.page;
+  handlePageChange() {
+    this.loadEvents();
   }
 
-  _filterEvents(event) {
-    const searchTerm = this.eventSearch.trim().toLowerCase();
-    if (!searchTerm) {
-      return true;
+  nextPage() {
+    if ((this.page + 1) * this.itemsPerPage < this.totalEvents) {
+      this.page++;
+      this.loadEvents();
     }
-    const nameMatches = event.name.toLowerCase().includes(searchTerm);
-    const descriptionMatches =
-      event.description && event.description.toLowerCase().includes(searchTerm);
-    return nameMatches || descriptionMatches;
-  }
-
-  _filterComplete(event) {
-    switch (this.filter) {
-      case 'all':
-        return true;
-      case 'active':
-        return !event.complete;
-      case 'complete':
-        return event.complete;
+  }
+
+  previousPage() {
+    if (this.page > 0) {
+      this.page--;
+      this.loadEvents();
     }
   }
 
   reset() {
     this.page = 0;
     this.eventSearch = '';
+    this.filter = 'active';
+    this.loadEvents();
   }
 
   newEvent() {

web-app/admin/src/ng1/admin/events/events.html

@@ -9,53 +9,27 @@
   <div class="row">
     <div class="col-md-3">
       <ul class="nav nav-pills nav-stacked">
-        <li
-          ng-click="$ctrl.page = 0; $ctrl.filter='active'"
-          ng-class="{active: $ctrl.filter=='active'}"
-        >
-          <a href="javascript:void(0);"
-            >Active
-            <span class="badge pull-right"
-              >{{($ctrl.filteredEvents | filter:{complete:
-              '!true'}).length}}</span
-            ></a
-          >
+        <li ng-click="$ctrl.filter='active'; $ctrl.handleFilterChange()" ng-class="{active: $ctrl.filter=='active'}">
+          <a href="javascript:void(0);">Active
+            <span class="badge pull-right" ng-if="$ctrl.filter=='active'">{{$ctrl.totalEvents}}</span></a>
         </li>
-        <li
-          ng-click="$ctrl.page = 0; $ctrl.filter='complete'"
-          ng-class="{active: $ctrl.filter=='complete'}"
-        >
-          <a href="javascript:void(0);"
-            >Complete
-            <span class="badge pull-right"
-              >{{($ctrl.filteredEvents | filter:{complete: true}).length}}</span
-            ></a
-          >
+        <li ng-click="$ctrl.filter='complete'; $ctrl.handleFilterChange()"
+          ng-class="{active: $ctrl.filter=='complete'}">
+          <a href="javascript:void(0);">Complete
+            <span class="badge pull-right" ng-if="$ctrl.filter=='complete'">{{$ctrl.totalEvents}}</span></a>
         </li>
-        <li
-          ng-click="$ctrl.page = 0; $ctrl.filter='all'"
-          ng-class="{active: $ctrl.filter=='all'}"
-        >
-          <a href="javascript:void(0);"
-            >All
-            <span class="badge pull-right"
-              >{{$ctrl.filteredEvents.length}}</span
-            ></a
-          >
+        <li ng-click="$ctrl.filter='all'; $ctrl.handleFilterChange()" ng-class="{active: $ctrl.filter=='all'}">
+          <a href="javascript:void(0);">All
+            <span class="badge pull-right" ng-if="$ctrl.filter=='all'">{{$ctrl.totalEvents}}</span></a>
         </li>
       </ul>
 
       <hr />
       <form class="form">
         <div class="top-gap">
           <label>Search</label>
-          <input
-            type="text"
-            class="form-control"
-            placeholder="event name, description"
-            ng-model="$ctrl.eventSearch"
-            ng-change="$ctrl.handleSearchChange()"
-          />
+          <input type="text" class="form-control" placeholder="event name, description" ng-model="$ctrl.eventSearch"
+            ng-change="$ctrl.handleSearchChange()" />
         </div>
       </form>
       <hr />
@@ -73,11 +47,7 @@
           </div>
 
           <form class="navbar-form navbar-right" role="search">
-            <button
-              type="submit"
-              class="btn btn-default"
-              ng-click="$ctrl.newEvent()"
-            >
+            <button type="submit" class="btn btn-default" ng-click="$ctrl.newEvent()">
               New Event
             </button>
           </form>
@@ -87,10 +57,7 @@
       <div class="row">
         <div class="col-md-12">
           <div class="admin-table">
-            <div
-              class="well-item"
-              ng-repeat="e in ($ctrl.filteredEvents = ($ctrl.events | filter:$ctrl.filterEvents)) | filter:$ctrl.filterComplete | orderBy:'name' | offset: $ctrl.page*$ctrl.itemsPerPage | limitTo:$ctrl.itemsPerPage"
-            >
+            <div class="well-item" ng-repeat="e in $ctrl.events">
               <div class="row pointer" ng-click="$ctrl.gotoEvent(e)">
                 <div class="col-md-8">
                   <div class="right-gap pull-left">
@@ -100,18 +67,12 @@
                   <div class="muted">{{e.description}}</div>
                 </div>
                 <div class="col-md-4">
-                  <button
-                    class="btn btn-sm btn-danger pull-right admin-user-button"
-                    ng-if="$ctrl.hasDeletePermission(e)"
-                    ng-click="$ctrl.deleteEvent($event, e)"
-                  >
+                  <button class="btn btn-sm btn-danger pull-right admin-user-button"
+                    ng-if="$ctrl.hasDeletePermission(e)" ng-click="$ctrl.deleteEvent($event, e)">
                     Delete
                   </button>
-                  <button
-                    class="btn btn-sm btn-default pull-right"
-                    ng-if="$ctrl.hasUpdatePermission(e)"
-                    ng-click="$ctrl.editEvent($event, e)"
-                  >
+                  <button class="btn btn-sm btn-default pull-right" ng-if="$ctrl.hasUpdatePermission(e)"
+                    ng-click="$ctrl.editEvent($event, e)">
                     Edit
                   </button>
                 </div>
@@ -122,20 +83,10 @@
             <div class="col-md-12">
               <ul class="pager pull-right">
                 <li ng-class="{'disabled': $ctrl.page == 0}">
-                  <a
-                    href="javascript:void(0);"
-                    ng-click="$ctrl.page == 0 || ($ctrl.page=$ctrl.page-1)"
-                    >&larr; Previous</a
-                  >
+                  <a href="javascript:void(0);" ng-click="$ctrl.previousPage()">&larr; Previous</a>
                 </li>
-                <li
-                  ng-class="{'disabled': $ctrl.page >= ($ctrl.filteredEvents.length/$ctrl.itemsPerPage) - 1}"
-                >
-                  <a
-                    href="javascript:void(0);"
-                    ng-click="$ctrl.page >= ($ctrl.filteredEvents.length/$ctrl.itemsPerPage) - 1 || ($ctrl.page=$ctrl.page+1)"
-                    >Next&rarr;</a
-                  >
+                <li ng-class="{'disabled': ($ctrl.page + 1) * $ctrl.itemsPerPage >= $ctrl.totalEvents}">
+                  <a href="javascript:void(0);" ng-click="$ctrl.nextPage()">Next&rarr;</a>
                 </li>
               </ul>
             </div>
@@ -144,4 +95,4 @@
       </div>
     </div>
   </div>
-</div>
+</div>

web-app/admin/src/ng1/factories/event.resource.js

@@ -1,7 +1,7 @@
 function Event($rootScope, $resource) {
   const Event = $resource('/api/events/:id', {
     id: '@id'
-  },{
+  }, {
     get: {
       method: 'GET',
       responseType: 'json'
@@ -22,6 +22,11 @@ function Event($rootScope, $resource) {
       isArray: true,
       responseType: 'json'
     },
+    queryWithPagination: {
+      method: 'GET',
+      responseType: 'json',
+      isArray: false
+    },
     count: {
       method: 'GET',
       url: '/api/events/count',
@@ -101,7 +106,7 @@ function Event($rootScope, $resource) {
     }
   });
 
-  Event.prototype.$save = function(success, error) {
+  Event.prototype.$save = function (success, error) {
     if (this.id) {
       this.$update(success, error);
     } else {
@@ -118,7 +123,7 @@ function EventAccess($resource) {
   const EventAccess = $resource('/api/events/:eventId/acl', {
     eventId: '@eventId',
     userId: '@userId'
-  },{
+  }, {
     update: {
       method: 'PUT',
       headers: {

web-app/src/app/event/event.service.ts

@@ -57,7 +57,7 @@ export class EventService {
     private locationService: LocationService,
     private observationService: ObservationService,
     private localStorageService: LocalStorageService
-  ) {}
+  ) { }
 
   init() {
     this.filterService.addListener(this);
@@ -82,7 +82,19 @@ export class EventService {
 
   query(options?: any): Observable<any> {
     options = options || {};
-    return this.httpClient.get<any>("/api/events/", options);
+    let params = new HttpParams();
+
+    for (const key of Object.keys(options)) {
+      if (options[key] !== undefined && options[key] !== null) {
+        params = params.set(key, String(options[key]));
+      }
+    }
+
+    if (!options.limit && !options.page_size) {
+      params = params.set('limit', '100');
+    }
+
+    return this.httpClient.get<any>("/api/events/", { params });
   }
 
   addFeed(eventId: string, feed: any): Observable<any> {
@@ -541,7 +553,7 @@ export class EventService {
         map(res => res.items)
       );
   }
-  
+
 
   isUserInEvent(user, event): boolean {
     if (!event) return false;