From edba0f4fba8c848f33a2c0b2e9b2de657b6e40d2 Mon Sep 17 00:00:00 2001
From: Diatrex <diahshalabi@hotmail.com>
Date: Mon, 16 Mar 2020 11:54:20 +0300
Subject: [PATCH] #1034 Move mobile filter from sahibinden theme to base theme

---
 .../advs-module/resources/css/list.css        |  62 +++++++++
 .../advs-module/resources/js/filter_modal.js  | 131 ++++++++++++++++++
 .../advs-module/resources/js/list.js          |   3 +
 .../advs-module/resources/js/sort_modal.js    |   3 +
 .../advs-module/resources/lang/en/button.php  |   3 +
 .../advs-module/resources/lang/en/field.php   |   3 +
 .../resources/views/list/list.twig            |  19 ++-
 .../views/list/partials/display-mode.twig     |   4 +-
 .../views/list/partials/filter-modal.twig     |  73 ++++++++++
 .../views/list/partials/list-filter.twig      |   2 +-
 .../views/list/partials/sort-modal.twig       |  34 +++++
 .../views/ads-list/partials/list-filter.twig  |   2 +-
 12 files changed, 333 insertions(+), 6 deletions(-)
 create mode 100644 addons/default/visiosoft/advs-module/resources/js/filter_modal.js
 create mode 100644 addons/default/visiosoft/advs-module/resources/js/sort_modal.js
 create mode 100644 addons/default/visiosoft/advs-module/resources/views/list/partials/filter-modal.twig
 create mode 100644 addons/default/visiosoft/advs-module/resources/views/list/partials/sort-modal.twig

diff --git a/addons/default/visiosoft/advs-module/resources/css/list.css b/addons/default/visiosoft/advs-module/resources/css/list.css
index 84755030b..a62c171b2 100644
--- a/addons/default/visiosoft/advs-module/resources/css/list.css
+++ b/addons/default/visiosoft/advs-module/resources/css/list.css
@@ -43,4 +43,66 @@
 .table-classified .td-country,
 .table-classified .td-subject {
     min-width: 200px;
+}
+
+/* Mobile filter */
+.mobile-list-action {
+    margin-left: -30px;
+    margin-right: -30px;
+    border: 1px solid #dee2e68a;
+}
+
+.mobile-list-action a {
+    font-size: 11px;
+    line-height: 22px;
+    text-align: center;
+    margin-top: -5px;
+    display: block;
+    color: #022543;
+}
+
+.mobile-list-action a:hover,
+.mobile-list-action a:hover {
+    text-decoration: none;
+}
+
+.mobile-list-action a:after {
+    position: absolute;
+    width: 1px;
+    height: 33px;
+    top: 0;
+    right: 0;
+    content: '';
+    background: #c9c9c9;
+}
+
+.mobile-list-action i {
+    font-size: 19px;
+    color: #a1a1a1;
+}
+
+.mobile-list-action div {
+    margin-top: 6px;
+}
+
+.edit-category-filter-modal {
+    top: 7px;
+    right: 14px;
+}
+
+.edit-category-filter-modal a {
+    text-decoration: none;
+}
+
+#categoryModal {
+    background-color: rgba(0, 0, 0, 0.8);
+}
+
+.category-select-mobile span {
+    right: 10px;
+    top: 6px;
+}
+
+#filterModal {
+    overflow-y: auto;
 }
