0.0.2 form poster

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{
-        .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;
+        }
     }
 }

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({
-        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)
 }