Merge pull request #261 from fratzinger/patch-3

Update FeathersVuexFind.ts - pagination

Author: marshallswain

docs/components.md

@@ -315,6 +315,65 @@ export default {
 </script>
 ```
 
+### server-side pagination
+
+When you want to use server-side pagination you need to pass the ids from the server to vuex. It can be done by a combination of `query`, `fetchQuery` and `editScope` as described below. The `fetchQuery`-prop is only computed after items from the server arrived. The ids for the `find` getter as well as the total amount of available values `total` are extracted by the `edit-scope` function and stored in `data`:
+
+```html
+<template>
+  <FeathersVuexFind
+    :service="service"
+    :query="internalQuery"
+    :fetch-query="fetchQuery"
+    :edit-scope="getPaginationInfo"
+  >
+    <div slot-scope="{ items: todos }">
+      {{todos}}
+    </div>
+  </FeathersVuexFind>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      service: 'users',
+      ids: [],
+      query: {
+        isComplete: true
+      },
+      total: 0,
+      limit: 10,
+      skip: 0
+    };
+  },
+  computed: {
+    internalQuery() {
+      const { idField } = this.$store.state[this.service];
+      return {
+        [idField]: {
+          $in: this.ids
+        }
+      };
+    },
+    fetchQuery() {
+      return Object.assign({}, this.query, { $limit: this.limit, $skip: this.skip });
+    }
+  },
+  methods: {
+    getPaginationInfo (scope) {
+      const { queryInfo, pageInfo } = scope;
+
+      this.total = queryInfo.total;
+      if (pageInfo && pageInfo.ids) {
+        this.ids = pageInfo.ids;
+      }
+    }
+  }
+}
+</script>
+```
+
 ### Query when certain conditions are met
 
 Sometimes you only want to query the API server when certain conditions are met.  This example shows how to query the API server when the `userSearch` has as least three characters.  This property does not affect the internal `find` getter, so the `items` will still update when the `userSearch` property has fewer than three characters, just no API request will be made.  The `isFindPending` attribute is used to indicate when data is being loaded from the server.

src/FeathersVuexFind.ts

@@ -1,4 +1,5 @@
-import { randomString } from './utils'
+import { randomString, getQueryInfo } from './utils'
+import _get from 'lodash/get'
 
 export default {
   props: {
@@ -50,7 +51,9 @@ export default {
     }
   },
   data: () => ({
-    isFindPending: false
+    isFindPending: false,
+    queryId: null,
+    pageId: null
   }),
   computed: {
     items() {
@@ -62,9 +65,17 @@ export default {
     pagination() {
       return this.$store.state[this.service].pagination[this.qid]
     },
+    queryInfo() {
+      if (this.pagination == null || this.queryId == null) return {}
+      return _get(this.pagination, `[${this.queryId}]`) || {}
+    },
+    pageInfo() {
+      if (this.pagination == null || this.queryId == null || this.pageId == null) return {}
+      return _get(this.pagination, `[${this.queryId}][${this.pageId}]`) || {}
+    },
     scope() {
-      const { items, isFindPending, pagination } = this
-      const defaultScope = { isFindPending, pagination, items }
+      const { items, isFindPending, pagination, queryInfo, pageInfo } = this
+      const defaultScope = { isFindPending, pagination, items, queryInfo, pageInfo }
 
       return this.editScope(defaultScope) || defaultScope
     }
@@ -85,8 +96,11 @@ export default {
 
           return this.$store
             .dispatch(`${this.service}/find`, params)
-            .then(() => {
+            .then((response) => {
               this.isFindPending = false
+              const { queryId, pageId } = getQueryInfo(params, response)
+              this.queryId = queryId
+              this.pageId = pageId
             })
         }
       }