Merge pull request #528 from hamiltoes/feature/instance-status

Feature: per-instance pending status

Author: marshallswain

docs/model-classes.md

@@ -339,7 +339,9 @@ const todo = new Todo({ description: 'Do something!' })
 
 The examples above show instantiating a new Model instance without an `id` field. In this case, the record is not added to the Vuex store.  If you instantiate a record **with an `id`** field, it **will** get added to the Vuex store. *Note: This field is customizable using the `idField` option for this service.*
 
-Now that we have Model instances, let's take a look at the functionality they provide. Each instance will include the following methods:
+Now that we have Model instances, let's take a look at the functionality they provide.
+
+Each instance will include the following methods:
 
 - `.save()`
 - `.create()`
@@ -349,6 +351,15 @@ Now that we have Model instances, let's take a look at the functionality they pr
 - `.commit()`
 - `.reset()`
 
+and the following readonly attributes:
+
+- `isCreatePending` - `create` is currently pending on this model
+- `isUpdatePending` - `update` is currently pending on this model
+- `isPatchPending` - `patch` is currently pending on this model
+- `isRemovePending` - `remove` is currently pending on this model
+- `isSavePending` - Any of `create`, `update` or `patch` is currently pending on this model
+- `isPending` - Any method is currently pending on this model
+
 *Remember, if a record already has an attribute with any of these method names, it will be overwritten with the method.*
 
 These methods give access to many of the store `actions` and `mutations`.  Using Model instances, you no longer have to use `mapActions` for `create`, `patch`, `update`, or `remove`.  You also no longer have to use `mapMutations` for `createCopy`, `commitCopy`, or `resetCopy`.

docs/service-plugin.md

@@ -156,7 +156,12 @@ Each service comes loaded with the following default state:
     errorOnCreate: undefined,
     errorOnUpdate: undefined,
     errorOnPatch: undefined,
-    errorOnRemove: undefined
+    errorOnRemove: undefined,
+
+    isIdCreatePending: [],
+    isIdUpdatePending: [],
+    isIdPatchPending: [],
+    isIdRemovePending: [],
   }
 ```
 
@@ -193,6 +198,13 @@ The following state attribute will be populated with any request error, serializ
 - `errorOnPatch {Error}`
 - `errorOnRemo {Error}`
 
+The following state attributes allow you to bind to the pending state of requests *per item ID*
+
+- `isIdCreatePending {Array}` - Contains `id` if there's a pending `create` request for `id`.
+- `isIdUpdatePending {Array}` -Contains `id` if there's a pending `update` request for `id`.
+- `isIdPatchPending {Array}` - Contains `id` if there's a pending `patch` request for `id`.
+- `isIdRemovePending {Array}` - Contains `id` if there's a pending `remove` request for `id`.
+
 ## Service Getters
 
 Service modules include the following getters:
@@ -206,6 +218,15 @@ Service modules include the following getters:
   - `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.
 
+The following getters ease access to per-instance pending status
+
+- `isCreatePendingById(id) {Function}` - Check if `create` is pending for `id`
+- `isUpdatePendingById(id) {Function}` - Check if `update` is pending for `id`
+- `isPatchPendingById(id) {Function}` - Check if `patch` is pending for `id`
+- `isRemovePendingById(id) {Function}` - Check if `remove` is pending for `id`
+- `isSavePendingById(id) {Function}` - Check if `create`, `update`, or `patch` is pending for `id`
+- `isPendingById(id) {Function}` - Check if `create`, `update`, `patch` or `remove` is pending for `id`
+
 ## Service Mutations
 
 The following mutations are included in each service module.
@@ -262,7 +283,9 @@ Clears all data from `ids`, `keyedById`, and `currentId`
 The following mutations are called automatically by the service actions, and will rarely, if ever, need to be used manually.
 
 - `setPending(state, method)` - sets the `is${method}Pending` attribute to true
+- `setIdPending(state, { method, id })` - adds `id` to `isId${method}Pending` array
 - `unsetPending(state, method)` - sets the `is${method}Pending` attribute to false
