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

2023-09-12 12:59:54 +01:00 · 2023-09-12 12:59:54 +01:00 · 6284ac5af9
commit 6284ac5af9
parent 79791dc8d2
8 changed files with 97 additions and 9 deletions
--- a/client/web/compose/src/components/ModuleFields/Viewer/Record.vue
+++ b/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)
    },
  },
 }
--- a/client/web/compose/src/components/PageBlocks/ChartBase.vue
+++ b/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)
    },
  },
 }
--- a/client/web/compose/src/components/PageBlocks/CommentBase.vue
+++ b/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>
--- a/client/web/compose/src/components/PageBlocks/MetricBase.vue
+++ b/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)
    },
  },
 }
--- a/client/web/compose/src/components/PageBlocks/RecordListBase.vue
+++ b/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 () {
--- a/client/web/compose/src/components/PageBlocks/RecordOrganizerBase.vue
+++ b/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)
    },
  },
 }
--- a/client/web/compose/src/mixins/record.js
+++ b/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(() => {
--- a/client/web/compose/src/store/record.js
+++ b/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 {