Skip to content

Commit

Permalink
#254 - Reorganize loading.
Browse files Browse the repository at this point in the history 
List of periods is loaded only when modal picker is shown.
  • Loading branch information
@maraf
maraf committed Apr 11, 2020
1 parent cfcb058 commit 4b0e879
Show file tree
Hide file tree
Showing 2 changed files with 98 additions and 84 deletions.
131 changes: 66 additions & 65 deletions src/Money.UI.Blazor/Pages/Summary.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,82 +8,83 @@
<div class="summary">
<ExpenseBagPublishButton Text="You have expenses created when offline. Upload them now..." class="mb-4" />

<Loading Context="@Loading">
@if (SelectedPeriod != null)
{
<div class="mb-3">
<SortButton TType="SummarySortType" @bind-Current="@SortDescriptor" Changed="@OnSorted" />

@if (Periods != null)
{
@if (Periods.Count == 0)
<button type="button" class="btn btn-primary" @onclick="@OpenPeriodSelectorAsync">
@SelectedPeriod.ToString()
</button>

<span class="pl-2">
<Loading Context="@CategoriesLoading" />
</span>
</div>
}

@if (TotalAmout != null && TotalAmout.Value == 0)
{
<Alert Title="No data." Message="Let's add some expenses." Mode="@AlertMode.Warning" />
}
else if (Categories != null)
{
<div class="graph">
@if (TotalAmout != null)
{
<Alert Title="No data." Message="Let's add some expenses." Mode="@AlertMode.Warning" />
<div class="card bar-graph bar-graph-summary" @onclick="@(() => OpenOverview(SelectedPeriod))">
<div class="card-body">
<h3 class="description">
<span class="icon">📈</span>
<span class="name">Summary</span>
</h3>

<div class="value">
<div class="amount">@FormatPrice(TotalAmout)</div>
</div>
</div>
</div>
}
else

@foreach (var category in Categories)
{
@if (SelectedPeriod != null)
{
<div class="mb-1">
<SortButton TType="SummarySortType" @bind-Current="@SortDescriptor" Changed="@OnSorted" />
<div class="card bar-graph" @onclick="@(() => OpenOverview(SelectedPeriod, category.Key))">
<div class="card-body">
<h3 class="description" title="@category.Description">
<span class="icon">@category.Icon</span>
<span class="name">@category.Name</span>
</h3>

<button type="button" class="btn btn-primary" @onclick="@(() => PeriodSelectorModal.Show())">
@SelectedPeriod.ToString()
</button>
<div class="value">
<div class="amount">@FormatPrice(category.TotalAmount)</div>
<div class="bar" style="width: @GetPercentualValue(category)%; background-color: @category.Color.ToHashCode();"></div>
</div>
</div>
}
</div>
}
</div>
}

@if (Categories != null)
<Modal @ref="PeriodSelectorModal" Title="Select a period" BodyCssClass="p-0">
<Loading Context="@PeriodsLoading">
@if (Periods != null)
{
if (Periods.Count > 0)
{
<div class="graph">
@if (TotalAmout != null)
<div class="list-group list-group-flush">
@foreach (var item in Periods)
{
<div class="card bar-graph bar-graph-summary" @onclick="@(() => OpenOverview(SelectedPeriod))">
<div class="card-body">
<h3 class="description">
<span class="icon">📈</span>
<span class="name">Summary</span>
</h3>

<div class="value">
<div class="amount">@FormatPrice(TotalAmout)</div>
</div>
</div>
</div>
}

@foreach (var category in Categories)
{
<div class="card bar-graph" @onclick="@(() => OpenOverview(SelectedPeriod, category.Key))">
<div class="card-body">
<h3 class="description" title="@category.Description">
<span class="icon">@category.Icon</span>
<span class="name">@category.Name</span>
</h3>

<div class="value">
<div class="amount">@FormatPrice(category.TotalAmount)</div>
<div class="bar" style="width: @GetPercentualValue(category)%; background-color: @category.Color.ToHashCode();"></div>
</div>
</div>
</div>
<a @onclick="@(() => PeriodSelectorModal.Hide())" href="@UrlSummary(item)" class="list-group-item @(item.Equals(SelectedPeriod) ? "active" : null)">
@item.ToString()
</a>
}
</div>
}

<Modal @ref="PeriodSelectorModal" Title="Select a period" BodyCssClass="p-0">
@if (Periods != null)
{
if (Periods.Count > 0)
{
<div class="list-group list-group-flush">
@foreach (var item in Periods)
{
<a @onclick="@(() => PeriodSelectorModal.Hide())" href="@UrlSummary(item)" class="list-group-item @(item.Equals(SelectedPeriod) ? "active" : null)">
@item.ToString()
</a>
}
</div>
}
}
</Modal>
else
{
<Alert Title="No data." Message="Let's add some expenses." Mode="@AlertMode.Warning" />
}
}
}
</Loading>
</Loading>
</Modal>
</div>
51 changes: 32 additions & 19 deletions src/Money.UI.Blazor/Pages/Summary.razor.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@

