Add operator selection to grid filter rows for dates/numbers

Introduce custom filter row cell templates for date and numeric columns in CatalogsGrid and MassDataGrid. Users can now select a filter operator (e.g., =, <, >, <=, >=) alongside the filter value for columns like AddedWhen, ChangedWhen, and Amount. Updated filter criteria logic to support these operators using DevExpress expressions. Added new CSS for filter row alignment and appearance. Removed obsolete methods and improved layout logic. This enhances filtering flexibility and user experience in both grids.

DbFirst.BlazorWebApp/Components/CatalogsGrid.razor

@@ -3,6 +3,7 @@
 @using Microsoft.AspNetCore.Components.Rendering
 @using Microsoft.AspNetCore.Components.Forms
 @using DevExpress.Blazor
+@using DevExpress.Data.Filtering
 @inject CatalogApiClient Api
 @inject LayoutApiClient LayoutApi
 @inject IJSRuntime JsRuntime
@@ -32,6 +33,21 @@
     .band-columns {
         max-width: 720px;
     }
+    .filter-row-cell {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        flex-wrap: wrap;
+    }
+    .filter-operator {
+        width: 52px;
+        min-width: 52px;
+        flex: 0 0 52px;
+    }
+    .filter-value {
+        min-width: 140px;
+        flex: 1 1 140px;
+    }
 </style>
 
 @if (!string.IsNullOrWhiteSpace(errorMessage))
@@ -145,6 +161,10 @@ else
     private ValidationMessageStore? validationMessageStore;
     private IGrid? gridRef;
     private string popupHeaderText = "Edit";
+    private DateTime? addedWhenFilterValue;
+    private string addedWhenFilterOperator = "=";
+    private DateTime? changedWhenFilterValue;
+    private string changedWhenFilterOperator = "=";
     private const string LayoutType = "GRID_BANDS";
     private const string LayoutKey = "CatalogsGrid";
     private const string LayoutUserStorageKey = "layoutUser";
@@ -171,7 +191,17 @@ else
         new() { Value = 1, Text = "PRTBMY_CATALOG_SAVE" }
     };
 
+    private readonly List<FilterOperatorOption> filterOperators = new()
+    {
+        new() { Value = "=", Text = "=" },
+        new() { Value = "<", Text = "<" },
+        new() { Value = ">", Text = ">" },
+        new() { Value = "<=", Text = "<=" },
+        new() { Value = ">=", Text = ">=" }
+    };
+
     private bool CanSaveBandLayout => !string.IsNullOrWhiteSpace(layoutUser);
+    private bool gridLayoutApplied;
 
     protected override async Task OnInitializedAsync()
     {
@@ -181,6 +211,16 @@ else
         await LoadCatalogs();
     }
 
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (!gridLayoutApplied && gridRef != null && bandLayout.GridLayout != null)
+        {
+            gridRef.LoadLayout(bandLayout.GridLayout);
+            gridLayoutApplied = true;
+            await InvokeAsync(StateHasChanged);
+        }
+    }
+
     private void SetEditContext(EditContext context)
     {
         if (editContext == context)
@@ -474,6 +514,33 @@ else
         UpdateBandOptions();
     }
 
+    private async Task ResetBandLayoutAsync()
+    {
+        if (string.IsNullOrWhiteSpace(layoutUser))
+        {
+            return;
+        }
+
+        await LayoutApi.DeleteAsync(LayoutType, LayoutKey, layoutUser);
+        bandLayout = new BandLayout();
+        columnBandAssignments.Clear();
+        UpdateBandOptions();
+        infoMessage = "Band-Layout zurückgesetzt.";
+    }
+
+    private void ApplyColumnLayoutFromStorage()
+    {
+        foreach (var column in columnDefinitions)
+        {
+            if (bandLayout.ColumnWidths.TryGetValue(column.FieldName, out var width) && !string.IsNullOrWhiteSpace(width))
+            {
+                column.Width = width;
+            }
+        }
+
+        columnLookup = columnDefinitions.ToDictionary(column => column.FieldName, StringComparer.OrdinalIgnoreCase);
+    }
+
     private void AddBand()
     {
         bandLayout.Bands.Add(new BandDefinition
@@ -637,9 +704,97 @@ else
             builder.AddAttribute(seq++, "ReadOnly", true);
         }
 
+        if (string.Equals(column.FieldName, nameof(CatalogReadDto.AddedWhen), StringComparison.OrdinalIgnoreCase))
+        {
+            builder.AddAttribute(seq++, "FilterRowCellTemplate", BuildAddedWhenFilterTemplate());
+        }
+        else if (string.Equals(column.FieldName, nameof(CatalogReadDto.ChangedWhen), StringComparison.OrdinalIgnoreCase))
+        {
+            builder.AddAttribute(seq++, "FilterRowCellTemplate", BuildChangedWhenFilterTemplate());
+        }
+
         builder.CloseComponent();
     }
 
