Skip to content

feat: Replace collapsible search panels with always-visible inline filters #3325

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
Copilot wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

feat: Replace collapsible search panels with always-visible inline filters #3325

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c5f7c6b
Initial plan
Copilot Mar 5, 2026
a3156fd
feat: replace search expansion panels with always-visible filters on …
Copilot Mar 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
57 changes: 25 additions & 32 deletions src/IoTHub.Portal.Client/Components/Concentrators/ConcentratorSearch.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,36 +1,29 @@
<MudExpansionPanels>
<MudExpansionPanel Text="Search panel">
<MudGrid>
<MudItem xs="12" md="6">
<MudTextField @bind-Value="searchKeyword" Placeholder="DeviceID / DeviceName" id="searchKeyword"></MudTextField>
</MudItem>
<MudGrid>
<MudItem sm="12" md="6">
<MudText>Status</MudText>
<MudRadioGroup @bind-SelectedOption="@searchStatus" Style="display:flex;align-items:baseline" id="searchStatus">
<MudItem md="4" sm="12">
<MudRadio Option=@("true") Color="Color.Primary" id="searchStatusEnabled">Enabled</MudRadio>
</MudItem>
<MudItem md="4" sm="12">
<MudRadio Option=@("false") Color="Color.Primary" id="searchDisabled">Disabled</MudRadio>
</MudItem>
<MudItem md="4" sm="12">
<MudRadio Option=@("") Color="Color.Secondary" id="searchStatusAll">All</MudRadio>
</MudItem>
</MudRadioGroup>

<MudGrid>
<MudItem xs="12" md="6">
<MudTextField @bind-Value="searchKeyword" Placeholder="DeviceID / DeviceName" id="searchKeyword"></MudTextField>
</MudItem>
<MudGrid>
<MudItem sm="12" md="6">
<MudText>Status</MudText>
<MudRadioGroup @bind-SelectedOption="@searchStatus" Style="display:flex;align-items:baseline" id="searchStatus">
<MudItem md="4" sm="12">
<MudRadio Option=@("true") Color="Color.Primary" id="searchStatusEnabled">Enabled</MudRadio>
</MudItem>
</MudGrid>

<MudItem xs="12">
<MudButton Variant="Variant.Outlined" Color="Color.Success" Style="margin:0.5em;" id="searchButton" OnClick=Search>Search</MudButton>
<MudButton Variant="Variant.Outlined" Color="Color.Primary" Style="margin:0.5em;" OnClick="Reset" id="resetSearch">Reset</MudButton>
</MudItem>

</MudGrid>

</MudExpansionPanel>
</MudExpansionPanels>
<MudItem md="4" sm="12">
<MudRadio Option=@("false") Color="Color.Primary" id="searchDisabled">Disabled</MudRadio>
</MudItem>
<MudItem md="4" sm="12">
<MudRadio Option=@("") Color="Color.Secondary" id="searchStatusAll">All</MudRadio>
</MudItem>
</MudRadioGroup>
</MudItem>
</MudGrid>

<MudItem xs="12">
<MudButton Variant="Variant.Outlined" Color="Color.Success" Style="margin:0.5em;" id="searchButton" OnClick=Search>Search</MudButton>
<MudButton Variant="Variant.Outlined" Color="Color.Primary" Style="margin:0.5em;" OnClick="Reset" id="resetSearch">Reset</MudButton>
</MudItem>
</MudGrid>

