autocomplete

src/Nyanlabs.Umogen.Server/Pages/Contracts.razor

@@ -14,12 +14,12 @@
         <div class="row justify-content-center align-items-center g-2">
             <div class="col mb-3">
                 <label for="employer" class="form-label">Pracodawca (PESEL lub NIP)</label>
-                <input type="text" class="form-control" id="employer" @onchange="ChgEmployer" value="@_employerId">
+                <Autocomplete Value="@_employerId" AcceptedValues="GetEmployers()" Change="ChgEmployer" />
                 <span class="validation-message">@(employer == null ? "" : $"{employer.GetName()}")</span>
             </div>
             <div class="col mb-3">
                 <label for="employee" class="form-label">Pracownik (PESEL)</label>
-                <input type="text" class="form-control" id="employee" @onchange="ChgEmployee" value="@_employeeId">
+                <Autocomplete Value="@_employeeId" AcceptedValues="GetEmployees()" Change="ChgEmployee" />
                 <span class="validation-message">@(employee == null ? "" : $"{employee.Name} {employee.Surname}")</span>
             </div>
         </div>
@@ -60,6 +60,7 @@
         _employerId = (string)e.Value!;
         employer = await db.Persons.AsNoTracking().SingleOrDefaultAsync(s => s.Pesel == _employerId) as IEntity ?? await
         db.Companies.AsNoTracking().SingleOrDefaultAsync(s => s.Nip == _employerId);
+        StateHasChanged();
     }
 
     private async Task ChgEmployee(ChangeEventArgs e)
@@ -96,6 +97,19 @@
         _validity = new ValidTime(now, span);
     }
 
+    private IEnumerable<(string, string)> GetEmployers()
+    {
+        var pers = db.Persons.AsNoTracking().AsEnumerable().Select(p => ($"{p.Name} {p.Surname}", p.Pesel));
+        var comp = db.Companies.AsNoTracking().AsEnumerable().Select(c => (c.Name, c.Nip!));
+
+        return pers.Union(comp);
+    }
+
+    private IEnumerable<(string, string)> GetEmployees()
+    {
+        return db.Persons.AsNoTracking().AsEnumerable().Select(p => ($"{p.Name} {p.Surname}", p.Pesel));
+    }
+
     private async Task Process()
     {
         disB = true;

src/Nyanlabs.Umogen.Server/Shared/Autocomplete.razor

@@ -0,0 +1,51 @@
+<div class="relat" @onfocusin="(() => focus = true)">
+    <input type="text" class="form-control" @oninput="Prechange" value="@Value">
+    @if (focus)
+    {
+        <div class="autocomplete-items">
+            @foreach (var tup in Filter())
+            {
+                <div @onclick="async (e) => await Select(tup.Item2)">
+                    @tup.Item1 (@tup.Item2)
+                </div>
+            }
+        </div>
+    }
+</div>
+@code {
+    private bool focus = false;
+    [Parameter]
+    public IEnumerable<(string, string)> AcceptedValues { get; set; } = [];
+
+
+    [Parameter]
+    public string Value { get; set; } = "";
+
+    private async Task Prechange(ChangeEventArgs e)
+    {
+        Value = (string)e.Value!;
+        StateHasChanged();
+        await Change.InvokeAsync(e);
+    }
+
+    [Parameter]
+    public EventCallback<ChangeEventArgs> Change { get; set; }
+
+    private async Task Select(string s)
+    {
+        focus = false;
+        Value = s;
+
+        await Prechange(new()
+            {
+                Value = s
+            });
+        StateHasChanged();
+    }
+
+    private IEnumerable<(string, string)> Filter()
+    {
+        return AcceptedValues.Where(v => v.Item1.StartsWith(Value, StringComparison.OrdinalIgnoreCase) ||
+        v.Item2.StartsWith(Value, StringComparison.OrdinalIgnoreCase));
+    }
+}

src/Nyanlabs.Umogen.Server/Shared/Autocomplete.razor.css

@@ -0,0 +1,32 @@
+.relat {
+  position: relative;
+}
+
+.autocomplete {
+  position: relative;
+  display: inline-block;
+}
+
+.autocomplete-items {
+  position: absolute;
+  border: 1px solid #d4d4d4;
+  border-bottom: none;
+  border-top: none;
+  z-index: 99;
+  /*position the autocomplete items to be the same width as the container:*/
+  top: 3rem;
+  left: 0;
+  right: 0;
+  width: fit-content;
+}
+
+.autocomplete-items div {
+  padding: 10px;
+  cursor: pointer;
+  background-color: #fff;
+  border-bottom: 1px solid #d4d4d4;
+}
+
+.autocomplete-items div:hover {
+  background-color: rgb(156, 237, 248);
+}