#1034 Move mobile filter from sahibinden theme to base theme

2026-01-11 18:01:10 -06:00 · 2020-03-16 11:54:20 +03:00 · 2020-03-16 11:54:20 +03:00 · edba0f4fba
commit edba0f4fba
parent c393023e08
12 changed files with 333 additions and 6 deletions
--- 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;
 }
--- a/addons/default/visiosoft/advs-module/resources/js/filter_modal.js
+++ 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');
+})
+
+
+
+
--- 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 == "") {
--- a/addons/default/visiosoft/advs-module/resources/js/sort_modal.js
+++ b/addons/default/visiosoft/advs-module/resources/js/sort_modal.js
@ -0,0 +1,3 @@
+$('#sort_modal_btn').on('click', function () {
+    $('#sortModal').modal('toggle');
+})
--- 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'
    ],
--- 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',
    ],
--- 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>
--- 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>
--- 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
@ -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>
--- 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 %}
--- 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
@ -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') }}
--- 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"