rename to templates

app/javascript/application.js

@@ -8,7 +8,7 @@ import TurboModal from './elements/turbo_modal'
 import FileDropzone from './elements/file_dropzone'
 import MenuActive from './elements/menu_active'
 
-import FlowBuilder from './flow_builder/builder'
+import TemplateBuilder from './template_builder/builder'
 
 document.addEventListener('turbo:before-cache', () => {
   window.flash?.remove()
@@ -20,12 +20,12 @@ window.customElements.define('turbo-modal', TurboModal)
 window.customElements.define('file-dropzone', FileDropzone)
 window.customElements.define('menu-active', MenuActive)
 
-window.customElements.define('flow-builder', class extends HTMLElement {
+window.customElements.define('template-builder', class extends HTMLElement {
   connectedCallback () {
     this.appElem = document.createElement('div')
 
-    this.app = createApp(FlowBuilder, {
-      flow: reactive(JSON.parse(this.dataset.flow))
+    this.app = createApp(TemplateBuilder, {
+      template: reactive(JSON.parse(this.dataset.template))
     })
 
     this.app.mount(this.appElem)

app/javascript/form.js

@@ -1,12 +1,12 @@
 import { createApp, reactive } from 'vue'
 
-import Flow from './flow_form/form'
+import Form from './submission_form/form'
 
-window.customElements.define('flow-form', class extends HTMLElement {
+window.customElements.define('submission-form', class extends HTMLElement {
   connectedCallback () {
     this.appElem = document.createElement('div')
 
-    this.app = createApp(Flow, {
+    this.app = createApp(Form, {
       submissionSlug: this.dataset.submissionSlug,
       authenticityToken: this.dataset.authenticityToken,
       values: reactive(JSON.parse(this.dataset.values)),

app/javascript/form.scss

@@ -1,4 +1,4 @@
-@config "../../tailwind.flow.config.js";
+@config "../../tailwind.form.config.js";
 
 @import "tailwindcss/base";
 @import "tailwindcss/components";

app/javascript/submission_form/form.vue

@@ -164,7 +164,7 @@ import CheckboxStep from './checkbox_step'
 import FormCompleted from './completed'
 
 export default {
-  name: 'FlowForm',
+  name: 'SubmissionForm',
   components: {
     FieldAreas,
     ImageStep,

app/javascript/template_builder/builder.vue

@@ -5,13 +5,13 @@
   >
     <div class="flex justify-between py-1.5 items-center">
       <Contenteditable
-        :model-value="flow.name"
+        :model-value="template.name"
         class="text-3xl focus:text-clip"
         @update:model-value="updateName"
       />
       <div class="space-x-3 flex items-center">
         <a
-          :href="`/flows/${flow.id}/submissions`"
+          :href="`/templates/${template.id}/submissions`"
           class="btn btn-primary"
         >
           <IconUsersPlus
@@ -40,9 +40,9 @@
         class="overflow-auto w-52 flex-none pr-4 mt-0.5 pt-0.5"
       >
         <DocumentPreview
-          v-for="(item, index) in flow.schema"
+          v-for="(item, index) in template.schema"
           :key="index"
-          :with-arrows="flow.schema.length > 1"
+          :with-arrows="template.schema.length > 1"
           :item="item"
           :document="sortedDocuments[index]"
           @scroll-to="scrollIntoDocument(item)"
@@ -53,7 +53,7 @@
         />
         <div class="sticky bottom-0 bg-base-100 py-2">
           <Upload
-            :flow-id="flow.id"
+            :template-id="template.id"
             @success="updateFromUpload"
           />
         </div>
@@ -90,7 +90,7 @@
           FIelds
           <Fields
             ref="fields"
-            v-model:fields="flow.fields"
+            v-model:fields="template.fields"
             @set-draw="drawField = $event"
             @set-drag="dragFieldType = $event"
             @drag-end="dragFieldType = null"
@@ -110,7 +110,7 @@ import DocumentPreview from './preview'
 import { IconUsersPlus, IconDeviceFloppy } from '@tabler/icons-vue'
 
 export default {
-  name: 'FlowBuilder',
+  name: 'TemplateBuilder',
   components: {
     Upload,
     Document,
@@ -121,7 +121,7 @@ export default {
     IconDeviceFloppy
   },
   props: {
-    flow: {
+    template: {
       type: Object,
       required: true
     }
@@ -138,7 +138,7 @@ export default {
     fieldAreasIndex () {
       const areas = {}
 
-      this.flow.fields.forEach((f) => {
+      this.template.fields.forEach((f) => {
         (f.areas || []).forEach((a) => {
           areas[a.attachment_uuid] ||= {}
 
@@ -151,8 +151,8 @@ export default {
       return areas
     },
     sortedDocuments () {
-      return this.flow.schema.map((item) => {
-        return this.flow.documents.find(doc => doc.uuid === item.attachment_uuid)
+      return this.template.schema.map((item) => {
+        return this.template.documents.find(doc => doc.uuid === item.attachment_uuid)
       })
     }
   },
@@ -191,8 +191,8 @@ export default {
       this.$refs.fields.addField(this.dragFieldType, area)
     },
     updateFromUpload ({ schema, documents }) {
-      this.flow.schema.push(...schema)
-      this.flow.documents.push(...documents)
+      this.template.schema.push(...schema)
+      this.template.documents.push(...documents)
 
       this.$nextTick(() => {
         this.$refs.previews.scrollTop = this.$refs.previews.scrollHeight
@@ -203,28 +203,28 @@ export default {
       this.save()
     },
     updateName (value) {
-      this.flow.name = value
+      this.template.name = value
 
       this.save()
     },
     onDocumentRemove (item) {
       if (window.confirm('Are you sure?')) {
-        this.flow.schema.splice(this.flow.schema.indexOf(item), 1)
+        this.template.schema.splice(this.template.schema.indexOf(item), 1)
       }
 
       this.save()
     },
     moveDocument (item, direction) {
-      const currentIndex = this.flow.schema.indexOf(item)
+      const currentIndex = this.template.schema.indexOf(item)
 
-      this.flow.schema.splice(currentIndex, 1)
+      this.template.schema.splice(currentIndex, 1)
 
-      if (currentIndex + direction > this.flow.schema.length) {
-        this.flow.schema.unshift(item)
+      if (currentIndex + direction > this.template.schema.length) {
+        this.template.schema.unshift(item)
       } else if (currentIndex + direction < 0) {
-        this.flow.schema.push(item)
+        this.template.schema.push(item)
       } else {
-        this.flow.schema.splice(currentIndex + direction, 0, item)
+        this.template.schema.splice(currentIndex + direction, 0, item)
       }
 
       this.save()
@@ -239,9 +239,9 @@ export default {
       })
     },
     save () {
-      return fetch(`/api/flows/${this.flow.id}`, {
+      return fetch(`/api/templates/${this.template.id}`, {
         method: 'PUT',
-        body: JSON.stringify({ flow: this.flow }),
+        body: JSON.stringify({ template: this.template }),
         headers: { 'Content-Type': 'application/json' }
       }).then((resp) => {
         console.log(resp)

app/javascript/template_builder/document.vue

@@ -18,7 +18,7 @@
 import Page from './page'
 
 export default {
-  name: 'FlowDocument',
+  name: 'TemplateDocument',
   components: {
     Page
   },

app/javascript/template_builder/field.vue

@@ -67,7 +67,7 @@
 
 <script>
 export default {
-  name: 'FlowField',
+  name: 'TemplateField',
   props: {
     field: {
       type: Object,

app/javascript/template_builder/fields.vue

@@ -49,7 +49,7 @@ import Field from './field'
 import { v4 } from 'uuid'
 
 export default {
-  name: 'FlowFields',
+  name: 'TemplateFields',
   components: {
     Field
   },

app/javascript/template_builder/page.vue

@@ -44,7 +44,7 @@
 import FieldArea from './area'
 
 export default {
-  name: 'FlowPage',
+  name: 'TemplatePage',
   components: {
     FieldArea
   },

app/javascript/template_builder/upload.vue

@@ -32,7 +32,7 @@ export default {
     IconUpload
   },
   props: {
-    flowId: {
+    templateId: {
       type: [Number, String],
       required: true
     }
@@ -76,7 +76,7 @@ export default {
         })
       )
 
-      fetch(`/api/flows/${this.flowId}/documents`, {
+      fetch(`/api/templates/${this.templateId}/documents`, {
         method: 'POST',
         body: JSON.stringify({ blobs }),
         headers: { 'Content-Type': 'application/json' }