matt/opnform-host-nginx
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Number input as Scale (#227)

Browse Source 
* Number input as Scale

* scale input

---------

Co-authored-by: Julien Nahum <julien@nahum.net>
This commit is contained in:
formsdev
2023-10-26 18:28:35 +05:30
committed by GitHub
parent 8a2e071c56
commit 7c03d20cc4
5 changed files with 173 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
resources/js/components/open/forms/OpenFormField.vue
View File

@@ -150,6 +150,9 @@ export default {
if (field.type === 'number' && field.is_rating && field.rating_max_value) {
return 'RatingInput'
}
if (field.type === 'number' && field.is_scale && field.scale_max_value) {
return 'ScaleInput'
}
if (['select', 'multi_select'].includes(field.type) && field.without_dropdown) {
return 'FlatSelectInput'
}
@@ -302,6 +305,10 @@ export default {
inputProperties.accept = (this.form.is_pro && field.allowed_file_types) ? field.allowed_file_types : ""
} else if (field.type === 'number' && field.is_rating) {
inputProperties.numberOfStars = parseInt(field.rating_max_value)
} else if (field.type === 'number' && field.is_scale) {
inputProperties.minScale = parseInt(field.scale_min_value) ?? 1
inputProperties.maxScale = parseInt(field.scale_max_value) ?? 5
inputProperties.stepScale = parseInt(field.scale_step_value) ?? 1
} else if (field.type === 'number' || (field.type === 'phone_number' && field.use_simple_text_input)) {
inputProperties.pattern = '/\d*'
} else if (field.type === 'phone_number' && !field.use_simple_text_input) {

46
resources/js/components/open/forms/fields/components/FieldOptions.vue
View File

@@ -73,13 +73,36 @@
Rating
</v-checkbox>
<p class="text-gray-400 mb-3 text-xs">
If enabled then this field will be star rating input.
Transform this field into a star rating input.
</p>
<text-input v-if="field.is_rating" name="rating_max_value" native-type="number" :min="1" class="mt-3"
:form="field" required
label="Max rating value"
/>
<v-checkbox v-model="field.is_scale" class="mt-4"
:name="field.id+'_is_scale'" @input="initScale"
>
Scale
</v-checkbox>
<p class="text-gray-400 text-xs mb-5">
Transform this field into a scale/score input.
</p>
<template v-if="field.is_scale">
<text-input name="scale_min_value" native-type="number" class="mt-4"
:form="field" required
label="Min scale value"
/>
<text-input name="scale_max_value" native-type="number" :min="1" class="mt-4"
:form="field" required
label="Max scale value"
/>
<text-input name="scale_step_value" native-type="number" :min="1" class="mt-4"
:form="field" required
label="Scale step svalue"
/>
</template>
</div>
<!-- Text Options -->
@@ -510,8 +533,25 @@ export default {
}
},
initRating() {
if (this.field.is_rating && !this.field.rating_max_value) {
this.$set(this.field, 'rating_max_value', 5)
if (this.field.is_rating) {
this.$set(this.field, 'is_scale', false)
if (!this.field.rating_max_value) {
this.$set(this.field, 'rating_max_value', 5)
}
}
},
initScale () {
if (this.field.is_scale) {
this.$set(this.field, 'is_rating', false)
if (!this.field.scale_min_value) {
this.$set(this.field, 'scale_min_value', 1)
}
if (!this.field.scale_max_value) {
this.$set(this.field, 'scale_max_value', 5)
}
if (!this.field.scale_step_value) {
this.$set(this.field, 'scale_step_value', 1)
}
}
},
onFieldOptionsChange(val) {