DSO Toolkit | Component Library

Shopping Cart 

<!-- Default -->
<h2>Mijn activiteiten</h2>

<div class="dso-shopping-cart">
    <div class="dso-contents">
        <p class="dso-empty">U heeft nog geen activiteiten gekozen</p>
    </div>

</div>


<!-- Items Collapsed -->
<h2>Mijn activiteiten</h2>

<div class="dso-shopping-cart">
    <div class="dso-contents">
        <button type="button" class="dso-status"><svg class="di di-chevron-down">
                <use href="../../dso-icons.svg#chevron-down" />
            </svg>U heeft 2 activiteiten gekozen
        </button>
    </div>

</div>


<!-- Items -->
<h2>Mijn activiteiten</h2>

<div class="dso-shopping-cart">
    <div class="dso-contents">
        <button type="button" class="dso-status"><svg class="di di-chevron-up">
                <use href="../../dso-icons.svg#chevron-up" />
            </svg>U heeft 2 activiteiten gekozen
        </button>
        <ul class="dso-items">
            <li>

                Milieubelastende activiteit - Melding
                <button type="button" class="btn-link dso-edit-cart-item">Naam bewerken</button>
                <button type="button" class="dso-delete" title="Verwijder">
                    <svg class="di di-trash">
                        <use href="../../dso-icons.svg#trash" />
                    </svg> </button>
            </li>
            <li>

                Milieubelastende activiteit - Melding
                <span class="dso-additive">2</span>
                <button type="button" class="btn-link dso-edit-cart-item">Naam bewerken</button>
                <button type="button" class="dso-delete" title="Verwijder">
                    <svg class="di di-trash">
                        <use href="../../dso-icons.svg#trash" />
                    </svg> </button>
            </li>
        </ul>
    </div>

</div>


<!-- Items Edit -->
<h2>Mijn activiteiten</h2>

<div class="dso-shopping-cart">
    <div class="dso-contents">
        <button type="button" class="dso-status"><svg class="di di-chevron-up">
                <use href="../../dso-icons.svg#chevron-up" />
            </svg>U heeft 2 activiteiten gekozen
        </button>
        <ul class="dso-items">
            <li>

                Milieubelastende activiteit - Melding
                <button type="button" class="btn-link dso-edit-cart-item">Naam bewerken</button>
                <button type="button" class="dso-delete" title="Verwijder">
                    <svg class="di di-trash">
                        <use href="../../dso-icons.svg#trash" />
                    </svg> </button>
            </li>
            <li>

                Milieubelastende activiteit - Melding <div class="dso-edit-additive">
                    <label for="additive-air-1">Bewerk toevoeging</label>
                    <input type="text" class="dso-edit-name" id="additive-air-1" value="2" />
                </div>

            </li>
        </ul>
    </div>

</div>


<!-- Subitems Hidden Summary -->
<h2>Mijn activiteiten</h2>

<div class="dso-shopping-cart">
    <div class="dso-contents">
        <ul class="dso-items">
            <li>

                Milieubelastende activiteit - Melding
                <button type="button" class="btn-link dso-edit-cart-item">Naam bewerken</button>
                <button type="button" class="dso-delete" title="Verwijder">
                    <svg class="di di-trash">
                        <use href="../../dso-icons.svg#trash" />
                    </svg> </button>
                <ul class="dso-subitems">
                    <li>

                        Wasstraat of wasplaats
                        <button type="button" class="dso-delete" title="Verwijder">
                            <svg class="di di-trash">
                                <use href="../../dso-icons.svg#trash" />
                            </svg> </button>
                    </li>
                </ul>
            </li>
            <li>

                Milieubelastende activiteit - Melding <div class="dso-edit-additive">
                    <label for="additive-air-1">Bewerk toevoeging</label>
                    <input type="text" class="dso-edit-name" id="additive-air-1" value="Wasstraat om de hoek van garagebedrijf Jansen" />
                </div>

                <ul class="dso-subitems">
                    <li>

                        Wasstraat of wasplaats
                        <button type="button" class="dso-delete" title="Verwijder">
                            <svg class="di di-trash">
                                <use href="../../dso-icons.svg#trash" />
                            </svg> </button>
                    </li>
                </ul>
            </li>
        </ul>
    </div>

</div>


<!-- Subitems -->
<h2>Mijn activiteiten</h2>

<div class="dso-shopping-cart">
    <div class="dso-contents">
        <button type="button" class="dso-status"><svg class="di di-chevron-up">
                <use href="../../dso-icons.svg#chevron-up" />
            </svg>U heeft 3 activiteiten gekozen
        </button>
        <ul class="dso-items">
            <li>

                Tankstation starten of veranderen <button type="button" class="dso-delete" title="Verwijder">
                    <svg class="di di-trash">
                        <use href="../../dso-icons.svg#trash" />
                    </svg> </button>
                <ul class="dso-subitems">
                    <li>

                        Tanken van diesel, benzine en andere vloeibare brandstof
                        <button type="button" class="dso-delete" title="Verwijder">
                            <svg class="di di-trash">
                                <use href="../../dso-icons.svg#trash" />
                            </svg> </button>
                    </li>
                    <li>

                        Tanken en opslaan van LPG
                        <button type="button" class="dso-delete" title="Verwijder">
                            <svg class="di di-trash">
                                <use href="../../dso-icons.svg#trash" />
                            </svg> </button>
                    </li>
                </ul>
            </li>
            <li>
                <svg class="di di-status-warning">
                    <use href="../../dso-icons.svg#status-warning" />
                </svg><span class="sr-only">waarschuwing</span>
                Opslaan van vloeistoffen in een opslagtank <button type="button" class="dso-delete" title="Verwijder">
                    <svg class="di di-trash">
                        <use href="../../dso-icons.svg#trash" />
                    </svg> </button>
                <ul class="dso-subitems">
                    <li>
                        <svg class="di di-status-warning">
                            <use href="../../dso-icons.svg#status-warning" />
                        </svg><span class="sr-only">waarschuwing</span>
                        Opslaan van vloeistoffen in een ondergrondse opslagtank
                        <button type="button" class="dso-delete" title="Verwijder">
                            <svg class="di di-trash">
                                <use href="../../dso-icons.svg#trash" />
                            </svg> </button>
                    </li>
                </ul>
            </li>
        </ul>
    </div>

