From 474d6c7462c055c11e58986d837d8087f74562d9 Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
Date: Tue, 19 Sep 2023 12:10:48 +0000
Subject: [PATCH] Bug 34831: Add input types "tel", "email" and "url" to vendor
 edit form
MIME-Version: 1.0
Content-Type: text/plain; charset=utf8
Content-Transfer-Encoding: 8bit

This patch updates the vendor edit form so that phone, email, and url
fields have an input type corresponding to the field's content.

To test, apply the patch and go to Acquisitions.

- Create or edit a vendor.
- In the form, check that each field looks correct:
  - Company details ->
    - Phone
    - Fax
    - Website
  - Contact details
    - Phone
    - Alternative phone
    - Fax
    - Email
  - Interfaces
    - URI
    - Account email

In a desktop browser the inputs won't display any differently, but if
you test the patch in a sandbox you can try it in a mobile device
browser to confirm that the onscreen keyboard changes based on the type
of input.

Signed-off-by: Émily-Rose Francoeur <emily-rose.francoeur@inLibro.com>
Signed-off-by: Katrin Fischer <katrin.fischer@bsz-bw.de>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
---
 .../prog/en/modules/acqui/supplier.tt         | 30 +++++++++----------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/acqui/supplier.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/acqui/supplier.tt
index 3042418cc6..4126fb895a 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/acqui/supplier.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/acqui/supplier.tt
@@ -12,13 +12,13 @@
         <li><label for="contact_position[% contact.id | html %]">Position: </label>
             <input type="text" size="40" id="contact_position[% contact.id | html %]" name="contact_position" value="[% contact.position | html %]" /></li>
         <li><label for="contact_phone[% contact.id | html %]">Phone: </label>
-                <input type="text" size="20" id="contact_phone[% contact.id | html %]" name="contact_phone" value="[% contact.phone | html %]" /> </li>
+                <input type="tel" size="20" id="contact_phone[% contact.id | html %]" name="contact_phone" value="[% contact.phone | html %]" /> </li>
         <li><label for="contact_altphone[% contact.id | html %]">Alternative phone: </label>
-            <input type="text" size="20" id="contact_altphone[% contact.id | html %]" name="contact_altphone" value="[% contact.altphone | html %]" /></li>
+            <input type="tel" size="20" id="contact_altphone[% contact.id | html %]" name="contact_altphone" value="[% contact.altphone | html %]" /></li>
         <li><label for="contact_fax[% contact.id | html %]">Fax: </label>
-            <input type="text" size="20" id="contact_fax[% contact.id | html %]" name="contact_fax" value="[% contact.fax | html %]" /></li>
+            <input type="tel" size="20" id="contact_fax[% contact.id | html %]" name="contact_fax" value="[% contact.fax | html %]" /></li>
         <li><label for="contact_email[% contact.id | html %]">Email: </label>
-            <input type="text" size="40" id="contact_email[% contact.id | html %]" name="contact_email" value="[% contact.email | html %]" class="email" /></li>
+            <input type="email" size="40" id="contact_email[% contact.id | html %]" name="contact_email" value="[% contact.email | html %]" class="email" /></li>
         <li><label for="contact_notes[% contact.id | html %]">Notes: </label>
             <textarea id="contact_notes[% contact.id | html %]" name="contact_notes" cols="40" rows="4">[% contact.notes | html %]</textarea></li>
     </ol>
@@ -221,11 +221,11 @@ div.rows { padding: 1rem; }
             <li><label for="physical">Physical address: </label>
                 <textarea id="physical" name="physical" cols="40" rows="3">[% address1 | html %][% address2 | html %][% address3 | html %][% address4 | html %]</textarea></li>
             <li><label for="company_phone">Phone: </label>
-                <input type="text" size="20" id="company_phone" name="company_phone" value="[% phone | html %]" /></li>
+                <input type="tel" size="20" id="company_phone" name="company_phone" value="[% phone | html %]" /></li>
             <li><label for="company_fax">Fax: </label>
-                <input type="text" size="20" id="company_fax" name="company_fax" value="[% fax | html %]" /></li>
+                <input type="tel" size="20" id="company_fax" name="company_fax" value="[% fax | html %]" /></li>
             <li><label for="website">Website: </label>
-                <input type="text" size="40" id="website" name="website" value="[% url | html %]" class="url" /></li>
+                <input type="url" size="40" id="website" name="website" value="[% url | html %]" class="url" /></li>
             <li><label for="accountnumber">Account number: </label>
                 <input type="text" size="40" id="accountnumber" name="accountnumber" value="[% accountnumber | html %]" /></li>
                 <li>
@@ -644,19 +644,19 @@ div.rows { padding: 1rem; }
                 n.append(`<input type="hidden" name="interface_counter" value="${i}" />`);
                 let ol = $('<ol class="interface-form"></ol>');
                 let attributes = [
-                    { label: _("Name:"),          name: 'name',          node: 'input' },
-                    { label: _("Type:"),          name: 'type',          node: 'av_select', av_cat: 'VENDOR_INTERFACE_TYPE' },
-                    { label: _("URI:"),           name: 'uri',           node: 'input' },
-                    { label: _("Login:"),         name: 'login',         node: 'input' },
-                    { label: _("Password:"),      name: 'password',      node: 'input' },
-                    { label: _("Account email:"), name: 'account_email', node: 'input' },
-                    { label: _("Notes:"),         name: 'notes',         node: 'textarea' }
+                    { label: _("Name:"),          name: 'name',          type: 'text',     node: 'input' },
+                    { label: _("Type:"),          name: 'type',          type: 'select',   node: 'av_select', av_cat: 'VENDOR_INTERFACE_TYPE' },
+                    { label: _("URI:"),           name: 'uri',           type: 'url',      node: 'input' },
+                    { label: _("Login:"),         name: 'login',         type: 'text',     node: 'input' },
+                    { label: _("Password:"),      name: 'password',      type: 'text',     node: 'input' },
+                    { label: _("Account email:"), name: 'account_email', type: 'email',    node: 'input' },
+                    { label: _("Notes:"),         name: 'notes',         type: 'textarea', node: 'textarea' }
                 ];
                 attributes.forEach((attribute, ii) => {
                     let li = $('<li></li>');
                     li.append(`<label for="interface_${attribute.name}_${i}">${attribute.label}</label>`);
                     if( attribute.node == 'input' ) {
-                        li.append(`<input type="text" size="40" id="interface_${attribute.name}_${i}" name="interface_${attribute.name}_${i}" value="${interface[attribute.name]}" />`);
+                        li.append(`<input type="${attribute.type}" size="40" id="interface_${attribute.name}_${i}" name="interface_${attribute.name}_${i}" value="${interface[attribute.name]}" />`);
                     } else if ( attribute.node == 'textarea' ) {
                         li.append(`<textarea cols="40" rows="3" id="interface_${attribute.name}_${i}" name="interface_${attribute.name}_${i}">${interface[attribute.name]}</textarea>`);
                     } else if ( attribute.node == 'av_select' ) {
-- 
2.39.5