kevin/BlazorDeepDive
1
0
Fork 0
Code

Create component for to-do item.

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

32
ServerManagement/Components/Controls/ToDoItemComponent.razor Normal file
View File

@ -0,0 +1,32 @@
@if (Item != null)
{
<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 ToDoItem? Item { get; set; }
}

24
ServerManagement/Components/Controls/ToDoItemListComponent.razor
View File

@ -2,29 +2,7 @@
{ {
@foreach (var item in Items) @foreach (var item in Items)
{ {
<li @key="item.Id"> <ToDoItemComponent Item="item"></ToDoItemComponent>
<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>
} }
} }