Tri-State-Checkbox selbstgemacht
Im Projekt LISAweb ist der Einstieg des Benutzers für die Pflege seiner Testdaten eine Liste aller Testfahrzeuge für den gewählten Mandanten. Innerhalb dieser Übersicht möchten wir dem User die Möglichkeit bieten, mehrere Einträge zu selektieren. Für die selektierten Testfahrzeuge kann der Benutzer eine oder mehrere Aktionen ausführen.
Ziel ist es, eine möglichst einfache und intuitive Nutzung der Plattform zu ermöglichen. Deshalb suchten wir nach einen Weg sowohl die einzelnen Einträge der Übersicht als auch alle Einträge zusammen mit einem Click zu selektieren oder eine gewählte Auswahl zu löschen. Die verschiedenen Selektionsmöglichkeiten – alle, keins oder einige sind ausgewählt – werden visuell unterschiedlich dargestellt.
Nach einer kurzen Recherche für eine bereits bestehende Lösung entschied ich mich zu einer eigenen Umsetzung. Grund war, dass die Suche nach einem geeigneten Paket für den Node package manager npm nur veraltete und somit mit der aktuellen Version von Angular nicht mehr kompatiblen Ergebnissen lieferte. Zusätzlich stellte ich fest, dass die Dokumentation der veralteten Projekte nicht dazu geeignet war, diese als Vorlage für eine neue Implementierung zu nutzen.
Damit auch andere Entwickler von meiner Implementierung der TriStateCheckbox profitieren können, plante ich die Realisierung in Form einer Komponente, die gleichzeitig als Paket für npm der Allgemeinheit zur Verfügung gestellt wird. Innerhalb unserer tarienna Projekte profitieren wir auch von dieser Vorgehensweise, da wir die Angular-Komponente einfach wiederverwenden können.
Das fertige Package sowie die Beschreibung, wie du die ngTriStateCheckbox in dein Projekt integrieren kannst findest du im tarienna Github Repository. Dort findest du auch eine Anwendung als Beispiel, die dir hilft die Funktion der Komponente zu verstehen und diese in deine eigenen Projekte zu integrieren.
Dieser Artikel wurde von Philipp Donabauer geschrieben. Philipp ist seit 2019 Teil der tarienna Crew und maßgeblich an der Entwicklung unseres Produktes LISAweb beteiligt.
