diff --git a/ReferenceDataApp/js_views.py b/ReferenceDataApp/js_views.py index 5d0fa19..82cc07f 100644 --- a/ReferenceDataApp/js_views.py +++ b/ReferenceDataApp/js_views.py @@ -45,7 +45,7 @@ def search_city_ajax(request): # else: res_data = search_cities_in_db(data['search_str']) - widgets_list = [render_to_string('widgets/w_ac_input_address_point.html', item, request) for item in res_data] + widgets_list = [render_to_string('v2/content_widgets/cw_w_select_w_for_select.html', item, request) for item in res_data] html = ''.join(widgets_list) # res_data_str_list = [] diff --git a/static/v2/css/forms.css b/static/v2/css/forms.css index 7707082..def3385 100644 --- a/static/v2/css/forms.css +++ b/static/v2/css/forms.css @@ -11,6 +11,7 @@ --label-font-size: 16px; --label-font-weight: 500; + box-sizing: border-box; label{ display: block; color: var(--label-color); diff --git a/static/v2/css/widgets/w_select_country.css b/static/v2/css/widgets/w_select_country.css index 4d6ba96..1d18b13 100644 --- a/static/v2/css/widgets/w_select_country.css +++ b/static/v2/css/widgets/w_select_country.css @@ -2,7 +2,13 @@ position: relative; --header-padding: 10px 20px; --select-border: #E6E6E6; - --select-border-radius: 10px; + --select-border-radius: 10px 10px 0 0; + --select-height: 48px; + + &.closed{ + --select-border-radius: 10px; + .w_select_country_content{display: none} + } .w_select_country_header{ display: flex; @@ -12,6 +18,7 @@ border: 1px solid var(--select-border); border-radius: var(--select-border-radius); padding: 10px; + background: #FFFFFF; .select_country_header_left_part{ display: flex; @@ -22,7 +29,7 @@ .container_inf_about_country{ display: none; align-items: center; - gap: 5px; + gap: 0; &:has(img[src]){ display: flex; } @@ -51,9 +58,58 @@ } .w_select_country_content{ position: absolute; - top: 60px; + top: var(--select-height); + width: 100%; + background: #FFFFFF; + border: 1px solid var(--select-border); + border-top: none; + border-radius: 0 0 10px 10px; + box-sizing: border-box; + max-height: 200px; + overflow: auto; + + &::-webkit-scrollbar-thumb { + background-color: #CCCED1FF; + border-radius: 5px; + width: 6px; + display: block; + border: 1px solid #EDEDEDFF; + transition: 200ms all; + } + &::-webkit-scrollbar { + background-color: #EDEDEDFF; + width: 8px; + display: block; + padding-left: 15px; + transition: 500ms all; + opacity: 100%; + border-radius: 5px; + } } - &.closed{ - .w_select_country_content{display: none} + .cw_w_select_widget_for_select{ + display: flex; + align-items: center; + gap: 10px; + padding: 10px; + cursor: pointer; + + .cw_country_inf_part{ + display: flex; + align-items: center; + gap: 0; + img{ + height: 12px; + width: 24px; + object-fit: contain; + } + div{ + color: #272424; + font-size: 14px; + } + } + .cw_name_country{ + font-size: 16px; + color: #000000; + } } } \ No newline at end of file diff --git a/static/v2/icons/widgets/w_select_country/flag_of_belarus_temp.svg b/static/v2/icons/widgets/w_select_country/flag_of_belarus_temp.svg new file mode 100644 index 0000000..f0867d9 --- /dev/null +++ b/static/v2/icons/widgets/w_select_country/flag_of_belarus_temp.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/v2/js/service/api.js b/static/v2/js/service/api.js index 532d5fa..e101010 100644 --- a/static/v2/js/service/api.js +++ b/static/v2/js/service/api.js @@ -10,6 +10,7 @@ class api { ajaxRequest (){ if (!this.url) return; + let class_data = this; let request_data = { headers: {"X-CSRFToken": $('input[name=csrfmiddlewaretoken]').val()}, @@ -17,9 +18,9 @@ class api { type: this.type, data: this.data, success: function (data) { - if (this.success_callback) this.success_callback(data) + if (class_data.success_callback) class_data.success_callback(data) }, error: function (data) { - if (this.error_callback) this.error_callback(data) + if (class_data.error_callback) class_data.error_callback(data) } } @@ -27,6 +28,9 @@ class api { request_data.processData = false request_data.contentType = false } + if (this.data_type === 'json'){ + request_data.data = JSON.stringify(this.data) + } $.ajax(request_data); } diff --git a/static/v2/js/widgets/w_select_country.js b/static/v2/js/widgets/w_select_country.js index 8d4a3f0..04d6aa7 100644 --- a/static/v2/js/widgets/w_select_country.js +++ b/static/v2/js/widgets/w_select_country.js @@ -17,6 +17,11 @@ function openSelectCountry(el, callback) { $parent.classList.remove('closed'); + $('body')[0].onclick = function (){ + if (event.target.closest(".w_select_country.closed") || !event.target.closest(".w_select_country")){ + closeSelectCountry(el) + } + } if (callback) callback('opened', $parent); } @@ -29,14 +34,89 @@ function closeSelectCountry(el, callback) { if (callback) callback('closed', $parent); } +let search_country_timeout = false; + function searchCountry(el) { - let request = new api({ - url: '', - data: '', - data_type: 'formData', - success: function (data) { - }, error: function (data) { + resetCountrySelect(el) + closeSelectCountry(el) + if (!el || el.value.length < 3) return; + + let $parent = el.closest('.w_select_country'); + let $content_part = $parent.querySelector('.w_select_country_content'); + + if (search_country_timeout) { + clearTimeout(search_country_timeout); + search_country_timeout = false; + } + search_country_timeout = setTimeout(function () { + let url = '/reference_data/search_city/' + let data = { + 'search_str': el.value } - }); - request.ajaxRequest() + let request = new api({ + url: url, + data: data, + data_type: 'json', + success: function (data) { + if (!data.res_search_list && data.res_search_list !== '') console.log(`request data has not html => ${url}`); + $content_part.innerHTML = data.res_search_list; + openSelectCountry(el) + }, error: function (data) { + } + }); + request.ajaxRequest() + }, 1000) +} + +function selectCountry(el, callback) { + let $parent = el.closest('.w_select_country'); + if (!$parent) return; + + let $input_part = $parent.querySelector('.select_country_header_left_part'); + let $flag = $input_part.querySelector('.country_flag_img_container'); + let $country_code = $input_part.querySelector('.country_code'); + let $input = $input_part.querySelector('input'); + + let country_data = { + full_name: el.dataset.name, + id: el.dataset.id, + country_code: el.dataset.country_code, + flag: el.dataset.flag, + } + + $flag.src = country_data.flag; + $country_code.innerHTML = country_data.country_code; + $input.value = country_data.full_name; + + $input.dataset.name = country_data.full_name; + $input.dataset.id = country_data.id; + + closeSelectCountry(el) +} + +function resetCountrySelect(el, callback) { + let $parent = el.closest('.w_select_country'); + if (!$parent) return; + + let $input_part = $parent.querySelector('.select_country_header_left_part'); + let $flag = $input_part.querySelector('.country_flag_img_container'); + let $country_code = $input_part.querySelector('.country_code'); + let $input = $input_part.querySelector('input'); + let $content_part = $parent.querySelector('.w_select_country_content'); + + $flag.removeAttribute('src') + $country_code.innerHTML = ''; + $input.dataset.name = ''; + $input.dataset.id = ''; + $content_part.innerHTML = ''; +} + +function openCountruSelectIfDataEnter(el, callback) { + let $parent = el.closest('.w_select_country'); + if (!$parent) return; + + let $content_part = $parent.querySelector('.w_select_country_content'); + if (!$content_part) return; + + if ($content_part.innerHTML.includes("div")) openSelectCountry(el) } \ No newline at end of file diff --git a/templates/pages/profile/p_user_profile.html b/templates/pages/profile/p_user_profile.html index d2d92d5..2ad7c8b 100644 --- a/templates/pages/profile/p_user_profile.html +++ b/templates/pages/profile/p_user_profile.html @@ -29,6 +29,8 @@ + + {% include "connect_ws_js.html" %} diff --git a/templates/v2/content_widgets/cw_w_select_w_for_select.html b/templates/v2/content_widgets/cw_w_select_w_for_select.html new file mode 100644 index 0000000..c69ae66 --- /dev/null +++ b/templates/v2/content_widgets/cw_w_select_w_for_select.html @@ -0,0 +1,10 @@ +{% load static %} +{% load i18n %} + +
+
+ +
{{ country__short_code }}
+
+
{{ country__name }}/{{ name }}
+
\ No newline at end of file diff --git a/templates/v2/widgets/w_select_country.html b/templates/v2/widgets/w_select_country.html index 4b23203..d52ae23 100644 --- a/templates/v2/widgets/w_select_country.html +++ b/templates/v2/widgets/w_select_country.html @@ -1,14 +1,14 @@ {% load static %} {% load i18n %} -
-
+
+
- +