Sortable auf einer eigenen Seite verwenden

Mit --path trennst du die Sortieransicht von deiner normalen Index-Seite. Dein bestehendes Layout bleibt erhalten, während die Reihenfolge bequem auf einer eigenen Seite verwaltet wird.

Sortable auf einer eigenen Seite verwenden

Im ersten Tutorial haben wir b4um:sortable direkt auf die Produktübersicht angewendet. Dadurch wurde /productsselbst zur Sortieransicht.

Das ist praktisch, wenn die Index-Seite hauptsächlich zur Verwaltung der Datensätze dient.

Häufig möchtest du aber beides voneinander trennen:

Die normale Produktseite soll weiterhin ihr ursprüngliches Layout verwenden, während die Reihenfolge auf einer separaten Verwaltungsseite per Drag & Drop geändert wird.

Genau dafür unterstützt der b4um Sortable Generator die Option --path.

Ausgangspunkt

In unserem Beispiel ist Sortable bereits für das bestehende Product-Model eingerichtet:

bin/rails generate b4um:sortable Product
bin/rails db:migrate

Die Produkte besitzen damit bereits eine position, und ihre Reihenfolge wird dauerhaft in der Datenbank gespeichert.

Aktuell wird die Sortieransicht direkt unter /products angezeigt.

Hinweis: Dieses Tutorial baut auf dem vorherigen Sortable-Tutorial auf. Wenn Sortable bereits installiert ist, wird keine weitere position-Migration benötigt.

Sortieransicht auf eine eigene Seite verschieben

Wir möchten die normale Produktübersicht wieder für die Darstellung der Produkte verwenden.

Die Sortierung soll stattdessen unter

/sortierung

erreichbar sein.

Dazu führen wir den Sortable Generator erneut aus und geben mit --path den gewünschten Pfad an:

bin/rails generate b4um:sortable Product --path=sortierung

Der Generator erkennt die bereits vorhandene Sortable-Installation.

In unserem Beispiel sieht die Ausgabe so aus:

gsub       app/controllers/products_controller.rb
gsub       config/routes.rb
insert     config/routes.rb
identical  app/javascript/controllers/sortable_controller.js
identical  app/views/products/_sortable.html.erb
create     app/views/products/sort.html.erb

Es wird keine zweite Migration angelegt. Die vorhandene Positionsverwaltung wird weiterverwendet.

Gleichzeitig erhält die Sortierung ihre eigene Seite.

Die normale Produktansicht bleibt erhalten

Rufen wir anschließend wieder

/products

auf, erscheint dort nicht mehr die Sortieransicht.

Stattdessen wird das ursprüngliche Layout der Produktübersicht wieder verwendet.

In unserem Beispiel wird wieder das dreispaltige Card-Grid dargestellt

Wichtig dabei: Nur die Darstellung wurde wiederhergestellt. Die bereits gespeicherte Reihenfolge geht nicht verloren.

Die USB-C Dockingstation hatten wir im vorherigen Tutorial auf Position 1 verschoben. Deshalb erscheint sie auch im wiederhergestellten Grid weiterhin als erstes Produkt.

Das bedeutet:

Layout:       wieder Card-Grid
Reihenfolge:  weiterhin über position

Die Sortierung und die Darstellung der Datensätze sind damit voneinander getrennt.

Die separate Sortierseite

Die eigentliche Sortieroberfläche erreichen wir jetzt unter:

/sortierung

Dort zeigt der Generator eine eigene Seite mit der Überschrift:

Products sortieren

Die Oberfläche funktioniert genauso wie die Sortieransicht aus dem ersten Tutorial.

Jeder Datensatz besitzt eine Positionsnummer und einen Drag-Handle. Die Produkte können mit der Maus an die gewünschte Position gezogen werden.

Die normale Produktübersicht bleibt davon optisch unberührt.

Zwei Routen für eine Sortierseite

Für den separaten Pfad erzeugt der Generator zwei Routen.

Mit

bin/rails routes | grep sortierung

sehen wir:

sortierung     GET    /sortierung    products#sort
sort_products  PATCH  /sortierung    products#sort

Beide verwenden dieselbe sort-Action, erfüllen aber unterschiedliche Aufgaben.

