Files
Guestlist/Guestlist/Components/Pages/GuestList.razor
T

87 lines
2.7 KiB
Plaintext

@page "/list"
@rendermode InteractiveServer
<div class="d-flex flex-column flex-md-row align-items-md-center justify-content-between gap-3 mb-4">
<div>
<h1 class="h2 mb-1">Guest list</h1>
<p class="text-secondary mb-0">Read-only access for guests.</p>
</div>
<div class="d-flex flex-column flex-sm-row gap-3 w-100 w-md-auto">
<form method="get" action="/list" class="w-100 w-md-auto">
<label class="form-label" for="guest-list-search">Search</label>
<div class="d-flex gap-2">
<input id="guest-list-search" class="form-control" name="search" value="@SearchTerm" placeholder="Name, note or user" />
<button type="submit" class="btn btn-outline-primary">
Search
</button>
@if (!string.IsNullOrWhiteSpace(SearchTerm))
{
<a class="btn btn-outline-secondary" href="/list">Clear</a>
}
</div>
</form>
@if (ShowLeaveGuestList)
{
<form method="post" action="/guest/logout" class="align-self-sm-end">
<button type="submit" class="btn btn-outline-secondary">
Leave guest list
</button>
</form>
}
</div>
</div>
@if (GuestEntries is null)
{
<div class="card shadow-sm">
<div class="card-body">
<p class="text-secondary mb-0">Loading guest list...</p>
</div>
</div>
}
else if (GuestEntries.Count == 0)
{
<div class="card shadow-sm">
<div class="card-body">
<p class="text-secondary mb-0">No guests have been added yet.</p>
</div>
</div>
}
else if (!FilteredGuestEntries.Any())
{
<div class="card shadow-sm">
<div class="card-body">
<p class="text-secondary mb-0">No guests match the current filter.</p>
</div>
</div>
}
else
{
<div class="guest-card-grid">
@foreach (var guest in FilteredGuestEntries)
{
<article class="card shadow-sm">
<div class="card-body">
<h2 class="h5 card-title">@guest.Name</h2>
@if (!string.IsNullOrWhiteSpace(guest.Notes))
{
<p class="card-text">@guest.Notes</p>
}
else
{
<p class="card-text text-secondary">No notes.</p>
}
<p class="small text-secondary mb-0">
Added by @guest.AddedByUsername<br />
@guest.CreatedAt.ToLocalTime().ToString("g")
</p>
</div>
</article>
}
</div>
}