Add common loading component

This has no specific issue associated, but reduces boilerplate in most page components
This commit is contained in:
Daniel J. Summers 2021-01-26 22:26:36 -05:00
parent 7f7eb191fb
commit a6fd891cc5
13 changed files with 299 additions and 300 deletions

View File

@ -6,13 +6,7 @@
<h3>Welcome, @state.User!.Name!</h3>
@if (RetrievingData)
{
<p>Retrieving your employment profile...</p>
}
else
{
<ErrorList Errors=@ErrorMessages>
<Loading OnLoad=@LoadProfile Message=@(new MarkupString("Retrieving your employment profile&hellip;"))>
@if (Profile != null)
{
<p>
@ -44,8 +38,7 @@ else
<text>Take a look around and see if you can help them find work!</text>
}
</p>
</ErrorList>
}
</Loading>
<hr>
<h4>
<a href="https://github.com/bit-badger/jobs-jobs-jobs/issues/3" target="_blank">Phase 3</a> &ndash; What Works

View File

@ -11,11 +11,6 @@ namespace JobsJobsJobs.Client.Pages.Citizen
/// </summary>
public partial class Dashboard : ComponentBase
{
/// <summary>
/// Whether the data is being retrieved
/// </summary>
private bool RetrievingData { get; set; } = true;
/// <summary>
/// The user's profile
/// </summary>
@ -27,11 +22,10 @@ namespace JobsJobsJobs.Client.Pages.Citizen
private int ProfileCount { get; set; }
/// <summary>
/// Error messages from data access
/// Load the user's profile information
/// </summary>
private IList<string> ErrorMessages { get; } = new List<string>();
protected override async Task OnInitializedAsync()
/// <param name="errors">A collection to report errors that may be encountered</param>
public async Task LoadProfile(ICollection<string> errors)
{
if (state.User != null)
{
@ -47,7 +41,7 @@ namespace JobsJobsJobs.Client.Pages.Citizen
}
else
{
ErrorMessages.Add(profileTask.Result.Error);
errors.Add(profileTask.Result.Error);
}
if (profileCountTask.Result.IsOk)
@ -56,10 +50,8 @@ namespace JobsJobsJobs.Client.Pages.Citizen
}
else
{
ErrorMessages.Add(profileCountTask.Result.Error);
}
RetrievingData = false;
errors.Add(profileCountTask.Result.Error);
}
}
}
}

View File

@ -8,9 +8,7 @@
<h3>Employment Profile</h3>
@if (AllLoaded)
{
<ErrorList Errors=@ErrorMessages>
<Loading OnLoad=@SetUpProfile Message=@(new MarkupString("Loading Your Profile&hellip;"))>
<EditForm Model=@ProfileForm OnValidSubmit=@SaveProfile>
<DataAnnotationsValidator />
<div class="form-row">
@ -117,9 +115,4 @@
<br><a href="/profile/view/@state.User!.Id"><span class="oi oi-file"></span> View Your User Profile</a>
</p>
}
</ErrorList>
}
else
{
<p>Loading your profile...</p>
}
</Loading>

View File

@ -18,11 +18,6 @@ namespace JobsJobsJobs.Client.Pages.Citizen
/// </summary>
private int _newSkillCounter = 0;
/// <summary>
/// A flag that indicates all the required API calls have completed, and the form is ready to be displayed
/// </summary>
private bool AllLoaded { get; set; } = false;
/// <summary>
/// Whether the citizen is seeking employment at the time the profile is loaded (used to show success story
/// link)
@ -45,11 +40,10 @@ namespace JobsJobsJobs.Client.Pages.Citizen
private bool IsNew { get; set; } = false;
/// <summary>
/// Error messages from API access
/// Set up the data needed to add or edit the user's profile
/// </summary>
private IList<string> ErrorMessages { get; } = new List<string>();
protected override async Task OnInitializedAsync()
/// <param name="errors">The collection where errors can be reported</param>
public async Task SetUpProfile(ICollection<string> errors)
{
ServerApi.SetJwt(http, state);
var continentTask = state.GetContinents(http);
@ -75,10 +69,8 @@ namespace JobsJobsJobs.Client.Pages.Citizen
}
else
{
ErrorMessages.Add(profileTask.Result.Error);
errors.Add(profileTask.Result.Error);
}
AllLoaded = true;
}
/// <summary>
@ -118,6 +110,5 @@ namespace JobsJobsJobs.Client.Pages.Citizen
toast.ShowError($"{(int)res.StatusCode} {error}");
}
}
}
}

