From 08d331e8086734d4c3441e3fa7914e2f957861eb Mon Sep 17 00:00:00 2001
From: Sara Lago <saralago126@gmail.com>
Date: Fri, 27 Jan 2023 14:37:08 +0100
Subject: [PATCH] [IMP] pms: add country dropdown and improve dropdown style

---
 pms/views/precheckin_portal_templates.xml | 178 +++++++++++-----------
 1 file changed, 85 insertions(+), 93 deletions(-)

diff --git a/pms/views/precheckin_portal_templates.xml b/pms/views/precheckin_portal_templates.xml
index a86a43bb9..d86e6f15e 100644
--- a/pms/views/precheckin_portal_templates.xml
+++ b/pms/views/precheckin_portal_templates.xml
@@ -290,11 +290,6 @@
                             />
                             <span id="birthdate-error" class="d-none text-danger">Birthdate cannot be older than today</span>
 
-                            </div>
-                            <div class="d-none" id="countryDiv">
-                                <t t-foreach="country_ids" t-as='country_id'>
-                                    <span t-att-id="country_id.name" t-att-country_name="country_id.name" t-att-country_id="country_id.id"/>
-                                </t>
                             </div>
                             <div t-attf-class="form-group col-12 col-md-6">
                                 <label
@@ -302,9 +297,8 @@
                                 for="nationality_id"
                             >Nationality *</label><br/>
                             <div class="dropdown">
-                              <input type="text"  t-attf-class="form-control" placeholder="Search.." id="myInput" onclick="showCountries(true)" oninput="filterFunction()"/>
-                              <div id="myDropdown" class="dropdown-content d-none">
-
+                              <input type="text" class="dropdown-input" t-attf-class="form-control" placeholder="Type your nationality here" id="myInput" onclick="showNationCountries(true)" oninput="filterNationalities()"/>
+                              <div id="nationalityDropdown" class="dropdown-content d-none">
                                     <t t-foreach="country_ids" t-as='country_id'>
                                         <a t-attf-onclick="selectNationality(this)">
                                             <t t-esc='country_id.name' />
@@ -380,6 +374,7 @@
 
                                 <input
                                     name="residence_city_zip"
+                                    class="dropdown-input"
                                     t-attf-class="form-control"
                                     type="text"
                                     placeholder="Type your zip code here" id="myZipInput"
@@ -416,26 +411,28 @@
                                 />
                             </div>
                          <div t-attf-class="form-group col-12 col-md-6">
-                                <select
-                                t-attf-class="form-control"
-                                id="residence-country"
-                                name='residence_country_id'
-                                onclick="changeCountryFormClass()"
-                            >
-                                    <option
-                                    id="country_placeholder"
-                                    hidden="1"
-                                    value="placeholder"
-                                >Country</option>
-                                    <t t-foreach="country_ids" t-as='country_id'>
-                                        <option
-                                        t-att-value="country_id.id"
-                                        t-att-selected="str(country_id.id) == residence_country_id if residence_country_id and error else placeholder"
-                                    >
-                                            <t t-esc='country_id.name' />
-                                        </option>
+                             <div class="dropdown">
+                                 <input
+                                    name="residence_country_id"
+                                    class="dropdown-input"
+                                    t-attf-class="form-control"
+                                    type="text"
+                                    placeholder="Type your country here"
+                                    id="myCountryInput"
+                                    onclick="showCountries(true)"
+                                    oninput="filterCountries()"
+                                    autocomplete="off"
+                                    />
+                                 <div id="myCountryDropdown" class="dropdown-content d-none">
+
+                                    <t t-foreach="country_ids" t-as='country'>
+                                          <a t-att-id="country.id" t-attf-onclick="selectCountry(this)">
+                                            <t t-esc='country.name' />
+                                        </a>
                                     </t>
-                                </select>
+
+                              </div>
+                             </div>
                             </div>
                             <div t-attf-class="form-group col-12 col-md-6 pb-md-3">
                                 <select
@@ -476,27 +473,10 @@
             </form>
         </t>
         <style>
-        #snackbar {
-            visibility: hidden;
-            min-width: 250px;
-            margin-left: -125px;
-            background-color: #6c757d;
-            color: #fff;
-            text-align: center;
-            border-radius: 2px;
-            padding: 16px;
-            position: fixed;
-            z-index: 1;
-            left: 50%;
-            top: 100px;
-            font-size: 17px;
+            #checkinForm {
+                padding: 10px;
             }
 
