#2279 country selection with flags

This commit is contained in:
Muammer Top 2020-11-30 14:17:00 +03:00
parent fe0781ca23
commit ff9808689b
2 changed files with 48 additions and 37 deletions

View File

@ -6,19 +6,22 @@ var village;
//Country //Country
$('.filter-country-btn').on('click', function () { $('.filter-country-btn').on('click', function () {
var selected__country_request = $('input[name="country[]"]').val();
if (countries == undefined) { if (countries == undefined) {
var promiseForCountries = new Promise(function (resolve, reject) { var promiseForCountries = new Promise(function (resolve, reject) {
locationCrud('', '/ajax/getCountry', 'POST', beforeSend(), function (callback) { locationCrud('', '/ajax/getCountry', 'POST', beforeSend(), function (callback) {
countries = callback; countries = callback;
resetValue('country', true, false) resetValue('country', true, false)
$.each(countries, function (index, value) { $.each(countries, function (index, value) {
console.log(value) $('.filter-location-modal .countries').append(item('country', value.id, value.name, value.abv.toLowerCase()));
$('.filter-location-modal .countries').append(item('country', value.id, value.name, value.abv));
}); });
if (countries == "") if (countries == "")
$('.filter-location-modal .countries').html(null_msg); $('.filter-location-modal .countries').html(null_msg);
else if ($('input[name="country"]').val() != "") else if ($('input[name="country"]').val() != ""){
$(".filter-location-body .countries li[data-id='" + $('input[name="country"]').val() + "'] input[type='checkbox']").prop('checked', true); $.each(selected__country_request.split(','), function (index, value){
$(".filter-location-body .countries li[data-id='" + value.trim() + "'] input[type='checkbox']").prop('checked', true);
})
}
resolve(); resolve();
}) })
}); });
@ -32,10 +35,9 @@ $('.filter-country-btn').on('click', function () {
$('.filter-location-back').show(); $('.filter-location-back').show();
scroolToModal() scroolToModal()
}); });
//City //City
$('.filter-city-btn').on('click', function () { $('.filter-city-btn').on('click', function () {
var countries_value = $('input[name="country"]').val(); var countries_value = $('input[name="country[]"]').val();
var selected__city_request = $('input[name="city[]"]').val(); var selected__city_request = $('input[name="city[]"]').val();
if (cities == undefined || $(this).attr('data-parent') != countries_value) { if (cities == undefined || $(this).attr('data-parent') != countries_value) {
$(this).attr('data-parent', countries_value); $(this).attr('data-parent', countries_value);
@ -199,32 +201,31 @@ function SelectOnClick() {
var id = $(this).attr('data-id'); var id = $(this).attr('data-id');
if ($(this).attr('data-field') == "country") { if ($(this).attr('data-field') == "country") {
$('.filter-location-modal,.filter-location-back,.filter-location-modal .countries').hide(); // $('.filter-location-modal,.filter-location-back,.filter-location-modal .countries').hide();
$('input[name="country"]').val(id) // $('input[name="country"]').val(id)
$('.selected-city').html(''); $('.selected-city').html('');
$('input[name="city[]"]').val(''); $('input[name="city[]"]').val('');
text_html.html(input_text) text_html.html(input_text)
$(".filter-location-body input[type='checkbox']").prop('checked', false); // $(".filter-location-body input[type='checkbox']").prop('checked', false);
$(".filter-location-body li[data-id='" + id + "'] input[type='checkbox']").prop('checked', true); $(".filter-location-body li[data-id='" + id + "'] input[type='checkbox']").prop('checked', true);
} else {
if (input_val != "") {
input_val = input_val.split(',');
text = text_html.html().split(',');
} else {
input_val = [];
text = [];
}
if (this.checked) {
input_val.push(id);
text.push(input_text)
} else {
input_val.splice($.inArray(id, input_val), 1);
text.splice($.inArray(input_text, text), 1);
}
input.val(input_val.join(','))
text_html.html(text.join(','))
} }
if (input_val != "") {
input_val = input_val.split(',');
text = text_html.html().split(',');
} else {
input_val = [];
text = [];
}
if (this.checked) {
input_val.push(id);
text.push(input_text)
} else {
input_val.splice($.inArray(id, input_val), 1);
text.splice($.inArray(input_text, text), 1);
}
input.val(input_val.join(','))
text_html.html(text.join(','))
}); });
} }
@ -243,15 +244,26 @@ function locationCrud(params, url, type, beforeSend, callback) {
}); });
} }
function item(field_name, id, value, abv ) { function item(field_name, id, value, abv = '') {
return '<li class="px-2" data-id="' + id + '">\n' + if (field_name === 'country') {
' <label class="w-100">\n' + return '<li class="px-2" data-id="' + id + '">\n' +
' <input type="checkbox" data-field="' + field_name + '" data-id="' + id + '">\n' + ' <label class="w-100">\n' +
' <span class="flag ml-1 flag-'+ abv.toLowerCase() +'">\n' + ' <input type="checkbox" data-field="' + field_name + '" data-id="' + id + '">\n' +
' </span>\n' + ' <span class="flag ml-1 flag-' + abv + '">\n' +
' <small>' + value + '</small>\n' + ' </span>\n' +
' </label>\n' + ' <small>' + value + '</small>\n' +
' </li>'; ' </label>\n' +
' </li>';
} else {
return '<li class="px-2" data-id="' + id + '">\n' +
' <label class="w-100">\n' +
' <input type="checkbox" data-field="' + field_name + '" data-id="' + id + '">\n' +
' <small>' + value + '</small>\n' +
' </label>\n' +
' </li>';
}
} }
function resetValue(location_type, reset_this, reset_parent) { function resetValue(location_type, reset_this, reset_parent) {

View File

@ -21,7 +21,7 @@
</span> </span>
<i class="fas fa-sort-down float-right"></i> <i class="fas fa-sort-down float-right"></i>
</button> </button>
<input name="country" value="{{ countryValue }}" type="hidden"> <input name="country[]" value="{% if countrySlug %}{{ countrySlug.id }}{% else %}{{ params.param['country']|join(',') }}{% endif %}" type="hidden" multiple>
</div> </div>
<div class="col-12 px-0 py-1"> <div class="col-12 px-0 py-1">
@ -119,5 +119,4 @@
<script> <script>
var null_msg = "{{ trans('visiosoft.module.location::message.null_msg') }}!" var null_msg = "{{ trans('visiosoft.module.location::message.null_msg') }}!"
var flag_img = "{{ img('visiosoft.module.location::images/flags.png').url|raw }}"
</script> </script>