Up: adding search oninput for the BxDatatable

mouadcherkaoui · Mar 24, 2020 · 7e2b9e3 · 7e2b9e3
1 parent 85cdf9d
commit 7e2b9e3
Show file tree

Hide file tree

Showing 6 changed files with 65 additions and 44 deletions.
diff --git a/src/BxBlazor/Components/BxDataTableV2.razor b/src/BxBlazor/Components/BxDataTableV2.razor
@@ -42,7 +42,7 @@
                             <th>
                                 <!-- checkbox th -->
                                 <!-- sortable th  -->
-                                <button class="@prefix--table-sort" data-event="sort" title="Name" @onclick="@(() => OnSort(header))">
+                                <button class="@prefix--table-sort" data-event="sort" title="Name" @onclick="@(() => ToggleSort(header))">
                                     <span class="@prefix--table-header-label">@header</span>
                                     <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="@prefix--table-sort__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M12.3 9.3L8.5 13.1 8.5 1 7.5 1 7.5 13.1 3.7 9.3 3 10 8 15 13 10z"></path></svg>
                                     <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="@prefix--table-sort__icon-unsorted" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M13.8 10.3L12 12.1 12 2 11 2 11 12.1 9.2 10.3 8.5 11 11.5 14 14.5 11zM4.5 2L1.5 5 2.2 5.7 4 3.9 4 14 5 14 5 3.9 6.8 5.7 7.5 5z"></path></svg>
@@ -55,12 +55,9 @@
                             <th><span class="@prefix--table-header-label">@header</span></th>
                         }
                     }
-                    @if (IsSelectable)
-                    {
-                        <th class="@prefix--table-column-menu">
-                            <!-- checkbox th -->
-                        </th>
-                    }
+                    <th class="@prefix--table-column-menu">
+                        <!-- checkbox th -->
+                    </th>
                 </tr>
             </thead>
             @{ var index = 0;}
@@ -217,16 +214,11 @@
         {
             orderProperty = orderProperty ?? headers[0];
             var values = !orderDesc.HasValue ?
-                Items : 
-                (orderDesc.Value 
-                    ? Items.OrderByDescending(i => i.GetType().GetProperty(orderProperty).GetValue(i))
-                    : Items.OrderBy(i => i.GetType().GetProperty(orderProperty).GetValue(i)));
+                Items :
+                (orderDesc.Value
+                    ? Items.OrderByDescending(item => typeof(TItem).GetProperty(orderProperty).GetValue(item))
+                    : Items.OrderBy(item => typeof(TItem).GetProperty(orderProperty).GetValue(item)));
 
-            if (values != null) foreach (var v in values)
-                {
-                    var p = typeof(TItem).GetProperty(orderProperty); 
-                    Console.WriteLine($"{p.Name}: {p.GetValue(v)}");
-                }
             return values;
         }
     }
@@ -238,19 +230,16 @@
 
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
-        if(firstRender)
-        {
-            await js.InvokeVoidAsync("InitComponent", "DataTable");
-        }
+        await js.InvokeVoidAsync("InitComponent", "DataTable");
+        await js.InvokeVoidAsync("InitComponent", "OverflowMenu");
+
         await base.OnAfterRenderAsync(firstRender);
     }
 
-    void OnSort(string column)
+    void ToggleSort(string column)
     {
-        orderProperty = column;       
+        orderProperty = column;
         orderDesc = !(orderDesc == null) ? (orderDesc.Value ? !orderDesc : null) : true;
-
-        Console.WriteLine(column);
     }
 
     private bool actionMenuOpen = false;

diff --git a/src/BxBlazor/Components/BxDataTableV2_Toolbar.razor b/src/BxBlazor/Components/BxDataTableV2_Toolbar.razor
@@ -1,4 +1,5 @@
-    <!-- Toolbar Content -->
+@inject IJSRuntime js
+    <!-- Toolbar Content -->
 <section class="@prefix--table-toolbar">
     <!-- Batch actions -->
     <div class="@prefix--batch-actions" aria-label="Table Action Bar">
@@ -32,7 +33,7 @@
                     <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="@prefix--toolbar-action__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M15,14.3L10.7,10c1.9-2.3,1.6-5.8-0.7-7.7S4.2,0.7,2.3,3S0.7,8.8,3,10.7c2,1.7,5,1.7,7,0l4.3,4.3L15,14.3z M2,6.5	C2,4,4,2,6.5,2S11,4,11,6.5S9,11,6.5,11S2,9,2,6.5z"></path></svg>
                 </div>
                 <label id="search-input-label-1" class="@prefix--label" for="search__input-2">Search</label>
-                <input @bind-value="SearchValue" class="@prefix--search-input" type="text" id="search__input-2" role="search" placeholder="Search" aria-labelledby="search-input-label-1" @onkeypress="@(async (v) => await OnSearchCallback.InvokeAsync(new SearchEventArgs(v, SearchValue)))">
+                <input @bind-value="@SearchValue" @bind-value:event="oninput" class="@prefix--search-input" type="text" id="search__input-2" role="search" placeholder="Search" aria-labelledby="search-input-label-1" @onkeyup="@((args) => OnSearchCallback.InvokeAsync(new SearchEventArgs(args, SearchValue)))">
                 <button class="@prefix--search-close @prefix--search-close--hidden" title="Clear search input" aria-label="Clear search input">
                     <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M12 4.7L11.3 4 8 7.3 4.7 4 4 4.7 7.3 8 4 11.3 4.7 12 8 8.7 11.3 12 12 11.3 8.7 8z"></path></svg>
                 </button>
