Sostituisci la tendina di reparto e motivo con un bottom sheet

La MudSelect apriva un riquadro bianco che galleggiava sopra le card bianche, senza titolo, senza sfondo oscurato, con la barra di scorrimento del desktop e le righe alte quanto una riga di testo. Era la cosa che piu' di tutte faceva sembrare l'app una pagina web. Ora il campo e' una riga tappabile che mostra il valore, e la scelta arriva da un bottom sheet con il titolo del campo e righe da 56 px con il segno tondo della scelta singola: la stessa forma degli altri selettori dell'app, usabile in piedi e con i guanti. Il confronto per capire quale opzione e' quella corrente passa per l'etichetta: Scheda.Reparto ricostruisce l'oggetto al volo da codice e descrizione, quindi non e' mai lo stesso oggetto di quelli in elenco e il confronto di riferimento non avrebbe segnato mai nulla. Reparto e motivo non passano piu' dalla validazione di MudForm, perche' non sono piu' input: il controllo degli obbligatori e' esplicito e l'errore si vede sul gruppo interessato, non solo nel messaggio in cima. Si accende dopo il primo tentativo di salvataggio, non prima: un form rosso all'apertura accusa l'utente di un errore che non ha ancora commesso. La scelta fatta si segna col tono informativo: un bordo corallo intorno a un riempimento azzurro si leggeva come un errore. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
2026-09-17 12:46:48 +02:00
parent ac501dc261
commit 101b68123c
4 changed files with 204 additions and 33 deletions
@@ -0,0 +1,87 @@
+@typeparam TValue
+@using SteUp.Shared.Components.Layout.Sheet
+
+@*
+    Scelta a valore singolo. Al posto della tendina: una riga tappabile che
+    apre un bottom sheet con le opzioni a tutta larghezza.
+
+    La tendina di serie e' un residuo del web — galleggia bianca su bianco
+    sopra le card, si porta dietro la barra di scorrimento del desktop e offre
+    bersagli alti quanto una riga di testo. Qui l'elenco arriva dal basso, ha
+    un titolo, righe da 56 px e la scelta corrente segnata: si usa in piedi,
+    con una mano, anche con i guanti.
+*@
+
+<button type="button" class="select-field" disabled="@ReadOnly" @onclick="Open"
+        aria-haspopup="dialog" aria-label="@($"{Title}: {(HasValue ? SelectedLabel : Placeholder)}")">
+    <span class="select-field__value @(HasValue ? "" : "select-field__value--empty")">
+        @(HasValue ? SelectedLabel : Placeholder)
+    </span>
+    @if (!ReadOnly)
+    {
+        <i class="select-field__icon ri-arrow-down-s-line" aria-hidden="true"></i>
+    }
+</button>
+
+<ActionSheet @bind-Open="_open" Title="@Title" Subtitle="@Subtitle">
+    <div class="stack stack-xs">
+        @foreach (var item in Items)
+        {
+            var selected = IsSelected(item);
+            <button type="button" class="select-row select-row--single"
+                    aria-pressed="@(selected ? "true" : "false")"
+                    @onclick="@(() => Choose(item))">
+                <span class="select-row__check" aria-hidden="true">
+                    <i class="ri-check-line"></i>
+                </span>
+                <span class="select-row__text">
+                    <span class="select-row__title">@ItemLabel(item)</span>
+                </span>
+            </button>
+        }
+    </div>
+</ActionSheet>
+
+@code {
+    /// Titolo dello sheet: e' il nome del campo ("Reparto", "Motivo").
+    [Parameter, EditorRequired] public string Title { get; set; } = "";
+
+    [Parameter] public string? Subtitle { get; set; }
+
+    [Parameter, EditorRequired] public IEnumerable<TValue> Items { get; set; } = [];
+
+    [Parameter] public TValue? Value { get; set; }
+    [Parameter] public EventCallback<TValue?> ValueChanged { get; set; }
+
+    /// Come si scrive un'opzione. Deve essere fornita: il ToString() di un DTO
+    /// non e' un'etichetta.
+    [Parameter, EditorRequired] public Func<TValue, string?> ItemLabel { get; set; } = _ => null;
+
+    [Parameter] public string Placeholder { get; set; } = "Scegli";
+    [Parameter] public bool ReadOnly { get; set; }
+
+    private bool _open;
+
+    private bool HasValue => Value is not null;
+    private string? SelectedLabel => Value is null ? null : ItemLabel(Value);
+
+    // Il confronto passa per l'etichetta, non per l'oggetto: il valore corrente
+    // arriva ricostruito dall'entita' salvata (Scheda.Reparto lo crea al volo da
+    // codice e descrizione), quindi non e' mai lo stesso oggetto di quelli in
+    // elenco e il confronto di riferimento non segnerebbe mai nulla.
+    private bool IsSelected(TValue item) =>
+        Value is not null &&
+        string.Equals(ItemLabel(item), SelectedLabel, StringComparison.Ordinal);
+
+    private void Open()
+    {
+        if (!ReadOnly) _open = true;
+    }
+
+    private async Task Choose(TValue item)
+    {
+        _open = false;
+        Value = item;
+        await ValueChanged.InvokeAsync(item);
+    }
+}