Add refresh to geometry block and watch options to other blocks that need it

client/web/compose/src/components/Admin/Module/RelatedPages.vue

@@ -168,6 +168,7 @@ export default {
         title: `${this.$t('forModule.recordList')} "${name || moduleID}"`,
         namespaceID,
         blocks,
+        visible: true,
       })
 
       this.createPage(page)

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

@@ -211,13 +211,14 @@ export default {
   },
 
   watch: {
-    'block.options': {
+    options: {
       deep: true,
       handler () {
         this.updateSize()
         this.refresh()
       },
     },
+
     boundingRect: {
       deep: true,
       handler () {
@@ -331,6 +332,7 @@ export default {
         .finally(() => {
           this.processing = false
           this.refreshing = false
+
           setTimeout(() => {
             this.updateSize()
           })

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

@@ -41,6 +41,15 @@ export default {
     }
   },
 
+  watch: {
+    options: {
+      deep: true,
+      handler () {
+        this.refresh()
+      },
+    },
+  },
+
   mounted () {
     this.fetchChart()
     this.refreshBlock(this.refresh)

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

@@ -211,6 +211,13 @@ export default {
         this.refresh()
       },
     },
+
+    options: {
+      deep: true,
+      handler () {
+        this.refresh()
+      },
+    },
   },
 
   created () {

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

@@ -2,6 +2,7 @@
   <wrap
     v-bind="$props"
     v-on="$listeners"
+    @refreshBlock="refresh"
   >
     <div
       v-if="processing"
@@ -71,7 +72,7 @@ import { LPolygon, LControl } from 'vue2-leaflet'
 import { compose, NoID } from '@cortezaproject/corteza-js'
 import { mapGetters, mapActions } from 'vuex'
 import { evaluatePrefilter } from 'corteza-webapp-compose/src/lib/record-filter'
-import { throttle, isNumber } from 'lodash'
+import { isNumber } from 'lodash'
 
 import base from './base'
 
@@ -146,14 +147,11 @@ export default {
         this.loadEvents()
       },
     },
-
-    boundingRect: throttle(function () {
-      this.loadEvents()
-    }, 300),
   },
 
   created () {
     this.bounds = this.options.bounds
+    this.refreshBlock(this.refresh)
   },
 
   beforeDestroy () {
@@ -272,9 +270,11 @@ export default {
         return latLng(lat, lng)
       }
     },
+
     disableMap () {
       if (this.editable) this.$refs.map.mapObject._handlers.forEach(handler => handler.disable())
     },
+
     enableMap () {
       if (this.editable) this.$refs.map.mapObject._handlers.forEach(handler => handler.enable())
     },
@@ -308,6 +308,10 @@ export default {
       }
     },
 
+    refresh () {
+      this.loadEvents()
+    },
+
     setDefaultValues () {
       this.map = undefined
       this.processing = false

client/web/compose/src/views/Admin/Charts/Edit.vue

@@ -586,6 +586,7 @@ export default {
 
     reporter (r) {
       const nr = { ...r }
+
       if (nr.filter) {
         nr.filter = evaluatePrefilter(nr.filter, {
           record: this.record,
@@ -594,6 +595,7 @@ export default {
           userID: (this.$auth.user || {}).userID || NoID,
         })
       }
+
       return this.$ComposeAPI.recordReport({ namespaceID: this.namespace.namespaceID, ...nr })
     },
 

lib/js/src/compose/types/page-block/calendar/page-block.ts

@@ -30,23 +30,34 @@ interface CalendarOptionsHeader {
   hideTitle: boolean;
 }
 
-class CalendarOptions {
-  public defaultView = ''
-  public feeds: Array<Feed> = []
-  public header: Partial<CalendarOptionsHeader> = {}
-  public locale = 'en-gb'
-  public refreshRate = 0
-  public showRefresh = false
-  public magnifyOption = ''
-  public eventDisplayOption = 'sameTab'
+interface Options {
+  defaultView: string;
+  feeds: Array<Feed>;
+  header: Partial<CalendarOptionsHeader>;
+  locale: string;
+  refreshRate: number;
+  showRefresh: boolean;
+  magnifyOption: string;
+  eventDisplayOption: string;
 }
 
+const defaults: Readonly<Options> = Object.freeze({
+  defaultView: '',
+  feeds: [],
+  header: {},
+  locale: 'en-gb',
+  refreshRate: 0,
+  showRefresh: false,
+  magnifyOption: '',
+  eventDisplayOption: 'sameTab'
+})
+
 /**
  * Helper class to help define calendar's functionality
  */
 export class PageBlockCalendar extends PageBlock {
   readonly kind = kind
-  public options = new CalendarOptions()
+  public options: Options = { ...defaults }
 
   static feedResources = Object.freeze({
     record: 'compose:record',
@@ -55,10 +66,10 @@ export class PageBlockCalendar extends PageBlock {
 
   constructor (i?: PageBlock | Partial<PageBlock>) {
     super(i)
-    this.applyOptions(i?.options as Partial<CalendarOptions>)
+    this.applyOptions(i?.options as Partial<Options>)
   }
 
-  applyOptions (o?: Partial<CalendarOptions>): void {
+  applyOptions (o?: Partial<Options>): void {
     if (!o) return
     Apply(this.options, o, Number, 'refreshRate')
 

lib/js/src/compose/types/page-block/geometry/feed.ts

@@ -5,10 +5,6 @@ interface FeedOptions {
   color: string;
   prefilter: string;
   moduleID: string;
-  resource: string;
-  titleField: string;
-  displayMarker: boolean;
-  displayPolygon: boolean;
 }
 
 export type FeedInput = Partial<Feed> | Feed
@@ -17,10 +13,6 @@ const defOptions = {
   moduleID: NoID,
   color: '#2f85cb',
   prefilter: '',
-  resource: 'compose:record',
-  titleField: '',
-  displayMarker: false,
-  displayPolygon: true,
 }
 
 /**
@@ -29,7 +21,6 @@ const defOptions = {
 export default class Feed {
   public resource = 'compose:record'
   public titleField = ''
-  public color = '#2f85cb'
   public geometryField = ''
   public displayMarker = false
   public displayPolygon = true
@@ -43,7 +34,7 @@ export default class Feed {
     if (!i) return
 
     if (IsOf<Feed>(i, 'resource')) {
-      Apply(this, i, String, 'resource', 'color', 'titleField', 'geometryField')
+      Apply(this, i, String, 'resource', 'titleField', 'geometryField')
       Apply(this, i, Boolean, 'displayMarker', 'displayPolygon')
 
       if (i.options) {

lib/js/src/compose/types/page-block/geometry/page-block.ts

@@ -16,6 +16,8 @@ interface Options {
   zoomMax: number;
   bounds: Bounds | null;
   lockBounds: boolean;
+  refreshRate: number;
+  showRefresh: boolean;
   magnifyOption: string;
   displayOption: string;
 }
@@ -29,6 +31,8 @@ const defaults: Readonly<Options> = Object.freeze({
   zoomMax: 18,
   bounds: null,
   lockBounds: false,
+  refreshRate: 0,
+  showRefresh: false,
   magnifyOption: '',
   displayOption: 'sameTab'
 })
@@ -54,8 +58,8 @@ export class PageBlockGeometry extends PageBlock {
     this.options.bounds = (o.bounds || null)
 
     Apply(this.options, o, String, 'magnifyOption', 'displayOption')
-    Apply(this.options, o, Number, 'zoomStarting', 'zoomMin', 'zoomMax')
-    Apply(this.options, o, Boolean, 'lockBounds')
+    Apply(this.options, o, Number, 'zoomStarting', 'zoomMin', 'zoomMax', 'refreshRate')
+    Apply(this.options, o, Boolean, 'lockBounds', 'showRefresh')
   }
 
   static makeFeed (f?: FeedInput): Feed {