Merge pull request #88 from kaidesu/navigate-away-prompt

Prompt on unsaved changes before navigating away

Author: skrolikowski

public/js/chunks/85.js

@@ -1,4 +1,4 @@
 {
-    "/js/gravity.js": "/js/gravity.js?id=d29f2740dcbcc4c2b9b8",
+    "/js/gravity.js": "/js/gravity.js?id=e8b497ebf1dfed47876d",
     "/css/gravity.css": "/css/gravity.css?id=88cf59977307f36f5f29"
 }

public/js/gravity.js

@@ -21,7 +21,7 @@
 
                                 <component
                                     v-for="(field, fieldHandle) in section.fields"
-                                    v-model="theme.option[handle][fieldHandle]"
+                                    v-model="form[handle][fieldHandle]"
                                     :key="fieldHandle"
                                     :is="field.fieldtype + '-fieldtype'"
                                     :field="{
@@ -62,10 +62,13 @@
                 <iframe ref="iframe" @load="onLoadIframe"></iframe>
             </div>
         </div>
+
+        <confirm-modal></confirm-modal>
     </div>
 </template>
 
 <script>
+    import Form from '../services/Form'
     import _ from 'lodash'
 
     var cancel
@@ -83,8 +86,8 @@
         data() {
             return {
                 theme: {},
+                form: null,
                 url: '/customize',
-                hasChanges: false,
                 window: 'desktop',
                 showControls: true,
             }
@@ -107,7 +110,7 @@
         watch: {
             'theme.option': {
                 handler: function() {
-                    this.hasChanges = true;
+                    this.form.onFirstChange()
                     this.update()
                 },
 
@@ -155,12 +158,9 @@
             },
 
             submit() {
-                this.theme.option['_method'] = 'PATCH'
-
-                axios.post(`/api/themes/${this.theme.namespace}`, this.theme.option).then(() => {
+                this.form.patch('/api/themes/' + this.theme.namespace).then((response) => {
                     toast('Theme options have been updated', 'success')
-                })
-                .catch((error) => {
+                }).catch((error) => {
                     toast(error.response.data.message, 'failed')
                 })
             },
@@ -187,7 +187,12 @@
                 axios.get('/api/theme'),
             ]).then(axios.spread(function (theme) {
                 next(function(vm) {
+                    let options = theme.data.data.option
+
+                    _.unset(options, '_json')
+
                     vm.theme = theme.data.data
+                    vm.form = new Form(options, true)
                 })
             }))
         },

public/mix-manifest.json

@@ -173,10 +173,8 @@ export default class Form {
      * Handle the first input event. Prevents navigating
      * away from the form if the preventNavigation
      * setting has been enabled.
-     *
-     * @param {object} data
      */
-    onFirstChange(data) {
+    onFirstChange() {
         this.hasChanges = true
         if (this.preventNavigation) {
             store.commit('form/setPreventNavigation', true)
@@ -186,10 +184,8 @@ export default class Form {
      /**
      * Helper method to reset the form to appear as if
      * it had no changes.
-     *
-     * @param {object} data
      */
-    resetChangeListener(data) {
+    resetChangeListener() {
         this.hasChanges = false
         if (this.preventNavigation) {
             store.commit('form/setPreventNavigation', false)

resources/js/pages/Customize.vue

@@ -100,6 +100,7 @@ const spacing = {
 }
 
 module.exports = {
+    purge: false,
     theme: {
         cursors: cursors,
 

resources/js/services/Form.js

@@ -17,7 +17,8 @@ public function show(Request $request)
         $previous = (object) parse_url(session()->get('_previous.url'));
 
         if (
-            (optional($previous)->path != '/admin/customize') and
+            (optional($previous)->path != '/'.config('fusion.path')) and
+            (optional($previous)->path != '/'.config('fusion.path').'/customize') and
             (optional($previous)->path != $request->path()) and
             (optional($previous)->path)
         ) {