сортировка фильтров

app/Services/ImportBaseService.php

@@ -40,7 +40,7 @@ class ImportBaseService
         $i = 0;
         foreach ($cellIterator as $cell) {
             if (isset($keys[$i])) {
-                $row_content[$keys[$i]] = $cell->getValue();
+                $row_content[$keys[$i]] = trim($cell->getValue());
             }
             $i++;
         }

resources/views/partials/newFilterElement.blade.php

@@ -8,7 +8,12 @@
             </div>
         </div>
         <form class="dropdown-filter_{{$id}} mb-2">
-            <input class="form-control mb-3" id="search_{{$id}}" placeholder="Поиск">
+            <div class="d-flex align-items-center mb-2">
+                <input class="form-control me-2" id="search_{{$id}}" placeholder="Поиск">
+                <button type="button" class="btn btn-outline-secondary btn-sm" id="sort-filter-{{$id}}" title="А-Я / Я-А">
+                    <i class="bi bi-sort-alpha-down" id="sort-filter-icon-{{$id}}"></i>
+                </button>
+            </div>
             <div class="ps-1" id="filter-list-{{$id}}" style="max-height: 200px; overflow-y: scroll;">
             </div>
         </form>
@@ -41,31 +46,51 @@
         waitForJQuery(async function () {
             const $container = $("#filter-list-{{$id}}");
             const $searchInput = $("#search_{{$id}}");
+            const $sortBtn = $("#sort-filter-{{$id}}");
+            const $sortIcon = $("#sort-filter-icon-{{$id}}");
             const urlParams = new URL(document.location.href);
             const existingFilter = urlParams.searchParams.get(`filters[{{$id}}]`);
             const selectedValues = existingFilter ? existingFilter.split("||") : [];
 
-            try {
-                const response = await fetch(`{!! route('getFilters', ['column' => $id, 'table' => $table]) !!}`);
-                const data = await response.json();
+            let filterData = [];
+            let sortAsc = true;
 
-                if (Array.isArray(data) && data.length) {
-                    if(data[0] === null) data[0] = '-пусто-';
-                    const html = data.map(item => `
+            function renderFilterList(data) {
+                const html = data.map(item => `
                     <div class="form-check">
-                        <input class="form-check-input" type="checkbox" value="${escapeHtml(item)}" id="flexCheckDefault_${escapeHtml(item)}">
-                        <label class="form-check-label" for="flexCheckDefault_${escapeHtml(item)}">
+                        <input class="form-check-input" type="checkbox" value="${escapeHtml(item)}" id="flexCheckDefault_{{$id}}_${escapeHtml(item)}">
+                        <label class="form-check-label" for="flexCheckDefault_{{$id}}_${escapeHtml(item)}">
                             ${escapeHtml(item)}
                         </label>
                     </div>
                 `).join('');
-                    $container.html(html);
+                $container.html(html);
+
+                selectedValues.forEach(value => {
+                    $container.find(`.form-check-input[value="${$.escapeSelector(value)}"]`).prop("checked", true);
+                });
+            }
+
+            function sortData(asc) {
+                const collator = new Intl.Collator('ru', { sensitivity: 'base', numeric: true });
+                return [...filterData].sort((a, b) => {
+                    if (a === '-пусто-') return -1;
+                    if (b === '-пусто-') return 1;
+                    return asc ? collator.compare(a, b) : collator.compare(b, a);
+                });
+            }
+
+            try {
+                const response = await fetch(`{!! route('getFilters', ['column' => $id, 'table' => $table]) !!}`);
+                const data = await response.json();
 
-                    selectedValues.forEach(value => {
-                        $container.find(`.form-check-input[value="${$.escapeSelector(value)}"]`).prop("checked", true);
-                    });
+                if (Array.isArray(data) && data.length) {
+                    if(data[0] === null) data[0] = '-пусто-';
+                    filterData = data;
+                    const sortedData = sortData(sortAsc);
+                    renderFilterList(sortedData);
                 } else {
-                    $("#search_{{$id}}").hide();
+                    $("#search_{{$id}}").parent().hide();
                     $("#modal-footer_{{$id}}").hide();
                     $container.html('<div class="text-muted">Нет данных</div>');
                 }
@@ -75,6 +100,15 @@
                 $container.html('<div class="text-danger">Ошибка загрузки</div>');
             }
 
+            $sortBtn.on("click", function (e) {
+                e.preventDefault();
+                sortAsc = !sortAsc;
+                $sortIcon.removeClass("bi-sort-alpha-down bi-sort-alpha-up")
+                    .addClass(sortAsc ? "bi-sort-alpha-down" : "bi-sort-alpha-up");
+                const sortedData = sortData(sortAsc);
+                renderFilterList(sortedData);
+            });
+
             $("#accept-filter_{{$id}}").on("click", function () {
                 const checkedValues = $container.find(".form-check-input:checked")
                     .map(function () {