Next step card view

COMET.Web.Common/COMET.Web.Common.csproj

@@ -44,6 +44,7 @@
         <PackageReference Include="Microsoft.Extensions.Configuration.Binder" Version="8.0.2" />
         <PackageReference Include="ReactiveUI" Version="20.1.63" />
         <PackageReference Include="System.Drawing.Common" Version="8.0.10" />
+        <PackageReference Include="System.Linq.Dynamic.Core" Version="1.5.0" />
         <PackageReference Include="System.Text.RegularExpressions" Version="4.3.1" />
     </ItemGroup>
 

COMET.Web.Common/Components/CardView/CardField.cs

@@ -0,0 +1,80 @@
+
+namespace COMET.Web.Common.Components.CardView
+{
+    using System.Text.RegularExpressions;
+
+    using FastMember;
+
+    using Microsoft.AspNetCore.Components;
+    using Microsoft.AspNetCore.Components.Rendering;
+
+    public class CardField<T> : ComponentBase
+    {
+        private static TypeAccessor typeAccessor { get; set; }
+
+        static CardField()
+        {
+            typeAccessor = TypeAccessor.Create(typeof(T));
+        }
+
+        [CascadingParameter(Name="CardView")]
+        private CardView<T> CardView { get; set; }
+
+        [CascadingParameter(Name = "SearchTerm")]
+        private string SearchTerm { get; set; }
+
+        [Parameter]
+        public T Context { get; set; }
+
+        [Parameter]
+        public string FieldName { get; set; }
+
+        [Parameter]
+        public bool AllowSort { get; set; } = true;
+
+        [Parameter]
+        public bool AllowSearch { get; set; } = true;
+
+        protected override void OnInitialized()
+        {
+            base.OnInitialized();
+            this.CardView.RegisterCardField(this);
+        }
+
+        protected override void BuildRenderTree(RenderTreeBuilder builder)
+        {
+            base.BuildRenderTree(builder);
+            var value = typeAccessor[this.Context, this.FieldName].ToString();
+
+            if (this.AllowSearch && !string.IsNullOrWhiteSpace(value) && !string.IsNullOrWhiteSpace(this.SearchTerm))
+            {
+                var separatorPattern = $"({this.SearchTerm})";
+                var result = Regex.Split(value, separatorPattern, RegexOptions.IgnoreCase);
+                var elementCounter = 0;
+
+                foreach (var element in result)
+                {
+                    if (string.Equals(element, this.SearchTerm, StringComparison.OrdinalIgnoreCase))
+                    {
+                        builder.OpenElement(elementCounter, "span");
+                        elementCounter++;
+                        builder.AddAttribute(elementCounter, "class", "search-mark");
+                        elementCounter++;
+                        builder.AddContent(elementCounter, element);
+                        elementCounter++;
+                        builder.CloseElement();
+                    }
+                    else
+                    {
+                        builder.AddContent(elementCounter, element);
+                        elementCounter++;
+                    }
+                }
+            }
+            else
+            {
+                builder.AddContent(0, value);
+            }
+        }
+    }
+}

COMET.Web.Common/Components/CardView.razor → COMET.Web.Common/Components/CardView/CardView.razor

@@ -20,11 +20,18 @@
 //   limitations under the License.
 ------------------------------------------------------------------------------->
 @namespace COMET.Web.Common.Components
-@typeparam T where T : class
+@typeparam T
 @inherits DisposableComponent
 
-<p>
-    <input type="text" @oninput="this.OnSearchTextChanged" placeholder="Search..." />
+<p style="visibility:@(this.AllowSearch ? "block": "hidden");">
+    <table>
+        <tr>
+            <td><input type="text" @oninput="this.OnSearchTextChanged" placeholder="Search..."/></td>
+            <td><DxComboBox Data="@this.SortFields" SelectedItemChanged="@((string x) => this.OnSelectedItemChanged(x))"
+                                    @bind-Value="@this.SelectedSortField"/>
+            </td>
+        </tr>
+    </table>
 </p>
 <div class="container" style="height:calc(100% - 30px); overflow:auto;">
     <div class="row">
@@ -39,7 +46,11 @@
                          @ondragstart="@(() => this.OnDragNode(@context))"
                          @ondrop="@(() => this.OnDropNode(@context))">
                         <div class="card-body" style="overflow-y:hidden;overflow-x:hidden">
-                            @this.ItemTemplate(@context)
+                            <CascadingValue Name="CardView" Value = "this">
+                                <CascadingValue Name="SearchTerm" Value="this.searchTerm">
+                                    @this.ItemTemplate(@context)
+                                </CascadingValue>
+                            </CascadingValue>
                         </div>
                     </div>
                 </div>

