From ca4d7b0f6f9472f7ef728804f7e46390822d0b71 Mon Sep 17 00:00:00 2001
From: Kelani Tolulope <kelanik8@gmail.com>
Date: Fri, 5 May 2023 15:32:06 +0100
Subject: [PATCH] Add support for modal option for record organizer page block

---
 .../PageBlocks/RecordOrganizerBase.vue        | 16 +++++++++++++-
 .../RecordOrganizerConfigurator.vue           | 22 +++++++++++++++++++
 .../types/page-block/record-organizer.ts      |  4 +++-
 locale/en/corteza-webapp-compose/block.yaml   |  4 ++++
 4 files changed, 44 insertions(+), 2 deletions(-)

diff --git a/client/web/compose/src/components/PageBlocks/RecordOrganizerBase.vue b/client/web/compose/src/components/PageBlocks/RecordOrganizerBase.vue
index 41db124f4..3ea0ac90c 100644
--- a/client/web/compose/src/components/PageBlocks/RecordOrganizerBase.vue
+++ b/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 () {
diff --git a/client/web/compose/src/components/PageBlocks/RecordOrganizerConfigurator.vue b/client/web/compose/src/components/PageBlocks/RecordOrganizerConfigurator.vue
index 152e3826f..c2e175827 100644
--- a/client/web/compose/src/components/PageBlocks/RecordOrganizerConfigurator.vue
+++ b/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: {
diff --git a/lib/js/src/compose/types/page-block/record-organizer.ts b/lib/js/src/compose/types/page-block/record-organizer.ts
index 48329fdf1..c8e63979f 100644
--- a/lib/js/src/compose/types/page-block/record-organizer.ts
+++ b/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')
   }
diff --git a/locale/en/corteza-webapp-compose/block.yaml b/locale/en/corteza-webapp-compose/block.yaml
index 4d37436a5..f61c1b42a 100644
--- a/locale/en/corteza-webapp-compose/block.yaml
+++ b/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