Merge pull request #64 from Mewriick/CustomEditColumnTemplate

Feature: custom components for editing column values
Mewriick · Aug 7, 2019 · 52947dc · 52947dc
2 parents 9ab39ec + bf12d77
commit 52947dc
Show file tree

Hide file tree

Showing 17 changed files with 229 additions and 52 deletions.
diff --git a/demo/Blazor.Components.Demo.FlexGrid/GridConfigurations/WeatherForecastGridConfiguration.cs b/demo/Blazor.Components.Demo.FlexGrid/GridConfigurations/WeatherForecastGridConfiguration.cs
@@ -1,6 +1,11 @@
-using Blazor.FlexGrid.Components.Configuration;
+using Blazor.FlexGrid.Components;
+using Blazor.FlexGrid.Components.Configuration;
 using Blazor.FlexGrid.Components.Configuration.Builders;
+using Blazor.FlexGrid.Components.Renderers;
 using Blazor.FlexGrid.Demo.Shared;
+using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.RenderTree;
+using System;
 
 namespace Blazor.Components.Demo.FlexGrid.GridConfigurations
 {
@@ -21,12 +26,6 @@ public void Configure(EntityTypeBuilder<WeatherForecast> builder)
                 //.HasWritePermissionRestriction(perm => perm.IsInRole("TestRole1"))
                 .HasValueFormatter(d => d.ToShortDateString());
 
-            builder.Property(e => e.Summary)
-                .HasCaption("MySummary")
-                .HasOrder(1)
-                //.HasValueFormatter(s => $"{s}!");
-                .HasCompositeValueFormatter(f => $"{f.Summary} <button>{f.TemperatureC}</button> {f.TemperatureF}");
-
             builder.Property(e => e.TemperatureC)
                 .IsFilterable()
                 .IsSortable();
@@ -42,6 +41,38 @@ public void Configure(EntityTypeBuilder<WeatherForecast> builder)
             {
                 options.GroupPageSize = 15;
             });
+
+
+            /* Func<EditColumnContext, RenderFragment<WeatherForecast>> weatherSummaryEdit =
+                 context =>
+             {
+                 RenderFragment<WeatherForecast> summeryEdit = (WeatherForecast weather) => delegate (RenderTreeBuilder rendererTreeBuilder)
+                 {
+                     var internalBuilder = new BlazorRendererTreeBuilder(rendererTreeBuilder);
+                     internalBuilder
+                         .OpenElement(HtmlTagNames.Div, "edit-field-wrapper")
+                         .OpenElement(HtmlTagNames.Input, "edit-text-field")
+                         .AddAttribute(HtmlAttributes.Type, "text")
+                         .AddAttribute(HtmlAttributes.Value, weather.Summary)
+                         .AddAttribute(HtmlJSEvents.OnChange,
+                             BindMethods.SetValueHandler(delegate (string __value)
+                             {
+                                 context.NotifyValueHasChanged($"{__value}_CustomEdit");
+                             }, weather.Summary?.ToString() ?? string.Empty)
+                         )
+                         .CloseElement()
+                         .CloseElement();
+                 };
+
+                 return summeryEdit;
+             };
+             */
+            builder.Property(e => e.Summary)
+                .HasCaption("MySummary")
+                .HasOrder(1)
+                //.HasValueFormatter(s => $"{s}!");
+                .HasCompositeValueFormatter(f => $"{f.Summary} <button>{f.TemperatureC}</button> {f.TemperatureF}");
+                //.HasBlazorEditComponent(weatherSummaryEdit);
         }
     }
 }
diff --git a/demo/Blazor.Components.Demo.FlexGrid/Pages/Grid.razor b/demo/Blazor.Components.Demo.FlexGrid/Pages/Grid.razor
@@ -19,6 +19,18 @@
     Collection.AddColumnValueRenderFunction(w => w.Summary, weatherTemp);
     }*@
 
