Skip to content

Commit 4a29f3f

Browse files
linkdotnetlinkdotnet
committed
Extended SkillTable
1 parent 6fd24c4 commit 4a29f3f

File tree

10 files changed

+124
-46
lines changed

10 files changed

+124
-46
lines changed

‎LinkDotNet.Blog.Web/Pages/AboutMe.razor

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@page "/AboutMe"
2+
@using LinkDotNet.Blog.Web.Shared.Skills
23
@inject AppConfiguration appConfiguration
34
@inject AuthenticationStateProvider authenticationStateProvider
45
@* TODO: Meta Tags About Me - [Name here] *@
@@ -14,7 +15,7 @@
1415
<div class="col-lg-9 col-md-8 tab-container">
1516
<div class="row">
1617
<div class="col-md12 tab-content">
17-
<SkillTable></SkillTable>
18+
<SkillTable IsAuthenticated="@isAuthenticated"></SkillTable>
1819
</div>
1920
</div>
2021
</div>

‎LinkDotNet.Blog.Web/Shared/ModalDialog.razor

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333

3434
public void Open()
3535
{
36-
modalDisplay = "block;";
36+
modalDisplay = "block";
3737
modalClass = "show";
3838
showBackdrop = true;
3939
}

‎LinkDotNet.Blog.Web/Shared/Profile.razor

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@
4444
</ul>
4545
</div>
4646

47-
<ConfirmDialog @ref="Dialog" Content="Do you really want to delete this entry?" Title="Delete"
47+
<ConfirmDialog @ref="Dialog" Content="Do you really want to delete this entry?" Title="Delete"
4848
OnYesPressed="DeleteItem"></ConfirmDialog>
4949

5050
@code {

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

Lines changed: 0 additions & 41 deletions
This file was deleted.

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

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
@using LinkDotNet.Domain
2+
<ModalDialog @ref="Dialog" Title="Add Skill">
3+
<EditForm Model="@model">
4+
<DataAnnotationsValidator />
5+
<ValidationSummary />
6+
<div class="mb-3">
7+
<label for="title">Skill name</label>
8+
<InputText class="form-control" id="title" @bind-Value="model.Skill" />
9+
</div>
10+
<div class="mb-3">
11+
<label for="image">Image Url</label>
12+
<InputText class="form-control" id="image" @bind-Value="model.ImageUrl" rows="4"/>
13+
<small id="image" class="form-text text-muted">If set is used before the skill (optional)</small>
14+
</div>
15+
<div class="mb-3">
16+
<label for="title">Skill name</label>
17+
<InputText class="form-control" id="title" @bind-Value="model.Skill" />
18+
</div>
19+
<div class="mb-3">
20+
<label for="tags">Proficiency</label>
21+
<select class="form-select" id="tags" @bind="@model.Proficiency">
22+
@foreach (var level in ProficiencyLevel.All)
23+
{
24+
<option value="@level.Key">@level.Key</option>
25+
}
26+
</select>
27+
</div>
28+
<button class="btn btn-primary" type="submit">Submit</button>
29+
</EditForm>
30+
</ModalDialog>
31+
32+
@code {
33+
private AddSkillModel model = new();
34+
private ModalDialog Dialog { get; set; }
35+
36+
public void Open()
37+
{
38+
Dialog.Open();
39+
}
40+
}

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
using System.ComponentModel.DataAnnotations;
2+
3+
namespace LinkDotNet.Blog.Web.Shared.Skills
4+
{
5+
public class AddSkillModel
6+
{
7+
[Required]
8+
public string Skill { get; set; }
9+
10+
public string ImageUrl { get; set; }
11+
12+
[Required]
13+
public string Proficiency { get; set; }
14+
}
15+
}

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

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
@using LinkDotNet.Domain
2+
<div class="skill-table-container">
3+
<div>
4+
@if (IsAuthenticated)
5+
{
6+
<button type="button" class="btn btn-primary" @onclick="() => AddSkillDialog.Open()"><i class="fas
7+
fa-plus-square"></i>
8+
Add skill</button>
9+
<AddSkillDialog @ref="AddSkillDialog"></AddSkillDialog>
10+
}
11+
</div>
12+
<div>
13+
<table class="skill-table">
14+
<tbody>
15+
<tr>
16+
<th>Capability</th>
17+
<th>Familiar with</th>
18+
<th>Proficient</th>
19+
<th>Expert</th>
20+
</tr>
21+
@foreach (var skillCapabilityGroup in skills.GroupBy(s => s.Capability))
22+
{
23+
<tr>
24+
<td>@skillCapabilityGroup.Key</td>
25+
@foreach (var skillLevel in ProficiencyLevel.All)
26+
{
27+
<td>
28+
@foreach (var skill in skillCapabilityGroup.Where(s => s.ProficiencyLevel == skillLevel))
29+
{
30+
<div>
31+
<SkillTag Skill="@skill"/>
32+
</div>
33+
}
34+
</td>
35+
}
36+
</tr>
37+
}
38+
</tbody>
39+
</table>
40+
</div>
41+
</div>
42+
@code {
43+
[Parameter]
44+
public bool IsAuthenticated { get; set; }
45+
46+
private AddSkillDialog AddSkillDialog { get; set; }
47+
48+
private List<Skill> skills = new()
49+
{
50+
new Skill {Capability = "Backend", Name = "C#", ProficiencyLevel = ProficiencyLevel.Expert, IconUrl = "https://img.icons8.com/color/48/000000/c-sharp-logo.png"},
51+
new Skill {Capability = "Backend", Name = ".NET", ProficiencyLevel = ProficiencyLevel.Expert, IconUrl = ""},
52+
new Skill {Capability = "UX", Name = "Figma", ProficiencyLevel = ProficiencyLevel.Expert, IconUrl = "https://miro.medium.com/max/1400/1*[email protected]"},
53+
new Skill {Capability = "UX", Name = "Webflow", ProficiencyLevel = ProficiencyLevel.Proficient},
54+
new Skill {Capability = "UX", Name = "A/B Testing", ProficiencyLevel = ProficiencyLevel.Proficient},
55+
new Skill {Capability = "UX", Name = "Case studies", ProficiencyLevel = ProficiencyLevel.Expert},
56+
new Skill {Capability = "UX", Name = "Adobe Xd", ProficiencyLevel = ProficiencyLevel.Familiar},
57+
new Skill {Capability = "Backend", Name = "Java", ProficiencyLevel = ProficiencyLevel.Familiar, IconUrl = "https://img.icons8.com/ios/50/000000/java-coffee-cup-logo--v1.png"},
58+
new Skill {Capability = "Frontend", Name = "Typescript", ProficiencyLevel = ProficiencyLevel.Expert, IconUrl = ""},
59+
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"},
60+
};
61+
62+
}

‎LinkDotNet.Blog.Web/Shared/SkillTable.razor.css renamed to ‎LinkDotNet.Blog.Web/Shared/Skills/SkillTable.razor.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
}
99

1010
.skill-table {
11+
margin-top: 20px;
1112
width: 100%;
1213
}
1314

‎LinkDotNet.Blog.Web/Shared/SkillTag.razor renamed to ‎LinkDotNet.Blog.Web/Shared/Skills/SkillTag.razor

File renamed without changes.

‎LinkDotNet.Blog.Web/Shared/SkillTag.razor.css renamed to ‎LinkDotNet.Blog.Web/Shared/Skills/SkillTag.razor.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,6 @@
77
}
88

99
.skill-tag img {
10-
padding-right: 8px;
11-
width: 24px;
10+
padding-right: 12px;
11+
width: 36px;
1212
}

0 commit comments

Comments
 (0)