GET /sortierung zeigt die Sortieroberfläche an.

PATCH /sortierung wird verwendet, wenn ein Datensatz per Drag & Drop an eine andere Position verschoben wird.

Die Sortierseite anzeigen

Damit dieselbe Controller-Action auch die Seite darstellen kann, ergänzt der Generator die bestehende sort-Action um den GET-Fall:

def sort
  if request.get?
    @products = Product.order(:position, :id)
    return
  end

  # Sortierung speichern ...
end

Beim normalen Aufruf von /sortierung werden die Produkte also anhand ihrer gespeicherten Position geladen.

Die eigentliche View bleibt bewusst klein:

<h1>Products sortieren</h1>

<%= render "sortable", products: @products %>

Der Generator verwendet das bereits vorhandene _sortable.html.erb weiter.

Es muss also keine zweite Sortieroberfläche gepflegt werden.

Reihenfolge ändern

Jetzt können wir die Reihenfolge ausschließlich auf /sortierung bearbeiten.

In unserem Beispiel steht zunächst:

1  USB-C Dockingstation
2  Aluminium Laptopständer
3  Mechanische Tastatur
4  Wireless Mouse

Wir ziehen Wireless Mouse von Position 4 auf Position 1.

Danach lautet die Reihenfolge:

1  Wireless Mouse
2  USB-C Dockingstation
3  Aluminium Laptopständer
4  Mechanische Tastatur

Die Änderung wird automatisch über die PATCH-Route gespeichert.

Auch nach einem Reload von /sortierung bleibt die neue Reihenfolge erhalten.

Die normale Ansicht übernimmt die neue Reihenfolge

Jetzt wechseln wir zurück zu:

/products

Das Card-Grid bleibt unverändert erhalten – allerdings erscheint Wireless Mouse jetzt als erstes Produkt.

Damit wird der Vorteil der getrennten Sortierseite besonders deutlich.

Auf

/sortierung

wird die Reihenfolge verwaltet.

Auf

/products

wird diese Reihenfolge im normalen Layout ausgegeben.

Die Besucher deiner Anwendung müssen die eigentliche Sortieroberfläche also nicht verwenden.

Bestehendes Layout wird wiederhergestellt

Wenn Sortable zunächst ohne --path installiert wurde, verwendet /products die Sortable-Ansicht.

Wird anschließend beispielsweise

bin/rails generate b4um:sortable Product --path=sortierung

ausgeführt, stellt der Generator für /products das vorhandene Layout wieder her.

In unserem Beispiel existiert:

app/views/products/_bento.html.erb

Dieses Partial enthält unser Card-Grid. Deshalb verwendet /products anschließend wieder genau diese Darstellung.

Die Sortieroberfläche wird dagegen auf die neue Seite /sortierung ausgelagert.

Wichtig: Die gespeicherten position-Werte werden dabei nicht zurückgesetzt. Lediglich die Sortieroberfläche wird von der normalen Index-Darstellung getrennt.

Wann ist --path sinnvoll?

Die separate Sortierseite ist besonders praktisch, wenn die normale Index-Seite eine fertige Benutzeroberfläche besitzt – beispielsweise ein Card-Grid – und diese Darstellung nicht durch die Verwaltungsfunktionen ersetzt werden soll.

So kannst du beispielsweise eine öffentliche Produktübersicht unter /products anbieten und die Reihenfolge getrennt unter /sortierung verwalten.

Später lässt sich diese Verwaltungsseite zusätzlich durch deine eigene Authentifizierung oder andere Zugriffskontrollen schützen.

Fertig

Mit nur einem zusätzlichen Generator-Aufruf:

bin/rails generate b4um:sortable Product --path=sortierung

werden Darstellung und Sortierung voneinander getrennt.

Die normale Index-Seite behält ihr bestehendes Layout, während /sortierung eine eigene Drag-&-Drop-Oberfläche erhält.

Die Reihenfolge wird weiterhin über dieselbe position-Spalte gespeichert und wirkt sich unmittelbar auf die normale Produktdarstellung aus.

Damit kannst du die Präsentation deiner Inhalte und deren Verwaltung sauber voneinander trennen, ohne eine zweite Sortierlogik entwickeln zu müssen.

Meld dich an und schreibe ein Kommentar