Labels beim erstellen eines Entries verlinken oder erstellen

[lukaswelte]

Beim erstellen eines Entries sollten die Namen der Labels die mit dem Entry verbunden werden sollen mit gesendet werden. Die API sollte dann nach dem Namen der Labels suchen und falls es dieses Label schon gibt das Label mit dem Entry verlinken. Falls das Label noch nicht existiert sollte die API das Label erstellen und mit dem Entry verlinken.

[lukaswelte]

Im Prinzip gibt es hier 3 Teile:

• [ ] Create Entry Action (Client) modifizieren, sodass die Namen der Labels mit geschickt werden
• [ ] Innerhalb der Create Entry Methode (API) die mitgeschickte Liste der Labelnamen nehmen und für jeden Label Namen checken ob es das Label mit dem Namen schon gibt (dann verlinken) oder das Label zu erstellen (und dann zu verlinken)
• [ ] Auf der Client Seite die Liste der Labels mit abgreifen und zusätzlich zum EntryStore den Label Store updaten (also die Labels die mit der Entry verbunden zum Store hinzufügen oder das bestehende Label zu aktualisieren)

Soweit klar, @ThomasW9, oder was unklar / unlogisch oder sonstige Probleme?

[ThomasW9]

Diese 3 Teile verstehe. Ich wollte im ersten den CreatLabel machen( ohne verlinken zum entry), dazu muss ich doch bei Komponenten ein CreatLabel erstellen und das dann im create entry abspeichern?

verstehe ich das so richtig?

[lukaswelte]

Nicht ganz. Innerhalb der EntryForm wird das ganze schon erstellt.. auch die Liste an Labels wird mit erstellt. Innerhalb dieser EntryForm Komponente musst du jedoch noch die Labels aus der Komponente an die Action übergeben und dann im Prinzip wirklich nur die Action modifizieren.

Schau dir mal die Entry Form Komponente an und die Create Action. Hab ich dich richtig verstanden und konnte das beantworten, @ThomasW9?

[ThomasW9]

Ja genau. Ok, ich werde das so mal versuchen, @lukaswelte

[lukaswelte]

@ThomasW9: Kannst gerne deinen Feature Branch pushen, falls ich dann mal drüber schauen soll.

[ThomasW9]

@lukaswelte , also ich hab jetzt gestern en paar Stunden was versucht, aber hab nicht wirklich was hinbekommen. Ich verstehe an sich was du willst, aber ich weiß ehrlich gesagt nicht wie die Umsetzung dazu aussehen soll. Ich denke immer zu sehr an den Beispiel das wir ein createLabel haben(obwohl wir die Komponente ja nicht haben). Deswegen hänge ich doch schon am ersten Schritt fest. Ich muss jetzt erstmal weg. Versuche heute Abend und morgen vor unserem Treffen noch etwas hin zu bekommen.

[lukaswelte]

@ThomasW9: Innerhalb der EntryForm Komponente werden einfach auch Label zugewiesen oder erstellt (-> es wird somit gerade weder eine CreateLabel Komponente als eine CreateLabel Action benötigt). Beim Klick auf Save werden die Labels sowie die sonstige Information des Entry an die CreateEntry Action übergeben. Das passiert hier: https://github.com/lukaswelte/PICO/blob/develop/public/javascripts/components/entries/entryform.js#L42

Das ist soweit alles getan. Nun habe ich aber eine Liste an Labels ein paar die schon existieren und ein paar die es noch nicht gibt. Das einzige was diese Labels also gemein haben ist der name (egal ob neu erstellt oder schon vorhanden, hat jedes Label einen Namen).

Darum würde ich in Schritt 1 innerhalb der CreateEntry Action die Liste der Labels die aktuell ein Array aus JSON ist die alle wie zb:

[
  {"id": 3, "name": "Colors"},
  {"name": "Another Label"}, 
  {"id":1, "name":"Und noch eins"}
]

diese Liste nehmen und zu einer Liste machen die nur die Namen der Labels enthält. Für das obige beispiel also:

["Colors", "Another Label", "Und noch eins"]

Diese Liste aus den Namen der Label würde ich zusätzlich zu den bisherigen Daten an den API Endpunkt CreateEntry schicken. Dieser erwartet aktuell title, url und content. Statt diesen Informationen sendest du nun also ein JSON das title, url, content sowie die Liste der Labelnamen enthält.

Soweit erst einmal auf der Action Seite.

---

And der API kommt nun also zb folgendes JSON an:

{
   "title": "Test",
   "url": "http://test.de",
   "context": "Ein kleiner Test",
   "labels": ["Test", "Mein Label"]
}

Die CreateEntry Methode der API sollte diese Liste der Labels durchlaufen und für jedes Label einmal checken ob es das Label schon gibt (also ein Label.find nach dem Label Namen) falls es noch kein solches Label mit dem Namen gibt sollte die API das Label erstellen. Nachdem das Label gefunden oder erstellt wurde verlinkt man den Entry mit den Labels und speichert den ganzen Spaß und gibt dann wie vorher das Label zurück.

---

So wieder zurück zum Client: Im success Block der Create Entry Action kommt nun also zum Beispiel folgendes JSON (was dann die variable returnedEntry ist) an:

{
   "id": 7,
   "title": "Test",
   "url": "http://test.de",
   "context": "Ein kleiner Test",
   "labels": [{"id": 5, "name": "Test", "entries": [7, 2]}, {"id": 9, "name": "Mein Label", "entries": [7]}]
}

Nun gibt es ja potentiell neue Labels somit sollten wir das nutzen und direkt unseren LabelStore aktualisieren (damit er up to date ist). Dafür solltest du innerhalb des LabelStore ein Event (diese labelStoreActions) zum update eines einzelnen Labels deklarieren und im Store auf dieses Event eine Aktion binden. Das ist quasi analog zu dem hier: https://github.com/lukaswelte/PICO/blob/217f10155b89e87362162f51ae346f431f250cb6/public/javascripts/stores/entrystore.js#L27

Nun können wir aus der Create Entry Action diese Aktualisierungsmethode aufrufen. Da die Methode nur ein einzelnes Label möchte loopen wir also über die zurückgesendeten Labels und schicken jedes einzelne Label an diese Methode des LabelStore.

Und damit sind wir komplett fertig..

[ThomasW9]

@lukaswelte ,Ich verstehe jetzt wie du vorgehen möchtest. Deine Erklärung ist vom Verständis super, aber ich weiß einfach nicht wie ich auf die arrayliste zu greife.... Ich kann ja schlecht var labelname=labelliste.name sagen oder? Ich hänge einfach schon an diesem Schritt.....

[lukaswelte]

@ThomasW9 Der Create Entry Action wird das Array aus labels direkt übergeben. Um daraus eine Liste mit nur name zu erzeugen hilft dir die map Funktion (Idee: label -> label.name). du hast also

var labelNameArray = labels.map(deineFunktionDieLabel Zu-label.name-Mapped);

Wo du natürlich deineFunktionDieLabel Zu-label.name-Mapped durch die wirkliche Funktion ersetzen musst. Das passiert zum Beispiel schon des öfteren in Komponenten. Wo eine Liste zb von Labels zu einer Liste an HTML Code Gemapped wird.

//Man kann das ganze natürlich auch mit einem klassischen For-Loop machen jedoch schreibst du da deutlich mehr Code ;)