@@ -81,18 +82,6 @@
 </section>
 <!-- End Toolbar Content -->
 @code {
-    public class SearchEventArgs: KeyboardEventArgs
-    {
-        public SearchEventArgs(KeyboardEventArgs args, string searchValue)
-        {
-            this.Key = args.Key;
-            this.Location = args.Location;
-            this.MetaKey = args.MetaKey;
-            this.Repeat = this.Repeat;
-            this.SearchValue = searchValue;
-        }
-        public string SearchValue { get; set; }
-    }
 
     [Parameter]
     public string prefix { get; set; } = "bx";
@@ -112,4 +101,11 @@
     public EventCallback OnSaveCallback { get; set; }
 
     public string SearchValue { get; set; }
+
+    private async Task onSearchInputKeyUp (KeyboardEventArgs args)
+    {
+        var result = await js.InvokeAsync<string>("InvokeAsync", "() => document.getElementById('search__input-2').value");
+        Console.WriteLine(result);
+        await OnSearchCallback.InvokeAsync(new SearchEventArgs(args, result));
+    }
 }
diff --git a/src/BxBlazor/Events/SearchEventArgs.cs b/src/BxBlazor/Events/SearchEventArgs.cs
@@ -0,0 +1,20 @@
+using Microsoft.AspNetCore.Components.Web;
+using System;
+using System.Collections.Generic;
+using System.Text;
+
+namespace BxBlazor.Events
+{
+    public class SearchEventArgs : KeyboardEventArgs
+    {
+        public SearchEventArgs(KeyboardEventArgs args, string searchValue)
+        {
+            Key = args.Key;
+            Location = args.Location;
+            MetaKey = args.MetaKey;
+            Repeat = args.Repeat;
+            SearchValue = searchValue;
+        }
+        public string SearchValue { get; set; }
+    }
+}
diff --git a/src/BxBlazor/_Imports.razor b/src/BxBlazor/_Imports.razor
@@ -7,6 +7,7 @@
 @using Microsoft.JSInterop
 @using Mono.WebAssembly.Interop
 @using BxBlazor
+@using BxBlazor.Events
 @using BxBlazor.Components
 @using BxBlazor.Components.Icons
 @using BxBlazor.Components.UIShell

diff --git a/src/SampleProject/Client/Pages/DataTable.razor b/src/SampleProject/Client/Pages/DataTable.razor
@@ -8,11 +8,11 @@
             <BxCol offset="lg-1" lg="10">
                 <h3>BxDataTable</h3>
                 <p>This component demonstrates fetching data from the server.</p>
-                    <BxDataTableV2 TItem="WeatherForecast" Items="@(forecasts?.AsQueryable())" IsSelectable="true" IsSortable="true">
+                    <BxDataTableV2 TItem="WeatherForecast" Items="forecastsQueryable()" IsSelectable="true" IsSortable="true">
                         <BatchActionsToolbar>
                             <BxDataTableV2_Toolbar
-                                                   OnPrimaryButtonClick="toolbar_click" 
-                                                   OnSearchCallback="@(async (v) => { if(v.Key == "Enter") await js.InvokeVoidAsync("ShowAlert", v.SearchValue); })"/>
+                                OnPrimaryButtonClick="toolbar_click" 
+                                OnSearchCallback="SearchKeyupCallback"/>
                         </BatchActionsToolbar>
                     </BxDataTableV2>
             </BxCol>
@@ -26,13 +26,15 @@
 
     protected override async Task OnInitializedAsync()
     {
-        forecasts = await Http.GetJsonAsync<WeatherForecast[]>("WeatherForecast").ContinueWith<WeatherForecast[]>(t => t.IsFaulted ? get_forcasts() : null);
+        forecasts = await Http.GetJsonAsync<WeatherForecast[]>("WeatherForecast")
+                .ContinueWith<WeatherForecast[]>(t => t.IsFaulted ? get_forcasts() : null);
     }
+
     private readonly string[] Summaries = new[]
     {
         "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
     };
-
+    
     WeatherForecast[] get_forcasts()
     {
         Random rng = new Random();
@@ -44,9 +46,21 @@
         })
         .ToArray();
     }
-
+
+    private IQueryable<WeatherForecast> forecastsQueryable() { 
+        return forecasts?.Where(f => f.Summary.ToLower().Contains(searchValue ?? ""))?.AsQueryable(); 
+        }
+
     void toolbar_click()
     {
 
     }
+
+    string searchValue = "";
+    async Task SearchKeyupCallback(SearchEventArgs args) {
+        if(args.Key == "Enter") 
+            await js.InvokeVoidAsync("ShowAlert", args.SearchValue);
+        searchValue = args.SearchValue;
+        Console.WriteLine(searchValue);
+    }
 }
diff --git a/src/SampleProject/Client/_Imports.razor b/src/SampleProject/Client/_Imports.razor
@@ -10,6 +10,7 @@
 @using blazorwasm.Client.Shared
 @using blazorwasm.Shared
 @using BxBlazor.Components
+@using BxBlazor.Events
 @using BxBlazor.Components.UIShell
 @using BxBlazor.Components.Grid
 @using BxBlazor.Models