+@{
+    Func<EditColumnContext, RenderFragment<WeatherForecast>> editWeatherSummary = context =>
+    {
+        RenderFragment<WeatherForecast> editFragment = (weather) => @<input value=@weather.Summary @onchange=@((UIChangeEventArgs e) => context.NotifyValueHasChanged(e.Value)) />;
+
+
+return editFragment;
+};
+Collection.AddColumnEditValueRenderer(w => w.Summary, editWeatherSummary);
+
+}
+
 
 @code {
     CollectionTableDataAdapter<WeatherForecast>

diff --git a/demo/Blazor.FlexGrid.Demo.Client/Pages/Grid.razor b/demo/Blazor.FlexGrid.Demo.Client/Pages/Grid.razor
@@ -11,8 +11,17 @@
 
 @{
     RenderFragment<WeatherForecast> weatherTemp = (weather) => @<h4>@weather.Summary!!</h4>;
+Func<EditColumnContext, RenderFragment<WeatherForecast>> editWeatherSummary = context =>
+{
+RenderFragment<WeatherForecast> editFragment = (weather) =>
+@<input value=@weather.Summary @onchange=@((UIChangeEventArgs e) => context.NotifyValueHasChanged(e.Value)) />;
+
+return editFragment;
+};
+
 
 Collection.AddColumnValueRenderFunction(w => w.Summary, weatherTemp);
+Collection.AddColumnEditValueRenderer(w => w.Summary, editWeatherSummary);
 }
 
 @code{
@@ -23,4 +32,4 @@ Collection.AddColumnValueRenderFunction(w => w.Summary, weatherTemp);
         var forecast = await Http.GetJsonAsync<WeatherForecast[]>("api/SampleData/WeatherForecastsSimple");
         dataAdapter = new CollectionTableDataAdapter<WeatherForecast>(forecast);
     }
-}
+}
diff --git a/src/Blazor.FlexGrid/Blazor.FlexGrid.csproj b/src/Blazor.FlexGrid/Blazor.FlexGrid.csproj
@@ -7,14 +7,14 @@
     <BlazorLinkOnBuild>false</BlazorLinkOnBuild>
     <LangVersion>7.3</LangVersion>
     <PackageId>Blazor.FlexGrid</PackageId>
-    <PackageVersion>0.8.5</PackageVersion>
+    <PackageVersion>0.8.6</PackageVersion>
     <Title>Blazor.FlexGrid</Title>
     <Description>GridView component for Blazor</Description>
     <Authors>Jaroslav Surala</Authors>
     <PackageProjectUrl>https://github.com/Mewriick/Blazor.FlexGrid</PackageProjectUrl>
     <PackageTags>Blazor;GridView;Component</PackageTags>
-    <Version>0.8.5</Version>
-    <PackageReleaseNotes>Support .NET Core 3.0 Preview 7</PackageReleaseNotes>
+    <Version>0.8.6</Version>
+    <PackageReleaseNotes>EditColumn custom template support</PackageReleaseNotes>
     <PackageIconUrl>https://msdnshared.blob.core.windows.net/media/2018/04/Blazor-300x280.jpg</PackageIconUrl>
     <RestoreAdditionalProjectSources>
       https://dotnet.myget.org/F/aspnetcore-dev/api/v3/index.json;

diff --git a/src/Blazor.FlexGrid/Components/Configuration/BlazorComponentColumnCollection.cs b/src/Blazor.FlexGrid/Components/Configuration/BlazorComponentColumnCollection.cs
@@ -17,28 +17,44 @@ public BlazorComponentColumnCollection(IGridConfigurationProvider gridConfigurat
             this.internalModelBuilder = new InternalModelBuilder(gridConfigurationProvider.ConfigurationModel as Model);
         }
 
