DSO Component Library

Shopping Cart: Closed 

<h2>Mijn activiteiten</h2>

<div class="dso-shopping-cart">
    <div class="dso-contents">
        <button type="button" class="dso-status">
            <span class="icon fas fa-chevron-down" aria-hidden="true"></span>
            U heeft 3 activiteiten gekozen
        </button>
    </div>

</div>
 
<h2>Mijn activiteiten</h2>

<div class="dso-shopping-cart">
  <div class="dso-contents">
    {{#if items }}
      {{#if toggleButton }}
        <button type="button" class="dso-status">
          {{#if open }}
            {{> '@icon' icon="icon fas fa-chevron-up"}}
          {{else}}
            {{> '@icon' icon="icon fas fa-chevron-down"}}
          {{/if}}
          U heeft {{countActivities items }} activiteit{{#if (gt (countActivities items) 1) }}en{{/if}} gekozen
        </button>
      {{/if}}
      {{#if open }}
        <ul class="dso-items">
          {{#each items }}
            <li>
              {{#if (hasWarning activities)}}{{> '@icon' icon="icon di di-warning" }}{{/if}}
              {{ label }}
              <button type="button" class="dso-delete" title="Verwijder">
                {{> '@icon' icon="icon fas fa-trash-alt" }}
              </button>
              <ul class="dso-activities">
                {{#each activities }}
                  <li>
                    {{#if warning }}{{> '@icon' icon="icon di di-warning" }}{{/if}}
                    {{ label }}
                    <button type="button" class="dso-delete" title="Verwijder">
                      {{> '@icon' icon="icon fas fa-trash-alt" }}
                    </button>
                  </li>
                {{/each}}
              </ul>
            </li>
          {{/each}}
        </ul>
      {{/if}}
    {{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="di di-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>
 
open: null
toggleButton: true
items:
  - label: Tankstation starten of veranderen
    activities:
      - label: 'Tanken van diesel, benzine en andere vloeibare brandstof'
      - label: Tanken en opslaan van LPG
  - label: Opslaan van vloeistoffen in een opslagtank
    activities:
      - 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 accumulateActivities(items) {
  return items.reduce((t, item) => t.concat(item.activities), []);
}

module.exports = {
  countActivities(items) {
    return accumulateActivities(items).length
  },
  hasWarning(itemsOrActivities) {
    return (itemsOrActivities.some(a => a.activities) ? accumulateActivities(itemsOrActivities) : itemsOrActivities)
      .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: 560 Bytes

There are no notes for this item.