Filter failed dependencies

dhindrik · Dec 3, 2024 · 21a062a · 21a062a
1 parent 9aeea31
commit 21a062a
Show file tree

Hide file tree

Showing 7 changed files with 290 additions and 98 deletions.
diff --git a/TinyInsights.Web/Components/Badge.razor b/TinyInsights.Web/Components/Badge.razor
@@ -0,0 +1,27 @@
+<div>
+    <div class="badge">
+        @if(IsBadgeVisible)
+        {
+            <span class="indicator" style="background-color: @BadgeBackgroundColor; color: @BadgeTextColor;">
+                @BadgeText
+            </span>
+        }
+        @ChildContent
+    </div>
+</div>
+@code {
+    [Parameter]
+    public RenderFragment? ChildContent { get; set; }
+
+    [Parameter]
+    public bool IsBadgeVisible { get; set; } = true;
+
+    [Parameter]
+    public string? BadgeText { get; set; }
+
+    [Parameter]
+    public string BadgeBackgroundColor { get; set; } = "#DB5339";
+
+    [Parameter]
+    public string BadgeTextColor { get; set; } = "white";
+}
diff --git a/TinyInsights.Web/Components/Badge.razor.css b/TinyInsights.Web/Components/Badge.razor.css
@@ -0,0 +1,11 @@
+.badge{
+    position:relative
+}
+.indicator {
+    position: absolute;
+    top: -5px;
+    right: -5px;
+    padding: 7px;
+    border-radius: 50%;
+    z-index:200;
+}
diff --git a/TinyInsights.Web/Components/GlobalFilters.razor b/TinyInsights.Web/Components/GlobalFilters.razor
@@ -4,7 +4,9 @@
 
 <div>
     <RadzenStack Orientation="Orientation.Horizontal" Gap="20" AlignItems="AlignItems.Center" Wrap="FlexWrap.Wrap">
-<RadzenButton Icon="filter_alt" Click="@(() => showAllFilters = !showAllFilters)" MouseEnter="ShowFilterTooltip"></RadzenButton>
+        <Badge IsBadgeVisible="hasActiveFilters">
+            <RadzenButton Icon="filter_alt" Click="@(() => showAllFilters = !showAllFilters)" MouseEnter="ShowFilterTooltip" />
+        </Badge>
         @if(showAllFilters)
         {
             <RadzenStack Gap="10" Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center">
@@ -14,7 +16,7 @@
         }
 
         <RadzenDropDown @bind-Value="@GlobalFilter.OperatingSystem" Data="operatingSystemFilter" TextProperty="Text"
-                        ValueProperty="Value" />                        
+        ValueProperty="Value" />                        
         <RadzenDropDown @bind-Value="@GlobalFilter.AppVersions" Data="appVersions" Multiple="true" Chips="true" />
         <RadzenDropDown @bind-Value="@GlobalFilter.NumberOfDays" Data="dayFilter" TextProperty="Text" ValueProperty="Value" />
     </RadzenStack>
@@ -24,6 +26,7 @@
     public GlobalFilter GlobalFilter { get; set; }
 
     private bool showAllFilters;
+    private bool hasActiveFilters;
 
     private List<DayFilterItem> dayFilter = new()
 {
@@ -57,6 +60,8 @@ GlobalFilter.AppVersionsDefaultValue
             appVersions.AddRange(versions);
 
             GlobalFilter.AllAppVersions = versions;
+
+            hasActiveFilters = !string.IsNullOrWhiteSpace(GlobalFilter.TextFilter);
         }
     }