kevin/BlazorDeepDive
1
0
Fork 0
Code

Create component for to-do list.

Browse Source
This commit is contained in:
Kevin Matsubara 2025-03-29 11:50:00 +01:00
parent 23d20f2f04
commit 5f7b63071e
2 changed files with 35 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
ServerManagement/Components/Controls/ToDoItemListComponent.razor Normal file
View File

@ -0,0 +1,34 @@
@if (Items != null)
{
@foreach (var item in Items)
{
<li @key="item.Id">
<div class="row mb-2">
<div class="col-1" style="width: 30px;">
<input type="checkbox" class="form-check-input" style="vertical-align: middle" @bind-value="item.IsCompleted" checked="@item.IsCompleted"/>
</div>
<div class="col">
@if (item.IsCompleted)
{
<input type="text" class="form-control border-0 text-decoration-line-through" style="vertical-align: middle" @bind-value="item.Name" disabled/>
}
else
{
<input type="text" class="form-control border-0" style="vertical-align: middle" @bind-value="item.Name"/>
}
</div>
<div class="col">
@if (item.IsCompleted)
{
<text>Completed at: @item.DateCompleted.ToLongDateString()</text>
}
</div>
</div>
</li>
}
}
@code {
[Parameter]
public List<ToDoItem>? Items { get; set; }
}

27
ServerManagement/Components/Pages/ToDoList.razor
View File

@ -10,32 +10,7 @@
@if (items != null && items.Count > 0)
{
<ul class="list-unstyled">
@foreach (var item in items)
{
<li @key="item.Id">
<div class="row mb-2">
<div class="col-1" style="width: 30px;">
<input type="checkbox" class="form-check-input" style="vertical-align: middle" @bind-value="item.IsCompleted" checked="@item.IsCompleted"/>
</div>
<div class="col">
@if (item.IsCompleted)
{
<input type="text" class="form-control border-0 text-decoration-line-through" style="vertical-align: middle" @bind-value="item.Name" disabled/>
}
else
{
<input type="text" class="form-control border-0" style="vertical-align: middle" @bind-value="item.Name"/>
}
</div>
<div class="col">
@if (item.IsCompleted)
{
<text>Completed at: @item.DateCompleted.ToLongDateString()</text>
}
</div>
</div>
</li>
}
<ToDoItemListComponent Items="items"></ToDoItemListComponent>
</ul>
}