#654 [customfields] Improvments

addons/default/visiosoft/advs-module/resources/css/list-new.scss

@@ -473,6 +473,33 @@ ul {
                   font-size: calc(12rem / 16);
                   padding: .2rem .5rem;
 
+                  &.sortable {
+                    cursor: pointer;
+                    color: #adb4c9;
+
+                    &:hover {
+                      text-decoration: underline;
+                    }
+                  }
+
+                  &:not(.sort-by) {
+                    svg {
+                      display: none;
+                    }
+                  }
+
+                  &.sort-desc {
+                    svg {
+                      transform: scaleY(-1);
+                    }
+                  }
+
+                  svg {
+                    height: .5rem;
+                    width: auto;
+                    margin-left: .2rem;
+                  }
+
                   &:first-child {
                     border-top-left-radius: .25rem;
                   }

addons/default/visiosoft/advs-module/resources/js/list-new.js

@@ -1,3 +1,29 @@
+// Init tooltip
 $(function () {
     $('[data-toggle="tooltip"]').tooltip()
 })
+
+// Handle table header sorting
+$('.sortable').on('click', function () {
+    const searchParams = new URLSearchParams(window.location.search);
+    const sortBy = searchParams.get('sort_by');
+    const direction = $(this).hasClass('sort-desc') ? 'asc' : 'desc';
+    const value = $(this).data(`sort-${direction}`);
+
+    let url = window.location.href;
+    if (url.slice(-1) === "#") {
+        url = url.slice(0, -1);
+    }
+
+    let goURL;
+    if (window.location.search == "") {
+        goURL = `${url}?sort_by=${value}`;
+    } else if (searchParams.has('sort_by')) {
+        const parameters = value !== 'all' ? "sort_by=" + value : "";
+        goURL = location.href.replace(`sort_by=${sortBy}`, parameters);
+    } else {
+        goURL = `${url}&sort_by=${value}`;
+    }
+
+    window.location.replace(goURL);
+})

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

@@ -19,7 +19,7 @@
                         <div class="action-data-wrapper d-flex justify-content-center">
                             <div class="action-data d-flex flex-column">
 
-                                {{ addBlock('list/extra-actions', {'ad': adv, 'vars': _context})|raw }}
+                                {{ addBlock('list/extra-actions', {'ad': adv, 'vars': _context}, ['favs', 'comparisons'])|raw }}
 
                             </div>
                         </div>

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

@@ -4,26 +4,8 @@
 
 <div id="listing" class="w-100 table-responsive">
     <table class="w-100 text-center">
-        <thead>
-        <tr class="text-white">
-            <th class="text-nowrap" colspan="2">{{ trans('visiosoft.module.advs::field.ad_title') }}</th>
 
-            {% for cF in listingCFs %}
+        {% include 'visiosoft.module.advs::list/partials/thead' %}
-                <th class="text-nowrap">{{ cF.name }}</th>
-            {% endfor %}
-
-            {% if listLocation %}
-                <th class="text-nowrap">
-                    {{ trans('visiosoft.module.advs::field.city.name') }}
-                    / {{ trans('visiosoft.module.advs::field.district.name') }}
-                </th>
-            {% endif %}
-            {% if setting_value('visiosoft.module.advs::market_place') and showDate %}
-                <th class="text-nowrap">{{ trans('visiosoft.module.advs::field.date.name') }}</th>
-            {% endif %}
-            <th class="text-nowrap">{{ trans('visiosoft.module.advs::field.price.name') }}</th>
-        </tr>
-        </thead>
 
         <tbody>
 

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

@@ -0,0 +1,37 @@
+<thead>
+    <tr class="text-white">
+        <th class="text-nowrap" colspan="2">{{ trans('visiosoft.module.advs::field.ad_title') }}</th>
+
+        {% for cF in listingCFs %}
+            {% set isSortable = cF.isSortable %}
+            <th class="text-nowrap{{ isSortable ? ' sortable' }}{{ param.sort_by == 'cf_' ~ cF.id ~ '_desc' ? ' sort-by sort-desc' : (param.sort_by == 'cf_' ~ cF.id ~ '_asc' ? ' sort-by') }}"
+                data-sort-asc="{{ 'cf_' ~ cF.id ~ '_asc' }}" data-sort-desc="{{ 'cf_' ~ cF.id ~ '_desc' }}">
+                {{ cF.name }}
+                {% if isSortable %}
+                    {{ img('visiosoft.module.advs::images/sort-arrow.svg').data|raw }}
+                {% endif %}
+            </th>
+        {% endfor %}
+
+        {% if listLocation %}
+            <th class="text-nowrap sortable{{ param.sort_by == 'address_z_a' ? ' sort-by sort-desc' : (param.sort_by == 'address_a_z' ? ' sort-by') }}"
+                data-sort-asc="address_a_z" data-sort-desc="address_z_a">
+                {{ trans('visiosoft.module.advs::field.city.name') }}
+                / {{ trans('visiosoft.module.advs::field.district.name') }}
+                {{ img('visiosoft.module.advs::images/sort-arrow.svg').data|raw }}
+            </th>
+        {% endif %}
+        {% if setting_value('visiosoft.module.advs::market_place') and showDate %}
+            <th class="text-nowrap sortable{{ param.sort_by == 'sort_time_newest' ? ' sort-by sort-desc' : (param.sort_by == 'sort_time_oldest' ? ' sort-by') }}"
+                data-sort-asc="sort_time_oldest" data-sort-desc="sort_time_newest">
+                {{ trans('visiosoft.module.advs::field.date.name') }}
+                {{ img('visiosoft.module.advs::images/sort-arrow.svg').data|raw }}
+            </th>
+        {% endif %}
+        <th class="text-nowrap sortable{{ param.sort_by == 'sort_price_up' ? ' sort-by sort-desc' : (param.sort_by == 'sort_price_down' ? ' sort-by') }}"
+            data-sort-asc="sort_price_down" data-sort-desc="sort_price_up">
+            {{ trans('visiosoft.module.advs::field.price.name') }}
+            {{ img('visiosoft.module.advs::images/sort-arrow.svg').data|raw }}
+        </th>
+    </tr>
+</thead>