Fix record selector, metric, chart values not refreshed when inline and bulk edit changes are applied to related records

client/web/compose/src/components/ModuleFields/Viewer/Record.vue

@@ -48,6 +48,8 @@ export default {
       recordValues: {},
 
       relRecords: [],
+
+      relatedModuleID: undefined,
     }
   },
 
@@ -84,6 +86,11 @@ export default {
 
   beforeDestroy () {
     this.setDefaultValues()
+    this.destroyEvents()
+  },
+
+  mounted () {
+    this.$root.$on('module-records-updated', this.refreshOnRelatedModuleUpdate)
   },
 
   methods: {
@@ -93,6 +100,12 @@ export default {
       resolveRecords: 'record/resolveRecords',
     }),
 
+    refreshOnRelatedModuleUpdate (module) {
+      if (this.relatedModuleID === module.moduleID) {
+        this.formatRecordValues(this.value)
+      }
+    },
+
     linkToRecord (recordID) {
       if (!this.recordPage || !recordID) {
         return ''
@@ -127,6 +140,8 @@ export default {
           const relatedModule = await this.findModuleByID({ namespaceID, moduleID: relatedField.options.moduleID })
           const relatedRecordIDs = new Set()
 
+          this.relatedModuleID = relatedModule.moduleID
+
           records.forEach(r => {
             const recordValue = relatedField.isMulti ? r.values[relatedField.name] : [r.values[relatedField.name]]
             recordValue.forEach(rID => relatedRecordIDs.add(rID))
@@ -197,6 +212,11 @@ export default {
       this.processing = false
       this.recordValues = {}
       this.relRecords = []
+      this.relatedModuleID = undefined
+    },
+
+    destroyEvents () {
+      this.$root.$off('module-records-updated', this.refreshOnRelatedModuleUpdate)
     },
   },
 }

client/web/compose/src/components/PageBlocks/ChartBase.vue

@@ -55,6 +55,8 @@ export default {
     this.refreshBlock(this.refresh)
 
     this.$root.$on('drill-down-chart', this.drillDown)
+
+    this.$root.$on('module-records-updated', this.refreshOnRelatedRecordsUpdate)
   },
 
   beforeDestroy () {
@@ -67,6 +69,12 @@ export default {
       findChartByID: 'chart/findByID',
     }),
 
+    refreshOnRelatedRecordsUpdate (module) {
+      if (this.filter.moduleID === module.moduleID) {
+        this.refresh()
+      }
+    },
+
     async fetchChart (params = {}) {
       const { chartID } = this.options
 
@@ -178,6 +186,7 @@ export default {
 
     destroyEvents () {
       this.$root.$off('drill-down-chart', this.drillDown)
+      this.$root.$off('module-records-updated', this.refreshOnRelatedRecordsUpdate)
     },
   },
 }

client/web/compose/src/components/PageBlocks/CommentBase.vue

@@ -224,9 +224,14 @@ export default {
     this.refreshBlock(this.refresh)
   },
 
+  mounted () {
+    this.$root.$on('module-records-updated', this.refreshOnRelatedRecordsUpdate)
+  },
+
   beforeDestroy () {
     this.abortRequests()
     this.setDefaultValues()
+    this.destroyEvents()
   },
 
   methods: {
@@ -239,6 +244,12 @@ export default {
       return user.name || user.handle || user.email || ''
     },
 
+    refreshOnRelatedRecordsUpdate (module) {
+      if (this.options.moduleID === module.moduleID) {
+        this.refresh()
+      }
+    },
+
     refresh () {
       if (!this.options.moduleID) {
       // Make sure block is properly configured
@@ -369,6 +380,10 @@ export default {
         cancel()
       })
     },
+
+    destroyEvents () {
+      this.$root.$off('module-records-updated', this.refreshOnRelatedRecordsUpdate)
+    },
   },
 }
 </script>

client/web/compose/src/components/PageBlocks/MetricBase.vue

@@ -95,6 +95,8 @@ export default {
     this.$root.$on('metric.update', this.refresh)
     this.$root.$on(`refetch-non-record-blocks:${this.page.pageID}`, this.refresh)
     this.$root.$on('drill-down-chart', this.drillDown)
+
+    this.$root.$on('module-records-updated', this.refreshOnRelatedRecordsUpdate)
   },
 
   beforeDestroy () {
@@ -233,10 +235,23 @@ export default {
       })
     },
 
+    refreshOnRelatedRecordsUpdate (module) {
+      const metrics = this.options.metrics
+
+      const hasMatchingModule = metrics.some((m) => {
+        return m.moduleID === module.moduleID
+      })
+
+      if (hasMatchingModule) {
+        this.refresh()
+      }
+    },
+
     destroyEvents () {
       this.$root.$off('metric.update', this.refresh)
       this.$root.$off(`refetch-non-record-blocks:${this.page.pageID}`, this.refresh)
       this.$root.$off('drill-down-chart', this.drillDown)
+      this.$root.$off('module-records-updated', this.refreshOnRelatedRecordsUpdate)
     },
   },
 }

client/web/compose/src/components/PageBlocks/RecordListBase.vue

