Prekočiť na hlavný obsah
Oficiálna stránka SK

Doména gov.sk je oficálna

Toto je oficiálna webová stránka orgánu verejnej moci Slovenskej republiky. Oficiálne stránky využívajú najmä doménu gov.sk. Odkazy na jednotlivé webové sídla orgánov verejnej moci nájdete na tomto odkaze.

Táto stránka je zabezpečená

Buďte pozorní a vždy sa uistite, že zdieľate informácie iba cez zabezpečenú webovú stránku verejnej správy SR. Zabezpečená stránka vždy začína https:// pred názvom domény webového sídla.

Späť

Duplicate

Kedy použiť tento komponent

Komponent použite, ak potrebujete používateľovi umožniť zadať viacero informácií k jednej konkrétnej veci alebo otázke.
Napríklad, umožniť používateľovi uviesť viac ako jeden vodičský preukaz, alebo viac ako jednu kontaktnú osobu.

Kedy nepoužiť tento komponent

Komponent nepoužite, ak potrebujete od používateľov aby poskytli informácie, ktoré spolu nesúvisia alebo niesú si blízke.

Použitie

Aby tento komponent fungoval správne, musí mať nasledovné atribúty.

  • data-module="duplicate" - Na tento atribút sa pripína script, ktorý pracuje s komponentom
  • data-duplicate-wrapper - Nastavíme elementu, ktorý slúži ako wrapper všetkým elementov, ktoré budú duplikované
  • data-duplicate-item - Nastavíme elementu, ktorý bude duplikovaný

Ďalšie atribúty

Každý duplikovaný element musí mať vlastné pomocné atribúty, ktoré slúžia na správne generovanie atribútov.

  • data-duplicate-item-for="id-%index%" - Tento atribút nastavíme všetkým duplikovaným elementom, ktoré majú atribút for
  • data-duplicate-item-id="id-%index%" - Tento atribút nastavíme všetkým duplikovaným elementom, ktoré majú atribút id
  • data-duplicate-item-name="id-%index%" - Tento atribút nastavíme všetkým duplikovaným elementom, ktoré majú atribút name

Automatická inicializácia

Je možná iba vtedy, ak sú všetky informácie potrebné na inicializáciu elementov v DOMe.


<div class="govuk-grid-row" data-module="duplicate">
   <div class="govuk-grid-column-two-thirds" data-duplicate-wrapper>
      <div data-duplicate-item>
         <fieldset class="govuk-fieldset">
            <div class="govuk-grid-column-three-thirds">
               <label class="govuk-label" data-duplicate-item-for="vseobecne-sposobilosti-%index%" for="vseobecne-sposobilosti">
                 Všeobecné spôsobilosti (nepovinné)
               </label>
            </div>
            <div class="govuk-grid-row">
               <div class="govuk-grid-column-three-quarters">
                  <div class="govuk-form-group govuk-!-margin-bottom-3">
                     <select class="govuk-select govuk-!-width-full" id="vseobecne-sposobilosti" name="vseobecne-sposobilosti" data-duplicate-item-id="vseobecne-sposobilosti-%index%" data-duplicate-item-name="vseobecne-sposobilosti-%index%">
                        <option value="vyberte-zo-zoznamu" selected hidden="hidden">Vyberte zo zoznamu</option>
                        <option value="komunikacia-s-ludmi">Komunikácia s ľudmi</option>
                        <option value="samostatnost">Samostatnosť</option>
                        <option value="manualna-zrucnost">Manuálna zručnosť</option>
                        <option value="analyzovanie-a-riesenie-problemov">Analyzovanie a riešenie problémov</option>
                     </select>
                  </div>
               </div>
               <div class="govuk-grid-column-one-quarter">
                  <button type="submit" class="govuk-button govuk-button--secondary govuk-checkboxes__conditional--hidden" data-module="govuk-button" data-duplicate-item="remove" id="0" data-duplicate-item-id="%index%">
                    Odstrániť
                  </button>
               </div>
            </div>
         </fieldset>
      </div>
      <button type="submit" class="govuk-button govuk-button--secondary" data-module="govuk-button" data-duplicate-item="add">
        Pridať ďalšie spôsobilosti
      </button>
   </div>
</div>

Manuálna inicializácia

V prípade, že nie sú všetky informácie v DOMe, napríklad, ak treba napojiť autocomplete na API pomocou source funkcie, tak treba duplicate manuálne inicializovať.

    
<div class="govuk-grid-row" data-module="duplicate" data-duplicate-no-init id="profesia-section">
   <div class="govuk-grid-column-two-thirds" data-duplicate-wrapper>
      <div data-duplicate-item>
         <fieldset class="govuk-fieldset">
            <div class="govuk-grid-column-three-thirds">
               <label class="govuk-label" for="profesia" data-duplicate-item-for="profesia-%index%">Profesia (kvalifikácia podľa <a href="#" class="govuk-link">SK ISCO-08</a>)</label>
            </div>
            <div class="govuk-grid-row">
               <div class="govuk-grid-column-three-quarters">
                  <div data-autocomplete data-autocomplete-id="profesia" data-autocomplete-name="profesia" data-duplicate-item-id="profesia-%index%" data-duplicate-item-name="profesia-%index%" class="govuk-!-margin-bottom-3"></div>
               </div>
               <div class="govuk-grid-column-one-quarter">
                  <button type="submit" class="govuk-button govuk-button--secondary govuk-checkboxes__conditional--hidden" data-module="govuk-button" data-duplicate-item="remove" id="0" data-duplicate-item-id="%index%">
                    Odstrániť
                  </button>
               </div>
            </div>
         </fieldset>
      </div>
      <button type="submit" class="govuk-button govuk-button--secondary" data-module="govuk-button" data-duplicate-item="add">
        Pridať ďalšie vzdelanie
      </button>
   </div>
</div>

    Inicializácia prebehne na konkrétny duplikát.

                            
<script>
    const profesiaAutocompleteSource = (query, populateResults) => {
      const results = ['Profesia 1', 'Profesia 2', 'Profesia 3'];
      const filteredResults = results.filter(
        (result) => result.indexOf(query) !== -1
      );
      populateResults(filteredResults);
    };
    document
      .querySelectorAll('[data-autocomplete-id="profesia"]')
      .forEach((el) => {
        window._components
          .autocomplete(el, { source: profesiaAutocompleteSource })
          .init();
      });
    window._components
      .duplicate(document.getElementById('profesia-section'), {
        shouldAutoRebindInstances: false,
        onItemChange: (item) => {
          item
            .querySelectorAll('[data-autocomplete-id="profesia"]')
            .forEach((autocompleteEl) => {
            console.log(autocompleteEl);
              window._components.handleDuplicateAutocomplete(autocompleteEl, {
                source: profesiaAutocompleteSource
              });
            });
        }
      })
      .init();
</script>