Add option to open record selectors on modal in record list and record page

client/web/compose/src/components/ModuleFields/Viewer/Record.vue

@@ -13,7 +13,17 @@
       :class="{ 'd-block': field.options.multiDelimiter === '\n' }"
       @click.stop
     >
+      <a
+        v-if="['modal', 'newTab'].includes(extraOptions.recordSelectorDisplayOption)"
+        href="#"
+        :class="{ 'text-decoration-none default-cursor': !v.to}"
+        @click="(e) => onRecordSelectorClick(e, v.to)"
+      >
+        {{ v.value }}{{ index !== formattedValue.length - 1 ? field.options.multiDelimiter : '' }}
+      </a>
+
       <router-link
+        v-else
         :to="v.to"
         :class="{ 'text-decoration-none default-cursor': !v.to}"
       >
@@ -153,6 +163,19 @@ export default {
         }, 300)
       })
     },
+
+    onRecordSelectorClick (e, route) {
+      e.preventDefault()
+
+      if (this.extraOptions.recordSelectorDisplayOption === 'modal') {
+        this.$root.$emit('show-record-modal', {
+          recordID: route.params.recordID,
+          recordPageID: route.params.pageID,
+        })
+      } else if (this.extraOptions.recordSelectorDisplayOption === 'newTab') {
+        window.open(this.$router.resolve(route).href, '_blank')
+      }
+    },
   },
 }
 </script>

client/web/compose/src/components/ModuleFields/Viewer/base.vue

@@ -43,6 +43,11 @@ export default {
       type: Boolean,
       required: false,
     },
+
+    extraOptions: {
+      type: Object,
+      default: () => ({}),
+    },
   },
 
   computed: {

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

@@ -45,6 +45,7 @@
           >
             <field-viewer
               v-bind="{ ...$props, field }"
+              :extra-options="options"
             />
           </div>
           <i

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

@@ -136,6 +136,23 @@
           </b-tr>
         </b-tbody>
       </b-table-simple>
+
+      <b-row>
+        <b-col
+          cols="12"
+          md="6"
+        >
+          <b-form-group
+            :label="$t('record.recordSelectorDisplayOptions')"
+            label-class="text-primary"
+          >
+            <b-form-select
+              v-model="options.recordSelectorDisplayOption"
+              :options="recordDisplayOptions"
+            />
+          </b-form-group>
+        </b-col>
+      </b-row>
     </div>
   </b-tab>
 </template>
@@ -168,6 +185,14 @@ export default {
     addRuleDisabled () {
       return this.block.options.fields.filter(f => !f.isRequired).length === this.block.options.fieldConditions.length
     },
+
+    recordDisplayOptions () {
+      return [
+        { value: 'sameTab', text: this.$t('record.openInSameTab') },
+        { value: 'newTab', text: this.$t('record.openInNewTab') },
+        { value: 'modal', text: this.$t('record.openInModal') },
+      ]
+    },
   },
 
   methods: {

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

@@ -413,6 +413,7 @@
                     :record="item.r"
                     :module="module"
                     :namespace="namespace"
+                    :extra-options="options"
                   />
                   <div
                     v-if="options.inlineRecordEditEnabled && field.canEdit"

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

@@ -507,6 +507,20 @@
               />
             </b-form-group>
           </b-col>
+          <b-col
+            cols="12"
+            md="6"
+          >
+            <b-form-group
+              :label="$t('recordList.record.recordSelectorDisplayOptions')"
+              label-class="text-primary"
+            >
+              <b-form-select
+                v-model="options.recordSelectorDisplayOption"
+                :options="recordDisplayOptions"
+              />
+            </b-form-group>
+          </b-col>
         </b-row>
 
         <b-row>

lib/js/src/compose/types/page-block/record-list.ts

@@ -34,6 +34,7 @@ interface Options {
   allowExport: boolean;
   perPage: number;
   recordDisplayOption: string;
+  recordSelectorDisplayOption: string;
   magnifyOption: string;
 
   fullPageNavigation: boolean;
@@ -90,6 +91,7 @@ const defaults: Readonly<Options> = Object.freeze({
   allowExport: false,
   perPage: 20,
   recordDisplayOption: 'sameTab',
+  recordSelectorDisplayOption: 'sameTab',
   magnifyOption: '',
 
   fullPageNavigation: true,
@@ -132,7 +134,7 @@ export class PageBlockRecordList extends PageBlock {
     if (!o) return
 
     Apply(this.options, o, CortezaID, 'moduleID')
-    Apply(this.options, o, String, 'prefilter', 'presort', 'selectMode', 'positionField', 'refField', 'recordDisplayOption', 'magnifyOption')
+    Apply(this.options, o, String, 'prefilter', 'presort', 'selectMode', 'positionField', 'refField', 'recordDisplayOption', 'magnifyOption', 'recordSelectorDisplayOption')
     Apply(this.options, o, Number, 'perPage', 'refreshRate')
 
     if (o.fields) {

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

@@ -12,12 +12,15 @@ interface Options {
   fields: unknown[];
   fieldConditions: FieldCondition[];
   magnifyOption: string;
+  recordSelectorDisplayOption: string;
+
 }
 
 const defaults: Readonly<Options> = Object.freeze({
   fields: [],
   fieldConditions: [],
   magnifyOption: '',
+  recordSelectorDisplayOption: 'sameTab',
 })
 
 export class PageBlockRecord extends PageBlock {
@@ -33,7 +36,7 @@ export class PageBlockRecord extends PageBlock {
   applyOptions (o?: Partial<Options>): void {
     if (!o) return
 
-    Apply(this.options, o, String, 'magnifyOption')
+    Apply(this.options, o, String, 'magnifyOption', 'recordSelectorDisplayOption')
 
     if (o.fields) {
       this.options.fields = o.fields

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

@@ -228,6 +228,10 @@ record:
     fieldsFromModule: Single record block, displaying fields ({{0}}) from module {{1}}
     untitled: Untitled
   recordDeleted: This record was deleted
+  recordSelectorDisplayOptions: On record selector click
+  openInSameTab: Open record in the same tab
+  openInNewTab: Open record in a new tab
+  openInModal: Open record in a modal
   fieldConditions:
     label: Field conditions
     action: + Add
@@ -446,6 +450,7 @@ recordList:
       view: View
       permissions: Permissions
     recordDisplayOptions: On record click
+    recordSelectorDisplayOptions: On record selector click
   recordPage: record page
   refField:
     footnote: Field that links records with the parent record
@@ -771,4 +776,4 @@ tabs:
     addTab: Add tab
     addBlock: Add new block
     delete: Delete tab
-  label: Tabs
+  label: Tabs