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

SimpleQuizClient/Components/Pages/Topic/TopicItem.razor
151 строка5 KB
foxuk
Добавил возможность добавлять картинку к вопросам
24 мар 2025, 09:43
24 мар 2025, 09:439a9843b
@page "/topic/{id:int}"
@using SimpleQuiz.Scheme
@using Newtonsoft.Json.Linq

@inject ISnackbar Snackbar
@inject HttpClient QuizAPI
@inject ApiClient ApiClient
@inject NavigationManager NavigationManager

<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="Question" Required @bind-Value="Question.Text"/>
            <MudSelect T="QuestionType" @bind-Value="Question.Type">
                <MudSelectItem Value="QuestionType.Open">Открытый</MudSelectItem>
                <MudSelectItem Value="QuestionType.Closed">Закрытый</MudSelectItem>
            </MudSelect>
            <MudSelect T="Difficult" @bind-Value="Question.Difficult">
                <MudSelectItem Value="Difficult.Easy">Легкий</MudSelectItem>
                <MudSelectItem Value="Difficult.Medium">Средний</MudSelectItem>
                <MudSelectItem Value="Difficult.Hard">Тяжелый</MudSelectItem>
            </MudSelect>
            @if (_uploadedFile is not null)
            {
                <MudTextField T="string" Disabled Value="_uploadedFile.Name" Label="Выбранный файл" />
            }
            <MudFileUpload T="IBrowserFile" Accept=".jpeg, .jpg, .png" @bind-Files="_uploadedFile">
                <ActivatorContent>
                    <MudButton Variant="Variant.Filled" StartIcon="@Icons.Material.Filled.UploadFile">
                        Загрузить картинку
                    </MudButton>
                </ActivatorContent>
            </MudFileUpload>
            <MudButton OnClick="CreateQuestion">Создать</MudButton>
        </MudStack>
    </MudForm>
</MudPaper>

<div class="container">
    <a href="topic">@Topic</a>
    <ul>
        @foreach (var question in Topic.Questions)
        {
            <li>
                <a href="@($"question/{question.Id}")">@($"{question.Text}")</a>
                <svg class="delete-icon" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" @onclick="() => DeleteQuestion(question)">
                    <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 int Id { get; set; }

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

    private IBrowserFile? _uploadedFile;

    protected override async Task OnInitializedAsync()
    {
        var topic = await ApiClient.GetFromJsonAsync<Topic>($"topic?id={Id}");
        
        if (topic is null)
            NavigationManager.NavigateTo("notfound");
        
        Topic = topic!;
    }

    private async Task UpdateTopic()
    {
        var topic = await QuizAPI.PutAsJsonAsync("topic", Topic);
        StateHasChanged();
    }

    private async Task CreateQuestion()
    {
        Question.Topic = Topic;
        Question.TopicId = Topic.Id;

        if (_uploadedFile is not null && _uploadedFile.Size != 0)
        {
            using var content = new MultipartFormDataContent();
            var fileContent = new StreamContent(_uploadedFile.OpenReadStream());
            content.Add(fileContent, "file", _uploadedFile.Name);
            
            // Получаем путь сохраненного файла с post
            var response = await ApiClient.HttpClient.PostAsync("file", content);

            // Добавляем путь вопросу
            if (response.IsSuccessStatusCode)
                Question.FilePath = JObject.Parse(await response.Content.ReadAsStringAsync())["message"]!.ToString();
            
        }
        
        var result = await ApiClient.HttpClient.PostAsJsonAsync("question", Question);
        if (!result.IsSuccessStatusCode)
        {
            string content = await result.Content.ReadAsStringAsync();
        
            JObject jsonObject = JObject.Parse(content);
            Console.WriteLine(jsonObject);
        }
        
        Topic = await ApiClient.GetFromJsonAsync<Topic>($"topic?id={Id}") ?? Topic;
    }

    private async Task DeleteQuestion(Question question)
    {
        var result = await ApiClient.DeleteAsync($"question?id={question.Id}");
        Topic = await ApiClient.GetFromJsonAsync<Topic>($"topic?id={Id}") ?? Topic;
    }

}