+- `unsetIdPending(state, { method, id })` - removes `id` from `isId${method}Pending` array
 
 ### Mutations for Managing Errors
 

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

@@ -21,6 +21,7 @@ import _get from 'lodash/get'
 import { EventEmitter } from 'events'
 import { ModelSetupContext } from './types'
 import { Store } from 'vuex'
+import { GetterName } from './service-module.getters'
 
 const defaultOptions = {
   clone: false,
@@ -175,6 +176,37 @@ export default function makeBaseModel(options: FeathersVuexOptions) {
       return this
     }
 
+    /**
+     * Calls `getter`, passing this model's ID as the parameter
+     * @param getter name of getter to call
+     */
+    private getGetterWithId(getter: GetterName): unknown {
+      const { _getters, idField, tempIdField } = this
+        .constructor as typeof BaseModel
+      const id =
+        getId(this, idField) != null ? getId(this, idField) : this[tempIdField]
+      return _getters.call(this.constructor, getter, id)
+    }
+
+    get isCreatePending(): boolean {
+      return this.getGetterWithId('isCreatePendingById') as boolean
+    }
+    get isUpdatePending(): boolean {
+      return this.getGetterWithId('isUpdatePendingById') as boolean
+    }
+    get isPatchPending(): boolean {
+      return this.getGetterWithId('isPatchPendingById') as boolean
+    }
+    get isRemovePending(): boolean {
+      return this.getGetterWithId('isRemovePendingById') as boolean
+    }
+    get isSavePending(): boolean {
+      return this.getGetterWithId('isSavePendingById') as boolean
+    }
+    get isPending(): boolean {
+      return this.getGetterWithId('isPendingById') as boolean
+    }
+
     public static getId(record: Record<string, any>): string {
       const { idField } = this.constructor as typeof BaseModel
       return getId(record, idField)
@@ -214,7 +246,7 @@ export default function makeBaseModel(options: FeathersVuexOptions) {
      * @param method the vuex getter name without the namespace
      * @param payload if provided, the getter will be called as a function
      */
-    public static _getters(name: string, idOrParams?: any, params?: any) {
+    public static _getters(name: GetterName, idOrParams?: any, params?: any) {
       const { namespace, store } = this
 
       if (checkNamespace(namespace, this, options.debug)) {

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

@@ -99,6 +99,7 @@ export default function makeServiceActions(service: Service<any>) {
       params = params || {}
 
       commit('setPending', 'create')
+      commit('setIdPending', { method: 'create', id: tempIds })
 
       return service
         .create(data, params)
@@ -121,34 +122,39 @@ export default function makeServiceActions(service: Service<any>) {
 
             // response = state.keyedById[id]
           }
-          commit('unsetPending', 'create')
           commit('removeTemps', tempIds)
           return response
         })
         .catch(error => {
           commit('setError', { method: 'create', error })
-          commit('unsetPending', 'create')
           return Promise.reject(error)
         })
+        .finally(() => {
+          commit('unsetPending', 'create')
+          commit('unsetIdPending', { method: 'create', id: tempIds })
+        })
     },
 
     update({ commit, dispatch, state }, [id, data, params]) {
       commit('setPending', 'update')
+      commit('setIdPending', { method: 'update', id })
 
       params = fastCopy(params)
 
       return service
         .update(id, data, params)
         .then(async function (item) {
           dispatch('addOrUpdate', item)
-          commit('unsetPending', 'update')
           return state.keyedById[id]
         })
         .catch(error => {
           commit('setError', { method: 'update', error })
-          commit('unsetPending', 'update')
           return Promise.reject(error)
         })
+        .finally(() => {
+          commit('unsetPending', 'update')
+          commit('unsetIdPending', { method: 'update', id })
+        })
     },
 
     /**
@@ -157,6 +163,7 @@ export default function makeServiceActions(service: Service<any>) {
      */
     patch({ commit, dispatch, state }, [id, data, params]) {
       commit('setPending', 'patch')
+      commit('setIdPending', { method: 'patch', id })
 
       params = fastCopy(params)
 
@@ -171,14 +178,16 @@ export default function makeServiceActions(service: Service<any>) {
         .patch(id, data, params)
         .then(async function (item) {
           dispatch('addOrUpdate', item)
-          commit('unsetPending', 'patch')
           return state.keyedById[id]
         })
         .catch(error => {
           commit('setError', { method: 'patch', error })
-          commit('unsetPending', 'patch')
           return Promise.reject(error)
         })
+        .finally(() => {
+          commit('unsetPending', 'patch')
+          commit('unsetIdPending', { method: 'patch', id })
+        })
     },
 
     remove({ commit }, idOrArray) {
@@ -196,19 +205,22 @@ export default function makeServiceActions(service: Service<any>) {
       params = fastCopy(params)
 
       commit('setPending', 'remove')
+      commit('setIdPending', { method: 'remove', id })
 
       return service
         .remove(id, params)
         .then(item => {
           commit('removeItem', id)
-          commit('unsetPending', 'remove')
           return item
         })
         .catch(error => {
           commit('setError', { method: 'remove', error })
-          commit('unsetPending', 'remove')
           return Promise.reject(error)
         })
+        .finally(() => {
+          commit('unsetPending', 'remove')
+          commit('unsetIdPending', { method: 'remove', id })
+        })
     }
   }
 

src/service-module/service-module.getters.ts

@@ -10,6 +10,8 @@ import { globalModels as models } from './global-models'
 import _get from 'lodash/get'
 import _omit from 'lodash/omit'
 import { isRef } from '@vue/composition-api'
+import { ServiceState } from '..'
+import { Id } from '@feathersjs/feathers'
 
 const FILTERS = ['$sort', '$limit', '$skip', '$select']
 const OPERATORS = ['$in', '$nin', '$lt', '$lte', '$gt', '$gte', '$ne', '$or']
@@ -114,6 +116,24 @@ export default function makeServiceGetters() {
 
         return Model.copiesById[id]
       }
-    }
+    },
+
+    isCreatePendingById: ({ isIdCreatePending }: ServiceState) => (id: Id) =>
+      isIdCreatePending.includes(id),
+    isUpdatePendingById: ({ isIdUpdatePending }: ServiceState) => (id: Id) =>
+      isIdUpdatePending.includes(id),
+    isPatchPendingById: ({ isIdPatchPending }: ServiceState) => (id: Id) =>
+      isIdPatchPending.includes(id),
+    isRemovePendingById: ({ isIdRemovePending }: ServiceState) => (id: Id) =>
+      isIdRemovePending.includes(id),
+    isSavePendingById: (state: ServiceState, getters) => (id: Id) =>
+      getters.isCreatePendingById(id) ||
+      getters.isUpdatePendingById(id) ||
+      getters.isPatchPendingById(id),
+    isPendingById: (state: ServiceState, getters) => (id: Id) =>
+      getters.isSavePendingById(id) ||
+      getters.isRemovePendingById(id)
   }
 }
+
+export type GetterName = keyof ReturnType<typeof makeServiceGetters>

src/service-module/service-module.mutations.ts

@@ -16,6 +16,20 @@ import { globalModels as models } from './global-models'
 import _omit from 'lodash/omit'
 import _get from 'lodash/get'
 import _isObject from 'lodash/isObject'
+import { Id } from '@feathersjs/feathers'
+import { ServiceState } from '..'
+
+export type PendingServiceMethodName =
+  | 'find'
+  | 'get'
+  | 'create'
+  | 'update'
+  | 'patch'
+  | 'remove'
+export type PendingIdServiceMethodName = Exclude<
+  PendingServiceMethodName,
+  'find' | 'get'
+>
 
 export default function makeServiceMutations() {
   function addItems(state, items) {
@@ -374,24 +388,50 @@ export default function makeServiceMutations() {
       Vue.set(state.pagination, qid, newState)
     },
 
-    setPending(state, method: string): void {
+    setPending(state, method: PendingServiceMethodName): void {
       const uppercaseMethod = method.charAt(0).toUpperCase() + method.slice(1)
       state[`is${uppercaseMethod}Pending`] = true
     },
-    unsetPending(state, method: string): void {
+    unsetPending(state, method: PendingServiceMethodName): void {
       const uppercaseMethod = method.charAt(0).toUpperCase() + method.slice(1)
       state[`is${uppercaseMethod}Pending`] = false
     },
 
-    setError(state, payload: { method: string; error: Error }): void {
+    setIdPending(state, payload: { method: PendingIdServiceMethodName, id: Id | Id[] }): void {
+      const { method, id } = payload
+      const uppercaseMethod = method.charAt(0).toUpperCase() + method.slice(1)
+      const isIdMethodPending = state[`isId${uppercaseMethod}Pending`] as ServiceState['isIdCreatePending']
+      // if `id` is an array, ensure it doesn't have duplicates
+      const ids = Array.isArray(id) ? [...new Set(id)] : [id]
+      ids.forEach(id => {
+        if (typeof id === 'number' || typeof id === 'string') {
+          isIdMethodPending.push(id)
+        }
+      })
+    },
+    unsetIdPending(state, payload: { method: PendingIdServiceMethodName, id: Id | Id[] }): void {
+      const { method, id } = payload
+      const uppercaseMethod = method.charAt(0).toUpperCase() + method.slice(1)
+      const isIdMethodPending = state[`isId${uppercaseMethod}Pending`] as ServiceState['isIdCreatePending']
+      // if `id` is an array, ensure it doesn't have duplicates
+      const ids = Array.isArray(id) ? [...new Set(id)] : [id]
+      ids.forEach(id => {
+        const idx = isIdMethodPending.indexOf(id)
+        if (idx >= 0) {
+          Vue.delete(isIdMethodPending, idx)
+        }
+      })
+    },
+
+    setError(state, payload: { method: PendingServiceMethodName; error: Error }): void {
       const { method, error } = payload
       const uppercaseMethod = method.charAt(0).toUpperCase() + method.slice(1)
       state[`errorOn${uppercaseMethod}`] = Object.assign(
         {},
         serializeError(error)
       )
     },
-    clearError(state, method: string): void {
+    clearError(state, method: PendingServiceMethodName): void {
       const uppercaseMethod = method.charAt(0).toUpperCase() + method.slice(1)
       state[`errorOn${uppercaseMethod}`] = null
     }

src/service-module/service-module.state.ts

@@ -7,6 +7,7 @@ eslint
 import _omit from 'lodash/omit'
 
 import { MakeServicePluginOptions, Model } from './types'
+import { Id } from '@feathersjs/feathers'
 
 export interface ServiceStateExclusiveDefaults {
   ids: string[]
@@ -36,6 +37,11 @@ export interface ServiceStateExclusiveDefaults {
   }
   paramsForServer: string[]
   modelName?: string
+
+  isIdCreatePending: Id[]
+  isIdUpdatePending: Id[]
+  isIdPatchPending: Id[]
+  isIdRemovePending: Id[]
 }
 
 export interface ServiceState<M extends Model = Model> {
@@ -77,6 +83,10 @@ export interface ServiceState<M extends Model = Model> {
     default?: PaginationState
   }
   modelName?: string
+  isIdCreatePending: Id[]
+  isIdUpdatePending: Id[]
+  isIdPatchPending: Id[]
+  isIdRemovePending: Id[]
 }
 
 export interface PaginationState {
@@ -124,7 +134,12 @@ export default function makeDefaultState(options: MakeServicePluginOptions) {
     errorOnCreate: null,
     errorOnUpdate: null,
     errorOnPatch: null,
-    errorOnRemove: null
+    errorOnRemove: null,
+
+    isIdCreatePending: [],
+    isIdUpdatePending: [],
+    isIdPatchPending: [],
+    isIdRemovePending: [],
   }
 
   if (options.Model) {