Merge branch 'main' of https://github.com/JhumanJ/OpnForm
This commit is contained in:
Julien Nahum
commit
5fb634471e
|
|
@ -15,7 +15,7 @@ class TemplateController extends Controller
|
||||||
{
|
{
|
||||||
$limit = null;
|
$limit = null;
|
||||||
if ($request->offsetExists('limit') && $request->get('limit') > 0) {
|
if ($request->offsetExists('limit') && $request->get('limit') > 0) {
|
||||||
$limit = (int) $request->get('limit');
|
$limit = (int)$request->get('limit');
|
||||||
}
|
}
|
||||||
|
|
||||||
$onlyMy = false;
|
$onlyMy = false;
|
||||||
|
|
@ -24,12 +24,18 @@ class TemplateController extends Controller
|
||||||
}
|
}
|
||||||
|
|
||||||
$templates = Template::limit($limit)
|
$templates = Template::limit($limit)
|
||||||
->when(Auth::check() && !$onlyMy, function ($query) {
|
->when(Auth::check(), function ($query) use ($onlyMy) {
|
||||||
$query->where('publicly_listed', true);
|
if ($onlyMy) {
|
||||||
$query->orWhere('creator_id', Auth::id());
|
$query->where('creator_id', Auth::id());
|
||||||
|
} else {
|
||||||
|
$query->where(function ($query) {
|
||||||
|
$query->where('publicly_listed', true)
|
||||||
|
->orWhere('creator_id', Auth::id());
|
||||||
|
});
|
||||||
|
}
|
||||||
})
|
})
|
||||||
->when(Auth::check() && $onlyMy, function ($query) {
|
->when(!Auth::check(), function ($query) {
|
||||||
$query->where('creator_id', Auth::id());
|
return $query->publiclyListed();
|
||||||
})
|
})
|
||||||
->orderByDesc('created_at')
|
->orderByDesc('created_at')
|
||||||
->get();
|
->get();
|
||||||
|
|
|
||||||
|
|
@ -1,204 +0,0 @@
|
||||||
<template>
|
|
||||||
<modal :show="show" @close="close">
|
|
||||||
<div v-if="field">
|
|
||||||
<div class="flex">
|
|
||||||
<h2 class="text-2xl font-semibold z-10 truncate mb-5 text-gray-900 flex-grow">
|
|
||||||
Configure "<span class="truncate">{{ field.name }}</span>" block
|
|
||||||
</h2>
|
|
||||||
<div class="flex mr-6">
|
|
||||||
<div>
|
|
||||||
<v-button color="light-gray" size="small" @click="removeBlock">
|
|
||||||
<svg class="h-4 w-4 text-red-600 inline mr-1 -mt-1" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M3 6H5M5 6H21M5 6V20C5 20.5304 5.21071 21.0391 5.58579 21.4142C5.96086 21.7893 6.46957 22 7 22H17C17.5304 22 18.0391 21.7893 18.4142 21.4142C18.7893 21.0391 19 20.5304 19 20V6H5ZM8 6V4C8 3.46957 8.21071 2.96086 8.58579 2.58579C8.96086 2.21071 9.46957 2 10 2H14C14.5304 2 15.0391 2.21071 15.4142 2.58579C15.7893 2.96086 16 3.46957 16 4V6M10 11V17M14 11V17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
Remove
|
|
||||||
</v-button>
|
|
||||||
</div>
|
|
||||||
<div class="ml-1">
|
|
||||||
<v-button size="small" color="light-gray" @click="duplicateBlock">
|
|
||||||
<svg class="h-4 w-4 text-blue-600 inline mr-1 -mt-1" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M5 15H4C3.46957 15 2.96086 14.7893 2.58579 14.4142C2.21071 14.0391 2 13.5304 2 13V4C2 3.46957 2.21071 2.96086 2.58579 2.58579C2.96086 2.21071 3.46957 2 4 2H13C13.5304 2 14.0391 2.21071 14.4142 2.58579C14.7893 2.96086 15 3.46957 15 4V5M11 9H20C21.1046 9 22 9.89543 22 11V20C22 21.1046 21.1046 22 20 22H11C9.89543 22 9 21.1046 9 20V11C9 9.89543 9.89543 9 11 9Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
||||||
</svg>
|
|
||||||
Duplicate
|
|
||||||
</v-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="-mx-4 sm:-mx-6 p-5 border-b border-t">
|
|
||||||
<div class="-mx-4 sm:-mx-6 px-5 pt-0">
|
|
||||||
<h3 class="font-semibold block text-lg">
|
|
||||||
General
|
|
||||||
</h3>
|
|
||||||
<p class="text-gray-400 mb-5 text-xs">
|
|
||||||
Exclude this field or make it required.
|
|
||||||
</p>
|
|
||||||
<v-checkbox v-model="field.hidden" class="mb-3"
|
|
||||||
:name="field.id+'_hidden'"
|
|
||||||
@input="onFieldHiddenChange"
|
|
||||||
>
|
|
||||||
Hidden
|
|
||||||
</v-checkbox>
|
|
||||||
<select-input name="width" class="mt-4"
|
|
||||||
:options="[
|
|
||||||
{name:'Full',value:'full'},
|
|
||||||
{name:'1/2 (half width)',value:'1/2'},
|
|
||||||
{name:'1/3 (a third of the width)',value:'1/3'},
|
|
||||||
{name:'2/3 (two thirds of the width)',value:'2/3'},
|
|
||||||
{name:'1/4 (a quarter of the width)',value:'1/4'},
|
|
||||||
{name:'3/4 (three quarters of the width)',value:'3/4'}
|
|
||||||
]"
|
|
||||||
:form="field" label="Field Width"
|
|
||||||
/>
|
|
||||||
<select-input v-if="['nf-text','nf-image'].includes(field.type)" name="align" class="mt-4"
|
|
||||||
:options="[
|
|
||||||
{name:'Left',value:'left'},
|
|
||||||
{name:'Center',value:'center'},
|
|
||||||
{name:'Right',value:'right'},
|
|
||||||
{name:'Justify',value:'justify'}
|
|
||||||
]"
|
|
||||||
:form="field" label="Field Alignment"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-if="field.type == 'nf-text'" class="-mx-4 sm:-mx-6 p-5 border-b border-t">
|
|
||||||
<rich-text-area-input name="content"
|
|
||||||
:form="field"
|
|
||||||
label="Content"
|
|
||||||
:required="false"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div v-else-if="field.type == 'nf-page-break'" class="-mx-4 sm:-mx-6 p-5 border-b border-t">
|
|
||||||
<text-input name="next_btn_text"
|
|
||||||
:form="field"
|
|
||||||
label="Text of next button"
|
|
||||||
:required="true"
|
|
||||||
/>
|
|
||||||
<text-input name="previous_btn_text"
|
|
||||||
:form="field"
|
|
||||||
label="Text of previous button"
|
|
||||||
help="Shown on the next page"
|
|
||||||
:required="true"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div v-else-if="field.type == 'nf-divider'" class="-mx-4 sm:-mx-6 p-5 border-b border-t">
|
|
||||||
<text-input name="name" class="mt-4"
|
|
||||||
:form="field" :required="true"
|
|
||||||
label="Field Name"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div v-else-if="field.type == 'nf-image'" class="-mx-4 sm:-mx-6 p-5 border-b border-t">
|
|
||||||
<text-input name="name" class="mt-4"
|
|
||||||
:form="field" :required="true"
|
|
||||||
label="Field Name"
|
|
||||||
/>
|
|
||||||
<image-input name="image_block" class="mt-4"
|
|
||||||
:form="field" label="Upload Image" :required="false"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div v-else-if="field.type == 'nf-code'" class="-mx-4 sm:-mx-6 p-5 border-b border-t">
|
|
||||||
<code-input name="content" class="mt-4 h-36" :form="field" label="Content"
|
|
||||||
help="You can add any html code, including iframes" />
|
|
||||||
</div>
|
|
||||||
<div v-else class="-mx-4 sm:-mx-6 p-5 border-b border-t">
|
|
||||||
<p>No settings found.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Logic Block -->
|
|
||||||
<form-block-logic-editor :form="form" :field="field" v-model="form"/>
|
|
||||||
|
|
||||||
<div class="pt-5 flex justify-end">
|
|
||||||
<v-button color="white" @click="close">
|
|
||||||
Close
|
|
||||||
</v-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div v-else class="text-center p-10">
|
|
||||||
Field not found.
|
|
||||||
</div>
|
|
||||||
</modal>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import ProTag from '../../../common/ProTag.vue'
|
|
||||||
const FormBlockLogicEditor = () => import('../components/form-logic-components/FormBlockLogicEditor.vue')
|
|
||||||
import CodeInput from '../../../forms/CodeInput.vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'FormBlockOptionsModal',
|
|
||||||
components: {ProTag, FormBlockLogicEditor, CodeInput},
|
|
||||||
props: {
|
|
||||||
field: {
|
|
||||||
type: Object,
|
|
||||||
required: false
|
|
||||||
},
|
|
||||||
form: {
|
|
||||||
type: Object,
|
|
||||||
required: false
|
|
||||||
},
|
|
||||||
show: {
|
|
||||||
type: Boolean,
|
|
||||||
required: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
editorToolbarCustom: [
|
|
||||||
['bold', 'italic', 'underline', 'link'],
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
computed: {},
|
|
||||||
|
|
||||||
watch: {
|
|
||||||
'field.width': {
|
|
||||||
handler (val) {
|
|
||||||
if (val === undefined || val === null) {
|
|
||||||
this.$set(this.field, 'width', 'full')
|
|
||||||
}
|
|
||||||
},
|
|
||||||
immediate: true
|
|
||||||
},
|
|
||||||
'field.align': {
|
|
||||||
handler (val) {
|
|
||||||
if (val === undefined || val === null) {
|
|
||||||
this.$set(this.field, 'align', 'left')
|
|
||||||
}
|
|
||||||
},
|
|
||||||
immediate: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
mounted() {
|
|
||||||
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
close() {
|
|
||||||
this.$emit('close')
|
|
||||||
},
|
|
||||||
removeBlock() {
|
|
||||||
this.close()
|
|
||||||
this.$emit('remove-block', this.field)
|
|
||||||
},
|
|
||||||
duplicateBlock(){
|
|
||||||
this.close()
|
|
||||||
this.$emit('duplicate-block', this.field)
|
|
||||||
},
|
|
||||||
onFieldHiddenChange(val) {
|
|
||||||
this.$set(this.field, 'hidden', val)
|
|
||||||
if (this.field.hidden) {
|
|
||||||
this.$set(this.field, 'required', false)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
onFieldHelpPositionChange (val) {
|
|
||||||
if(!val){
|
|
||||||
this.$set(this.field, 'help_position', 'below_input')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,579 +0,0 @@
|
||||||
<template>
|
|
||||||
<modal :show="show" @close="close">
|
|
||||||
<div v-if="field">
|
|
||||||
<div class="flex">
|
|
||||||
<h2 class="text-2xl font-semibold z-10 truncate mb-5 text-gray-900 flex-grow">
|
|
||||||
Configure "<span class="truncate">{{ field.name }}</span>" block
|
|
||||||
</h2>
|
|
||||||
<div class="flex flex-wrap justify-end mr-6">
|
|
||||||
<div>
|
|
||||||
<v-button color="light-gray" size="small" @click="removeBlock">
|
|
||||||
<svg class="h-4 w-4 text-red-600 inline mr-1 -mt-1" viewBox="0 0 24 24" fill="none"
|
|
||||||
xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path
|
|
||||||
d="M3 6H5M5 6H21M5 6V20C5 20.5304 5.21071 21.0391 5.58579 21.4142C5.96086 21.7893 6.46957 22 7 22H17C17.5304 22 18.0391 21.7893 18.4142 21.4142C18.7893 21.0391 19 20.5304 19 20V6H5ZM8 6V4C8 3.46957 8.21071 2.96086 8.58579 2.58579C8.96086 2.21071 9.46957 2 10 2H14C14.5304 2 15.0391 2.21071 15.4142 2.58579C15.7893 2.96086 16 3.46957 16 4V6M10 11V17M14 11V17"
|
|
||||||
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
Remove
|
|
||||||
</v-button>
|
|
||||||
</div>
|
|
||||||
<div class="ml-1">
|
|
||||||
<v-button size="small" color="light-gray" @click="duplicateBlock">
|
|
||||||
<svg class="h-4 w-4 text-blue-600 inline mr-1 -mt-1" viewBox="0 0 24 24" fill="none"
|
|
||||||
xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path
|
|
||||||
d="M5 15H4C3.46957 15 2.96086 14.7893 2.58579 14.4142C2.21071 14.0391 2 13.5304 2 13V4C2 3.46957 2.21071 2.96086 2.58579 2.58579C2.96086 2.21071 3.46957 2 4 2H13C13.5304 2 14.0391 2.21071 14.4142 2.58579C14.7893 2.96086 15 3.46957 15 4V5M11 9H20C21.1046 9 22 9.89543 22 11V20C22 21.1046 21.1046 22 20 22H11C9.89543 22 9 21.1046 9 20V11C9 9.89543 9.89543 9 11 9Z"
|
|
||||||
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
||||||
</svg>
|
|
||||||
Duplicate
|
|
||||||
</v-button>
|
|
||||||
</div>
|
|
||||||
<change-field-type class="my-1" :field="field" @changeType="onChangeType"/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- General -->
|
|
||||||
<div class="-mx-4 sm:-mx-6 p-5 border-b border-t">
|
|
||||||
<h3 class="font-semibold block text-lg">
|
|
||||||
General
|
|
||||||
</h3>
|
|
||||||
<p class="text-gray-400 mb-5 text-xs">
|
|
||||||
Exclude this field or make it required.
|
|
||||||
</p>
|
|
||||||
<v-checkbox v-model="field.hidden" class="mb-3"
|
|
||||||
:name="field.id+'_hidden'"
|
|
||||||
@input="onFieldHiddenChange"
|
|
||||||
>
|
|
||||||
Hidden
|
|
||||||
</v-checkbox>
|
|
||||||
<v-checkbox v-model="field.required" class="mb-3"
|
|
||||||
:name="field.id+'_required'"
|
|
||||||
@input="onFieldRequiredChange"
|
|
||||||
>
|
|
||||||
Required
|
|
||||||
</v-checkbox>
|
|
||||||
<v-checkbox v-model="field.disabled" class="mb-3"
|
|
||||||
:name="field.id+'_disabled'"
|
|
||||||
@input="onFieldDisabledChange"
|
|
||||||
>
|
|
||||||
Disabled
|
|
||||||
</v-checkbox>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Checkbox -->
|
|
||||||
<div v-if="field.type === 'checkbox'" class="-mx-4 sm:-mx-6 p-5 border-b">
|
|
||||||
<h3 class="font-semibold block text-lg">
|
|
||||||
Checkbox
|
|
||||||
</h3>
|
|
||||||
<p class="text-gray-400 mb-5 text-xs">
|
|
||||||
Advanced options for checkbox.
|
|
||||||
</p>
|
|
||||||
<v-checkbox v-model="field.use_toggle_switch" class="mt-4"
|
|
||||||
name="use_toggle_switch" help=""
|
|
||||||
>
|
|
||||||
Use toggle switch
|
|
||||||
</v-checkbox>
|
|
||||||
<p class="text-gray-400 mb-5 text-xs">
|
|
||||||
If enabled, checkbox will be replaced with a toggle switch
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- File Uploads -->
|
|
||||||
<div v-if="field.type === 'files'" class="-mx-4 sm:-mx-6 p-5 border-b">
|
|
||||||
<h3 class="font-semibold block text-lg">
|
|
||||||
File uploads
|
|
||||||
</h3>
|
|
||||||
<v-checkbox v-model="field.multiple" class="mt-4"
|
|
||||||
:name="field.id+'_multiple'"
|
|
||||||
>
|
|
||||||
Allow multiple files
|
|
||||||
</v-checkbox>
|
|
||||||
<text-input name="allowed_file_types" class="mt-4" :form="field"
|
|
||||||
label="Allowed file types" placeholder="jpg,jpeg,png,gif"
|
|
||||||
help="Comma separated values, leave blank to allow all file types"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Number Options -->
|
|
||||||
<div v-if="field.type === 'number'" class="-mx-4 sm:-mx-6 p-5 border-b">
|
|
||||||
<h3 class="font-semibold block text-lg">
|
|
||||||
Number Options
|
|
||||||
</h3>
|
|
||||||
<v-checkbox v-model="field.is_rating" class="mt-4"
|
|
||||||
:name="field.id+'_is_rating'" @input="initRating"
|
|
||||||
>
|
|
||||||
Rating
|
|
||||||
</v-checkbox>
|
|
||||||
<p class="text-gray-400 mb-5 text-xs">
|
|
||||||
If enabled then this field will be star rating input.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<text-input v-if="field.is_rating" name="rating_max_value" native-type="number" :min="1" class="mt-4"
|
|
||||||
:form="field" required
|
|
||||||
label="Max rating value"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Text Options -->
|
|
||||||
<div v-if="field.type === 'text' && displayBasedOnAdvanced" class="-mx-4 sm:-mx-6 p-5 border-b">
|
|
||||||
<h3 class="font-semibold block text-lg">
|
|
||||||
Text Options
|
|
||||||
</h3>
|
|
||||||
<p class="text-gray-400 mb-5 text-xs">
|
|
||||||
Keep it simple or make it a multi-lines input.
|
|
||||||
</p>
|
|
||||||
<v-checkbox v-model="field.multi_lines"
|
|
||||||
:name="field.id+'_multi_lines'"
|
|
||||||
@input="$set(field,'multi_lines',$event)"
|
|
||||||
>
|
|
||||||
Multi-lines input
|
|
||||||
</v-checkbox>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Date Options -->
|
|
||||||
<div v-if="field.type === 'date'" class="-mx-4 sm:-mx-6 p-5 border-b">
|
|
||||||
<h3 class="font-semibold block text-lg">
|
|
||||||
Date Options
|
|
||||||
</h3>
|
|
||||||
<v-checkbox v-model="field.date_range" class="mt-4"
|
|
||||||
:name="field.id+'_date_range'"
|
|
||||||
@input="onFieldDateRangeChange"
|
|
||||||
>
|
|
||||||
Date Range
|
|
||||||
</v-checkbox>
|
|
||||||
<p class="text-gray-400 mb-5 text-xs">
|
|
||||||
Adds an end date. This cannot be used with the time option yet.
|
|
||||||
</p>
|
|
||||||
<v-checkbox v-model="field.with_time"
|
|
||||||
:name="field.id+'_with_time'"
|
|
||||||
@input="onFieldWithTimeChange"
|
|
||||||
>
|
|
||||||
Date with time
|
|
||||||
</v-checkbox>
|
|
||||||
<p class="text-gray-400 mb-5 text-xs">
|
|
||||||
Include time. Or not. This cannot be used with the date range option yet.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<select-input v-if="field.with_time" name="timezone" class="mt-4"
|
|
||||||
:form="field" :options="timezonesOptions"
|
|
||||||
label="Timezone" :searchable="true"
|
|
||||||
help="Make sure to select correct timezone. Leave blank otherwise."
|
|
||||||
/>
|
|
||||||
<v-checkbox v-model="field.prefill_today"
|
|
||||||
name="prefill_today"
|
|
||||||
@input="onFieldPrefillTodayChange"
|
|
||||||
>
|
|
||||||
Prefill with 'today'
|
|
||||||
</v-checkbox>
|
|
||||||
<p class="text-gray-400 mb-5 text-xs">
|
|
||||||
if enabled we will pre-fill this field with the current date
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<v-checkbox v-model="field.disable_past_dates"
|
|
||||||
name="disable_past_dates" class="mb-3"
|
|
||||||
@input="onFieldDisablePastDatesChange"
|
|
||||||
>
|
|
||||||
Disable past dates
|
|
||||||
</v-checkbox>
|
|
||||||
|
|
||||||
<v-checkbox v-model="field.disable_future_dates"
|
|
||||||
name="disable_future_dates" class="mb-3"
|
|
||||||
@input="onFieldDisableFutureDatesChange"
|
|
||||||
>
|
|
||||||
Disable future dates
|
|
||||||
</v-checkbox>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- select/multiselect Options -->
|
|
||||||
<div v-if="['select','multi_select'].includes(field.type)" class="-mx-4 sm:-mx-6 p-5 border-b">
|
|
||||||
<h3 class="font-semibold block text-lg">
|
|
||||||
Select Options
|
|
||||||
</h3>
|
|
||||||
<p class="text-gray-400 mb-5 text-xs">
|
|
||||||
Advanced options for your select/multiselect fields.
|
|
||||||
</p>
|
|
||||||
<text-area-input v-model="optionsText" :name="field.id+'_options_text'" class="mt-4"
|
|
||||||
@input="onFieldOptionsChange"
|
|
||||||
label="Set selection options"
|
|
||||||
help="Add one option per line"
|
|
||||||
/>
|
|
||||||
<v-checkbox v-model="field.allow_creation"
|
|
||||||
name="allow_creation" @input="onFieldAllowCreationChange" help=""
|
|
||||||
>
|
|
||||||
Allow respondent to create new options
|
|
||||||
</v-checkbox>
|
|
||||||
<v-checkbox v-model="field.without_dropdown" class="mt-4"
|
|
||||||
name="without_dropdown" @input="onFieldWithoutDropdownChange" help=""
|
|
||||||
>
|
|
||||||
Always show all select options
|
|
||||||
</v-checkbox>
|
|
||||||
<p class="text-gray-400 mb-5 text-xs">Options won't be in a dropdown anymore, but will all be visible</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Customization - Placeholder, Prefill, Relabel, Field Help -->
|
|
||||||
<div v-if="displayBasedOnAdvanced" class="-mx-4 sm:-mx-6 p-5 border-b">
|
|
||||||
<h3 class="font-semibold block text-lg">
|
|
||||||
Customization
|
|
||||||
</h3>
|
|
||||||
|
|
||||||
<p class="text-gray-400 mb-5 text-xs">
|
|
||||||
Change your form field name, pre-fill a value, add hints, etc.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<text-input name="name" class="mt-4"
|
|
||||||
:form="field" :required="true"
|
|
||||||
label="Field Name"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<v-checkbox v-model="field.hide_field_name" class="mb-3"
|
|
||||||
:name="field.id+'_hide_field_name'"
|
|
||||||
>
|
|
||||||
Hide field name
|
|
||||||
</v-checkbox>
|
|
||||||
|
|
||||||
<!-- Pre-fill depends on type -->
|
|
||||||
<v-checkbox v-if="field.type=='checkbox'" v-model="field.prefill" class="mt-4"
|
|
||||||
:name="field.id+'_prefill'"
|
|
||||||
@input="$set(field,'prefill',$event)"
|
|
||||||
>
|
|
||||||
Pre-filled value
|
|
||||||
</v-checkbox>
|
|
||||||
<select-input v-else-if="['select','multi_select'].includes(field.type)" name="prefill" class="mt-4"
|
|
||||||
:form="field" :options="prefillSelectsOptions"
|
|
||||||
label="Pre-filled value"
|
|
||||||
:multiple="field.type==='multi_select'"
|
|
||||||
/>
|
|
||||||
<date-input v-else-if="field.type==='date' && field.prefill_today!==true" name="prefill" class="mt-4"
|
|
||||||
:form="field" :with-time="field.with_time===true"
|
|
||||||
:date-range="field.date_range===true"
|
|
||||||
label="Pre-filled value"
|
|
||||||
/>
|
|
||||||
<text-area-input v-else-if="field.type === 'text' && field.multi_lines"
|
|
||||||
name="prefill" class="mt-4"
|
|
||||||
:form="field"
|
|
||||||
label="Pre-filled value"
|
|
||||||
/>
|
|
||||||
<text-input v-else-if="field.type!=='files'" name="prefill" class="mt-4"
|
|
||||||
:form="field"
|
|
||||||
label="Pre-filled value"
|
|
||||||
:disabled="field.type==='date' && field.prefill_today===true"
|
|
||||||
/>
|
|
||||||
<div v-if="['select','multi_select'].includes(field.type)" class="-mt-3 mb-3 text-gray-400 dark:text-gray-500">
|
|
||||||
<small>
|
|
||||||
A problem? <a href="#" @click.prevent="field.prefill=null">Click here to clear your pre-fill</a>
|
|
||||||
</small>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Placeholder -->
|
|
||||||
<text-input v-if="hasPlaceholder" name="placeholder" class="mt-4"
|
|
||||||
:form="field"
|
|
||||||
label="Empty Input Text (Placeholder)"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<select-input name="width" class="mt-4"
|
|
||||||
:options="[
|
|
||||||
{name:'Full',value:'full'},
|
|
||||||
{name:'1/2 (half width)',value:'1/2'},
|
|
||||||
{name:'1/3 (a third of the width)',value:'1/3'},
|
|
||||||
{name:'2/3 (two thirds of the width)',value:'2/3'},
|
|
||||||
{name:'1/4 (a quarter of the width)',value:'1/4'},
|
|
||||||
{name:'3/4 (three quarters of the width)',value:'3/4'},
|
|
||||||
]"
|
|
||||||
:form="field" label="Field Width"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- Help -->
|
|
||||||
<rich-text-area-input name="help" class="mt-4"
|
|
||||||
:form="field"
|
|
||||||
:editorToolbar="editorToolbarCustom"
|
|
||||||
label="Field Help"
|
|
||||||
help="Your field help will be shown below/above the field, just like this message."
|
|
||||||
:help-position="field.help_position"
|
|
||||||
/>
|
|
||||||
<select-input name="help_position" class="mt-4"
|
|
||||||
:options="[
|
|
||||||
{name:'Below input',value:'below_input'},
|
|
||||||
{name:'Above input',value:'above_input'},
|
|
||||||
]"
|
|
||||||
:form="field" label="Field Help Position"
|
|
||||||
@input="onFieldHelpPositionChange"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<template v-if="['text','number','url','email','phone_number'].includes(field.type)">
|
|
||||||
<text-input v-model="field.max_char_limit" name="max_char_limit" native-type="number" :min="1" :max="2000"
|
|
||||||
:form="field"
|
|
||||||
label="Max character limit"
|
|
||||||
help="Maximum character limit of 2000"
|
|
||||||
:required="false"
|
|
||||||
/>
|
|
||||||
<checkbox-input name="show_char_limit" :form="field" class="mt-4"
|
|
||||||
label="Always show character limit"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Advanced Options -->
|
|
||||||
<div v-if="field.type === 'text'" class="-mx-4 sm:-mx-6 p-5 border-b">
|
|
||||||
<h3 class="font-semibold block text-lg">
|
|
||||||
Advanced Options
|
|
||||||
</h3>
|
|
||||||
|
|
||||||
<v-checkbox v-model="field.generates_uuid"
|
|
||||||
:name="field.id+'_generates_uuid'"
|
|
||||||
@input="onFieldGenUIdChange"
|
|
||||||
>
|
|
||||||
Generates a unique id on submission
|
|
||||||
</v-checkbox>
|
|
||||||
<p class="text-gray-400 mb-5 text-xs">
|
|
||||||
If you enable this, we will hide this field and fill it a unique id (UUID format) on each new form submission
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<v-checkbox v-model="field.generates_auto_increment_id"
|
|
||||||
:name="field.id+'_generates_auto_increment_id'"
|
|
||||||
@input="onFieldGenAutoIdChange"
|
|
||||||
>
|
|
||||||
Generates an auto-incremented id on submission
|
|
||||||
</v-checkbox>
|
|
||||||
<p class="text-gray-400 mb-5 text-xs">
|
|
||||||
If you enable this, we will hide this field and fill it a unique number on each new form submission
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Logic Block -->
|
|
||||||
<form-block-logic-editor v-model="form" :form="form" :field="field"/>
|
|
||||||
|
|
||||||
<div class="pt-5 flex justify-end">
|
|
||||||
<v-button color="white" @click="close">
|
|
||||||
Close
|
|
||||||
</v-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div v-else class="text-center p-10">
|
|
||||||
Field not found.
|
|
||||||
</div>
|
|
||||||
</modal>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
|
|
||||||
import timezones from '../../../../../data/timezones.json'
|
|
||||||
import ProTag from "../../../common/ProTag.vue"
|
|
||||||
|
|
||||||
const FormBlockLogicEditor = () => import('../components/form-logic-components/FormBlockLogicEditor.vue')
|
|
||||||
import ChangeFieldType from "./components/ChangeFieldType.vue"
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'FormFieldOptionsModal',
|
|
||||||
components: {ProTag, FormBlockLogicEditor, ChangeFieldType},
|
|
||||||
props: {
|
|
||||||
field: {
|
|
||||||
type: Object,
|
|
||||||
required: false
|
|
||||||
},
|
|
||||||
form: {
|
|
||||||
type: Object,
|
|
||||||
required: false
|
|
||||||
},
|
|
||||||
show: {
|
|
||||||
type: Boolean,
|
|
||||||
required: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
typesWithoutPlaceholder: ['date', 'checkbox', 'files'],
|
|
||||||
editorToolbarCustom: [
|
|
||||||
['bold', 'italic', 'underline', 'link'],
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
computed: {
|
|
||||||
hasPlaceholder() {
|
|
||||||
return !this.typesWithoutPlaceholder.includes(this.field.type)
|
|
||||||
},
|
|
||||||
prefillSelectsOptions() {
|
|
||||||
if (!['select', 'multi_select'].includes(this.field.type)) return {}
|
|
||||||
|
|
||||||
return this.field[this.field.type].options.map(option => {
|
|
||||||
return {
|
|
||||||
name: option.name,
|
|
||||||
value: option.id
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
timezonesOptions() {
|
|
||||||
if (this.field.type !== 'date') return []
|
|
||||||
return timezones.map((timezone) => {
|
|
||||||
return {
|
|
||||||
name: timezone.text,
|
|
||||||
value: timezone.utc[0]
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
displayBasedOnAdvanced() {
|
|
||||||
if (this.field.generates_uuid || this.field.generates_auto_increment_id) {
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
return true
|
|
||||||
},
|
|
||||||
optionsText() {
|
|
||||||
return this.field[this.field.type].options.map(option => {
|
|
||||||
return option.name
|
|
||||||
}).join("\n")
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
watch: {
|
|
||||||
'field.width': {
|
|
||||||
handler (val) {
|
|
||||||
if (val === undefined || val === null) {
|
|
||||||
this.$set(this.field, 'width', 'full')
|
|
||||||
}
|
|
||||||
},
|
|
||||||
immediate: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
created () {
|
|
||||||
if (this.field.width === undefined || this.field.width === null) {
|
|
||||||
this.$set(this.field, 'width', 'full')
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
mounted() {
|
|
||||||
if (['text', 'number', 'url', 'email', 'phone_number'].includes(this.field.type) && !this.field.max_char_limit) {
|
|
||||||
this.field.max_char_limit = 2000
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
onChangeType(newType) {
|
|
||||||
if(['select', 'multi_select'].includes(this.field.type)){
|
|
||||||
this.$set(this.field, newType, this.field[this.field.type]) // Set new options with new type
|
|
||||||
this.$delete(this.field, this.field.type) // remove old type options
|
|
||||||
}
|
|
||||||
this.$set(this.field, 'type', newType)
|
|
||||||
},
|
|
||||||
close() {
|
|
||||||
this.$emit('close')
|
|
||||||
},
|
|
||||||
removeBlock() {
|
|
||||||
this.close()
|
|
||||||
this.$emit('remove-block', this.field)
|
|
||||||
},
|
|
||||||
duplicateBlock() {
|
|
||||||
this.close()
|
|
||||||
this.$emit('duplicate-block', this.field)
|
|
||||||
},
|
|
||||||
onFieldDisabledChange (val) {
|
|
||||||
this.$set(this.field, 'disabled', val)
|
|
||||||
if (this.field.disabled) {
|
|
||||||
this.$set(this.field, 'hidden', false)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
onFieldRequiredChange(val) {
|
|
||||||
this.$set(this.field, 'required', val)
|
|
||||||
if (this.field.required) {
|
|
||||||
this.$set(this.field, 'hidden', false)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
onFieldHiddenChange(val) {
|
|
||||||
this.$set(this.field, 'hidden', val)
|
|
||||||
if (this.field.hidden) {
|
|
||||||
this.$set(this.field, 'required', false)
|
|
||||||
this.$set(this.field, 'disabled', false)
|
|
||||||
} else {
|
|
||||||
this.$set(this.field, 'generates_uuid', false)
|
|
||||||
this.$set(this.field, 'generates_auto_increment_id', false)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
onFieldDateRangeChange(val) {
|
|
||||||
this.$set(this.field, 'date_range', val)
|
|
||||||
if (this.field.date_range) {
|
|
||||||
this.$set(this.field, 'with_time', false)
|
|
||||||
this.$set(this.field, 'prefill_today', false)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
onFieldWithTimeChange(val) {
|
|
||||||
this.$set(this.field, 'with_time', val)
|
|
||||||
if (this.field.with_time) {
|
|
||||||
this.$set(this.field, 'date_range', false)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
onFieldGenUIdChange(val) {
|
|
||||||
this.$set(this.field, 'generates_uuid', val)
|
|
||||||
if (this.field.generates_uuid) {
|
|
||||||
this.$set(this.field, 'generates_auto_increment_id', false)
|
|
||||||
this.$set(this.field, 'hidden', true)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
onFieldGenAutoIdChange(val) {
|
|
||||||
this.$set(this.field, 'generates_auto_increment_id', val)
|
|
||||||
if (this.field.generates_auto_increment_id) {
|
|
||||||
this.$set(this.field, 'generates_uuid', false)
|
|
||||||
this.$set(this.field, 'hidden', true)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
initRating() {
|
|
||||||
if (this.field.is_rating && !this.field.rating_max_value) {
|
|
||||||
this.$set(this.field, 'rating_max_value', 5)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
onFieldOptionsChange(val) {
|
|
||||||
const vals = (val) ? val.trim().split("\n") : []
|
|
||||||
const tmpOpts = vals.map(name => {
|
|
||||||
return {
|
|
||||||
name: name,
|
|
||||||
id: name
|
|
||||||
}
|
|
||||||
})
|
|
||||||
this.$set(this.field, this.field.type, {'options': tmpOpts})
|
|
||||||
},
|
|
||||||
onFieldPrefillTodayChange(val) {
|
|
||||||
this.$set(this.field, 'prefill_today', val)
|
|
||||||
if (this.field.prefill_today) {
|
|
||||||
this.$set(this.field, 'prefill', 'Pre-filled with current date')
|
|
||||||
this.$set(this.field, 'date_range', false)
|
|
||||||
this.$set(this.field, 'disable_future_dates', false)
|
|
||||||
this.$set(this.field, 'disable_past_dates', false)
|
|
||||||
} else {
|
|
||||||
this.$set(this.field, 'prefill', null)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
onFieldAllowCreationChange(val) {
|
|
||||||
this.$set(this.field, 'allow_creation', val)
|
|
||||||
if (this.field.allow_creation) {
|
|
||||||
this.$set(this.field, 'without_dropdown', false)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
onFieldWithoutDropdownChange(val) {
|
|
||||||
this.$set(this.field, 'without_dropdown', val)
|
|
||||||
if (this.field.without_dropdown) {
|
|
||||||
this.$set(this.field, 'allow_creation', false)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
onFieldDisablePastDatesChange(val) {
|
|
||||||
this.$set(this.field, 'disable_past_dates', val)
|
|
||||||
if (this.field.disable_past_dates) {
|
|
||||||
this.$set(this.field, 'disable_future_dates', false)
|
|
||||||
this.$set(this.field, 'prefill_today', false)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
onFieldDisableFutureDatesChange(val) {
|
|
||||||
this.$set(this.field, 'disable_future_dates', val)
|
|
||||||
if (this.field.disable_future_dates) {
|
|
||||||
this.$set(this.field, 'disable_past_dates', false)
|
|
||||||
this.$set(this.field, 'prefill_today', false)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
onFieldHelpPositionChange (val) {
|
|
||||||
if (!val) {
|
|
||||||
this.$set(this.field, 'help_position', 'below_input')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
Loading…
Reference in New Issue