From 5486e5d34f5d4966d92e8727de158b197b32e6a6 Mon Sep 17 00:00:00 2001
From: rgentry09 <ryangentry.work@gmail.com>
Date: Thu, 4 May 2023 16:54:47 +0200
Subject: [PATCH] Suppport CRUD modal forms
 (https://github.com/gustavnavar/Grid.Blazor/issues/372)

---
 GridBlazor/CGrid.cs                           |  6 ++
 GridBlazor/Client/GridClient.cs               |  8 ++
 GridBlazor/Client/IGridClient.cs              | 12 ++-
 GridBlazor/ICGrid.cs                          | 15 ++++
 .../Pages/BooleanFilterComponent.razor.cs     |  2 +-
 .../Pages/DateTimeFilterComponent.razor.cs    |  2 +-
 .../DateTimeLocalFilterComponent.razor.cs     |  2 +-
 .../Pages/FormTooltipComponent.razor.cs       |  2 +-
 GridBlazor/Pages/GridComponent.razor          | 80 ++++++++++++++++++-
 GridBlazor/Pages/GridComponent.razor.cs       |  6 ++
 .../Pages/HeaderTooltipComponent.razor.cs     |  2 +-
 GridBlazor/Pages/ListFilterComponent.razor.cs |  2 +-
 .../Pages/MonthFilterComponent.razor.cs       |  2 +-
 .../Pages/NumberFilterComponent.razor.cs      |  2 +-
 GridBlazor/Pages/TextFilterComponent.razor.cs |  2 +-
 GridBlazor/Pages/WeekFilterComponent.razor.cs |  2 +-
 16 files changed, 133 insertions(+), 14 deletions(-)

diff --git a/GridBlazor/CGrid.cs b/GridBlazor/CGrid.cs
index b9b58f53..50aaf093 100644
--- a/GridBlazor/CGrid.cs
+++ b/GridBlazor/CGrid.cs
@@ -505,6 +505,12 @@ public PagingType PagingType
 
         public bool ChangeVirtualizedHeight { get; set; } = false;
 
+        public bool ModalForms { get; set; } = false;
+
+        public string ModalWidth { get; set; }
+
+        public string ModalHeight { get; set; }
+
         /// <summary>
         ///     Get and set export to an Excel file
         /// </summary>
diff --git a/GridBlazor/Client/GridClient.cs b/GridBlazor/Client/GridClient.cs
index 73430d27..f27813a5 100644
--- a/GridBlazor/Client/GridClient.cs
+++ b/GridBlazor/Client/GridClient.cs
@@ -181,6 +181,14 @@ public IGridClient<T> ChangeVirtualizedHeight(bool enable)
             return this;
         }
 
+        public IGridClient<T> SetModalForms(bool enable, string width = null, string height = null)
+        {
+            _source.ModalForms = enable;
+            _source.ModalWidth = width;
+            _source.ModalHeight = height;
+            return this;
+        }
+
         public IGridClient<T> Sortable()
         {
             return Sortable(true, GridSortMode.ThreeState);
diff --git a/GridBlazor/Client/IGridClient.cs b/GridBlazor/Client/IGridClient.cs
index f71e163f..31b46dde 100644
--- a/GridBlazor/Client/IGridClient.cs
+++ b/GridBlazor/Client/IGridClient.cs
@@ -50,19 +50,25 @@ public interface IGridClient<T>
         /// <summary>
         ///    Enable virtualization
         /// </summary>
-        IGridClient<T> Virtualize(int heigh);
+        IGridClient<T> Virtualize(int height);
 
         /// <summary>
         ///    Enable virtualization
         /// </summary>
-        IGridClient<T> Virtualize(string width, int heigh);
+        IGridClient<T> Virtualize(string width, int height);
 
         /// <summary>
         ///     Enable change virtualized height for grid
         /// </summary>
-        /// <param name="enable">Enable dynamic setup the  virtualized heighte of the grid</param>
+        /// <param name="enable">Enable dynamic setup the  virtualized height of the grid</param>
         IGridClient<T> ChangeVirtualizedHeight(bool enable);
 
+        /// <summary>
+        ///     Enable modal CRUD forms
+        /// </summary>
+        /// <param name="enable">Enable modal forms for the grid</param>
+        IGridClient<T> SetModalForms(bool enable, string width = null, string height = null);
+
         /// <summary>
         ///     Enable sorting for all columns
         /// </summary>
diff --git a/GridBlazor/ICGrid.cs b/GridBlazor/ICGrid.cs
index 1f9fad6e..a80a6b34 100644
--- a/GridBlazor/ICGrid.cs
+++ b/GridBlazor/ICGrid.cs
@@ -418,5 +418,20 @@ public interface ICGrid : IGrid, IGridOptions
         ///     Enable the change of the virtualized grid height
         /// </summary>
         bool ChangeVirtualizedHeight { get; set; }
+
+        /// <summary>
+        ///     Enable modal CRUD forms 
+        /// </summary>
+        bool ModalForms { get; set; }
+
+        /// <summary>
+        ///     Get value for modal CRUD form width
+        /// </summary>
+        string ModalWidth { get; set; }
+
+        /// <summary>
+        ///     Get value for modal CRUD form height
+        /// </summary>
+        string ModalHeight { get; set; }
     }
 }
