W tym tygodniu wzięłam na tapet1 filtry typu multi select. Zadanie okazało się dość angażujące i tym trudniejsze, że jestem przeziębiona. :( Więc lotność oraz ostrość umysłu obniżona i przytępiona zdeczka. ;) Ale udało się. I mam z tego powodu sporą satysfakcję.
By udokumentować to wiekopomne dzieło ;), opiszę pokrótce i z grubsza kroki, które przywiodły mnie do celu:
- Zaczęłam od stworzenia widoku dla wspomnianych filtrów.
Słowem uzupełnienia - do tej pory filtrowanie w BUCE było możliwe wyłącznie po filtrach jednej kategorii (czyli spośród trzech typów książek - papierowe, e-booki, audiobooki - jednocześnie można było wybrać tylko jeden; analogicznie - tylko jeden rodzaj literacki spośród trzech i jeden gatunek literacki z dziewięciu). Ubogo. Wprowadzenie multi-filtrowania otworzyć miało zupełnie nowe możliwości, mianowicie wybieranie równocześnie wielu filtrów tej samej kategorii oraz łączenie filtrów z różnych kategorii.
Widok filtrów tymczasowo umieściłam pod dodaną w menu głównym zakładką "Filter books", docelowo - ma to być opcja dostępna w submenu w ramach zakładki-dropdownu "My library".
Zapewne ux'owo kwestię filtrowania można by rozegrać dużo lepiej, jednak UX BUKI jest wypadkową czy też kompromisem między użytecznością a różnorodnością i stopniem skomplikowania poszczególnych zadań, które na niego się składają.
Póki co odpuściłam też sobie stylowanie checkboxów i radiobuttonów, skupiając się (jak to już drzewiej bywało) na tym, żeby nowa funkcjonalność działała. Być może wrócę do tematu, gdy opanuję już tę sztukę na warsztatach z HTML i CSS, w których teraz biorę udział (pozdrowienia dla organizatorów i uczestników :)). Do tego czasu kontentuję się tym, co daje Bootstrap. ;) Czyli tym:
- Następnie zdynamizowałam wyświetlanie nazw poszczególnych filtrów.
W pierwszym kroku nazwy były po prostu wpisane "na sztywno" w pliku html, w drugim - pobierane z API AJAXem, "mielone" w Handlebars.js i "wstrzykiwane" do widoku - że posłużę się taką kulinarno-medyczną metaforyką. ;)
- Kolejny krok to przechwytywanie wartości zaznaczonych checkboxów.
Początkowo z użyciem pętli for, zastąpionej później metodą .each().
- Potem był fikołek ze szpagatem, to jest przepisanie modelu.
Czyli nic innego, jak dostosowanie do nowych potrzeb istniejącej już funkcji, która pobiera AJAXem odpowiednią kolekcję książek. Zdecydowanie najtrudniejszy element całego przedsięwzięcia (bo wymagał zgrania starego z nowym).
- Zwieńczeniem było stworzenie akcji odpowiadającej za wyświetlanie listy książek filtrowanej według wielu kryteriów.
Rzecz sama w sobie nietrudna, aczkolwiek dopasowanie adekwatnego do filtrów nagłówka wymagało trochę pokombinowania.
W międzyczasie zastąpiłam jeszcze checkboxy radiobuttonami przy filtrze "Is borrowed". (Subtelnej różnicy między nimi - w kontekście AJAXa - nie od razu byłam świadoma.) Ostatecznie całość zamknęła się w dziesięciu commitach, między 26 a 29 kwietnia (link do repozytorium).
Uf... Było pracowicie! Na szczęście za chwilę majówka. :)
1 Tak, tak, na tapet, nie na tapetę - choć właśnie to drugie, niepoprawne, określenie jest rozpowszechnione. Niedowiarków i wątpiących odsyłam do poradni językowej Wydawnictwa Naukowego PWN, gdzie profesor Mirosław Bańko z właściwym sobie wdziękiem objaśnia te zawiłości. :)
Brak komentarzy:
Prześlij komentarz