Extend filter fields functionality

client/web/compose/src/components/PageBlocks/CalendarConfigurator/FeedSource/configs/Record.vue

@@ -95,9 +95,11 @@
           :label="$t('calendar.recordFeed.prefilterLabel')"
           label-class="text-primary"
         >
-          <b-form-textarea
+          <c-input-expression
             v-model="feed.options.prefilter"
-            :value="true"
+            height="3.688rem"
+            lang="javascript"
+            :suggestion-params="recordAutoCompleteParams"
             :placeholder="$t('calendar.recordFeed.prefilterPlaceholder')"
           />
 
@@ -142,7 +144,10 @@
 <script>
 import base from './base'
 import { components } from '@cortezaproject/corteza-vue'
-const { CInputColorPicker } = components
+import { compose, NoID } from '@cortezaproject/corteza-js'
+import autocomplete from 'corteza-webapp-compose/src/mixins/autocomplete.js'
+
+const { CInputColorPicker, CInputExpression } = components
 
 export default {
   i18nOptions: {
@@ -151,10 +156,26 @@ export default {
 
   components: {
     CInputColorPicker,
+    CInputExpression,
   },
 
   extends: base,
 
+  mixins: [autocomplete],
+
+  props: {
+    record: {
+      type: compose.Record,
+      required: false,
+      default: undefined,
+    },
+
+    page: {
+      type: compose.Page,
+      required: true,
+    },
+  },
+
   computed: {
     /**
      * Finds the module, this feed configurator should use
@@ -213,6 +234,14 @@ export default {
     themeSettings () {
       return this.$Settings.get('ui.studio.themes', [])
     },
+
+    isRecordPage () {
+      return this.page && this.page.moduleID !== NoID
+    },
+
+    recordAutoCompleteParams () {
+      return this.processRecordAutoCompleteParams({ operators: true })
+    },
   },
 
   methods: {

client/web/compose/src/components/PageBlocks/CalendarConfigurator/FeedSource/index.vue

@@ -39,6 +39,9 @@
           v-if="feed.resource && configurator(feed)"
           :feed="feed"
           :modules="modules"
+          :page="page"
+          :record="record"
+          :module="module"
         />
       </b-card>
     </b-col>
@@ -65,11 +68,15 @@ export default {
     namespaces: 'block',
   },
 
-  components: {
-  },
-
   extends: base,
 
+  props: {
+    page: {
+      type: compose.Page,
+      required: true,
+    },
+  },
+
   computed: {
     ...mapGetters({
       modules: 'module/set',

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

@@ -42,9 +42,11 @@
         :label="$t('recordList.record.prefilterLabel')"
         label-class="text-primary"
       >
-        <b-form-textarea
+        <c-input-expression
           v-model.trim="options.filter"
-          :value="true"
+          height="3.688rem"
+          lang="javascript"
+          :suggestion-params="recordAutoCompleteParams"
           :placeholder="$t('recordList.record.prefilterPlaceholder')"
         />
 
@@ -145,16 +147,27 @@
 <script>
 import { mapGetters } from 'vuex'
 import { NoID } from '@cortezaproject/corteza-js'
+import { components } from '@cortezaproject/corteza-vue'
+import autocomplete from 'corteza-webapp-compose/src/mixins/autocomplete.js'
 import base from './base'
 
+const { CInputExpression } = components
+
 export default {
   i18nOptions: {
     namespaces: 'block',
   },
 
   name: 'CommentConfigurator',
 
+  components: {
+    CInputExpression,
+  },
+
   extends: base,
+
+  mixins: [autocomplete],
+
   data () {
     return {
       referenceList: [{ label: 'Record ID (recordID)', value: 'recordID' }, { label: 'Page ID (pageID)', value: 'pageID' }],
@@ -213,6 +226,10 @@ export default {
       }
       return []
     },
+
+    recordAutoCompleteParams () {
+      return this.processRecordAutoCompleteParams({ module: this.selectedModule, operators: true })
+    },
   },
 
   watch: {

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

@@ -17,10 +17,15 @@
             label-class="text-primary"
           >
             <b-input-group>
-              <b-form-input
+              <c-input-expression
                 id="title"
                 v-model="block.title"
+                auto-complete
+                lang="javascript"
                 :placeholder="$t('general.titlePlaceholder')"
+                :suggestion-params="recordAutoCompleteParams"
+                height="2.375rem"
+                class="flex-grow-1"
               />
 
               <b-input-group-append>
@@ -53,10 +58,15 @@
             label-class="text-primary"
           >
             <b-input-group>
-              <b-form-textarea
+              <c-input-expression
                 id="description"
                 v-model="block.description"
+                auto-complete
+                lang="javascript"
                 :placeholder="$t('general.descriptionPlaceholder')"
+                :suggestion-params="recordAutoCompleteParams"
+                height="3.448rem"
+                class="flex-grow-1"
               />
               <b-input-group-append>
                 <page-translator
@@ -257,9 +267,15 @@
                   ƒ
                 </b-button>
               </b-input-group-prepend>
-              <b-form-input
+              <c-input-expression
+                id="visibility-fields"
                 v-model="block.meta.visibility.expression"
+                auto-complete
+                lang="javascript"
                 :placeholder="$t('general.visibility.condition.placeholder')"
+                :suggestion-params="visibilityAutoCompleteParams"
+                height="2.375rem"
+                class="flex-grow-1"
               />
               <b-input-group-append>
                 <b-button
@@ -342,12 +358,16 @@
     </template>
   </b-tabs>
 </template>
+
 <script>
 import { compose, NoID } from '@cortezaproject/corteza-js'
-import { handle } from '@cortezaproject/corteza-vue'
+import { handle, components } from '@cortezaproject/corteza-vue'
 import PageTranslator from 'corteza-webapp-compose/src/components/Admin/Page/PageTranslator'
+import autocomplete from 'corteza-webapp-compose/src/mixins/autocomplete.js'
 import PageBlock from './index'
 
+const { CInputExpression } = components
+
 export default {
   i18nOptions: {
     namespaces: 'block',
@@ -356,18 +376,38 @@ export default {
   components: {
     PageBlock,
     PageTranslator,
+    CInputExpression,
   },
 
+  mixins: [autocomplete],
+
   props: {
     block: {
       type: compose.PageBlock,
       required: true,
     },
 
+    module: {
+      type: compose.Module,
+      required: false,
+      default: undefined,
+    },
+
     page: {
       type: compose.Page,
       required: true,
     },
+
+    record: {
+      type: [Object, null],
+      required: false,
+      default: null,
+    },
+
+    namespace: {
+      type: compose.Namespace,
+      required: true,
+    },
   },
 
   data () {
@@ -494,6 +534,7 @@ export default {
   },
 }
 </script>
+
 <style scoped>
 .mh-tab {
   max-height: calc(100vh - 16rem);

client/web/compose/src/components/PageBlocks/GeometryConfigurator/FeedSource/configs/Record.vue

@@ -66,9 +66,11 @@
             :label="$t('calendar.recordFeed.prefilterLabel')"
             label-class="text-primary"
           >
-            <b-form-textarea
+            <c-input-expression
               v-model="feed.options.prefilter"
-              :value="true"
+              height="3.688rem"
+              lang="javascript"
+              :suggestion-params="recordAutoCompleteParams"
               :placeholder="$t('calendar.recordFeed.prefilterPlaceholder')"
             />
 
@@ -146,7 +148,9 @@
 <script>
 import base from './base'
 import { components } from '@cortezaproject/corteza-vue'
-const { CInputColorPicker } = components
+import autocomplete from 'corteza-webapp-compose/src/mixins/autocomplete.js'
+
+const { CInputColorPicker, CInputExpression } = components
 
 export default {
   i18nOptions: {
@@ -155,10 +159,13 @@ export default {
 
   components: {
     CInputColorPicker,
+    CInputExpression,
   },
 
   extends: base,
 
+  mixins: [autocomplete],
+
   data () {
     return {
       checkboxLabel: {

client/web/compose/src/components/PageBlocks/GeometryConfigurator/FeedSource/index.vue

@@ -25,6 +25,8 @@
           v-if="feed.resource && configurator(feed)"
           :feed="feed"
           :modules="modules"
+          :page="page"
+          :record="record"
         />
       </b-card>
     </b-col>

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

@@ -18,8 +18,12 @@
       :description="enableFromRecordURL ? $t('iframe.srcDesc') : ''"
       label-class="text-primary"
     >
-      <b-form-input
+      <c-input-expression
         v-model="options.src"
+        auto-complete
+        lang="text"
+        :suggestion-params="recordAutoCompleteParams"
+        height="2.375rem"
         type="url"
       />
       <i18next
@@ -37,6 +41,10 @@
 </template>
 <script>
 import base from './base'
+import { components } from '@cortezaproject/corteza-vue'
+import autocomplete from 'corteza-webapp-compose/src/mixins/autocomplete.js'
+
+const { CInputExpression } = components
 
 export default {
   i18nOptions: {
@@ -45,8 +53,12 @@ export default {
 
   name: 'IFrame',
 
+  components: { CInputExpression },
+
   extends: base,
 
+  mixins: [autocomplete],
+
   computed: {
     fields () {
       if (!this.module) {