village-hall
/
opnform
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Phone Input - option for simple text input (#207) 

Co-authored-by: Julien Nahum <julien@nahum.net>
This commit is contained in:
formsdev 2023-09-20 15:44:08 +05:30 committed by GitHub
parent 6529907f2c
commit 4c56e8ba85
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 27 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/Http/Requests/AnswerFormRequest.php
View File

@ -190,6 +190,9 @@ class AnswerFormRequest extends FormRequest
}
return $this->getRulesForDate($property);
case 'phone_number':
if (isset($property['use_simple_text_input']) && $property['use_simple_text_input']) {
return ['string'];
}
return ['string', 'min:6', new ValidPhoneInputRule];
default:
return [];

4
app/Rules/ValidPhoneInputRule.php
View File

@ -13,8 +13,12 @@ class ValidPhoneInputRule implements Rule
return false;
}
try {
$phoneUtil = \libphonenumber\PhoneNumberUtil::getInstance();
return $phoneUtil->isValidNumber($phoneUtil->parse($value));
} catch (\Exception $e) {
return false;
}
}
public function message()

2
resources/js/components/forms/PhoneInput.vue
View File

@ -13,7 +13,7 @@
</small>
</div>
<div :id="id ? id : name" :name="name" :style="inputStyle" class="flex items-center">
<v-select class="w-[110px]" dropdown-class="w-[400px]" input-class="rounded-r-none" :data="countries"
<v-select class="w-[110px]" dropdown-class="w-[350px]" input-class="rounded-r-none" :data="countries"
v-model="selectedCountryCode"
:has-error="hasValidation && form.errors.has(name)"
:disabled="disabled" :searchable="true" :search-keys="['name']" :option-key="'code'" :color="color"

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

@ -133,7 +133,7 @@ export default {
checkbox: 'CheckboxInput',
url: 'TextInput',
email: 'TextInput',
phone_number: 'PhoneInput'
phone_number: 'TextInput'
}
},
/**
@ -159,6 +159,9 @@ export default {
if (field.type === 'signature') {
return 'SignatureInput'
}
if (field.type === 'phone_number' && !field.use_simple_text_input) {
return 'PhoneInput'
}
return this.fieldComponents[field.type]
},
isPublicFormPage() {

6
resources/js/components/open/forms/components/form-logic-components/ColumnCondition.vue
View File

@ -43,7 +43,7 @@ export default {
checkbox: 'CheckboxInput',
url: 'TextInput',
email: 'TextInput',
phone_number: 'PhoneInput'
phone_number: 'TextInput'
}
}
},
@ -57,6 +57,10 @@ export default {
required: true
}
if (this.property.type === 'phone_number' && !this.property.use_simple_text_input) {
componentData.component = 'PhoneInput'
}
if (['select', 'multi_select'].includes(this.property.type)) {
componentData.multiple = false;
componentData.options = this.property[this.property.type].options.map(option => {

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

@ -193,12 +193,18 @@
label="Field Name"
/>
<v-checkbox v-model="field.hide_field_name" class="mb-3"
<v-checkbox v-model="field.hide_field_name" class="mt-3"
:name="field.id+'_hide_field_name'"
>
Hide field name
</v-checkbox>
<v-checkbox v-model="field.use_simple_text_input" class="mt-3"
:name="field.id+'_use_simple_text_input'"
>
Use simple text input
</v-checkbox>
<!-- Pre-fill depends on type -->
<v-checkbox v-if="field.type=='checkbox'" v-model="field.prefill" class="mt-3"
:name="field.id+'_prefill'"
@ -216,7 +222,7 @@
:date-range="field.date_range===true"
label="Pre-filled value"
/>
<phone-input v-else-if="field.type === 'phone_number'"
<phone-input v-else-if="field.type === 'phone_number' && !field.use_simple_text_input"
name="prefill" class="mt-3"
:form="field" :can-only-country="true"
label="Pre-filled value"