SkillTable.razor

@using LinkDotNet.Blog.Domain
@using LinkDotNet.Blog.Infrastructure.Persistence
@inject IRepository<Skill> Repository
<div>
        @if (ShowAdminActions)
        {
            <button type="button" class="btn btn-primary" @onclick="() => AddSkillDialog.Open()">
                <i class="plus"></i>Add skill</button>
            <AddSkillDialog @ref="AddSkillDialog" SkillAdded="@AddSkill"></AddSkillDialog>
        }
    </div>
<div class="aboutme-table-container">
    <table class="aboutme-skill-table" id="aboutme-skill-table">
        <tbody>
        <tr>
            <th>Capability</th>
            <th>Familiar with</th>
            <th>Proficient</th>
            <th>Expert</th>
        </tr>
        @foreach (var skillCapabilityGroup in skills.GroupBy(s => s.Capability))
        {
            <tr ondragover="event.preventDefault();">
                <td>@skillCapabilityGroup.Key</td>
                @foreach (var skillLevel in ProficiencyLevel.All)
                {
                    <td @ondrop="@(() => HandleDrop(skillLevel))" class="proficiency-level">
                        @foreach (var skill in skillCapabilityGroup.Where(s => s.ProficiencyLevel == skillLevel))
                        {
                            @if (ShowAdminActions)
                            {
                                <div draggable="true" @ondrag="@(() => currentDragItem = skill)" style="cursor: grab"
                                 class="skill-tag">
                                    <SkillTag Skill="@skill"
                                              ShowAdminActions="@true"
                                              DeleteSkill="@(() => DeleteSkill(skill))"/>
                                </div>
                            }
                            else
                            {
                                <div>
                                    <SkillTag Skill="@skill"/>
                                </div>
                            }
                        }
                    </td>
                }
            </tr>
        }
        </tbody>
    </table>
    @if (ShowAdminActions)
    {
        <small for="aboutme-skill-table">You can drag and drop your skills from one proficiency to another</small>
    }
</div>
@code {
    [Parameter]
    public bool ShowAdminActions { get; set; }

    private AddSkillDialog AddSkillDialog { get; set; } = default!;

    private List<Skill> skills = [];

    private Skill? currentDragItem;

    protected override async Task OnInitializedAsync()
    {
        skills = (await Repository.GetAllAsync()).ToList();
    }

    private async Task AddSkill(Skill skillToAdd)
    {
        skills.Add(skillToAdd);
        await Repository.StoreAsync(skillToAdd);
    }

    private async Task DeleteSkill(Skill skill)
    {
        skills.Remove(skill);
        await Repository.DeleteAsync(skill.Id);
    }

    private async Task HandleDrop(ProficiencyLevel proficiencyLevel)
    {
        if (currentDragItem is null || currentDragItem.ProficiencyLevel == proficiencyLevel)
        {
            return;
        }

        currentDragItem.SetProficiencyLevel(proficiencyLevel);
        await Repository.StoreAsync(currentDragItem);
        currentDragItem = null;
    }

}