feat(Detail): added PagePreview component

packages/@mapomodule/uikit/components/Detail/Detail.vue

@@ -116,6 +116,14 @@
                       >{{ $t("mapo.delete") }}</v-btn
                     >
                   </slot>
+                   <!-- Use this to override the Preview Page button. -->
+                   <slot name="button.preview" v-bind="slotBindings">
+                    <!-- The Preview Page button. Needs a preview field from model. Declare it in the props. -->
+                    <PagePreview
+                      v-if="previewUrl"
+                      :pageUrl="previewUrl"
+                    />                    
+                  </slot>
                 </div>
               </slot>
               <!-- Use this to add content on the top of the sidebar fields (or under sidebar buttons). -->
@@ -281,6 +289,11 @@ export default {
         return ["auto", "force", "disable"].indexOf(value) !== -1;
       },
     },
+    // The name of the field that contains the url of the page preview. [optional]
+    previewField: {
+      type: String,
+      required: false,
+    },
     // This forces the detail page to be readonly.
     readonly: Boolean
   },
@@ -491,6 +504,9 @@ export default {
     hasDiff() {
       return !!(this.modelDiff && Object.keys(this.modelDiff).length > 0);
     },
+    previewUrl() {
+      return this.previewField ? this.model[this.previewField] : null;
+    },
   },
   async mounted() {
     if (this.identifier && this.identifier !== "new") {

packages/@mapomodule/uikit/components/PagePreview.vue

@@ -0,0 +1,58 @@
+<template>
+  <v-dialog v-model="dialog" width="90vw">
+    <template v-slot:activator="{ on, attrs }">
+      <v-btn tile block @click="openPreview(true)" color="primary" class="mb-2">
+        {{ $t("mapo.showPreview") }}</v-btn
+      >
+    </template>
+    <v-card class="iframe-card">
+      <iframe :src="computedUrl" class="iframe-preview"></iframe>
+    </v-card>
+  </v-dialog>
+</template>
+
+<style lang="scss" scoped>
+.iframe-card {
+  height: 90vh;
+  min-height: 90vh;
+}
+.iframe-preview {
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+</style>
+
+<script>
+export default {
+  name: "PagePreview",
+  props: {
+    pageUrl: {
+      type: String,
+      reruired: true,
+    },
+  },
+  data() {
+    return {
+      dialog: false,
+    };
+  },
+  methods: {
+    openPreview() {
+      this.dialog = true;
+    },
+  },
+  computed: {
+    checkifUrlIsAbsolute() {
+      return this.pageUrl.startsWith("http");
+    },
+    computedUrl() {
+      if (this.checkifUrlIsAbsolute) {
+        return this.pageUrl;
+      } else {
+        return `/${this.pageUrl}`;
+      }
+    },
+  },
+};
+</script>

packages/@mapomodule/uikit/translations/en-US.js

@@ -40,6 +40,7 @@ export default {
         altTag: "Alt Tag",
         titleTag: "Title Tag",
         linkedModels: "Linked Models",
+        showPreview: "Show preview",
         searchLocation: "Search location",
         latitude: "Latitude",
         longitude: "Longitude",

packages/@mapomodule/uikit/translations/it-IT.js

@@ -41,6 +41,7 @@ export default {
         altTag: "Alt Tag",
         titleTag: "Title Tag",
         linkedModels: "Modelli collegati",
+        showPreview: "Mostra anteprima",
         searchLocation: "Cerca luogo",
         latitude: "Latitudine",
         longitude: "Longitudine",