Week 12 - 14

Ik heb deze weken aan de filter optie gewerkt waar ik de bestaande filter optie heb aangepast en beter gemaakt zodat je verschillende categorieën kan kiezen. dit heb ik gedaan met een checkbox.

Zie hieronder de html code die ik voor mijn filter checkbox heb gebruikt.

<section>
  <h2 id="methodes">Filter op categorie</h2>

  <form>
    {#each data.categories as category}
      <label for={category.slug}>
        <input
          type="checkbox"
          id={category.slug}
          value={category.slug}
          checked={filter.includes(category.slug)}
          on:change={updateFilter}
        />
        {category.title}
      </label>
    {/each}
  </form>
</section>

Hieronder zie je de gebruikte JS voor deze filter

<script>
  import { onMount } from "svelte";
  import { page } from "$app/stores";
  export let data;

  let filter = $page.url.searchParams.getAll("categorie") || [];

  function updateFilter(event) {
    const checkboxValue = event.target.value;
    if (event.target.checked) {
      filter = [...filter, checkboxValue];
    } else {
      filter = filter.filter((category) => category !== checkboxValue);
    }
    const params = new URLSearchParams();
    filter.forEach((cat) => params.append("categorie", cat));
    window.history.pushState({}, "", `${window.location.pathname}?${params}`);
    location.reload();
  }

</script>

Ik heb ook een tab optie toegevoegd voor gebruikers die de website doorheen willen tabben door (bepaalde redenen). Dus dit is nu ook mogelijk door de code hieronder;

Deze code voeg je in de Script

  function handleKeyDown(event) {
    if (event.key === "Enter") {
      event.preventDefault();
      event.target.checked = !event.target.checked;
      updateFilter(event);
    }
  }

Deze code hieronder voeg in de form input

    {#each data.categories as category}
      <label for={category.slug}>
        <input
          type="checkbox"
          on:keydown={handleKeyDown} <------ TAB OPTIE 
        />
        {category.title}
      </label>
    {/each}

Ik heb ook de code aangepast, wanneer je nu op een checkbox checked hoef je de pagina niet handmatig te gaan refreshen zodat de URL ermee wordt verandert en dan pas werkt de filter. met de code hieronder wordt deze reload automatisch uitgevoerd na een check op de checkbox.

Dit is de script hieronder, deze script zorgt voor dat de pagina herlaad na het klikken op een checkbox

  function updateFilter(event) {

    location.reload();
  }

  <form>
    {#each data.categories as category}
      <label for={category.slug}>
        <input
          type="checkbox"
          id={category.slug}
          value={category.slug}
          checked={filter.includes(category.slug)}
          on:change={updateFilter} <-----  Reload functie
          on:keydown={handleKeyDown}
          tabindex="0"
        />
        {category.title}
      </label>
    {/each}
  </form>

Verder heb ik de Filter PE gemaakt waar de filter optie werkt alleen als JS geschakeld is, als JS uitgeschakeld is dan heb ik de Filter section weg gehaald en niet te zien is.

Hieronder zie je de script code;

  onMount(() => {
    let showJs = document.querySelector("section");

    showJs.classList.add("js-active");
  });

En dit is de HTML CSS gedeelte;

<section>
  <h2 id="methodes">Filter op categorie</h2>

  <form>
    {#each data.categories as category}
      <label for={category.slug}>
        <input
          type="checkbox"
          id={category.slug}
          value={category.slug}
          checked={filter.includes(category.slug)}
          on:change={updateFilter}
          on:keydown={handleKeyDown}
          tabindex="0"
        />
        {category.title}
      </label>
    {/each}
  </form>
</section>

<span class="js-active"></span>

<style>
  section {
    display: none;
  }

  .js-active {
    display: block;
  }
</style>

Week 15

Hoewel de client-side filterfunctie werkte, heb ik als feedback om over te stappen naar server-side filtering om efficiënter te zijn bij het ophalen van gefilterde data. Dit betekende dat de filtering nu plaatsvond op de server voordat de gegevens naar de client werden gestuurd.

De eerste poging om dit te doen, maakte gebruik van de POST-methode. Na 2weken pas kwam ik erachter dat deze method niet ideaal was, omdat de data wel werd gefilterd en teruggestuurd naar de terminal, maar niet correct werd weergegeven op de webpagina! En hiervoor moest ik de "GET" method gebruiken.

Na het aanpassen van de filterfunctie om gebruik te maken van de GET-methode, werkte de filter correct en werden de gefilterde gegevens correct weergegeven op de webpagina.

Door deze stappen te doorlopen, ben ik erin geslaagd om een gebruiksvriendelijke filterfunctie te implementeren in mijn project, waarbij. Dit proces benadrukt het belang van het kiezen van de juiste HTTP-methode voor specifieke taken en het aanpassen van de implementatie om de gewenste functionaliteit te bereiken.

Hieronder zie hoe de filter functie gemaakt is;

Frontend: Het Formulier

Het formulier bevat een lijst van checkboxen, één voor elke categorie die in data.categories staat. Dit is wat er gebeurt:

Itereren over de categorieën:

{#each data.categories as category}
  <label for={category.slug}>
    <input
      type="checkbox"
      id={category.slug}
      value={category.slug}
      checked={filter.includes(category.slug)}
      name="categorie"
      tabindex="0"
    />
    {category.title}
  </label>
{/each}

Checkbox attributen:

• id={category.slug}: Stelt het id attribuut van de checkbox in op de slug van de categorie.
• value={category.slug}: Stelt de waarde van de checkbox in op de slug van de categorie.
• checked={filter.includes(category.slug)}: Zorgt ervoor dat de checkbox is aangevinkt als de slug van de categorie in de filter array zit.
• name="categorie": Stelt de naam van de checkbox in op "categorie". Dit is belangrijk omdat het ervoor zorgt dat de geselecteerde categorieën - worden doorgestuurd als URL-zoekparameters bij het indienen van het formulier.

Submit knop

<button type="submit">
  Pas filters toe
</button>

Omdat de method="GET" is, zullen de geselecteerde categorieën als zoekparameters aan de URL worden toegevoegd.

Backend: De load Functie

De load functie wordt aangeroepen om data op te halen, inclusief de gefilterde methodes. Hier is hoe het werkt:

Extractie van categorieën uit de URL:

const categories = url.searchParams.getAll('categorie');

Dit haalt alle waarden van de zoekparameter categorie op uit de URL. categories wordt een array met de geselecteerde categorieën.

Filter logica:

let filter;

if (categories && categories.length > 0) {
  filter = `, where: {categories_some: {slug_in: ${JSON.stringify(categories)}}}`;
} else {
  filter = '';
}

• 'categories && categories.length > 0: Controleert of er categorieën zijn geselecteerd.

• Als er categorieën zijn geselecteerd, wordt de filter string ingesteld op een GraphQL query filter die alleen methodes retourneert die bij de geselecteerde categorieën horen:

filter = `, where: {categories_some: {slug_in: ${JSON.stringify(categories)}}}`;

• Als er geen categorieën zijn geselecteerd, wordt filter een lege string:

filter = '';

GraphQL Query:

let query = gql`
  query Methods() {
    page(where: { id: "clv89bh0vn4z007unrv85gsw1" }) {
      title
      content {
        html
      }
    }
    methods(first: 100 ${filter}) {
      id
      slug
      title
      categories {
        title
        id
      }
      template {
        url(transformation: { document: { output: { format: webp } } })
        height
        width
      }
    }
    categories(first: 10) {
      slug
      title
    }
  }
`;

Data ophalen:

const data = await hygraph.request(query, { categories });

Voert de GraphQL query uit en haalt de data op van Hygraph.

Data retourneren:

return data;

Geeft de opgehaalde data terug, inclusief de gefilterde methodes en categorieën.

Week 16

Ik heb deze week deze pagina ge refactored ik heb de pagina in twee componenten verdeeld en deze ook een andere styling gegeven en natuurlijk een beter html structuur gegeven.

Ik heb ook een nieuwe functie toegevoegd om de "underscores" uit hygraph te kunnen verwijderen en de eerste letters van het woord/string een hoofdletter geven, om dit te kunnen doen heb ik een klein onderzoek gedaan, ik heb ook Joost gevraagd hoe ik dit kan maken ik heb een Code-voorbeeld van hem gekregen en ik heb deze gebruikt om mijne te kunnen maken met mijn eigen aanpassingen natuurlijk

Zie code hieronder:

<script>
  export let data;
  // Functie om underscores te verwijderen en de eerste letter van het eerste woord hoofdletter te maken

  function formatMaterial(material) {

    // Verwijder underscores
    let formatted = material.replace(/_/g, " ");

    // Zet de eerste letter van de string in hoofdletters
    return formatted.charAt(0).toUpperCase() + formatted.slice(1);
  }
</script>

  {#each data.methods[0].material as material}
      <div class="span-box">
        <p>{formatMaterial(material)}</p>
      </div>
    {/each}

Ik heb een PDF download functie toegevoegd. Hierdoor kunnen gebruikers hun favoriete methode downloaden.

Hieronder zie je de gebruikte html voor de pdf download optie per methode. Het is erg eenvoudig en maar liefst in 1 regel gedaan.

{#if method.pdf}
          <a href="{method.pdf.url}" download="{method.slug}.pdf" target="blank" class="vt-standard-button">Download</a>
        {/if}