@code {
[Parameter]
Expand Down
26 changes: 10 additions & 16 deletions src/IoTHub.Portal.Client/Components/DeviceModels/DeviceModelSearch.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,13 @@
<MudExpansionPanels>
<MudExpansionPanel Text="Search panel">
<MudGrid>
<MudItem xs="12" md="6">
<MudTextField @bind-Value="searchText" Placeholder="Device Model Name / Device Model Description" id="searchText"></MudTextField>
</MudItem>

<MudItem xs="12">
<MudButton Variant="Variant.Outlined" Color="Color.Success" Style="margin:0.5em;" id="searchButton" OnClick=Search>Search</MudButton>
<MudButton Variant="Variant.Outlined" Color="Color.Primary" Style="margin:0.5em;" OnClick="Reset" id="resetSearch">Reset</MudButton>
</MudItem>

</MudGrid>

</MudExpansionPanel>
</MudExpansionPanels>
<MudGrid>
<MudItem xs="12" md="6">
<MudTextField @bind-Value="searchText" Placeholder="Device Model Name / Device Model Description" id="searchText"></MudTextField>
</MudItem>

<MudItem xs="12">
<MudButton Variant="Variant.Outlined" Color="Color.Success" Style="margin:0.5em;" id="searchButton" OnClick=Search>Search</MudButton>
<MudButton Variant="Variant.Outlined" Color="Color.Primary" Style="margin:0.5em;" OnClick="Reset" id="resetSearch">Reset</MudButton>
</MudItem>
</MudGrid>

@code {
[Parameter]
Expand Down
24 changes: 9 additions & 15 deletions src/IoTHub.Portal.Client/Components/EdgeModels/EdgeModelSearch.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,12 @@
<MudExpansionPanels>
<MudExpansionPanel Text="Search panel">
<MudGrid>
<MudItem xs="12" md="6">
<MudTextField id="edge-model-search-keyword" @bind-Value="searchKeyword" Placeholder="Name / Description"></MudTextField>
</MudItem>
<MudItem xs="12">
<MudButton id="edge-model-search-button" Variant="Variant.Outlined" Color="Color.Success" Style="margin:0.5em;" OnClick=Search>Search</MudButton>
<MudButton id="edge-model-search-reset-button" Variant="Variant.Outlined" Color="Color.Primary" Style="margin:0.5em;" OnClick="Reset">Reset</MudButton>
</MudItem>

</MudGrid>

</MudExpansionPanel>
</MudExpansionPanels>
<MudGrid>
<MudItem xs="12" md="6">
<MudTextField id="edge-model-search-keyword" @bind-Value="searchKeyword" Placeholder="Name / Description"></MudTextField>
</MudItem>
<MudItem xs="12">
<MudButton id="edge-model-search-button" Variant="Variant.Outlined" Color="Color.Success" Style="margin:0.5em;" OnClick=Search>Search</MudButton>
<MudButton id="edge-model-search-reset-button" Variant="Variant.Outlined" Color="Color.Primary" Style="margin:0.5em;" OnClick="Reset">Reset</MudButton>
</MudItem>
</MudGrid>

@code {
[Parameter]
Expand Down
137 changes: 66 additions & 71 deletions src/IoTHub.Portal.Client/Pages/Devices/DeviceListPage.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,85 +15,80 @@
<AuthorizedContent IsLoading="@IsLoading" IsAuthorized="@IsAuthorized">
<MudGrid>
<MudItem xs="12">
<MudExpansionPanels>
<MudExpansionPanel Text="Search panel">
<MudGrid>
<MudGrid>
<MudItem xs="12" md="6">
<MudTextField @bind-Value="searchID" Placeholder="DeviceID / DeviceName" id="searchID"></MudTextField>
</MudItem>
@foreach (DeviceTagDto tag in TagList)
{
if (tag.Searchable)
{
<MudItem xs="12" md="6">
<MudTextField @bind-Value="searchID" Placeholder="DeviceID / DeviceName" id="searchID"></MudTextField>
<MudTextField @bind-Value="searchTags[tag.Name]" Placeholder="@tag.Label"></MudTextField>
</MudItem>
@foreach (DeviceTagDto tag in TagList)
}
}

<MudItem xs="12" md="6">
<MudSelect T="LabelDto" Label="Labels" MultiSelection="true" @bind-SelectedValues="selectedLabels"
MultiSelectionTextFunc="@(new Func<List<string>, string>(GetMultiSelectionText))"
Variant="Variant.Outlined">
@foreach (var label in labels)
{
if (tag.Searchable)
{
<MudItem xs="12" md="6">
<MudTextField @bind-Value="searchTags[tag.Name]" Placeholder="@tag.Label"></MudTextField>
</MudItem>
}
<MudSelectItem T="LabelDto" Value="@label">
<MudChip Text="@label.Name" Color="Color.Primary" Style="@($"background-color: {label.Color};")" />
</MudSelectItem>
}

<MudItem xs="12" md="6">
<MudSelect T="LabelDto" Label="Labels" MultiSelection="true" @bind-SelectedValues="selectedLabels"
MultiSelectionTextFunc="@(new Func<List<string>, string>(GetMultiSelectionText))"
Variant="Variant.Outlined">
@foreach (var label in labels)
{
<MudSelectItem T="LabelDto" Value="@label">
<MudChip Text="@label.Name" Color="Color.Primary" Style="@($"background-color: {label.Color};")" />
</MudSelectItem>
}
</MudSelect>
</MudItem>

<MudItem xs="12" md="6">
<MudAutocomplete T="DeviceModelDto"
id="@nameof(DeviceModelDto.ModelId)"
@bind-Value="Model"
SearchFunc="@Search"
Label="Model"
Dense=true
For=@(() => this.Model)
Variant="Variant.Outlined"
ToStringFunc="@(x => x?.Name)"
ResetValueOnEmptyText=true
Immediate=true
Clearable=true
CoerceText=true
CoerceValue=false>
<ItemTemplate>
@context.Name
<MudText Typo="Typo.subtitle1" Class="mud-input-helper-text">
@((!string.IsNullOrEmpty(@context.Description) && @context.Description.Length > 100) ? @context.Description.Substring(0, 100) + "..." : @context.Description)
</MudText>
</ItemTemplate>
</MudAutocomplete>
</MudItem>
<MudGrid>
<MudItem sm="12" md="6">
<MudText>Status</MudText>
<MudRadioGroup @bind-SelectedOption="@searchStatus" Style="display:flex;align-items:baseline" id="searchStatus">
<MudItem md="4" sm="12">
<MudRadio Option=@("true") Color="Color.Primary" id="searchStatusEnabled">Enabled</MudRadio>
</MudItem>
<MudItem md="4" sm="12">
<MudRadio Option=@("false") Color="Color.Primary" id="searchDisabled">Disabled</MudRadio>
</MudItem>
<MudItem md="4" sm="12">
<MudRadio Option=@("") Color="Color.Secondary" id="searchStatusAll">All</MudRadio>
</MudItem>
</MudRadioGroup>

</MudSelect>
</MudItem>

<MudItem xs="12" md="6">
<MudAutocomplete T="DeviceModelDto"
id="@nameof(DeviceModelDto.ModelId)"
@bind-Value="Model"
SearchFunc="@Search"
Label="Model"
Dense=true
For=@(() => this.Model)
Variant="Variant.Outlined"
ToStringFunc="@(x => x?.Name)"
ResetValueOnEmptyText=true
Immediate=true
Clearable=true
CoerceText=true
CoerceValue=false>
<ItemTemplate>
@context.Name
<MudText Typo="Typo.subtitle1" Class="mud-input-helper-text">
@((!string.IsNullOrEmpty(@context.Description) && @context.Description.Length > 100) ? @context.Description.Substring(0, 100) + "..." : @context.Description)
</MudText>
</ItemTemplate>
</MudAutocomplete>
</MudItem>
<MudGrid>
<MudItem sm="12" md="6">
<MudText>Status</MudText>
<MudRadioGroup @bind-SelectedOption="@searchStatus" Style="display:flex;align-items:baseline" id="searchStatus">
<MudItem md="4" sm="12">
<MudRadio Option=@("true") Color="Color.Primary" id="searchStatusEnabled">Enabled</MudRadio>
</MudItem>
<MudItem md="4" sm="12">
<MudRadio Option=@("false") Color="Color.Primary" id="searchDisabled">Disabled</MudRadio>
</MudItem>
</MudGrid>
<MudItem md="4" sm="12">
<MudRadio Option=@("") Color="Color.Secondary" id="searchStatusAll">All</MudRadio>
</MudItem>
</MudRadioGroup>

<MudItem xs="12">
<MudButton Variant="Variant.Outlined" Color="Color.Success" Style="margin:0.5em;" id="searchButton" OnClick=Search>Search</MudButton>
<MudButton Variant="Variant.Outlined" Color="Color.Primary" Style="margin:0.5em;" OnClick="Reset" id="resetSearch">Reset</MudButton>
</MudItem>
</MudItem>
</MudGrid>

</MudGrid>
<MudItem xs="12">
<MudButton Variant="Variant.Outlined" Color="Color.Success" Style="margin:0.5em;" id="searchButton" OnClick=Search>Search</MudButton>
<MudButton Variant="Variant.Outlined" Color="Color.Primary" Style="margin:0.5em;" OnClick="Reset" id="resetSearch">Reset</MudButton>
</MudItem>

</MudExpansionPanel>
</MudExpansionPanels>
</MudGrid>
</MudItem>
<MudItem xs="12">
<MudTable T="DeviceListItem" ServerData=@LoadItems Dense=true Hover=true Bordered=true Striped=true @ref="table" Loading="@IsLoading" OnRowClick="@((e) => GoToDetails(e.Item))" RowStyle="cursor: pointer;">
Expand Down
Loading