From c38ff2aecf870631e39b9e949d9779096c0118a2 Mon Sep 17 00:00:00 2001
From: Kelani Tolulope <kelanik8@gmail.com>
Date: Mon, 18 Mar 2024 12:40:12 +0100
Subject: [PATCH] Refetch data based on prefilter value dependency changes

---
 .../components/ModuleFields/Editor/Record.vue | 27 +++++++++++++++++--
 .../components/PageBlocks/CalendarBase.vue    | 18 +++++++++++--
 .../src/components/PageBlocks/ChartBase.vue   | 22 +++++++++++----
 .../src/components/PageBlocks/CommentBase.vue | 18 +++++++++++--
 .../components/PageBlocks/GeometryBase.vue    | 18 +++++++++++--
 .../src/components/PageBlocks/IFrameBase.vue  | 23 +++++++++++++++-
 .../src/components/PageBlocks/MetricBase.vue  | 25 ++++++++++++-----
 .../components/PageBlocks/ProgressBase.vue    | 20 +++++++++++---
 .../components/PageBlocks/RecordEditor.vue    |  7 +++--
 .../components/PageBlocks/RecordListBase.vue  | 13 ++++++++-
 .../PageBlocks/RecordOrganizerBase.vue        | 20 +++++++++++---
 client/web/compose/src/lib/record-filter.js   | 13 +++++++++
 12 files changed, 195 insertions(+), 29 deletions(-)

diff --git a/client/web/compose/src/components/ModuleFields/Editor/Record.vue b/client/web/compose/src/components/ModuleFields/Editor/Record.vue
index 94a5b51ce..0a3eff817 100644
--- a/client/web/compose/src/components/ModuleFields/Editor/Record.vue
+++ b/client/web/compose/src/components/ModuleFields/Editor/Record.vue
@@ -166,7 +166,7 @@ import base from './base'
 import { debounce } from 'lodash'
 import { compose, NoID } from '@cortezaproject/corteza-js'
 import { mapActions, mapGetters } from 'vuex'
