mirror of https://github.com/abpframework/abp.git
Ahmet
6 years ago
48 changed files with 543 additions and 161 deletions
@ -1,3 +1,57 @@ |
|||
# Blazor UI: Page Progress |
|||
|
|||
TODO |
|||
Page Progress is used to show a progress bar indicator on top of the page and to show to the user that currently a long running process is in the work. |
|||
|
|||
By default you don't need to do anything to show the progress indicator, as all the work is done automatically by the ABP Framework internals. This means that all calls to the ABP backend (through your HTTP API) will activate page progress and show the loading indicator. |
|||
|
|||
This doesn't mean that you don't have the control over it. On the contrary, if you want to show progress for your own processes, it is really easy to do. All you have to do is to use inject and use the `IUiPageProgressService`. |
|||
|
|||
## Example |
|||
|
|||
First, inject the `IUiPageProgressService` into your page/component. |
|||
|
|||
```cs |
|||
@inject IUiPageProgressService pageProgressService |
|||
``` |
|||
|
|||
Next, invoke the `Go` method in `IUiPageProgressService`. It's that simple: |
|||
|
|||
```cs |
|||
Task OnClick() |
|||
{ |
|||
return pageProgressService.Go(null); |
|||
} |
|||
``` |
|||
|
|||
The previous example will show the progress with a default settings. If, for example you want to change the progress color you can override it by setting the options through the `Go` method. |
|||
|
|||
```cs |
|||
Task OnClick() |
|||
{ |
|||
return pageProgressService.Go(null, options => |
|||
{ |
|||
options.Type = UiPageProgressType.Warning; |
|||
}); |
|||
} |
|||
``` |
|||
|
|||
## Breakdown |
|||
|
|||
The first parameter of the `Go` needs a little explanation. In the previous example we have set it to `null` which means, once called it will show an _indeterminate_ indicator and will cycle the loading animation indefinitely, until we hide the progress. You also have the option of defining the actual percentage of the progress and the code is the same, just instead of sending it the `null` you will send it a number between `0` and `100`. |
|||
|
|||
```cs |
|||
pageProgressService.Go(25) |
|||
``` |
|||
|
|||
### Valid values |
|||
|
|||
1. `null` - show _indeterminate_ indicator |
|||
2. `>= 0` and `<= 100` - show the regular _percentage_ progress |
|||
|
|||
### Hiding progress |
|||
|
|||
To hide the progress just set the actual values to something other then the _Valid value_. |
|||
|
|||
```cs |
|||
pageProgressService.Go(-1) |
|||
``` |
|||
@ -0,0 +1,12 @@ |
|||
using System; |
|||
using Volo.Abp.DependencyInjection; |
|||
|
|||
namespace Volo.Abp.AspNetCore.Components.WebAssembly.DependencyInjection |
|||
{ |
|||
public class WebAssemblyClientScopeServiceProviderAccessor : |
|||
IClientScopeServiceProviderAccessor, |
|||
ISingletonDependency |
|||
{ |
|||
public IServiceProvider ServiceProvider { get; set; } |
|||
} |
|||
} |
|||
@ -0,0 +1,21 @@ |
|||
using System; |
|||
using System.Threading.Tasks; |
|||
|
|||
namespace Volo.Abp.AspNetCore.Components.Progression |
|||
{ |
|||
public interface IUiPageProgressService |
|||
{ |
|||
/// <summary>
|
|||
/// An event raised after the notification is received.
|
|||
/// </summary>
|
|||
public event EventHandler<UiPageProgressEventArgs> ProgressChanged; |
|||
|
|||
/// <summary>
|
|||
/// Sets the progress percentage.
|
|||
/// </summary>
|
|||
/// <param name="percentage">Value of the progress from 0 to 100, or null for indeterminate progress.</param>
|
|||
/// <param name="options">Additional options.</param>
|
|||
/// <returns>Awaitable task.</returns>
|
|||
Task Go(int? percentage, Action<UiPageProgressOptions> options = null); |
|||
} |
|||
} |
|||
@ -0,0 +1,16 @@ |
|||
using System; |
|||
using System.Threading.Tasks; |
|||
using Volo.Abp.DependencyInjection; |
|||
|
|||
namespace Volo.Abp.AspNetCore.Components.Progression |
|||
{ |
|||
public class NullUiPageProgressService : IUiPageProgressService, ISingletonDependency |
|||
{ |
|||
public event EventHandler<UiPageProgressEventArgs> ProgressChanged; |
|||
|
|||
public Task Go(int? percentage, Action<UiPageProgressOptions> options = null) |
|||
{ |
|||
return Task.CompletedTask; |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,17 @@ |
|||
using System; |
|||
|
|||
namespace Volo.Abp.AspNetCore.Components.Progression |
|||
{ |
|||
public class UiPageProgressEventArgs : EventArgs |
|||
{ |
|||
public UiPageProgressEventArgs(int? percentage, UiPageProgressOptions options) |
|||
{ |
|||
Percentage = percentage; |
|||
Options = options; |
|||
} |
|||
|
|||
public int? Percentage { get; } |
|||
|
|||
public UiPageProgressOptions Options { get; } |
|||
} |
|||
} |
|||
@ -0,0 +1,13 @@ |
|||
namespace Volo.Abp.AspNetCore.Components.Progression |
|||
{ |
|||
/// <summary>
|
|||
/// Options to override page progress appearance.
|
|||
/// </summary>
|
|||
public class UiPageProgressOptions |
|||
{ |
|||
/// <summary>
|
|||
/// Type or color, of the page progress.
|
|||
/// </summary>
|
|||
public UiPageProgressType Type { get; set; } |
|||
} |
|||
} |
|||
@ -0,0 +1,11 @@ |
|||
namespace Volo.Abp.AspNetCore.Components.Progression |
|||
{ |
|||
public enum UiPageProgressType |
|||
{ |
|||
Default, |
|||
Info, |
|||
Success, |
|||
Warning, |
|||
Error, |
|||
} |
|||
} |
|||
@ -0,0 +1,17 @@ |
|||
using System; |
|||
using System.Collections.Generic; |
|||
using System.Threading.Tasks; |
|||
using Microsoft.AspNetCore.Builder; |
|||
|
|||
namespace Microsoft.AspNetCore.RequestLocalization |
|||
{ |
|||
public class AbpRequestLocalizationOptions |
|||
{ |
|||
public List<Func<IServiceProvider, RequestLocalizationOptions, Task>> RequestLocalizationOptionConfigurators { get; } |
|||
|
|||
public AbpRequestLocalizationOptions() |
|||
{ |
|||
RequestLocalizationOptionConfigurators = new List<Func<IServiceProvider, RequestLocalizationOptions, Task>>(); |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,33 @@ |
|||
using System; |
|||
using Microsoft.AspNetCore.Http; |
|||
using Volo.Abp.DependencyInjection; |
|||
|
|||
namespace Volo.Abp.AspNetCore.DependencyInjection |
|||
{ |
|||
public class HttpContextClientScopeServiceProviderAccessor : |
|||
IClientScopeServiceProviderAccessor, |
|||
ISingletonDependency |
|||
{ |
|||
public IServiceProvider ServiceProvider |
|||
{ |
|||
get |
|||
{ |
|||
var httpContext = _httpContextAccessor.HttpContext; |
|||
if (httpContext == null) |
|||
{ |
|||
throw new AbpException("HttpContextClientScopeServiceProviderAccessor should only be used in a web request scope!"); |
|||
} |
|||
|
|||
return httpContext.RequestServices; |
|||
} |
|||
} |
|||
|
|||
private readonly IHttpContextAccessor _httpContextAccessor; |
|||
|
|||
public HttpContextClientScopeServiceProviderAccessor( |
|||
IHttpContextAccessor httpContextAccessor) |
|||
{ |
|||
_httpContextAccessor = httpContextAccessor; |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,32 @@ |
|||
using System; |
|||
using System.Threading.Tasks; |
|||
using Volo.Abp.AspNetCore.Components.Progression; |
|||
using Volo.Abp.DependencyInjection; |
|||
|
|||
namespace Volo.Abp.BlazoriseUI |
|||
{ |
|||
[Dependency(ReplaceServices = true)] |
|||
public class BlazoriseUiPageProgressService : IUiPageProgressService, |
|||
IScopedDependency |
|||
{ |
|||
/// <summary>
|
|||
/// An event raised after the notification is received.
|
|||
/// </summary>
|
|||
public event EventHandler<UiPageProgressEventArgs> ProgressChanged; |
|||
|
|||
public Task Go(int? percentage, Action<UiPageProgressOptions> options = null) |
|||
{ |
|||
var uiPageProgressOptions = CreateDefaultOptions(); |
|||
options?.Invoke(uiPageProgressOptions); |
|||
|
|||
ProgressChanged?.Invoke(this, new UiPageProgressEventArgs(percentage, uiPageProgressOptions)); |
|||
|
|||
return Task.CompletedTask; |
|||
} |
|||
|
|||
protected virtual UiPageProgressOptions CreateDefaultOptions() |
|||
{ |
|||
return new UiPageProgressOptions(); |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1 @@ |
|||
<PageProgress @ref="@PageProgressRef" Visible="@Visible" Color="@Color" /> |
|||
@ -0,0 +1,58 @@ |
|||
using System; |
|||
using Blazorise; |
|||
using Microsoft.AspNetCore.Components; |
|||
using Volo.Abp.AspNetCore.Components.Progression; |
|||
|
|||
namespace Volo.Abp.BlazoriseUI.Components |
|||
{ |
|||
public partial class UiPageProgress : ComponentBase, IDisposable |
|||
{ |
|||
protected PageProgress PageProgressRef { get; set; } |
|||
|
|||
protected int? Percentage { get; set; } |
|||
|
|||
protected bool Visible { get; set; } |
|||
|
|||
protected Color Color { get; set; } |
|||
|
|||
[Inject] protected IUiPageProgressService UiPageProgressService { get; set; } |
|||
|
|||
protected override void OnInitialized() |
|||
{ |
|||
base.OnInitialized(); |
|||
|
|||
UiPageProgressService.ProgressChanged += OnProgressChanged; |
|||
} |
|||
|
|||
private async void OnProgressChanged(object sender, UiPageProgressEventArgs e) |
|||
{ |
|||
Percentage = e.Percentage; |
|||
Visible = e.Percentage == null || (e.Percentage >= 0 && e.Percentage <= 100); |
|||
Color = GetColor(e.Options.Type); |
|||
|
|||
await PageProgressRef.SetValueAsync(e.Percentage); |
|||
|
|||
await InvokeAsync(StateHasChanged); |
|||
} |
|||
|
|||
public virtual void Dispose() |
|||
{ |
|||
if (UiPageProgressService != null) |
|||
{ |
|||
UiPageProgressService.ProgressChanged -= OnProgressChanged; |
|||
} |
|||
} |
|||
|
|||
protected virtual Color GetColor(UiPageProgressType pageProgressType) |
|||
{ |
|||
return pageProgressType switch |
|||
{ |
|||
UiPageProgressType.Info => Color.Info, |
|||
UiPageProgressType.Success => Color.Success, |
|||
UiPageProgressType.Warning => Color.Warning, |
|||
UiPageProgressType.Error => Color.Danger, |
|||
_ => Color.None, |
|||
}; |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,9 @@ |
|||
using System; |
|||
|
|||
namespace Volo.Abp.DependencyInjection |
|||
{ |
|||
public interface IClientScopeServiceProviderAccessor |
|||
{ |
|||
IServiceProvider ServiceProvider { get; } |
|||
} |
|||
} |
|||
@ -0,0 +1,15 @@ |
|||
using System.Globalization; |
|||
using Microsoft.AspNetCore.Mvc; |
|||
|
|||
namespace Volo.Abp.AspNetCore.Mvc.Localization |
|||
{ |
|||
[Route("api/LocalizationTestController")] |
|||
public class LocalizationTestController : AbpController |
|||
{ |
|||
[HttpGet] |
|||
public string Culture() |
|||
{ |
|||
return CultureInfo.CurrentCulture.Name + ":" + CultureInfo.CurrentUICulture.Name; |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,44 @@ |
|||
using System.Net; |
|||
using System.Threading.Tasks; |
|||
using Microsoft.AspNetCore.Http; |
|||
using Microsoft.AspNetCore.Localization; |
|||
using Microsoft.AspNetCore.RequestLocalization; |
|||
using Microsoft.Extensions.DependencyInjection; |
|||
using Microsoft.Extensions.Hosting; |
|||
using Microsoft.Extensions.Primitives; |
|||
using Shouldly; |
|||
using Xunit; |
|||
|
|||
namespace Volo.Abp.AspNetCore.Mvc.Localization |
|||
{ |
|||
public class LocalizationTestController_Tests : AspNetCoreMvcTestBase |
|||
{ |
|||
class TestRequestCultureProvider : RequestCultureProvider |
|||
{ |
|||
public override Task<ProviderCultureResult> DetermineProviderCultureResult(HttpContext httpContext) |
|||
{ |
|||
return Task.FromResult(new ProviderCultureResult((StringSegment) "tr", (StringSegment) "hu")); |
|||
} |
|||
} |
|||
|
|||
protected override void ConfigureServices(HostBuilderContext context, IServiceCollection services) |
|||
{ |
|||
services.Configure<AbpRequestLocalizationOptions>(options => |
|||
{ |
|||
options.RequestLocalizationOptionConfigurators.Add((serviceProvider, localizationOptions) => |
|||
{ |
|||
localizationOptions.RequestCultureProviders.Insert(0, new TestRequestCultureProvider()); |
|||
return Task.CompletedTask; |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
[Fact] |
|||
public async Task TestRequestCultureProvider_Test() |
|||
{ |
|||
var response = await GetResponseAsync("api/LocalizationTestController", HttpStatusCode.OK); |
|||
var resultAsString = await response.Content.ReadAsStringAsync(); |
|||
resultAsString.ToLower().ShouldBe("tr:hu"); |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1 @@ |
|||
{{ model.amount}} |
|||
@ -1,13 +0,0 @@ |
|||
using System.ComponentModel.DataAnnotations; |
|||
|
|||
namespace Volo.CmsKit.Public.Tags |
|||
{ |
|||
public class GetRelatedTagsInput |
|||
{ |
|||
[Required] |
|||
public string EntityType { get; set; } |
|||
|
|||
[Required] |
|||
public string EntityId { get; set; } |
|||
} |
|||
} |
|||
@ -1,27 +0,0 @@ |
|||
using Microsoft.AspNetCore.Mvc; |
|||
using System.Collections.Generic; |
|||
using System.Threading.Tasks; |
|||
using Volo.Abp; |
|||
using Volo.CmsKit.Tags; |
|||
|
|||
namespace Volo.CmsKit.Public.Tags |
|||
{ |
|||
[RemoteService(Name = CmsKitCommonRemoteServiceConsts.RemoteServiceName)] |
|||
[Area("cms-kit")] |
|||
[Route("api/cms-kit/tags")] |
|||
public class TagController : CmsKitPublicControllerBase, ITagAppService |
|||
{ |
|||
protected readonly ITagAppService TagAppService; |
|||
|
|||
public TagController(ITagAppService tagAppService) |
|||
{ |
|||
TagAppService = tagAppService; |
|||
} |
|||
|
|||
[HttpGet] |
|||
public Task<List<TagDto>> GetAllRelatedTagsAsync(GetRelatedTagsInput input) |
|||
{ |
|||
return TagAppService.GetAllRelatedTagsAsync(input); |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,31 @@ |
|||
using Microsoft.AspNetCore.Mvc; |
|||
using System.Collections.Generic; |
|||
using System.Threading.Tasks; |
|||
using Volo.Abp; |
|||
using Volo.Abp.GlobalFeatures; |
|||
using Volo.CmsKit.GlobalFeatures; |
|||
using Volo.CmsKit.Tags; |
|||
|
|||
namespace Volo.CmsKit.Public.Tags |
|||
{ |
|||
[RequiresGlobalFeature(typeof(TagsFeature))] |
|||
[RemoteService(Name = CmsKitCommonRemoteServiceConsts.RemoteServiceName)] |
|||
[Area("cms-kit")] |
|||
[Route("api/cms-kit-public/tags")] |
|||
public class TagPublicController : CmsKitPublicControllerBase, ITagAppService |
|||
{ |
|||
protected readonly ITagAppService TagAppService; |
|||
|
|||
public TagPublicController(ITagAppService tagAppService) |
|||
{ |
|||
TagAppService = tagAppService; |
|||
} |
|||
|
|||
[HttpGet] |
|||
[Route("{entityType}/{entityId}")] |
|||
public Task<List<TagDto>> GetAllRelatedTagsAsync(string entityType, string entityId) |
|||
{ |
|||
return TagAppService.GetAllRelatedTagsAsync(entityType, entityId); |
|||
} |
|||
} |
|||
} |
|||
Loading…
Reference in new issue