1.5.1 Fixed sorting/filtering when column is added programmatically #…

…patch
IvanJosipovic · Mar 22, 2020 · 01f77cf · 01f77cf
2 parents 7a21f58 + 50640c6
commit 01f77cf
Show file tree

Hide file tree

Showing 9 changed files with 117 additions and 43 deletions.
diff --git a/.github/workflows/cicd.yml b/.github/workflows/cicd.yml
@@ -24,6 +24,7 @@ jobs:
       run: dotnet tool install dotnet-sonarscanner --tool-path ./
 
     - name: SonarQube Start
+      continue-on-error: true
       run: ./dotnet-sonarscanner begin /o:ivanjosipovic /k:IvanJosipovic_BlazorTable /d:sonar.host.url=https://sonarcloud.io /d:sonar.login=${{ secrets.SONARQUBE_TOKEN }}
 
     - name: Dotnet Build
@@ -34,6 +35,7 @@ jobs:
       run: dotnet publish -c Release
 
     - name: SonarQube End
+      continue-on-error: true
       run: ./dotnet-sonarscanner end /d:sonar.login=${{ secrets.SONARQUBE_TOKEN }}
       env:
         GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

diff --git a/src/BlazorTable.Sample.Shared/Pages/AddColumn.razor b/src/BlazorTable.Sample.Shared/Pages/AddColumn.razor
@@ -10,23 +10,6 @@
 <br />
 <Table TableItem="PersonData" Items="data" PageSize="15" @ref="Table" ColumnReorder="true">
     <Column TableItem="PersonData" Title="Id" Field="@(x => x.id)" Sortable="true" Filterable="true" Width="10%"  DefaultSortColumn="true"  />
-    <Column TableItem="PersonData" Title="Full Name" Field="@(x => x.full_name)" Sortable="true" Filterable="true" Width="20%" />
-    <Column TableItem="PersonData" Title="Email" Field="@(x => x.email)" Sortable="true" Filterable="true" Width="20%">
-        <Template>
-            <a href="mailto:@context.email">@context.email</a>
-        </Template>
-    </Column>
-    <Column TableItem="PersonData" Title="Paid" Field="@(x => x.paid)" Sortable="true" Filterable="true" Width="10%">
-        <Template>
-            @context.paid.ToString()
-        </Template>
-    </Column>
-    <Column TableItem="PersonData" Title="Price" Field="@(x => x.price)" Sortable="true" Filterable="true" Width="10%" Format="C" Align="Align.Right" />
-    <Column TableItem="PersonData" Title="Created Date" Field="@(x => x.created_date)" Sortable="true" Filterable="true" Width="10%">
-        <Template>
-            @(context.created_date.HasValue ? context.created_date.Value.ToShortDateString() : string.Empty)
-        </Template>
-    </Column>
     <Pager ShowPageNumber="true" ShowTotalCount="true" />
 </Table>
 
@@ -62,8 +45,8 @@
 
     private void Add()
     {
-        var col = new Column<PersonData>() 
-        { 
+        var col = new Column<PersonData>()
+        {
             Title = "Enum",
             Field = (x) => x.cc_type,
             Sortable = true,
@@ -73,4 +56,4 @@
 
         Table.AddColumn(col);
     }
-}
+}
diff --git a/src/BlazorTable.Sample.Wasm/wwwroot/css/site.css b/src/BlazorTable.Sample.Wasm/wwwroot/css/site.css
@@ -181,3 +181,77 @@ app {
         display: block;
     }
 }
+
+.spinner {
+    margin: 100px auto;
+    width: 50px;
+    height: 40px;
+    text-align: center;
+    font-size: 10px;
+}
+
+    .spinner > div {
+        background-color: #fff;
+        height: 100%;
+        width: 6px;
+        display: inline-block;
+        -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
+        animation: sk-stretchdelay 1.2s infinite ease-in-out;
+    }
+
+    .spinner .rect2 {
+        -webkit-animation-delay: -1.1s;
+        animation-delay: -1.1s;
+    }
+
+    .spinner .rect3 {
+        -webkit-animation-delay: -1.0s;
+        animation-delay: -1.0s;
+    }
+
+    .spinner .rect4 {
+        -webkit-animation-delay: -0.9s;
+        animation-delay: -0.9s;
+    }
+
+    .spinner .rect5 {
+        -webkit-animation-delay: -0.8s;
+        animation-delay: -0.8s;
+    }
+
+@-webkit-keyframes sk-stretchdelay {
+    0%, 40%, 100% {
+        -webkit-transform: scaleY(0.4)
+    }
+
+    20% {
+        -webkit-transform: scaleY(1.0)
+    }
+}
+
+@keyframes sk-stretchdelay {
+    0%, 40%, 100% {
+        transform: scaleY(0.4);
+        -webkit-transform: scaleY(0.4);
+    }
+
+    20% {
+        transform: scaleY(1.0);
+        -webkit-transform: scaleY(1.0);
+    }
+}
+
+.modal-overlay {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: rgba(28,28,28);
+    z-index: 2000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    --sk-color: white;
+}
diff --git a/src/BlazorTable.Sample.Wasm/wwwroot/index.html b/src/BlazorTable.Sample.Wasm/wwwroot/index.html
@@ -9,7 +9,17 @@
     <link href="css/site.css" rel="stylesheet" />
 </head>
 <body>