namespace Money.Pages
{
public partial class Summary<T> :
public partial class Summary<T> :
System.IDisposable,
IEventHandler<OutcomeCreated>,
IEventHandler<OutcomeDeleted>,
Expand All @@ -50,25 +50,28 @@ public partial class Summary<T> :

protected string SubTitle { get; set; }

protected LoadingContext PeriodsLoading { get; } = new LoadingContext();
protected List<T> Periods { get; private set; }
protected T SelectedPeriod { get; set; }

protected LoadingContext CategoriesLoading { get; } = new LoadingContext();
protected Price TotalAmout { get; private set; }
protected List<CategoryWithAmountModel> Categories { get; private set; }

protected LoadingContext Loading { get; } = new LoadingContext();
protected SortDescriptor<SummarySortType> SortDescriptor { get; set; }

protected Modal PeriodSelectorModal { get; set; }
protected ModalDialog CreateModal { get; set; }

protected override Task OnInitializedAsync()
protected override async Task OnInitializedAsync()
{
Log.Debug("Summary.OnInitializedAsync");
BindEvents();
SortDescriptor = new SortDescriptor<SummarySortType>(SummarySortType.ByCategory, SortDirection.Ascending);

return base.OnInitializedAsync();
await base.OnInitializedAsync();

formatter = new CurrencyFormatter(await Queries.QueryAsync(new ListAllCurrency()));
}

public override Task SetParametersAsync(ParameterView parameters)
Expand All @@ -77,7 +80,7 @@ public override Task SetParametersAsync(ParameterView parameters)
return base.SetParametersAsync(parameters);
}

protected virtual void ClearPreviousParameters()
protected virtual void ClearPreviousParameters()
=> throw Ensure.Exception.NotImplemented($"Missing override for method '{nameof(ClearPreviousParameters)}'.");

protected virtual T CreateSelectedItemFromParameters()
Expand All @@ -86,30 +89,32 @@ protected virtual T CreateSelectedItemFromParameters()
protected async override Task OnParametersSetAsync()
{
SelectedPeriod = CreateSelectedItemFromParameters();
await LoadPeriodsAsync(isReload: false);
await LoadSelectedPeriodAsync();
}

protected virtual IQuery<List<T>> CreatePeriodsQuery()
=> throw Ensure.Exception.NotImplemented($"Missing override for method '{nameof(CreatePeriodsQuery)}'.");

protected async Task LoadPeriodsAsync(bool isReload = true)
{
if (isReload || Periods == null)
using (PeriodsLoading.Start())
{
using (Loading.Start())
if (isReload || Periods == null)
Periods = await Queries.QueryAsync(CreatePeriodsQuery());
}

await LoadPeriodAsync();
}

protected async Task LoadPeriodAsync()
protected async Task LoadSelectedPeriodAsync()
{
if (SelectedPeriod != null)
{
Categories = await Queries.QueryAsync(CreateCategoriesQuery(SelectedPeriod));
TotalAmout = await Queries.QueryAsync(CreateTotalQuery(SelectedPeriod));
formatter = new CurrencyFormatter(await Queries.QueryAsync(new ListAllCurrency()));
using (CategoriesLoading.Start())
{
Categories = await Queries.QueryAsync(CreateCategoriesQuery(SelectedPeriod));
TotalAmout = await Queries.QueryAsync(CreateTotalQuery(SelectedPeriod));

}

Sort();
}
}
Expand Down Expand Up @@ -215,11 +220,10 @@ Task IEventHandler<OutcomeWhenChanged>.HandleAsync(OutcomeWhenChanged payload)

private async void OnMonthUpdatedEvent(DateTime changed)
{
if (!IsContained(changed))
if (!IsContained(changed) && Periods != null)
await LoadPeriodsAsync();
else
await LoadPeriodAsync();

await LoadSelectedPeriodAsync();
StateHasChanged();
}

Expand All @@ -228,13 +232,16 @@ protected virtual bool IsContained(DateTime changed)

private async void OnOutcomeAmountChangedEvent()
{
await LoadPeriodAsync();
await LoadSelectedPeriodAsync();
StateHasChanged();
}

private async void OnOutcomeDeletedEvent()
{
await LoadPeriodsAsync();
if (Periods != null)
await LoadPeriodsAsync();

await LoadSelectedPeriodAsync();
StateHasChanged();
}

Expand All @@ -244,6 +251,12 @@ protected void CreateNewExpense()
StateHasChanged();
}

protected async Task OpenPeriodSelectorAsync()
{
PeriodSelectorModal.Show();
await LoadPeriodsAsync(isReload: false);
}

#endregion
}
}

0 comments on commit 4b0e879

Please sign in to comment.