Dynamically creating pagination request but ignoring the already existing query params

[andy489]

Връзка към проекта:

Mobilele

Кратко описание:
Когато създаваме динамично URL-a който съдържа pagination query параметри - не се съобразяваме с вече наличните query параметри.

Стъпки за репродуциране:

1. Преправяне на паролите за базата и миграциите към базата с flyway (в момента са root и root трябва да се преправят както са Вашите от application.yml конфигурационния файл).
2. Клик на Offers таб-а (не е необходима регистрация или логин)
3. От "Engine and Transmission" колонката избираме от падащото меню само бензиновите коли (GASOLINE от падащото меню за "-Select engine-")
4. От "-Count per page-" падащото меню избираме "5"
5. Клик на "Search" бутона (установяваме, че всичко работи както се очаква след отстраняването на бъг-а от Criteria филтрирането)
6. Клик на "Next" бутона, за да преминем към следващите 5 бензинови автомобила.
7. БУМ

Проблемът е, че (на 346 ред от offers.html template-a) имаме следното парче код:

<nav>
            <ul class="pagination">
                <li class="page-item" th:classappend="*{hasNext() ? '' : 'disabled'}">

                    <a th:if="*{hasNext()}" class="page-link"
                       th:href="@{/offers(size = *{getSize()},page=*{getNumber() + 1})}"
                       th:text="#{offers_page_next}">{Next}</a>

                    <a th:unless="*{hasNext()}"
                       class="page-link" href="#"
                       th:text="#{offers_page_next}">{Next}</a>

                </li>
            </ul>
        </nav>

Създавайки динамично URL-а за всяка страница, ние игнорираме вече наличните Query параметри в URL-a. Това не е желано поведение, ние искаме всичко да работи в синхрон така както JpaRepository-то има метод в който приема И pagination И criteria.

Това което опитах е чрез thymeleaf да направя някакси да се съобразявам с вече наличните query параметри и само да добавям новите от pagination-a, след което опитах и кодово/програмно да го направя и като задълбах доста и погледнах назад колко грозно става, реших да спра и да попитам за нещо елегантно (но в крайна сметка бих се зарадвал и само на нещо работещо).

[luchob]

Привет!

С арсенала, с който разполагаме ми се струва най-лесно да добавиш сърч маската към pagination линковете с прост javascript.

1. Вземаш стойностите на input полетата във сърч формата (може би със селектор). Те са препопулирани във формата, не би трябвало да се губят между стъпките.
2. Слагаш им key/value стойностите към линковете на пейджинейшъна.

Нещо от сорта (псевдокод):

let searchForm = document.getElementById(...);

let inputUrl = new URL(searchForm.action);
let inputParams = new URLSearchParams(inputUrl.search);


for(each input element in the form) {
   if (element.value) {
       inputParams.append(element.name, element.value);
   }
}

// add the input params to the pagination links 

Трябва да се допише, но на този момент не ми изглежда много трудно или супер грозно :-)
Едно от предимствата е, че така печелиш и т.нар. deep link - линка дето го кликаш не зависи от състоянието на сесията ти, и например може да го буукмаркнеш или пратиш на приятелче.

Поздрави,
Л.