-import { evaluatePrefilter } from 'corteza-webapp-compose/src/lib/record-filter'
+import { evaluatePrefilter, isFieldInFilter } from 'corteza-webapp-compose/src/lib/record-filter'
 import Pagination from '../Common/Pagination.vue'
 
 export default {
@@ -282,6 +282,11 @@ export default {
 
   beforeDestroy () {
     this.setDefaultValues()
+    this.destroyEvents()
+  },
+
+  mounted () {
+    this.createEvents()
   },
 
   methods: {
@@ -292,6 +297,20 @@ export default {
       updateRecords: 'record/updateRecords',
     }),
 
+    createEvents () {
+      this.$root.$on('record-field-change', this.refetchOnPrefilterValueChange)
+    },
+
+    refetchOnPrefilterValueChange ({ fieldName }) {
+      const { prefilter } = this.field.options
+
+      if (isFieldInFilter(fieldName, prefilter)) {
+        const namespaceID = this.namespace.namespaceID
+        const moduleID = this.field.options.moduleID
+        this.fetchPrefiltered({ namespaceID, moduleID })
+      }
+    },
+
     getRecord (index = undefined) {
       const recordID = index !== undefined ? this.value[index] : this.value
       return (this.convert({ recordID }) || {}).value
@@ -369,7 +388,7 @@ export default {
       }
     },
 
-    fetchPrefiltered (q) {
+    fetchPrefiltered (q = this.filter) {
       this.processing = true
 
       // Support prefilters
@@ -523,6 +542,10 @@ export default {
       return label
     },
 
+    destroyEvents () {
+      this.$root.$off('record-field-change', this.refetchOnPrefilterValueChange)
+    },
+
     setDefaultValues () {
       this.processing = false
       this.query = ''
diff --git a/client/web/compose/src/components/PageBlocks/CalendarBase.vue b/client/web/compose/src/components/PageBlocks/CalendarBase.vue
index 058366aed..c33ab36c9 100644
--- a/client/web/compose/src/components/PageBlocks/CalendarBase.vue
+++ b/client/web/compose/src/components/PageBlocks/CalendarBase.vue
@@ -112,7 +112,7 @@ import listPlugin from '@fullcalendar/list'
 import { compose, NoID } from '@cortezaproject/corteza-js'
 import { BootstrapTheme } from '@fullcalendar/bootstrap'
 import { createPlugin } from '@fullcalendar/core'
-import { evaluatePrefilter } from 'corteza-webapp-compose/src/lib/record-filter'
+import { evaluatePrefilter, isFieldInFilter } from 'corteza-webapp-compose/src/lib/record-filter'
 
 /**
  * FullCalendar Corteza theme definition.
@@ -235,7 +235,7 @@ export default {
   },
 
   mounted () {
-    this.$root.$on('module-records-updated', this.refreshOnRelatedRecordsUpdate)
+    this.createEvents()
   },
 
   beforeDestroy () {
@@ -249,6 +249,19 @@ export default {
       findModuleByID: 'module/findByID',
     }),
 
+    createEvents () {
+      this.$root.$on('module-records-updated', this.refreshOnRelatedRecordsUpdate)
+      this.$root.$on('record-field-change', this.refetchOnPrefilterValueChange)
+    },
+
+    refetchOnPrefilterValueChange ({ fieldName }) {
+      const { feeds } = this.options
+
+      if (feeds.some(({ options }) => isFieldInFilter(fieldName, options.prefilter))) {
+        this.refresh()
+      }
+    },
+
     updateSize () {
       this.$nextTick(() => {
         this.api().updateSize()
@@ -423,6 +436,7 @@ export default {
 
     destroyEvents () {
       this.$root.$off('module-records-updated', this.refreshOnRelatedRecordsUpdate)
+      this.$root.$off('record-field-change', this.refetchOnPrefilterValueChange)
     },
   },
 }
diff --git a/client/web/compose/src/components/PageBlocks/ChartBase.vue b/client/web/compose/src/components/PageBlocks/ChartBase.vue
index e1489770a..24fff5fd4 100644
--- a/client/web/compose/src/components/PageBlocks/ChartBase.vue
+++ b/client/web/compose/src/components/PageBlocks/ChartBase.vue
@@ -19,7 +19,7 @@ import { mapActions } from 'vuex'
 import base from './base'
 import ChartComponent from '../Chart'
 import { NoID, compose } from '@cortezaproject/corteza-js'
-import { evaluatePrefilter } from 'corteza-webapp-compose/src/lib/record-filter'
+import { evaluatePrefilter, isFieldInFilter } from 'corteza-webapp-compose/src/lib/record-filter'
 
 export default {
   i18nOptions: {
@@ -54,10 +54,7 @@ export default {
   mounted () {
     this.fetchChart()
     this.refreshBlock(this.refresh)
-
-    this.$root.$on('drill-down-chart', this.drillDown)
-
-    this.$root.$on('module-records-updated', this.refreshOnRelatedRecordsUpdate)
+    this.createEvents()
   },
 
   beforeDestroy () {
@@ -70,6 +67,20 @@ export default {
       findChartByID: 'chart/findByID',
     }),
 
+    createEvents () {
+      this.$root.$on('drill-down-chart', this.drillDown)
+      this.$root.$on('module-records-updated', this.refreshOnRelatedRecordsUpdate)
+      this.$root.$on('record-field-change', this.refetchOnPrefilterValueChange)
+    },
+
+    refetchOnPrefilterValueChange ({ fieldName }) {
+      const { filter } = this.filter
+
+      if (isFieldInFilter(fieldName, filter)) {
+        this.refresh()
+      }
+    },
+
     refreshOnRelatedRecordsUpdate ({ moduleID, notPageID }) {
       if (this.filter.moduleID === moduleID && this.page.pageID !== notPageID) {
         this.refresh()
@@ -198,6 +209,7 @@ export default {
     destroyEvents () {
       this.$root.$off('drill-down-chart', this.drillDown)
       this.$root.$off('module-records-updated', this.refreshOnRelatedRecordsUpdate)
+      this.$root.$off('record-field-change', this.refetchOnPrefilterValueChange)
     },
   },
 }
diff --git a/client/web/compose/src/components/PageBlocks/CommentBase.vue b/client/web/compose/src/components/PageBlocks/CommentBase.vue
index 3b2ad43e0..30ea7a75c 100644
--- a/client/web/compose/src/components/PageBlocks/CommentBase.vue
+++ b/client/web/compose/src/components/PageBlocks/CommentBase.vue
@@ -102,7 +102,7 @@ import base from './base'
 import FieldViewer from 'corteza-webapp-compose/src/components/ModuleFields/Viewer'
 import users from 'corteza-webapp-compose/src/mixins/users'
 import { compose, NoID, fmt } from '@cortezaproject/corteza-js'
-import { evaluatePrefilter } from 'corteza-webapp-compose/src/lib/record-filter'
+import { evaluatePrefilter, isFieldInFilter } from 'corteza-webapp-compose/src/lib/record-filter'
 
 export default {
   i18nOptions: {
@@ -239,7 +239,7 @@ export default {
   },
 
   mounted () {
-    this.$root.$on('module-records-updated', this.refreshOnRelatedRecordsUpdate)
+    this.createEvents()
   },
 
   beforeDestroy () {
@@ -249,6 +249,19 @@ export default {
   },
 
   methods: {
+    createEvents () {
+      this.$root.$on('module-records-updated', this.refreshOnRelatedRecordsUpdate)
+      this.$root.$on('record-field-change', this.refetchOnPrefilterValueChange)
+    },
+
+    refetchOnPrefilterValueChange ({ fieldName }) {
+      const { filter } = this.options
+
+      if (isFieldInFilter(fieldName, filter)) {
+        this.refresh()
+      }
+    },
+
     getFormattedDate (date) {
       return fmt.fullDateTime(date)
     },
@@ -401,6 +414,7 @@ export default {
 
     destroyEvents () {
       this.$root.$off('module-records-updated', this.refreshOnRelatedRecordsUpdate)
+      this.$root.$off('record-field-change', this.refetchOnPrefilterValueChange)
     },
   },
 }
diff --git a/client/web/compose/src/components/PageBlocks/GeometryBase.vue b/client/web/compose/src/components/PageBlocks/GeometryBase.vue
index 4861c24a9..373a062a4 100644
--- a/client/web/compose/src/components/PageBlocks/GeometryBase.vue
+++ b/client/web/compose/src/components/PageBlocks/GeometryBase.vue
@@ -41,7 +41,7 @@ import axios from 'axios'
 import { compose, NoID } from '@cortezaproject/corteza-js'
 import { components } from '@cortezaproject/corteza-vue'
 import { mapGetters, mapActions } from 'vuex'
-import { evaluatePrefilter } from 'corteza-webapp-compose/src/lib/record-filter'
+import { evaluatePrefilter, isFieldInFilter } from 'corteza-webapp-compose/src/lib/record-filter'
 import { isNumber } from 'lodash'
 
 import base from './base'
@@ -126,7 +126,7 @@ export default {
   },
 
   mounted () {
-    this.$root.$on('module-records-updated', this.refreshOnRelatedRecordsUpdate)
+    this.createEvents()
   },
 
   beforeDestroy () {
@@ -140,6 +140,19 @@ export default {
       findModuleByID: 'module/findByID',
     }),
 
+    createEvents () {
+      this.$root.$on('module-records-updated', this.refreshOnRelatedRecordsUpdate)
+      this.$root.$on('record-field-change', this.refetchOnPrefilterValueChange)
+    },
+
+    refetchOnPrefilterValueChange ({ fieldName }) {
+      const { feeds } = this.options
+
+      if (feeds.some(({ options }) => isFieldInFilter(fieldName, options.prefilter))) {
+        this.refresh()
+      }
+    },
+
     refreshOnRelatedRecordsUpdate ({ moduleID, notPageID }) {
       this.options.feeds.forEach((feed) => {
         if (feed.options.moduleID === moduleID && this.page.pageID !== notPageID) {
@@ -275,6 +288,7 @@ export default {
 
     destroyEvents () {
       this.$root.$off('module-records-updated', this.refreshOnRelatedRecordsUpdate)
+      this.$root.$off('record-field-change', this.refetchOnPrefilterValueChange)
     },
   },
 }
diff --git a/client/web/compose/src/components/PageBlocks/IFrameBase.vue b/client/web/compose/src/components/PageBlocks/IFrameBase.vue
index 56be1af62..45f074324 100644
--- a/client/web/compose/src/components/PageBlocks/IFrameBase.vue
+++ b/client/web/compose/src/components/PageBlocks/IFrameBase.vue
@@ -15,7 +15,7 @@
 <script>
 import base from './base'
 import { NoID } from '@cortezaproject/corteza-js'
-import { evaluatePrefilter } from 'corteza-webapp-compose/src/lib/record-filter'
+import { evaluatePrefilter, isFieldInFilter } from 'corteza-webapp-compose/src/lib/record-filter'
 
 export default {
   extends: base,
@@ -46,12 +46,33 @@ export default {
 
   mounted () {
     this.refreshBlock(this.refresh)
+    this.createEvents()
+  },
+
+  beforeDestroy () {
+    this.destroyEvents()
   },
 
   methods: {
     refresh () {
       this.$refs.iframe.src = this.src
     },
+
+    createEvents () {
+      this.$root.$on('record-field-change', this.refetchOnPrefilterValueChange)
+    },
+
+    refetchOnPrefilterValueChange ({ fieldName }) {
+      const { src } = this.options
+
+      if (isFieldInFilter(fieldName, src)) {
+        this.refresh()
+      }
+    },
+
+    destroyEvents () {
+      this.$root.$off('record-field-change', this.refetchOnPrefilterValueChange)
+    },
   },
 }
 </script>
diff --git a/client/web/compose/src/components/PageBlocks/MetricBase.vue b/client/web/compose/src/components/PageBlocks/MetricBase.vue
index 8c82c2c3b..55d163ad9 100644
--- a/client/web/compose/src/components/PageBlocks/MetricBase.vue
+++ b/client/web/compose/src/components/PageBlocks/MetricBase.vue
@@ -41,7 +41,7 @@ import moment from 'moment'
 import { debounce } from 'lodash'
 import MetricItem from './Metric/Item'
 import { NoID, compose } from '@cortezaproject/corteza-js'
-import { evaluatePrefilter } from 'corteza-webapp-compose/src/lib/record-filter'
+import { evaluatePrefilter, isFieldInFilter } from 'corteza-webapp-compose/src/lib/record-filter'
 
 export default {
   i18nOptions: {
@@ -89,11 +89,7 @@ export default {
   },
 
   mounted () {
-    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)
+    this.createEvents()
   },
 
   beforeDestroy () {
@@ -107,6 +103,22 @@ export default {
   },
 
   methods: {
+    createEvents () {
+      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)
+      this.$root.$on('record-field-change', this.refetchOnPrefilterValueChange)
+    },
+
+    refetchOnPrefilterValueChange ({ fieldName }) {
+      const { metrics } = this.options
+
+      if (metrics.some(({ filter }) => isFieldInFilter(fieldName, filter))) {
+        this.refresh()
+      }
+    },
+
     /**
      * Performs some post processing on the provided data
      */
@@ -268,6 +280,7 @@ export default {
       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)
+      this.$root.$off('record-field-change', this.refetchOnPrefilterValueChange)
     },
   },
 }
diff --git a/client/web/compose/src/components/PageBlocks/ProgressBase.vue b/client/web/compose/src/components/PageBlocks/ProgressBase.vue
index ff4cda0da..1a9bfecf6 100644
--- a/client/web/compose/src/components/PageBlocks/ProgressBase.vue
+++ b/client/web/compose/src/components/PageBlocks/ProgressBase.vue
@@ -37,7 +37,7 @@
 import base from './base'
 import { NoID } from '@cortezaproject/corteza-js'
 import { components } from '@cortezaproject/corteza-vue'
-import { evaluatePrefilter } from 'corteza-webapp-compose/src/lib/record-filter'
+import { evaluatePrefilter, isFieldInFilter } from 'corteza-webapp-compose/src/lib/record-filter'
 const { CProgress } = components
 
 export default {
@@ -77,8 +77,7 @@ export default {
   },
 
   mounted () {
-    this.$root.$on(`refetch-non-record-blocks:${this.page.pageID}`, this.refresh)
-    this.$root.$on('module-records-updated', this.refreshOnRelatedRecordsUpdate)
+    this.createEvents()
   },
 
   beforeDestroy () {
@@ -87,6 +86,20 @@ export default {
   },
 
   methods: {
+    createEvents () {
+      this.$root.$on(`refetch-non-record-blocks:${this.page.pageID}`, this.refresh)
+      this.$root.$on('module-records-updated', this.refreshOnRelatedRecordsUpdate)
+      this.$root.$on('record-field-change', this.refetchOnPrefilterValueChange)
+    },
+
+    refetchOnPrefilterValueChange ({ fieldName }) {
+      const { value } = this.options
+
+      if (isFieldInFilter(fieldName, value.filter)) {
+        this.refresh()
+      }
+    },
+
     /**
      * Pulls fresh data from the API
      */
@@ -152,6 +165,7 @@ export default {
     destroyEvents () {
       this.$root.$off(`refetch-non-record-blocks:${this.page.pageID}`, this.refresh)
       this.$root.$off('module-records-updated', this.refreshOnRelatedRecordsUpdate)
+      this.$root.$off('record-field-change', this.refetchOnPrefilterValueChange)
     },
   },
 }
diff --git a/client/web/compose/src/components/PageBlocks/RecordEditor.vue b/client/web/compose/src/components/PageBlocks/RecordEditor.vue
index cd2c32cc7..4ccac8f33 100644
--- a/client/web/compose/src/components/PageBlocks/RecordEditor.vue
+++ b/client/web/compose/src/components/PageBlocks/RecordEditor.vue
@@ -26,7 +26,7 @@
             v-bind="{ ...$props, errors: fieldErrors(field.name) }"
             :horizontal="horizontal"
             :field="field"
-            @change="onFieldChange()"
+            @change="onFieldChange(field)"
           />
 
           <b-form-group
@@ -214,8 +214,11 @@ export default {
       return !expressions.value
     },
 
-    onFieldChange: debounce(function () {
+    onFieldChange: debounce(function (field) {
       this.evaluateExpressions()
+      this.$root.$emit('record-field-change', {
+        fieldName: field.name,
+      })
     }, 500),
   },
 }
diff --git a/client/web/compose/src/components/PageBlocks/RecordListBase.vue b/client/web/compose/src/components/PageBlocks/RecordListBase.vue
index 7d07bcac8..b03790827 100644
--- a/client/web/compose/src/components/PageBlocks/RecordListBase.vue
+++ b/client/web/compose/src/components/PageBlocks/RecordListBase.vue
@@ -745,7 +745,7 @@ import AutomationButtons from './Shared/AutomationButtons'
 import { compose, validator, NoID } from '@cortezaproject/corteza-js'
 import users from 'corteza-webapp-compose/src/mixins/users'
 import records from 'corteza-webapp-compose/src/mixins/records'
-import { evaluatePrefilter, queryToFilter } from 'corteza-webapp-compose/src/lib/record-filter'
+import { evaluatePrefilter, queryToFilter, isFieldInFilter } from 'corteza-webapp-compose/src/lib/record-filter'
 import { getItem, setItem, removeItem } from 'corteza-webapp-compose/src/lib/local-storage'
 import { components, url } from '@cortezaproject/corteza-vue'
 import draggable from 'vuedraggable'
@@ -1105,6 +1105,16 @@ export default {
       this.$root.$on(`refetch-non-record-blocks:${pageID}`, this.refreshAndResetPagination)
 
       this.$root.$on('module-records-updated', this.refreshOnRelatedRecordsUpdate)
+      this.$root.$on('record-field-change', this.refetchOnPrefilterValueChange)
+    },
+
+    refetchOnPrefilterValueChange ({ fieldName }) {
+      const { prefilter } = this.options
+
+      if (isFieldInFilter(fieldName, prefilter)) {
+        this.prepRecordList()
+        this.refresh()
+      }
     },
 
     refreshOnRelatedRecordsUpdate ({ moduleID, notPageID }) {
@@ -1970,6 +1980,7 @@ export default {
       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)
+      this.$root.$off('record-field-change', this.refetchOnPrefilterValueChange)
     },
 
     handleAddRecord () {
diff --git a/client/web/compose/src/components/PageBlocks/RecordOrganizerBase.vue b/client/web/compose/src/components/PageBlocks/RecordOrganizerBase.vue
index 271659627..e5ab70928 100644
--- a/client/web/compose/src/components/PageBlocks/RecordOrganizerBase.vue
+++ b/client/web/compose/src/components/PageBlocks/RecordOrganizerBase.vue
@@ -115,7 +115,7 @@ import draggable from 'vuedraggable'
 import FieldViewer from 'corteza-webapp-compose/src/components/ModuleFields/Viewer'
 import users from 'corteza-webapp-compose/src/mixins/users'
 import records from 'corteza-webapp-compose/src/mixins/records'
-import { evaluatePrefilter, getFieldFilter } from 'corteza-webapp-compose/src/lib/record-filter'
+import { evaluatePrefilter, getFieldFilter, isFieldInFilter } from 'corteza-webapp-compose/src/lib/record-filter'
 import { compose, NoID } from '@cortezaproject/corteza-js'
 
 export default {
@@ -250,8 +250,7 @@ export default {
   },
 
   mounted () {
-    this.$root.$on(`refetch-non-record-blocks:${this.page.pageID}`, this.refresh)
-    this.$root.$on('module-records-updated', this.refreshOnRelatedRecordsUpdate)
+    this.createEvents()
   },
 
   beforeDestroy () {
@@ -261,6 +260,20 @@ export default {
   },
 
   methods: {
+    createEvents () {
+      this.$root.$on(`refetch-non-record-blocks:${this.page.pageID}`, this.refresh)
+      this.$root.$on('module-records-updated', this.refreshOnRelatedRecordsUpdate)
+      this.$root.$on('record-field-change', this.refetchOnPrefilterValueChange)
+    },
+
+    refetchOnPrefilterValueChange ({ fieldName }) {
+      const { filter } = this.options
+
+      if (isFieldInFilter(fieldName, filter)) {
+        this.refresh()
+      }
+    },
+
     // Allow move if repositioned or if record isn't in target record organizer
     checkMove ({ draggedContext = {}, relatedContext = {} }) {
       const { moduleID, recordID } = draggedContext.element || {}
@@ -527,6 +540,7 @@ export default {
     destroyEvents () {
       this.$root.$off(`refetch-non-record-blocks:${this.page.pageID}`, this.refresh)
       this.$root.$off('module-records-updated', this.refreshOnRelatedRecordsUpdate)
+      this.$root.$off('record-field-change', this.refetchOnPrefilterValueChange)
     },
   },
 }
diff --git a/client/web/compose/src/lib/record-filter.js b/client/web/compose/src/lib/record-filter.js
index d13843179..49c7412c4 100644
--- a/client/web/compose/src/lib/record-filter.js
+++ b/client/web/compose/src/lib/record-filter.js
@@ -208,3 +208,16 @@ function trimChar (text = '', char = '') {
   }
   return text
 }
+
+// Helper function that checks if field name is included in a filter
+export function isFieldInFilter (fieldName, filter = '') {
+  if (!fieldName) return
+
+  const filterCases = [
+    '${' + fieldName + '}',
+    '${record.' + fieldName + '}',
+    '${record.values.' + fieldName + '}',
+  ]
+
+  return filterCases.some(filterCase => filter.includes(filterCase))
+}