Add Skill via dialog

Author: linkdotnet

LinkDotNet.Blog.Web/Shared/Skills/AddSkillDialog.razor

@@ -1,6 +1,7 @@
 @using LinkDotNet.Domain
+@inject IToastService toastService
 <ModalDialog @ref="Dialog" Title="Add Skill">
-    <EditForm Model="@model">
+    <EditForm Model="@model" OnValidSubmit="CreateSkillItem">
         <DataAnnotationsValidator />
         <ValidationSummary />
         <div class="mb-3">
@@ -9,7 +10,7 @@
         </div>
         <div class="mb-3">
             <label for="image">Image Url</label>
-            <InputText class="form-control" id="image" @bind-Value="model.ImageUrl" rows="4"/>
+            <InputText class="form-control" id="image" @bind-Value="model.ImageUrl"/>
             <small id="image" class="form-text text-muted">If set is used before the skill (optional). 24x24 pixel
             optimal size</small>
         </div>
@@ -19,7 +20,7 @@
                 </div>
         <div class="mb-3">
             <label for="tags">Proficiency</label>
-            <select class="form-select" id="tags" @bind="@model.Proficiency">
+            <select class="form-select" id="tags" @bind="model.Proficiency">
                 @foreach (var level in ProficiencyLevel.All)
                 {
                     <option value="@level.Key">@level.Key</option>
@@ -31,6 +32,9 @@
 </ModalDialog>
 
 @code {
+    [Parameter]
+    public EventCallback<Skill> SkillAdded { get; set; }
+
     private AddSkillModel model = new();
     private ModalDialog Dialog { get; set; }
 
@@ -39,4 +43,12 @@
         Dialog.Open();
         StateHasChanged();
     }
+
+    private async Task CreateSkillItem()
+    {
+        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}");
+    }
 }

LinkDotNet.Blog.Web/Shared/Skills/AddSkillModel.cs

@@ -1,4 +1,5 @@
 using System.ComponentModel.DataAnnotations;
+using LinkDotNet.Domain;
 
 namespace LinkDotNet.Blog.Web.Shared.Skills
 {
@@ -10,7 +11,7 @@ public class AddSkillModel
         public string ImageUrl { get; set; }
 
         [Required]
-        public string Proficiency { get; set; }
+        public string Proficiency { get; set; } = ProficiencyLevel.Familiar.Key;
 
         [Required]
         public string Capability { get; set; }

LinkDotNet.Blog.Web/Shared/Skills/SkillTable.razor

@@ -6,7 +6,7 @@
             <button type="button" class="btn btn-primary" @onclick="() => AddSkillDialog.Open()"><i class="fas
             fa-plus-square"></i>
                 Add skill</button>
-            <AddSkillDialog @ref="AddSkillDialog"></AddSkillDialog>
+            <AddSkillDialog @ref="AddSkillDialog" SkillAdded="@AddSkill"></AddSkillDialog>
         }
     </div>
     <div>
@@ -45,18 +45,12 @@
 
     private AddSkillDialog AddSkillDialog { get; set; }
 
-    private List<Skill> skills = new()
+    private List<Skill> skills = new();
+
+    private Task AddSkill(Skill skillToAdd)
     {
-        new Skill {Capability = "Backend", Name = "C#", ProficiencyLevel = ProficiencyLevel.Expert, IconUrl = "https://img.icons8.com/color/48/000000/c-sharp-logo.png"},
-        new Skill {Capability = "Backend", Name = ".NET", ProficiencyLevel = ProficiencyLevel.Expert, IconUrl = ""},
-        new Skill {Capability = "UX", Name = "Figma", ProficiencyLevel = ProficiencyLevel.Expert, IconUrl = "https://miro.medium.com/max/1400/1*[email protected]"},
-        new Skill {Capability = "UX", Name = "Webflow", ProficiencyLevel = ProficiencyLevel.Proficient},
-        new Skill {Capability = "UX", Name = "A/B Testing", ProficiencyLevel = ProficiencyLevel.Proficient},
-        new Skill {Capability = "UX", Name = "Case studies", ProficiencyLevel = ProficiencyLevel.Expert},
-        new Skill {Capability = "UX", Name = "Adobe Xd", ProficiencyLevel = ProficiencyLevel.Familiar},
-        new Skill {Capability = "Backend", Name = "Java", ProficiencyLevel = ProficiencyLevel.Familiar, IconUrl = "https://img.icons8.com/ios/50/000000/java-coffee-cup-logo--v1.png"},
-        new Skill {Capability = "Frontend", Name = "Typescript", ProficiencyLevel = ProficiencyLevel.Expert, IconUrl = ""},
-        new Skill {Capability = "DevOps", Name = "git", ProficiencyLevel = ProficiencyLevel.Expert, IconUrl = "https://e7.pngegg.com/pngimages/713/558/png-clipart-computer-icons-pro-git-github-logo-text-logo-thumbnail.png"},
-    };
+        skills.Add(skillToAdd);
+        return Task.CompletedTask;
+    }
 
 }

LinkDotNet.Domain/Skill.cs

@@ -1,7 +1,17 @@
-namespace LinkDotNet.Domain
+using System;
+
+namespace LinkDotNet.Domain
 {
     public class Skill
     {
+        public Skill(string name, string iconUrl, string capability, ProficiencyLevel proficiencyLevel)
+        {
+            IconUrl = iconUrl;
+            Name = name;
+            Capability = capability;
+            ProficiencyLevel = proficiencyLevel;
+        }
+
         public string Id { get; set; }
 
         public string IconUrl { get; set; }
@@ -11,5 +21,23 @@ public class Skill
         public string Capability { get; set; }
 
         public ProficiencyLevel ProficiencyLevel { get; set; }
+
+        public static Skill Create(string name, string iconUrl, string capability, string proficiencyLevel)
+        {
+            if (string.IsNullOrWhiteSpace(name))
+            {
+                throw new ArgumentNullException(nameof(name));
+            }
+
+            if (string.IsNullOrWhiteSpace(capability))
+            {
+                throw new ArgumentNullException(nameof(capability));
+            }
+
+            var level = ProficiencyLevel.Create(proficiencyLevel);
+
+            iconUrl = string.IsNullOrWhiteSpace(iconUrl) ? null : iconUrl;
+            return new Skill(name.Trim(), iconUrl, capability.Trim(), level);
+        }
     }
 }