autosave builder changes

app/javascript/application.scss

@@ -52,7 +52,7 @@ button[disabled] .enabled {
 }
 
 .base-textarea {
-  @apply textarea textarea-bordered bg-white;
+  @apply textarea textarea-bordered bg-white rounded-3xl;
 }
 
 .base-button {

app/javascript/template_builder/area.vue

@@ -24,6 +24,7 @@
         :compact="true"
         :menu-classes="'dropdown-content bg-white menu menu-xs p-2 shadow rounded-box w-52 rounded-t-none -left-[1px]'"
         :submitters="template.submitters"
+        @update:model-value="save"
         @click="selectedAreaRef.value = area"
       />
       <FieldType
@@ -31,7 +32,7 @@
         :button-width="27"
         :button-classes="'px-1'"
         :menu-classes="'bg-white rounded-t-none'"
-        @update:model-value="maybeUpdateOptions"
+        @update:model-value="[maybeUpdateOptions(), save()]"
         @click="selectedAreaRef.value = area"
       />
       <span
@@ -111,7 +112,7 @@ export default {
     FieldSubmitter,
     IconX
   },
-  inject: ['template', 'selectedAreaRef'],
+  inject: ['template', 'selectedAreaRef', 'save'],
   props: {
     area: {
       type: Object,
@@ -127,6 +128,7 @@ export default {
   data () {
     return {
       isResize: false,
+      isDragged: false,
       isNameFocus: false,
       dragFrom: { x: 0, y: 0 }
     }
@@ -204,6 +206,8 @@ export default {
         this.field.name = ''
         this.$refs.name.innerText = this.defaultName
       }
+
+      this.save()
     },
     onNameEnter (e) {
       this.$refs.name.blur()
@@ -216,6 +220,8 @@ export default {
     },
     drag (e) {
       if (e.toElement.id === 'mask') {
+        this.isDragged = true
+
         this.area.x = (e.layerX - this.dragFrom.x) / e.toElement.clientWidth
         this.area.y = (e.layerY - this.dragFrom.y) / e.toElement.clientHeight
       }
@@ -236,6 +242,12 @@ export default {
       document.removeEventListener('mousemove', this.drag)
       document.removeEventListener('mouseup', this.stopDrag)
 
+      if (this.isDragged) {
+        this.save()
+      }
+
+      this.isDragged = false
+
       this.$emit('stop-drag')
     },
     startResize () {
@@ -251,6 +263,8 @@ export default {
       document.removeEventListener('mouseup', this.stopResize)
 
       this.$emit('stop-resize')
+
+      this.save()
     }
   }
 }

app/javascript/template_builder/builder.vue

@@ -17,24 +17,32 @@
       </div>
       <div class="space-x-3 flex items-center">
         <a
-          :href="`/templates/${template.id}/submissions`"
+          :href="`/templates/${template.id}/submissions/new`"
+          data-turbo-frame="modal"
           class="btn btn-primary"
         >
           <IconUsersPlus
             width="20"
-            class="mr-2 inline"
+            class="inline"
           />
           Recipients
         </a>
-        <a
-          :href="`/`"
+        <button
           class="base-button"
+          :class="{ disabled: isSaving }"
           v-bind="isSaving ? { disabled: true } : {}"
           @click.prevent="onSaveClick"
-        ><IconDeviceFloppy
-          width="20"
-          class="mr-2"
-        />Save</a>
+        >
+          <IconInnerShadowTop
+            v-if="isSaving"
+            width="20"
+            class="animate-spin"
+          />
+          <IconDeviceFloppy
+            v-else
+            width="20"
+          />Save
+        </button>
       </div>
     </div>
     <div
@@ -131,7 +139,7 @@ import Document from './document'
 import Logo from './logo'
 import Contenteditable from './contenteditable'
 import DocumentPreview from './preview'
-import { IconUsersPlus, IconDeviceFloppy } from '@tabler/icons-vue'
+import { IconUsersPlus, IconDeviceFloppy, IconInnerShadowTop } from '@tabler/icons-vue'
 import { v4 } from 'uuid'
 import i18n from './i18n'
 import { ref, computed } from 'vue'
@@ -145,6 +153,7 @@ export default {
     Fields,
     Logo,
     DocumentPreview,
+    IconInnerShadowTop,
     Contenteditable,
     IconUsersPlus,
     IconDeviceFloppy
@@ -152,6 +161,7 @@ export default {
   provide () {
     return {
       template: this.template,
+      save: this.save,
       selectedAreaRef: computed(() => this.selectedAreaRef)
     }
   },
@@ -239,6 +249,8 @@ export default {
       if (!field.areas.length) {
         this.template.fields.splice(this.template.fields.indexOf(field), 1)
       }
+
+      this.save()
     },
     onDraw (area) {
       if (this.drawField) {
@@ -281,6 +293,8 @@ export default {
       }
 
       this.selectedAreaRef.value = area
+
+      this.save()
     },
     onDropfield (area) {
       const field = {
@@ -343,6 +357,8 @@ export default {
       this.selectedAreaRef.value = fieldArea
 
       this.template.fields.push(field)
+
+      this.save()
     },
     updateFromUpload ({ schema, documents }) {
       this.template.schema.push(...schema)
@@ -387,7 +403,7 @@ export default {
       this.isSaving = true
 
       this.save().then(() => {
-        // window.Turbo.visit('/')
+        window.Turbo.visit(`/templates/${this.template.id}/submissions`)
       }).finally(() => {
         this.isSaving = false
       })
@@ -404,7 +420,14 @@ export default {
 
       return fetch(`/api/templates/${this.template.id}`, {
         method: 'PUT',
-        body: JSON.stringify({ template: this.template }),
+        body: JSON.stringify({
+          template: {
+            name: this.template.name,
+            schema: this.template.schema,
+            submitters: this.template.submitters,
+            fields: this.template.fields
+          }
+        }),
         headers: { 'Content-Type': 'application/json' }
       }).then((resp) => {
         console.log(resp)

app/javascript/template_builder/field.vue

@@ -14,7 +14,7 @@
           <FieldType
             v-model="field.type"
             :button-width="20"
-            @update:model-value="maybeUpdateOptions"
+            @update:model-value="[maybeUpdateOptions(), save()]"
             @click="scrollToFirstArea"
           />
           <Contenteditable
@@ -157,10 +157,11 @@
             class="w-full input input-primary input-xs text-sm"
             type="text"
             required
+            @blur="save"
           >
           <button
             class="text-sm w-3.5"
-            @click="field.options.splice(index, 1)"
+            @click="[field.options.splice(index, 1), save()]"
           >
             &times;
           </button>
@@ -168,7 +169,7 @@
         <button
           v-if="field.options"
           class="text-center text-sm w-full pb-1"
-          @click="field.options.push('')"
+          @click="[field.options.push(''), save()]"
         >
           + Add option
         </button>
@@ -191,7 +192,7 @@ export default {
     IconTrashX,
     FieldType
   },
-  inject: ['template'],
+  inject: ['template', 'save'],
   props: {
     field: {
       type: Object,
@@ -250,9 +251,13 @@ export default {
       }
 
       this.isNameFocus = false
+
+      this.save()
     },
     removeArea (area) {
       this.field.areas.splice(this.field.areas.indexOf(area), 1)
+
+      this.save()
     }
   }
 }

app/javascript/template_builder/field_submitter.vue

@@ -26,6 +26,7 @@
           class="cursor-text"
           :icon-inline="true"
           :icon-width="18"
+          @update:model-value="$emit('name-change', selectedSubmitter)"
         />
       </div>
       <span>
@@ -116,7 +117,7 @@ export default {
       default: 'dropdown-content menu p-2 shadow bg-base-100 rounded-box w-full z-10'
     }
   },
-  emits: ['update:model-value', 'remove'],
+  emits: ['update:model-value', 'remove', 'new-submitter', 'name-change'],
   computed: {
     colors () {
       return [
@@ -158,6 +159,7 @@ export default {
       this.submitters.push(newSubmitter)
 
       this.$emit('update:model-value', newSubmitter.uuid)
+      this.$emit('new-submitter', newSubmitter)
     },
     closeDropdown () {
       document.activeElement.blur()

app/javascript/template_builder/fields.vue

@@ -4,7 +4,9 @@
       :model-value="selectedSubmitter.uuid"
       class="w-full bg-base-100"
       :submitters="submitters"
+      @new-submitter="save"
       @remove="removeSubmitter"
+      @name-change="save"
       @update:model-value="$emit('change-submitter', submitters.find((s) => s.uuid === $event))"
     />
   </div>
@@ -79,6 +81,7 @@ export default {
     Field,
     FieldSubmitter
   },
+  inject: ['save'],
   props: {
     fields: {
       type: Array,
@@ -116,6 +119,8 @@ export default {
       if (this.selectedSubmitter === submitter) {
         this.$emit('change-submitter', this.submitters[0])
       }
+
+      this.save()
     },
     move (field, direction) {
       const currentIndex = this.submitterFields.indexOf(field)
@@ -134,9 +139,13 @@ export default {
       } else {
         this.fields.splice(fieldsIndex + direction, 0, field)
       }
+
+      this.save()
     },
     removeField (field) {
       this.fields.splice(this.fields.indexOf(field), 1)
+
+      this.save()
     },
     addField (type, area = null) {
       const field = {
@@ -152,6 +161,8 @@ export default {
       }
 
       this.fields.push(field)
+
+      this.save()
     }
   }
 }