-            #snackbar.show {
-            visibility: visible;
-            -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
-            animation: fadein 0.5s, fadeout 0.5s 2.5s;
-            }
 
             @-webkit-keyframes fadein {
             from {top: 0; opacity: 0;}
@@ -537,7 +517,7 @@
 
 
 
-        #myInput {
+        .dropdown-input {
 
           box-sizing: border-box;
           background-position: 14px 12px;
@@ -550,19 +530,8 @@
           transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
         }
 
-        #myInput:focus {outline: 3px solid #93dbd9;}
-            #myZipInput {
-          box-sizing: border-box;
-          background-position: 14px 12px;
-          background-repeat: no-repeat;
-          font-size: 0.875rem;
-          padding: 0.375rem 0.75rem;
-          border: 1px solid #CED4DA;
-          border-radius: 0.25rem;
-          border-bottom: 1px solid #ddd;
-          transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-        }
-            #myZipInput:focus {outline: 3px solid #93dbd9;}
+        #dropdown-input:focus {outline: 3px solid #93dbd9;}
+
 
 .dropdown {
   position: relative;
@@ -572,15 +541,19 @@
 
 .dropdown-content {
   position: absolute;
-  background-color: #f6f6f6;
+  background-color: #ffffff;
+  width: 100%;
   min-width: 230px;
   overflow: auto;
   border: 1px solid #ddd;
+  border-radius: 0.5rem;
+
   z-index: 1;
   max-height: 150px;
 }
 
 .dropdown-content a {
+  border-bottom: 1px solid  #CED4DA;
   color: black;
   padding: 12px 16px;
   text-decoration: none;
@@ -609,16 +582,7 @@
             $('#docExpDate').datepicker({
                 startView: 'decade',
             });
-            var placeholder_country = document.getElementById("country_placeholder")
-            function changeCountryFormClass() {
-                let select_value = placeholder_country.parentNode.value
-                if (placeholder_country.parentNode.value == 'placeholder'){
-                    placeholder_country.parentNode.classList.add('placeholder-class')
-                }else{
-                    placeholder_country.parentNode.classList.remove('placeholder-class')
-                }
-            };
-            this.changeCountryFormClass()
+
 
             var placeholder = document.getElementById("placeholder")
             function changeFormClass() {
@@ -633,17 +597,17 @@
             };
             this.changeFormClass()
 
-            var select_residence_country = document.getElementById('residence-country')
+<!--            var select_residence_country = document.getElementById('myCountryInput')-->
 
-            select_residence_country.addEventListener("change", () => {
-                this.filterStates();
-            });
+<!--            select_residence_country.addEventListener("change", () => {-->
+<!--                this.filterStatesByCountry();-->
+<!--            });-->
 
 
-            function filterStates(){
-                let country_value = select_residence_country.value
+            function filterStatesByCountry(country_id){
+
                 Array.from(document.getElementById('residence-state').options).forEach(element => {
-                if (element.getAttribute('country_id') == country_value) {
+                if (element.getAttribute('country_id') == country_id) {
                 element.style="";
                 } else {
                 element.style="display:none";
@@ -668,11 +632,11 @@
 
 
 
-            function showCountries(show){
+            function showNationCountries(show){
                 if(show){
-                    document.getElementById("myDropdown").classList.remove("d-none");
+                    document.getElementById("nationalityDropdown").classList.remove("d-none");
                 }else{
-                    document.getElementById("myDropdown").classList.add("d-none");
+                    document.getElementById("nationalityDropdown").classList.add("d-none");
                 }
 
             }
@@ -680,7 +644,24 @@
             function selectNationality(element){
                 var nationality = element.innerText;
                 document.getElementById("myInput").value = nationality;
+                this.showNationCountries(false);
+            }
+
+            function showCountries(show){
+                if(show){
+                    document.getElementById("myCountryDropdown").classList.remove("d-none");
+                }else{
+                    document.getElementById("myCountryDropdown").classList.add("d-none");
+                }
+
+            }
+
+            function selectCountry(element){
+                console.log(element);
+                var country = element.innerText;
+                document.getElementById("myCountryInput").value = country;
                 this.showCountries(false);
+                this.filterStatesByCountry(element.id);
             }
             function showZips(showZips){
                 if(showZips){
@@ -691,11 +672,11 @@
             }
 
 
-            function filterFunction() {
-              var input, filter, ul, li, a, i;
+            function filterNationalities() {
+              var input, filter, a, i;
               input = document.getElementById("myInput");
               filter = input.value.toUpperCase();
-              div = document.getElementById("myDropdown");
+              div = document.getElementById("nationalityDropdown");
               a = div.getElementsByTagName("a");
               for (i = 0; i&lt;a.length; i++) {
                 txtValue = a[i].textContent || a[i].innerText;
@@ -707,9 +688,8 @@
               }
             }
 
-            this.filterFunction()
             function filterZips() {
-              var input, filter, ul, li, a, i;
+              var input, filter, a, i;
               input = document.getElementById("myZipInput");
               filter = input.value.toUpperCase();
               div = document.getElementById("myZipDropdown");
@@ -724,20 +704,32 @@
               }
             }
 
+            function filterCountries() {
+              var input, filter, a, i;
+              input = document.getElementById("myCountryInput");
+              filter = input.value.toUpperCase();
+              div = document.getElementById("myCountryDropdown");
+              a = div.getElementsByTagName("a");
+              for (i = 0; i&lt;a.length; i++) {
+                txtValue = a[i].textContent || a[i].innerText;
+                if (txtValue.trim().toUpperCase().startsWith(filter)) {
+                  a[i].style.display = "";
+                } else {
+                  a[i].style.display = "none";
+                }
+              }
+            }
+
             function completeAddressData(element){
                 var zip_name = element.firstChild.nextSibling.getAttribute("zip_name");
                 var country_id = element.firstChild.nextSibling.getAttribute("country_id");
                 var state_id = element.firstChild.nextSibling.getAttribute("state_id");
                 var city_name = element.firstChild.nextSibling.getAttribute("city_name");
                 document.getElementById("myZipInput").value = zip_name;
-                Array.from(document.getElementById('residence-country').options).forEach(element => {
+                console.log(document.getElementById(country_id));
+                var optionCountry = document.getElementById(country_id);
+                optionCountry.click(optionCountry);
 
-                if (element.value == country_id) {
-                    element.selected = true
-                    element.style.color = "black";
-                    this.filterStates();
-                }
-                });
                 Array.from(document.getElementById('residence-state').options).forEach(element => {
 
                     if (element.value == state_id) {