SimpleQuizClient/Components/Pages/Topic/TopicList.razor - master - fxk/SimpleQuiz

SimpleQuizClient/Components/Pages/Topic/TopicList.razor
89 строк3 KB
fxk
Изменил вьюшки под новый тип данных
17 мар 2025, 01:56
17 мар 2025, 01:56beebbf7
@page "/topic"
@using SimpleQuiz.Scheme

@inject HttpClient QuizAPI

<PageTitle>Тема</PageTitle>

<style>
    .container {
        display: flex;
        flex-wrap: wrap;
        gap: 20px; /* Отступ между колонками */
    }

    ul {
        list-style-type: none;
        padding-left: 0;
        max-height: 300px; /* Ограничение высоты списка */
        overflow-y: auto; /* Прокрутка, если список превышает высоту */
    }

    li {
        display: flex;
        align-items: center;
        gap: 10px; /* Отступ между текстом и иконкой */
    }

    .delete-icon {
        cursor: pointer;
        fill: red;
        height: 16px;
        width: 16px;
    }

    .edit-form {
        flex-basis: 100%; /* Формирует новую строку для формы */
        max-width: 400px; /* Ограничение максимальной ширины формы */
    }
</style>

<MudPaper Class="pa-8" Outlined Square>
    <MudForm>
        <MudStack Row>
            <MudTextField T="string" Label="Topic" Required @bind-Value="Topic.Name"/>
            <MudTextField T="byte" Label="Semester" Required @bind-Value="Topic.Semester"/>
            <MudButton OnClick="CreateTopic">Создать</MudButton>
        </MudStack>
    </MudForm>
</MudPaper>

<div class="container">
    <ul>
        @foreach (var topic in Topics)
        {
            <li>
                <a href="topic/@topic.Id">@topic</a>
                <svg class="delete-icon" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" @onclick="() => DeleteTopic(topic)">
                    <line x1="0" y1="16" x2="16" y2="0" stroke="currentColor" stroke-width="2"/>
                    <line x1="0" y1="0" x2="16" y2="16" stroke="currentColor" stroke-width="2"/>
                </svg>
            </li>
        }
    </ul>
</div>



@code {
    private Topic Topic { get; set; } = new Topic();
    private List<Topic> Topics { get; set; } = [];
    
    protected override async Task OnInitializedAsync()
    {
        Topics = await QuizAPI.GetFromJsonAsync<List<Topic>>("topic") ?? [];
    }

    private async Task CreateTopic()
    {
        await QuizAPI.PostAsJsonAsync("topic", Topic);
        Topics = await QuizAPI.GetFromJsonAsync<List<Topic>>("topic") ?? [];
    }

    private async Task DeleteTopic(Topic topic)
    {
        var result = await QuizAPI.DeleteAsync($"topic?id={topic.Id}");
        Topics = await QuizAPI.GetFromJsonAsync<List<Topic>>("topic") ?? [];
    }

}