Source code

src/showcase/pages/components/dashboard-grid.html

This file is included in this documentation build. It is displayed as code and is not executed.

Download source

<!--
Demonstrate the dashboard widgets component on its own lazy route.

@author Laurent Declercq l.declercq@agon-innovation.ch
@version 20260921
-->
<section x-data="componentCatalog" class="component-library">
  <include
    src="partials/components/page-header.html"
    locals='{"title":"componentDashboardGrid"}'
  ></include>
  <div class="catalog-grid">
    <article class="card full">
      <header class="card-header"><h2 x-text="$t('galleryWidgets')"></h2></header>
      <div class="card-body">
        <div x-data="uiDashboard(widgets, 'catalog-widgets')">
          <div class="demo-row mb-3">
            <label class="form-check form-switch">
              <input type="checkbox" class="form-check-input" x-model="editing" />
              <span x-text="$t('reorderWidgets')"></span>
            </label>
            <button
              class="btn btn-secondary btn-sm"
              @click="resetLayout"
              x-text="$t('reset')"
            ></button>
          </div>
          <div class="dashboard-grid" :data-editing="editing">
            <template x-for="widget in visibleWidgets" :key="widget.id">
              <article
                class="dashboard-widget card"
                :data-size="size(widget.id)"
                :draggable="editing"
                @dragstart="dragStart($event, widget.id)"
                @dragover.prevent
                @drop.prevent="drop(widget.id)"
                @dragend="dragged = null"
              >
                <div class="card-body">
                  <h3 class="h6" x-text="$t(widget.label)"></h3>
                  <p class="text-muted small" x-text="$t('galleryMetricDescription')"></p>
                  <div class="demo-row">
                    <button
                      class="btn btn-secondary btn-sm"
                      @click="move(widget.id, -1)"
                      :aria-label="$t('galleryMoveBefore') + ': ' + $t(widget.label)"
                    >
                      ↑
                    </button>
                    <button
                      class="btn btn-secondary btn-sm"
                      @click="move(widget.id, 1)"
                      :aria-label="$t('galleryMoveAfter') + ': ' + $t(widget.label)"
                    >
                      ↓
                    </button>
                    <button
                      class="btn btn-ghost btn-sm"
                      @click="hide(widget.id)"
                      x-text="$t('hide')"
                    ></button>
                  </div>
                </div>
              </article>
            </template>
          </div>
        </div>
      </div>
    </article>
  </div>
</section>