autocomplete

This commit is contained in:
femsci 2023-11-18 15:06:16 +01:00
parent 1ed2b8d731
commit c87330a032
Signed by: femsci
GPG key ID: 08F7911F0E650C67
3 changed files with 99 additions and 2 deletions

View file

@ -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;

View file

@ -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));
}
}

View file

@ -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);
}