+    private RenderFragment<GridDataColumnFilterRowCellTemplateContext> BuildAddedWhenFilterTemplate()
+    {
+        return BuildDateFilterTemplate(
+            () => addedWhenFilterValue,
+            value => addedWhenFilterValue = value,
+            () => addedWhenFilterOperator,
+            value => addedWhenFilterOperator = value);
+    }
+
+    private RenderFragment<GridDataColumnFilterRowCellTemplateContext> BuildChangedWhenFilterTemplate()
+    {
+        return BuildDateFilterTemplate(
+            () => changedWhenFilterValue,
+            value => changedWhenFilterValue = value,
+            () => changedWhenFilterOperator,
+            value => changedWhenFilterOperator = value);
+    }
+
+    private RenderFragment<GridDataColumnFilterRowCellTemplateContext> BuildDateFilterTemplate(
+        Func<DateTime?> getValue,
+        Action<DateTime?> setValue,
+        Func<string> getOperator,
+        Action<string> setOperator)
+    {
+        return context => builder =>
+        {
+            var seq = 0;
+            builder.OpenElement(seq++, "div");
+            builder.AddAttribute(seq++, "class", "filter-row-cell");
+
+            builder.OpenComponent<DxComboBox<FilterOperatorOption, string>>(seq++);
+            builder.AddAttribute(seq++, "Data", filterOperators);
+            builder.AddAttribute(seq++, "TextFieldName", "Text");
+            builder.AddAttribute(seq++, "ValueFieldName", "Value");
+            builder.AddAttribute(seq++, "Value", getOperator());
+            builder.AddAttribute(seq++, "ValueChanged", EventCallback.Factory.Create<string>(this, value =>
+            {
+                setOperator(value);
+                UpdateFilterCriteria(context, value, getValue());
+            }));
+            builder.AddAttribute(seq++, "CssClass", "filter-operator");
+            builder.CloseComponent();
+
+            builder.OpenComponent<DxDateEdit<DateTime?>>(seq++);
+            builder.AddAttribute(seq++, "Date", getValue());
+            builder.AddAttribute(seq++, "DateChanged", EventCallback.Factory.Create<DateTime?>(this, value =>
+            {
+                setValue(value);
+                UpdateFilterCriteria(context, getOperator(), value);
+            }));
+            builder.AddAttribute(seq++, "ClearButtonDisplayMode", DataEditorClearButtonDisplayMode.Auto);
+            builder.AddAttribute(seq++, "CssClass", "filter-value");
+            builder.CloseComponent();
+
+            builder.CloseElement();
+        };
+    }
+
+    private void UpdateFilterCriteria(GridDataColumnFilterRowCellTemplateContext context, string op, DateTime? value)
+    {
+        if (!value.HasValue)
+        {
+            context.FilterCriteria = null;
+            return;
+        }
+
+        var prop = new OperandProperty(context.DataColumn.FieldName);
+        var date = value.Value.Date;
+        context.FilterCriteria = op switch
+        {
+            "=" => new GroupOperator(GroupOperatorType.And, prop >= date, prop < date.AddDays(1)),
+            "<" => prop < date,
+            "<=" => prop < date.AddDays(1),
+            ">" => prop >= date.AddDays(1),
+            ">=" => prop >= date,
+            _ => prop == date
+        };
+    }
+
     private sealed class BandLayout
     {
         public List<BandDefinition> Bands { get; set; } = new();
@@ -693,42 +848,9 @@ else
         public string Text { get; set; } = string.Empty;
     }
 
-    private async Task ResetBandLayoutAsync()
+    private sealed class FilterOperatorOption
     {
-        if (string.IsNullOrWhiteSpace(layoutUser))
-        {
-            return;
-        }
-
-        await LayoutApi.DeleteAsync(LayoutType, LayoutKey, layoutUser);
-        bandLayout = new BandLayout();
-        columnBandAssignments.Clear();
-        UpdateBandOptions();
-        infoMessage = "Band-Layout zurückgesetzt.";
-    }
-
-    private void ApplyColumnLayoutFromStorage()
-    {
-        foreach (var column in columnDefinitions)
-        {
-            if (bandLayout.ColumnWidths.TryGetValue(column.FieldName, out var width) && !string.IsNullOrWhiteSpace(width))
-            {
-                column.Width = width;
-            }
-        }
-
-        columnLookup = columnDefinitions.ToDictionary(column => column.FieldName, StringComparer.OrdinalIgnoreCase);
-    }
-
-    private bool gridLayoutApplied;
-
-    protected override async Task OnAfterRenderAsync(bool firstRender)
-    {
-        if (!gridLayoutApplied && gridRef != null && bandLayout.GridLayout != null)
-        {
-            gridRef.LoadLayout(bandLayout.GridLayout);
-            gridLayoutApplied = true;
-            await InvokeAsync(StateHasChanged);
-        }
+        public string Value { get; set; } = string.Empty;
+        public string Text { get; set; } = string.Empty;
     }
 }