120 lines
4.1 KiB
Plaintext
120 lines
4.1 KiB
Plaintext
@page "/todo"
|
|
@rendermode InteractiveServer
|
|
|
|
<PageTitle>Todo</PageTitle>
|
|
|
|
<h1>Todo (@todos.Count(todo => !todo.IsDone))</h1>
|
|
|
|
<div style="display: flex; width: 100%;">
|
|
<input placeholder="Something TODO" @bind="newTodo" style="flex: 1; box-sizing: content-box;"/>
|
|
<button @onclick="AddTodo" style="margin-left: 10px; border-radius: 4px">ADD</button>
|
|
</div>
|
|
|
|
<hr>
|
|
<h2>Todo List</h2>
|
|
@if (todos.Count <= 0)
|
|
{
|
|
<p>비어있습니다.</p>
|
|
}
|
|
<ul style="padding-left: 0;">
|
|
@foreach (var todo in todos.Select((item, index) => new { item, index }))
|
|
{
|
|
<li style="list-style: none; margin-top: 5px; margin-bottom: 5px; position: relative;">
|
|
<div class= "list-item" @onclick="() => ToggleTodo(todo.item, todo.index)" style="cursor: pointer;">
|
|
<input type="checkbox" @bind="todo.item.IsDone" />
|
|
<div class="text-content">
|
|
<div class="small-text">
|
|
@if (todo.item.IsDone)
|
|
{
|
|
<del>
|
|
<span>생성일: @todo.item.InputDate</span>
|
|
</del>
|
|
}
|
|
else
|
|
{
|
|
<span>생성일: @todo.item.InputDate</span>
|
|
}
|
|
</div>
|
|
|
|
<div class="normal-text">
|
|
@if (todo.item.IsDone)
|
|
{
|
|
<del>
|
|
@todo.item.Title
|
|
</del>
|
|
}
|
|
else
|
|
{
|
|
@todo.item.Title
|
|
}
|
|
</div>
|
|
|
|
<div class="small-text">
|
|
@if (todo.item.IsDone)
|
|
{
|
|
<span>마감일: @todo.item.SuccessDate</span>
|
|
}
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button class="small-button" @onclick = "() => RemoveList(todo.item, todo.index)" style="position: absolute; right: 4px; bottom: 4px;">
|
|
🗑️
|
|
</button>
|
|
</li>
|
|
}
|
|
</ul>
|
|
|
|
@if(doneTodos.Count > 0)
|
|
{
|
|
<hr>
|
|
<h2>Done List</h2>
|
|
}
|
|
<ul style="padding-left: 0;">
|
|
@foreach (var todo in doneTodos.Select((item, index) => new { item, index }))
|
|
{
|
|
<li style="list-style: none; margin-top: 5px; margin-bottom: 5px; position: relative;">
|
|
<div class="list-item" @onclick="() => ToggleTodo(todo.item, todo.index)" style="cursor: pointer;">
|
|
<input type="checkbox" @bind="todo.item.IsDone" />
|
|
<div class="text-content">
|
|
<div class="small-text">
|
|
@if (todo.item.IsDone)
|
|
{
|
|
<del>
|
|
<span>생성일: @todo.item.InputDate</span>
|
|
</del>
|
|
}
|
|
else
|
|
{
|
|
<span>생성일: @todo.item.InputDate</span>
|
|
}
|
|
</div>
|
|
|
|
<div class="normal-text">
|
|
@if (todo.item.IsDone)
|
|
{
|
|
<del>
|
|
@todo.item.Title
|
|
</del>
|
|
}
|
|
else
|
|
{
|
|
@todo.item.Title
|
|
}
|
|
</div>
|
|
|
|
<div class="small-text">
|
|
@if (todo.item.IsDone)
|
|
{
|
|
<span>마감일: @todo.item.SuccessDate</span>
|
|
}
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button class="small-button" @onclick = "() => RemoveList(todo.item, todo.index)" style="position: absolute; right: 4px; bottom: 4px;">
|
|
🗑️
|
|
</button>
|
|
</li>
|
|
}
|
|
</ul> |