AddSkillDialog.razor

@using LinkDotNet.Blog.Domain
@inject IToastService ToastService
<ModalDialog @ref="Dialog" Title="Add Skill">
    <EditForm Model="@model" OnValidSubmit="CreateSkillItem">
        <DataAnnotationsValidator />
        <ValidationSummary />
        <div class="mb-3">
	        <label for="title" class="form-label">Skill name</label>
	        <InputText class="form-control" id="title" @bind-Value="model.Skill" />
        </div>
        <div class="mb-3">
	        <label for="image" class="form-label">Image Url</label>
	        <InputText class="form-control" id="image" @bind-Value="model.ImageUrl" />
	        <small class="form-text text-secondary">
		        If set, it's used before the skill (optional). 24x24 pixel optimal size.
	        </small>
        </div>
        <div class="mb-3">
	        <label for="capability" class="form-label">Capability</label>
	        <InputText class="form-control" id="capability" @bind-Value="model.Capability" />
        </div>
        <div class="mb-3">
	        <label for="proficiency" class="form-label">Proficiency</label>
	        <select class="form-select" id="proficiency" @bind="model.Proficiency">
		        @foreach (var level in ProficiencyLevel.All.Select(l => l.Key))
		        {
			        <option value="@level">@level</option>
		        }
	        </select>
        </div>

        <button class="btn btn-primary" type="submit">Submit</button>
    </EditForm>
</ModalDialog>

@code {
    [Parameter]
    public EventCallback<Skill> SkillAdded { get; set; }

    private AddSkillModel model = new();
    private ModalDialog Dialog { get; set; } = default!;

    public void Open()
    {
        Dialog.Open();
        StateHasChanged();
    }

    private async Task CreateSkillItem()
    {
	    ArgumentNullException.ThrowIfNull(model.Skill);
	    ArgumentNullException.ThrowIfNull(model.Capability);

        var skill = Skill.Create(model.Skill, model.ImageUrl, model.Capability, model.Proficiency);
        await SkillAdded.InvokeAsync(skill);
        model = new AddSkillModel();
        ToastService.ShowSuccess($"Created Skill {skill.Name} in capability {skill.Capability} with level {skill.ProficiencyLevel}");
    }
}