didadmin/docuseal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add builder i18n

Browse Source
This commit is contained in:
Pete Matsyburka
2024-01-04 01:05:36 +02:00
parent 6f1e104067
commit 2124965996
12 changed files with 146 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/javascript/template_builder/area.vue
+1 -1
View File
@@ -149,7 +149,7 @@ export default {
FieldSubmitter,
IconX
},
inject: ['template', 'selectedAreaRef', 'save'],
inject: ['template', 'selectedAreaRef', 'save', 't'],
props: {
area: {
type: Object,
app/javascript/template_builder/builder.vue
+21 -5
View File
@@ -43,7 +43,7 @@
class="inline"
/>
<span class="hidden md:inline">
Sign Yourself
{{ t('sign_yourself') }}
</span>
</a>
<a
@@ -57,7 +57,7 @@
class="inline"
/>
<span class="hidden md:inline">
Send
{{ t('send') }}
</span>
</a>
<button
@@ -76,7 +76,7 @@
width="22"
/>
<span class="hidden md:inline">
Save
{{ t('save') }}
</span>
</button>
</template>
@@ -214,14 +214,14 @@
>
<div class="bg-base-300 rounded-lg p-5 text-center space-y-4">
<p>
Draw {{ drawField.name }} field on the document
{{ t('draw_field_on_the_document').replace('{field}', drawField.name) }}
</p>
<p>
<button
class="base-button"
@click="[drawField = null, drawOption = null]"
>
Cancel
{{ t('cancel') }}
</button>
</p>
</div>
@@ -232,6 +232,7 @@
:fields="template.fields"
:submitters="template.submitters"
:selected-submitter="selectedSubmitter"
:with-help="withHelp"
:default-submitters="defaultSubmitters"
:default-fields="defaultFields"
:with-sticky-submitters="withStickySubmitters"
@@ -262,6 +263,7 @@ import MobileFields from './mobile_fields'
import { IconUsersPlus, IconDeviceFloppy, IconWritingSign, IconInnerShadowTop } from '@tabler/icons-vue'
import { v4 } from 'uuid'
import { ref, computed } from 'vue'
import { en as i18nEn } from './i18n'
export default {
name: 'TemplateBuilder',
@@ -285,6 +287,7 @@ export default {
return {
template: this.template,
save: this.save,
t: this.t,
baseFetch: this.baseFetch,
backgroundColor: this.backgroundColor,
withPhone: this.withPhone,
@@ -302,6 +305,11 @@ export default {
required: false,
default: false
},
i18n: {
type: Object,
required: false,
default: () => ({})
},
backgroundColor: {
type: String,
required: false,
@@ -312,6 +320,11 @@ export default {
required: false,
default: true
},
withHelp: {
type: Boolean,
required: false,
default: true
},
autosave: {
type: Boolean,
required: false,
@@ -475,6 +488,9 @@ export default {
this.documentRefs = []
},
methods: {
t (key) {
return this.i18n[key] || i18nEn[key] || key
},
startFieldDraw ({ name, type }) {
const existingField = this.template.fields?.find((f) => f.submitter_uuid === this.selectedSubmitter.uuid && name && name === f.name)
app/javascript/template_builder/dropzone.vue
+6 -6
View File
@@ -29,7 +29,7 @@
{{ message }}
</div>
<div class="text-sm">
<span class="font-medium">Click to upload</span> or drag and drop files
<span class="font-medium">{{ t('click_to_upload') }}</span> {{ t('or_drag_and_drop_files') }}
</div>
</div>
</div>
@@ -61,7 +61,7 @@ export default {
IconCloudUpload,
IconInnerShadowTop
},
inject: ['baseFetch'],
inject: ['baseFetch', 't'],
props: {
templateId: {
type: [Number, String],
@@ -91,13 +91,13 @@ export default {
},
message () {
if (this.isLoading) {
return 'Uploading...'
return this.t('uploading')
} else if (this.isProcessing) {
return 'Processing...'
return this.t('processing_')
} else if (this.acceptFileTypes === 'image/*, application/pdf') {
return 'Add PDF documents or images'
return this.t('add_pdf_documents_or_images')
} else {
return 'Add documents or images'
return this.t('add_documents_or_images')
}
}
},
app/javascript/template_builder/field.vue
+15 -15
View File
@@ -47,7 +47,7 @@
class="label text-xs"
@click.prevent="field.required = !field.required"
@mousedown.prevent
>Required</label>
>{{ t('required') }}</label>
</template>
</div>
<div
@@ -101,7 +101,7 @@
<input
v-model="field.default_value"
type="text"
placeholder="Default value"
:placeholder="t('default_value')"
class="input input-bordered input-xs w-full max-w-xs h-7 !outline-0"
@blur="save"
>
@@ -111,7 +111,7 @@
class="absolute -top-1 left-2.5 px-1 h-4"
style="font-size: 8px"
>
Default value
{{ t('default_value') }}
</label>
</div>
<div
@@ -121,7 +121,7 @@
>
<select
v-model="field.preferences.format"
placeholder="Format"
:placeholder="t('format')"
class="select select-bordered select-xs font-normal w-full max-w-xs !h-7 !outline-0"
@change="save"
>
@@ -138,7 +138,7 @@
class="absolute -top-1 left-2.5 px-1 h-4"
style="font-size: 8px"
>
Format
{{ t('format') }}
</label>
</div>
<li
@@ -152,7 +152,7 @@
class="toggle toggle-xs"
@update:model-value="save"
>
<span class="label-text">Required</span>
<span class="label-text">{{ t('required') }}</span>
</label>
</li>
<li
@@ -166,7 +166,7 @@
class="toggle toggle-xs"
@update:model-value="save"
>
<span class="label-text">Read-only</span>
<span class="label-text">{{ t('read_only') }}</span>
</label>
</li>
<hr class="pb-0.5 mt-0.5">
@@ -183,7 +183,7 @@
:width="20"
:stroke-width="1.6"
/>
Page {{ area.page + 1 }}
{{ t('page') }} {{ area.page + 1 }}
</a>
</li>
<li v-if="!field.areas?.length || !['radio', 'multiple'].includes(field.type)">
@@ -196,7 +196,7 @@
:width="20"
:stroke-width="1.6"
/>
Draw New Area
{{ t('draw_new_area') }}
</a>
</li>
<li v-if="field.areas?.length === 1 && ['date', 'signature', 'initials', 'text', 'cells'].includes(field.type)">
@@ -209,7 +209,7 @@
:width="20"
:stroke-width="1.6"
/>
Copy to All Pages
{{ t('copy_to_all_pages') }}
</a>
</li>
</ul>
@@ -250,7 +250,7 @@
class="w-full input input-primary input-xs text-sm bg-transparent !pr-7 -mr-6"
type="text"
required
:placeholder="`Option ${index + 1}`"
:placeholder="`${t('option')} ${index + 1}`"
@blur="save"
>
<button
@@ -268,7 +268,7 @@
v-else
v-model="option.value"
class="w-full input input-primary input-xs text-sm bg-transparent"
:placeholder="`Option ${index + 1}`"
:placeholder="`${t('option')} ${index + 1}`"
type="text"
required
@focus="maybeFocusOnOptionArea(option)"
@@ -287,7 +287,7 @@
class="text-center text-sm w-full pb-1"
@click="addOption"
>
+ Add option
+ {{ t('add_option') }}
</button>
</div>
</div>
@@ -313,7 +313,7 @@ export default {
IconCopy,
FieldType
},
inject: ['template', 'save', 'backgroundColor', 'selectedAreaRef'],
inject: ['template', 'save', 'backgroundColor', 'selectedAreaRef', 't'],
props: {
field: {
type: Object,
@@ -366,7 +366,7 @@ export default {
} else {
const typeIndex = this.template.fields.filter((f) => f.type === this.field.type).indexOf(this.field)
const suffix = { multiple: 'Select', radio: 'Group' }[this.field.type] || 'Field'
const suffix = { multiple: this.t('select'), radio: this.t('group') }[this.field.type] || this.t('field')
return `${this.fieldNames[this.field.type]} ${suffix} ${typeIndex + 1}`
}
app/javascript/template_builder/field_submitter.vue
+13 -12
View File
@@ -78,7 +78,7 @@
:stroke-width="1.6"
/>
<span class="py-1">
Add {{ names[submitters.length] }}
{{ t('add') }} {{ names[submitters.length] }}
</span>
</a>
</li>
@@ -175,7 +175,7 @@
:stroke-width="1.6"
/>
<span class="py-1">
Add {{ names[submitters.length] }}
{{ t('add') }} {{ names[submitters.length] }}
</span>
</a>
</li>
@@ -197,6 +197,7 @@ export default {
IconTrashX,
IconChevronUp
},
inject: ['t'],
props: {
submitters: {
type: Array,
@@ -250,16 +251,16 @@ export default {
},
names () {
return [
'First Party',
'Second Party',
'Third Party',
'Fourth Party',
'Fifth Party',
'Sixth Party',
'Seventh Party',
'Eighth Party',
'Ninth Party',
'Tenth Party'
this.t('first_party'),
this.t('second_party'),
this.t('third_party'),
this.t('fourth_party'),
this.t('fifth_party'),
this.t('sixth_party'),
this.t('seventh_party'),
this.t('eighth_party'),
this.t('ninth_party'),
this.t('tenth_party')
]
},
selectedSubmitter () {
app/javascript/template_builder/field_type.vue
+15 -15
View File
@@ -54,7 +54,7 @@ import { IconTextSize, IconWritingSign, IconCalendarEvent, IconPhoto, IconCheckb
export default {
name: 'FiledTypeDropdown',
inject: ['withPhone', 'withPayment'],
inject: ['withPhone', 'withPayment', 't'],
props: {
modelValue: {
type: String,
@@ -90,20 +90,20 @@ export default {
computed: {
fieldNames () {
return {
text: 'Text',
signature: 'Signature',
initials: 'Initials',
date: 'Date',
image: 'Image',
file: 'File',
select: 'Select',
checkbox: 'Checkbox',
multiple: 'Multiple',
radio: 'Radio',
cells: 'Cells',
stamp: 'Stamp',
payment: 'Payment',
phone: 'Phone'
text: this.t('text'),
signature: this.t('signature'),
initials: this.t('initials'),
date: this.t('date'),
image: this.t('image'),
file: this.t('file'),
select: this.t('select'),
checkbox: this.t('checkbox'),
multiple: this.t('multiple'),
radio: this.t('radio'),
cells: this.t('cells'),
stamp: this.t('stamp'),
payment: this.t('payment'),
phone: this.t('phone')
}
},
fieldIcons () {
app/javascript/template_builder/fields.vue
+7 -2
View File
@@ -120,7 +120,7 @@
</template>
</div>
<div
v-if="fields.length < 4 && editable"
v-if="fields.length < 4 && editable && withHelp"
class="text-xs p-2 border border-base-200 rounded"
>
<ul class="list-disc list-outside ml-3">
@@ -154,12 +154,17 @@ export default {
IconDrag,
IconLock
},
inject: ['save', 'backgroundColor', 'withPhone', 'withPayment'],
inject: ['save', 'backgroundColor', 'withPhone', 'withPayment', 't'],
props: {
fields: {
type: Array,
required: true
},
withHelp: {
type: Boolean,
required: false,
default: true
},
editable: {
type: Boolean,
required: false,
app/javascript/template_builder/i18n.js
+56
View File
@@ -0,0 +1,56 @@
const en = {
sign_yourself: 'Sign Yourself',
send: 'Send',
save: 'Save',
cancel: 'Cancel',
draw_field_on_the_document: 'Draw {field} field on the document',
click_to_upload: 'Click to upload',
or_drag_and_drop_files: 'or drag and drop files',
uploading: 'Uploading',
processing_: 'Processing...',
add_pdf_documents_or_images: 'Add PDF documents or images',
add_documents_or_images: 'Add documents or images',
required: 'Required',
default_value: 'Default value',
format: 'Format',
read_only: 'Read-only',
page: 'Page',
draw_new_area: 'Draw New Area',
copy_to_all_pages: 'Copy to All Pages',
add_option: 'Add option',
option: 'Option',
first_party: 'First Party',
second_party: 'Second Party',
third_party: 'Third Party',
fourth_party: 'Fourth Party',
fifth_party: 'Fifth Party',
sixth_party: 'Sixth Party',
seventh_party: 'Seventh Party',
eighth_party: 'Eighth Party',
ninth_party: 'Ninth Party',
tenth_party: 'Tenth Party',
add: 'Add',
text: 'Text',
signature: 'Signature',
initials: 'Initials',
date: 'Date',
image: 'Image',
file: 'File',
select: 'Select',
checkbox: 'Checkbox',
multiple: 'Multiple',
radio: 'Radio',
cells: 'Cells',
stamp: 'Stamp',
payment: 'Payment',
phone: 'Phone',
field: 'Field',
group: 'Group',
draw_a_text_field_on_the_page_with_a_mouse: 'Draw a text field on the page with a mouse',
draw_field: 'Draw {field} Field',
replace: 'Replace',
uploading_: 'Uploading...',
add_document: 'Add Document'
}
export { en }
app/javascript/template_builder/mobile_draw_field.vue
+3 -3
View File
@@ -9,14 +9,14 @@
class="inline"
:stroke-width="1.6"
/>
<span> Draw {{ fieldNames[drawField.type] }} Field </span>
<span>{{ t('draw_field').replace('{field}', fieldNames[drawField.type]) }}</span>
</div>
<a
href="#"
class="link block text-center"
@click.prevent="$emit('cancel')"
>
Cancel
{{ t('cancel') }}
</a>
</span>
<FieldSubmitter
@@ -43,7 +43,7 @@ export default {
Field,
FieldSubmitter
},
inject: ['save'],
inject: ['save', 't'],
props: {
drawField: {
type: Object,
app/javascript/template_builder/mobile_fields.vue
+1 -1
View File
@@ -78,7 +78,7 @@ export default {
IconPlus,
IconX
},
inject: ['withPhone', 'withPayment', 'backgroundColor'],
inject: ['withPhone', 'withPayment', 'backgroundColor', 't'],
props: {
modelValue: {
type: String,
app/javascript/template_builder/replace.vue
+4 -4
View File
@@ -26,7 +26,7 @@ import Upload from './upload'
export default {
name: 'ReplaceDocument',
inject: ['baseFetch'],
inject: ['baseFetch', 't'],
props: {
templateId: {
type: [Number, String],
@@ -56,11 +56,11 @@ export default {
},
message () {
if (this.isLoading) {
return 'Uploading...'
return this.t('uploading_')
} else if (this.isProcessing) {
return 'Processing...'
return this.t('processing_')
} else {
return 'Replace'
return this.t('replace')
}
}
},
app/javascript/template_builder/upload.vue
+4 -4
View File
@@ -15,13 +15,13 @@
width="20"
/>
<span v-if="isLoading">
Uploading...
{{ t('uploading_') }}
</span>
<span v-else-if="isProcessing">
Processing...
{{ t('processing_') }}
</span>
<span v-else>
Add Document
{{ t('add_document') }}
</span>
</label>
<form
@@ -50,7 +50,7 @@ export default {
IconUpload,
IconInnerShadowTop
},
inject: ['baseFetch'],
inject: ['baseFetch', 't'],
props: {
templateId: {
type: [Number, String],