From 30a7a3172405ee0fd6a9655fb8dbf7043a24000a Mon Sep 17 00:00:00 2001
From: Cram42 <grant.leroux+github@gmail.com>
Date: Fri, 11 Nov 2022 14:23:02 +0800
Subject: [PATCH] Move label preview to alpine component

---
 .../views/partials/label2-preview.blade.php   | 76 +++++++++++++++++++
 resources/views/settings/labels.blade.php     | 27 +------
 2 files changed, 77 insertions(+), 26 deletions(-)
 create mode 100644 resources/views/partials/label2-preview.blade.php

diff --git a/resources/views/partials/label2-preview.blade.php b/resources/views/partials/label2-preview.blade.php
new file mode 100644
index 0000000000..7b826f6d4b
--- /dev/null
+++ b/resources/views/partials/label2-preview.blade.php
@@ -0,0 +1,76 @@
+@once
+    @push('css')
+        <style>
+            :root {
+                --l2p-height: 400px;
+                --l2p-background-color: aliceblue;
+            }
+
+            .l2p-root,
+            .l2p-root * {
+                box-sizing: border-box;
+            }
+
+            .l2p-root {
+                width: 100%;
+                height: var(--l2p-height);
+                display: flex;
+                flex-direction: column;
+            }
+
+            .l2p-root > label {
+                font-size: 0.9em;
+                padding: 0;
+                margin: 0;
+            }
+
+            .l2p-root > iframe {
+                flex: 1;
+                overflow: auto;
+                background-color: var(--l2p-background-color);
+            }
+        </style>
+    @endpush
+@endonce
+
+@push('js')
+    <script>
+        document.addEventListener('alpine:init', () => {
+
+            Alpine.data('label2_preview', () => ({
+
+                _form: null,
+                _init: function() {
+                    this._form = this.$root.closest('form');
+                    this._form.addEventListener('change', this.updateURL.bind(this));
+                },
+
+                updateURL: function() {
+
+                    let params = {
+                        settings: Object.assign({}, ...$(this._form)
+                            .serializeArray()
+                            .filter((value, index, all) => value.name.includes('label2_'))
+                            .map((value, index, all) => ({[value.name]: value.value}))
+                            )
+                    };
+
+                    let template = params.settings.label2_template;
+                    if (!template) return;
+
+                    this.previewURL = '{{ route("labels.show", ["labelName" => ":label"]) }}'
+                        .replace(':label', template.replaceAll('\\', '/'))
+                        .concat('?', $.param(params), '#toolbar=0');
+                },
+
+                previewURL: ''
+            }));
+
+        });
+    </script>
+@endpush
+
+<div x-data="label2_preview" x-init="_init" class="l2p-root">
+    <label for="label2-preview">Preview</label>
+    <iframe id="label2-preview" x-bind:src="previewURL"></iframe>
+</div>
diff --git a/resources/views/settings/labels.blade.php b/resources/views/settings/labels.blade.php
index 1209f6df75..63bf660573 100644
--- a/resources/views/settings/labels.blade.php
+++ b/resources/views/settings/labels.blade.php
@@ -20,30 +20,6 @@
         }
     </style>
 
-    <script>
-
-        function refreshPreview() {
-            var settingsOverride = {
-                'settings': Object.assign({}, ...$('#settingsForm')
-                    .serializeArray()
-                    .filter((value, index, all) => value.name.includes('label2_'))
-                    .map((value, index, all) => ({[value.name]: value.value})))
-            };
-            var params = $.param(settingsOverride);
-            var template = settingsOverride.settings.label2_template;
-            if (template === undefined) return;
-            
-            var url = "{{ route('labels.show', ['labelName' => ':label']) }}".replace(':label', template) + "?" + params + "#toolbar=0";
-            $('iframe#framePreview').attr('src', url);
-        }
-
-        window.addEventListener('load', () => {
-            $('#settingsForm').on('change', refreshPreview);
-            $('#settingsForm').on('load-success.bs.table', refreshPreview);
-        });
-
-    </script>
-
     {{ Form::open(['id' => 'settingsForm', 'method' => 'POST', 'files' => false, 'autocomplete' => 'off', 'class' => 'form-horizontal', 'role' => 'form' ]) }}
     <!-- CSRF Token -->
     {{csrf_field()}}
@@ -83,8 +59,7 @@
                             <div class="form-group {{ $errors->has('label2_template') ? 'error' : '' }}">
                                 <div class="col-md-3">
                                     {{ Form::label('label2_template', trans('admin/settings/general.label2_template')) }}
-                                    <div>{{ Form::button('Refresh Preview', ['class'=>'btn btn-default btn-sm', 'style'=>'width:100%', 'onClick'=>'refreshPreview()']) }}</div>
-                                    <div><iframe id="framePreview" style="width:100%; height:400px;">Preview Here</iframe></div>
+                                    @include('partials.label2-preview')
                                 </div>
                                 <div class="col-md-9">
                                     <table