Add support for modal option for record organizer page block

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

@@ -454,6 +454,11 @@ export default {
     handleRecordClick (record) {
       if (!this.roRecordPage) return
 
+      const page = this.pages.find(p => p.moduleID === this.moduleID)
+      if (!page) {
+        return
+      }
+
       const route = {
         name: 'page.record',
         params: {
@@ -463,7 +468,16 @@ export default {
         query: null,
       }
 
-      this.$router.push(route)
+      if (this.options.displayOption === 'newTab') {
+        window.open(this.$router.resolve(route).href)
+      } else if (this.options.displayOption === 'modal') {
+        this.$root.$emit('show-record-modal', {
+          recordID: record.recordID,
+          recordPageID: (this.roRecordPage || {}).pageID,
+        })
+      } else {
+        this.$router.push(route)
+      }
     },
 
     refresh () {

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

@@ -162,6 +162,20 @@
           {{ $t('recordOrganizer.group.footnote') }}
         </b-form-text>
       </b-form-group>
+
+      <b-form-group
+        v-if="options.groupField"
+        :label="$t('recordOrganizer.onRecordClick')"
+        :label-cols="3"
+        breakpoint="md"
+        horizontal
+        class="mb-0"
+      >
+        <b-form-select
+          v-model="options.displayOption"
+          :options="displayOptions"
+        />
+      </b-form-group>
     </div>
   </b-tab>
 </template>
@@ -247,6 +261,14 @@ export default {
     group () {
       return this.allFields.find(f => f.name === this.options.groupField)
     },
+
+    displayOptions () {
+      return [
+        { value: 'sameTab', text: this.$t('recordOrganizer.openInSameTab') },
+        { value: 'newTab', text: this.$t('recordOrganizer.openInNewTab') },
+        { value: 'modal', text: this.$t('recordOrganizer.openInModal') },
+      ]
+    },
   },
 
   watch: {

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

@@ -13,6 +13,7 @@ interface Options {
   refreshRate: number;
   showRefresh: boolean;
   magnifyOption: string;
+  displayOption: string;
 }
 
 const defaults: Readonly<Options> = Object.freeze({
@@ -26,6 +27,7 @@ const defaults: Readonly<Options> = Object.freeze({
   refreshRate: 0,
   showRefresh: false,
   magnifyOption: '',
+  displayOption: 'sameTab'
 })
 
 export class PageBlockRecordOrganizer extends PageBlock {
@@ -42,7 +44,7 @@ export class PageBlockRecordOrganizer extends PageBlock {
     if (!o) return
 
     Apply(this.options, o, CortezaID, 'moduleID')
-    Apply(this.options, o, String, 'labelField', 'descriptionField', 'filter', 'positionField', 'groupField', 'group', 'magnifyOption')
+    Apply(this.options, o, String, 'labelField', 'descriptionField', 'filter', 'positionField', 'groupField', 'group', 'magnifyOption', 'displayOption')
     Apply(this.options, o, Number, 'refreshRate')
     Apply(this.options, o, Boolean, 'showRefresh')
   }

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

@@ -482,6 +482,10 @@ recordList:
     deleted: Show deleted records
     existing: Show existing records
 recordOrganizer:
+  onRecordClick: On record click
+  openInSameTab: Open in the same tab
+  openInNewTab: Open in a new tab
+  openInModal: Open in a modal
   descriptionField:
     footnote: Field value will be used as record description
     label: Description field