implement CategoryFilter component

README.md

@@ -55,7 +55,61 @@ Test content
 <IconButton Icon="info"></IconButton>
 ```
 
-- [ ] Category filter
+- [x] Category filter
+
+```html
+<CategoryFilter 
+    @ref="categoryFilter" 
+    Id="category-filter-1" 
+    Placeholder="Filter by"
+    RepeatCategories="false"
+    FilterChangedEvent="FilterStateChanged"
+    InputChangedEvent="InputStateChanged">
+</CategoryFilter>
+```
+
+```csharp
+CategoryFilter categoryFilter;
+Dictionary<string, Category> categoriesDict;
+FilterState filterState;
+
+protected override void OnAfterRender(bool firstRender)
+    {
+        if(firstRender)
+        {
+            categoriesDict = new();
+            categoriesDict.Add("ID_1", new Category()
+            {
+                Label = "Vendor",
+                Options = new string[]
+                {
+                    "Apple", "MS", "Siemens"
+                }
+            });
+
+            filterState = new()
+            {
+                Tokens = new string[]
+                {
+                    "Custom filter text"
+                },
+                Categories = new FilterStateCategory[]
+                {
+                    new FilterStateCategory()
+                    {
+                        Id = "ID_1",
+                        Value = "IBM",
+                        Operator = "Not Equal"
+                    }
+                }
+            };
+
+            categoryFilter.Categories = categoriesDict;
+            categoryFilter.FilterState = filterState;
+        }
+    }
+```
+
 - [ ] ECharts
 - [x] Checkbox
 

SiemensIXBlazor/Components/CategoryFilter/CategoryFilter.razor

@@ -0,0 +1,13 @@
+@using Microsoft.JSInterop;
+@inherits IXBaseComponent
+@inject IJSRuntime JSRuntime
+
+<ix-category-filter 
+id="@Id"
+placeholder="@Placeholder"
+hide-icon="@HideIcon"
+i-1-8n-plain-text="@I18nPlainText"
+icon="@Icon"
+label-categories="@LabelCategories"
+repeat-categories="@RepeatCategories"></ix-category-filter>
+

SiemensIXBlazor/Components/CategoryFilter/CategoryFilter.razor.cs

@@ -0,0 +1,112 @@
+using Microsoft.AspNetCore.Components;
+using Microsoft.JSInterop;
+using Newtonsoft.Json;
+using SiemensIXBlazor.Interops;
+using SiemensIXBlazor.Objects;
+using System.Text.Json;
+
+namespace SiemensIXBlazor.Components.CategoryFilter
+{
+    public partial class CategoryFilter
+    {
+        private Dictionary<string, Category>? _categories;
+        private FilterState? _filterState;
+        private Dictionary<string, string>? _nonSelectableCategories;
+        private Lazy<Task<IJSObjectReference>> moduleTask;
+        private BaseInterop _interop;
+
+        [Parameter, EditorRequired]
+        public string Id { get; set; } = string.Empty;
+        public Dictionary<string, Category>? Categories
+        { 
+            get => _categories;
+            set
+            {
+                _categories = value;
+                InitialParameter("setCategories", _categories);
+            }
+        }
+        public FilterState? FilterState
+        {
+            get => _filterState;
+            set
+            {
+                _filterState = value;
+                InitialParameter("setFilterState", _filterState);
+            }
+        }
+        [Parameter]
+        public bool? HideIcon { get; set; }
+        [Parameter]
+        public string I18nPlainText { get; set; } = "Filter by text";
+        [Parameter]
+        public string Icon { get; set; } = "search";
+        [Parameter]
+        public string LabelCategories { get; set; } = "Categories";
+        public Dictionary<string, string>? NonSelectableCategories
+        {
+            get => _nonSelectableCategories;
+            set
+            {
+                _nonSelectableCategories = value;
+                InitialParameter("setNonSelectableCategories", _nonSelectableCategories);
+            }
+        }
+        [Parameter]
+        public string? Placeholder { get; set; }
+        [Parameter]
+        public bool RepeatCategories { get; set; } = true;
+        [Parameter]
+        public string[]? Suggestions { get; set; }
+        [Parameter]
+        public EventCallback<FilterState> FilterChangedEvent { get; set; }
+        [Parameter]
+        public EventCallback<dynamic> InputChangedEvent { get; set; }
+
+        protected override void OnAfterRender(bool firstRender)
+        {
+            if(firstRender)
+            {
+                _interop = new(JSRuntime);
+
+                Task.Run(async () =>
+                {
+                    await _interop.AddEventListener(this, Id, "filterChanged", "FilterChanged");
+                    await _interop.AddEventListener(this, Id, "inputChanged", "InputChanged");
+                });
+            }
+        }
+
+        [JSInvokable]
+        public async void FilterChanged(JsonElement filterState)
+        {
+            string jsonDataText = filterState.GetRawText();
+            FilterState? state = JsonConvert.DeserializeObject<FilterState>(jsonDataText);
+            await FilterChangedEvent.InvokeAsync(state);
+        }
+
+        [JSInvokable]
+        public async void InputChanged(JsonElement inputState)
+        {
+            string jsonDataText = inputState.GetRawText();
+            dynamic? state = JsonConvert.DeserializeObject<dynamic>(jsonDataText);
+            await InputChangedEvent.InvokeAsync(state);
+        }
+
+        private void InitialParameter(string functionName, object param)
+        {
+
+            moduleTask = new(() => JSRuntime.InvokeAsync<IJSObjectReference>(
+                "import", $"./_content/SiemensIXBlazor/js/interops/categoryFilterInterop.js").AsTask());
+
+            Task.Run(async () =>
+            {
+                var module = await moduleTask.Value;
+                if (module != null)
+                {
+                    await module.InvokeVoidAsync(functionName, Id, JsonConvert.SerializeObject(param));
+                }
+            });
+        }
+    }
+}

SiemensIXBlazor/Objects/Category.cs

@@ -0,0 +1,12 @@
+using Newtonsoft.Json;
+
+namespace SiemensIXBlazor.Objects
+{
+    public class Category
+    {
+        [JsonProperty("label")]
+        public string? Label { get; set; }
+        [JsonProperty("options")]
+        public string[]? Options { get; set; }
+    }
+}

SiemensIXBlazor/Objects/FilterState.cs

@@ -0,0 +1,12 @@
+using Newtonsoft.Json;
+
+namespace SiemensIXBlazor.Objects
+{
+    public class FilterState
+    {
+        [JsonProperty("tokens")]
+        public string[]? Tokens { get; set; }
+        [JsonProperty("categories")]
+        public FilterStateCategory[]? Categories { get; set; }
+    }
+}

SiemensIXBlazor/Objects/FilterStateCategory.cs

@@ -0,0 +1,14 @@
+using Newtonsoft.Json;
+
+namespace SiemensIXBlazor.Objects
+{
+    public class FilterStateCategory
+    {
+        [JsonProperty("id")]
+        public string? Id { get; set; }
+        [JsonProperty("value")]
+        public string? Value { get; set; }
+        [JsonProperty("operator")]
+        public string? Operator { get; set; }
+    }
+}

SiemensIXBlazor/wwwroot/js/interops/categoryFilterInterop.js

@@ -0,0 +1,32 @@
+export function setCategories(id, categories) {
+    try {
+        const element = document.getElementById(id);
+        element.categories = JSON.parse(categories);
+    }
+    catch {
+
+    }
+
+}
+
+export function setFilterState(id, filterState) {
+    try {
+        const element = document.getElementById(id);
+        element.filterState = JSON.parse(filterState);
+    }
+    catch {
+
+    }
+
+}
+
+export function setNonSelectableCategories(id, nonSelectableCategories) {
+    try {
+        const element = document.getElementById(id);
+        element.nonSelectableCategories = JSON.parse(nonSelectableCategories);
+    }
+    catch {
+
+    }
+
+}