-        public ISpecialColumnFragmentsCollection<TItem> AddColumnValueRenderFunction<TColumn>(Expression<Func<TItem, TColumn>> columnExpression, RenderFragment<TItem> renderFragment)
+        public ISpecialColumnFragmentsCollection<TItem> AddColumnValueRenderFunction<TColumn>(
+            Expression<Func<TItem, TColumn>> columnExpression,
+            RenderFragment<TItem> renderFragment)
+        {
+            GetPropertyBuilder(columnExpression)
+                ?.HasBlazorComponentValue(renderFragment);
+
+            return this;
+        }
+
+        public ISpecialColumnFragmentsCollection<TItem> AddColumnEditValueRenderer<TColumn>(
+            Expression<Func<TItem, TColumn>> columnExpression,
+            Func<EditColumnContext, RenderFragment<TItem>> renderFragmentBuilder)
+        {
+            GetPropertyBuilder(columnExpression)
+                ?.HasBlazorEditComponent(renderFragmentBuilder);
+
+            return this;
+        }
+
+        private InternalPropertyBuilder GetPropertyBuilder<TColumn>(Expression<Func<TItem, TColumn>> columnExpression)
         {
             var entityType = gridConfigurationProvider.FindGridEntityConfigurationByType(typeof(TItem));
             if (entityType is NullEntityType)
             {
-                var entityTypeBuilder = internalModelBuilder
+                return internalModelBuilder
                     .Entity(typeof(TItem))
-                    .Property(columnExpression.GetPropertyAccess())
-                    .HasBlazorComponentValue(renderFragment);
-
-                return this;
+                    .Property(columnExpression.GetPropertyAccess());
             }
 
             var columnName = columnExpression.GetPropertyAccess().Name;
             var configurationProperty = entityType.FindProperty(columnName);
             if (configurationProperty is Property property)
             {
-                new InternalPropertyBuilder(property, internalModelBuilder)
-                    .HasBlazorComponentValue(renderFragment);
+                return new InternalPropertyBuilder(property, internalModelBuilder);
             }
 
-            return this;
+            return null;
         }
     }
 }
diff --git a/src/Blazor.FlexGrid/Components/Configuration/Builders/InternalPropertyBuilder.cs b/src/Blazor.FlexGrid/Components/Configuration/Builders/InternalPropertyBuilder.cs
@@ -43,7 +43,30 @@ public bool HasCompositeValueFormatter<TInputValue>(Expression<Func<TInputValue,
             => HasAnnotation(GridViewAnnotationNames.ColumnValueFormatter, new ValueFormatter<TInputValue>(valueFormatterExpression, ValueFormatterType.WholeRowObject));
 
         public bool HasBlazorComponentValue<TInputValue>(RenderFragment<TInputValue> renderFragment)
-            => HasAnnotation(GridViewAnnotationNames.ColumnValueBlazorComponent, new RenderFragmentAdapter<TInputValue>(renderFragment));
+        {
+            if (Metadata.FindAnnotation(GridViewAnnotationNames.ColumnValueBlazorComponent) is NullAnnotation)
+            {
+                return HasAnnotation(GridViewAnnotationNames.ColumnValueBlazorComponent, new RenderFragmentAdapter<TInputValue>(renderFragment));
+            }
+
+            return false;
+        }
+
+        public bool HasBlazorEditComponent<TInputValue>(Func<EditColumnContext, RenderFragment<TInputValue>> renderFragmentBuilder)
+        {
+            if (Metadata.FindAnnotation(GridViewAnnotationNames.ColumnEditBlazorComponentBuilder) is NullAnnotation)
+            {
+                Func<EditColumnContext, IRenderFragmentAdapter> builder
+                    = context =>
+                    {
+                        return new RenderFragmentAdapter<TInputValue>(renderFragmentBuilder.Invoke(context));
+                    };
+
+                return HasAnnotation(GridViewAnnotationNames.ColumnEditBlazorComponentBuilder, builder);
+            }
+
+            return false;
+        }
 
         public bool HasReadPermissionRestriction(Func<ICurrentUserPermission, bool> permissionRestrictionFunc)
             => HasAnnotation(GridViewAnnotationNames.ColumnReadPermission, permissionRestrictionFunc);

diff --git a/src/Blazor.FlexGrid/Components/Configuration/Builders/PropertyBuilder.cs b/src/Blazor.FlexGrid/Components/Configuration/Builders/PropertyBuilder.cs
@@ -77,6 +77,13 @@ public PropertyBuilder<TProperty, TEntity> HasBlazorComponentValueRender(RenderF
             return this;
         }
 
+        public PropertyBuilder<TProperty, TEntity> HasBlazorEditComponent<TInputValue>(Func<EditColumnContext, RenderFragment<TInputValue>> renderFragmentBuilder)
+        {
+            Builder.HasBlazorEditComponent(renderFragmentBuilder);
+
+            return this;
+        }
+
         public PropertyBuilder<TProperty, TEntity> HasCompositeValueFormatter(Expression<Func<TEntity, string>> valueFormatterExpression)
         {
             Builder.HasCompositeValueFormatter(valueFormatterExpression);

diff --git a/src/Blazor.FlexGrid/Components/Configuration/GridViewAnnotationNames.cs b/src/Blazor.FlexGrid/Components/Configuration/GridViewAnnotationNames.cs
@@ -24,7 +24,8 @@ public static class GridViewAnnotationNames
         public const string ColumnOrder = "GridColumnOrder";
         public const string ColumnValueFormatter = "GridColumnValueFormatter";
         public const string ColumnValueBlazorComponent = "GridColumnValueBlazorComponent";
-        public const string ColumnReadPermission = "ColumnReadPermission";
-        public const string ColumnWrtiePermission = "ColumnWrtiePermission";
+        public const string ColumnReadPermission = "GridColumnReadPermission";
+        public const string ColumnWrtiePermission = "GridColumnWrtiePermission";
+        public const string ColumnEditBlazorComponentBuilder = "GridColumnEditBlazorComponentBuilder";
     }
 }
