audrius/pms
1
0
Fork 1
mirror of https://github.com/OCA/pms.git synced 2025-01-29 00:17:45 +02:00
Code Issues Packages Projects Releases Wiki Activity

[IMP] pms: add country dropdown and improve dropdown style

Browse Source
This commit is contained in:
Sara Lago
2023-01-27 14:37:08 +01:00
committed by Darío Lodeiros
parent b11827947e
commit 08d331e808
1 changed files with 85 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

178
pms/views/precheckin_portal_templates.xml
View File

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