Feature: Add advanced filter (#9)

Reviewed-on: #9

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor

@@ -1,8 +1,9 @@
 <div class="search-container">
     <input type="text"
            class="search-field"
+           placeholder="@Placeholder"
            @bind=@Text
-           @bind:event="oninput" 
+           @bind:event="oninput"
            @bind:after=HandleTextChanged />
 
     @if (!string.IsNullOrEmpty(Text))

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.cs

@@ -5,6 +5,7 @@ namespace GameIdeas.BlazorApp.Shared.Components.Search;
 public partial class SearchInput
 {
     [Parameter] public string? Text { get; set; }
+    [Parameter] public string? Placeholder { get; set; }
     [Parameter] public EventCallback<string> TextChanged { get; set; }
     [Parameter] public EventCallback ClearClicked { get; set; }
     [Parameter] public EventCallback SearchClicked { get; set; }

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.css

@@ -6,6 +6,7 @@
     gap: 6px;
     height: 20px;
     align-items: center;
+    z-index: 501;
 }
 
     .select-element:hover {
@@ -64,4 +65,32 @@
         margin-right: 6px;
     }
 
+/***** Filter Theme *****/
+.filter {
+    padding: 2px 6px;
+}
+
+    .filter:hover {
+        background: var(--low-white);
+    }
+
+    .filter .select-label {
+        text-wrap: nowrap;
+        margin-right: 6px;
+    }
+
+/***** Filter Theme *****/
+.advancedfilter {
+    padding: 2px 6px;
+}
+
+    .advancedfilter:hover {
+        background: var(--low-white);
+    }
+
+    .advancedfilter .select-label {
+        text-wrap: nowrap;
+        margin-right: 6px;
+    }
+
 

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Models/SelectTheme.cs

@@ -4,5 +4,6 @@ public enum SelectListTheme
 {
     Navigation,
     Sort,
-    Filter
+    Filter,
+    AdvancedFilter
 }

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor

@@ -3,9 +3,10 @@
 @typeparam TItem
 
 <div class="select-list" tabindex="1001" @ref="BaseElement">
-    <div class="select-button" @onfocusin=HandleFocusIn @onfocusout=HandleFocusOut>
+    <div class="select-button @(Enum.GetName(Theme)?.ToLower())" @onfocusin=HandleFocusIn @onfocusout=HandleFocusOut>
         <SearchInput @ref=SearchInput
                      Icon="SearchInputIcon.Dropdown"
+                     Placeholder="@Placeholder"
                      TextChanged="HandleTextChanged"
                      ClearClicked="HandleTextChanged"
                      SearchClicked="HandleSearchClicked" />

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.cs

@@ -11,6 +11,7 @@ public partial class MultipleSelectList<TItem>
     [Parameter] public IEnumerable<SelectElement<TItem>> Items { get; set; } = [];
     [Parameter] public SelectListTheme Theme { get; set; }
     [Parameter] public bool AlignRight { get; set; }
+    [Parameter] public string? Placeholder { get; set; }
 
     private bool IsContentOpen
     {

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.css

@@ -5,6 +5,7 @@
 .select-container {
     margin-top: 4px;
     position: absolute;
+    z-index: 500;
 }
 
 .align-right {
@@ -18,6 +19,7 @@
     border-radius: var(--small-radius);
     animation-name: fade-in;
     animation-duration: 0.4s;
+    z-index: 500;
 }
 
 .line {
@@ -47,3 +49,17 @@
     min-width: 150px;
 }
 
+/***** AdvanceFilter Theme *****/
+.select-content.advancedfilter {
+    background: var(--light-grey);
+    box-shadow: var(--drop-shadow);
+    padding: 4px 0;
+    min-width: 150px;
+}
+
+::deep .select-button.advancedfilter .search-container {
+    height: 24px;
+    width: 210px;
+    border: 2px solid var(--low-white);
+}
+