diff --git a/src/Blazor.FlexGrid/Components/Configuration/ISpecialColumnFragmentsCollection.cs b/src/Blazor.FlexGrid/Components/Configuration/ISpecialColumnFragmentsCollection.cs
@@ -6,6 +6,12 @@ namespace Blazor.FlexGrid.Components.Configuration
 {
     public interface ISpecialColumnFragmentsCollection<TItem>
     {
-        ISpecialColumnFragmentsCollection<TItem> AddColumnValueRenderFunction<TColumn>(Expression<Func<TItem, TColumn>> columnExpression, RenderFragment<TItem> renderFragment);
+        ISpecialColumnFragmentsCollection<TItem> AddColumnValueRenderFunction<TColumn>(
+            Expression<Func<TItem, TColumn>> columnExpression,
+            RenderFragment<TItem> renderFragment);
+
+        ISpecialColumnFragmentsCollection<TItem> AddColumnEditValueRenderer<TColumn>(
+            Expression<Func<TItem, TColumn>> columnExpression,
+            Func<EditColumnContext, RenderFragment<TItem>> renderFragmentBuilder);
     }
 }
diff --git a/src/Blazor.FlexGrid/Components/Configuration/MetaData/GridColumnAnotations.cs b/src/Blazor.FlexGrid/Components/Configuration/MetaData/GridColumnAnotations.cs
@@ -123,6 +123,21 @@ public IRenderFragmentAdapter SpecialColumnValue
                 return specialColumnValue as IRenderFragmentAdapter;
             }
         }
