Merge pull request #521 from fratzinger/count

Count - Getter/Action, Model methods & renderless data component v3.11.0

Author: marshallswain

docs/3.0-major-release.md

@@ -84,14 +84,18 @@ This behavior exactly matches the new `useFind` utility.
 
 ## Deprecations
 
-### The `keepCopiesInStore` Option<Badge text="deprecated" type="warning"/>
+### The `keepCopiesInStore` Option <Badge text="deprecated" type="warning"/>
 
 The `keepCopiesInStore` option is now deprecated.  This was a part of the "clone and commit" API which basically disabled the reason for creating the "clone and commit" API in the first place.
 
 If you're not familiar with the Feathers-Vuex "clone and commit" API, you can learn more about the [built-in data modeling](./model-classes.md) API and the section about [Working with Forms](./feathers-vuex-forms.md#the-clone-and-commit-pattern).
 
 The `keepCopiesInStore` feature is set to be removed in Feathers-Vuex 4.0.
 
-### Auth Plugin State: `user`<Badge text="deprecated" type="warning"/>
+### Auth Plugin State: `user` <Badge text="deprecated" type="warning"/>
 
 As described, earlier on this page, since the Auth Plugin's `user` state is no longer reactive and has been replaced by a `user` getter that IS reactive, the `user` state will be removed in the Feathers-Vuex 4.0.
+
+### Renderless Data Components: `query`, `fetchQuery` and `temps` <Badge text="deprecated type="warning">
+
+To keep consistency with mixins and the composition API it's preferred to use `params` and `fetchParams` instead of the old `query` and `fetchQuery` for renderless data components. Also the `:temps="true"` is deprecated in favour of `:params="{ query: {}, temps: true }"`. This way additional params can be passed to the server if you need some more magic like `$populateParams`.

docs/data-components.md

