Add snacks for searches to indicate scrolling

NielsPilgaard · Aug 11, 2024 · 52b9ace · 52b9ace
1 parent 749794e
commit 52b9ace
Show file tree

Hide file tree

Showing 4 changed files with 116 additions and 72 deletions.
diff --git a/src/web/Jordnaer/Features/GroupSearch/GroupSearchForm.razor b/src/web/Jordnaer/Features/GroupSearch/GroupSearchForm.razor
@@ -1,60 +1,71 @@
 @inject NavigationManager Navigation
+@inject IJSRuntime JsRuntime
 
 <MudContainer MaxWidth="MaxWidth.Small">
-    <MudPaper Elevation="3" Class="pa-10 mt-5">
-        <p class="font-open-sans-light" style="color: @JordnaerPalette.RedHeader; font-size: 20px;">
-            Find Grupper nær dig
-	    </p>
-
-        <MudDivider Class="mb-5 mt-1" />
-
-        <EditForm OnValidSubmit="@OnValidSubmit" Model="Filter">
-
-            <MudGrid Justify="Justify.SpaceAround" Spacing="6">
-
-	            <MudItem xs="8">
-		            <ZipCodeAutoComplete For="() => Filter.Location" 
-		                                 Location="@Filter.Location" 
-		                                 LocationChanged="LocationChanged"
-                                         DisableSmartCompletion="_disableSmartCompletionForZipCode" />
-	            </MudItem>
-	            <MudItem xs="4">
-		            <MudNumericField For="() => Filter.WithinRadiusKilometers"
-		                             @bind-Value="Filter.WithinRadiusKilometers"
-		                             Label="km"
-		                             Placeholder="Radius">
-		            </MudNumericField>
-	            </MudItem>
-
-                <MudItem xs="12">
-                    <CategorySelector @bind-Categories="Filter.Categories" />
-                </MudItem>
-
-                <MudItem xs="12">
-	                <MudTextField @bind-Value="Filter.Name" Placeholder="Gruppenavn" Label="Søg på navn" Clearable/>
-                </MudItem>
-
-                <MudItem xs="12" sm="11" md="10" lg="9" xl="8"  Class="mt-8">
-
-	                <MudButtonGroup OverrideStyles="false" Style="width: 100%;">
-		                <MudButton FullWidth
-		                           Variant="Variant.Filled"
-		                           Color="Color.Success"
-		                           ButtonType="ButtonType.Submit">
-			                <MudIcon Icon="@Icons.Material.Filled.Search" />
-		                </MudButton>
-		                <MudButton OnClick="ClearFilter"
-		                           Color="Color.Transparent"
-		                           Variant="Variant.Filled"
-		                           ButtonType="ButtonType.Reset">
-			                <MudIcon Icon="@Icons.Material.Filled.Clear" />
-		                </MudButton>
-	                </MudButtonGroup>
-
-                </MudItem>
-            </MudGrid>
-        </EditForm>
-    </MudPaper>
+
+	<MudButton Href="/personal/groups"
+	           Color="Color.Info"
+	           Class="d-xs-flex justify-content"
+	           Variant="Variant.Filled"
+	           StartIcon="@Icons.Material.Filled.ArrowLeft"
+	           EndIcon="@Icons.Material.Filled.GroupAdd">
+		Gå til mine grupper
+	</MudButton>
+
+	<MudPaper Elevation="3" Class="pa-10 mt-5">
+		<p class="font-open-sans-light" style="color: @JordnaerPalette.RedHeader; font-size: 20px;">
+			Find Grupper nær dig
+		</p>
+
+		<MudDivider Class="mb-5 mt-1"/>
+
+		<EditForm OnValidSubmit="@OnValidSubmit" Model="Filter">
+
+			<MudGrid Justify="Justify.SpaceAround" Spacing="6">
+
+				<MudItem xs="8">
+					<ZipCodeAutoComplete For="() => Filter.Location"
+					                     Location="@Filter.Location"
+					                     LocationChanged="LocationChanged"
+					                     DisableSmartCompletion="_disableSmartCompletionForZipCode"/>
+				</MudItem>
+				<MudItem xs="4">
+					<MudNumericField For="() => Filter.WithinRadiusKilometers"
+					                 @bind-Value="Filter.WithinRadiusKilometers"
+					                 Label="km"
+					                 Placeholder="Radius">
+					</MudNumericField>
+				</MudItem>
+
+				<MudItem xs="12">
+					<CategorySelector @bind-Categories="Filter.Categories"/>
+				</MudItem>
+
+				<MudItem xs="12">
+					<MudTextField @bind-Value="Filter.Name" Placeholder="Gruppenavn" Label="Søg på navn" Clearable/>
+				</MudItem>
+
+				<MudItem xs="12" sm="11" md="10" lg="9" xl="8" Class="mt-8">
+
+					<MudButtonGroup OverrideStyles="false" Style="width: 100%;">
+						<MudButton FullWidth
+						           Variant="Variant.Filled"
+						           Color="Color.Success"
+						           ButtonType="ButtonType.Submit">
+							<MudIcon Icon="@Icons.Material.Filled.Search"/>
+						</MudButton>
+						<MudButton OnClick="ClearFilter"
+						           Color="Color.Transparent"
+						           Variant="Variant.Filled"
+						           ButtonType="ButtonType.Reset">
+							<MudIcon Icon="@Icons.Material.Filled.Clear"/>
+						</MudButton>
+					</MudButtonGroup>
+
+				</MudItem>
+			</MudGrid>
+		</EditForm>
+	</MudPaper>
 </MudContainer>
 
 @code