\ No newline at end of file
diff --git a/addons/default/visiosoft/advs-module/resources/js/filter_modal.js b/addons/default/visiosoft/advs-module/resources/js/filter_modal.js
new file mode 100644
index 000000000..09918cc94
--- /dev/null
+++ b/addons/default/visiosoft/advs-module/resources/js/filter_modal.js
@@ -0,0 +1,131 @@
+$('#filter_modal_btn').on('click', function () {
+    $('#filterModal').modal('toggle');
+})
+
+$('.edit-category-filter-modal').on('click', function () {
+    $('#filterModal').modal('hide');
+    $('#categoryModal').modal('toggle');
+})
+
+
+function crud(params, url, type, callback) {
+    $.ajax({
+        type: type,
+        async: false,
+        data: params,
+        url: url,
+        success: function (response) {
+            callback(response);
+        },
+    });
+}
+
+var level = 0;
+var id_list = categories;
+var selected;
+var selected_cat;
+var all_categories = {};
+var promiseForCategory = new Promise(function (resolve) {
+    if (categories.length != 0) {
+        $.each(categories, function (index, value) {
+            crud({
+                'level': level,
+                "cat": categories['cat' + level]
+            }, '/class/ajaxCategory', 'POST', function (callback) {
+                all_categories['cat' + (level + 1)] = callback;
+            })
+            level++;
+        });
+    } else {
+        crud({'level': level, "cat": ""}, '/class/ajaxCategory', 'POST', function (callback) {
+            all_categories['cat' + (level + 1)] = callback;
+        })
+        level++;
+    }
+    resolve(all_categories);
+});
+
+promiseForCategory.then(function (categories_list) {
+    level = 0;
+    $.each(categories_list, function (index, value) {
+        level++;
+        $('.category-row').append(CategoryField(index, level));
+        $.each(value, function (index2, value2) {
+            selected = "";
+            if (id_list[index] == value2.id) {
+                selected = "selected";
+                selected_cat = value2.id;
+            }
+            $('.' + index).append("<option value='" + value2.id + "'" + selected + ">" + value2.name + "</option>");
+        });
+    });
+})
+
+
+function CategoryField(name, level) {
+    return '<div class="col-12 px-0 py-1 category-select-mobile category-box" data-level="' + level + '">\n' +
+        '</span>\n<select data-level="' + level + '" class="form-control cat-select ' + name + '">\n' +
+        '<option> ...</option>' +
+        '</select>\n</div>';
+}
+
+
+$(document).ready(function () {
+
+    $(".cat-select").on('change', function (e) {
+        if (Object.keys($(this).val()).length > 1) {
+            $('option[value="' + $(this).val().toString().split(',')[1] + '"]').prop('selected', false);
+        }
+    });
+    selectedValue()
+});
+
+
+function selectedValue() {
+    return $('.cat-select').on('change', function () {
+        var value = $(this).val();
+        $('.set_category').attr("data-selected", value);
+        $('input[name="cat"]').val(value)
+        var all_category_box = $('.category-row').find('.category-box');
+        var level = parseInt($(this).attr('data-level')) + 1;
+
+        //Remove right select fields
+        for (var i = level - 1; i <= all_category_box.length - 1; i++) {
+            all_category_box[i].remove();
+        }
+
+
+        crud({"cat": value, 'level': level}, '/class/ajaxCategory', 'POST', function (callback) {
+            if (callback.length > 0) {
+                $('.category-row').append(CategoryField('cat' + level, level));
+                $.each(callback, function (index, value) {
+                    $('.cat' + level).append("<option value='" + value.id + "'>" + value.name + "</option>");
+                });
+            }
+            selectedValue().unbind()
+            editCategorySpan()
+            return selectedValue();
+        })
+    })
+}
+
+
+function editCategorySpan() {
+    $('.selected-category-name').html("")
+    $.each($('.category-row').find('.category-select-mobile'), function (index, value) {
+        var selected_name = $(this).find('.cat-select').find(':selected');
+        $('.selected-category-name').append(selected_name.html() + ',');
+    });
+}
+
+$('.set_category').on('click', function () {
+
+    $('#categoryModal').modal('hide');
+
+    $('#filterModal').find('form').attr("action", '/advs/list');
+    $('#filterModal').modal('toggle');
+})
+
+
+
+
diff --git a/addons/default/visiosoft/advs-module/resources/js/list.js b/addons/default/visiosoft/advs-module/resources/js/list.js
index 7df92d54b..bdba47f1b 100644
--- a/addons/default/visiosoft/advs-module/resources/js/list.js
+++ b/addons/default/visiosoft/advs-module/resources/js/list.js
@@ -24,6 +24,9 @@ $('.sort-by-item').on('click', function () {
     let searchParams = new URLSearchParams(window.location.search);
     var sort_by = searchParams.get('sort_by');
     var url = window.location.href;
+    if (url.slice(-1) === "#") {
+        url = url.slice(0, -1);
+    }
     var goURL = "";
     var value = $(this).attr('data-value');
     if (window.location.search == "") {
diff --git a/addons/default/visiosoft/advs-module/resources/js/sort_modal.js b/addons/default/visiosoft/advs-module/resources/js/sort_modal.js
new file mode 100644
index 000000000..08459eb4f
--- /dev/null
+++ b/addons/default/visiosoft/advs-module/resources/js/sort_modal.js
@@ -0,0 +1,3 @@
+$('#sort_modal_btn').on('click', function () {
+    $('#sortModal').modal('toggle');
+})
\ No newline at end of file
diff --git a/addons/default/visiosoft/advs-module/resources/lang/en/button.php b/addons/default/visiosoft/advs-module/resources/lang/en/button.php
index e0b9fc5b2..4779817a1 100644
--- a/addons/default/visiosoft/advs-module/resources/lang/en/button.php
+++ b/addons/default/visiosoft/advs-module/resources/lang/en/button.php
@@ -8,10 +8,12 @@ return [
     'new_district' => 'New District',
     'new_neighborhood' => 'New Neighborhood',
     'new_village' => 'New Village',
+    'edit' => "Edit",
     'approve' => "Approve",
     'decline' => 'Decline',
     'extend' => 'Extend',
     'extend_all' => 'Extend All',
+    'categories' => 'Categories',
     'sub_category' => 'Sub Categories',
     'add_sub_category' => 'Add Sub Category',
     'sub_cities' => 'Sub Cities',
@@ -23,6 +25,7 @@ return [
     'sub_neighborhoods' => 'Sub Neighborhoods',
     'sub_village' => 'Sub Village',
     'general_settings' => 'General Settings',
+    'save_category' => 'Save Category',
     'update_category' => [
         'name' => 'Update Category'
     ],
diff --git a/addons/default/visiosoft/advs-module/resources/lang/en/field.php b/addons/default/visiosoft/advs-module/resources/lang/en/field.php
index f3902def4..08aa17502 100644
--- a/addons/default/visiosoft/advs-module/resources/lang/en/field.php
+++ b/addons/default/visiosoft/advs-module/resources/lang/en/field.php
@@ -123,6 +123,8 @@ return [
     'list-page' => 'List Page',
     'search' => 'Search',
     'recommended' => 'Recommended Ads for You',
+    'filter' => 'Filter',
+    'sort' => 'Sort',
     'sort_by' => 'Sort By',
     'pick_option' => 'Pick an option',
     'pick_ordering' => 'Ordering',
@@ -233,6 +235,7 @@ return [
         'name' => 'Sold out',
     ],
     'edit_category' => 'Edit Category',
+    'set_category' => 'Set Category',
     'max' => [
         'name' => 'Max',
     ],
diff --git a/addons/default/visiosoft/advs-module/resources/views/list/list.twig b/addons/default/visiosoft/advs-module/resources/views/list/list.twig
index 5127fa472..64cba7de3 100644
--- a/addons/default/visiosoft/advs-module/resources/views/list/list.twig
+++ b/addons/default/visiosoft/advs-module/resources/views/list/list.twig
@@ -10,7 +10,7 @@
             <!-- breadcrumb -->
 
             <div class="row my-3">
-                <div class="col-md-3">
+                <div class="col-md-3 d-none d-sm-block filter-section">
                     {% include "visiosoft.module.advs::list/partials/list-filter" %}
                 </div>
                 <div class="col-md-9">
@@ -18,13 +18,24 @@
 
                         <div class="row breadcrumb list-header">
 
-                            <div class="col-md-6 my-2">
+                            <div class="col-md-6 my-2 d-none d-sm-block">
                                 {% include "visiosoft.module.advs::list/partials/list-sort-by" %}
                             </div>
                             <div class="col-md-6 my-2">
                                 {% include "visiosoft.module.advs::list/partials/display-mode" %}
                             </div>
                         </div>
+                        <div class="my-2 p-0 bg-light d-flex d-sm-none mobile-list-action row text-center align-items-center">
+                            <div class="col-4" id="filter_modal_btn">
+                                <i class="fas fa-filter w-100"></i>
+                                <a href="javascript:;">{{ trans('visiosoft.module.advs::field.filter') }}</a>
+                            </div>
+                            <div class="col-4" id="sort_modal_btn">
+                                <i class="fas fa-sort-amount-down w-100"></i>
+                                <a href="javascript:;">{{ trans('visiosoft.module.advs::field.sort') }}</a>
+                            </div>
+                            {{ addBlock('ads-list/row-bottom',{'show_favorite_search':true})|raw }}
+                        </div>
                         {{ addBlock('ads-list/row',{'topfields':topfields,'advs':advs})|raw }}
                         <div class="row">
                             {% block listContent %}
@@ -41,6 +52,10 @@
             </div>
         </div>
     </section>
+
+    {% include "visiosoft.module.advs::list/partials/filter-modal" %}
+    {% include "visiosoft.module.advs::list/partials/sort-modal" %}
+
     <script>
         var select_trans = "{{ trans('visiosoft.module.advs::field.pick_option') }}";
     </script>
diff --git a/addons/default/visiosoft/advs-module/resources/views/list/partials/display-mode.twig b/addons/default/visiosoft/advs-module/resources/views/list/partials/display-mode.twig
index b504ba7a2..98c82d17b 100644
--- a/addons/default/visiosoft/advs-module/resources/views/list/partials/display-mode.twig
+++ b/addons/default/visiosoft/advs-module/resources/views/list/partials/display-mode.twig
@@ -1,4 +1,4 @@
-<div class="row text-center list-view-type">
+<div class="row text-center list-view-type justify-content-center">
     <div class="col-3">
         {% if setting_value('visiosoft.module.location::list_page_location') %}
             <a href="{{ url_route('visiosoft.module.advs::view_type',['map']) }}" class="text-dark">
@@ -13,7 +13,7 @@
             <small>{{ trans('visiosoft.module.advs::field.show_list_view.name') }}</small>
         </a>
     </div>
-    <div class="col-3 list-table-view">
+    <div class="col-3 list-table-view d-none d-md-block">
         <a href="{{ url_route('visiosoft.module.advs::view_type',['table']) }}" class="text-dark">
             <i class="fa fa-table"></i>
             <small>{{ trans('visiosoft.module.advs::field.show_table_view.name') }}</small>
diff --git a/addons/default/visiosoft/advs-module/resources/views/list/partials/filter-modal.twig b/addons/default/visiosoft/advs-module/resources/views/list/partials/filter-modal.twig
new file mode 100644
index 000000000..95a13068e
--- /dev/null
+++ b/addons/default/visiosoft/advs-module/resources/views/list/partials/filter-modal.twig
@@ -0,0 +1,73 @@
+<script>
+    var categories = {};
+</script>
+{{ asset_add('scripts.js','visiosoft.module.advs::js/filter_modal.js') }}
+<div class="modal fade" id="filterModal" tabindex="-1" role="dialog" aria-labelledby="filterModal" aria-hidden="true">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title">{{ trans('visiosoft.module.advs::field.filter') }}
+                </h5>
+                <button type="button" class="close" data-dismiss="modal">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <div class="col-12 border p-2 mb-2 mx-0">
+                    <label class="w-100">
+                        <b>{{ trans('visiosoft.module.advs::button.categories') }}</b>
+                    </label>
+                    <span class="edit-category-filter-modal position-absolute">
+                        <a href="javascript:;">
+                            <i class="fas fa-pencil-alt"></i>
+                            {{ trans('visiosoft.module.advs::button.edit') }}
+                        </a>
+                    </span>
+                    <a href="javascript:;"
+                       class="text-decoration-none text-truncate d-block selected-category-name">
+
+                        {% if app.request.get('cat') %}
+                            {% for category_breadcrumbs in mainCats %}
+                                {{ category_breadcrumbs['val'] }}
+                                {% if count(mainCats) != loop.index %}
+                                    ,
+                                {% endif %}
+                            {% endfor %}
+                        {% endif %}
+                    </a>
+                </div>
+                {% include "visiosoft.module.advs::list/partials/list-filter" %}
+            </div>
+        </div>
+    </div>
+</div>
+<div class="modal fade" id="categoryModal" tabindex="-1" role="dialog" aria-labelledby="filterModal" aria-hidden="true">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title">{{ trans('visiosoft.module.advs::field.set_category') }}
+                </h5>
+                <button type="button" class="close" data-dismiss="modal">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <div class="col-12 row m-0 p-0 category-row"></div>
+                <div class="col-12 col-md-3 py-2 px-0 category-box">
+                    <button type="button" data-selected="{{ app.request.get('cat') }}"
+                            class="btn btn-primary btn-sm w-100 set_category">
+                        {{ trans('visiosoft.module.advs::button.save_category') }}
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<script>
+    var key = 1;
+
+    $.each({{ mainCats|json_encode|raw }}, function (index, value) {
+        categories['cat' + key] = value.id;
+        key++;
+    });
+</script>
diff --git a/addons/default/visiosoft/advs-module/resources/views/list/partials/list-filter.twig b/addons/default/visiosoft/advs-module/resources/views/list/partials/list-filter.twig
index 45d3ecdfd..00ed64d4c 100644
--- a/addons/default/visiosoft/advs-module/resources/views/list/partials/list-filter.twig
+++ b/addons/default/visiosoft/advs-module/resources/views/list/partials/list-filter.twig
@@ -111,7 +111,7 @@
                             <div id="mediaContainer" class="collapse show overflow-auto" aria-labelledby="mediaHeading"
                                  data-parent="#filter"
                                  style="max-height: 300px;">
-                                <div class="row p-3 m-0">
+                                <div class="d-flex p-3 m-0 flex-column">
                                     <div class="form-check py-1">
                                         <input class="form-check-input" type="checkbox"
                                             {% if app.request.get('photo') == true %}
diff --git a/addons/default/visiosoft/advs-module/resources/views/list/partials/sort-modal.twig b/addons/default/visiosoft/advs-module/resources/views/list/partials/sort-modal.twig
new file mode 100644
index 000000000..80cdb1737
--- /dev/null
+++ b/addons/default/visiosoft/advs-module/resources/views/list/partials/sort-modal.twig
@@ -0,0 +1,34 @@
+<div class="modal fade" id="sortModal" tabindex="-1" role="dialog" aria-labelledby="filterModal" aria-hidden="true">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title">
+                    {{ trans("visiosoft.module.advs::field.pick_ordering") }}
+                </h5>
+                <button type="button" class="close" data-dismiss="modal">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body text-center">
+                <ul class="list-unstyled">
+                    <li class="border w-100 p-2">
+                        <a href="#" data-value="sort_price_up" class="sort-by-item text-dark">
+                            {{ trans("visiosoft.module.advs::field.price_high") }}
+                        </a>
+                    </li>
+                    <li class="border w-100 p-2">
+                        <a href="#" data-value="sort_price_down" class="sort-by-item text-dark">
+                            {{ trans("visiosoft.module.advs::field.price_low") }}
+                        </a>
+                    </li>
+                    <li class="border w-100 p-2">
+                        <a href="#" data-value="sort_time" class="sort-by-item text-dark">
+                            {{ trans("visiosoft.module.advs::field.newest") }}
+                        </a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</div>
+{{ asset_add('scripts.js','visiosoft.module.advs::js/sort_modal.js') }}
\ No newline at end of file
diff --git a/addons/default/visiosoft/cats-module/resources/views/ads-list/partials/list-filter.twig b/addons/default/visiosoft/cats-module/resources/views/ads-list/partials/list-filter.twig
index 8961f7c04..cad6118d9 100644
--- a/addons/default/visiosoft/cats-module/resources/views/ads-list/partials/list-filter.twig
+++ b/addons/default/visiosoft/cats-module/resources/views/ads-list/partials/list-filter.twig
@@ -1,4 +1,4 @@
-<div class="card mb-3">
+<div class="card mb-3 d-none d-sm-flex">
     <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"