Joseph Doherty
e36f0bf9c8
Replace the four stacked chip-button groups (Channel, Kind, Status, Site) on the Audit Log filter bar with a reusable MultiSelectDropdown component, so the bar collapses from four full-width chip blocks to four inline dropdowns sharing one wrapped filter row. Bootstrap dropdown + checkbox menu (data-bs-auto-close =outside); no third-party UI libraries.
41 lines
1.5 KiB
Plaintext
41 lines
1.5 KiB
Plaintext
@typeparam TValue
|
|
@*
|
|
Compact multi-select control: a Bootstrap dropdown whose toggle button
|
|
summarises the current selection over a checkbox menu. Replaces a wrapped
|
|
block of chip buttons with a single control of one row's height.
|
|
*@
|
|
<div class="dropdown msd" data-test="@DataTest">
|
|
<button type="button"
|
|
class="btn btn-sm btn-outline-secondary dropdown-toggle msd-toggle text-start"
|
|
data-bs-toggle="dropdown"
|
|
data-bs-auto-close="outside"
|
|
aria-expanded="false"
|
|
disabled="@(Items.Count == 0)"
|
|
data-test="@($"{DataTest}-toggle")">
|
|
<span class="msd-summary">@Summary()</span>
|
|
</button>
|
|
<ul class="dropdown-menu msd-menu">
|
|
@if (Items.Count == 0)
|
|
{
|
|
<li><span class="dropdown-item-text text-muted small">@EmptyText</span></li>
|
|
}
|
|
else
|
|
{
|
|
@foreach (var item in Items)
|
|
{
|
|
var isSelected = Selected.Contains(item);
|
|
<li>
|
|
<label class="dropdown-item msd-item">
|
|
<input type="checkbox"
|
|
class="form-check-input msd-check"
|
|
checked="@isSelected"
|
|
@onchange="() => Toggle(item)"
|
|
data-test="@($"{DataTest}-opt-{item}")" />
|
|
<span>@Display(item)</span>
|
|
</label>
|
|
</li>
|
|
}
|
|
}
|
|
</ul>
|
|
</div>
|