Updated UI. Fixed circle search performance.

JSMR.UI.Blazor/Components/JImage.razor

@@ -0,0 +1,84 @@
+<div class="@ContainerClassees">
+    <div class="j-image-overlay"></div>
+    <img class="@ImageClasses" loading="@LoadingAttribute" src="@Source" @onload="OnImageLoaded">
+</div>
+
+@code {
+    [Parameter]
+    public required string Source { get; set; }
+
+    [Parameter]
+    public string FallbackSource { get; set; } = "images/home/no_img_main.gif";
+
+    [Parameter]
+    public bool LazyLoading { get; set; } = true;
+
+    [Parameter]
+    public string? ContainerClass { get; set; }
+
+    [Parameter]
+    public string? ImageClass { get; set; }
+
+    private bool _isLoaded;
+    private string? _lastSource;
+
+    private string ContainerClassees => GetContainerClasses();
+    private string ImageClasses => GetImageClasses();
+
+    private string? LoadingAttribute => LazyLoading ? "lazy" : null;
+
+    protected override void OnParametersSet()
+    {
+        if (!string.Equals(_lastSource, Source, StringComparison.Ordinal))
+        {
+            _lastSource = Source;
+            _isLoaded = false;
+        }
+    }
+
+    private string GetContainerClasses()
+    {
+        List<string> classNames = ["j-image-container"];
+
+        if (!string.IsNullOrEmpty(ContainerClass))
+        {
+            List<string> customClassNames = ContainerClass
+                .Split(" ")
+                .Select(className => className.Trim())
+                .Where(className => !string.IsNullOrWhiteSpace(className))
+                .ToList();
+
+            classNames.AddRange(customClassNames);
+        }
+
+        return string.Join(" ", classNames);
+    }
+
+    private string GetImageClasses()
+    {
+        List<string> classNames = ["j-image"];
+
+        if (!_isLoaded)
+        {
+            classNames.Add("j-lazy-load");
+        }
+
+        if (!string.IsNullOrEmpty(ImageClass))
+        {
+            List<string> customClassNames = ImageClass
+                .Split(" ")
+                .Select(className => className.Trim())
+                .Where(className => !string.IsNullOrWhiteSpace(className))
+                .ToList();
+
+            classNames.AddRange(customClassNames);
+        }
+
+        return string.Join(" ", classNames);
+    }
+
+    private void OnImageLoaded()
+    {
+        _isLoaded = true;
+    }
+}

JSMR.UI.Blazor/Components/JPagination.razor

@@ -0,0 +1,37 @@
+<div class="pagination">
+    <div>
+        <label>@IndexInfo</label>
+    </div>
+    <MudPagination ShowFirstButton="true" ShowLastButton="true" Count="@((int)Math.Ceiling((decimal)TotalItems / (decimal)PageSize))" Selected="@PageNumber" SelectedChanged="OnSelectedChanged" />
+</div>
+
+@code {
+    [Parameter]
+    public int PageNumber { get; set; }
+
+    [Parameter]
+    public EventCallback<int> PageNumberChanged { get; set; }
+
+    [Parameter]
+    public int PageSize { get; set; }
+
+    [Parameter]
+    public EventCallback<int> PageSizeChanged { get; set; }
+
+    [Parameter]
+    public int TotalItems { get; set; }
+
+    [Parameter]
+    public EventCallback<int> TotalItemsChanged { get; set; }
+
+    public string IndexInfo => TotalItems == 0 ? "No items" : $"{StartIndex.ToString("n0")} - {EndIndex.ToString("n0")} of {TotalItems.ToString("n0")} items";
+
+    public int StartIndex => (PageNumber - 1) * PageSize + 1;
+    public int EndIndex => PageNumber * PageSize < TotalItems ? PageNumber * PageSize : TotalItems;
+
+    private async Task OnSelectedChanged(int newPage)
+    {
+        PageNumber = newPage;
+        await PageNumberChanged.InvokeAsync(newPage);
+    }
+}