Initial code commit.

ui/Sufi.Demo.PeopleDirectory.UI/Client/Pages/Dialogs/CreateContactDialog.razor

@@ -0,0 +1,60 @@
+<MudDialog>
+	<DialogContent>
+		<MudForm @ref="form" Model="request" @bind-IsValid="success" @bind-Errors="errors">
+			<MudTextField Label="Username" Required @bind-Value="request.UserName" />
+			<MudTextField Label="Email" Required @bind-Value="request.Email" />
+			<MudTextField Label="Phone" Required @bind-Value="request.Phone" MaxLength="20" />
+			<MudTextField Label="Skill Sets" Required @bind-Value="request.SkillSets" />
+			<MudTextField Label="Hobby" Required @bind-Value="request.Hobby" />
+		</MudForm>
+	</DialogContent>
+	<DialogActions>
+		<MudButton OnClick="Cancel">Cancel</MudButton>
+		<MudButton OnClick="Submit">Ok</MudButton>
+	</DialogActions>
+</MudDialog>
+
+@code {
+	private static readonly string[] SampleUserNames = new[]
+	{
+		"alex99",
+		"samwise",
+		"lunaStar",
+		"maverick",
+		"nova",
+		"pixelPro",
+		"kanu",
+		"tay",
+		"zorin",
+		"echo"
+	};
+	private static readonly Random _rnd = new();
+
+	[CascadingParameter]
+	private IMudDialogInstance MudDialog { get; set; } = null!;
+
+	private AddEditContactCommand request = new();
+	private MudForm? form;
+	private bool success;
+	private string[] errors = { };
+
+	private void Cancel() => MudDialog.Cancel();
+
+	private async Task Submit()
+	{
+		await form!.Validate();
+		if (!success)
+		{
+			return;
+		}
+
+		MudDialog.Close(request);
+	}
+
+	protected override Task OnInitializedAsync()
+	{
+		// Assign a random username from the in-memory list when the dialog opens
+		request.UserName = SampleUserNames[_rnd.Next(SampleUserNames.Length)];
+		return base.OnInitializedAsync();
+	}
+}

ui/Sufi.Demo.PeopleDirectory.UI/Client/Pages/Dialogs/EditContactDialog.razor

@@ -0,0 +1,74 @@
+@using Sufi.Demo.PeopleDirectory.Application.Features.Contacts.Queries.GetById
+
+@inject HttpClient Http
+
+<MudDialog>
+	<DialogContent>
+		@if (showAlert)
+		{
+			<MudAlert Severity="Severity.Error">@alertMessage</MudAlert>
+		}
+		<MudForm @ref="form" Model="request" @bind-IsValid="success" @bind-Errors="errors">
+			<MudTextField Label="Username" Required="true" @bind-Value="request.UserName" />
+			<MudTextField Label="Email" Required="true" @bind-Value="request.Email" />
+			<MudTextField Label="Phone" Required="true" @bind-Value="request.Phone" />
+			<MudTextField Label="Skill Sets" Required="true" @bind-Value="request.SkillSets" />
+			<MudTextField Label="Hobby" Required="true" @bind-Value="request.Hobby" />
+		</MudForm>
+	</DialogContent>
+	<DialogActions>
+		<MudButton OnClick="Cancel">Cancel</MudButton>
+		<MudButton OnClick="Submit">Ok</MudButton>
+	</DialogActions>
+</MudDialog>
+
+@code {
+	[CascadingParameter]
+	private IMudDialogInstance MudDialog { get; set; } = null!;
+	[Parameter]
+	public int Id { get; set; }
+
+	private AddEditContactCommand request = new();
+	private MudForm? form;
+	private bool success;
+	private string[] errors = { };
+	private bool showAlert;
+	private string? alertMessage;
+
+	protected override async Task OnInitializedAsync()
+	{
+		var response = await Http.GetAsync($"api/v1/contacts/{Id}");
+		var result = await response.ToResult<GetContactByIdResponse>();
+		if (result.Succeeded)
+		{
+			var contact = result.Data;
+			request.Id = Id;
+			request.UserName = contact!.UserName;
+			request.Email = contact.Email;
+			request.Phone = contact.Phone;
+			request.SkillSets = contact.SkillSets;
+			request.Hobby = contact.Hobby;
+
+			showAlert = false;
+			alertMessage = "";
+		}
+		else
+		{
+			showAlert = true;
+			alertMessage = string.Join(',', result.Messages);
+		}
+	}
+
+	private void Cancel() => MudDialog.Cancel();
+
+	private async Task Submit()
+	{
+		await form!.Validate();
+		if (!success)
+		{
+			return;
+		}
+
+		MudDialog!.Close(request);
+	}
+}