From 77513df6ccca680380b8e1e633b2957c72ff1b5b Mon Sep 17 00:00:00 2001
From: Thorsten Sommer <mail@tsommer.org>
Date: Sun, 18 Aug 2024 11:08:29 +0200
Subject: [PATCH] Added a split button component

---
 .../Components/Blocks/SplitButton.razor       | 24 +++++++
 .../Components/Blocks/SplitButton.razor.cs    | 64 +++++++++++++++++++
 2 files changed, 88 insertions(+)
 create mode 100644 app/MindWork AI Studio/Components/Blocks/SplitButton.razor
 create mode 100644 app/MindWork AI Studio/Components/Blocks/SplitButton.razor.cs

diff --git a/app/MindWork AI Studio/Components/Blocks/SplitButton.razor b/app/MindWork AI Studio/Components/Blocks/SplitButton.razor
new file mode 100644
index 00000000..972e11aa
--- /dev/null
+++ b/app/MindWork AI Studio/Components/Blocks/SplitButton.razor	
@@ -0,0 +1,24 @@
+@typeparam T
+
+<MudButtonGroup Color="@this.Color" Variant="Variant.Filled">
+    @if (string.IsNullOrWhiteSpace(this.Icon))
+    {
+        <MudButton OnClick="() => this.OnClick(this.selectedValue)">
+            @this.SelectedValueName()
+        </MudButton>
+    }
+    else
+    {
+        <MudButton StartIcon="@this.Icon" OnClick="() => this.OnClick(this.selectedValue)">
+            @this.SelectedValueName()
+        </MudButton>
+    }
+    <MudMenu Icon="@Icons.Material.Filled.ArrowDropDown" Style="align-self: auto;">
+        @foreach(var item in this.Items)
+        {
+            <MudMenuItem OnClick="() => this.SelectItem(item)">
+                @this.NameFunc(item)
+            </MudMenuItem>
+        }
+    </MudMenu>
+</MudButtonGroup>
\ No newline at end of file
diff --git a/app/MindWork AI Studio/Components/Blocks/SplitButton.razor.cs b/app/MindWork AI Studio/Components/Blocks/SplitButton.razor.cs
new file mode 100644
index 00000000..9a5e2434
--- /dev/null
+++ b/app/MindWork AI Studio/Components/Blocks/SplitButton.razor.cs	
@@ -0,0 +1,64 @@
+using Microsoft.AspNetCore.Components;
+
+namespace AIStudio.Components.Blocks;
+
+public partial class SplitButton<T> : ComponentBase
+{
+    [Parameter]
+    public Color Color { get; set; } = Color.Default;
+    
+    [Parameter]
+    public string Icon { get; set; } = string.Empty;
+
+    [Parameter]
+    public IReadOnlyCollection<T> Items { get; set; } = [];
+    
+    [Parameter]
+    public Func<T, string> NameFunc { get; set; } = _ => string.Empty;
+    
+    [Parameter]
+    public T? PreselectedValue { get; set; }
+    
+    [Parameter]
+    public Func<T?, Task> OnClick { get; set; } = _ => Task.CompletedTask;
+    
+    /// <summary>
+    /// What happens when the user selects an item by the dropdown?
+    /// Immediate = true means that the OnClick event is triggered immediately
+    /// after the user selects an item. Immediate = false means that the OnClick
+    /// event is triggered only when the user clicks the button.
+    /// </summary>
+    [Parameter]
+    public bool Immediate { get; set; }
+
+    #region Overrides of ComponentBase
+
+    protected override async Task OnInitializedAsync()
+    {
+        if(this.PreselectedValue is not null)
+            this.selectedValue = this.PreselectedValue;
+        else
+            this.selectedValue = this.Items.FirstOrDefault();
+        
+        await base.OnInitializedAsync();
+    }
+
+    #endregion
+
+    private T? selectedValue;
+    
+    private string SelectedValueName()
+    {
+        if(this.selectedValue is null)
+            return "Select...";
+        
+        return this.NameFunc(this.selectedValue!);
+    }
+    
+    private void SelectItem(T item)
+    {
+        this.selectedValue = item;
+        if(this.Immediate)
+            this.OnClick(this.selectedValue);
+    }
+}
\ No newline at end of file