\ No newline at end of file
diff --git a/GridBlazor/Pages/BooleanFilterComponent.razor.cs b/GridBlazor/Pages/BooleanFilterComponent.razor.cs
index c85c7e7b..e13b8384 100644
--- a/GridBlazor/Pages/BooleanFilterComponent.razor.cs
+++ b/GridBlazor/Pages/BooleanFilterComponent.razor.cs
@@ -47,7 +47,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
             {
                 await jSRuntime.InvokeVoidAsync("gridJsFunctions.focusElement", boolFilter);
                 ScreenPosition sp = await jSRuntime.InvokeAsync<ScreenPosition>("gridJsFunctions.getPosition", boolFilter);
-                ScreenPosition gridTableSP = await jSRuntime.InvokeAsync<ScreenPosition>("gridJsFunctions.getPosition", GridHeaderComponent.GridComponent.GridTable);
+                ScreenPosition gridTableSP = GridHeaderComponent.GridComponent.gridTableSP;
                 if (sp != null && gridTableSP != null)
                 {
                     if (gridTableSP.X + gridTableSP.Width < sp.X + sp.Width)
diff --git a/GridBlazor/Pages/DateTimeFilterComponent.razor.cs b/GridBlazor/Pages/DateTimeFilterComponent.razor.cs
index 9b1029d2..5a1a24a6 100644
--- a/GridBlazor/Pages/DateTimeFilterComponent.razor.cs
+++ b/GridBlazor/Pages/DateTimeFilterComponent.razor.cs
@@ -60,7 +60,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
             {
                 await jSRuntime.InvokeVoidAsync("gridJsFunctions.focusElement", firstSelect);
                 ScreenPosition sp = await jSRuntime.InvokeAsync<ScreenPosition>("gridJsFunctions.getPosition", dateTimeFilter);
-                ScreenPosition gridTableSP = await jSRuntime.InvokeAsync<ScreenPosition>("gridJsFunctions.getPosition", GridHeaderComponent.GridComponent.GridTable);
+                ScreenPosition gridTableSP = GridHeaderComponent.GridComponent.gridTableSP;
                 if (sp != null && gridTableSP != null)
                 {
                     if (gridTableSP.X + gridTableSP.Width < sp.X + sp.Width)
diff --git a/GridBlazor/Pages/DateTimeLocalFilterComponent.razor.cs b/GridBlazor/Pages/DateTimeLocalFilterComponent.razor.cs
index 8107ad7e..1cfebdd8 100644
--- a/GridBlazor/Pages/DateTimeLocalFilterComponent.razor.cs
+++ b/GridBlazor/Pages/DateTimeLocalFilterComponent.razor.cs
@@ -74,7 +74,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
             {
                 await jSRuntime.InvokeVoidAsync("gridJsFunctions.focusElement", firstSelect);
                 ScreenPosition sp = await jSRuntime.InvokeAsync<ScreenPosition>("gridJsFunctions.getPosition", dateTimeFilter);
-                ScreenPosition gridTableSP = await jSRuntime.InvokeAsync<ScreenPosition>("gridJsFunctions.getPosition", GridHeaderComponent.GridComponent.GridTable);
+                ScreenPosition gridTableSP = GridHeaderComponent.GridComponent.gridTableSP;
                 if (sp != null && gridTableSP != null)
                 {
                     if (gridTableSP.X + gridTableSP.Width < sp.X + sp.Width)
diff --git a/GridBlazor/Pages/FormTooltipComponent.razor.cs b/GridBlazor/Pages/FormTooltipComponent.razor.cs
index 97f45547..f14f26a6 100644
--- a/GridBlazor/Pages/FormTooltipComponent.razor.cs
+++ b/GridBlazor/Pages/FormTooltipComponent.razor.cs
@@ -29,7 +29,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
             {
                 await jSRuntime.InvokeVoidAsync("gridJsFunctions.focusElement", tooltip);
                 ScreenPosition sp = await jSRuntime.InvokeAsync<ScreenPosition>("gridJsFunctions.getPosition", tooltip);
-                ScreenPosition gridComponentSP = await jSRuntime.InvokeAsync<ScreenPosition>("gridJsFunctions.getPosition", GridComponent.Gridmvc);
+                ScreenPosition gridComponentSP = GridComponent.gridComponentSP;
                 if (GridComponent.Grid.Direction == GridShared.GridDirection.RTL)
                 {
                     if (sp != null && gridComponentSP != null && sp.X < Math.Max(35, gridComponentSP.X))
diff --git a/GridBlazor/Pages/GridComponent.razor b/GridBlazor/Pages/GridComponent.razor
index 988b640d..f1e32831 100644
--- a/GridBlazor/Pages/GridComponent.razor
+++ b/GridBlazor/Pages/GridComponent.razor
@@ -13,7 +13,7 @@
 {
     <div @ref="Spinner" class="grid-spinner" style="display:none;"></div>
     <div @ref="Content">
-        @if (Grid.Mode == GridMode.Grid)
+        @if (Grid.Mode == GridMode.Grid || Grid.PagingType == PagingType.Virtualization || Grid.ModalForms)
         {
             if (Grid.ComponentOptions.RenderRowsOnly)
             {
@@ -458,6 +458,84 @@
                         </div>
                     </div>
                 </div>
+
+                @if (Grid.Mode != GridMode.Grid)
+                {
+                    <div class="modal fade show ml-3" tabindex="-1" role="dialog" style="display:block;position:absolute;">
+                        <div class="modal-dialog" role="document" style="position:absolute;">
+                            <div class="modal-content grid-crud" style="overflow-y:scroll;@(!string.IsNullOrWhiteSpace(Grid.ModalWidth) ? "width:" + Grid.ModalWidth + ";" : (gridComponentSP == null ? "" : "width:" + gridComponentSP.Width + "px;")) @(!string.IsNullOrWhiteSpace(Grid.ModalHeight) ? "height:" + Grid.ModalHeight + ";" : (gridComponentSP == null ? "" : "height:" + (int)(gridComponentSP.Height * 0.96) + "px;"))">
+                                <div class="modal-body">
+                                    @if (Grid.Mode == GridMode.Create && Grid.CreateEnabled)
+                                    {
+                                        <div dir="@Grid.Direction.ToDirection()">
+                                            @if (Grid.CreateComponent == null)
+                                            {
+                                                <CascadingValue Value=@this Name="GridComponent">
+                                                    <GridCreateComponent @ref="CreateComponent" T="@T" Item="@Item"></GridCreateComponent>
+                                                </CascadingValue>
+                                            }
+                                            else
+                                            {
+                                                @CrudRender
+                                            }
+                                        </div>
+                                    }
+                                    else if (Grid.Mode == GridMode.Read && (Grid.ReadEnabled || (((CGrid<T>)Grid).FuncReadEnabled != null && ((CGrid<T>)Grid).FuncReadEnabled(Item))))
+                                    {
+                                        <div dir="@Grid.Direction.ToDirection()">
+                                            @if (Grid.ReadComponent == null)
+                                            {
+                                                <CascadingValue Value=@this Name="GridComponent">
+                                                    <GridReadComponent @ref="ReadComponent" T="@T" Item="@Item"></GridReadComponent>
+                                                </CascadingValue>
+                                            }
+                                            else
+                                            {
+                                                @CrudRender
+                                            }
+                                        </div>
+                                    }
+                                    else if (Grid.Mode == GridMode.Update && (Grid.UpdateEnabled || (((CGrid<T>)Grid).FuncUpdateEnabled != null && ((CGrid<T>)Grid).FuncUpdateEnabled(Item))))
+                                    {
+                                        <div dir="@Grid.Direction.ToDirection()">
+                                            @if (Grid.UpdateComponent == null)
+                                            {
+                                                <CascadingValue Value=@this Name="GridComponent">
+                                                    <GridUpdateComponent @ref="UpdateComponent" T="@T" Item="@Item"></GridUpdateComponent>
+                                                </CascadingValue>
+                                            }
+                                            else
+                                            {
+                                                @CrudRender
+                                            }
+                                        </div>
+                                    }
+                                    else if (Grid.Mode == GridMode.Delete && (Grid.DeleteEnabled || (((CGrid<T>)Grid).FuncDeleteEnabled != null && ((CGrid<T>)Grid).FuncDeleteEnabled(Item))))
+                                    {
+                                        <div dir="@Grid.Direction.ToDirection()">
+                                            @if (Grid.DeleteComponent == null)
+                                            {
+                                                <CascadingValue Value=@this Name="GridComponent">
+                                                    <GridDeleteComponent @ref="DeleteComponent" T="@T" Item="@Item"></GridDeleteComponent>
+                                                </CascadingValue>
+                                            }
+                                            else
+                                            {
+                                                @CrudRender
+                                            }
+                                        </div>
+                                    }
+                                    else if (Grid.Mode == GridMode.Form)
+                                    {
+                                        <div dir="@Grid.Direction.ToDirection()">
+                                            @CrudRender
+                                        </div>
+                                    }
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                }
             }
         }
         else if (Grid.Mode == GridMode.Create && Grid.CreateEnabled)
diff --git a/GridBlazor/Pages/GridComponent.razor.cs b/GridBlazor/Pages/GridComponent.razor.cs
index 3b14e198..8c3fa6a7 100644
--- a/GridBlazor/Pages/GridComponent.razor.cs
+++ b/GridBlazor/Pages/GridComponent.razor.cs
@@ -54,6 +54,9 @@ public partial class GridComponent<T>
         internal ElementReference GridTable;
         internal ElementReference GridTableWrap;
 
+        internal ScreenPosition gridComponentSP;
+        internal ScreenPosition gridTableSP;
+
         internal ElementReference Spinner;
         internal ElementReference Content;
 
@@ -330,6 +333,9 @@ protected override bool ShouldRender()
 
         protected override async Task OnAfterRenderAsync(bool firstRender)
         {
+            gridComponentSP = await jSRuntime.InvokeAsync<ScreenPosition>("gridJsFunctions.getPosition", Gridmvc);
+            gridTableSP = await jSRuntime.InvokeAsync<ScreenPosition>("gridJsFunctions.getPosition", GridTable);
+            
             if (firstRender)
             {
                 IsDateTimeLocalSupported = await jSRuntime.InvokeAsync<bool>("gridJsFunctions.isDateTimeLocalSupported");
diff --git a/GridBlazor/Pages/HeaderTooltipComponent.razor.cs b/GridBlazor/Pages/HeaderTooltipComponent.razor.cs
index 5c44fe06..c00a0687 100644
--- a/GridBlazor/Pages/HeaderTooltipComponent.razor.cs
+++ b/GridBlazor/Pages/HeaderTooltipComponent.razor.cs
@@ -30,7 +30,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
             {
                 await jSRuntime.InvokeVoidAsync("gridJsFunctions.focusElement", tooltip);
                 ScreenPosition sp = await jSRuntime.InvokeAsync<ScreenPosition>("gridJsFunctions.getPosition", tooltip);
-                ScreenPosition gridComponentSP = await jSRuntime.InvokeAsync<ScreenPosition>("gridJsFunctions.getPosition", GridComponent.Gridmvc);
+                ScreenPosition gridComponentSP = GridComponent.gridComponentSP;
                 if (GridComponent.Grid.Direction == GridShared.GridDirection.RTL)
                 {
                     if (sp != null && gridComponentSP != null && sp.X < Math.Max(35, gridComponentSP.X))
diff --git a/GridBlazor/Pages/ListFilterComponent.razor.cs b/GridBlazor/Pages/ListFilterComponent.razor.cs
index 352352f1..fb256fbb 100644
--- a/GridBlazor/Pages/ListFilterComponent.razor.cs
+++ b/GridBlazor/Pages/ListFilterComponent.razor.cs
@@ -75,7 +75,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
             {
                 await jSRuntime.InvokeVoidAsync("gridJsFunctions.focusElement", listFilter);
                 ScreenPosition sp = await jSRuntime.InvokeAsync<ScreenPosition>("gridJsFunctions.getPosition", listFilter);
-                ScreenPosition gridTableSP = await jSRuntime.InvokeAsync<ScreenPosition>("gridJsFunctions.getPosition", GridHeaderComponent.GridComponent.GridTable);
+                ScreenPosition gridTableSP = GridHeaderComponent.GridComponent.gridTableSP;
                 if (sp != null && gridTableSP != null)
                 {
                     if (gridTableSP.X + gridTableSP.Width < sp.X + sp.Width)
diff --git a/GridBlazor/Pages/MonthFilterComponent.razor.cs b/GridBlazor/Pages/MonthFilterComponent.razor.cs
index e16e4d89..17cfbac9 100644
--- a/GridBlazor/Pages/MonthFilterComponent.razor.cs
+++ b/GridBlazor/Pages/MonthFilterComponent.razor.cs
@@ -60,7 +60,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
             {
                 await jSRuntime.InvokeVoidAsync("gridJsFunctions.focusElement", firstSelect);
                 ScreenPosition sp = await jSRuntime.InvokeAsync<ScreenPosition>("gridJsFunctions.getPosition", dateTimeFilter);
-                ScreenPosition gridTableSP = await jSRuntime.InvokeAsync<ScreenPosition>("gridJsFunctions.getPosition", GridHeaderComponent.GridComponent.GridTable);
+                ScreenPosition gridTableSP = GridHeaderComponent.GridComponent.gridTableSP;
                 if (sp != null && gridTableSP != null)
                 {
                     if (gridTableSP.X + gridTableSP.Width < sp.X + sp.Width)
diff --git a/GridBlazor/Pages/NumberFilterComponent.razor.cs b/GridBlazor/Pages/NumberFilterComponent.razor.cs
index b678d6b2..f3d1e531 100644
--- a/GridBlazor/Pages/NumberFilterComponent.razor.cs
+++ b/GridBlazor/Pages/NumberFilterComponent.razor.cs
@@ -60,7 +60,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
             {
                 await jSRuntime.InvokeVoidAsync("gridJsFunctions.focusElement", firstSelect);
                 ScreenPosition sp = await jSRuntime.InvokeAsync<ScreenPosition>("gridJsFunctions.getPosition", numberFilter);
-                ScreenPosition gridTableSP = await jSRuntime.InvokeAsync<ScreenPosition>("gridJsFunctions.getPosition", GridHeaderComponent.GridComponent.GridTable);
+                ScreenPosition gridTableSP = GridHeaderComponent.GridComponent.gridTableSP;
                 if (sp != null && gridTableSP != null)
                 {
                     if (gridTableSP.X + gridTableSP.Width < sp.X + sp.Width)
diff --git a/GridBlazor/Pages/TextFilterComponent.razor.cs b/GridBlazor/Pages/TextFilterComponent.razor.cs
index b6b402dd..5655f65d 100644
--- a/GridBlazor/Pages/TextFilterComponent.razor.cs
+++ b/GridBlazor/Pages/TextFilterComponent.razor.cs
@@ -60,7 +60,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
             {
                 await jSRuntime.InvokeVoidAsync("gridJsFunctions.focusElement", firstSelect);
                 ScreenPosition sp = await jSRuntime.InvokeAsync<ScreenPosition>("gridJsFunctions.getPosition", textFilter);
-                ScreenPosition gridTableSP = await jSRuntime.InvokeAsync<ScreenPosition>("gridJsFunctions.getPosition", GridHeaderComponent.GridComponent.GridTable);
+                ScreenPosition gridTableSP = GridHeaderComponent.GridComponent.gridTableSP;
                 if (sp != null && gridTableSP != null)
                 {
                     if (gridTableSP.X + gridTableSP.Width < sp.X + sp.Width)
diff --git a/GridBlazor/Pages/WeekFilterComponent.razor.cs b/GridBlazor/Pages/WeekFilterComponent.razor.cs
index 8ab3fd6f..7f73b194 100644
--- a/GridBlazor/Pages/WeekFilterComponent.razor.cs
+++ b/GridBlazor/Pages/WeekFilterComponent.razor.cs
@@ -61,7 +61,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
             {
                 await jSRuntime.InvokeVoidAsync("gridJsFunctions.focusElement", firstSelect);
                 ScreenPosition sp = await jSRuntime.InvokeAsync<ScreenPosition>("gridJsFunctions.getPosition", dateTimeFilter);
-                ScreenPosition gridTableSP = await jSRuntime.InvokeAsync<ScreenPosition>("gridJsFunctions.getPosition", GridHeaderComponent.GridComponent.GridTable);
+                ScreenPosition gridTableSP = GridHeaderComponent.GridComponent.gridTableSP;
                 if (sp != null && gridTableSP != null)
                 {
                     if (gridTableSP.X + gridTableSP.Width < sp.X + sp.Width)