Édition inline

Champ d'édition inline

Modifier une valeur directement dans la page de détail, sans naviguer vers une page d'édition. Réservé aux champs simples et isolés.

<!-- Normal (modifiable) -->
<div class="flex items-center gap-2">
  <input type="text" value="Creator T-Shirt"
         class="input input-bordered input-xs w-48"
         data-controller="inline-edit"
         data-inline-edit-url-value="/products/123">
  <span class="text-xs text-base-content/30">Modifiable</span>
</div>

<!-- Sauvegardé (flash input-success 1,5s) -->
<input type="text" value="Creator T-Shirt"
       class="input input-success input-xs w-48">

<!-- Erreur -->
<div>
  <input type="text" value=""
         class="input input-error input-xs w-48">
  <p class="text-xs text-error mt-1">Ce champ est obligatoire.</p>
</div>

Pattern Stimulus (Rails)

Référence d'implémentation pour les apps Rails 8 avec Hotwire. Le contrôleur écoute l'événement change et envoie un PATCH JSON.

<!-- HTML — attributs data requis -->
<input type="text" value="Valeur actuelle"
       class="input input-bordered input-xs w-full"
       data-controller="inline-edit"
       data-inline-edit-url-value="/path/to/update"
       data-inline-edit-field-value="nom">

// inline_edit_controller.js (Stimulus)
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static values = { url: String, field: String }

  change() {
    fetch(this.urlValue, {
      method: 'PATCH',
      headers: {
        'Content-Type': 'application/json',
        'X-CSRF-Token': document.querySelector('[name=csrf-token]').content
      },
      body: JSON.stringify({ [this.fieldValue]: this.element.value })
    })
    .then(r => r.ok ? this.flashSuccess() : this.flashError())
  }

  flashSuccess() {
    this.element.classList.add('input-success')
    setTimeout(() => this.element.classList.remove('input-success'), 1500)
  }

  flashError() {
    this.element.classList.add('input-error')
  }
}