COMET.Web.Common/Components/CardView.razor.cs → COMET.Web.Common/Components/CardView/CardView.razor.cs

@@ -25,15 +25,20 @@
 
 namespace COMET.Web.Common.Components
 {
+    using COMET.Web.Common.Components.CardView;
+
     using FastMember;
 
     using Microsoft.AspNetCore.Components;
     using Microsoft.AspNetCore.Components.Web.Virtualization;
 
+    using System.Linq.Dynamic;
+    using System.Linq.Dynamic.Core;
+
     /// <summary>
     /// Component used to show a CardView based on a specific type
     /// </summary>
-    public partial class CardView<T> : DisposableComponent where T : class
+    public partial class CardView<T> : DisposableComponent
     {
         /// <summary>
         /// Gets or sets the item template for the list.
@@ -50,8 +55,12 @@ public partial class CardView<T> : DisposableComponent where T : class
         /// <summary>
         /// Gets or sets a collection of propertynames of type <see cref="T"/> to perform search on
         /// </summary>
-        [Parameter]
-        public string[] SearchFields { get; set; }
+        public HashSet<string> SearchFields { get; set; } = [];
+
+        /// <summary>
+        /// Gets or sets a collection of propertynames of type <see cref="T"/> to perform sorting on
+        /// </summary>
+        public SortedSet<string> SortFields { get; set; } = [string.Empty];
 
         /// <summary>
         /// Gets or sets the fixed height of a Card, used to calculate the amout of items to load into the DOM in px
@@ -65,6 +74,10 @@ public partial class CardView<T> : DisposableComponent where T : class
         [Parameter]
         public float MinWidth { get; set; } = 250;
 
+        public bool AllowSort { get; set; } = false;
+
+        public bool AllowSearch { get; set; } = false;
+
         /// <summary>
         /// A reference to the <see cref="Virtualize{T}"/> component for loading items
         /// </summary>
@@ -90,14 +103,16 @@ public partial class CardView<T> : DisposableComponent where T : class
         /// </summary>
         private string searchTerm { get; set; } = string.Empty;
 
+        public string SelectedSortField { get; set; }
+
         /// <summary>
         /// Gets the class to visually show a Card to be selected or unselected
         /// </summary>
         /// <param name="vm"></param>
         /// <returns></returns>
         private string GetSelectedClass(T vm)
         {
-            return vm == this.selected ? "selected" : "";
+            return vm.Equals(this.selected) ? "selected" : "";
         }
 
         /// <summary>
@@ -152,8 +167,14 @@ private async ValueTask<ItemsProviderResult<T>> LoadItems(ItemsProviderRequest r
                 : this.Items.Where(item => this.FilterItem(item, this.searchTerm)).ToList();
 
             // Return paged items for virtualization
-            var items = filteredItems.Skip(request.StartIndex).Take(request.Count).ToList();
-            return new ItemsProviderResult<T>(items, filteredItems.Count);
+            var items = filteredItems.Skip(request.StartIndex).Take(request.Count);
+
+            if (!string.IsNullOrWhiteSpace(this.SelectedSortField))
+            {
+                items = items.AsQueryable().OrderBy(this.SelectedSortField);
+            }
+
+            return new ItemsProviderResult<T>(items.ToList(), filteredItems.Count);
         }
 
         /// <summary>
@@ -172,7 +193,7 @@ private bool FilterItem(T item, string query)
                 return value != null && value.Contains(query, StringComparison.OrdinalIgnoreCase);
             });
         }
-        
+
         /// <summary>
         /// A method that is executed when the user changes the search input element
         /// </summary>
@@ -187,5 +208,33 @@ private async Task OnSearchTextChanged(ChangeEventArgs e)
                 await this.virtualize.RefreshDataAsync(); // Tell Virtualize to refresh data
             }
         }
+
+        internal void RegisterCardField(CardField<T> cardField)
+        {
+            if (cardField.AllowSort)
+            {
+                if (this.SortFields.Add(cardField.FieldName))
+                {
+                    this.AllowSort = true;
+                    this.StateHasChanged();
+                }
+            }
+
+            if (cardField.AllowSearch)
+            {
+                if (this.SearchFields.Add(cardField.FieldName))
+                {
+                    this.AllowSearch = true;
+                    this.StateHasChanged();
+                }
+            }
+        }
+
+        private void OnSelectedItemChanged(string arg)
+        {
+            this.SelectedSortField = arg ?? string.Empty;
+
+            this.virtualize?.RefreshDataAsync(); // Tell Virtualize to refresh data
+        }
     }
 }

