SimpleQuizClient/Components/Pages/QuestionItem.razor - master - fxk/SimpleQuiz

SimpleQuizClient/Components/Pages/QuestionItem.razor
109 строк3 KB
fxk
Изменил вьюшки под новый тип данных
17 мар 2025, 01:56
17 мар 2025, 01:56beebbf7
@page "/question/{id:guid}"
@using SimpleQuiz.Scheme
@using Newtonsoft.Json.Linq;

@inject ApiClient ApiClient
@inject HttpClient HttpClient

<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="Answer" Required @bind-Value="Answer.Text"/>
            <MudCheckBox Label="Верный?" @bind-Value="Answer.IsValid" Required/>
            <MudButton OnClick="CreateAnswer">Создать</MudButton>
        </MudStack>
    </MudForm>
</MudPaper>

<div class="container">
    <a href="@($"topic/{Question.TopicId}")">Назад</a>
    <ul>
        @foreach (var answer in Question.Answers)
        {
            <li>
                <a href="@($"question/{answer.Id}")">@($"{answer.IsValid} - {answer.Text}")</a>
                <svg class="delete-icon" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" @onclick="() => DeleteAnswer(answer)">
                    <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 {
    [Parameter] public Guid Id { get; set; }

    private Question Question { get; set; } = new();
    private Answer Answer { get; set; } = new();

    protected override async Task OnInitializedAsync()
    {
        var question = await ApiClient.GetFromJsonAsync<Question>($"question?id={Id}");
        
        if (question is null)
            return;
        
        Question = question;
    }

    private Task UpdateQuestion()
    {
        throw new NotImplementedException();
    }

    private async Task CreateAnswer()
    {
        Answer.QuestionId = Id;
        
        var result = await ApiClient.HttpClient.PostAsJsonAsync("answer", Answer);
        if (!result.IsSuccessStatusCode)
        {
            string content = await result.Content.ReadAsStringAsync();
        
            JObject jsonObject = JObject.Parse(content);
            Console.WriteLine(jsonObject);
        }
        Question = await ApiClient.GetFromJsonAsync<Question>($"question?id={Id}") ?? Question;
    }

    private async Task DeleteAnswer(Answer answer)
    {
        await ApiClient.DeleteAsync($"answer?id={answer.Id}");
        Question = await ApiClient.GetFromJsonAsync<Question>($"question?id={Id}") ?? Question;
    }

}