Verbesserung
Top-Thema
Wichtig
Kleinigkeit
Wichtig
Verbesserung
(Nutzer-sichtbar)
Wichtig
#23470
Grid: Zusammenlegen von Filter- und Sortierungsbuttons im Spaltenheader
Statt Filtern und Sortieren über zwei getrennte Icons aufzurufen, soll Sortieren in den Filter-Dialog mit aufgenommen werden, um Platz in den Spaltentiteln zu sparen - analog zu Excel. Es soll aber die Möglichkeit weiterhin bestehen, in einer Sicht der Applikation das Sortieren zu deaktivieren.
Verbesserung
Die Befehle zum Sortieren befinden sich jetzt im gleichen Dialog wie die Filteroptionen und werden ähnlich wie in einem Kontextmenü angezeigt. Falls die Spalte bereits sortiert ist wird der entsprechende Eintrag farblich markiert. Der Dialog schließt sich sobald eine Sortierung gewählt wird. \\ 
\\ Das Icon zum Öffnen des Dialogs ändert sich je nach Zustand. Es zeigt den aktuellen Sortierzustand und auch den Filterzustand an, ebenso ob sortieren oder filtern überhaupt möglich ist: \\ 
\\
Anwendung
Ein BlockControl mit den entsprechenden SortCommands wird an PopupFilterDialogBuilder.createFilterDialogContent(TableFilterModel, DisplayContext, FormContext, BlockControl) weitergegeben, um es in den Filter Dialog zu rendern. Falls BlockControl null ist werden nur die Filteroptionen im Dialog angezeigt und die Spalte ist nicht filterbar. \\ Falls eine Spalte ausschließlich sortierbar ist, wird kein Dialog mit dem PopupFilterDialogBuilder erstellt, sondern ein eigenes PopupDialogControl mit Hilfe der TableControl.OpenSortDialogAction.\\
Per default handelt es sich bei den Filter und Sortier Icons um Fontawesome Icons, deren Farbe sich an der aktuellen Schriftfarbe orientiert. Sie kann mit color in CSS angepasst werden. Folgende Icons müssen in den theme-settings überschrieben werden, falls Änderungen erwünscht sind:
- Spalte ist sortierbar: com.top_logic.layout.table.renderer.Icons.SORTABLE
- Spalte ist absteigend sortiert (nicht filterbar): com.top_logic.layout.table.renderer.Icons.SORT_DESC
- Spalte ist aufsteigend sortiert (nicht filterbar): com.top_logic.layout.table.renderer.Icons.SORT_ASC
- Spalte ist aufsteigend sortiert (filterbar): com.top_logic.layout.table.renderer.Icons.SORT_ASC_SMALL
- Spalte ist absteigend sortiert (filterbar):com.top_logic.layout.table.renderer.Icons.SORT_DESC_SMALL
- Icon für Filter: com.top_logic.layout.table.renderer.Icons.FILTER
Außerdem kann FILTER_SORT_DIALOG_SORT_STATE überschrieben werden, um die Farbe zu ändern, in der der aktuelle Sortierzustand im Dialog angezeigt wird.\\ Die Icons haben nun Tooltips, die anzeigen was sie tun und auch den aktuellen Sortierzustand angeben (falls sortiert ist).\\ Ob eine Spalte sortierbar und/oder filterbar ist kann wie vorher auch konfiguriert werden.
{{{#!xml <column name="filterbare Spalte"
sortable="false"
/> <column name="sortierbare Spalte"
filterProvider=""
/> <column name="nicht sortier- oder filterbare Spalte"
filterProvider=""
sortable="false"
/> <column name="sortier- oder filterbare Spalte"
<-- Keine Angabe notwendig -->
/> }}}
Test
Eine Tabelle mit allen konfigurierbaren Spalten und entsprechenden Icons findet man unter Technische Demo > Layout-Framework#1 > Tabellen > Filter und Sort-Icons. Dort können alle Zustände des Icons inklusive der Tooltips überprüft und auch deren Funktionen getestet werden.
Code Migration
Die folgenden Funktionen haben eine neue Signatur erhalten und müssen angepasst werden:
- TableControl.getFilterActivateElementID(String) wurde zu TableControl.getColumnActivateElementID(String)
- DefaultTableRenderer.writeFilterTag(DisplayContext, TagWriter, RenderState, int) wurde zu DefaultTableRenderer.writeFilterSortTag(DisplayContext, TagWriter, RenderState, int)
- CellRef.filterButtonId() wurde zu CellRef.sortFilterButtonId()
- FilterDialogBuilder.createFilterDialogContent(TableFilterModel, DisplayContext, FormContext, Optional<BlockControl>) und die Implementierungen PopupFilterDialogBuilder und DummyFilterDialogBuilder erhalten jetzt zusätzlich ein Optional<BlockControl> für die SortCommands. Kann empty sein, dann werden keine SortCommands eingefügt und nur ein Filterdialog gebaut.
- TableFilter.openFilterDialog(DisplayContext, PopupHandler, Optional<BlockControl>) hat ebenso ein Optional<BlockControl> erhalten das empty sein kann (in dem Fall werden keine SortCommands hinzugefügt.
- DefaultTableRenderer.writeSortImage(DisplayContext, TagWriter, ThemeImage, String, String) erhält jetzt statt TableControl, Spaltenindex und zwei Booleanwerte einen String mit eines CSS Klasse, die verwendet werden soll und einen String mit Tooltip für das Icon.