feat(centralui): compact multi-select dropdowns for the audit filter bar
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.
This commit is contained in:
@@ -0,0 +1,40 @@
|
||||
@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>
|
||||
Reference in New Issue
Block a user