-    <app>Loading...</app>
+    <app>
+        <div class="modal-overlay">
+            <div class="spinner">
+                <div class="rect1"></div>
+                <div class="rect2"></div>
+                <div class="rect3"></div>
+                <div class="rect4"></div>
+                <div class="rect5"></div>
+            </div>
+        </div>
+    </app>
 
     <div id="blazor-error-ui">
         An unhandled error has occurred.

diff --git a/src/BlazorTable/Components/Column.razor b/src/BlazorTable/Components/Column.razor
@@ -1,23 +1,3 @@
 @namespace BlazorTable
 @typeparam TableItem
 
-<CascadingValue Value="(IColumn<TableItem>)this" Name="Column">
-    <Popover Reference="@this.FilterRef" IsOpen="@FilterOpen" Placement="Placement.Bottom" DismissOnNextClick="false">
-        <h3 class="popover-header">Filter</h3>
-        <div class="popover-body">
-
-            <FilterManager TableItem="TableItem">
-                <StringFilter TableItem="TableItem" />
-                <BooleanFilter TableItem="TableItem" />
-                <NumberFilter TableItem="TableItem" />
-                <DateFilter TableItem="TableItem" />
-                <EnumFilter TableItem="TableItem" />
-                @if (this.CustomIFilters != null)
-                {
-                    @this.CustomIFilters(this);
-                }
-            </FilterManager>
-
-        </div>
-    </Popover>
-</CascadingValue>
diff --git a/src/BlazorTable/Components/Popover.razor b/src/BlazorTable/Components/Popover.razor
@@ -2,7 +2,7 @@
 
 @if (IsOpen ?? false)
 {
-    <div @attributes="@UnknownParameters" class="@Classname" role="tooltip" @onclick="OnClick" @ref="MyRef">
+    <div @attributes="@UnknownParameters" class="@Classname" role="tooltip" @onclick="OnClick" @ref="MyRef" @onclick:stopPropagation>
         <div @ref="Arrow" class="arrow"></div>
         @ChildContent
     </div>

diff --git a/src/BlazorTable/Components/Table.razor b/src/BlazorTable/Components/Table.razor
@@ -38,6 +38,24 @@
                                 <div class="float-right" @onclick="@((x) => column.ToggleFilter())" @onclick:stopPropagation>
                                     <a href="javascript:;" @ref="column.FilterRef" style="text-decoration: none"><span style="@(column.Filter == null ? "opacity: 0.2;" : string.Empty)">&#128269;</span></a>
                                 </div>
+                                <CascadingValue Value="column" Name="Column">
+                                    <Popover Reference="@column.FilterRef" IsOpen="@column.FilterOpen" Placement="Placement.Bottom" DismissOnNextClick="false">
+                                        <h3 class="popover-header">Filter</h3>
+                                        <div class="popover-body">
+                                            <FilterManager TableItem="TableItem">
+                                                <StringFilter TableItem="TableItem" />
+                                                <BooleanFilter TableItem="TableItem" />
+                                                <NumberFilter TableItem="TableItem" />
+                                                <DateFilter TableItem="TableItem" />
+                                                <EnumFilter TableItem="TableItem" />
+                                                @if (column.CustomIFilters != null)
+                                                {
+                                                    @column.CustomIFilters(column)
+                                                }
+                                            </FilterManager>
+                                        </div>
+                                    </Popover>
+                                </CascadingValue>
                             }
                         </div>
                     </th>

diff --git a/src/BlazorTable/Components/Table.razor.cs b/src/BlazorTable/Components/Table.razor.cs
@@ -164,6 +164,13 @@ public void Update()
         /// <param name="column"></param>
         public void AddColumn(IColumn<TableItem> column)
         {
+            column.Table = this;
+
+            if (column.Type == null)
+            {
+                column.Type = column.Field?.GetPropertyMemberInfo().GetMemberUnderlyingType();
+            }
+
             Columns.Add(column);
             Refresh();
         }

diff --git a/src/BlazorTable/Interfaces/IColumn.cs b/src/BlazorTable/Interfaces/IColumn.cs
@@ -58,7 +58,7 @@ public interface IColumn<TableItem>
         /// <summary>
         /// Column Data Type
         /// </summary>
-        Type Type { get; }
+        Type Type { get; set; }
 
         /// <summary>
         /// Field which this column is for<br />