Fix Use Magnifying Glass in Page Builder

client/web/compose/src/components/Public/Page/Block/Modal.vue

@@ -99,18 +99,20 @@ export default {
   },
 
   created () {
-    this.$root.$on('magnify-page-block', ({ blockID, block } = {}) => {
-      this.customBlock = block
-      blockID = blockID || (block || {}).blockID
-      this.$router.push({ query: { ...this.$route.query, blockID } })
-    })
+    this.$root.$on('magnify-page-block', this.magnifyPageBlock)
   },
 
-  beforeDestroy () {
-    this.$root.$off('magnify-page-block')
+  destroyed () {
+    this.$root.$off('magnify-page-block', this.magnifyPageBlock)
   },
 
   methods: {
+    magnifyPageBlock ({ blockID, block } = {}) {
+      this.customBlock = block
+      blockID = blockID || (block || {}).blockID
+      this.$router.push({ query: { ...this.$route.query, blockID } })
+    },
+
     loadModal (blockID) {
       // Get data from route
       const { recordID: paramsRecordID, pageID } = this.$route.params

client/web/compose/src/views/Admin/Pages/Builder.vue

@@ -262,6 +262,10 @@
         </template>
       </editor-toolbar>
     </portal>
+
+    <magnification-modal
+      :namespace="namespace"
+    />
   </div>
 </template>
 
@@ -276,6 +280,7 @@ import EditorToolbar from 'corteza-webapp-compose/src/components/Admin/EditorToo
 import { compose, NoID } from '@cortezaproject/corteza-js'
 import Configurator from 'corteza-webapp-compose/src/components/PageBlocks/Configurator'
 import { fetchID } from 'corteza-webapp-compose/src/lib/tabs'
+import MagnificationModal from 'corteza-webapp-compose/src/components/Public/Page/Block/Modal'
 
 export default {
   i18nOptions: {
@@ -289,6 +294,7 @@ export default {
     PageBlock,
     EditorToolbar,
     PageTranslator,
+    MagnificationModal,
   },
 
   mixins: [

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

@@ -71,7 +71,6 @@
 
     <magnification-modal
       :namespace="namespace"
-      :page="page"
     />
   </div>
 </template>