Phoenix LiveView: belongs_to Assoziation

In zwei vorherigen Beiträgen habe ich gezeigt, wie du Ansichten in LiveView sortieren und filtern kannst.

Nehmen wir an, wir möchten jetzt Kontakte anlegen, denen ein Land zugeordnet werden kann, so dass ein Kontakt ein zugehöriges Land besitzt.

In diesem Artikel zeige ich, wie du das Modell und die Ansichten für den Kontakt generierst und wie du alles anpassen musst, damit der Benutzer das Land in der Form für den Kontakt aus einer Liste auswählen kann und damit das Land in der Liste der Kontakte korrekt angezeigt wird.

Das Projekt findet ihr auf Github.

Modell generieren

Um das Modell und die LiveView-Ansichten dazu anzulegen, führen wir folgenden Befehl aus:

mix phx.gen.live Basics Contact contacts name:string country_id:references:countries

Der Generator wird dich warnen, dass im Basics-Kontext bereits ein Schema existiert. Du kannst die Frage, ob du das Kontakte-Schema im selben Kontext anlegen möchtest, einfach bestätigen.

Die Kontakte haben damit einen Namen und ein Land. Mit references als Typ legen wir fest, dass für das Land die ID in der Kontakt-Tabelle eingetragen wird.

Wir tragen sodann die entsprechenden Routen ein:

Ebenfalls führen wir die Migration durch, um die entsprechende Tabelle in der Datenbank anzulegen:

mix ecto.migrate

Ansichten und Formulare anpassen

Wenn wir jetzt die Kontakte aufrufen wollen, kommt eine Fehlermeldung:

Das liegt an unseren Anpassungen an der Tabellenansicht zum Filtern. Da hier erst einmal die Kontakt-Erstellung im Mittelpunkt stehen soll, fügen wir in der index-Ansicht einen leeren Filter (Zeile 12) ein:

Die Liste der Kontakte wird nun angezeigt, allerdings können wir für neue Kontakte nur Namen eingeben, keine Länder:

Um die Länder in das Formular einzufügen, müssen wir ein entsprechendes Feld in der Form hinzufügen:

Ebenfalls rufen wir die verfügbaren Länder in der Datenbank ab:

Wir wandeln die Liste der Länder über Map in eine Liste von Tupeln aus ID und Name des Landes um. Diese verwendet das Select-Field: Die ID als Wert und der Name wird in der Auswahl angezeigt.

Auch müssen wir die Verknüpfung zum Land auch noch im Changeset des Kontakts hinzufügen:

Jetzt können wir das Land aus einer Liste aller vorhandenen Länder auswählen:

Nun würden wir uns einen soeben erstellten Kontakt gerne ansehen und öffnen diesen dann in der Liste. Dort steht allergings nur der Name des Kontakts. In der Ansicht fügen wir daher auch das Land hinzu:

So zeigt die Ansicht allerdings nur die ID des Landes an. Um stattdessen den Namen zu sehen, müssen wir die Felddefinition für das Land von :id auf belong_to wechseln:

Ebenfalls müssen wir das entsprechende Land aus der Datenbank abrufen, wenn ein Kontakt abgerufen wird. Dazu fügen wir einen Preload-Aufruf im Abruf hinzu:

Dieser Aufruf sorgt dafür, dass das Land dem Datensatz hinzugefügt wird, sobald er abgerufen wird.

Um das Land auch in der Liste anzuzeigen, fügen wir die entsprechende Spalte hinzu:

Jetzt müssen wir noch sicherstellen, dass neue und geänderte Datensätze auch in der LiveView ankommen. Dazu passen wir die Funktion an, die sich um das Update kümmert:

Wenn ein Kontakt abgespeichert wird, wird jetzt automatisch das Land aus der Datenbank nachgeladen, damit es in der Liste der Kontakte korrekt angezeigt wird.

Fazit

Falls Du es bis hier her geschafft hast, kannst Du nun Kontakte anlegen und diesen ein Land aus der Liste der Länder zuweisen.

Bei Fragen und Anregungen zum Artikel schreib gerne in die Kommentare oder schreib mir eine Mail!

Bis dahin viel Spaß beim Lernen und Ausprobieren!