kevin/BlazorDeepDive
1
0
Fork 0
Code

Add checkbox and date completed columns to to-do list.

Browse Source
This commit is contained in:
Kevin Matsubara 2025-03-26 18:48:07 +01:00
parent 54bd002293
commit 6f016cd2b7
2 changed files with 33 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,12 +9,30 @@
<br/>
@if (items != null && items.Count > 0)
{
<ul>
<ul class="list-unstyled">
@foreach (var item in items)
{
<li @key="item.Id">
<div class="mb-2">
<input type="text" class="form-control border-0" @bind-value="item.Name"/>
<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>
}

13
ServerManagement/Models/ToDoItem.cs
View File

@ -4,7 +4,18 @@ namespace ServerManagement.Models
{
public int Id { get; set; }
public string Name { get; set; } = "";
public bool IsCompleted { get; set; }
private bool _isCompleted;
public bool IsCompleted {
get => _isCompleted;
set
{
_isCompleted = value;
if (value)
{
DateCompleted = DateTime.Now;
}
}
}
public DateTime DateCompleted { get; set; }
}
}