View File

@ -2,14 +2,8 @@
@inject HttpClient http
@inject AppState state
@if (IsLoading)
{
<p>Loading profile...</p>
}
else
{
<Loading OnLoad=@RetrieveProfile>
<PageTitle Title=@($"Employment Profile for {Citizen.DisplayName}") />
<ErrorList Errors=@ErrorMessages>
<h2><a href="@Citizen.ProfileUrl" target="_blank">@Citizen.DisplayName</a></h2>
<h4>@Profile.Continent!.Name, @Profile.Region</h4>
<p>@WorkTypes</p>
@ -48,5 +42,4 @@ else
<hr>
<p><a href="/citizen/profile"><span class="oi oi-pencil"></span> Edit Your Profile</a></p>
}
</ErrorList>
}
</Loading>

View File

@ -1,6 +1,5 @@
using Microsoft.AspNetCore.Components;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Domain = JobsJobsJobs.Shared;
@ -8,11 +7,6 @@ namespace JobsJobsJobs.Client.Pages.Profile
{
public partial class View : ComponentBase
{
/// <summary>
/// Whether data for this component is loading
/// </summary>
private bool IsLoading { get; set; } = true;
/// <summary>
/// The citizen whose profile is being displayed
/// </summary>
@ -48,18 +42,17 @@ namespace JobsJobsJobs.Client.Pages.Profile
}
}
/// <summary>
/// Error messages from data retrieval
/// </summary>
private IList<string> ErrorMessages { get; } = new List<string>();
/// <summary>
/// The ID of the citizen whose profile should be displayed
/// </summary>
[Parameter]
public string Id { get; set; } = default!;
protected override async Task OnInitializedAsync()
/// <summary>
/// Retrieve the requested profile
/// </summary>
/// <param name="errors">A collection to report errors that may occur</param>
public async Task RetrieveProfile(ICollection<string> errors)
{
ServerApi.SetJwt(http, state);
var citizenTask = ServerApi.RetrieveOne<Domain.Citizen>(http, $"citizen/get/{Id}");
@ -73,11 +66,11 @@ namespace JobsJobsJobs.Client.Pages.Profile
}
else if (citizenTask.Result.IsOk)
{
ErrorMessages.Add("Citizen not found");
errors.Add("Citizen not found");
}
else
{
ErrorMessages.Add(citizenTask.Result.Error);
errors.Add(citizenTask.Result.Error);
}
if (profileTask.Result.IsOk && profileTask.Result.Ok != null)
@ -86,14 +79,12 @@ namespace JobsJobsJobs.Client.Pages.Profile
}
else if (profileTask.Result.IsOk)
{
ErrorMessages.Add("Profile not found");
errors.Add("Profile not found");
}
else
{
ErrorMessages.Add(profileTask.Result.Error);
}
IsLoading = false;
errors.Add(profileTask.Result.Error);
}
}
}
}

View File

@ -6,16 +6,9 @@
@inject IToastService toast
<PageTitle Title=@Title />
<h3>@Title</h3>
<ErrorList Errors=@ErrorMessages>
@if (Loading)
{
<p>Loading...</p>
}
else
{
<Loading OnLoad=@RetrieveStory>
@if (IsNew)
{
<p>
@ -53,5 +46,4 @@
</div>
</div>
</EditForm>
}
</ErrorList>
</Loading>

View File

@ -16,11 +16,6 @@ namespace JobsJobsJobs.Client.Pages.SuccessStory
[Parameter]
public string? Id { get; set; }
/// <summary>
/// Whether we are loading information
/// </summary>
private bool Loading { get; set; } = true;
/// <summary>
/// The page title / header
/// </summary>
@ -37,11 +32,10 @@ namespace JobsJobsJobs.Client.Pages.SuccessStory
private bool IsNew => Form.Id == "new";
/// <summary>
/// Error messages from API access
/// Retrieve the story
/// </summary>
private IList<string> ErrorMessages { get; } = new List<string>();
protected override async Task OnInitializedAsync()
/// <param name="errors">A collection to use in reporting errors that may occur</param>
public async Task RetrieveStory(ICollection<string> errors)
{
if (Id != null)
{
@ -58,14 +52,13 @@ namespace JobsJobsJobs.Client.Pages.SuccessStory
}
else if (story.IsOk)
{
ErrorMessages.Add($"The success story {Id} does not exist");
errors.Add($"The success story {Id} does not exist");
}
else
{
ErrorMessages.Add(story.Error);
errors.Add(story.Error);
}
}
Loading = false;
}
/// <summary>

