Absenzen bearbeiten: Dropdowns Status, Grund und Vorfall als Multiselect

[fbufbi]

Die drei Dropdowns Status, Grund und Vorfall sollen umgestaltet werden, so dass mehrere oder alle Einträge ausgewählt werden können. Use case: Nach allen Vorfällen einer Klasse suchen.

Beispiel: GYM l1@test.ch

[caebr]

Hinweis:

• Falls Multiselektkomponente aufwändig und immer nach allen Vorfällen gesucht werden soll, könnte man auch eine Auswahl "Alle" einführen.

[spahrson]

Ich habe mir das nun detailliert angeschaut und dabei noch eine (zumindest technisch) gute Variante gefunden, die native HTML-Input-Elemente verwenden würde:

Variante HTML-Elemente: Im HTML Standard gibt es für für das Multiselect eig. keine Dropdowns. D.h. die kommen als Liste wie in diesem Beispiel:

Die Grösse ist frei definierbar, auch die "Alle"-Option ist möglich. Auf mobilen Endgeräten wird die Darstellen nativ optimiert. D.h. es kommt ein Dialog des Browsers mit Checkboxen (man kann das z.B. mit diesem Link testen https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_select_multiple, nur mit dem Mobile, im Browser-Responsive Mode geht das nicht). Hier wäre sicher auch die Barrierefreiheit besser gewährleistet, da native.

Variante Custom-Dropdown: Auch möglich, aber deutlich aufwändiger (auch im Testing), da kein nativer Support. Bestehende Bibliotheken funktionieren nicht mit Webcomponents (also nicht mit dem aktuellen Setup unserer App). D.h. wir bauen das komplett selbst.

@fbufbi Ist das Dropdown eine harte Anforderung? Oder könntet ihr ggf. auch mit dem MultiSelect leben?

[fbufbi]

@spahrson Besprechen wir das im Daily. Die Variante HTML-Elemente ist zwar ok für Mobile, gefällt uns aber auf Desktop gar nicht (immer alle Einträge sichtbar). Ich denke, es ist auch nicht intuitiv klar, dass mehrere Einträge mit ctrl ausgewählt werden können. Die Variante Custom-Dropdown finden wir nicht sinnvoll.
Plan B ist ein einfaches Dropdown mit dem Eintrag "Alle" zuoberst, so dass entweder ein einzelner Wert oder alle zusammen ausgewählt werden können. Kein Multiselect, aber immerhin.

[spahrson]

Hallo @fbufbi ,

die Bibliothek, die ich heute morgen kurz erwähnt hatte funktioniert gut. Diese bietet verschiedene Möglichkeiten, jedoch kein out-of-the-box 'select all'. Ich habe dies nun über eine Gruppe gelöst. Dies sieht so aus:

Ich werde versuchen dies mittels CSS noch an das Bild von dir oben anzpassen.

Zudem wäre dasselbe auch mit Checkboxen realiserbar. Im Unterschied bleibt nach einem Click das Dropdown offen:

Weiter können alle selektierten angezeigt werden oder nur eine bestimmte Anzahl, hier z.B. 2:

Habt ihr diesbez. noch irgendwelche präferenzen?

[fbufbi]

@spahrson Cool! Ich finde folgendes am besten:

1. Mit Checkboxen
2. Offen bleibendes Dropdown
3. Anzeige aller ausgewählten Einträge (also nicht "9 weitere")
4. x zum Löschen des Suchbegriffs hinten

Fragen:

• Was passiert bei Auswahl "Alle"? Werden dann alle Suchbegriffe auf einmal angezeigt, so dass das Dropdown sehr gross werden kann? Da würde ich Punkt 3 oben nochmals überdenken, da "Alle" wohl der häufigste Use Case ist.
• Ist bei Checkboxen die ganze horizontale Fläche touchbar auf Mobile oder nur die Checkbox selber? Falls es letzteres ist, könnte das auf Mobile zu einer zu kleinen Touch-Fläche führen?

[spahrson]

