From eaa337c598b77c40b5278622d717be1fa8f483f5 Mon Sep 17 00:00:00 2001
From: Kelani Tolulope <kelanik8@gmail.com>
Date: Tue, 3 Oct 2023 12:24:41 +0100
Subject: [PATCH] Add a continious modal navigation flow for all page block

---
 .../components/PageBlocks/CalendarBase.vue    |  7 +++-
 .../components/PageBlocks/GeometryBase.vue    |  7 +++-
 .../src/components/PageBlocks/MetricBase.vue  |  6 ++-
 .../components/PageBlocks/RecordListBase.vue  | 37 ++++++++++++++++++-
 .../src/components/PageBlocks/Wrap/Card.vue   |  2 +-
 .../src/components/PageBlocks/Wrap/Plain.vue  |  2 +-
 .../src/components/PageBlocks/Wrap/base.vue   |  1 +
 .../src/components/Public/Record/Modal.vue    |  5 ++-
 .../src/views/Public/Pages/Records/View.vue   | 15 ++++++++
 locale/en/corteza-webapp-compose/block.yaml   |  1 +
 10 files changed, 75 insertions(+), 8 deletions(-)

diff --git a/client/web/compose/src/components/PageBlocks/CalendarBase.vue b/client/web/compose/src/components/PageBlocks/CalendarBase.vue
index 021a12e21..17d9d4135 100644
--- a/client/web/compose/src/components/PageBlocks/CalendarBase.vue
+++ b/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', {
diff --git a/client/web/compose/src/components/PageBlocks/GeometryBase.vue b/client/web/compose/src/components/PageBlocks/GeometryBase.vue
index 48fb3bf09..8e8151dce 100644
--- a/client/web/compose/src/components/PageBlocks/GeometryBase.vue
+++ b/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', {
diff --git a/client/web/compose/src/components/PageBlocks/MetricBase.vue b/client/web/compose/src/components/PageBlocks/MetricBase.vue
index fb1ef2509..06026058f 100644
--- a/client/web/compose/src/components/PageBlocks/MetricBase.vue
+++ b/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,
diff --git a/client/web/compose/src/components/PageBlocks/RecordListBase.vue b/client/web/compose/src/components/PageBlocks/RecordListBase.vue
index 19c1f4b53..d4a8b3011 100644
--- a/client/web/compose/src/components/PageBlocks/RecordListBase.vue
+++ b/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>
diff --git a/client/web/compose/src/components/PageBlocks/Wrap/Card.vue b/client/web/compose/src/components/PageBlocks/Wrap/Card.vue
index 25f9ed01d..01e723604 100644
--- a/client/web/compose/src/components/PageBlocks/Wrap/Card.vue
+++ b/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"
diff --git a/client/web/compose/src/components/PageBlocks/Wrap/Plain.vue b/client/web/compose/src/components/PageBlocks/Wrap/Plain.vue
index 594c3e7eb..bcc62d695 100644
--- a/client/web/compose/src/components/PageBlocks/Wrap/Plain.vue
+++ b/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"
diff --git a/client/web/compose/src/components/PageBlocks/Wrap/base.vue b/client/web/compose/src/components/PageBlocks/Wrap/base.vue
index bdcd9de0a..58d4a8226 100644
--- a/client/web/compose/src/components/PageBlocks/Wrap/base.vue
+++ b/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)
     },
 
diff --git a/client/web/compose/src/components/Public/Record/Modal.vue b/client/web/compose/src/components/Public/Record/Modal.vue
index b0eb3a2f4..130071f37 100644
--- a/client/web/compose/src/components/Public/Record/Modal.vue
+++ b/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 })
 
diff --git a/client/web/compose/src/views/Public/Pages/Records/View.vue b/client/web/compose/src/views/Public/Pages/Records/View.vue
index 20bff2d3b..c1bf21c0f 100644
--- a/client/web/compose/src/views/Public/Pages/Records/View.vue
+++ b/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 () {
diff --git a/locale/en/corteza-webapp-compose/block.yaml b/locale/en/corteza-webapp-compose/block.yaml
index ddad8f15e..8329a9d1a 100644
--- a/locale/en/corteza-webapp-compose/block.yaml
+++ b/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