Lijst met op server gegenereerde filters clientside updaten

[gnoe93]

Vorige week stelde ik de vraag hoe ik mijn implementatie van een MySQL "zoekmachine" kon verbeteren: Zoekmachine implementeren met SQL binnen repository. Nu dit gebeurd is, zit ik nog met een aantal vragen i.v.m. het front end gedeelte.

Om terug even kort samen te vatten, gaat het om een Symfony 3 applicatie waarbij ik het filter/zoek gedeelte aan het refactoren ben. Het is een website waarmee gezocht kan worden op ruilkaarten (zoals magic the gathering). Het filtersysteem is praktisch analoog aan het zoeken in pricewatch hier op tweakers, zijnde meerdere checkboxes per filtercategorie met 2 knoppen 'en/of' en 'wel/geen'.

Ondertussen ben ik er in geslaagd het backend gedeelte te implementeren mbv tips uit het vorige topic. Ik heb een klasse per filter met "CardFilter" als abstracte parent klasse. Elk van deze filterklasses implementeren een "addToQueryBuilder" en "buildDescription" methode, die beiden in de card repository aangeroepen worden.

Het eerste dat ik doe bij een nieuwe request, is de querystring array (manueel) ontleden om hier CardFilter objecten van te maken. Deze CardFilter objecten worden verwerkt door de CardRepository en worden vervolgens meegegeven aan de twig view. Binnen de twig view vink ik de nodige checkboxes aan en vul ik de nodige velden in door de filters te overlopen:

Het ontleden van de querystring naar filters:

code:

if (!empty($queryStringArray['expansions']))
{
    $cardFilters->add(new ExpansionCardFilter(
        $this->parseIdString($queryStringArray['expansions']),
        array_key_exists('expansionsNot', $queryStringArray)
    ));
}

Het genereren van de filters HTML in twig:

code:

<div id="expansion-filter">
  {% for expansion in sexpansions %}
    {% include 'partials/checkbox.html.twig' with {
      'name': 'expansions',
      'value': expansion.id,
      'checked':
        cardFilters['expansions'] is defined and
        expansion.id in cardFilters['expansions'].ids,
      'text': expansion.name
    } only %}
  {% endfor %}
</div>

Ook toon ik een lijst met actieve filters door de CardFilter objecten te overlopen en de description te tonen die opgesteld werd binnen de repository. Op elk item binnen deze lijst kan geklikt worden om de filter te wissen.

Hier kom ik aan mijn eerste vraag: hoe handel ik best deze "wis filter knoppen" af? Het is de bedoeling dat de resultaten met ajax herladen worden. Momenteel is de "wis filter" knop gelinkt met de overeenkomstige filter met een data attribuut, en overloop ik met JavaScript alle html input velden binnen deze filter. Ik verwijder deze vervolgens uit de querystring door hun "name" attributes uit te lezen. Deze nieuwe querystring stuur ik met een ajax request naar de server om de nieuwe resultatenlijst HTML te krijgen en deze te vervangen.

Deze manier werkt, maar het probleem is dat de filters html zelf ook geupdate moet worden met bepaalde classes zoals "active" om de status te tonen zoals hier afgebeeld (oranje bol): https://image.prntscr.com/image/CxObpCWUTO_UdHmJlJNQmg.png. Deze functionaliteit is reeds serverside (twig) geprogrammeerd en het zou zonde zijn deze met JavaScript te moeten dupliceren. Ik zou samen met de ajax response een json lijst kunnen meegeven om deze te updaten, maar het probleem bij deze aanpak is dat de status pas verandert nadat de request compleet is. Dit zou onmiddelijk moeten veranderen als de gebruiker het veld invult.

Verder is algemene feedback op mijn werkwijze welkom. Ik probeer met deze refactor namelijk mezelf betere praktijken aan te leren en kan hier zeker wat tips van meer ervaren developers gebruiken

[ Voor 10% gewijzigd door gnoe93 op 22-07-2017 11:06 ]