@@ -83,7 +94,7 @@
 
         _recentlyClearedForm = true;
 
-        Navigation.NavigateTo(uriWithoutQuery);
+        await JsRuntime.NavigateTo(uriWithoutQuery);
     }
 
     private void LocationChanged(string location)

diff --git a/src/web/Jordnaer/Features/UserSearch/UserSearchForm.razor b/src/web/Jordnaer/Features/UserSearch/UserSearchForm.razor
@@ -1,4 +1,5 @@
 @inject NavigationManager Navigation
+@inject IJSRuntime JsRuntime
 
 <MudContainer MaxWidth="MaxWidth.Small">
     <MudPaper Elevation="3" Class="pa-10 mt-5">
@@ -119,7 +120,6 @@
 
     private async Task ClearFilter()
     {
-	    Filter.Categories = [];
         Filter = new UserSearchFilter();
         await FilterChanged.InvokeAsync(Filter);
 
@@ -128,7 +128,7 @@
 
         _recentlyClearedForm = true;
 
-        Navigation.NavigateTo(uriWithoutQuery);
+        await JsRuntime.NavigateTo(uriWithoutQuery);
     }
 
     private void LocationChanged(string location)

diff --git a/src/web/Jordnaer/Pages/GroupSearch/GroupSearch.razor b/src/web/Jordnaer/Pages/GroupSearch/GroupSearch.razor
@@ -9,15 +9,6 @@
 <MetadataComponent Title="Grupper"
                    Description="Søg efter grupper" />
 
-<MudButton Href="/personal/groups" 
-           Color="Color.Info"
-           Class="d-xs-flex justify-content"
-           Variant="Variant.Filled" 
-           StartIcon="@Icons.Material.Filled.ArrowLeft"
-           EndIcon="@Icons.Material.Filled.GroupAdd">
-	Gå til mine grupper
-</MudButton>
-
 <MudLoading @bind-Loading="_isSearching" Darken Overlap>
 
     <GroupSearchForm OnValidSubmit="@Search" @bind-Filter="_filter" />
@@ -81,9 +72,30 @@
 
         await UpdateQueryString();
 
-        Snackbar.Add(message: $"{_searchResult.TotalCount} brugere matchede søgningen.",
-	        severity: _searchResult.TotalCount is 0 ? Severity.Info : Severity.Success,
-	        options => options.VisibleStateDuration = 3500);
+        if (_searchResult.TotalCount is 0)
+        {
+	        Snackbar.Add(
+		        message: "Ingen grupper matchede søgningen.",
+		        severity: Severity.Info,
+		        options =>
+		        {
+			        options.VisibleStateDuration = 3500;
+			        options.CloseAfterNavigation = true;
+		        },
+		        key: nameof(GroupSearch));
+        }
+        else
+        {
+	        Snackbar.Add(message: $"{_searchResult.TotalCount} grupper matchede søgningen.",
+		        severity: Severity.Success,
+		        options =>
+		        {
+			        options.VisibleStateDuration = 3500;
+			        options.Icon = Icons.Material.Filled.ArrowDownward;
+			        options.CloseAfterNavigation = true;
+		        },
+                key: nameof(GroupSearch));
+        }
 
         _hasSearched = true;
 

diff --git a/src/web/Jordnaer/Pages/UserSearch/UserSearch.razor b/src/web/Jordnaer/Pages/UserSearch/UserSearch.razor
@@ -74,9 +74,30 @@
 
         _searchResult = await UserSearchService.GetUsersAsync(_filter);
 
-        Snackbar.Add(message: $"{_searchResult.TotalCount} brugere matchede søgningen.",
-            severity: _searchResult.TotalCount is 0 ? Severity.Info : Severity.Success,
-            options => options.VisibleStateDuration = 3500);
+        if (_searchResult.TotalCount is 0)
+        {
+            Snackbar.Add(
+	            message: "Ingen brugere matchede søgningen.",
+	            severity: Severity.Info,
+	            options =>
+	            {
+		            options.VisibleStateDuration = 3500;
+		            options.CloseAfterNavigation = true;
+	            },
+                key: nameof(UserSearch));
+        }
+        else
+        {
+	        Snackbar.Add(message: $"{_searchResult.TotalCount} brugere matchede søgningen.",
+		        severity: Severity.Success,
+		        options =>
+		        {
+			        options.VisibleStateDuration = 3500;
+			        options.Icon = Icons.Material.Filled.ArrowDownward;
+			        options.CloseAfterNavigation = true;
+		        },
+		        key: nameof(UserSearch));
+        }
 
         await UpdateQueryString();