Fix record create view page to opening on modal

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

@@ -47,14 +47,15 @@
                 </template>
 
                 <template v-else-if="!inlineEditing && (recordPageID || options.allRecords)">
-                  <router-link
+                  <button
                     v-if="!options.hideAddButton"
                     data-test-id="button-add-record"
                     class="btn btn-lg btn-primary mr-1"
-                    :to="newRecordRoute"
+                    @click="handleAddRecord()"
                   >
                     + {{ $t('recordList.addRecord') }}
-                  </router-link>
+                  </button>
+
                   <importer-modal
                     v-if="!options.hideImportButton"
                     :module="recordListModule"
@@ -974,21 +975,6 @@ export default {
       return this.items.filter(({ id, r }) => this.selected.includes(id) && r.canUndeleteRecord).length
     },
 
-    newRecordRoute () {
-      const refRecord = this.options.linkToParent ? this.record : undefined
-      const pageID = this.recordPageID
-
-      if (pageID || this.options.rowCreateUrl) {
-        return {
-          name: this.options.rowCreateUrl || 'page.record.create',
-          params: { pageID, refRecord },
-          query: null,
-        }
-      }
-
-      return undefined
-    },
-
     isCloneRecordActionVisible () {
       return !this.options.hideRecordCloneButton && this.recordListModule.canCreateRecord && (this.options.rowCreateUrl || this.recordPageID || this.inlineEditing)
     },
@@ -1415,13 +1401,13 @@ export default {
         query: null,
       }
 
-      if (this.options.recordDisplayOption === 'newTab') {
-        window.open(this.$router.resolve(route).href)
-      } else if (this.options.recordDisplayOption === 'modal') {
+      if (this.options.recordDisplayOption === 'modal' || this.inModal) {
         this.$root.$emit('show-record-modal', {
           recordID,
           recordPageID: this.recordPageID,
         })
+      } else if (this.options.recordDisplayOption === 'newTab') {
+        window.open(this.$router.resolve(route).href)
       } else {
         this.$router.push(route)
       }
@@ -1892,6 +1878,26 @@ export default {
         this.refresh(true)
       })
     },
+
+    handleAddRecord () {
+      const refRecord = this.options.linkToParent ? this.record : undefined
+      const pageID = this.recordPageID
+
+      if (!(pageID || this.options.rowCreateUrl)) return
+
+      if (this.inModal) {
+        this.$root.$emit('show-record-modal', {
+          recordID: NoID,
+          recordPageID: this.recordPageID,
+        })
+      } else {
+        this.$router.push({
+          name: this.options.rowCreateUrl || 'page.record.create',
+          params: { pageID, refRecord },
+          query: null,
+        })
+      }
+    },
   },
 }
 </script>

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

@@ -335,7 +335,14 @@ export default {
         values[groupField] = group
       }
 
-      this.$router.push({ name: 'page.record.create', params: { pageID, values: values, refRecord: this.record } })
+      if (this.inModal) {
+        this.$root.$emit('show-record-modal', {
+          recordID: NoID,
+          recordPageID: (this.roRecordPage || {}).pageID,
+        })
+      } else {
+        this.$router.push({ name: 'page.record.create', params: { pageID, values: values, refRecord: this.record } })
+      }
     },
 
     expandFilter () {
@@ -480,13 +487,13 @@ export default {
         query: null,
       }
 
-      if (this.options.displayOption === 'newTab') {
-        window.open(this.$router.resolve(route).href)
-      } else if (this.options.displayOption === 'modal') {
+      if (this.options.displayOption === 'modal' || this.inModal) {
         this.$root.$emit('show-record-modal', {
           recordID: record.recordID,
           recordPageID: (this.roRecordPage || {}).pageID,
         })
+      } else if (this.options.displayOption === 'newTab') {
+        window.open(this.$router.resolve(route).href)
       } else {
         this.$router.push(route)
       }

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

@@ -94,6 +94,13 @@ export default {
     autoRefreshEnabled () {
       return this.options.refreshRate >= 5 && ['page', 'page.record'].includes(this.$route.name)
     },
+
+    // detect when a page block is opened in a modal through magnification or record open type
+    inModal () {
+      const { recordPageID, magnifiedBlockID } = this.$route.query
+
+      return !!recordPageID || !!magnifiedBlockID
+    },
   },
 
   beforeDestroy () {

client/web/compose/src/components/Public/Record/Modal.vue

@@ -86,6 +86,10 @@ export default {
     '$route.query.recordPageID': {
       immediate: true,
       handler (recordPageID, oldRecordPageID) {
+        if (!recordPageID) {
+          this.showModal = false
+        }
+
         if (recordPageID !== oldRecordPageID) {
           // If the page changed we need to clear the record pagination since its not relevant anymore
           if (this.recordPaginationUsable) {

client/web/compose/src/views/Public/Pages/Records/View.vue

@@ -361,6 +361,9 @@ export default {
             })
         } else {
           this.record = new compose.Record(module, { values: this.values })
+
+          this.inEditing = true
+          this.inCreating = true
         }
 
         if (this.refRecord) {