UHasselt Component Library

Wie is wie search 

<section class='org-wiw-search'>
    <h1 class="heading ">
        Opzoeken van personeelsleden van UHasselt
    </h1>
    <div class='wrapper'>
        <h2 class="heading ">
            Hoe te gebruiken?
        </h2>
        <div class='paragraph paragraph-intro'>Geef een deel van de naam, familienaam, ... van minstens 2 karakters in, het formulier zal onmiddellijk data (naam en telefoonnummer) suggereren! Om daarna meer details te zien klik je één van de suggesties aan.</div>

    </div>
    <div class='search-form'>
        <span class='search-cat'>Kies categorie</span>
        <select class="form-select " name="select" id="select">
            <option value="1" selected>Roepnaam</option>
            <option value="2">Voornaam</option>
            <option value="3">Familienaam</option>
            <option value="4">Functie</option>
            <option value="5">Discipline</option>
            <option value="6">Organisatie van Uhasselt</option>
            <option value="7">Lokaal</option>
            <option value="8">Telefoonnummer</option>
            <option value="9">Gsm-nummer Uhasselt</option>
        </select>
        <span class='search-text'>begint met ...</span>
        <span class="atm-form-input  ">
            <input type="text" name="input" id="input" placeholder="Vul hier je zoekterm in..." class="form-input" value="">
            <span class="icon far fa-times   form-input-error-icon" aria-hidden="true"></span>
            <span class="icon far fa-check   form-input-valid-icon" aria-hidden="true"></span>
        </span>

        <a href="#" class="button button-red ">
            <span>
                <span class="text">
                    Toon resultaten
                </span>
            </span>
        </a>

    </div>
    <div class='result-table'>
        <h2 class="heading ">
            Resultaat
        </h2>
        <div class='table-desktop'>
            <div class="table-wrapper">
                <div class="table-responsive">
                    <table>
                        <tr>
                            <th>Naam</th>
                            <th>Functie</th>
                            <th>Telefoon</th>
                            <th>Lokaal</th>
                        </tr>
                        <tr>
                            <td><a href="#">Marlies VAN BAEL</a></td>
                            <td>Gewoon Hoogleraar</td>
                            <td><a href="tel:+3211268307">+3211268307</a></td>
                            <td>D-F4.04-C011</td>
                        </tr>
                        <tr>
                            <td><a href="#">Marlies VAN BAEL</a></td>
                            <td>Gewoon Hoogleraar</td>
                            <td><a href="tel:+3211268307">+3211268307</a></td>
                            <td>D-F4.04-C011</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        <div class='table-mobile'>
            <div class="table-wrapper">
                <div class="table-responsive">
                    <table>
                        <tr>
                            <th class="head">Naam</th>
                            <td><a href="#">Marlies VAN BAEL</a></td>
                        </tr>
                        <tr>
                            <th class="head">Functie</th>
                            <td>Gewoon Hoogleraar</td>
                        </tr>
                        <tr>
                            <th class="head">Telefoon</th>
                            <td><a href="tel:+3211268307">+3211268307</a></td>
                        </tr>
                        <tr>
                            <th class="head">Lokaal</th>
                            <td>D-F4.04-C011</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        <div class='table-mobile'>
            <div class="table-wrapper">
                <div class="table-responsive">
                    <table>
                        <tr>
                            <th class="head">Naam</th>
                            <td><a href="#">Marlies VAN BAEL</a></td>
                        </tr>
                        <tr>
                            <th class="head">Functie</th>
                            <td>Gewoon Hoogleraar</td>
                        </tr>
                        <tr>
                            <th class="head">Telefoon</th>
                            <td><a href="tel:+3211268307">+3211268307</a></td>
                        </tr>
                        <tr>
                            <th class="head">Lokaal</th>
                            <td>D-F4.04-C011</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
</section>
 
