mirror of
https://github.com/OCA/pms.git
synced 2025-01-29 00:17:45 +02:00
[IMP] pms: add country dropdown and improve dropdown style
This commit is contained in:
Sara Lago
committed by
Darío Lodeiros
Darío Lodeiros
parent
b11827947e
commit
08d331e808
@@ -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<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<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) {
|
||||
|
||||
Reference in New Issue
Block a user