show builder default fields on mobile dropdown
This commit is contained in:
Pete Matsyburka
@@ -6,7 +6,7 @@
|
||||
<div
|
||||
v-if="$slots.buttons || withTitle"
|
||||
class="flex justify-between py-1.5 items-center pr-4 top-0 z-10"
|
||||
:class="{ sticky: withStickySubmitters }"
|
||||
:class="{ sticky: withStickySubmitters || isBreakpointLg }"
|
||||
:style="{ backgroundColor }"
|
||||
>
|
||||
<div class="flex items-center space-x-3">
|
||||
@@ -194,28 +194,13 @@
|
||||
@cancel="[drawField = null, drawOption = null]"
|
||||
@change-submitter="[selectedSubmitter = $event, drawField.submitter_uuid = $event.uuid]"
|
||||
/>
|
||||
<FieldType
|
||||
<MobileFields
|
||||
v-if="sortedDocuments.length && !drawField && editable"
|
||||
class="dropdown-top dropdown-end fixed bottom-4 right-4 z-10 md:hidden"
|
||||
:model-value="''"
|
||||
@update:model-value="startFieldDraw($event)"
|
||||
>
|
||||
<label
|
||||
class="btn btn-neutral text-white btn-circle btn-lg group"
|
||||
tabindex="0"
|
||||
>
|
||||
<IconPlus
|
||||
class="group-focus:hidden"
|
||||
width="28"
|
||||
height="28"
|
||||
/>
|
||||
<IconX
|
||||
class="hidden group-focus:inline"
|
||||
width="28"
|
||||
height="28"
|
||||
/>
|
||||
</label>
|
||||
</FieldType>
|
||||
:fields="template.fields"
|
||||
:default-fields="defaultFields"
|
||||
:selected-submitter="selectedSubmitter"
|
||||
@select="startFieldDraw($event)"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-if="withFieldsList"
|
||||
@@ -273,8 +258,8 @@ import Logo from './logo'
|
||||
import Contenteditable from './contenteditable'
|
||||
import DocumentPreview from './preview'
|
||||
import DocumentControls from './controls'
|
||||
import FieldType from './field_type'
|
||||
import { IconUsersPlus, IconDeviceFloppy, IconWritingSign, IconInnerShadowTop, IconPlus, IconX } from '@tabler/icons-vue'
|
||||
import MobileFields from './mobile_fields'
|
||||
import { IconUsersPlus, IconDeviceFloppy, IconWritingSign, IconInnerShadowTop } from '@tabler/icons-vue'
|
||||
import { v4 } from 'uuid'
|
||||
import { ref, computed } from 'vue'
|
||||
|
||||
@@ -285,10 +270,8 @@ export default {
|
||||
Document,
|
||||
Fields,
|
||||
MobileDrawField,
|
||||
IconPlus,
|
||||
FieldType,
|
||||
IconX,
|
||||
IconWritingSign,
|
||||
MobileFields,
|
||||
Logo,
|
||||
Dropzone,
|
||||
DocumentPreview,
|
||||
@@ -414,8 +397,6 @@ export default {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
fieldIcons: FieldType.computed.fieldIcons,
|
||||
fieldNames: FieldType.computed.fieldNames,
|
||||
selectedAreaRef: () => ref(),
|
||||
fieldAreasIndex () {
|
||||
const areas = {}
|
||||
@@ -489,31 +470,38 @@ export default {
|
||||
this.documentRefs = []
|
||||
},
|
||||
methods: {
|
||||
startFieldDraw (type) {
|
||||
const field = {
|
||||
name: '',
|
||||
uuid: v4(),
|
||||
required: type !== 'checkbox',
|
||||
areas: [],
|
||||
submitter_uuid: this.selectedSubmitter.uuid,
|
||||
type
|
||||
}
|
||||
startFieldDraw ({ name, type }) {
|
||||
const existingField = this.template.fields?.find((f) => f.submitter_uuid === this.selectedSubmitter.uuid && name && name === f.name)
|
||||
|
||||
if (['select', 'multiple', 'radio'].includes(type)) {
|
||||
field.options = [{ value: '', uuid: v4() }]
|
||||
}
|
||||
|
||||
if (type === 'stamp') {
|
||||
field.readonly = true
|
||||
}
|
||||
|
||||
if (type === 'date') {
|
||||
field.preferences = {
|
||||
format: Intl.DateTimeFormat().resolvedOptions().locale.endsWith('-US') ? 'MM/DD/YYYY' : 'DD/MM/YYYY'
|
||||
if (existingField) {
|
||||
this.drawField = existingField
|
||||
} else {
|
||||
const field = {
|
||||
name: name || '',
|
||||
uuid: v4(),
|
||||
required: type !== 'checkbox',
|
||||
areas: [],
|
||||
submitter_uuid: this.selectedSubmitter.uuid,
|
||||
type
|
||||
}
|
||||
|
||||
if (['select', 'multiple', 'radio'].includes(type)) {
|
||||
field.options = [{ value: '', uuid: v4() }]
|
||||
}
|
||||
|
||||
if (type === 'stamp') {
|
||||
field.readonly = true
|
||||
}
|
||||
|
||||
if (type === 'date') {
|
||||
field.preferences = {
|
||||
format: Intl.DateTimeFormat().resolvedOptions().locale.endsWith('-US') ? 'MM/DD/YYYY' : 'DD/MM/YYYY'
|
||||
}
|
||||
}
|
||||
|
||||
this.drawField = field
|
||||
}
|
||||
|
||||
this.drawField = field
|
||||
this.drawOption = null
|
||||
},
|
||||
undo () {
|
||||
|
||||
@@ -70,7 +70,7 @@
|
||||
:field="field"
|
||||
/>
|
||||
<span
|
||||
v-else-if="!defaultField"
|
||||
v-else
|
||||
class="dropdown dropdown-end"
|
||||
>
|
||||
<label
|
||||
@@ -91,7 +91,7 @@
|
||||
@click="closeDropdown"
|
||||
>
|
||||
<div
|
||||
v-if="field.type === 'text'"
|
||||
v-if="field.type === 'text' && !defaultField"
|
||||
class="py-1.5 px-1 relative"
|
||||
@click.stop
|
||||
>
|
||||
@@ -153,7 +153,7 @@
|
||||
</label>
|
||||
</li>
|
||||
<li
|
||||
v-if="field.type === 'text'"
|
||||
v-if="field.type === 'text' && !defaultField"
|
||||
@click.stop
|
||||
>
|
||||
<label class="cursor-pointer py-1.5">
|
||||
|
||||
@@ -0,0 +1,121 @@
|
||||
<template>
|
||||
<span
|
||||
class="dropdown dropdown-top dropdown-end fixed bottom-4 right-4 z-10 md:hidden"
|
||||
>
|
||||
<label
|
||||
class="btn btn-neutral text-white btn-circle btn-lg group"
|
||||
tabindex="0"
|
||||
>
|
||||
<IconPlus
|
||||
class="group-focus:hidden"
|
||||
width="28"
|
||||
height="28"
|
||||
/>
|
||||
<IconX
|
||||
class="hidden group-focus:inline"
|
||||
width="28"
|
||||
height="28"
|
||||
/>
|
||||
</label>
|
||||
<ul
|
||||
tabindex="0"
|
||||
class="dropdown-content menu menu-xs p-2 shadow rounded-box w-52 z-10 mb-3 mt-1.5 bg-base-100"
|
||||
@click="closeDropdown"
|
||||
>
|
||||
<template v-if="submitterDefaultFields.length">
|
||||
<template
|
||||
v-for="field in submitterDefaultFields"
|
||||
:key="field.name"
|
||||
>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="text-sm py-1 px-2"
|
||||
@click.prevent="$emit('select', { name: field.name || '', type: field.type || 'text' })"
|
||||
>
|
||||
<component
|
||||
:is="fieldIcons[field.type || 'text']"
|
||||
:stroke-width="1.6"
|
||||
:width="20"
|
||||
/>
|
||||
{{ field.name }}
|
||||
</a>
|
||||
</li>
|
||||
</template>
|
||||
</template>
|
||||
<template v-else>
|
||||
<template
|
||||
v-for="(icon, type) in fieldIcons"
|
||||
:key="type"
|
||||
>
|
||||
<li v-if="withPhone || withPayment || !['phone', 'payment'].includes(type)">
|
||||
<a
|
||||
href="#"
|
||||
class="text-sm py-1 px-2"
|
||||
:class="{ 'active': type === modelValue }"
|
||||
@click.prevent="$emit('select', { type })"
|
||||
>
|
||||
<component
|
||||
:is="icon"
|
||||
:stroke-width="1.6"
|
||||
:width="20"
|
||||
/>
|
||||
{{ fieldNames[type] }}
|
||||
</a>
|
||||
</li>
|
||||
</template>
|
||||
</template>
|
||||
</ul>
|
||||
</span>
|
||||
</template>
|
||||
<script>
|
||||
import { IconPlus, IconX } from '@tabler/icons-vue'
|
||||
import FieldType from './field_type'
|
||||
|
||||
export default {
|
||||
name: 'MobileFields',
|
||||
components: {
|
||||
IconPlus,
|
||||
IconX
|
||||
},
|
||||
inject: ['withPhone', 'withPayment', 'backgroundColor'],
|
||||
props: {
|
||||
modelValue: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: ''
|
||||
},
|
||||
fields: {
|
||||
type: Array,
|
||||
required: false,
|
||||
default: () => []
|
||||
},
|
||||
selectedSubmitter: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
defaultFields: {
|
||||
type: Array,
|
||||
required: false,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
emits: ['select'],
|
||||
computed: {
|
||||
...FieldType.computed,
|
||||
submitterFields () {
|
||||
return this.fields.filter((f) => f.submitter_uuid === this.selectedSubmitter.uuid)
|
||||
},
|
||||
submitterDefaultFields () {
|
||||
return this.defaultFields.filter((f) => {
|
||||
return (!f.role || f.role === this.selectedSubmitter.name)
|
||||
})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
closeDropdown () {
|
||||
document.activeElement.blur()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user