add count renderless data component

Author: fratzinger

src/FeathersVuexCount.ts

@@ -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/FeathersVuexFind.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/vue-plugin/vue-plugin.ts

@@ -8,6 +8,7 @@ import FeathersVuexGet from '../FeathersVuexGet'
 import FeathersVuexFormWrapper from '../FeathersVuexFormWrapper'
 import FeathersVuexInputWrapper from '../FeathersVuexInputWrapper'
 import FeathersVuexPagination from '../FeathersVuexPagination'
+import FeathersVuexCount from '../FeathersVuexCount'
 import { globalModels } from '../service-module/global-models'
 
 export const FeathersVuex = {
@@ -23,6 +24,7 @@ export const FeathersVuex = {
       Vue.component('FeathersVuexFormWrapper', FeathersVuexFormWrapper)
       Vue.component('FeathersVuexInputWrapper', FeathersVuexInputWrapper)
       Vue.component('FeathersVuexPagination', FeathersVuexPagination)
+      Vue.component('FeathersVuexCount', FeathersVuexCount)
     }
   }
 }