Progress Viewer Configuration

Table Of Content

• Publisher
  • Setup
  • Usage
• FrontEnd
  • Setup
  • Usage

Publisher

• Setup

  Program.cs:
  ```
  // Imports
  using com.gudang2go.ProgressViewer.Common.Extensions;
  
  // Singleton
  builder.Services.AddPublisher(builder.Configuration);
  ```
  

• Usage

  ```
  private readonly IPublisher _publisher;
  
  public YOUR_SERVICE_CONSTRUCTOR(IPublisher publisher)
  {
      _publiser = publisher;
  }
  
  public async Task SendToProgressViewer()
  {
      await _publisher.PublishMessage(processId.ErrorMessage("Database is not found!"));
  }
  ```
  There is 4 message: GeneralMessage, ErrorMessage, WarningMessage, and FinishedMessage. If you need close callback from ProgressViewer make sure to return FinishedMessage in every process. You just need to map the processId (string that represent the unique process Id) to each message that you needed.
  

FrontEnd

• Setup

  Program.cs:
  ```
  // For easier adding route when deploying
  var baseAddress = conf["APIRootURL"] ?? throw new InvalidOperationException("API is not configured under APIRootURL.");
  
  // For local testing, override the route
  builder.Services.AddSingleton<IProgressViewerConfig>(new ProgressViewerConfig($"{baseAddress}/ProgressViewer/"));
  
  // Add this at the very bottom of Program.cs
  record ProgressViewerConfig(string BaseAddress) : IProgressViewerConfig { public string SignalRHubUri => $"{BaseAddress}"; }
  ```
  

• Usage

  ```
  @using com.gudang2go.UI.ProgressViewer
  
  <ProgressViewer TaskId="@TaskId" OnClose="Close" IsShowCloseButton="true" />
  
  @code {
      private string? TaskId;
  
      private async Task OnClick()
      {
          @* Make sure to give progress viewer the TaskId *@
          @* It will be better to add some loading mechanism or some delay *@
          TaskId = await service.GetPid();
      }
  
      @* Callback function for Progress Viewer close button *@
      private void Close()
      {
          @* 
              There is callback for parent using this function,
              if need the callback use StateHasChanged()
          *@
      }
  }
  ```