@@ -1099,6 +1099,23 @@ export default {
       this.$root.$on(`page-block:validate:${this.uniqueID}`, this.validatePageBlock)
       this.$root.$on(`drill-down-recordList:${this.uniqueID}`, this.setDrillDownFilter)
       this.$root.$on(`refetch-non-record-blocks:${pageID}`, this.refreshAndResetPagination)
+
+      this.$root.$on('module-records-updated', this.refreshOnRelatedRecordsUpdate)
+    },
+
+    refreshOnRelatedRecordsUpdate (module) {
+      if (this.recordListModule.moduleID === module.moduleID) {
+        this.refresh(true)
+      } else {
+        const recordFields = this.fields.filter((f) => f.moduleField.kind === 'Record')
+        const hasMatchingModule = recordFields.some((r) => {
+          return r.moduleField.options.moduleID === module.moduleID
+        })
+
+        if (hasMatchingModule) {
+          this.refresh(false)
+        }
+      }
     },
 
     onFilter (filter = []) {
@@ -1803,7 +1820,6 @@ export default {
 
     onBulkUpdate () {
       this.selectedAllRecords = false
-      this.refresh(true)
     },
 
     editInlineField (record, field) {
@@ -1819,7 +1835,6 @@ export default {
     },
 
     onInlineEdit () {
-      this.refresh(true)
       this.onInlineEditClose()
     },
 
@@ -1918,6 +1933,7 @@ export default {
       this.$root.$off(`page-block:validate:${this.uniqueID}`, this.validatePageBlock)
       this.$root.$off(`drill-down-recordList:${this.uniqueID}`, this.setDrillDownFilter)
       this.$root.$off(`refetch-non-record-blocks:${pageID}`, this.refreshAndResetPagination)
+      this.$root.$off('module-records-updated', this.refreshOnRelatedRecordsUpdate)
     },
 
     handleAddRecord () {

client/web/compose/src/components/PageBlocks/RecordOrganizerBase.vue

@@ -251,6 +251,7 @@ export default {
 
   mounted () {
     this.$root.$on(`refetch-non-record-blocks:${this.page.pageID}`, this.refresh)
+    this.$root.$on('module-records-updated', this.refreshOnRelatedRecordsUpdate)
   },
 
   beforeDestroy () {
@@ -345,6 +346,12 @@ export default {
       }
     },
 
+    refreshOnRelatedRecordsUpdate (module) {
+      if (this.options.moduleID === module.moduleID) {
+        this.refresh()
+      }
+    },
+
     expandFilter () {
       const filter = []
 
@@ -518,6 +525,7 @@ export default {
 
     destroyEvents () {
       this.$root.$off(`refetch-non-record-blocks:${this.page.pageID}`, this.refresh)
+      this.$root.$off('module-records-updated', this.refreshOnRelatedRecordsUpdate)
     },
   },
 }

client/web/compose/src/mixins/record.js

@@ -185,6 +185,10 @@ export default {
           }
 
           this.toastSuccess(this.$t(`notification:record.${isNew ? 'create' : 'update'}Success`))
+
+          this.$root.$emit('module-records-updated', {
+            moduleID: this.module.moduleID,
+          })
         })
         .catch(this.toastErrorHandler(this.$t(`notification:record.${isNew ? 'create' : 'update'}Failed`)))
         .finally(() => {
@@ -239,6 +243,10 @@ export default {
             this.initialRecordState = this.record.clone()
 
             this.$router.push({ name: route, params: { ...this.$route.params, recordID: record.recordID } })
+
+            this.$root.$emit('module-records-updated', {
+              moduleID: this.module.moduleID,
+            })
           }
         })
         .catch(this.toastErrorHandler(this.$t(
@@ -335,6 +343,8 @@ export default {
           this.record = new compose.Record(this.module, {})
           this.initialRecordState = this.record.clone()
           this.$emit('save')
+
+          this.$root.$emit('module-records-updated', { moduleID })
         })
         .catch(this.toastErrorHandler(this.$t('notification:record.deleteBulkRecordUpdateFailed')))
         .finally(() => {

client/web/compose/src/store/record.js

@@ -38,16 +38,12 @@ export default function (ComposeAPI) {
       /**
        * Similar to fetchRecords but it only fetches unknown (not in set) ids
        */
-      async resolveRecords ({ commit, getters }, { namespaceID, moduleID, recordIDs }) {
+      async resolveRecords ({ commit }, { namespaceID, moduleID, recordIDs }) {
         if (recordIDs.length === 0) {
           // save ourselves some work
           return
         }
 
-        // exclude existing & make unique
-        const existing = new Set(getters.set.map(({ recordID }) => recordID))
-        recordIDs = [...new Set(recordIDs.filter(recordID => !existing.has(recordID)))]
-
         if (recordIDs.length === 0) {
           // Check for values again
           return
@@ -59,7 +55,6 @@ export default function (ComposeAPI) {
           commit(types.updateSet, set)
         }).finally(() => {
           commit(types.completed)
-          existing.clear()
           recordIDs = []
         })
       },
@@ -97,7 +92,7 @@ export default function (ComposeAPI) {
         const existing = new Set(state.set.map(({ recordID }) => recordID))
 
         set.forEach(newItem => {
-          const oldIndex = !existing.has(newItem.recordID) ? state.set.findIndex(({ recordID }) => recordID === newItem.recordID) : -1
+          const oldIndex = existing.has(newItem.recordID) ? state.set.findIndex(({ recordID }) => recordID === newItem.recordID) : -1
           if (oldIndex > -1) {
             state.set.splice(oldIndex, 1, newItem)
           } else {