@fbufbi Bei "Alle" werden alle Elemente angezeigt. Ich kann das aber übersteuern und z.B. "4 Filter gewählt" anzeigen. Einfach bei der Auswahl für "Alle" auch "Alle" anzuzeigen führt dann zum selben Problem bei der Auswahl von n-1 etc.

Bei Checkboxen sind die ganzen Elemente clickbar.

[schefbi]

@spahrson Ich habe es mit @fbufbi angeschaut. So wie es jetzt ist es Ok.

[spahrson]

@schefbi super danke für die Info. Ich habe das CSS nun noch angepasst und die restlichen beiden Felder in ein Multiselect umgewandelt.

[fbufbi]

@spahrson

• Selektion von Einträgen: Selektieren ist zurzeit nur über dem Text möglich, nicht aber in der Checkbox. Die Checkbox kann ich nur für Uncheck anklicken. Bitte auch für Check ermöglichen.
• Sortierung: Bitte die Inhalte des Dropdowns Grund und Vorfall nach Sort sortieren. Zurzeit ist es ev. die ID. Das Dropdown Status kann so belassen werden, wie es ist.

[fbufbi]

Die Einträge im Dropdown sind nun einwandfrei klickbar. Mir ist einzig noch aufgefallen, dass die X zum Löschen des Suchbegriffs resp. aller Suchbegriffe ungleich gestaltet sind. Was meint ihr dazu, ist das eine Inkonsistenz oder so normal, weil es unterschiedliche Felder sind?

[spahrson]

@fbufbi ja das ist etwas unschön. Leider lässt sichd as Clear-All X bei den Multiselects nur mittels CSS beeinflussen. D.h. ich kann kein bootstrap-icon wie beim Typeahead-Feld hinzufügen. Wir könnten versuchen uns dem anzunähern oder alternativ das Icon beim Typahead anzugleichen. Auch wäre möglich das Clear-All komplett zu entfernen.

Nebst dem Clear-All ist übrigens auch der Dropdown-Pfeil etwas anders als bei "normalen" Selects. Dies, weil die normalen Selects native Browser-Elemente sind, während das Mutliselect eben kein natives Element ist. Dies fällt hier nicht auf, weil nur Multiselect Dropodowns auf dieser Seite sind. Hier ist eine Annäherung fast unmöglich, weil sich die Skalierung von nativen Browser-Elementen ganz anders verhält als CSS.

Andere Möglichkeiten müssten wir in der ng-select Bibliothek einspielen/comitten.

[fbufbi]

@spahrson Danke für deine Erklärung, das ist ok, wir lassen es mal so.
Nur ein Detail: Bitte "Alle" nicht fett formatieren. Durch die Linie darunter hebt es sich schon genug ab und muss nicht doppelt formatiert werden. Wir setzen die Linie auch an anderen Orten zur Trennung ohne weitere Formatierung ein, z.B. beim Vorfall erfassen:

[spahrson]

@fbufbi habe die font-weight angepasst.

[fbufbi]

@spahrson Wir haben den Build von heute Morgen 10:37 installiert und der Text ist immer noch fett. Wurde dieser Change ev. noch nicht gebuildet?

[spahrson]

@fbufbi es müsste enthalten sein. Es ist eine CSS Änderung. Kannst du mal ein Hard-Refresh machen mittels [SHIFT]+[F5]?

[fbufbi]

@spahrson Es scheint sich wie folgt zu verhalten:

• 'Alle' nicht ausgewählt: fett
• 'Alle' ausgewählt: nicht fett und grau (währenddessen die Gründe schwarz bzw. deutlich dunkler sind)

'Alle' sollte immer gleich formatiert sein wie die Gründe und sich nicht verändern:

[fbufbi]

@spahrson Würdest du bitte das Wort "Alle" überall noch auf Französisch übersetzen => Tout Tous

[spahrson]

@fbufbi Habe CSS und Übersetzung angepasst.

[fbufbi]

@spahrson Würdest du bitte die Übersetzung von "Alle" anpassen zu "Tous" (statt "Tout") - sorry, das ist mein Fehler, der Übersetzungsdienst hat mich hier nämlich korrigiert, ich habe noch nachgefragt,
Die Formatierung ist nun 1A, danke!

[fbufbi]

Test OK