View File

@ -3,15 +3,10 @@
@inject AppState state
<PageTitle Title="Success Stories" />
<h3>Success Stories</h3>
<ErrorList Errors=@ErrorMessages>
@if (Loading)
{
<p>Loading...</p>
}
else if (Stories.Any())
<Loading OnLoad=@LoadStories>
@if (Stories.Any())
{
<table class="table table-sm table-hover">
<thead>
@ -43,4 +38,4 @@
{
<p>There are no success stories recorded <em>(yet)</em></p>
}
</ErrorList>
</Loading>

View File

@ -1,30 +1,22 @@
using JobsJobsJobs.Shared.Api;
using Microsoft.AspNetCore.Components;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
namespace JobsJobsJobs.Client.Pages.SuccessStory
{
public partial class ListStories : ComponentBase
{
/// <summary>
/// Whether we are still loading data
/// </summary>
private bool Loading { get; set; } = true;
/// <summary>
/// The story entries
/// </summary>
private IEnumerable<StoryEntry> Stories { get; set; } = default!;
/// <summary>
/// Error messages encountered
/// Load all success stories
/// </summary>
private IList<string> ErrorMessages { get; set; } = new List<string>();
protected override async Task OnInitializedAsync()
/// <param name="errors">The collection into which errors can be reported</param>
public async Task LoadStories(ICollection<string> errors)
{
ServerApi.SetJwt(http, state);
var stories = await ServerApi.RetrieveMany<StoryEntry>(http, "success/list");
@ -35,10 +27,8 @@ namespace JobsJobsJobs.Client.Pages.SuccessStory
}
else
{
ErrorMessages.Add(stories.Error);
}
Loading = false;
errors.Add(stories.Error);
}
}
}
}

View File

@ -0,0 +1,18 @@
@if (IsLoading)
{
<p>@Message</p>
}
else if (ErrorMessages.Count > 0)
{
<p>The following error@(ErrorMessages.Count == 1 ? "" : "s") occurred:</p>
<ul>
@foreach (var msg in ErrorMessages)
{
<li><pre>@msg</pre></li>
}
</ul>
}
else
{
@ChildContent
}

View File

@ -0,0 +1,58 @@
using Microsoft.AspNetCore.Components;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
namespace JobsJobsJobs.Client.Shared
{
public partial class Loading : ComponentBase
{
/// <summary>
/// The delegate to call to load the data for this page
/// </summary>
[Parameter]
public EventCallback<ICollection<string>> OnLoad { get; set; }
/// <summary>
/// The message to display when the page is loading (optional)
/// </summary>
[Parameter]
public MarkupString Message { get; set; } = new MarkupString("Loading&hellip;");
/// <summary>
/// The content to be displayed once the data has been loaded
/// </summary>
[Parameter]
public RenderFragment ChildContent { get; set; } = default!;
/// <summary>
/// Error messages that may arise from the data loading delegate
/// </summary>
private ICollection<string> ErrorMessages { get; set; } = new List<string>();
/// <summary>
/// Whether we are currently loading data
/// </summary>
private bool IsLoading { get; set; } = true;
protected override async Task OnInitializedAsync()
{
if (OnLoad.HasDelegate)
{
try
{
await OnLoad.InvokeAsync(ErrorMessages);
}
finally
{
IsLoading = false;
}
}
else
{
IsLoading = false;
}
}
}
}

View File

@ -9,10 +9,10 @@
</button>
</div>
<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
<div class="@NavMenuCssClass" @onclick=@ToggleNavMenu>
<ul class="nav flex-column">
<li class="nav-item px-3">
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
<NavLink class="nav-link" href="" Match=@NavLinkMatch.All>
<span class="oi oi-home" aria-hidden="true"></span> Home
</NavLink>
</li>