Live preview

.gitignore

@@ -10,3 +10,4 @@ phpunit.xml
 Thumbs.db
 yarn-error.log
 webpack.mix.js
+auth.json

auth.json

@@ -0,0 +1,8 @@
+{
+    "http-basic": {
+        "nova.laravel.com": {
+            "username": "[email protected]",
+            "password": "UFatuHRAicf5Wi8EGJHxBA1FoweIFvZNs2S0QFeLgb7M4RR2Dl"
+        }
+    }
+}

dist/js/field.js.LICENSE.txt

@@ -1,5 +1,5 @@
 /**!
- * Sortable 1.15.0
+ * Sortable 1.15.2
  * @author	RubaXa   <[email protected]>
  * @author	owenm    <[email protected]>
  * @license MIT

package.json

@@ -27,5 +27,9 @@
         "sortablejs": "^1.15.0",
         "vue-loader": "^16.8.3",
         "vuex": "^4.0.2"
+    },
+    "dependencies": {
+        "laravel-nova-ui": "^0.4.12",
+        "underscore": "^1.13.6"
     }
 }

resources/js/components/DetailField.vue

@@ -11,6 +11,7 @@
                     :resourceName="resourceName"
                     :resourceId="resourceId"
                     :attribute="field.attribute"
+                    :previewStylesheet="field.enablePreview"
                 />
             </div>
         </template>
@@ -87,13 +88,15 @@ export default {
                     fields,
                     this.field,
                     key,
+                    layout.preview,
                     collapsed,
                     layout,
                     resolved_title
                 );
 
             this.groups[group.key] = group;
             this.order.push(group.key);
+
         },
     },
 };

resources/js/components/DetailGroup.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="componentStyle" :dusk="'detail-'+attribute+'-'+index">
+    <div v-if="!previewStylesheet" :class="componentStyle" :dusk="'detail-'+attribute+'-'+index">
         <div :class="titleStyle" v-if="group.title">
             <span class="block float-left border-r border-gray-100 dark:border-gray-700  pr-4 mr-4"><!--
              --><span class="text-60 text-xs">#</span><!--
@@ -17,12 +17,17 @@
             :validation-errors="null"
             :class="{ 'remove-bottom-border': index == group.fields.length - 1 }"
         />
-    </div>
+    </div>    
+    <preview-iframe v-else-if="initialPreviewHtml" :stylesheet="previewStylesheet" :flexible_key="group.key" :initialPreviewHtml="initialPreviewHtml" :updatedPreviewHtml="updatedPreviewHtml" />
 </template>
 
 <script>
+import PreviewIframe from './PreviewIframe';
+
 export default {
-    props: ['attribute', 'group', 'index', 'last', 'resource', 'resourceName', 'resourceId'],
+    components: {PreviewIframe},
+
+    props: ['attribute', 'group', 'index', 'last', 'resource', 'resourceName', 'resourceId', 'previewStylesheet'],
 
     computed: {
         componentStyle() {
@@ -31,6 +36,53 @@ export default {
         titleStyle() {
             return ['pb-4', 'border-b', 'border-gray-100', 'dark:border-gray-700'];
         }
+    },
+
+    data() {
+        return {
+            form: new FormData(),
+            initialPreviewHtml: null,
+            updatedPreviewHtml: null,
+        }
+    },
+
+    mounted() {
+        this.$nextTick(() => {
+            this.group.fields.forEach((field) => {
+                this.form.set("__key", this.group.key);
+                this.form.set(field.attribute, ((typeof field.value === 'object' && field.value !== null) ?
+                    JSON.stringify(field.value) : (field.value ?? '')));
+                });
+            this.getPreview();
+        });
+
+    },
+
+    methods: {
+         getPreview() {
+            fetch(
+                `/nova-vendor/flexible/view/${this.resourceName}/${this.resourceId}/${this.attribute}/${this.group.name}`,
+                {
+                    method: "post",
+                    body: this.form,
+                    headers: {
+                        "X-CSRF-TOKEN": document.querySelector(
+                            'meta[name="csrf-token"]'
+                        ).content,
+                    },
+                }
+            )
+                .then((response) => response.json())
+                .then((json) => {
+
+                    if(!this.initialPreviewHtml || json.has_uploads) {
+                        this.initialPreviewHtml = json.view;
+                    }
+                    else {
+                        this.updatedPreviewHtml = json.view;
+                    }
+                });
+        },
     }
 }
 </script>