</div>


<h2>Mijn activiteiten</h2>

<div class="dso-shopping-cart">
  <div class="dso-contents">
    {{#if items }}
      {{#unless hideSummary}}
      <button type="button" class="dso-status">
        {{~#unless collapsed ~}}
          {{~> '@icon' icon='chevron-up'~}}
        {{~else~}}
          {{~> '@icon' icon='chevron-down'~}}
        {{~/unless~}}
        U heeft {{countSubitems items }} activiteit{{#if (gt (countSubitems items) 1) }}en{{/if}} gekozen
      </button>
      {{/unless}}
      {{#unless collapsed }}
        <ul class="dso-items">
          {{#each items }}
            <li>
              {{#if (hasWarning subitems)}}{{> '@icon' icon='status-warning' }}<span class="sr-only">waarschuwing</span>{{/if}}
              {{ label }}{{#if (and (not readonly) (not edit) additive)}}
                <span class="dso-additive">{{ additive }}</span>
              {{~/if}}
              {{#unless readonly}}
                {{#if edit}}
                  <div class="dso-edit-additive">
                    <label for="additive-{{ ../_self.name }}-{{ @index }}">Bewerk toevoeging</label>
                    <input type="text" class="dso-edit-name" id="additive-{{ ../_self.name }}-{{ @index }}" value="{{ additive }}" />
                  </div>
                {{/if}}

                {{#if (not edit)}}
                  <button type="button" class="btn-link dso-edit-cart-item">Naam bewerken</button>
                {{/if}}
              {{/unless}}
              {{#unless edit}}
                <button type="button" class="dso-delete" title="Verwijder">
                  {{> '@icon' icon='trash' }}
                </button>
              {{/unless}}
              {{#if subitems.length }}
                <ul class="dso-subitems">
                  {{#each subitems }}
                    <li>
                      {{#if warning }}{{> '@icon' icon='status-warning' }}<span class="sr-only">waarschuwing</span>{{/if}}
                      {{ label }}
                      <button type="button" class="dso-delete" title="Verwijder">
                        {{> '@icon' icon='trash' }}
                      </button>
                    </li>
                  {{/each}}
                </ul>
              {{/if}}
            </li>
          {{/each}}
        </ul>
      {{/unless}}
    {{else}}
      <p class="dso-empty">U heeft nog geen activiteiten gekozen</p>
    {{/if}}
  </div>

  {{#if (and items (hasWarning items) open)}}
    <p class="dso-warning">
      <strong>Let op:</strong> Voor de werkzaamheden met een {{> '@icon' icon='status-warning' }} zijn geen maatregelen opgenomen in dit overzicht met maatregelen. Dit betekent niet dat er geen voorschriften en maatregelen van toepassing zijn.
    </p>
  {{/if}}
</div>
 
/* Default */
items: []



/* Items Collapsed */
items:
  - label: Milieubelastende activiteit - Melding
  - label: Milieubelastende activiteit - Melding
    additive: 2
collapsed: true



/* Items */
items:
  - label: Milieubelastende activiteit - Melding
  - label: Milieubelastende activiteit - Melding
    additive: 2



/* Items Edit */
items:
  - label: Milieubelastende activiteit - Melding
  - label: Milieubelastende activiteit - Melding
    additive: 2
    edit: true



/* Subitems Hidden Summary */
items:
  - label: Milieubelastende activiteit - Melding
    subitems:
      - label: Wasstraat of wasplaats
  - label: Milieubelastende activiteit - Melding
    additive: Wasstraat om de hoek van garagebedrijf Jansen
    edit: true
    subitems:
      - label: Wasstraat of wasplaats
hideSummary: true



/* Subitems */
items:
  - label: Tankstation starten of veranderen
    readonly: true
    subitems:
      - label: 'Tanken van diesel, benzine en andere vloeibare brandstof'
      - label: Tanken en opslaan van LPG
  - label: Opslaan van vloeistoffen in een opslagtank
    readonly: true
    subitems:
      - label: Opslaan van vloeistoffen in een ondergrondse opslagtank
        warning: true
  • Content: 
    // Notes:
// ------
// * Each change to this file needs a restart of the fractal instance
// * Exported methods are merged as helpers in fractal.js

function accumulateItems(items) {
  return items.reduce((t, item) => t.concat(item.subitems), []);
}

module.exports = {
  countSubitems(items) {
    return accumulateItems(items).length
  },
  hasWarning(items) {
    return items && (items.some(a => a.subitems) ? accumulateItems(items) : items)
      .some(a => a.warning);
  }
};
  • URL: /components/raw/shopping-cart/shopping-cart.helpers.js
  • Filesystem Path: components/02-content/shopping-cart/shopping-cart.helpers.js
  • Size: 482 Bytes

There are no notes for this item.