bit-badger/jobs-jobs-jobs
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases 19 Activity

Add common loading component

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/JobsJobsJobs/Client/Pages/Citizen/Dashboard.razor
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

18
src/JobsJobsJobs/Client/Pages/Citizen/Dashboard.razor.cs
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);
errors.Add(profileCountTask.Result.Error);
}
RetrievingData = false;
}
}
}

11
src/JobsJobsJobs/Client/Pages/Citizen/EditProfile.razor
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>

17
src/JobsJobsJobs/Client/Pages/Citizen/EditProfile.razor.cs
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}");
}
}
}
}

11
src/JobsJobsJobs/Client/Pages/Profile/View.razor
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>

27
src/JobsJobsJobs/Client/Pages/Profile/View.razor.cs
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);
errors.Add(profileTask.Result.Error);
}
IsLoading = false;
}
}
}

12
src/JobsJobsJobs/Client/Pages/SuccessStory/EditStory.razor
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>

17
src/JobsJobsJobs/Client/Pages/SuccessStory/EditStory.razor.cs
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>

11
src/JobsJobsJobs/Client/Pages/SuccessStory/ListStories.razor
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>

18
src/JobsJobsJobs/Client/Pages/SuccessStory/ListStories.razor.cs
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);
errors.Add(stories.Error);
}
Loading = false;
}
}
}

18
src/JobsJobsJobs/Client/Shared/Loading.razor Normal file
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
}

58
src/JobsJobsJobs/Client/Shared/Loading.razor.cs Normal file
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;
}
}
}
}

4
src/JobsJobsJobs/Client/Shared/NavMenu.razor
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>