Add nylas improvements to prefill the composer and mailbox components with record values on the record page

client/web/compose/src/components/PageBlocks/Nylas/Components/Composer.vue

@@ -1,8 +1,10 @@
 <template>
   <nylas-composer
     :id="componentID"
+    ref="composer"
     :access_token="accessToken"
     theme="light"
+    show_header="false"
   />
 </template>
 
@@ -12,5 +14,26 @@ import '@nylas/components-composer'
 
 export default {
   extends: base,
+
+  props: {
+    prefillValues: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+
+  watch: {
+    prefillValues: {
+      deep: true,
+      immediate: true,
+      handler (value) {
+        this.$nextTick(() => {
+          const el = this.$refs.composer
+          // Set initial Values
+          el.value = value
+        })
+      },
+    },
+  },
 }
 </script>

client/web/compose/src/components/PageBlocks/Nylas/Components/Mailbox.vue

@@ -2,6 +2,7 @@
   <nylas-mailbox
     :id="componentID"
     :access_token="accessToken"
+    :query_string="queryString"
     theme="light"
   />
 </template>
@@ -12,5 +13,19 @@ import '@nylas/components-mailbox'
 
 export default {
   extends: base,
+
+  props: {
+    prefillValues: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+
+  computed: {
+    queryString () {
+      const { queryString = [] } = this.prefillValues
+      return `from=${queryString}`
+    },
+  },
 }
 </script>

client/web/compose/src/components/PageBlocks/Nylas/NylasBase.vue

@@ -37,6 +37,7 @@
       v-else
       :component-i-d="options.componentID"
       :access-token="accessToken"
+      :prefill-values="prefillValues"
     />
   </wrap>
 </template>
@@ -62,6 +63,13 @@ export default {
       accessToken: '',
 
       tokenCheckInterval: undefined,
+
+      prefillValues: {
+        to: [],
+        subject: '',
+        body: '',
+        queryString: '',
+      },
     }
   },
 
@@ -97,11 +105,41 @@ export default {
           .finally(() => {
             this.processing = false
           })
+
+        this.processPrefillValues()
       },
     },
   },
 
   methods: {
+    processPrefillValues () {
+      if (this.module) {
+        this.prefillValues = {
+          to: this.mapFieldToValue('to').map(v => ({ email: v })),
+          subject: this.mapFieldToValue('subject').join(','),
+          body: this.mapFieldToValue('body').join('<br />'),
+          queryString: this.mapFieldToValue('queryString').join(','),
+        }
+      }
+    },
+
+    mapFieldToValue (property) {
+      const ID = this.options.prefill[property]
+
+      if (!ID) {
+        return []
+      }
+
+      const { name, isMulti } = this.module.fields.find(f => f.fieldID === ID) || {}
+      const value = this.record.values[name]
+
+      if (!value) {
+        return []
+      }
+
+      return isMulti ? this.record.values[name] : [this.record.values[name]]
+    },
+
     checkNylasAccessToken () {
       return this.$SystemAPI.userListCredentials({ userID: this.$auth.user.userID })
         .then(credentials => {

client/web/compose/src/components/PageBlocks/Nylas/NylasConfigurator.vue

@@ -16,9 +16,114 @@
         v-model="options.componentID"
       />
     </b-form-group>
+
+    <template v-if="showPreviewSection">
+      <hr class="my-3">
+
+      <div>
+        <h5 class="mb-3">
+          {{ $t('prefill.title') }}
+        </h5>
+
+        <b-row>
+          <template v-if="options.kind === 'Composer'">
+            <b-col
+              cols="12"
+              sm="6"
+            >
+              <b-form-group
+                :label="$t('prefill.to')"
+                label-class="text-primary"
+              >
+                <vue-select
+                  v-model="options.prefill.to"
+                  :options="moduleTextFields"
+                  :get-option-label="getFieldLabel"
+                  :get-option-key="getOptionKey"
+                  :placeholder="$t('prefill.selectField')"
+                  :reduce="field => field.fieldID"
+                  :calculate-position="calculateDropdownPosition"
+                  append-to-body
+                  class="bg-white"
+                />
+              </b-form-group>
+            </b-col>
+            <b-col
+              cols="12"
+              sm="6"
+            >
+              <b-form-group
+                :label="$t('prefill.subject')"
+                label-class="text-primary"
+              >
+                <vue-select
+                  v-model="options.prefill.subject"
+                  :options="moduleTextFields"
+                  :get-option-label="getFieldLabel"
+                  :get-option-key="getOptionKey"
+                  :placeholder="$t('prefill.selectField')"
+                  :reduce="field => field.fieldID"
+                  :calculate-position="calculateDropdownPosition"
+                  append-to-body
+                  class="bg-white"
+                />
+              </b-form-group>
+            </b-col>
+            <b-col
+              cols="12"
+              sm="6"
+            >
+              <b-form-group
+                :label="$t('prefill.body')"
+                label-class="text-primary"
+              >
+                <vue-select
+                  v-model="options.prefill.body"
+                  :options="moduleTextFields"
+                  :get-option-label="getFieldLabel"
+                  :get-option-key="getOptionKey"
+                  :placeholder="$t('prefill.selectField')"
+                  :reduce="field => field.fieldID"
+                  :calculate-position="calculateDropdownPosition"
+                  append-to-body
+                  class="bg-white"
+                />
+              </b-form-group>
+            </b-col>
+          </template>
+
+          <template v-if="options.kind === 'Mailbox'">
+            <b-col
+              cols="12"
+              sm="6"
+            >
+              <b-form-group
+                :label="$t('prefill.queryString')"
+                label-class="text-primary"
+              >
+                <vue-select
+                  v-model="options.prefill.queryString"
+                  :options="moduleTextFields"
+                  :get-option-label="getFieldLabel"
+                  :get-option-key="getOptionKey"
+                  :placeholder="$t('prefill.selectField')"
+                  :reduce="field => field.fieldID"
+                  :calculate-position="calculateDropdownPosition"
+                  append-to-body
+                  class="bg-white"
+                />
+              </b-form-group>
+            </b-col>
+          </template>
+        </b-row>
+      </div>
+    </template>
   </b-tab>
 </template>
+
 <script>
+import { VueSelect } from 'vue-select'
+import { NoID } from '@cortezaproject/corteza-js'
 import base from '../base'
 
 export default {
@@ -27,6 +132,10 @@ export default {
     keyPrefix: 'nylas.configurator',
   },
 
+  components: {
+    VueSelect,
+  },
+
   extends: base,
 
   data () {
@@ -39,7 +148,32 @@ export default {
         { value: 'Email', text: this.$t('kinds.email') },
         { value: 'Mailbox', text: this.$t('kinds.mailbox') },
       ],
+
+      checkboxLabel: {
+        on: this.$t('general:label.yes'),
+        off: this.$t('general:label.no'),
+      },
     }
   },
+
+  computed: {
+    moduleTextFields () {
+      return this.module.fields.filter(({ kind }) => ['String', 'Email'].includes(kind))
+    },
+
+    showPreviewSection () {
+      return ['Composer', 'Mailbox'].includes(this.options.kind) && (this.page.moduleID !== NoID)
+    },
+  },
+
+  methods: {
+    getFieldLabel ({ name, label }) {
+      return label || name
+    },
+
+    getOptionKey ({ fieldID }) {
+      return fieldID
+    },
+  },
 }
 </script>

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

@@ -7,12 +7,26 @@ interface Options {
   kind: string,
   componentID: string;
   magnifyOption: string;
+  prefill: Prefill;
+}
+
+interface Prefill {
+  to: string;
+  subject: string;
+  body: string;
+  queryString: string;
 }
 
 const defaults: Readonly<Options> = Object.freeze({
   kind: 'Composer', // Default kind of nylas component
   componentID: '',
   magnifyOption: '',
+  prefill: {
+    to: '',
+    subject: '',
+    body: '',
+    queryString: ''
+  }
 })
 
 export class PageBlockNylas extends PageBlock {
@@ -29,6 +43,8 @@ export class PageBlockNylas extends PageBlock {
     if (!o) return
 
     Apply(this.options, o, String, 'kind', 'componentID', 'magnifyOption')
+
+    this.options.prefill = { ...defaults.prefill, ...o.prefill }
   }
 }
 

locale/en/corteza-webapp-compose/block.yaml

@@ -729,6 +729,13 @@ nylas:
     label: Office365/Google
     kind: Component kind
     componentID: Component ID
+    prefill:
+      title: Prefill values
+      selectField: Select field
+      body: Body
+      subject: Subject
+      queryString: Query string
+      to: To
     kinds:
       agenda: Agenda
       composer: Composer