diff --git a/app/javascript/template_builder/builder.vue b/app/javascript/template_builder/builder.vue
index 72e03842..0e5d1d39 100644
--- a/app/javascript/template_builder/builder.vue
+++ b/app/javascript/template_builder/builder.vue
@@ -177,7 +177,7 @@
@change="save"
/>
+
-
+
+
+
+
+
@@ -350,7 +400,7 @@ import Contenteditable from './contenteditable'
import DocumentPreview from './preview'
import DocumentControls from './controls'
import MobileFields from './mobile_fields'
-import { IconUsersPlus, IconDeviceFloppy, IconChevronDown, IconEye, IconWritingSign, IconInnerShadowTop, IconInfoCircle } from '@tabler/icons-vue'
+import { IconPlus, IconUsersPlus, IconDeviceFloppy, IconChevronDown, IconEye, IconWritingSign, IconInnerShadowTop, IconInfoCircle } from '@tabler/icons-vue'
import { v4 } from 'uuid'
import { ref, computed } from 'vue'
import { en as i18nEn } from './i18n'
@@ -363,6 +413,7 @@ export default {
Fields,
IconInfoCircle,
MobileDrawField,
+ IconPlus,
IconWritingSign,
MobileFields,
Logo,
@@ -420,6 +471,11 @@ export default {
required: false,
default: true
},
+ withAddPageButton: {
+ type: Boolean,
+ required: false,
+ default: false
+ },
autosave: {
type: Boolean,
required: false,
@@ -566,6 +622,7 @@ export default {
return {
documentRefs: [],
isBreakpointLg: false,
+ isLoadingBlankPage: false,
isSaving: false,
selectedSubmitter: null,
showDrawField: false,
@@ -1148,6 +1205,35 @@ export default {
document.activeElement?.blur()
},
+ addBlankPage () {
+ this.isLoadingBlankPage = true
+
+ const canvas = document.createElement('canvas')
+
+ canvas.width = 816
+ canvas.height = 1056
+
+ const ctx = canvas.getContext('2d')
+
+ ctx.fillStyle = 'white'
+ ctx.fillRect(0, 0, canvas.width, canvas.height)
+
+ canvas.toBlob((blob) => {
+ const file = new File([blob], `Page ${this.template.schema.length + 1}.png`, { type: blob.type, lastModified: Date.now() })
+
+ const formData = new FormData()
+ formData.append('files[]', file)
+
+ this.baseFetch(`/templates/${this.template.id}/documents`, {
+ method: 'POST',
+ body: formData
+ }).then(async (resp) => {
+ this.updateFromUpload(await resp.json())
+ }).finally(() => {
+ this.isLoadingBlankPage = false
+ })
+ }, 'image/png')
+ },
updateFromUpload (data) {
this.template.schema.push(...data.schema)
this.template.documents.push(...data.documents)
diff --git a/app/javascript/template_builder/dropzone.vue b/app/javascript/template_builder/dropzone.vue
index 945d4ce2..3fffab65 100644
--- a/app/javascript/template_builder/dropzone.vue
+++ b/app/javascript/template_builder/dropzone.vue
@@ -5,6 +5,7 @@
@drop.prevent="onDropFiles"
>