COMET.Web.Common/Components/CardView.razor.css → COMET.Web.Common/Components/CardView/CardView.razor.css

@@ -10,4 +10,3 @@
 .card.selected {
     border: 2px solid var(--bs-primary, var(--primary));
 }
-

COMET.Web.Common/_Imports.razor

@@ -2,6 +2,7 @@
 @using COMET.Web.Common.Components.Applications
 @using COMET.Web.Common.Components.Selectors
 @using COMET.Web.Common.Components.ParameterTypeEditors
+@using COMET.Web.Common.Components.CardView
 @using COMET.Web.Common.Shared
 @using COMET.Web.Common.Shared.TopMenuEntry
 @using System.Net.Http

COMETwebapp/Components/ModelEditor/DetailsPanelEditor.razor

@@ -28,40 +28,40 @@
 
 @if (this.ViewModel.SelectedSystemNode != null)
 {
-    <CardView Items="@this.ViewModel.Rows.ToList()" ItemSize="150" MinWidth="180" SearchFields="@this.searchFields">
+    <CardView Items="@this.ViewModel.Rows.ToList()" ItemSize="150" MinWidth="180">
         <ItemTemplate>
             <div class="row">
                 <div class="col-10">
-                    <h6 title="@context.ParameterTypeName" style="overflow:hidden;text-overflow: ellipsis;white-space: nowrap;">@context.ParameterTypeName </h6>
+                    <h6 title="@context.ParameterTypeName" style="overflow:hidden;text-overflow: ellipsis;white-space: nowrap;"><CardField Context="@context" FieldName="ParameterTypeName"/></h6>
                 </div>
                 <div class="col-2" align="right">
-                    <button class="starion-pill" title="Owning Domain Of Expertise: @context.Owner">@context.Owner</button>
+                    <button class="starion-pill" title="Owning Domain Of Expertise: @context.Owner"><CardField Context="@context" FieldName="Owner" /></button>
                 </div>
             </div>
             <div class="row">
                 <div class="col-12" style="overflow:hidden;text-overflow: ellipsis;white-space: nowrap;" title="@context.ModelCode">
-                    @context.ModelCode
+                    <CardField Context="@context" FieldName="ModelCode" />
                 </div>
             </div>
             <div class="row" style="border-top:1px dotted darkgray;margin-top:8px;padding-top:8px;">
                 <div class="col-6">
-                    @context.SwitchValue:
+                    <CardField Context="@context" FieldName="SwitchValue" />:
                 </div>
                 <div class="col-6">
                     Published:
                 </div>
             </div>
             <div class="row">
-                <div class="col-6" style="overflow:hidden;text-overflow: ellipsis;white-space: nowrap;" title="Actual Value: @context.ActualValue">@context.ActualValue</div>
-                <div class="col-6" style="overflow:hidden;text-overflow: ellipsis;white-space: nowrap;" title="Published Value: @context.PublishedValue">@context.PublishedValue</div>
+                <div class="col-6" style="overflow:hidden;text-overflow: ellipsis;white-space: nowrap;" title="Actual Value: @context.ActualValue"><CardField Context="@context" FieldName="ActualValue" /></div>
+                <div class="col-6" style="overflow:hidden;text-overflow: ellipsis;white-space: nowrap;" title="Published Value: @context.PublishedValue"><CardField Context="@context" FieldName="PublishedValue" /></div>
             </div>
         </ItemTemplate>
     </CardView>
 }
 
 @code 
 {
-    private string[] searchFields =
+    private string[] searchAndSortFields =
     [
         nameof(ElementDefinitionDetailsRowViewModel.ParameterTypeName),
         nameof(ElementDefinitionDetailsRowViewModel.Owner),

COMETwebapp/_Imports.razor

@@ -40,6 +40,7 @@
 @using COMET.Web.Common.Components.ParameterTypeEditors
 @using COMET.Web.Common.Components.Selectors
 @using COMET.Web.Common.Components.ValueSetRenderers
+@using COMET.Web.Common.Components.CardView
 @using COMET.Web.Common.Pages
 @using Blazor.Diagrams.Core;
 @using Blazor.Diagrams.Core.Models;

COMETwebapp/wwwroot/css/app.css

@@ -312,4 +312,8 @@ sub {
     border: 1px solid dimgray;
     color: dimgray;
     padding-top: 0px;
-}
+}
+
+.search-mark {
+    background-color: yellow !important;
+}