@@ -156,6 +156,34 @@ created () {
 }
 ```
 
+### count(params) <Badge text="3.11.0+" />
+
+Model classes have a `count` method, which is a proxy to the `count` action. On the Feathers server, `$limit: 0` results in a fast count query. (./service-plugin.html#find-params).
+
+> **Note:** it only works for services with enabled pagination!
+
+```js
+// In your Vue component
+async created () {
+  const { Todo } = this.$FeathersVuex.api
+  const todosCount = await Todo.count({ query: { priority: 'critical' }})
+  // or
+  Todo.count().then((total) => { this.todoCount = total })
+}
+```
+
+### countInStore(params) <Badge text="3.11.0+" />
+
+Model classes have a `countInStore` method, which is a proxy to the [`count` getter](./service-plugin.html#Service-Getters).
+
+```js
+// In your Vue component
+created () {
+  const { Todo } = this.$FeathersVuex.api
+  const todosCount = Todo.countInStore({ query: { priority: 'critical' }})
+}
+```
+
 ### get(id, params)
 
 Model classes have a `get` method, which is a proxy to the [`get` action](./service-plugin.html#get-id-or-get-id-params).   <Badge text="1.7.0+" /> Notice that the signature is more Feathers-like, and doesn't require using an array to passing both id and params.

docs/model-classes.md

@@ -199,7 +199,9 @@ Service modules include the following getters:
 
 - `list {Array}` - an array of items. The array form of `keyedById`  Read only.
 - `find(params) {Function}` - a helper function that allows you to use the [Feathers Adapter Common API](https://docs.feathersjs.com/api/databases/common) and [Query API](https://docs.feathersjs.com/api/databases/querying) to pull data from the store.  This allows you to treat the store just like a local Feathers database adapter (but without hooks).
-  - `params {Object}` - an object with a `query` object and an optional `paginate` boolean property. The `query` is in the FeathersJS query format.  You can set `params.paginate` to `false` to disable pagination for a single request.
+  - `params {Object}` - an object with a `query` object and optional `paginate` and `temps` boolean properties. The `query` is in the FeathersJS query format. You can set `params.paginate` to `false` to disable pagination for a single request.
+- `count(params) {Function}` - a helper function that counts items in the store matching the provided query in the params and returns this number <Badge text="3.11.0+" />
+  - `params {Object}` - an object with a `query` object and an optional `temps` boolean property.
 - `get(id[, params]) {Function}` - a function that allows you to query the store for a single item, by id.  It works the same way as `get` requests in Feathers database adapters.
   - `id {Number|String}` - the id of the data to be retrieved by id from the store.
   - `params {Object}` - an object containing a Feathers `query` object.
@@ -294,6 +296,21 @@ See the section about pagination, below, for more information that is applicable
 
 The `afterFind` action is called by the `find` action after a successful response is added to the store.  It is called with the current response.  By default, it is a no-op (it literally does nothing), and is just a placeholder for you to use when necessary.  See the sections on [customizing the default store](#Customizing-a-Service’s-Default-Store) and [Handling custom server responses](./common-patterns.html#Handling-custom-server-responses) for example usage.
 
+### `count(params)` <Badge text="3.11.0+" />
+
+Count items on the server matching the provided query.
+
+- `params {Object}` - An object containing a `query` object. In the background `$limit: 0` will be added to the `query` to perform a (fast) counting query against the database.
+
+> **Note:** it only works for services with enabled pagination!
+
+```js
+let params = {query: {completed: false}}
+store.dispatch('todos/count', params)
+```
+
+This will run a (fast) counting query against the database and return a page object with the total and an empty data array.
+
 ### `get(id)` or `get([id, params])`
 
 Query a single record from the server & add to Vuex store

docs/service-plugin.md

@@ -0,0 +1,122 @@
+import { randomString } from './utils'
+
+export default {
+  props: {
+    service: {
+      type: String,
+      required: true
+    },
+    params: {
+      type: Object,
+      default: () => {
+        return {
+          query: {}
+        }
+      }
+    },
+    queryWhen: {
+      type: [Boolean, Function],
+      default: true
+    },
+    // If separate params are desired to fetch data, use fetchParams
+    // The watchers will automatically be updated, so you don't have to write 'fetchParams.query.propName'
+    fetchParams: {
+      type: Object
+    },
+    watch: {
+      type: [String, Array],
+      default: () => []
+    },
+    local: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data: () => ({
+    isCountPending: false,
+    serverTotal: null
+  }),
+  computed: {
+    total() {
+      if (!this.local) {
+        return this.serverTotal
+      } else {
+        const { params, service, $store, temps } = this
+        return params ? $store.getters[`${service}/count`](params) : 0
+      }
+    },
+    scope() {
+      const { total, isCountPending } = this
+
+      return { total, isCountPending }
+    }
+  },
+  methods: {
+    findData() {
+      const params = this.fetchParams || this.params
+
+      if (
+        typeof this.queryWhen === 'function'
+          ? this.queryWhen(this.params)
+          : this.queryWhen
+      ) {
+        this.isCountPending = true
+
+        if (params) {
+          return this.$store
+            .dispatch(`${this.service}/count`, params)
+            .then(response => {
+              this.isCountPending = false
+              this.serverTotal = response
+            })
+        }
+      }
+    },
+    fetchData() {
+      if (!this.local) {
+        if (this.params) {
+          return this.findData()
+        } else {
+          // TODO: access debug boolean from the store config, somehow.
+          // eslint-disable-next-line no-console
+          console.log(
+            `No query and no id provided, so no data will be fetched.`
+          )
+        }
+      }
+    }
+  },
+  created() {
+    if (!this.$FeathersVuex) {
+      throw new Error(
+        `You must first Vue.use the FeathersVuex plugin before using the 'FeathersVuexFind' component.`
+      )
+    }
+    if (!this.$store.state[this.service]) {
+      throw new Error(
+        `The '${this.service}' plugin not registered with feathers-vuex`
+      )
+    }
+
+    const watch = Array.isArray(this.watch) ? this.watch : [this.watch]
+
+    if (this.fetchParams || this.params) {
+      watch.forEach(prop => {
+        if (typeof prop !== 'string') {
+          throw new Error(`Values in the 'watch' array must be strings.`)
+        }
+        if (this.fetchParams) {
+          if (prop.startsWith('params')) {
+            prop = prop.replace('params', 'fetchParams')
+          }
+        }
+        this.$watch(prop, this.fetchData)
+      })
+
+      this.fetchData()
+    }
+  },
+  render() {
+    return this.$scopedSlots.default(this.scope)
+  }
+}

src/FeathersVuexCount.ts

@@ -20,6 +20,22 @@ export default {
     fetchQuery: {
       type: Object
     },
+    /**
+     * Can be used in place of the `query` prop to provide more params. Only params.query is
+     * passed to the getter.
+     */
+    params: {
+      type: Object,
+      default: null
+    },
+    /**
+     * Can be used in place of the `fetchQuery` prop to provide more params. Only params.query is
+     * passed to the getter.
+     */
+    fetchParams: {
+      type: Object,
+      default: null
+    },
     watch: {
       type: [String, Array],
       default() {
@@ -58,7 +74,9 @@ export default {
   computed: {
     items() {
       const { query, service, $store, temps } = this
-      const params = { query, temps }
+      let { params } = this
+
+      params = params || { query, temps }
 
       return query ? $store.getters[`${service}/find`](params).data : []
     },
@@ -94,16 +112,21 @@ export default {
   methods: {
     findData() {
       const query = this.fetchQuery || this.query
+      let params = this.fetchParams || this.params
 
       if (
         typeof this.queryWhen === 'function'
-          ? this.queryWhen(this.query)
+          ? this.queryWhen(this.params || this.query)
           : this.queryWhen
       ) {
         this.isFindPending = true
 
-        if (query) {
-          const params = { query, qid: this.qid || 'default' }
+        if (params || query) {
+          if (params) {
+            params = Object.assign({}, params, { qid: this.qid || 'default' })
+          } else {
+            params = { query, qid: this.qid || 'default' }
+          }
 
           return this.$store
             .dispatch(`${this.service}/find`, params)
@@ -118,7 +141,7 @@ export default {
     },
     fetchData() {
       if (!this.local) {
-        if (this.query) {
+        if (this.params || this.query) {
           return this.findData()
         } else {
           // TODO: access debug boolean from the store config, somehow.
@@ -144,7 +167,7 @@ export default {
 
     const watch = Array.isArray(this.watch) ? this.watch : [this.watch]
 
-    if (this.fetchQuery || this.query) {
+    if (this.fetchQuery || this.query || this.params) {
       watch.forEach(prop => {
         if (typeof prop !== 'string') {
           throw new Error(`Values in the 'watch' array must be strings.`)
@@ -154,6 +177,11 @@ export default {
             prop = prop.replace('query', 'fetchQuery')
           }
         }
+        if (this.fetchParams) {
+          if (prop.startsWith('params')) {
+            prop = prop.replace('params', 'fetchParams')
+          }
+        }
         this.$watch(prop, this.fetchData)
       })
 

src/FeathersVuexFind.ts

@@ -188,6 +188,14 @@ export default function makeBaseModel(options: FeathersVuexOptions) {
       return this._getters('find', params)
     }
 
+    public static count(params?: Params) {
+      return this._dispatch('count', params)
+    }
+
+    public static countInStore(params?: Params) {
+      return this._getters('count', params)
+    }
+
     public static get(id: Id, params?: Params) {
       if (params) {
         return this._dispatch('get', [id, params])

src/service-module/make-base-model.ts

@@ -55,7 +55,7 @@ export default function makeServiceActions(service: Service<any>) {
         commit('setPending', 'get')
         return service
           .get(id, params)
-          .then(async function(item) {
+          .then(async function (item) {
             dispatch('addOrUpdate', item)
             commit('unsetPending', 'get')
             return state.keyedById[id]
@@ -139,7 +139,7 @@ export default function makeServiceActions(service: Service<any>) {
 
       return service
         .update(id, data, params)
-        .then(async function(item) {
+        .then(async function (item) {
           dispatch('addOrUpdate', item)
           commit('unsetPending', 'update')
           return state.keyedById[id]
@@ -169,7 +169,7 @@ export default function makeServiceActions(service: Service<any>) {
 
       return service
         .patch(id, data, params)
-        .then(async function(item) {
+        .then(async function (item) {
           dispatch('addOrUpdate', item)
           commit('unsetPending', 'patch')
           return state.keyedById[id]
@@ -213,6 +213,22 @@ export default function makeServiceActions(service: Service<any>) {
   }
 
   const actions = {
+    count({ dispatch }, params) {
+      params = params || {}
+      params = fastCopy(params)
+
+      if (!params.query) {
+        throw 'params must contain a query-object'
+      }
+
+      params.query.$limit = 0 // <- limit 0 in feathers is a fast count query
+
+      return dispatch('find', params)
+        .then(response => {
+          return response.total || response.length
+        })
+        .catch(error => dispatch('handleFindError', { params, error }))
+    },
     /**
      * Handle the response from the find action.
      *

src/service-module/service-module.actions.ts

@@ -73,6 +73,19 @@ export default function makeServiceGetters() {
         data: values
       }
     },
+    count: (state, getters) => params => {
+      if (isRef(params)) {
+        params = params.value
+      }
+      if (!params.query) {
+        throw 'params must contain a query-object'
+      }
+
+      const cleanQuery = _omit(params.query, FILTERS)
+      params.query = cleanQuery
+
+      return getters.find(state)(params).total
+    },
     get: ({ keyedById, tempsById, idField, tempIdField }) => (
       id,
       params = {}