[Feature][Ready] Phone field type

[tabacitu]

Merges #1348 Fixes #1202 Uses https://github.com/jackocnr/intl-tel-input

Declaration:

[
   'name' => 'phone',
   'type' => 'phone',
   'label' => 'Phone Number (international)',
]

Merged #1348 and added a few features:

• the number is always stored using the international format (in a hidden input);
• check phone number integrity using utilsScript, loaded from CDN (the only way I could get it to work);
• always show the phone number prefix, next to the country flag;
• pre-populate the country flag based on the user's IP address, if the field is empty (geoIpLookup);
• copy-paste a phone number with prefix will automatically load the country flag;

Removed:

• prefix and suffix field options (not needed; plus it would be confusing since the phone number also has its own prefix);
• html files with intl-tel-input demo

[tabacitu]

PS. The field type seems to be working properly for me, but further testing is recommended.

[tabacitu]

@AbbyJanke - what do you think? I feel enabling these advanced features makes the field more intuitive and foolproof.

[ziming]

It's approved, when will this get merged? :)

[tabacitu]

@ziming probably by the end of the week, included in the 3.5 release. It’s gonna be a big update - I think you’ll love it :-) Can’t wait to finally put all pieces together.

[AbbyJanke]

@tabacitu Looks like we had plans for this in 3.5 but it didn't get merged? Think we can get this added?

[ziming]

agreed!

[CyberCr33p]

Any news about this?

[martijnb92]

Paths are still based on Backpack v3, uses vendor instead of packages. This needs to be changed before merging.

[rodrigoUriarte]

Hi guys, any news on this?

[tabacitu]

Haven't worked on this in a while, @rUriarteDev , no, sorry. I'd still love to have this, it's just never been a priority. The v4 field shouldn't be too different from the v3 code here - only minor changes I think. Let us know if you end up working on this before we do, and it's something that works well - might merge it into Backpack, or create a Backpack add-on for it.

[AfzalSabbir]

Any update on this?

[tabacitu]

No updates yet. But it's on the roadmap, and it'll probably get done in the next 1-2 months.

We should keep in mind that developers could/should also use Propaganistas/Laravel-Phone to validate the phone numbers introduced with any new phone field. So the inputs should also match the format that package expects. This adds another layer of complexity to the field...

[tabacitu]

New field checklist:

• [ ] does the value get saved to the database?
• [ ] does the value need to be casted to something in the Model? is it mandatory? should it support both?
• [ ] can the dev increase/decrease the size using Bootstrap classes?
• [ ] does resizing also work with Fluent field syntax? eg. ->size(6)?
• [ ] does it support ->disabled() and ->readonly()
• [ ] does it support ->default()?
• [ ] has all jQuery been removed in favor of vanilla Javascript?
• [ ] have the CSS and JS dependencies been loaded with @loadOnce?
• [ ] have the CSS and JS dependencies been pushed to proper stacks (after_scripts and after_styles)
• [ ] on error, does the field properly show the error?
• [ ] does the field support prefix and suffix?
• [ ] does the field support hint?
• [ ] on validation error, does the field properly get the old value?
• [ ] can the dev customize the configuration/parameters from PHP?
• [ ] are you sure there are no visible strings that should be turned into translated strings?
• [ ] does this field work inside the repeatable field?
• [ ] does this field work with our CrudField JS Library? do all events there work on this field?
• [ ] if the input is first on page, does the focus correctly set on the input?
• [ ] if the input is first in a modal, does the focus correctly set on the input?
• [ ] does the field have documentation? should it say it needs assets to be published to work?
• [ ] does the field have a screenshot?

[jcastroa87]

This field is done by PR PRO 103

[tabacitu]

Closing in favor of #4761 🎉