millas 0.2.5 → 0.2.7

package/src/admin/views/pages/list.njk

@@ -1,5 +1,459 @@
 {% extends "layouts/base.njk" %}
 
+{% block title %}{{ resource.label }}{% endblock %}
+{% block topbar_title %}
+  <span class="icon icon-16" style="color:var(--text-muted)">
+    <svg viewBox="0 0 24 24"><use href="#ic-{{ resource.icon or 'table' }}"/></svg>
+  </span>
+  {{ resource.label }}
+  <span class="badge badge-gray" style="font-size:11px;font-weight:500">{{ total }}</span>
+{% endblock %}
+
+{% block topbar_actions %}
+  {% if resource.canCreate %}
+  <a href="{{ adminPrefix }}/{{ resource.slug }}/create" class="btn btn-primary">
+    <span class="icon icon-14"><svg viewBox="0 0 24 24"><use href="#ic-plus"/></svg></span>
+    New {{ resource.singular }}
+  </a>
+  {% endif %}
+{% endblock %}
+
+{% block content %}
+<div class="breadcrumb">
+  <a href="{{ adminPrefix }}/">
+    <span class="icon icon-12"><svg viewBox="0 0 24 24"><use href="#ic-grid"/></svg></span>
+  </a>
+  <span class="breadcrumb-sep">›</span>
+  <span class="breadcrumb-current">{{ resource.label }}</span>
+  {% if year %}
+  <span class="breadcrumb-sep">›</span>
+  <span class="breadcrumb-current">{{ year }}</span>
+  {% endif %}
+  {% if month %}
+  <span class="breadcrumb-sep">›</span>
+  <span class="breadcrumb-current">{{ month }}</span>
+  {% endif %}
+</div>
+
+{# ── Date hierarchy ── #}
+{% if resource.dateHierarchy %}
+<div class="date-hierarchy mb-4">
+  <a href="{{ adminPrefix }}/{{ resource.slug }}" class="dh-btn {% if not year %}active{% endif %}">All</a>
+  {% for y in dateYears %}
+  <a href="{{ adminPrefix }}/{{ resource.slug }}?year={{ y }}" class="dh-btn {% if year == y %}active{% endif %}">{{ y }}</a>
+  {% endfor %}
+  {% if year %}
+  <span class="dh-sep">›</span>
+  {% set monthNames = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'] %}
+  {% for m in range(1, 13) %}
+  <a href="{{ adminPrefix }}/{{ resource.slug }}?year={{ year }}&month={{ m }}" class="dh-btn {% if month == m %}active{% endif %}">{{ monthNames[m-1] }}</a>
+  {% endfor %}
+  {% endif %}
+</div>
+{% endif %}
+
+<div class="card">
+
+  {# ── Toolbar ── #}
+  <div class="toolbar">
+    <div class="toolbar-left">
+      <form method="GET" action="{{ adminPrefix }}/{{ resource.slug }}" id="search-form" style="display:flex;gap:8px;align-items:center">
+        <input type="hidden" name="sort"    value="{{ sort }}">
+        <input type="hidden" name="order"   value="{{ order }}">
+        <input type="hidden" name="perPage" value="{{ perPage }}">
+        {% if year  %}<input type="hidden" name="year"  value="{{ year }}">{% endif %}
+        {% if month %}<input type="hidden" name="month" value="{{ month }}">{% endif %}
+        {% for key, val in activeFilters %}
+        <input type="hidden" name="filter[{{ key }}]" value="{{ val }}">
+        {% endfor %}
+        <div class="search-wrap">
+          <span class="search-icon-inner">
+            <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
+            </svg>
+          </span>
+          <input type="text" name="search" value="{{ search }}"
+            placeholder="Search {{ resource.label | lower }}…"
+            class="form-control search-input" autocomplete="off">
+        </div>
+        {% if search %}
+        <a href="{{ adminPrefix }}/{{ resource.slug }}" class="btn btn-ghost btn-sm">
+          <span class="icon icon-13"><svg viewBox="0 0 24 24"><use href="#ic-x"/></svg></span>
+          Clear
+        </a>
+        {% endif %}
+      </form>
+    </div>
+
+    <div class="toolbar-right">
+      {# Per-page selector #}
+      <select class="filter-control" style="min-width:80px" onchange="changePerPage(this.value)" title="Rows per page">
+        {% for n in [20, 50, 100] %}
+        <option value="{{ n }}" {% if perPage == n %}selected{% endif %}>{{ n }} / page</option>
+        {% endfor %}
+      </select>
+
+      {% if filters | length %}
+      <button class="btn btn-ghost btn-sm" onclick="toggleFilters()" id="filter-toggle">
+        <span class="icon icon-13"><svg viewBox="0 0 24 24"><use href="#ic-filter"/></svg></span>
+        Filters
+        {% if activeFilters | length %}
+        <span class="badge badge-blue" style="font-size:10px;padding:1px 5px">{{ activeFilters | length }}</span>
+        {% endif %}
+      </button>
+      {% endif %}
+
+      {# Export dropdown #}
+      <div class="action-menu">
+        <button class="btn btn-ghost btn-sm action-menu-btn">
+          <span class="icon icon-13"><svg viewBox="0 0 24 24"><use href="#ic-download"/></svg></span>
+          Export
+          <span class="icon icon-12"><svg viewBox="0 0 24 24"><use href="#ic-chevron-down"/></svg></span>
+        </button>
+        <div class="action-dropdown" style="right:0;min-width:160px">
+          <a href="{{ adminPrefix }}/{{ resource.slug }}/export.csv?search={{ search }}&sort={{ sort }}&order={{ order }}{% for key, val in activeFilters %}&filter[{{ key }}]={{ val }}{% endfor %}">
+            <span class="icon icon-13"><svg viewBox="0 0 24 24"><use href="#ic-download"/></svg></span>
+            Export CSV
+          </a>
+          <a href="{{ adminPrefix }}/{{ resource.slug }}/export.json?search={{ search }}&sort={{ sort }}&order={{ order }}{% for key, val in activeFilters %}&filter[{{ key }}]={{ val }}{% endfor %}">
+            <span class="icon icon-13"><svg viewBox="0 0 24 24"><use href="#ic-download"/></svg></span>
+            Export JSON
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  {# ── Bulk action bar ── #}
+  <div class="bulk-bar" id="bulk-bar">
+    <span class="bulk-count" id="bulk-count">0 selected</span>
+    <span class="text-muted" style="font-size:12px">—</span>
+
+    {# Built-in delete #}
+    {% if resource.canDelete %}
+    <button class="btn btn-ghost btn-sm btn-danger" onclick="bulkDelete()">
+      <span class="icon icon-13"><svg viewBox="0 0 24 24"><use href="#ic-trash"/></svg></span>
+      Delete selected
+    </button>
+    {% endif %}
+
+    {# Custom bulk actions #}
+    {% for action in resource.actions %}
+    <button class="btn btn-ghost btn-sm" onclick="submitBulkAction({{ action.index }})">
+      <span class="icon icon-13"><svg viewBox="0 0 24 24"><use href="#ic-{{ action.icon or 'check' }}"/></svg></span>
+      {{ action.label }}
+    </button>
+    {% endfor %}
+
+    <button class="btn btn-ghost btn-sm" style="margin-left:auto" onclick="clearSelection()">
+      <span class="icon icon-13"><svg viewBox="0 0 24 24"><use href="#ic-x"/></svg></span>
+      Cancel
+    </button>
+  </div>
+
+  {# ── Filter panel ── #}
+  {% if filters | length %}
+  <div class="filter-row" id="filter-panel" style="display:none">
+    <form method="GET" action="{{ adminPrefix }}/{{ resource.slug }}" id="filter-form" style="display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;width:100%">
+      <input type="hidden" name="search"  value="{{ search }}">
+      <input type="hidden" name="sort"    value="{{ sort }}">
+      <input type="hidden" name="order"   value="{{ order }}">
+      <input type="hidden" name="perPage" value="{{ perPage }}">
+
+      {% for filter in filters %}
+      <div class="filter-group">
+        <label class="filter-label">{{ filter.label }}</label>
+        {% if filter.type == 'select' %}
+        <select name="filter[{{ filter.name }}]" class="filter-control" style="min-width:120px" onchange="this.form.submit()">
+          <option value="">All</option>
+          {% for opt in filter.options %}
+          <option value="{{ opt }}" {% if activeFilters[filter.name] == opt %}selected{% endif %}>{{ opt }}</option>
+          {% endfor %}
+        </select>
+        {% elif filter.type == 'boolean' %}
+        <select name="filter[{{ filter.name }}]" class="filter-control" style="min-width:100px" onchange="this.form.submit()">
+          <option value="">All</option>
+          <option value="1" {% if activeFilters[filter.name] == '1' %}selected{% endif %}>Yes</option>
+          <option value="0" {% if activeFilters[filter.name] == '0' %}selected{% endif %}>No</option>
+        </select>
+        {% elif filter.type == 'text' %}
+        <input type="text" name="filter[{{ filter.name }}]" class="filter-control" style="min-width:130px"
+          value="{{ activeFilters[filter.name] or '' }}" placeholder="Filter…">
+        {% elif filter.type == 'number' %}
+        <input type="number" name="filter[{{ filter.name }}]" class="filter-control" style="min-width:100px"
+          value="{{ activeFilters[filter.name] or '' }}" placeholder="0">
+        {% elif filter.type == 'dateRange' %}
+        <div style="display:flex;gap:6px;align-items:center">
+          <input type="date" name="filter[{{ filter.name }}__gte]" class="filter-control"
+            value="{{ activeFilters[filter.name + '__gte'] or '' }}" placeholder="From">
+          <span style="color:var(--text-muted);font-size:12px">→</span>
+          <input type="date" name="filter[{{ filter.name }}__lte]" class="filter-control"
+            value="{{ activeFilters[filter.name + '__lte'] or '' }}" placeholder="To">
+        </div>
+        {% endif %}
+      </div>
+      {% endfor %}
+
+      <div class="filter-group" style="flex-direction:row;align-items:flex-end;gap:6px;margin-left:auto">
+        <button type="submit" class="btn btn-ghost btn-sm">Apply</button>
+        {% if activeFilters | length %}
+        <a href="{{ adminPrefix }}/{{ resource.slug }}{% if search %}?search={{ search }}{% endif %}" class="btn btn-ghost btn-sm">
+          <span class="icon icon-12"><svg viewBox="0 0 24 24"><use href="#ic-x"/></svg></span>
+          Reset
+        </a>
+        {% endif %}
+      </div>
+    </form>
+  </div>
+  {% endif %}
+
+  {# ── Table ── #}
+  <div class="table-wrap">
+    {% if rows | length %}
+    <table id="data-table">
+      <thead>
+        <tr>
+          <th class="col-check">
+            <input type="checkbox" class="row-check" id="check-all" onchange="toggleAll(this)">
+          </th>
+          {% for field in listFields %}
+          {% set isSorted = sort == field.name %}
+          <th class="{% if field.name in sortable %}sortable{% endif %} {% if isSorted %}sort-{{ order }} sort-active{% endif %}">
+            {% if field.name in sortable %}
+            <a href="{{ adminPrefix }}/{{ resource.slug }}?sort={{ field.name }}&order={{ 'desc' if (isSorted and order == 'asc') else 'asc' }}&search={{ search }}&page={{ page }}&perPage={{ perPage }}" style="color:inherit;text-decoration:none;display:flex;align-items:center;gap:4px">
+              {{ field.label }}
+              <span class="sort-indicator"><span class="up"></span><span class="down"></span></span>
+            </a>
+            {% else %}
+            {{ field.label }}
+            {% endif %}
+          </th>
+          {% endfor %}
+          {% if resource.canEdit or resource.canDelete or resource.rowActions | length %}
+          <th class="col-actions">Actions</th>
+          {% endif %}
+        </tr>
+      </thead>
+      <tbody>
+        {% for row in rows %}
+        <tr data-id="{{ row.id }}">
+          <td class="col-check">
+            <input type="checkbox" class="row-check item-check" value="{{ row.id }}" onchange="updateBulkBar()">
+          </td>
+          {% for field in listFields %}
+          <td class="{% if loop.first %}td-primary{% endif %}">
+            {# listDisplayLinks: make column value a link to detail page #}
+            {% if loop.first or field.name in resource.listDisplayLinks or field.isLink %}
+              {% if resource.canView %}
+              <a href="{{ adminPrefix }}/{{ resource.slug }}/{{ row.id }}" style="color:inherit;text-decoration:none">
+                {{ row[field.name] | adminCell(field) | safe }}
+              </a>
+              {% else %}
+              {{ row[field.name] | adminCell(field) | safe }}
+              {% endif %}
+            {% else %}
+            {{ row[field.name] | adminCell(field) | safe }}
+            {% endif %}
+          </td>
+          {% endfor %}
+          {% if resource.canEdit or resource.canDelete or resource.rowActions | length %}
+          <td class="col-actions">
+            <div class="action-menu">
+              <button class="action-menu-btn">
+                <span class="icon icon-14">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <circle cx="12" cy="5" r="1.2" fill="currentColor" stroke="none"/>
+                    <circle cx="12" cy="12" r="1.2" fill="currentColor" stroke="none"/>
+                    <circle cx="12" cy="19" r="1.2" fill="currentColor" stroke="none"/>
+                  </svg>
+                </span>
+              </button>
+              <div class="action-dropdown">
+                {% if resource.canView %}
+                <a href="{{ adminPrefix }}/{{ resource.slug }}/{{ row.id }}">
+                  <span class="icon icon-13"><svg viewBox="0 0 24 24"><use href="#ic-eye"/></svg></span>
+                  View
+                </a>
+                {% endif %}
+                {% if resource.canEdit %}
+                <a href="{{ adminPrefix }}/{{ resource.slug }}/{{ row.id }}/edit">
+                  <span class="icon icon-13"><svg viewBox="0 0 24 24"><use href="#ic-edit"/></svg></span>
+                  Edit
+                </a>
+                {% endif %}
+                {# Custom row actions #}
+                {% for ra in resource.rowActions %}
+                {% if ra.href %}
+                <a href="{{ ra.href }}" target="_blank" rel="noopener">
+                  <span class="icon icon-13"><svg viewBox="0 0 24 24"><use href="#ic-{{ ra.icon or 'arrow-right' }}"/></svg></span>
+                  {{ ra.label }}
+                </a>
+                {% elif ra.action %}
+                <form method="POST" action="{{ adminPrefix }}/{{ resource.slug }}/{{ row.id }}/action/{{ ra.action }}" style="display:contents">
+                  <button type="submit">
+                    <span class="icon icon-13"><svg viewBox="0 0 24 24"><use href="#ic-{{ ra.icon or 'check' }}"/></svg></span>
+                    {{ ra.label }}
+                  </button>
+                </form>
+                {% endif %}
+                {% endfor %}
+                {% if resource.canDelete %}
+                <div class="sep"></div>
+                <button class="danger" onclick="confirmDelete('{{ adminPrefix }}/{{ resource.slug }}/{{ row.id }}/delete', '#{{ row.id }}')">
+                  <span class="icon icon-13"><svg viewBox="0 0 24 24"><use href="#ic-trash"/></svg></span>
+                  Delete
+                </button>
+                {% endif %}
+              </div>
+            </div>
+          </td>
+          {% endif %}
+        </tr>
+        {% endfor %}
+      </tbody>
+    </table>
+
+    {# ── Pagination ── #}
+    {% if lastPage > 1 %}
+    <div class="pagination">
+      <a class="page-btn {% if page <= 1 %}disabled{% endif %}"
+        href="{{ adminPrefix }}/{{ resource.slug }}?page={{ page - 1 }}&sort={{ sort }}&order={{ order }}&search={{ search }}&perPage={{ perPage }}"
+        {% if page <= 1 %}tabindex="-1" aria-disabled="true"{% endif %}>
+        <span class="icon icon-13"><svg viewBox="0 0 24 24"><use href="#ic-chevron-left"/></svg></span>
+      </a>
+      {% for p in range(1, lastPage + 1) %}
+        {% if p == 1 or p == lastPage or (p >= page - 2 and p <= page + 2) %}
+          <a class="page-btn {% if p == page %}active{% endif %}"
+            href="{{ adminPrefix }}/{{ resource.slug }}?page={{ p }}&sort={{ sort }}&order={{ order }}&search={{ search }}&perPage={{ perPage }}">{{ p }}</a>
+        {% elif p == 2 and page > 4 %}
+          <span class="page-ellipsis">…</span>
+        {% elif p == lastPage - 1 and page < lastPage - 3 %}
+          <span class="page-ellipsis">…</span>
+        {% endif %}
+      {% endfor %}
+      <a class="page-btn {% if page >= lastPage %}disabled{% endif %}"
+        href="{{ adminPrefix }}/{{ resource.slug }}?page={{ page + 1 }}&sort={{ sort }}&order={{ order }}&search={{ search }}&perPage={{ perPage }}"
+        {% if page >= lastPage %}tabindex="-1" aria-disabled="true"{% endif %}>
+        <span class="icon icon-13"><svg viewBox="0 0 24 24"><use href="#ic-chevron-right"/></svg></span>
+      </a>
+      <span class="page-info">
+        {{ (page - 1) * perPage + 1 }}–{{ [page * perPage, total] | min }} of {{ total }}
+      </span>
+    </div>
+    {% endif %}
+
+    {% else %}
+    <div class="empty-state">
+      <div class="empty-icon">
+        <span class="icon icon-22"><svg viewBox="0 0 24 24"><use href="#ic-table"/></svg></span>
+      </div>
+      <div class="empty-title">No {{ resource.label }} found</div>
+      <div class="empty-desc">
+        {% if search %}No results for "<strong>{{ search }}</strong>".
+        {% elif activeFilters | length %}No records match the active filters.
+        {% else %}Get started by creating your first record.{% endif %}
+      </div>
+      {% if resource.canCreate %}
+      <a href="{{ adminPrefix }}/{{ resource.slug }}/create" class="btn btn-primary">
+        <span class="icon icon-14"><svg viewBox="0 0 24 24"><use href="#ic-plus"/></svg></span>
+        New {{ resource.singular }}
+      </a>
+      {% endif %}
+    </div>
+    {% endif %}
+  </div>
+</div>
+
+{# Hidden bulk action form #}
+<form method="POST" action="{{ adminPrefix }}/{{ resource.slug }}/bulk-action" id="bulk-action-form" style="display:none">
+  <input type="hidden" name="actionIndex" id="bulk-action-index" value="">
+  <div id="bulk-action-ids"></div>
+</form>
+
+<style>
+  /* ── Date hierarchy ── */
+  .date-hierarchy {
+    display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
+    padding: 10px 0;
+  }
+  .dh-btn {
+    padding: 4px 10px; border-radius: 99px; font-size: 12.5px;
+    border: 1px solid var(--border); background: var(--surface);
+    color: var(--text-muted); text-decoration: none; font-weight: 500;
+    transition: all .12s;
+  }
+  .dh-btn:hover  { border-color: var(--primary); color: var(--primary); }
+  .dh-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }
+  .dh-sep { color: var(--text-xmuted); font-size: 13px; padding: 0 2px; }
+</style>
+
+<script>
+  // ── Filter panel ──────────────────────────────────────────────
+  const filterPanel = document.getElementById('filter-panel');
+  {% if activeFilters | length %}
+  if (filterPanel) filterPanel.style.display = 'flex';
+  {% endif %}
+  function toggleFilters() {
+    if (!filterPanel) return;
+    filterPanel.style.display = filterPanel.style.display === 'none' ? 'flex' : 'none';
+  }
+
+  // ── Per-page selector ─────────────────────────────────────────
+  function changePerPage(val) {
+    const url = new URL(window.location.href);
+    url.searchParams.set('perPage', val);
+    url.searchParams.set('page', '1');
+    window.location.href = url.toString();
+  }
+
+  // ── Bulk selection ────────────────────────────────────────────
+  const bulkBar   = document.getElementById('bulk-bar');
+  const bulkCount = document.getElementById('bulk-count');
+
+  function updateBulkBar() {
+    const checked = document.querySelectorAll('.item-check:checked');
+    const n = checked.length;
+    bulkBar.classList.toggle('visible', n > 0);
+    if (bulkCount) bulkCount.textContent = `${n} selected`;
+    const all = document.getElementById('check-all');
+    if (all) {
+      const total = document.querySelectorAll('.item-check').length;
+      all.indeterminate = n > 0 && n < total;
+      all.checked = n > 0 && n === total;
+    }
+  }
+
+  function toggleAll(master) {
+    document.querySelectorAll('.item-check').forEach(c => { c.checked = master.checked; });
+    updateBulkBar();
+  }
+
+  function clearSelection() {
+    document.querySelectorAll('.item-check, #check-all').forEach(c => { c.checked = false; c.indeterminate = false; });
+    updateBulkBar();
+  }
+
+  function bulkDelete() {
+    const ids = [...document.querySelectorAll('.item-check:checked')].map(c => c.value);
+    if (!ids.length) return;
+    confirmDelete(
+      '{{ adminPrefix }}/{{ resource.slug }}/bulk-delete',
+      `${ids.length} record${ids.length > 1 ? 's' : ''}`
+    );
+  }
+
+  function submitBulkAction(actionIndex) {
+    const ids = [...document.querySelectorAll('.item-check:checked')].map(c => c.value);
+    if (!ids.length) return;
+    const form = document.getElementById('bulk-action-form');
+    const container = document.getElementById('bulk-action-ids');
+    document.getElementById('bulk-action-index').value = actionIndex;
+    container.innerHTML = ids.map(id => `<input type="hidden" name="ids[]" value="${id}">`).join('');
+    form.submit();
+  }
+</script>
+{% endblock %}
+
 {% block title %}{{ resource.label }}{% endblock %}
 {% block topbar_title %}
   <span class="icon icon-16" style="color:var(--text-muted)">