Add a continuous modal navigation flow for all page block

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

@@ -355,7 +355,12 @@ export default {
 
       const route = { name: 'page.record', params: { recordID, pageID: page.pageID } }
 
-      if (this.options.eventDisplayOption === 'newTab') {
+      if (this.inModal) {
+        this.$root.$emit('show-record-modal', {
+          recordID,
+          recordPageID: page.pageID,
+        })
+      } else if (this.options.eventDisplayOption === 'newTab') {
         window.open(this.$router.resolve(route).href)
       } else if (this.options.eventDisplayOption === 'modal') {
         this.$root.$emit('show-record-modal', {

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

@@ -296,7 +296,12 @@ export default {
 
       const route = { name: 'page.record', params: { recordID, pageID: page.pageID } }
 
-      if (this.options.displayOption === 'newTab') {
+      if (this.inModal) {
+        this.$root.$emit('show-record-modal', {
+          recordID,
+          recordPageID: page.pageID,
+        })
+      } else if (this.options.displayOption === 'newTab') {
         window.open(this.$router.resolve(route).href)
       } else if (this.options.displayOption === 'modal') {
         this.$root.$emit('show-record-modal', {

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

@@ -47,6 +47,10 @@ import { NoID, compose } from '@cortezaproject/corteza-js'
 import { evaluatePrefilter } from 'corteza-webapp-compose/src/lib/record-filter'
 
 export default {
+  i18nOptions: {
+    namespaces: 'block',
+  },
+
   components: {
     MetricItem,
   },
@@ -194,7 +198,7 @@ export default {
         const metricID = `${this.block.blockID}-${name.replace(/\s+/g, '-').toLowerCase()}-${moduleID}-${metricIndex}`
 
         const block = new compose.PageBlockRecordList({
-          title: name,
+          title: name || this.$t('metric.metricDrillDown'),
           blockID: `drillDown-${metricID}`,
           options: {
             moduleID,

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

@@ -497,7 +497,7 @@
 
                     <b-dropdown-item
                       v-if="isEditRecordActionVisible(item.r)"
-                      :to="{ name: options.rowEditUrl || 'page.record.edit', params: { pageID: recordPageID, recordID: item.r.recordID }, query: null }"
+                      @click="handleEditRecordAction(item.r.recordID)"
                     >
                       <font-awesome-icon
                         :icon="['far', 'edit']"
@@ -508,7 +508,7 @@
 
                     <b-dropdown-item
                       v-if="isCloneRecordActionVisible"
-                      :to="{ name: options.rowCreateUrl || 'page.record.create', params: { pageID: recordPageID, values: item.r.values }, query: null }"
+                      @click="handleCloneRecordAction(item.r.recordID, item.r.values)"
                     >
                       <font-awesome-icon
                         :icon="['far', 'clone']"
@@ -1941,6 +1941,39 @@ export default {
         })
       }
     },
+
+    handleEditRecordAction (recordID) {
+      if (this.inModal) {
+        this.$root.$emit('show-record-modal', {
+          recordID: recordID,
+          recordPageID: this.recordPageID,
+          edit: true,
+        })
+      } else {
+        this.$router.push({
+          name: this.options.rowCreateUrl || 'page.record.edit',
+          params: { pageID: this.recordPageID, recordID },
+          query: null,
+        })
+      }
+    },
+
+    handleCloneRecordAction (recordID, values) {
+      if (this.inModal) {
+        this.$root.$emit('show-record-modal', {
+          recordID: recordID,
+          recordPageID: this.recordPageID,
+          values,
+          edit: true,
+        })
+      } else {
+        this.$router.push({
+          name: this.options.rowCreateUrl || 'page.record.create',
+          params: { pageID: this.recordPageID, values },
+          query: null,
+        })
+      }
+    },
   },
 }
 </script>

client/web/compose/src/components/PageBlocks/Wrap/Card.vue

@@ -40,7 +40,7 @@
               </b-button>
 
               <b-button
-                v-if="block.options.magnifyOption"
+                v-if="block.options.magnifyOption || isBlockMagnified"
                 :title="isBlockMagnified ? '' : $t('general.label.magnify')"
                 variant="outline-light"
                 class="d-flex align-items-center text-secondary d-print-none border-0"

client/web/compose/src/components/PageBlocks/Wrap/Plain.vue

@@ -38,7 +38,7 @@
               </b-button>
 
               <b-button
-                v-if="block.options.magnifyOption"
+                v-if="block.options.magnifyOption || isBlockMagnified"
                 :title="isBlockMagnified ? '' : $t('general.label.magnify')"
                 variant="outline-light"
                 class="d-flex align-items-center text-secondary d-print-none border-0"

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

@@ -71,6 +71,7 @@ export default {
       return [
         this.block.options.magnifyOption,
         this.block.options.showRefresh,
+        this.isBlockMagnified
       ].some(c => !!c)
     },
 

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

@@ -24,6 +24,7 @@
       :record-i-d="recordID"
       :values="values"
       :ref-record="refRecord"
+      :edit="edit"
       show-record-modal
       @handle-record-redirect="loadRecord"
       @on-modal-back="loadRecord"
@@ -74,6 +75,7 @@ export default {
       page: undefined,
       values: undefined,
       refRecord: undefined,
+      edit: false,
     }
   },
 
@@ -131,10 +133,11 @@ export default {
       clearModalPreviousPage: 'ui/clearModalPreviousPage',
     }),
 
-    loadRecord ({ recordID, recordPageID, values, refRecord, pushModalPreviousPage = true }) {
+    loadRecord ({ recordID, recordPageID, values, refRecord, edit, pushModalPreviousPage = true }) {
       this.recordID = recordID
       this.values = values
       this.refRecord = refRecord
+      this.edit = edit
 
       this.loadModal({ recordID, recordPageID })
 

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

@@ -177,6 +177,11 @@ export default {
       type: Boolean,
       required: false,
     },
+
+    edit: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   data () {
@@ -320,6 +325,16 @@ export default {
         }
       },
     },
+
+    edit: {
+      immediate: true,
+      handler (value) {
+        if (value) {
+          this.inEditing = true
+          this.inCreating = true
+        }
+      },
+    },
   },
 
   mounted () {

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

@@ -186,6 +186,7 @@ iframe:
   srcFieldLabel: Field (URL) from record to use for the iframe
   srcLabel: URL to show in the iframe
 metric:
+  metricDrillDown: Metric drill down
   defaultMetricLabel: Unnamed metric
   drillDown:
     label: Drill down