HTML Tables Contract

YAML-Inhalt

contract:
  name: "HTML Tables Contract"
  version: "1.0"
  status: active
  scope:
    - "/src/View/**/*.php"
    - "/public/js/**/*.js"
  principles:
    - DRY    # Don't Repeat Yourself
    - CRUD   # Create, Read, Update, Delete
    - KISS   # Keep It Simple, Stupid
    - OOP    # Object-Oriented Programming
    - MVC    # Model-View-Controller
    - MVP    # Model-View-Presenter
    - YAGNI  # You Aren't Gonna Need It
    - SRP    # Single Responsibility Principle

rules:
  navigation:
    - id: NAV-001
      severity: critical
      rule: "Keine 'Aktionen'-Spalte mit Details-Button"
      fix: "ID oder Titel als Link verwenden"
      example:
        wrong: |
          <th>Aktionen</th>
          <td><button onclick="showDetails(1)">Details</button></td>
        correct: |
          <th>ID</th>
          <td><a href="/tasks/1">1</a></td>

    - id: NAV-002
      severity: critical
      rule: "Keine Modals für Detail-Ansichten"
      fix: "Echte URLs mit eigener Route verwenden"
      example:
        wrong: |
          <div id="modal" style="display:none">...</div>
          onclick="openModal()"
        correct: |
          <a href="/resource/{id}">Details</a>
          // Separate View: /src/View/resource/show.php

    - id: NAV-003
      severity: major
      rule: "Jede Ressource braucht eigene Detail-URL"
      pattern: "/{resource}/{id}"
      examples:
        - "/tasks/1"
        - "/users/42"
        - "/docs/modul/ki-tasks"

  columns:
    - id: COL-001
      severity: major
      rule: "Alle Spalten müssen sortierbar sein"
      implementation: |
        <th data-sort="id">ID</th>
        <th data-sort="title">Titel</th>
        <th data-sort="status">Status</th>

    - id: COL-002
      severity: major
      rule: "Tabelle muss Suchfeld haben"
      implementation: |
        <input type="search" id="table-search" placeholder="Durchsuchen...">

  structure:
    - id: STR-001
      severity: minor
      rule: "Konsistente Tabellenstruktur"
      template: |
        <div class="table-controls">
          <input type="search" placeholder="Durchsuchen...">
          <select id="filter-...">...</select>
        </div>
        <table data-sortable>
          <thead>
            <tr><th data-sort="...">...</th></tr>
          </thead>
          <tbody>...</tbody>
        </table>

  javascript:
    - id: JS-001
      severity: critical
      rule: "Wiederverwendbare Table-Komponente"
      file: "/public/js/components/data-table.js"
      features:
        - sorting
        - searching
        - filtering
        - pagination (optional)

    - id: JS-002
      severity: major
      rule: "Event Delegation statt inline onclick"
      example:
        wrong: |
          <button onclick="deleteItem(1)">
        correct: |
          table.addEventListener('click', (e) => {
            if (e.target.matches('[data-action="delete"]')) { ... }
          });

    - id: JS-003
      severity: minor
      rule: "ES Modules ohne Build-Tools"
      pattern: |
        <script type="module" src="/js/components/data-table.js"></script>

validation:
  pass_threshold:
    critical: 0
    major: 2
    minor: 5

examples:
  task_table:
    correct: |
      <input type="search" id="task-search" placeholder="Tasks durchsuchen...">
      <table data-sortable>
        <thead>
          <tr>
            <th data-sort="id">ID</th>
            <th data-sort="title">Titel</th>
            <th data-sort="type">Typ</th>
            <th data-sort="priority">Priorität</th>
            <th data-sort="status">Status</th>
            <th data-sort="created_at">Erstellt</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><a href="/tasks/1">1</a></td>
            <td><a href="/tasks/1">Task-Titel</a></td>
            <td>ai_task</td>
            <td>high</td>
            <td><span class="status-pending">pending</span></td>
            <td>2025-12-20</td>
          </tr>
        </tbody>
      </table>

Aktionen

Letzte Validierungen

← Zurück zur Übersicht