Search works (#3)

Still need to clean it up a bit, and make the UI have a collapsed section once the search is completed

src/JobsJobsJobs/Client/Pages/Profile/Search.razor

@@ -12,6 +12,59 @@
   }
   else
   {
+    if (!Searched)
+    {
+      <p>Instructions go here</p>
+    }
+    <section>
+      <EditForm Model=@Criteria OnValidSubmit=@RetrieveProfiles>
+        <div class="form-row">
+          <div class="col col-12 col-sm-6 col-md-4 col-lg-3">
+            <label for="continentId" class="jjj-label">Continent</label>
+            <InputSelect id="continentId" @bind-Value=@Criteria.ContinentId class="form-control form-control-sm">
+              <option value="">&ndash; Any &ndash;</option>
+              @foreach (var (id, name) in Continents)
+              {
+                <option value="@id">@name</option>
+              }
+            </InputSelect>
+          </div>
+          <div class="col col-12 col-sm-6 offset-md-2 col-lg-3 offset-lg-0">
+            <label class="jjj-label">Seeking Remote Work?</label><br>
+            <InputRadioGroup @bind-Value=@Criteria.RemoteWork>
+              <div class="form-check form-check-inline">
+                <InputRadio id="remoteNull" Value=@("") class="form-check-input" />
+                <label for="remoteNull" class="form-check-label">No Selection</label>
+              </div>
+              <div class="form-check form-check-inline">
+                <InputRadio id="remoteYes" Value=@("yes") class="form-check-input" />
+                <label for="remoteYes" class="form-check-label">Yes</label>
+              </div>
+              <div class="form-check form-check-inline">
+                <InputRadio id="remoteNo" Value=@("no") class="form-check-input" />
+                <label for="remoteNo" class="form-check-label">No</label>
+              </div>
+            </InputRadioGroup>
+          </div>
+          <div class="col col-12 col-sm-6 col-lg-3">
+            <label for="skillSearch" class="jjj-label">Skill</label>
+            <InputText id="skillSearch" @bind-Value=@Criteria.Skill class="form-control form-control-sm"
+                       placeholder="(free-form text)" />
+          </div>
+          <div class="col col-12 col-sm-6 col-lg-3">
+            <label for="bioSearch" class="jjj-label">Bio / Experience</label>
+            <InputText id="bioSearch" @bind-Value=@Criteria.BioExperience class="form-control form-control-sm"
+                       placeholder="(free-form text)" />
+          </div>
+        </div>
+        <div class="form-row">
+          <div class="col">
+            <br>
+            <button type="submit" class="btn btn-sm btn-outline-primary">Search</button>
+          </div>
+        </div>
+      </EditForm>
+    </section>
     @if (SearchResults.Any())
     {
       <table class="table table-sm table-hover">

src/JobsJobsJobs/Client/Pages/Profile/Search.razor.cs

@@ -4,6 +4,7 @@ using Microsoft.AspNetCore.Components;
 using System;
 using System.Collections.Generic;
 using System.Linq;
+using System.Net;
 using System.Threading.Tasks;
 
 namespace JobsJobsJobs.Client.Pages.Profile
@@ -20,6 +21,11 @@ namespace JobsJobsJobs.Client.Pages.Profile
         /// </summary>
         private bool Searching { get; set; } = false;
 
+        /// <summary>
+        /// The search criteria
+        /// </summary>
+        private ProfileSearch Criteria { get; set; } = new ProfileSearch();
+
         /// <summary>
         /// Error messages encountered while searching for profiles
         /// </summary>
@@ -60,8 +66,8 @@ namespace JobsJobsJobs.Client.Pages.Profile
         {
             Searching = true;
 
-            // TODO: send a filter with this request
-            var searchResult = await ServerApi.RetrieveMany<ProfileSearchResult>(http, "profile/search");
+            var searchResult = await ServerApi.RetrieveMany<ProfileSearchResult>(http,
+                $"profile/search{SearchQuery()}");
 
             if (searchResult.IsOk)
             {
@@ -85,5 +91,27 @@ namespace JobsJobsJobs.Client.Pages.Profile
         /// <param name="condition">The condition in question</param>
         /// <returns>"Yes" for true, "No" for false</returns>
         private static string YesOrNo(bool condition) => condition ? "Yes" : "No";
+
+        /// <summary>
+        /// Create a search query string from the currently-entered criteria
+        /// </summary>
+        /// <returns>The query string for the currently-entered criteria</returns>
+        private string SearchQuery()
+        {
+            if (Criteria.IsEmptySearch) return "";
+
+            string part(string name, Func<ProfileSearch, string?> func) =>
+                string.IsNullOrEmpty(func(Criteria)) ? "" : $"{name}={WebUtility.UrlEncode(func(Criteria))}";
+
+            IEnumerable<string> parts()
+            {
+                yield return part("ContinentId", it => it.ContinentId);
+                yield return part("Skill", it => it.Skill);
+                yield return part("BioExperience", it => it.BioExperience);
+                yield return part("RemoteWork", it => it.RemoteWork);
+            }
+
+            return $"?{string.Join("&", parts().Where(it => !string.IsNullOrEmpty(it)).ToArray())}";
+        }
     }
 }

src/JobsJobsJobs/Client/wwwroot/css/app.css

@@ -65,3 +65,7 @@ label.jjj-required::after {
   color: red;
   content: ' *';
 }
+
+label.jjj-label {
+  font-style: italic;
+}