From 7b680ef09e78c6f68239d56e4874e2b382bafb8d Mon Sep 17 00:00:00 2001
From: Emmy Leke <emmy.leke@planetcrust.com>
Date: Mon, 19 Feb 2024 17:47:22 +0100
Subject: [PATCH] Add options for adding records in different views

---
 .../components/PageBlocks/RecordListBase.vue  | 18 +++++++------
 .../PageBlocks/RecordListConfigurator.vue     | 25 +++++++++++++++++++
 .../compose/types/page-block/record-list.ts   | 16 +++++++++++-
 locale/en/corteza-webapp-compose/block.yaml   |  4 +++
 4 files changed, 55 insertions(+), 8 deletions(-)

diff --git a/client/web/compose/src/components/PageBlocks/RecordListBase.vue b/client/web/compose/src/components/PageBlocks/RecordListBase.vue
index b04f129bf..806384a26 100644
--- a/client/web/compose/src/components/PageBlocks/RecordListBase.vue
+++ b/client/web/compose/src/components/PageBlocks/RecordListBase.vue
@@ -2001,20 +2001,24 @@ export default {
 
       if (!(pageID || this.options.rowCreateUrl)) return
 
-      if (this.inModal) {
+      const route = {
+        name: this.options.rowCreateUrl || 'page.record.create',
+        params: { pageID, refRecord },
+        query: null,
+        edit: true,
+      }
+
+      if (this.inModal || this.options.addRecordDisplayOption === 'modal') {
         this.$root.$emit('show-record-modal', {
           recordID: NoID,
           recordPageID: this.recordPageID,
           refRecord,
           edit: true,
         })
+      } else if (this.options.addRecordDisplayOption === 'newTab') {
+        window.open(this.$router.resolve(route).href)
       } else {
-        this.$router.push({
-          name: this.options.rowCreateUrl || 'page.record.create',
-          params: { pageID, refRecord },
-          query: null,
-          edit: true,
-        })
+        this.$router.push(route)
       }
     },
 
diff --git a/client/web/compose/src/components/PageBlocks/RecordListConfigurator.vue b/client/web/compose/src/components/PageBlocks/RecordListConfigurator.vue
index 671aac904..f1bb1c125 100644
--- a/client/web/compose/src/components/PageBlocks/RecordListConfigurator.vue
+++ b/client/web/compose/src/components/PageBlocks/RecordListConfigurator.vue
@@ -582,6 +582,7 @@
                 />
               </b-form-group>
             </b-col>
+
             <b-col
               cols="12"
               lg="6"
@@ -619,6 +620,22 @@
             <b-col
               cols="12"
               lg="6"
+            >
+              <b-form-group
+                :label="$t('recordList.record.addRecordOptions')"
+                label-class="text-primary"
+              >
+                <b-form-select
+                  v-model="options.addRecordDisplayOption"
+                  :options="recordCreateOptions"
+                  :disabled="options.hideAddButton"
+                />
+              </b-form-group>
+            </b-col>
+
+            <b-col
+              cols="12"
+              md="6"
             >
               <b-form-group
                 :label="$t('recordList.record.editMode')"
@@ -855,6 +872,14 @@ export default {
       ]
     },
 
+    recordCreateOptions () {
+      return [
+        { value: 'sameTab', text: this.$t('recordList.record.createInSameTab') },
+        { value: 'newTab', text: this.$t('recordList.record.createInNewTab') },
+        { value: 'modal', text: this.$t('recordList.record.createInModal') },
+      ]
+    },
+
     recordListModule () {
       if (this.options.moduleID !== NoID) {
         return this.getModuleByID(this.options.moduleID)
diff --git a/lib/js/src/compose/types/page-block/record-list.ts b/lib/js/src/compose/types/page-block/record-list.ts
index ce5fd769d..7bcf06ea1 100644
--- a/lib/js/src/compose/types/page-block/record-list.ts
+++ b/lib/js/src/compose/types/page-block/record-list.ts
@@ -35,6 +35,7 @@ export interface Options {
   perPage: number;
   recordDisplayOption: string;
   recordSelectorDisplayOption: string;
+  addRecordDisplayOption: string;
   magnifyOption: string;
 
   fullPageNavigation: boolean;
@@ -93,6 +94,7 @@ const defaults: Readonly<Options> = Object.freeze({
   perPage: 20,
   recordDisplayOption: 'sameTab',
   recordSelectorDisplayOption: 'sameTab',
+  addRecordDisplayOption: 'sameTab',
   magnifyOption: '',
 
   fullPageNavigation: false,
@@ -138,7 +140,19 @@ 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', 'recordSelectorDisplayOption')
+
+    Apply(this.options, o, String,
+      'prefilter',
+      'presort',
+      'selectMode',
+      'positionField',
+      'refField',
+      'recordDisplayOption',
+      'magnifyOption',
+      'recordSelectorDisplayOption',
+      'addRecordDisplayOption'
+    )
+
     Apply(this.options, o, Number, 'perPage', 'refreshRate')
 
     if (o.fields) {
diff --git a/locale/en/corteza-webapp-compose/block.yaml b/locale/en/corteza-webapp-compose/block.yaml
index 1b36cad3b..a01fa90fb 100644
--- a/locale/en/corteza-webapp-compose/block.yaml
+++ b/locale/en/corteza-webapp-compose/block.yaml
@@ -498,6 +498,9 @@ recordList:
     openInSameTab: Open record in the same tab
     openInNewTab: Open record in a new tab
     openInModal: Open record in a modal
+    createInSameTab: Create record in the same tab
+    createInNewTab: Create record in a new tab
+    createInModal: Create record in a modal
     enableBulkRecordEdit: Enable bulk record edit
     buttons: Record buttons
     tooltip:
@@ -510,6 +513,7 @@ recordList:
       permissions: Permissions
     recordDisplayOptions: On record click
     recordSelectorDisplayOptions: On record selector click
+    addRecordOptions: On add record click 
   recordPage: record page
   refField:
     footnote: Field that links records with the parent record