shoc-backend/SeaHavenIndustries/Components/Pages/Workorder/WorkOrderComment.razor

<style>

    .send{
        padding-top: 2px;
        padding-right: 2px;
        border: 1px solid #aeb3bb !important;
        border-left: none;
        border-radius: 0px 5px 5px 0px;
    }
</style>
<div class="">
    <div class="card-body">
        <div class="row">

            @if (modelList != null)
            {
                @foreach (var itm in modelList)
                {
                   <div class="col-12 d-flex">
                        @if(itm.ApplicationUser.UserImage == null)
                        {
                            <img src="./assets/img/team-4.jpg" class="avatar me-3" style="width: 33px; height: 33px; border-radius: 50%;">
                        }
                        else
                        {
                            <img src="@itm.ApplicationUser.UserImage" class="avatar me-3" style="width: 33px; height: 33px; border-radius: 50%;">
                        }
                        <div class="comment-body w-100">
                            <div class="d-flex justify-content-between align-items-center">
                                <p class="mb-0 fw-bold">@itm.ApplicationUser.FirstName</p>
                                <small class="text-muted">@itm.CreatedDate.Value.ToString("MMM-dd, yyyy HH:mm:ss")</small>
                            </div>
                            <p class="mb-1">@itm.Commenttext</p>                           
                        </div>
                    </div>
                }
            }
            @if (step == 1)
            {
                <div class="col-12 d-flex">
                    @*                 <img src="../../assets/img/team-3.jpg" class="avatar me-2 mt-2" style="width:33px !important; height:33px !important" b-035em2ty5y="">
                *@                <div class="input-group input-group-outline d-flex">
                    <input type="text" class="form-control form-control-lg" style="border-right:none" @bind="model.Commenttext">
                    <InputFile type="file" class="input-active form-control" hidden id="file-upload" OnChange="@docUpload" />
                    <div class="send">
                        <a class=" mb-0 px-3 py-2" href="javascript:void(0)" onclick='uploadfile("file-upload")' style="">
                            @*  <i class="material-icons ">attachment</i> *@
                            <img src="/assets/img/Attachment.svg" />
                        </a>

                        <a class="mb-0 px-2 py-2" @onclick="SaveData" >
                           <i class="fa fa-send text-info pt-2 pe-3"></i>
                        </a>
                    </div>
                </div>
            </div>
            }
        </div>
    </div>
</div>

@using System.Security.Claims;
@inject AuthenticationStateProvider GetAuthenticationStateAsync
@using SeaHavenIndustries.Data.IRepository;
@inject IWorkOrderRepository _service;
@using Microsoft.JSInterop
@using global::Data.SeaHavenIndustries
@inject IJSRuntime JSRuntime
@inject NavigationManager Navigation
@inject ChangeStepService StepService
@implements IDisposable
@code {
    [Parameter]
    public int? id { get; set; }
    [Parameter]
    public int? step { get; set; }
    private IEnumerable<Comments>? modelList;
    private Comments model = new();
    private async Task ChangeStep()
    {
        StepService.SetValue(1);
        await OnStepChange.InvokeAsync(1);
        // StateHasChanged(); // Consider removing this line
    }
    protected override async Task OnParametersSetAsync()
    {
        StepService.OnStateChange += StateHasChanged;

        var result2 = await _service.GetComments(id.Value);
        if (result2 != null)
        {
            modelList = result2;
        }
    }
    protected async Task SaveData()
    {
        model.WorkerOrderId = id.Value;
        var res = await _service.AddComment(model,file);
        if (res == "success")
        {
            model = new Comments();
            file = null;
            // await ShowSweetAlert("Sucessfully Saved Data", "success");
            modelList = await _service.GetComments(id.Value);
        }
        else
        {
            await ShowSweetAlert(res, "error");
        }
    }
    private IBrowserFile file;
    private async Task docUpload(InputFileChangeEventArgs e)
    {
        var imageFiles = e.File;
        file = imageFiles;
        model.WorkerOrderId = id.Value;
        var res = await _service.AddComment(model, file);
        if (res == "success")
        {
            model = new Comments();
            file = null;
            // await ShowSweetAlert("Sucessfully Saved Data", "success");
            modelList = await _service.GetComments(id.Value);
        }
        else
        {
            await ShowSweetAlert(res, "error");
        }
    }
    private async Task ShowSweetAlert(string title, string icon)
    {
        // Display a SweetAlert dialog
        await JSRuntime.InvokeVoidAsync("Swal.fire", new
        {
            toast = true,
            showConfirmButton = false,
            timer = 3000,
            title = title,
            icon = icon,
            position = "top-end"
        });
        await JSRuntime.InvokeVoidAsync("closemodal");
    }
    [Parameter]
    public EventCallback<int> OnStepChange { get; set; }
    public void Dispose()
    {
        StepService.OnStateChange -= StateHasChanged;
    }
}