0.0.2 form poster

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 = []

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);

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{
+    .cw_w_select_widget_for_select{
-        .w_select_country_content{display: none}
+        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;
+        }
     }
 }

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);
     }

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({
+    resetCountrySelect(el)
-        url: '',
+    closeSelectCountry(el)
-        data: '',
+    if (!el || el.value.length < 3) return;
-        data_type: 'formData',
+
-        success: function (data) {
+    let $parent = el.closest('.w_select_country');
-        }, error: function (data) {
+    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
         }
-    });
+        let request = new api({
-    request.ajaxRequest()
+            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)
 }

templates/pages/profile/p_user_profile.html

@@ -29,6 +29,8 @@
 
             <link rel="stylesheet" href="{% static 'css/ion.rangeSlider.min.css'     %}">
             <script src='{% static "js/user_profile_2.js" %}'> </script>
+
+            <script src='{% static "v2/js/widgets/w_select_country.js" %}'></script>
             {% include "connect_ws_js.html" %}
 
 

templates/v2/content_widgets/cw_w_select_w_for_select.html

@@ -0,0 +1,10 @@
+{% load static %}
+{% load i18n %}
+
+<div class="cw_w_select_widget_for_select" data-id="{{ id }}" data-name="{{ country__name }}/{{ name }}" data-country_code="{{ country__short_code }}" data-flag="{{ MEDIA_URL }}{{ country__flag }}" onclick="selectCountry(this)">
+    <div class="cw_country_inf_part">
+        <img src="{{ MEDIA_URL }}{{ country__flag }}" alt="">
+        <div class="cw_country_code">{{ country__short_code }}</div>
+    </div>
+    <div class="cw_name_country">{{ country__name }}/{{ name }}</div>
+</div>

templates/v2/widgets/w_select_country.html

@@ -1,14 +1,14 @@
 {% load static %}
 {% load i18n %}
 
-<div class="w_select_country">
+<div class="w_select_country closed">
-    <div class="w_select_country_header">
+    <div class="w_select_country_header" onclick="openCountruSelectIfDataEnter(this)">
         <div class="select_country_header_left_part">
             <div class="container_inf_about_country">
                 <img class="country_flag_img_container">
                 <div class="country_code"></div>
             </div>
-            <input type="text" name="{{ name }}" id="id_{{ name }}" placeholder="{{ placeholder }}" data-value="" data-id="">
+            <input type="text" name="{{ name }}" id="id_{{ name }}" placeholder="{{ placeholder }}" oninput="searchCountry(this)" data-value="" data-id="">
         </div>
         <img class="w_select_country_icon" src="{% static "v2/icons/widgets/w_select_country/pin.svg" %}" alt="">
     </div>