Skip to content

Commit

Permalink
Updated advanced filter to look similar to basic filter when not editing
Browse files Browse the repository at this point in the history
  • Loading branch information
@jschick04 @bill-long
jschick04 authored and bill-long committed Feb 2, 2024
1 parent b9fb623 commit ff13b15
Show file tree
Hide file tree
Showing 10 changed files with 155 additions and 142 deletions.
18 changes: 9 additions & 9 deletions src/EventLogExpert.UI/FilterMethods.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,17 +13,17 @@ public static class FilterMethods
{
public static Dictionary<string, FilterGroupData> AddFilterGroup(
this Dictionary<string, FilterGroupData> group,
string[] folders,
string[] groupNames,
FilterGroupModel data)
{
var name = folders.First();
folders = folders.Skip(1).ToArray();
var root = groupNames.Length <= 1 ? string.Empty : groupNames.First();
groupNames = groupNames.Skip(1).ToArray();

if (group.TryGetValue(name, out var groupData))
if (group.TryGetValue(root, out var groupData))
{
if (folders.Length > 1)
if (groupNames.Length > 1)
{
groupData.ChildGroup.AddFilterGroup(folders, data);
groupData.ChildGroup.AddFilterGroup(groupNames, data);
}
else
{
Expand All @@ -32,9 +32,9 @@ public static Dictionary<string, FilterGroupData> AddFilterGroup(
}
else
{
group.Add(name,
folders.Length > 1 ?
new FilterGroupData { ChildGroup = new Dictionary<string, FilterGroupData>().AddFilterGroup(folders, data) } :
group.Add(root,
groupNames.Length > 1 ?
new FilterGroupData { ChildGroup = new Dictionary<string, FilterGroupData>().AddFilterGroup(groupNames, data) } :
new FilterGroupData { FilterGroups = [data] });
}

Expand Down
5 changes: 3 additions & 2 deletions src/EventLogExpert/Components/DetailsPane.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,10 @@
<div id="details-pane" data-toggle="@IsVisible" hidden="@(EventLogState.Value.SelectedEvent is null)">
<div id="details-resizer"></div>

<div id="details-header" class="flex-space-between">
<div id="details-header" class="flex-space-between" @onclick="ToggleMenu">
<div>Details</div>
<span class="menu-toggle" data-rotate="@IsVisible" @onclick="ToggleMenu">

<span class="menu-toggle" data-rotate="@IsVisible">
<i class="bi bi-caret-up"></i>
</span>
</div>
Expand Down
100 changes: 53 additions & 47 deletions src/EventLogExpert/Shared/Components/Filters/AdvancedFilterRow.razor
View file
Original file line number Diff line number Diff line change
@@ -1,66 +1,72 @@
@using EventLogExpert.UI
@using EventLogExpert.UI.Store.FilterPane

<div class="flex-align-center">
@if (Value.IsEditing)
{
<ValueSelect CssClass="@($"input color-dropdown {Value.Color.ToString().ToLower()}")"
T="FilterColor" @bind-Value="Value.Color">
@foreach (FilterColor item in Enum.GetValues(typeof(FilterColor)))
<div class="flex-space-between">
<div class="flex-align-center">
@if (Value.IsEditing)
{
<ValueSelect CssClass="@($"input color-dropdown {Value.Color.ToString().ToLower()}")"
T="FilterColor" @bind-Value="Value.Color">
@foreach (FilterColor item in Enum.GetValues(typeof(FilterColor)))
{
<ValueSelectItem CssClass="@($"color-dropdown-item {item.ToString().ToLower()}")" T="FilterColor" Value="item" />
}
</ValueSelect>

<span>
Expression:
<input class="input advanced-filter" type="text"
placeholder="(Id == 1000 || Id == 1001) && Description.Contains('Fault')"
value="@Value.Comparison.Value" @oninput="OnInputChanged" />
</span>
}
else if (string.IsNullOrWhiteSpace(Value.Comparison.Value))
{
<span>No Filter Specified</span>
}
else
{
@if (Value.Color != FilterColor.None)
{
<ValueSelectItem CssClass="@($"color-dropdown-item {item.ToString().ToLower()}")" T="FilterColor" Value="item" />
<div class="mx-2 @($"color-box {Value.Color.ToString().ToLower()}")"></div>
}
</ValueSelect>
}
else if (Value.Color != FilterColor.None)
{
<div class="mx-2 @($"color-box {Value.Color.ToString().ToLower()}")"></div>
}

<span>
Expression:
<input class="input advanced-filter" type="text"
placeholder="(Id == 1000 || Id == 1001) && Description.Contains('Fault')"
value="@Value.Comparison.Value" @oninput="OnInputChanged" disabled="@(!Value.IsEditing)" />
</span>
<span>@Value.Comparison.Value</span>
}
</div>

@if (Value.IsEditing)
{
if (_isAdvancedFilterValid)
<div>
@if (Value.IsEditing)
{
<button class="button button-green" type="button" @onclick="SaveFilter">
<i class="bi bi-check-circle"></i> Apply
</button>
}

<button class="button button-red" type="button" @onclick="RemoveFilter">
<i class="bi bi-dash-circle"></i> Remove
</button>
}
else
{
<button class="button" type="button" @onclick="EditFilter">
<i class="bi bi-funnel"></i> Edit
</button>

@if (Value.IsEnabled)
{
<button class="button button-red" @onclick="ToggleFilter">
<i class="bi bi-dash-circle"></i> Disable
<button class="button button-red" type="button" @onclick="RemoveFilter">
<i class="bi bi-dash-circle"></i> Remove
</button>
}
else
{
<button class="button button-green" @onclick="ToggleFilter">
<i class="bi bi-plus-circle"></i> Enable
<button class="button" type="button" @onclick="EditFilter">
<i class="bi bi-funnel"></i> Edit
</button>

@if (Value.IsEnabled)
{
<button class="button button-red" @onclick="ToggleFilter">
<i class="bi bi-dash-circle"></i> Disable
</button>
}
else
{
<button class="button button-green" @onclick="ToggleFilter">
<i class="bi bi-plus-circle"></i> Enable
</button>
}
}
}
</div>
</div>

@if (!_isAdvancedFilterValid)
{
<div hidden="@(string.IsNullOrWhiteSpace(_advancedFilterErrorMessage))">
<span class="advanced-filter-error">@_advancedFilterErrorMessage</span>
</div>
}
<div hidden="@(string.IsNullOrWhiteSpace(_errorMessage))">
<span class="advanced-filter-error">@_errorMessage</span>
</div>
37 changes: 18 additions & 19 deletions src/EventLogExpert/Shared/Components/Filters/AdvancedFilterRow.razor.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,36 +11,31 @@ namespace EventLogExpert.Shared.Components.Filters;

public sealed partial class AdvancedFilterRow
{
private Timer? _advancedFilterDebounceTimer = null;
private string _advancedFilterErrorMessage = string.Empty;
private bool _isAdvancedFilterValid;
private Timer? _debounceTimer = null;
private string _errorMessage = string.Empty;

[Parameter] public FilterModel Value { get; set; } = null!;

[Inject] private IDispatcher Dispatcher { get; init; } = null!;

private void EditFilter()
{
// Check isn't necessary (should never return false)
// but we want save button to be visible when applied from filter group
_isAdvancedFilterValid = FilterMethods.TryParseExpression(Value.Comparison.Value, out var message);
_advancedFilterErrorMessage = message;

Dispatcher.Dispatch(new FilterPaneAction.ToggleAdvancedFilterEditing(Value.Id));
}
private void EditFilter() => Dispatcher.Dispatch(new FilterPaneAction.ToggleAdvancedFilterEditing(Value.Id));

private void OnInputChanged(ChangeEventArgs e)
{
_advancedFilterDebounceTimer?.Dispose();
_debounceTimer?.Dispose();

_advancedFilterDebounceTimer = new Timer(s =>
_debounceTimer = new Timer(s =>
{
_isAdvancedFilterValid = FilterMethods.TryParseExpression(s?.ToString(), out var message);
_advancedFilterErrorMessage = message;
if (s is not string value) { return; }

if (_isAdvancedFilterValid)
if (FilterMethods.TryParseExpression(value, out var message))
{
Value.Comparison.Value = value;
_errorMessage = string.Empty;
}
else
{
Value.Comparison.Value = s?.ToString()!;
_errorMessage = message;
}

InvokeAsync(StateHasChanged);
Expand All @@ -49,8 +44,12 @@ private void OnInputChanged(ChangeEventArgs e)

private void RemoveFilter() => Dispatcher.Dispatch(new FilterPaneAction.RemoveAdvancedFilter(Value.Id));

private void SaveFilter() =>
private void SaveFilter()
{
if (!string.IsNullOrEmpty(_errorMessage)) { return; }

Dispatcher.Dispatch(new FilterPaneAction.SetAdvancedFilter(Value with { IsEditing = false, IsEnabled = true }));
}

private void ToggleFilter() => Dispatcher.Dispatch(new FilterPaneAction.ToggleAdvancedFilterEnabled(Value.Id));
}
12 changes: 6 additions & 6 deletions src/EventLogExpert/Shared/Components/Filters/FilterGroupModal.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@
<dialog id="filterGroupDialog" @ref="ElementReference">
<div class="dialog-group">
<div class="flex-column-scroll">
@foreach ((string name, FilterGroupData data) in FilterGroupState.Value.DisplayGroups)
@foreach ((string name, FilterGroupData data) in FilterGroupState.Value.DisplayGroups.OrderBy(x => x.Key))
{
if (data.ChildGroup.Count >= 1)
if (!string.IsNullOrEmpty(name))
{
<FilterGroupSection Parent="this" Name="@name" Data="data" />
}
Expand All @@ -19,12 +19,12 @@
}
}
}

<button class="button" @onclick="CreateGroup">
<i class="bi bi-plus-circle"></i> Create Group
</button>
</div>

<button class="button" @onclick="CreateGroup">
<i class="bi bi-plus-circle"></i> Create Group
</button>

<div class="footer-group">
<div>
<button class="button" @onclick="Import">Import</button>
Expand Down
4 changes: 2 additions & 2 deletions src/EventLogExpert/Shared/Components/Filters/FilterGroupModal.razor.css
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
dialog {
height: 60%;
min-width: 76rem;
height: 70%;
min-width: 84rem;

color: var(--clr-lightblue);
border-color: var(--clr-statusbar);
Expand Down
79 changes: 44 additions & 35 deletions src/EventLogExpert/Shared/Components/Filters/FilterGroupRow.razor
View file
Original file line number Diff line number Diff line change
@@ -1,48 +1,57 @@
@using EventLogExpert.UI

<div class="filter-group-row">
<div class="flex-align-center">
@if (Value.IsEditing)
{
<ValueSelect CssClass="@($"input color-dropdown {Value.Color.ToString().ToLower()}")" T="FilterColor" @bind-Value="Value.Color">
@foreach (FilterColor item in Enum.GetValues(typeof(FilterColor)))
<div class="flex-space-between">
<div class="flex-align-center">
@if (Value.IsEditing)
{
<ValueSelect CssClass="@($"input color-dropdown {Value.Color.ToString().ToLower()}")"
T="FilterColor" @bind-Value="Value.Color">
@foreach (FilterColor item in Enum.GetValues(typeof(FilterColor)))
{
<ValueSelectItem CssClass="@($"color-dropdown-item {item.ToString().ToLower()}")" T="FilterColor" Value="item" />
}
</ValueSelect>

<span>
Expression:
<input class="input advanced-filter" type="text"
placeholder="(Id == 1000 || Id == 1001) && Description.Contains('Fault')"
value="@Value.Comparison.Value" @oninput="OnInputChanged" />
</span>
}
else if (string.IsNullOrWhiteSpace(Value.Comparison.Value))
{
<span>No Filter Specified</span>
}
else
{
@if (Value.Color != FilterColor.None)
{
<ValueSelectItem CssClass="@($"color-dropdown-item {item.ToString().ToLower()}")"
T="FilterColor" Value="item" />
<div class="mx-2 @($"color-box {Value.Color.ToString().ToLower()}")"></div>
}
</ValueSelect>
}
else if (Value.Color != FilterColor.None)
{
<div class="mx-2 @($"color-box {Value.Color.ToString().ToLower()}")"></div>
}

<span>
Expression:
<input class="input advanced-filter" type="text"
placeholder="(Id == 1000 || Id == 1001) && Description.Contains('Fault')"
value="@Value.Comparison.Value" @oninput="OnInputChanged" disabled="@(!Value.IsEditing)" />
</span>
<span>@Value.Comparison.Value</span>
}
</div>

@if (Value.IsEditing)
{
if (_isFilterValid)
<div>
@if (Value.IsEditing)
{
<button class="button button-green" type="button" @onclick="SaveFilter">
<i class="bi bi-check-circle"></i> Apply
<i class="bi bi-check-circle"></i> Save
</button>
}

<button class="button button-red" type="button" @onclick="RemoveFilter">
<i class="bi bi-dash-circle"></i> Remove
</button>
}
else
{
<button class="button" type="button" @onclick="EditFilter">
<i class="bi bi-funnel"></i> Edit
</button>
}
<button class="button button-red" type="button" @onclick="RemoveFilter">
<i class="bi bi-dash-circle"></i> Remove
</button>
}
else
{
<button class="button" type="button" @onclick="EditFilter">
<i class="bi bi-funnel"></i> Edit
</button>
}
</div>
</div>

<div class="error-row" hidden="@(string.IsNullOrWhiteSpace(_errorMessage))">@_errorMessage</div>
Expand Down
Loading

0 comments on commit ff13b15

Please sign in to comment.