add autosave config

app/javascript/template_builder/builder.vue

@@ -640,6 +640,7 @@
                 :draw-field-type="drawFieldType"
                 :draw-custom-field="drawCustomField"
                 :draw-option="drawOption"
+                :autosave="autosave"
                 @update="onDynamicDocumentUpdate"
                 @draw="clearDrawField"
                 @add-custom-field="addCustomField"
@@ -1379,6 +1380,7 @@ export default {
       isPreviewLoading: false,
       isLoadingBlankPage: false,
       isSaving: false,
+      hasUnsavedChanges: false,
       isDetectingPageFields: false,
       detectFieldsQueue: [],
       detectingAnalyzingProgress: null,
@@ -1662,6 +1664,11 @@ export default {
 
     window.addEventListener('dragleave', this.onWindowDragLeave)
 
+    if (!this.autosave) {
+      window.addEventListener('beforeunload', this.onBeforeUnload)
+      document.addEventListener('turbo:before-visit', this.onBeforeVisit)
+    }
+
     this.$nextTick(() => {
       if (document.location.search?.includes('stripe_connect_success')) {
         document.querySelector('form[action="/auth/stripe_connect"]')?.closest('.dropdown')?.querySelector('label')?.focus()
@@ -1685,6 +1692,11 @@ export default {
 
     this.resizeObserver.disconnect()
     window.removeEventListener('dragleave', this.onWindowDragLeave)
+
+    if (!this.autosave) {
+      window.removeEventListener('beforeunload', this.onBeforeUnload)
+      document.removeEventListener('turbo:before-visit', this.onBeforeVisit)
+    }
   },
   beforeUpdate () {
     this.documentRefs = []
@@ -2241,6 +2253,20 @@ export default {
         this.insertField(field)
       }
     },
+    onBeforeUnload (event) {
+      if (this.hasUnsavedChanges) {
+        event.preventDefault()
+
+        event.returnValue = ''
+
+        return ''
+      }
+    },
+    onBeforeVisit (event) {
+      if (this.hasUnsavedChanges && !window.confirm(this.t('close_without_saving_changes'))) {
+        event.preventDefault()
+      }
+    },
     closeDropdown () {
       document.activeElement.blur()
     },
@@ -4036,6 +4062,8 @@ export default {
       }
 
       if (!this.autosave && !force) {
+        this.hasUnsavedChanges = true
+
         return Promise.resolve({})
       }
 
@@ -4058,6 +4086,8 @@ export default {
         }),
         headers: { 'Content-Type': 'application/json' }
       }).then(() => {
+        this.hasUnsavedChanges = false
+
         if (this.onSave) {
           this.onSave(this.template)
         }

app/javascript/template_builder/dynamic_document.vue

@@ -84,6 +84,11 @@ export default {
       required: false,
       default: true
     },
+    autosave: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     selectedSubmitter: {
       type: Object,
       required: false,
@@ -279,7 +284,7 @@ export default {
 
       this.updatedSectionEditors.set(section.id, editor)
 
-      this.saveTimer = setTimeout(() => this.updateSectionsAndSave(), 1000)
+      this.saveTimer = setTimeout(() => this.autosave ? this.updateSectionsAndSave() : this.updateSections(), 1000)
     },
     loadListsStyle () {
       this.listsStyle = this.bodyDom.querySelector('body > style[data-lists]')?.textContent || null
@@ -299,7 +304,9 @@ export default {
     updateVariablesSchema () {
       this.document.variables_schema = buildVariablesSchema(this.bodyDom.body)
     },
-    updateSectionsAndSave () {
+    updateSections () {
+      delete this.saveTimer
+
       this.updatedSectionEditors.forEach((editor, sectionId) => {
         const target = this.bodyDom.getElementById(sectionId)
 
@@ -315,6 +322,9 @@ export default {
       this.updateVariablesSchema()
 
       this.$emit('update', this.document)
+    },
+    updateSectionsAndSave () {
+      this.updateSections()
 
       return this.saveBody()
     },

app/javascript/template_builder/i18n.js

@@ -70,6 +70,7 @@ const en = {
   remove_condition: 'Remove condition',
   add_condition: 'Add condition',
   are_you_sure_: 'Are you sure?',
+  close_without_saving_changes: 'Close without saving changes?',
   sign_yourself: 'Sign Yourself',
   set_signing_date: 'Set signing date',
   signing_date: 'Signing Date',
@@ -371,6 +372,7 @@ const es = {
   down: 'Abajo',
   set_signing_date: 'Establecer fecha de firma',
   are_you_sure_: '¿Estás seguro?',
+  close_without_saving_changes: '¿Cerrar sin guardar los cambios?',
   sign_yourself: 'Firma tú mismo',
   checked: 'Marcado',
   current_date: 'Fecha actual',
@@ -652,6 +654,7 @@ const it = {
   remove_condition: 'Rimuovi condizione',
   add_condition: 'Aggiungi condizione',
   are_you_sure_: 'Sei sicuro?',
+  close_without_saving_changes: 'Chiudere senza salvare le modifiche?',
   sign_yourself: 'Firma te stesso',
   set_signing_date: 'Imposta data di firma',
   signing_date: 'Data di firma',
@@ -953,6 +956,7 @@ const pt = {
   down: 'Para baixo',
   set_signing_date: 'Definir data de assinatura',
   are_you_sure_: 'Tem certeza?',
+  close_without_saving_changes: 'Fechar sem salvar as alterações?',
   sign_yourself: 'Assine você mesmo',
   checked: 'Marcado',
   current_date: 'Data atual',
@@ -1234,6 +1238,7 @@ const fr = {
   remove_condition: 'Supprimer la condition',
   add_condition: 'Ajouter une condition',
   are_you_sure_: 'Êtes-vous sûr ?',
+  close_without_saving_changes: 'Fermer sans enregistrer les modifications ?',
   sign_yourself: 'Signer vous-même',
   set_signing_date: 'Définir la date de signature',
   signing_date: 'Date de signature',
@@ -1525,6 +1530,7 @@ const de = {
   remove_condition: 'Bedingung entfernen',
   add_condition: 'Bedingung hinzufügen',
   are_you_sure_: 'Sind Sie sicher?',
+  close_without_saving_changes: 'Ohne Speichern der Änderungen schließen?',
   sign_yourself: 'Selbst unterschreiben',
   set_signing_date: 'Unterzeichnungsdatum festlegen',
   signing_date: 'Unterzeichnungsdatum',
@@ -1816,6 +1822,7 @@ const nl = {
   remove_condition: 'Voorwaarde verwijderen',
   add_condition: 'Voorwaarde toevoegen',
   are_you_sure_: 'Weet u het zeker?',
+  close_without_saving_changes: 'Sluiten zonder wijzigingen op te slaan?',
   sign_yourself: 'Zelf ondertekenen',
   set_signing_date: 'Ondertekeningsdatum instellen',
   signing_date: 'Ondertekeningsdatum',