<section class='org-wiw-search'>
    {{render '@heading--h1' heading-h1 merge=true}}
    <div class='wrapper'>
        {{render '@heading--h2' heading-h2 merge=true}}
        {{render '@paragraph--intro' intro merge=true}}
    </div>
    <div class='search-form'>
        <span class='search-cat'>{{search-cat}}</span>
        {{render '@select' select merge=true}}
        <span class='search-text'>{{search-start}}</span>
        {{render '@input' input merge=true}}
        {{render '@button--red' button merge=true}}
    </div>
    {{#if result}}
        <div class='result-table'>
            {{render '@heading--h2' heading-result merge=true}}
            <div class='table-desktop'>
                {{render
                    '@table--table-with-header-row'
                    table-result-desktop
                    merge=true
                }}
            </div>
            {{#each table-mobile-result}}
                <div class='table-mobile'>
                    {{render
                        '@table--table-with-header-col'
                        table-result-mobile
                        merge=true
                    }}
                </div>
            {{/each}}
        </div>
    {{/if}}
</section>
 
{
  "heading-h1": {
    "text": "Opzoeken van personeelsleden van UHasselt"
  },
  "heading-h2": {
    "text": "Hoe te gebruiken?"
  },
  "intro": {
    "text": "Geef een deel van de naam, familienaam, ... van minstens 2 karakters in, het formulier zal  onmiddellijk data (naam en telefoonnummer) suggereren! Om daarna meer details te zien klik je één van de suggesties aan."
  },
  "select": {
    "options": [
      {
        "value": "1",
        "label": "Roepnaam",
        "selected": true
      },
      {
        "value": "2",
        "label": "Voornaam",
        "selected": false
      },
      {
        "value": "3",
        "label": "Familienaam",
        "selected": false
      },
      {
        "value": "4",
        "label": "Functie",
        "selected": false
      },
      {
        "value": "5",
        "label": "Discipline",
        "selected": false
      },
      {
        "value": "6",
        "label": "Organisatie van Uhasselt",
        "selected": false
      },
      {
        "value": "7",
        "label": "Lokaal",
        "selected": false
      },
      {
        "value": "8",
        "label": "Telefoonnummer",
        "selected": false
      },
      {
        "value": "9",
        "label": "Gsm-nummer Uhasselt",
        "selected": false
      }
    ]
  },
  "input": {
    "placeholder": "Vul hier je zoekterm in..."
  },
  "search-cat": "Kies categorie",
  "search-start": "begint met ...",
  "button": {
    "text": "Toon resultaten",
    "iconBefore": false
  },
  "result": true,
  "heading-result": {
    "text": "Resultaat"
  },
  "table-result-desktop": {
    "headerRow": [
      {
        "text": "Naam"
      },
      {
        "text": "Functie"
      },
      {
        "text": "Telefoon"
      },
      {
        "text": "Lokaal"
      }
    ],
    "rows": [
      {
        "cells": [
          {
            "text": "<a href=\"#\">Marlies VAN BAEL</a>"
          },
          {
            "text": "Gewoon Hoogleraar"
          },
          {
            "text": "<a href=\"tel:+3211268307\">+3211268307</a>"
          },
          {
            "text": "D-F4.04-C011"
          }
        ]
      },
      {
        "cells": [
          {
            "text": "<a href=\"#\">Marlies VAN BAEL</a>"
          },
          {
            "text": "Gewoon Hoogleraar"
          },
          {
            "text": "<a href=\"tel:+3211268307\">+3211268307</a>"
          },
          {
            "text": "D-F4.04-C011"
          }
        ]
      }
    ]
  },
  "table-mobile-result": [
    {
      "table-result-mobile": {
        "headerCol": [
          {
            "text": "Naam"
          },
          {
            "text": "Functie"
          },
          {
            "text": "Telefoon"
          },
          {
            "text": "Lokaal"
          }
        ],
        "rows": [
          {
            "cells": [
              {
                "text": "<a href=\"#\">Marlies VAN BAEL</a>"
              }
            ]
          },
          {
            "cells": [
              {
                "text": "Gewoon Hoogleraar"
              }
            ]
          },
          {
            "cells": [
              {
                "text": "<a href=\"tel:+3211268307\">+3211268307</a>"
              }
            ]
          },
          {
            "cells": [
              {
                "text": "D-F4.04-C011"
              }
            ]
          }
        ]
      }
    },
    {
      "table-result-mobile": {
        "headerCol": [
          {
            "text": "Naam"
          },
          {
            "text": "Functie"
          },
          {
            "text": "Telefoon"
          },
          {
            "text": "Lokaal"
          }
        ],
        "rows": [
          {
            "cells": [
              {
                "text": "<a href=\"#\">Marlies VAN BAEL</a>"
              }
            ]
          },
          {
            "cells": [
              {
                "text": "Gewoon Hoogleraar"
              }
            ]
          },
          {
            "cells": [
              {
                "text": "<a href=\"tel:+3211268307\">+3211268307</a>"
              }
            ]
          },
          {
            "cells": [
              {
                "text": "D-F4.04-C011"
              }
            ]
          }
        ]
      }
    }
  ]
}
  • Content: 
    .org-wiw-search {
    @apply md:bg-white md:shadow-lg md:p-10 md:mb-20;

    h2.heading {
        @apply text-red;
    }

    .wrapper {
        @apply hidden md:block;
        @apply border-t border-b border-solid border-gray py-6;
    }

    .search-form {
        @apply bg-white shadow-lg p-8 pb-6 mt-6 border-t border-solid border-gray-200;
        @apply flex flex-col lg:flex-row lg:items-center gap-5 lg:gap-8;

        .form-select,
        .atm-form-input .form-input {
            @apply w-full lg:w-auto;
        }

        .search-cat,
        .search-text {
            @apply font-bold;
        }
        .search-cat {
            @apply lg:hidden;
        }

        .button {
            @apply m-0 text-center;
        }
    }

    .result-table {
        @apply mt-8;

        .table-desktop {
            @apply hidden lg:block;
        }

        .table-mobile {
            @apply mb-8 lg:hidden;
        }
    }
    .atm-form-input {
        @apply relative;

        #wizards-data {
            @apply z-50 hidden bg-white absolute top-16 left-0 h-40 w-2/3 md:w-[300px] overflow-x-auto p-2 rounded-md border-gray-500 shadow;

            li {
                @apply hover:bg-gray-100 py-2;
            }
        }
    }
}
  • URL: /components/raw/wie-is-wie-search/wie-is-wie-search.css
  • Filesystem Path: src\components\04-organisms\wie-is-wie-search\wie-is-wie-search.css
  • Size: 1.3 KB
  • Content: 
    (function () {

    'use strict';

    if (!$(document.body).hasClass('dt-wieiswieoverview')) return;

    $(document).ready(function () {
        const select = document.getElementById('select');
        const input = document.getElementById('input');
        const list = document.getElementById('wizards-data');
        var busyFetching = false;

        async function fetchList() {

            if (!busyFetching)
            {
                list.style.display = 'block';

                const currentPageId = select.dataset.currentPageId;

                const options = {method: 'GET'};
                fetch(`${window.location.origin}/Umbraco/Api/WhoIsWho/AutoComplete?searchType=${select.value}&searchTerm=${input.value}&currentPage=${currentPageId}`, options)
                .then(data => data.json())
                .then(data => {
    
                    // Clear current list
                    list.innerHTML = '';

                    for (const item of data) {
                        let option = document.createElement('li');
                        let newOption = document.createElement('a');
                        if (item.Value !== '') {
                            newOption.setAttribute(
                                'href',
                                item.Value
                            );
                        }
    
                        newOption.innerText = item.Key;
                        option.appendChild(newOption);
                        list.appendChild(option);
                    }
                    busyFetching = false;
                })
                .catch(err => {
    
                        // Clear current list
                        list.innerHTML = '';
                        console.error(err);
                        busyFetching = false;
                    }
                );
            }

        }

        input.addEventListener('input', async function (e) {
            list.style.display = 'none';
            if (input.value.length > 2) {
                fetchList();
            }
        });

        select.addEventListener('change', async function (e) {
            if (input.value.length > 2) {
                fetchList();
            }
        });
    });
})();
  • URL: /components/raw/wie-is-wie-search/wie-is-wie-search.js
  • Filesystem Path: src\components\04-organisms\wie-is-wie-search\wie-is-wie-search.js
  • Size: 2.3 KB

No notes defined.