base theme filter location for classified list page

addons/default/visiosoft/advs-module/resources/views/list/partials/list-filter.twig

@@ -6,7 +6,18 @@
             <div class="row">
                 <div id="filter" class="w-100 mb-3">
 
-                    {{ addBlock('ads-list/partials/list-filter',{'mainCats':mainCats,'subCats':subCats,'ranges':ranges,'checkboxes':checkboxes,'radio':radio})|raw }}
+                    {{ addBlock('ads-list/partials/list-filter',{
+                        'mainCats':mainCats,
+                        'subCats':subCats,
+                        'ranges':ranges,
+                        'checkboxes':checkboxes,
+                        'radio':radio,
+                        'countries':countries,
+                        'cities':cities,
+                        'districts':districts,
+                        'neighborhoods':neighborhoods,
+                        'villages':villages
+                    })|raw }}
 
                     <div class="card mb-3">
                         <div class="card-header breadcrumb mb-0" id="priceHeading">

addons/default/visiosoft/base-theme/resources/css/select2.css

@@ -0,0 +1,473 @@
+.select2-container {
+  box-sizing: border-box;
+  display: inline-block;
+  margin: 0;
+  position: relative;
+  vertical-align: middle; }
+  .select2-container .select2-selection--single {
+    box-sizing: border-box;
+    cursor: pointer;
+    display: block;
+    height: 28px;
+    user-select: none;
+    -webkit-user-select: none; }
+    .select2-container .select2-selection--single .select2-selection__rendered {
+      display: block;
+      padding-left: 8px;
+      padding-right: 20px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap; }
+    .select2-container .select2-selection--single .select2-selection__clear {
+      position: relative; }
+  .select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered {
+    padding-right: 8px;
+    padding-left: 20px; }
+  .select2-container .select2-selection--multiple {
+    box-sizing: border-box;
+    cursor: pointer;
+    display: block;
+    min-height: 32px;
+    user-select: none;
+    -webkit-user-select: none; }
+  .select2-container .select2-search--inline {
+    float: left; }
+    .select2-container .select2-search--inline .select2-search__field {
+      box-sizing: border-box;
+      border: none;
+      font-size: 100%;
+      margin-top: 5px;
+      padding: 0; }
+      .select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button {
+        -webkit-appearance: none; }
+
+.select2-dropdown {
+  background-color: white;
+  border: 1px solid #aaa;
+  border-radius: 4px;
+  box-sizing: border-box;
+  display: block;
+  position: absolute;
+  left: -100000px;
+  width: 100%;
+  z-index: 1051; }
+
+.select2-results {
+  display: block; }
+
+.select2-results__options {
+  list-style: none;
+  margin: 0;
+  padding: 0; }
+
+.select2-results__option {
+  padding: 6px;
+  user-select: none;
+  -webkit-user-select: none; }
+  .select2-results__option[aria-selected] {
+    cursor: pointer; }
+
+.select2-container--open .select2-dropdown {
+  left: 0; }
+
+.select2-container--open .select2-dropdown--above {
+  border-bottom: none;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0; }
+
+.select2-container--open .select2-dropdown--below {
+  border-top: none;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0; }
+
+.select2-search--dropdown {
+  display: block;
+  padding: 4px; }
+  .select2-search--dropdown .select2-search__field {
+    padding: 4px;
+    width: 100%;
+    box-sizing: border-box; }
+    .select2-search--dropdown .select2-search__field::-webkit-search-cancel-button {
+      -webkit-appearance: none; }
+  .select2-search--dropdown.select2-search--hide {
+    display: none; }
+
+.select2-close-mask {
+  border: 0;
+  margin: 0;
+  padding: 0;
+  display: block;
+  position: fixed;
+  left: 0;
+  top: 0;
+  min-height: 100%;
+  min-width: 100%;
+  height: auto;
+  width: auto;
+  opacity: 0;
+  z-index: 99;
+  background-color: #fff;
+  filter: alpha(opacity=0); }
+
+.select2-hidden-accessible {
+  border: 0 !important;
+  clip: rect(0 0 0 0) !important;
+  height: 1px !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  padding: 0 !important;
+  position: absolute !important;
+  width: 1px !important; }
+
+.select2-container--default .select2-selection--single {
+  background-color: #fff;
+  border: 1px solid #aaa;
+  border-radius: 4px; }
+  .select2-container--default .select2-selection--single .select2-selection__rendered {
+    color: #444;
+    line-height: 28px; }
+  .select2-container--default .select2-selection--single .select2-selection__clear {
+    cursor: pointer;
+    float: right;
+    font-weight: bold; }
+  .select2-container--default .select2-selection--single .select2-selection__placeholder {
+    color: #999; }
+  .select2-container--default .select2-selection--single .select2-selection__arrow {
+    height: 26px;
+    position: absolute;
+    top: 1px;
+    right: 1px;
+    width: 20px; }
+    .select2-container--default .select2-selection--single .select2-selection__arrow b {
+      border-color: #888 transparent transparent transparent;
+      border-style: solid;
+      border-width: 5px 4px 0 4px;
+      height: 0;
+      left: 50%;
+      margin-left: -4px;
+      margin-top: -2px;
+      position: absolute;
+      top: 50%;
+      width: 0; }
+
+.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__clear {
+  float: left; }
+
+.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__arrow {
+  left: 1px;
+  right: auto; }
+
+.select2-container--default.select2-container--disabled .select2-selection--single {
+  background-color: #eee;
+  cursor: default; }
+  .select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear {
+    display: none; }
+
+.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
+  border-color: transparent transparent #888 transparent;
+  border-width: 0 4px 5px 4px; }
+
+.select2-container--default .select2-selection--multiple {
+  background-color: white;
+  border: 1px solid #aaa;
+  border-radius: 4px;
+  cursor: text; }
+
+    .select2-container--default .select2-selection--multiple .select2-selection__rendered li {
+      list-style: none; }
+  .select2-container--default .select2-selection--multiple .select2-selection__placeholder {
+    color: #999;
+    margin-top: 5px;
+    float: left; }
+  .select2-container--default .select2-selection--multiple .select2-selection__clear {
+    cursor: pointer;
+    float: right;
+    font-weight: bold;
+    margin-top: 5px;
+    margin-right: 10px; }
+  .select2-container--default .select2-selection--multiple .select2-selection__choice {
+    background-color: #e4e4e4;
+    border: 1px solid #aaa;
+    border-radius: 4px;
+    cursor: default;
+    float: left;
+    margin-right: 5px;
+    margin-top: 5px;
+    padding: 0 5px; }
+  .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
+    color: #999;
+    cursor: pointer;
+    display: inline-block;
+    font-weight: bold;
+    margin-right: 2px; }
+    .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
+      color: #333; }
+
+.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice, .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__placeholder, .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-search--inline {
+  float: right; }
+
+.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice {
+  margin-left: 5px;
+  margin-right: auto; }
+
+.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove {
+  margin-left: 2px;
+  margin-right: auto; }
+
+.select2-container--default.select2-container--focus .select2-selection--multiple {
+  border: solid black 1px;
+  outline: 0; }
+
+.select2-container--default.select2-container--disabled .select2-selection--multiple {
+  background-color: #eee;
+  cursor: default; }
+
+.select2-container--default.select2-container--disabled .select2-selection__choice__remove {
+  display: none; }
+
+.select2-container--default.select2-container--open.select2-container--above .select2-selection--single, .select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0; }
+
+.select2-container--default.select2-container--open.select2-container--below .select2-selection--single, .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0; }
+
+.select2-container--default .select2-search--dropdown .select2-search__field {
+  border: 1px solid #aaa; }
+
+.select2-container--default .select2-search--inline .select2-search__field {
+  background: transparent;
+  border: none;
+  outline: 0;
+  box-shadow: none;
+  -webkit-appearance: textfield; }
+
+.select2-container--default .select2-results > .select2-results__options {
+  max-height: 200px;
+  overflow-y: auto; }
+
+.select2-container--default .select2-results__option[role=group] {
+  padding: 0; }
+
+.select2-container--default .select2-results__option[aria-disabled=true] {
+  color: #999; }
+
+.select2-container--default .select2-results__option[aria-selected=true] {
+  background-color: #ddd; }
+
+.select2-container--default .select2-results__option .select2-results__option {
+  padding-left: 1em; }
+  .select2-container--default .select2-results__option .select2-results__option .select2-results__group {
+    padding-left: 0; }
+  .select2-container--default .select2-results__option .select2-results__option .select2-results__option {
+    margin-left: -1em;
+    padding-left: 2em; }
+    .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
+      margin-left: -2em;
+      padding-left: 3em; }
+      .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
+        margin-left: -3em;
+        padding-left: 4em; }
+        .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
+          margin-left: -4em;
+          padding-left: 5em; }
+          .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
+            margin-left: -5em;
+            padding-left: 6em; }
+
+.select2-container--default .select2-results__option--highlighted[aria-selected] {
+  background-color: #5897fb;
+  color: white; }
+
+.select2-container--default .select2-results__group {
+  cursor: default;
+  display: block;
+  padding: 6px; }
+
+.select2-container--classic .select2-selection--single {
+  background-color: #f7f7f7;
+  border: 1px solid #aaa;
+  border-radius: 4px;
+  outline: 0;
+  background-image: -webkit-linear-gradient(top, white 50%, #eeeeee 100%);
+  background-image: -o-linear-gradient(top, white 50%, #eeeeee 100%);
+  background-image: linear-gradient(to bottom, white 50%, #eeeeee 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0); }
+  .select2-container--classic .select2-selection--single:focus {
+    border: 1px solid #5897fb; }
+  .select2-container--classic .select2-selection--single .select2-selection__rendered {
+    color: #444;
+    line-height: 28px; }
+  .select2-container--classic .select2-selection--single .select2-selection__clear {
+    cursor: pointer;
+    float: right;
+    font-weight: bold;
+    margin-right: 10px; }
+  .select2-container--classic .select2-selection--single .select2-selection__placeholder {
+    color: #999; }
+  .select2-container--classic .select2-selection--single .select2-selection__arrow {
+    background-color: #ddd;
+    border: none;
+    border-left: 1px solid #aaa;
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+    height: 26px;
+    position: absolute;
+    top: 1px;
+    right: 1px;
+    width: 20px;
+    background-image: -webkit-linear-gradient(top, #eeeeee 50%, #cccccc 100%);
+    background-image: -o-linear-gradient(top, #eeeeee 50%, #cccccc 100%);
+    background-image: linear-gradient(to bottom, #eeeeee 50%, #cccccc 100%);
+    background-repeat: repeat-x;
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFCCCCCC', GradientType=0); }
+    .select2-container--classic .select2-selection--single .select2-selection__arrow b {
+      border-color: #888 transparent transparent transparent;
+      border-style: solid;
+      border-width: 5px 4px 0 4px;
+      height: 0;
+      left: 50%;
+      margin-left: -4px;
+      margin-top: -2px;
+      position: absolute;
+      top: 50%;
+      width: 0; }
+
+.select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__clear {
+  float: left; }
+
+.select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__arrow {
+  border: none;
+  border-right: 1px solid #aaa;
+  border-radius: 0;
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+  left: 1px;
+  right: auto; }
+
+.select2-container--classic.select2-container--open .select2-selection--single {
+  border: 1px solid #5897fb; }
+  .select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow {
+    background: transparent;
+    border: none; }
+    .select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow b {
+      border-color: transparent transparent #888 transparent;
+      border-width: 0 4px 5px 4px; }
+
+.select2-container--classic.select2-container--open.select2-container--above .select2-selection--single {
+  border-top: none;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  background-image: -webkit-linear-gradient(top, white 0%, #eeeeee 50%);
+  background-image: -o-linear-gradient(top, white 0%, #eeeeee 50%);
+  background-image: linear-gradient(to bottom, white 0%, #eeeeee 50%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0); }
+
+.select2-container--classic.select2-container--open.select2-container--below .select2-selection--single {
+  border-bottom: none;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  background-image: -webkit-linear-gradient(top, #eeeeee 50%, white 100%);
+  background-image: -o-linear-gradient(top, #eeeeee 50%, white 100%);
+  background-image: linear-gradient(to bottom, #eeeeee 50%, white 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFFFFFFF', GradientType=0); }
+
+.select2-container--classic .select2-selection--multiple {
+  background-color: white;
+  border: 1px solid #aaa;
+  border-radius: 4px;
+  cursor: text;
+  outline: 0; }
+  .select2-container--classic .select2-selection--multiple:focus {
+    border: 1px solid #5897fb; }
+  .select2-container--classic .select2-selection--multiple .select2-selection__rendered {
+    list-style: none;
+    margin: 0;
+    padding: 0 5px; }
+  .select2-container--classic .select2-selection--multiple .select2-selection__clear {
+    display: none; }
+  .select2-container--classic .select2-selection--multiple .select2-selection__choice {
+    background-color: #e4e4e4;
+    border: 1px solid #aaa;
+    border-radius: 4px;
+    cursor: default;
+    float: left;
+    margin-right: 5px;
+    margin-top: 5px;
+    padding: 0 5px; }
+  .select2-container--classic .select2-selection--multiple .select2-selection__choice__remove {
+    color: #888;
+    cursor: pointer;
+    display: inline-block;
+    font-weight: bold;
+    margin-right: 2px; }
+    .select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover {
+      color: #555; }
+
+.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice {
+  float: right; }
+
+.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice {
+  margin-left: 5px;
+  margin-right: auto; }
+
+.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove {
+  margin-left: 2px;
+  margin-right: auto; }
+
+.select2-container--classic.select2-container--open .select2-selection--multiple {
+  border: 1px solid #5897fb; }
+
+.select2-container--classic.select2-container--open.select2-container--above .select2-selection--multiple {
+  border-top: none;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0; }
+
+.select2-container--classic.select2-container--open.select2-container--below .select2-selection--multiple {
+  border-bottom: none;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0; }
+
+.select2-container--classic .select2-search--dropdown .select2-search__field {
+  border: 1px solid #aaa;
+  outline: 0; }
+
+.select2-container--classic .select2-search--inline .select2-search__field {
+  outline: 0;
+  box-shadow: none; }
+
+.select2-container--classic .select2-dropdown {
+  background-color: white;
+  border: 1px solid transparent; }
+
+.select2-container--classic .select2-dropdown--above {
+  border-bottom: none; }
+
+.select2-container--classic .select2-dropdown--below {
+  border-top: none; }
+
+.select2-container--classic .select2-results > .select2-results__options {
+  max-height: 200px;
+  overflow-y: auto; }
+
+.select2-container--classic .select2-results__option[role=group] {
+  padding: 0; }
+
+.select2-container--classic .select2-results__option[aria-disabled=true] {
+  color: grey; }
+
+.select2-container--classic .select2-results__option--highlighted[aria-selected] {
+  background-color: #3875d7;
+  color: white; }
+
+.select2-container--classic .select2-results__group {
+  cursor: default;
+  display: block;
+  padding: 6px; }
+
+.select2-container--classic.select2-container--open .select2-dropdown {
+  border-color: #5897fb; }

addons/default/visiosoft/base-theme/resources/css/theme.css

@@ -3,4 +3,9 @@
 }
 .hidden{
     display: none;
+}
+
+.select2-selection__rendered {
+    display: inline-block;
+    padding-left: 4px;
 }

addons/default/visiosoft/base-theme/resources/js/params.js

@@ -0,0 +1,24 @@
+function getQueryParams(qs) {
+    qs = qs.split("+").join(" ");
+
+    var params = [], tokens,
+        re = /[?&]?([^=]+)=([^&]*)/g;
+
+    while (tokens = re.exec(qs)) {
+        params.push({k: decodeURIComponent(tokens[1]), v: decodeURIComponent(tokens[2])});
+    }
+
+    return params;
+}
+
+function findParam(fp) {
+    var request = getQueryParams(document.location.search);
+    request = request.filter(function (item) {
+        return item.k === fp;
+    });
+    var res = [];
+    $.each(request, function (index, value) {
+        res[index] = value.v;
+    });
+    return res;
+}

addons/default/visiosoft/base-theme/resources/views/partials/assets.twig

@@ -6,6 +6,8 @@
 {{ asset_add("theme.js", "theme::js/popper.min.js") }}
 {{ asset_add("theme.js", "theme::js/bootstrap.min.js") }}
 {{ asset_add("theme.js", "theme::js/modal_include.js") }}
+{{ asset_add("theme.js", "theme::js/select2.js") }}
+{{ asset_add("theme.js", "theme::js/params.js") }}
 
 {# Theme Scripts #}
 {#{{ asset_add("theme.js", "theme::js/plugins/*") }}#}

addons/default/visiosoft/base-theme/resources/views/partials/metadata.twig

@@ -34,6 +34,7 @@
 {# Base Theme Components #}
 {{ asset_add("theme.css", "theme::css/bootstrap.min.css") }}
 {{ asset_add("theme.css", "theme::css/theme.css") }}
+{{ asset_add("theme.css", "theme::css/select2.css") }}
 {{ asset_add("theme.css", "theme::css/font-awesome.min.css") }}
 <script src="{{ asset_path('theme::js/vendor/jquery.min.js') }}"></script>
 

addons/default/visiosoft/location-module/resources/js/filterLocation.js

@@ -0,0 +1,155 @@
+let searchParams = new URLSearchParams(window.location.search);
+
+//Set Select2 Type for Location Fields
+$('#cities, #countries, #districts, #neighborhoods, #village').select2({
+    placeholder: select_trans
+});
+
+
+FindLocations = (id, table, typeDb, divId, paramName = null) => {
+    $.ajax({
+        type: 'get',
+        url: '/getlocations',
+        data: {
+            id: id,
+            table: table,
+            typeDb: typeDb,
+        },
+        success: function (response) {
+            setLocations(response, id, table, typeDb, divId, paramName);
+            return response;
+        },
+        error: function (err) {
+            reject(Error("It broke"));
+        }
+    });
+};
+
+
+setLocations = (response, id, table, typeDb, divId, paramName) => {
+
+    //Add Options
+    if(divId != "#cities")
+    {
+        $(divId).append("<option value></option>")
+    }
+    response.forEach(function (options) {
+        $(divId).append("<option value=" + options.id + ">" + options.name + "</option>")
+    });
+
+    //Set Selected Option
+    if (paramName != null) {
+        if (divId == "#cities") {
+            $('#countries').val(searchParams.get('country'));
+            $('#countries').select2();
+            $('#cities').val(findParam("city[]"));
+        } else {
+            $(divId).val(searchParams.get(paramName));
+        }
+        $(divId).select2();
+    }
+
+};
+
+//Category Change
+$('#countries').on('change', function () {
+    $('#cities').empty();
+    var table = "cities";
+    var typeDb = 'parent_country_id';
+    var id = $('#countries').val();
+    var divId = "#cities";
+
+    FindLocations(id, table, typeDb, divId);
+});
+
+//City Change
+$('#cities, .select2-selection__choice__remove').on('change', function () {
+    $('#districts').empty();
+    var table = "districts";
+    var typeDb = 'parent_city_id';
+    var id = $('#cities').val();
+    var divId = "#districts";
+
+    FindLocations(id, table, typeDb, divId);
+});
+
+//Districts Change
+$('#districts').on('change', function () {
+    var table = "neighborhoods";
+    var typeDb = 'parent_district_id';
+    var id = $('#districts').val();
+    var divId = "#neighborhoods";
+
+    FindLocations(id, table, typeDb, divId);
+});
+
+//Neighborhoods Change
+$('#neighborhoods').on('change', function () {
+    var table = "village";
+    var typeDb = 'parent_neighborhood_id';
+    var id = $('#neighborhoods').val();
+    var divId = "#village";
+
+    FindLocations(id, table, typeDb, divId);
+});
+
+
+jQuery(document).ready(function ($) {
+
+}).promise().done(function () {
+
+    //Get City && Set Country
+    if (searchParams.get('country') != '') {
+        $('#cities').empty();
+        var table = "cities";
+        var typeDb = 'parent_country_id';
+        var id = searchParams.get('country');
+        var divId = "#cities";
+        var paramName = 'city';
+
+        FindLocations(id, table, typeDb, divId, paramName);
+    }
+
+}).promise().done(function () {
+
+    //get District  && set city
+    if (findParam('city[]').length) {
+        $('#districts').empty();
+        var table = "districts";
+        var typeDb = 'parent_city_id';
+        var id = findParam('city[]');
+        var divId = "#districts";
+        var paramName = 'district';
+
+        FindLocations(id, table, typeDb, divId, paramName);
+    }
+
+}).promise().done(function () {
+
+    //get neighborhood  && set districts
+    if (searchParams.get('district') != '') {
+        $('#neighborhoods').empty();
+        var table = "neighborhoods";
+        var typeDb = 'parent_district_id';
+        var id = searchParams.get('district');
+        var divId = "#neighborhoods";
+        var paramName = 'neighborhood';
+
+        FindLocations(id, table, typeDb, divId, paramName);
+    }
+
+}).promise().done(function () {
+
+    //get village  && set neighborhoods
+    if (searchParams.get('neighborhood') != '') {
+        $('#village').empty();
+        var table = "village";
+        var typeDb = 'parent_neighborhood_id';
+        var id = searchParams.get('neighborhood');
+        var divId = "#village";
+        var paramName = 'village';
+
+        FindLocations(id, table, typeDb, divId, paramName);
+    }
+
+});

addons/default/visiosoft/location-module/resources/views/ads-list/partials/list-filter.twig

@@ -0,0 +1,60 @@
+<div class="card mb-3">
+    <div class="card-header breadcrumb mb-0" id="categoryHeading">
+        <h5 class="mb-0">
+            <button class="btn btn-link text-dark" data-toggle="collapse" data-target="#category"
+                    aria-expanded="true" aria-controls="category">
+                <i class="fas fa-location-arrow"></i>
+                {{ trans("visiosoft.module.location::addon.title") }}
+            </button>
+        </h5>
+    </div>
+    <div id="category" class="collapse show overflow-auto" aria-labelledby="categoryHeading"
+         data-parent="#filter">
+        <div class="row w-100 px-2 m-0">
+                <div class="col-12 px-0 py-1">
+                    <label class="label-filter-location">{{ trans("visiosoft.module.location::field.country.name") }}</label>
+                    <select class="form-control" name="country" id="countries">
+                        {% for country in params.countries %}
+                            <option value="{{ country.id }}">{{ country.name }}</option>
+                        {% endfor %}
+                    </select>
+                </div>
+                <div class="col-12 px-0 py-1">
+                    <label class="label-filter-location">{{ trans("visiosoft.module.location::field.city.name") }}</label>
+                    <select class="form-control" name="city[]" id="cities" multiple>
+                        {% for city in params.cities %}
+                            <option value="{{ city.id }}">{{ city.name }}</option>
+                        {% endfor %}
+                    </select>
+                </div>
+                <div class="col-12 px-0 py-1">
+                    <label class="label-filter-location">{{ trans("visiosoft.module.location::field.district.name") }}</label>
+                    <select class="form-control" name="district" id="districts">
+                        {% for district in params.districts %}
+                            <option value="{{ district.id }}">{{ district.name }}</option>
+                        {% endfor %}
+                    </select>
+                </div>
+                <div class="col-12 px-0 py-1">
+                    <label class="label-filter-location">{{ trans("visiosoft.module.location::field.neighborhood.name") }}</label>
+                    <select class="form-control" name="neighborhood" id="neighborhoods">
+                        {% for neighborhood in params.neighborhoods %}
+                            <option value="{{ neighborhood.id }}">{{ neighborhood.name }}</option>
+                        {% endfor %}
+                    </select>
+                </div>
+                <div class="col-12 px-0 py-1">
+                    <label class="label-filter-location">{{ trans("visiosoft.module.location::field.village.name") }}</label>
+                    <select class="form-control" name="village" id="village">
+                        {% for village in params.villages %}
+                            <option value="{{ village.id }}">{{ village.name }}</option>
+                        {% endfor %}
+                    </select>
+                </div>
+        </div>
+    </div>
+</div>
+<script>
+    var select_trans = "{{ trans('visiosoft.module.advs::field.pick_option') }}";
+</script>
+{{ asset_add("scripts.js", "visiosoft.module.location::js/filterLocation.js") }}

addons/default/visiosoft/location-module/resources/views/list/filter.twig

@@ -1,61 +0,0 @@
-{% if setting_value('visiosoft.module.location::list_page_location') %}
-    <div class="panel-default panel-faq">
-        <div class="panel-heading active-faq">
-            <a data-toggle="collapse" data-parent="#accordion" href="#accordion-location">
-                <h4 class="panel-title">{{ trans("visiosoft.module.advs::field.location") }}
-                    <span class="pull-right">
-                        <i class="fa fa-minus"></i>
-                    </span>
-                </h4>
-            </a>
-        </div>
-
-        <div id="accordion-location" class="panel-collapse collapse in">
-            <div class="panel-body">
-                <ul id="list-items" class="filter-list-items">
-                    <li>
-                        <label class="label-filter-location">{{ trans("visiosoft.module.location::field.country.name") }}</label>
-                        <select class="form-control" name="country" id="countries">
-                            {% for country in countries %}
-                                <option value="{{ country.id }}">{{ country.name }}</option>
-                            {% endfor %}
-                        </select>
-                    </li>
-                    <li>
-                        <label class="label-filter-location">{{ trans("visiosoft.module.location::field.city.name") }}</label>
-                        <select class="form-control" name="city[]" id="cities" multiple>
-                            {% for city in cities %}
-                                <option value="{{ city.id }}">{{ city.name }}</option>
-                            {% endfor %}
-                        </select>
-                    </li>
-                    <li>
-                        <label class="label-filter-location">{{ trans("visiosoft.module.location::field.district.name") }}</label>
-                        <select class="form-control" name="district" id="districts">
-                            {% for district in districts %}
-                                <option value="{{ district.id }}">{{ district.name }}</option>
-                            {% endfor %}
-                        </select>
-                    </li>
-                    <li>
-                        <label class="label-filter-location">{{ trans("visiosoft.module.location::field.neighborhood.name") }}</label>
-                        <select class="form-control" name="neighborhood" id="neighborhoods">
-                            {% for neighborhood in neighborhoods %}
-                                <option value="{{ neighborhood.id }}">{{ neighborhood.name }}</option>
-                            {% endfor %}
-                        </select>
-                    </li>
-                    <li>
-                        <label class="label-filter-location">{{ trans("visiosoft.module.location::field.village.name") }}</label>
-                        <select class="form-control" name="village" id="village">
-                            {% for village in villages %}
-                                <option value="{{ village.id }}">{{ village.name }}</option>
-                            {% endfor %}
-                        </select>
-                    </li>
-                </ul>
-            </div>
-        </div>
-    </div>
-{% endif %}
-{{ asset_add("scripts.js", "visiosoft.theme.base::js/filterLocation.js") }}