+
+        public Func<EditColumnContext, IRenderFragmentAdapter> ColumnEditComponentBuilder
+        {
+            get
+            {
+                var edcitComponentFragmentBuilder = Annotations[GridViewAnnotationNames.ColumnEditBlazorComponentBuilder];
+                if (edcitComponentFragmentBuilder is NullAnotationValue)
+                {
+                    return null;
+                }
+
+                return edcitComponentFragmentBuilder as Func<EditColumnContext, IRenderFragmentAdapter>;
+            }
+        }
+
         public Func<ICurrentUserPermission, bool> ReadPermissionRestrictionFunc
         {
             get
@@ -153,7 +168,6 @@ public Func<ICurrentUserPermission, bool> WritePermissionRestrictionFunc
 
         protected IAnnotatable Annotations { get; }
 
-
         public GridColumnAnotations(IProperty property)
         {
             Annotations = property ?? throw new ArgumentNullException(nameof(property));

diff --git a/src/Blazor.FlexGrid/Components/Configuration/MetaData/IGridViewColumnAnotations.cs b/src/Blazor.FlexGrid/Components/Configuration/MetaData/IGridViewColumnAnotations.cs
@@ -26,6 +26,8 @@ public interface IGridViewColumnAnotations
 
         IRenderFragmentAdapter SpecialColumnValue { get; }
 
+        Func<EditColumnContext, IRenderFragmentAdapter> ColumnEditComponentBuilder { get; }
+
         Func<ICurrentUserPermission, bool> ReadPermissionRestrictionFunc { get; }
 
         Func<ICurrentUserPermission, bool> WritePermissionRestrictionFunc { get; }

diff --git a/src/Blazor.FlexGrid/Components/EditColumnContext.cs b/src/Blazor.FlexGrid/Components/EditColumnContext.cs
@@ -0,0 +1,24 @@
+using System;
+
+namespace Blazor.FlexGrid.Components
+{
+    public class EditColumnContext
+    {
+        private readonly string columnName;
+        private readonly Action<string, object> onChangeAction;
+
+        public EditColumnContext(string columnName, Action<string, object> onChangeAction)
+        {
+            this.columnName = string.IsNullOrWhiteSpace(columnName)
+                ? throw new ArgumentNullException(nameof(columnName))
+                : columnName;
+
+            this.onChangeAction = onChangeAction ?? throw new ArgumentNullException(nameof(onChangeAction));
+        }
+
+        public void NotifyValueHasChanged(object value)
+        {
+            onChangeAction.Invoke(columnName, value);
+        }
+    }
+}
diff --git a/src/Blazor.FlexGrid/Components/GridViewInternal.cs b/src/Blazor.FlexGrid/Components/GridViewInternal.cs
@@ -23,7 +23,8 @@ public class GridViewInternal : ComponentBase
         private readonly static ITableDataSet EmptyDataSet = new TableDataSet<EmptyDataSetItem>(
             Enumerable.Empty<EmptyDataSetItem>().AsQueryable(), new FilterExpressionTreeBuilder<EmptyDataSetItem>());
 
-        private bool dataAdapterWasEmptyInOnInit;
+        private bool tableDataSetInitialized;
+
         private FlexGridContext fixedFlexGridContext;
         private (ImutableGridRendererContext ImutableRendererContext, PermissionContext PermissionContext) gridRenderingContexts;
         protected IEnumerable<IFeature> features;
@@ -107,8 +108,7 @@ protected override async Task OnInitAsync()
         {
             fixedFlexGridContext = CreateFlexGridContext();
 
-            dataAdapterWasEmptyInOnInit = DataAdapter == null;
-            if (!dataAdapterWasEmptyInOnInit)
+            if (DataAdapter != null)
             {
                 ConventionsSet.ApplyConventions(DataAdapter.UnderlyingTypeOfItem);
             }
@@ -120,7 +120,8 @@ protected override async Task OnInitAsync()
 
         protected override async Task OnParametersSetAsync()
         {
-            if (dataAdapterWasEmptyInOnInit && DataAdapter != null)
+            if (!tableDataSetInitialized &&
+                DataAdapter != null)
             {
                 ConventionsSet.ApplyConventions(DataAdapter.UnderlyingTypeOfItem);
                 tableDataSet = GetTableDataSet();
@@ -158,6 +159,8 @@ protected ITableDataSet GetTableDataSet()
                 {
                     fixedFlexGridContext.FilterContext.OnFilterChanged += FilterChanged;
                 }
+
+                tableDataSetInitialized = true;
             }
 
             gridRenderingContexts = RendererContextFactory.CreateContexts(tableDataSet);

diff --git a/src/Blazor.FlexGrid/Components/Renderers/GridCellRenderer.cs b/src/Blazor.FlexGrid/Components/Renderers/GridCellRenderer.cs
@@ -28,18 +28,7 @@ protected override void BuildRendererTreeInternal(GridRendererContext rendererCo
                 return;
             }
 
-            if (rendererContext.ActualColumnPropertyCanBeEdited && permissionContext.HasCurrentUserWritePermission(rendererContext.ActualColumnName))
-            {
-                editInputRendererTree.BuildInputRendererTree(
-                    rendererContext.RendererTreeBuilder,
-                    rendererContext,
-                    rendererContext.TableDataSet.EditItemProperty);
-            }
-            else
-            {
-                rendererContext.AddActualColumnValue(permissionContext);
-            }
-
+            rendererContext.AddEditField(editInputRendererTree, permissionContext);
             rendererContext.CloseElement();
         }
     }