teams: slightly changed the design and improved filtering options

This commit is contained in:
2026-05-06 09:26:24 +02:00
parent a14cc8a0d9
commit 2ec32ebd7e
3 changed files with 238 additions and 15 deletions
+95 -7
View File
@@ -10,26 +10,116 @@
<vm:TeamsViewModel />
</Design.DataContext>
<UserControl.Styles>
<Style Selector="Button.dropdown-item">
<Setter Property="Padding" Value="8,4"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
</Style>
<Style Selector="Button.dropdown-item:pointerover">
<Setter Property="Background" Value="{DynamicResource SystemControlBackgroundListLowBrush}"/>
</Style>
</UserControl.Styles>
<Grid RowDefinitions="Auto,*,Auto" ColumnDefinitions="*,*">
<TextBlock Grid.ColumnSpan="2" Grid.Row="0" Text="Teams Management" FontSize="20" FontWeight="Bold" Margin="16,16,16,8"/>
<!-- Left Panel: Team List and Filters -->
<Border Grid.Column="0" Grid.Row="1" BorderBrush="Gray" BorderThickness="1" Margin="8" CornerRadius="4" Padding="8">
<DockPanel>
<TextBlock DockPanel.Dock="Top" Text="Teams" FontSize="16" FontWeight="SemiBold" Margin="0,0,0,8"/>
<!-- Header with New Team button -->
<DockPanel DockPanel.Dock="Top" Margin="0,0,0,8">
<Button Command="{Binding CreateNewTeamCommand}" DockPanel.Dock="Right" Padding="8,4">
<StackPanel Orientation="Horizontal" Spacing="4">
<TextBlock Text="+" FontSize="16" FontWeight="Bold" VerticalAlignment="Center"/>
<TextBlock Text="New Team" VerticalAlignment="Center"/>
</StackPanel>
</Button>
<TextBlock Text="Teams" FontSize="16" FontWeight="SemiBold" VerticalAlignment="Center"/>
</DockPanel>
<!-- Filters -->
<StackPanel DockPanel.Dock="Top" Spacing="6" Margin="0,0,0,8">
<TextBlock Text="Filters" FontWeight="SemiBold" FontSize="12"/>
<TextBox Watermark="Filter by member name..." Text="{Binding FilterMemberName}"/>
<TextBox Watermark="Filter by event..." Text="{Binding FilterEventName}"/>
<TextBox Watermark="Filter by tournament..." Text="{Binding FilterTournamentName}"/>
<!-- Event Filter Dropdown -->
<Panel Name="EventFilterPanel">
<ToggleButton Name="EventFilterToggle" HorizontalContentAlignment="Left" HorizontalAlignment="Stretch" Padding="8,6"
IsChecked="{Binding IsEventDropdownOpen}">
<ToggleButton.Template>
<ControlTemplate TargetType="ToggleButton">
<Border Background="{TemplateBinding Background}" BorderBrush="Gray" BorderThickness="1" CornerRadius="4">
<ContentPresenter Content="{TemplateBinding Content}" Margin="{TemplateBinding Padding}" HorizontalAlignment="Left"/>
</Border>
</ControlTemplate>
</ToggleButton.Template>
<ToggleButton.Content>
<Panel>
<TextBlock Text="{Binding SelectedEventFilter, Mode=OneWay}"/>
<TextBlock Text="Filter by event..." Foreground="Gray" IsVisible="{Binding SelectedEventFilter, Converter={x:Static ObjectConverters.IsNull}}"/>
</Panel>
</ToggleButton.Content>
</ToggleButton>
<Popup IsOpen="{Binding IsEventDropdownOpen}" PlacementTarget="{Binding #EventFilterToggle}" Width="{Binding Bounds.Width, ElementName=EventFilterToggle}">
<Border Background="{DynamicResource SystemControlBackgroundChromeMediumBrush}" BorderBrush="Gray" BorderThickness="1" CornerRadius="4">
<DockPanel MaxHeight="200">
<TextBox DockPanel.Dock="Top" Text="{Binding EventFilterSearch}" Watermark="Search events..." Margin="4" Padding="6,4"/>
<Button DockPanel.Dock="Bottom" Content="All" Classes="dropdown-item" Foreground="Gray" Margin="4,0,4,4"
Click="OnClearEventFilter"/>
<ListBox ItemsSource="{Binding FilteredEvents}" MaxHeight="160">
<ListBox.ItemTemplate>
<DataTemplate x:DataType="x:String">
<Button Content="{Binding}" Classes="dropdown-item" Click="OnEventSelected"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</DockPanel>
</Border>
</Popup>
</Panel>
<!-- Tournament Filter Dropdown -->
<Panel Name="TournamentFilterPanel">
<ToggleButton Name="TournamentFilterToggle" HorizontalContentAlignment="Left" HorizontalAlignment="Stretch" Padding="8,6"
IsChecked="{Binding IsTournamentDropdownOpen}">
<ToggleButton.Template>
<ControlTemplate TargetType="ToggleButton">
<Border Background="{TemplateBinding Background}" BorderBrush="Gray" BorderThickness="1" CornerRadius="4">
<ContentPresenter Content="{TemplateBinding Content}" Margin="{TemplateBinding Padding}" HorizontalAlignment="Left"/>
</Border>
</ControlTemplate>
</ToggleButton.Template>
<ToggleButton.Content>
<Panel>
<TextBlock Text="{Binding SelectedTournamentFilter, Mode=OneWay}"/>
<TextBlock Text="Filter by tournament..." Foreground="Gray" IsVisible="{Binding SelectedTournamentFilter, Converter={x:Static ObjectConverters.IsNull}}"/>
</Panel>
</ToggleButton.Content>
</ToggleButton>
<Popup IsOpen="{Binding IsTournamentDropdownOpen}" PlacementTarget="{Binding #TournamentFilterToggle}" Width="{Binding Bounds.Width, ElementName=TournamentFilterToggle}">
<Border Background="{DynamicResource SystemControlBackgroundChromeMediumBrush}" BorderBrush="Gray" BorderThickness="1" CornerRadius="4">
<DockPanel MaxHeight="200">
<TextBox DockPanel.Dock="Top" Text="{Binding TournamentFilterSearch}" Watermark="Search tournaments..." Margin="4" Padding="6,4"/>
<Button DockPanel.Dock="Bottom" Content="All" Classes="dropdown-item" Foreground="Gray" Margin="4,0,4,4"
Click="OnClearTournamentFilter"/>
<ListBox ItemsSource="{Binding FilteredTournaments}" MaxHeight="160">
<ListBox.ItemTemplate>
<DataTemplate x:DataType="x:String">
<Button Content="{Binding}" Classes="dropdown-item" Click="OnTournamentSelected"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</DockPanel>
</Border>
</Popup>
</Panel>
</StackPanel>
<!-- Team List -->
<ListBox ItemsSource="{Binding Teams}"
SelectedItem="{Binding SelectedTeam}"
Margin="0,0,0,8">
SelectedItem="{Binding SelectedTeam}">
<ListBox.ItemTemplate>
<DataTemplate x:DataType="vm:TeamDisplay">
<StackPanel Spacing="2">
@@ -54,8 +144,6 @@
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<Button DockPanel.Dock="Bottom" Content="New Team" Command="{Binding CreateNewTeamCommand}" HorizontalAlignment="Stretch"/>
</DockPanel>
</Border>
@@ -1,4 +1,6 @@
using Avalonia.Controls;
using Avalonia.Interactivity;
using TournamentOrganizer.ViewModels;
namespace TournamentOrganizer.Views;
@@ -8,4 +10,44 @@ public partial class TeamsView : UserControl
{
InitializeComponent();
}
private void OnEventSelected(object? sender, RoutedEventArgs e)
{
if (sender is Button { Content: string eventName } && DataContext is TeamsViewModel vm)
{
vm.SelectEventFilter(eventName);
if (EventFilterToggle != null)
EventFilterToggle.IsChecked = false;
}
}
private void OnTournamentSelected(object? sender, RoutedEventArgs e)
{
if (sender is Button { Content: string tournamentName } && DataContext is TeamsViewModel vm)
{
vm.SelectTournamentFilter(tournamentName);
if (TournamentFilterToggle != null)
TournamentFilterToggle.IsChecked = false;
}
}
private void OnClearEventFilter(object? sender, RoutedEventArgs e)
{
if (DataContext is TeamsViewModel vm)
{
vm.ClearEventFilter();
if (EventFilterToggle != null)
EventFilterToggle.IsChecked = false;
}
}
private void OnClearTournamentFilter(object? sender, RoutedEventArgs e)
{
if (DataContext is TeamsViewModel vm)
{
vm.ClearTournamentFilter();
if (TournamentFilterToggle != null)
TournamentFilterToggle.IsChecked = false;
}
}
}