From cf16193174d4b75d5235f8de5434ac6e6aeb8a12 Mon Sep 17 00:00:00 2001
From: Diatrex <diahshalabi@hotmail.com>
Date: Tue, 29 Sep 2020 10:47:15 +0300
Subject: [PATCH] #2126 Android ad post cat select bug

---
 .../resources/css/post-category.css           |  9 ++-
 .../advs-module/resources/js/cats.js          | 27 ++++----
 .../resources/views/new-ad/post-cat.twig      | 64 ++++---------------
 3 files changed, 33 insertions(+), 67 deletions(-)

diff --git a/addons/default/visiosoft/advs-module/resources/css/post-category.css b/addons/default/visiosoft/advs-module/resources/css/post-category.css
index 7fd003dbb..e3b8d8645 100644
--- a/addons/default/visiosoft/advs-module/resources/css/post-category.css
+++ b/addons/default/visiosoft/advs-module/resources/css/post-category.css
@@ -19,7 +19,7 @@
     height: 0;
     width: 100%;
     border: none;
-    overflow-y: auto
+    overflow-y: auto;
 }
 
 .cat-select:focus {
@@ -31,7 +31,7 @@
     width: 13rem;
 }
 
-.cat-select option {
+.cat-select li {
     cursor: pointer;
     border-radius: 2px;
     position: relative;
@@ -39,6 +39,11 @@
     color: #505050;
 }
 
+.cat-select li.selected {
+    background-color: #1E90FF;
+    color: #fff;
+}
+
 .cat-item-2 {
     display: none;
 }
diff --git a/addons/default/visiosoft/advs-module/resources/js/cats.js b/addons/default/visiosoft/advs-module/resources/js/cats.js
index ec9f6b1ef..5b12fb73e 100644
--- a/addons/default/visiosoft/advs-module/resources/js/cats.js
+++ b/addons/default/visiosoft/advs-module/resources/js/cats.js
@@ -46,7 +46,7 @@ $(document).ready(function () {
                     stop();
                 } else {
                     response.forEach(function(options){
-                        $(catId).append("<option class='text-truncate pl-1 my-1' value="+options.id+">"+options.name+"</option>");
+                        $(catId).append("<li class='text-truncate pl-1 my-1' data-value="+options.id+">"+options.name+"</li>");
                     });
                     $('.focus-select').removeClass('focus-select');
                     // $(catId).animate({height: '14rem'}, 200);
@@ -78,18 +78,15 @@ $(document).ready(function () {
         }
     };
 
-    for (var i = 1; i <= 10; i++) {
-        (function(){
-            var ii = i;
-            $('#cat' + i).on('change', function (i, e) {
-                let selectedOption = $(this).find('option:selected');
-                let divId = selectedOption.val();
-                if (divId == 0) {
-                    filter.hideCats(ii + 1);
-                }
-                filter.hideCats(ii + 1);
-                filter.getCats("#cat" + (ii + 1), divId);
-            });
-        })();
-    }
+    $('.cat-select').on('click', 'li', function () {
+        $(this).addClass('selected').siblings().removeClass('selected')
+        let divId = $(this).data('value');
+        let catSelectId = $(this).closest('.cat-select').attr('id')
+        catSelectId = catSelectId.substring(3)
+
+        $(`input[name=cat${catSelectId}]`).val(divId);
+
+        filter.hideCats(Number(catSelectId) + 1);
+        filter.getCats("#cat" + (Number(catSelectId) + 1), divId);
+    });
 });
diff --git a/addons/default/visiosoft/advs-module/resources/views/new-ad/post-cat.twig b/addons/default/visiosoft/advs-module/resources/views/new-ad/post-cat.twig
index 866f34d75..19550cb57 100644
--- a/addons/default/visiosoft/advs-module/resources/views/new-ad/post-cat.twig
+++ b/addons/default/visiosoft/advs-module/resources/views/new-ad/post-cat.twig
@@ -13,66 +13,30 @@
                 {{ trans('visiosoft.module.advs::field.select_category_step_by_step') }}
             </h5>
             <form action="{{ url_route('visiosoft.module.advs::post_cat') }}" method="post">
+                {% for i in 1..10 %}
+                    <input type="hidden" name="cat{{ i }}">
+                {% endfor %}
+
                 <div class="d-flex category-tab pb-3">
                     <div class="pr-2 cat-item mb-2 focus-select">
                         <div class="section cat-option select-category post-option card px-1">
-                            <select class="cat-select mt-2 pr-1" name="cat1" id="cat1" style="height: 14rem" multiple>
+                            <ul class="cat-select mx-0 mb-0 mt-2 py-0 pl-0 pr-1" name="cat1" id="cat1" style="height: 14rem" multiple>
                                 {% for cat in main_cats %}
-                                    <option class="text-truncate pl-1 my-1" value="{{ cat.id }}">
+                                    <li class="text-truncate pl-1 my-1" data-value="{{ cat.id }}">
                                         {{ cat.name }}
-                                    </option>
+                                    </li>
                                 {% endfor %}
-                            </select>
+                            </ul>
                         </div>
                     </div>
 
-                    <div class="pr-2 cat-item mb-2 cat-item-2">
-                        <div class="section cat-option select-category post-option card px-1">
-                            <select class="cat-select mt-2 pr-1" name="cat2" id="cat2" multiple></select>
+                    {% for i in 2..10 %}
+                        <div class="pr-2 cat-item mb-2 cat-item-2">
+                            <div class="section cat-option select-category post-option card px-1">
+                                <ul class="cat-select mx-0 mb-0 mt-2 py-0 pl-0 pr-1" name="cat{{ i }}" id="cat{{ i }}" multiple></ul>
+                            </div>
                         </div>
-                    </div>
-                    <div class="pr-2 cat-item mb-2 cat-item-2">
-                        <div class="section cat-option select-category post-option card px-1">
-                            <select class="cat-select mt-2 pr-1" name="cat3" id="cat3" multiple></select>
-                        </div>
-                    </div>
-                    <div class="pr-2 cat-item mb-2 cat-item-2">
-                        <div class="section cat-option select-category post-option card px-1">
-                            <select class="cat-select mt-2 pr-1" name="cat4" id="cat4" multiple></select>
-                        </div>
-                    </div>
-                    <div class="pr-2 cat-item mb-2 cat-item-2">
-                        <div class="section cat-option select-category post-option card px-1">
-                            <select class="cat-select mt-2 pr-1" name="cat5" id="cat5" multiple></select>
-                        </div>
-                    </div>
-                    <div class="pr-2 cat-item mb-2 cat-item-2">
-                        <div class="section cat-option select-category post-option card px-1">
-                            <select class="cat-select mt-2 pr-1" name="cat6" id="cat6" multiple>
-
-                            </select>
-                        </div>
-                    </div>
-                    <div class="pr-2 cat-item mb-2 cat-item-2">
-                        <div class="section cat-option select-category post-option card px-1">
-                            <select class="cat-select mt-2 pr-1" name="cat7" id="cat7" multiple></select>
-                        </div>
-                    </div>
-                    <div class="pr-2 cat-item mb-2 cat-item-2">
-                        <div class="section cat-option select-category post-option card px-1">
-                            <select class="cat-select mt-2 pr-1" name="cat8" id="cat8" multiple></select>
-                        </div>
-                    </div>
-                    <div class="pr-2 cat-item mb-2 cat-item-2">
-                        <div class="section cat-option select-category post-option card px-1">
-                            <select class="cat-select mt-2 pr-1" name="cat9" id="cat9" multiple></select>
-                        </div>
-                    </div>
-                    <div class="pr-2 cat-item mb-2 cat-item-2">
-                        <div class="section cat-option select-category post-option card px-1">
-                            <select class="cat-select mt-2 pr-1" name="cat10" id="cat10" multiple></select>
-                        </div>
-                    </div>
+                    {% endfor %}
 
                     <div class="cat-item mb-2 shadow-sm border rounded align-items-center">
                         <div class="cat-item-3">