OKR Frontend - Toaster einbauen - Githubissues

puzzle-bbt / bbt

Einführung und Dokumentationen zum Berufs-Bildungs-Team von Puzzle ITC.

3 stars 0 forks source link

OKR Frontend - Toaster einbauen #350

Open tuxmatta opened 1 year ago

tuxmatta commented 1 year ago

Als Kunde möchte ich eine Benachrichtigung für verschiedene Ereignisse angezeigt bekommen, damit man über Fehler- oder Erfolgsmeldungen informiert ist.

Anforderungen

Beim Erstellen oder Ändern von Objectives, KeyResults, Measures und Teams soll über der Toaster der Erfolg oder der Fehler angezeigt werden.
Die Meldungen sollen nach 5 Sekunden ausgeblendet werden.
Die Meldungen werden mit einem Klick auch ausgeblendet.

Hinweis:

Mögliche Implementierungen eines Toaster sind.
- MatSnackBar
- angular-toaster
- Beispiel von FMSX

Akzeptanzkriterien

[x] Die Story ist wie beschrieben umgesetzt
[x] Angular Komponente und das Template sind mit Jest getestet

Anpassungen an der Story

Anpassungen sind mit Jonas oder Paco vorab zu besprechen und an dieser Stelle einzutragen

MarcEgliP commented 1 year ago

Vorgehen:

[x] Neuen Branch erstellen feature/350-toaster-erstellen
[x] Hinweise durchlesen, für eine Variante entscheiden und in diesem Ticket begründen warum
[x] Variante in Frontend umsetzten
[x] Implementierung testen
[x] Code Formatieren + Tests laufen lassen
[x] Wenn alles OK Pushen und rebasen

MarcEgliP commented 1 year ago

Variante: Ich habe mich entschieden, den angular-toaster zu verwenden, da ich noch mit ihm noch nie zuvor etwas gemacht haben und dies mich somit in der Lernentwicklung weiterbringt.

Edit: Ich musste auf den ngx-toastr umsetzen: https://www.npmjs.com/package/ngx-toastr

, da sich der angular-toaster nicht implementieren liess (besser gesagt: Die Integration hat geklappt, der Aufruf zum Toasterservice jedoch nicht)

MarcEgliP commented 1 year ago

Was jetzt gemacht wurde:

Der Toaster wurde für das objective-form, keyresult-form, team-form implementiert und getestet
Die Tests von ngx wurden nicht implementiert da: ngx verwendet eine openToast() welche einen Toast displayed, diesen in einer Variable abspeichert und returned. Danach wird die returnte Variable überprüft. In diesem Projekt returnen wir keinen Toast bei einem Klick auf Erstellen, weswegen wir diese Tests nicht umsetzten und lediglich den call zum ngx toastr package überprüfen.

Link zu den ngx-toastr tests: https://github.com/scttcper/ngx-toastr/blob/efaf809a05d56ecb3b7d6a9652aa0fd2ddb2dc9c/src/app/home/home.component.spec.ts

MarcEgliP commented 1 year ago

Das Ticket ist blocked, weil zuerst das Ticket #316 gemerged werden muss, damit der Toastr nach dem rebasen auch in das measure-form eingefügt werden kann.

MarcEgliP commented 1 year ago

Toastr wurde jetzt auch im MeasureForm implementiert. Was jetzt noch gemacht werden muss:

[x] Dieses noch getestet werden
[x] Als Vorlage können die anderen Tests der Forms für den Toastr genommen werden