In-Place Editing mit dem b4um Generator

Rails-Daten direkt auf der Show-Seite bearbeiten – schnell und ohne Umweg über die Edit-Seite.

Was wir bauen

Mit In-Place Editing können einzelne Felder direkt auf der Show-Seite bearbeitet werden. Statt zuerst die Edit-Seite zu öffnen, genügt ein Klick auf das gewünschte Feld.

In diesem Tutorial verwenden wir ein Product-Modell und richten In-Place Editing für verschiedene Feldtypen ein:

Text
Dezimalzahl
Boolean
Select
Radio

Rich Text mit Trix, Bilder und Galerien folgen in einem separaten Tutorial.

Voraussetzungen

Für dieses Tutorial wird eine Rails-Anwendung mit installiertem b4um Generator benötigt.

Die Beispiele wurden mit b4um Generator 0.2.17 getestet.

Falls b4um noch nicht eingerichtet ist:

bin/rails generate b4um:install

Für dieses Tutorial benötigen wir noch keine Authentifizierung. In-Place Editing mit Login und geschützten Bereichen behandeln wir später separat.

Product erstellen

Als Grundlage erstellen wir ein Product mit mehreren unterschiedlichen Feldtypen:

bin/rails generate b4um:scaffold Product \
  name:string \
  price:decimal \
  status:string \
  condition:string \
  featured:boolean \
  --select="status:active=Aktiv,inactive=Inaktiv" \
  --radio="condition:new=Neu,used=Gebraucht,refurbished=Generalüberholt"

Anschließend führen wir die Migration aus:

bin/rails db:migrate

Der Scaffold enthält damit bereits die Felder, die wir später direkt auf der Show-Seite bearbeiten möchten.

Über die normale New-Seite können wir nun beispielsweise ein Produkt mit folgenden Werten anlegen:

Name:       MacBook Air M4
Price:      1299.50
Status:     Aktiv
Condition:  Neu
Featured:   No

Text direkt bearbeiten

Beginnen wir mit dem einfachsten Fall: dem Namen unseres Produkts.

Dafür genügt:

bin/rails generate b4um:in_place Product name

Der Generator erkennt den Feldtyp automatisch und richtet die benötigten Views und Controller-Anpassungen ein.

Auf der Show-Seite kann der Name anschließend direkt bearbeitet werden.

Ein Klick auf das Feld öffnet den Editor. Nach dem Speichern wird wieder die normale Darstellung angezeigt.

Dezimalzahlen bearbeiten

Auch Zahlenfelder können direkt bearbeitet werden. Für unseren Preis verwenden wir:

bin/rails generate b4um:in_place Product price

Der Generator erkennt price als Decimal-Feld und verwendet dafür einen passenden Zahleneditor.

Nach dem Speichern wird der Preis formatiert dargestellt, zum Beispiel:

1.299,50

Die Datenbank arbeitet weiterhin mit dem eigentlichen Decimal-Wert. Die Formatierung betrifft lediglich die Darstellung.

Damit eignet sich In-Place Editing beispielsweise auch für Preise, Beträge oder andere Dezimalwerte.

Boolean-Felder bearbeiten

Unser Feld featured ist ein Boolean und kann nur zwei Zustände besitzen.

Wir erzeugen dafür ebenfalls das In-Place Editing:

bin/rails generate b4um:in_place Product featured

Der b4um Generator erkennt automatisch, dass es sich um ein Boolean-Feld handelt.

Beim Bearbeiten erscheint deshalb kein normales Textfeld, sondern ein Schalter.

Eine Änderung des Schalters wird direkt gespeichert.

Select-Feld bearbeiten

Für status haben wir beim Scaffold bereits feste Werte definiert:

active   → Aktiv
inactive → Inaktiv

Damit der In-Place-Generator ebenfalls weiß, welche Auswahlmöglichkeiten verwendet werden sollen, übergeben wir dieselbe Konfiguration:

bin/rails generate b4um:in_place Product status \
  --select="status:active=Aktiv,inactive=Inaktiv"

Beim Bearbeiten erscheint nun automatisch eine Select-Auswahl.

In der Datenbank wird beispielsweise

active

gespeichert, während dem Benutzer

Aktiv

angezeigt wird.

Radio-Feld bearbeiten

Das Feld condition besitzt drei mögliche Zustände:

new          → Neu
used         → Gebraucht
refurbished  → Generalüberholt

Dafür verwenden wir die Radio-Option des Generators:

bin/rails generate b4um:in_place Product condition \
  --radio="condition:new=Neu,used=Gebraucht,refurbished=Generalüberholt"

Beim Bearbeiten werden die drei Möglichkeiten als Radio-Buttons dargestellt.

Auch hier trennt der Generator den gespeicherten Wert von der sichtbaren Beschriftung.

Mehrere Felder in einem Schritt

Wir haben die Felder in diesem Tutorial bewusst einzeln erzeugt, damit die unterschiedlichen Feldtypen leichter nachvollziehbar sind.

Normale Felder können aber auch gemeinsam an den Generator übergeben werden. Beispielsweise:

bin/rails generate b4um:in_place Product name price featured

Der Generator untersucht die Felder des Modells und wählt den passenden Editor anhand ihres Typs.

Für Select- und Radio-Felder werden zusätzlich die entsprechenden Optionen angegeben.

Das Ergebnis

Unsere Product-Show-Seite kann jetzt direkt bearbeitet werden.

Textfelder erhalten einen Texteingabebereich, Decimal-Felder einen Zahleneditor und Boolean-Felder einen Schalter. Für Felder mit vorgegebenen Auswahlmöglichkeiten können Select- oder Radio-Editoren verwendet werden.

Der Benutzer bleibt dabei auf derselben Seite und muss nicht für jede kleine Änderung zunächst die vollständige Edit-Seite öffnen.

Wie geht es weiter?

Damit haben wir die Grundlagen des In-Place Editings eingerichtet.

Der b4um Generator kann aber noch mehr als einfache Datenbankfelder direkt zu bearbeiten. Im nächsten Teil erweitern wir unser Product um Trix/Action Text, ein einzelnes Bild und eine Bildergalerie.

Dabei verbinden wir In-Place Editing außerdem mit der integrierten Lightbox.

Nächstes Tutorial:

In-Place Editing Pro – Trix, Bilder und Galerien

Meld dich an und schreibe ein Kommentar