Collection of Gudang2go Reusable UI Block

Table Of Content

• Layout
  • Default Layout
  • Logo
  • Hide when Not Auth
• Components
  • NavItem
  • NavLinkCustom
  • Pagination
  • Popup
  • ProgressViewer
  • DarkModeToggle

Add Imports

```
@using com.gudang2go.UI.Components
@using com.gudang2go.UI.Components.Navigation
@using com.gudang2go.UI.Components.ProgressViewer
@using com.gudang2go.UI.Layouts
``` 
into `_Imports.razor`.

Layout

• Default Layout

  Usage:

  1. Add builder.Services.AddHttpContextAccessor(); into Program.cs. The purpose is for getting darkmode value in cookies.
  2. In Program.cs don't forget also to add:

     var app = builder.Build();
     app.UsePathBase("/{YOUR_BASE_PATH}");   // <--  This change to your basepath and just use 1 slash in front of it.
                                             //      And also this line is under var app = builder.Build() and run before 
                                             //      Middleware under it.
     // Configure the HTTP request pipeline.
     if (!app.Environment.IsDevelopment())
     {
         app.UseExceptionHandler("/Error", createScopeForErrors: true);
         // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
         app.UseHsts();
     }
     
     app.UseHttpsRedirection();
     app.UseRouting();                                   // <--  Add this line also to handle routing and static files
     app.UseStaticFiles();                               // <--  Add this line also to handle routing and static files
     app.UseStatusCodePagesWithRedirects("~/not-found"); // <-- Add this line to use fallback route
     
     app.MapRazorComponents<App>()
         .AddInteractiveServerRenderMode(c => c.DisableWebSocketCompression = true)                  //  <-- Add this to suppress websocket
         .AddAdditionalAssemblies(typeof(com.gudang2go.UI.Components.ErrorPage.NotFound).Assembly);  //  <-- Add this line to register fallback page
     

  3. Add cookies checker for darkmode in App.razor

     @inject IHttpContextAccessor HttpContextAccessor
     
     @{
         var darkMode = HttpContextAccessor.HttpContext?.Request.Cookies["darkmode"];
         var bodyClass = darkMode == "true" ? "dark" : "";
     }
     

     then add @bodyClass and make sure use <base href="/{YOUR_BASE_PATH}/" /> e.g. /SettingWeb/, /DistributorWeb/

     <head>
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <base href="/{YOUR_BASE_PATH}/" />
         <link rel="stylesheet" href="@Assets["lib/bootstrap/dist/css/bootstrap.min.css"]" />
         <link rel="stylesheet" href="@Assets["app.css"]" />
         <HeadOutlet />
         <ImportMap />
         <link rel="icon" type="image/png" href="favicon.png" />
     </head>
     <body class="@bodyClass">
         <Routes />
         <script src="_framework/blazor.web.js"></script>
     </body>
     

  4. Remove and replace your MainLayout:

     @inherits LayoutComponentBase
     @namespace com.gudang2go.Setting.Web.Components.Layout
     
     @using com.gudang2go.OpenID.Interfaces
     @inject IOpenIDConnectUserInfo service
     
     <DefaultLayout Header="Distributor" Username="@User">
         @* If you want to add CDN or anything *@
         <HeadExtra>
     
         </HeadExtra>
     
         <NavbarMenu>
             @* If you want to add customized menu for navbar *@
             @* Use <NavbarItem Route="" Color=""><Icon>Your Icon</Icon></NavbarItem> Component *@
     
             @* Add this toggler to apply darkmode *@
             <DarkModeToggle @rendermode="InteractiveServer"/>
             @if (User == "Guest")
             {
                 <a class="btn text-white d-inline-flex align-items-center gap-2" href="OnSignIn"
                     style="background-color: #8DD334;"><i class="bi bi-box-arrow-in-left fs-4"></i> Log In</a>
             }
             else
             {
                 <a class="btn text-white" href="OnSignOut" style="background-color: #DC3545;"><i
                         class="bi bi-box-arrow-right fs-4"></i></a>
             }
         </NavbarMenu>
     
         <NavSideMenu>
             <NavItem Name="Dashboard" Route="/" Color="#499D0A">
                 <Icon>
                     <i class="ms-Icon ms-Icon--BIDashboard fs-4"></i>
                 </Icon>
             </NavItem>
             <NavItem Name="Sales" Route="/sales" Color="#00FF6A">
                 <Icon>
                     <i class="bi bi-tag fs-4"></i>
                 </Icon>
                 <Submenu>
                     <NavLinkCustom Name="Sales Order" Route="/sales/order" />
                     ...
                 </Submenu>
             </NavItem>
             ...
         </NavSideMenu>
     
         <Body>
             @Body
         </Body>
     </DefaultLayout>
     
     @code {
         private string User = "Guest";
     
         protected override async Task OnInitializedAsync()
         {
             var obj = await service.GetUserInfo();
             User = string.IsNullOrEmpty(obj?.UserName) ? "Guest" : obj?.UserName ?? "";
         }
     }
     

  5. Pages routing using href make to not include any slash in front of it

     <NavItem Name="Custom Transaction Code" Route="{THIS_ROUTE e.g. transaction-code instead of /transaction-code}" Color="#499D0A">
         <Icon><i class="bi bi-code fs-4"></i></Icon>
     </NavItem>
     

     This because blazor will read it as relative path instead of root path, but if there is subpath you can do like transaction-code/custom, this is okay because it will run in relative path. Note: make sure not to change Routes.Razor layout

• Logo

  1. Logo needed to be added manually from this g2g-ui module through ./img/Logo/.., default Logo & Favicon is g2g-ui Logo. You need to add the logo route through appsettings

      "AppMetadata": {
          "Theme": "", // Theme name in .css
          "Logo": "", // Logo uri in /Logo folder
          "Language": "en" // Language for layout
      },
  

  2. If want to access the logo image directly, add line below in your pages or component

      private DomainContext Data { get; set; } = new();
  
      protected override void OnInitialized()
          => Data = Config.GetDomainData();
  

• Hide when Not Auth

  1. Add this into Routes.razor:

      @using Microsoft.AspNetCore.Components.Authorization
  
      <CascadingAuthenticationState>
          <Router AppAssembly="typeof(Program).Assembly">
              <Found Context="routeData">
                  <RouteView RouteData="routeData" DefaultLayout="typeof(Layout.MainLayout)" />
                  <FocusOnNavigate RouteData="routeData" Selector="h1" />
              </Found>
          </Router>
      </CascadingAuthenticationState>
  

Components

• NavItem

  Usage:

  • Inside your layout:

  @* Don't use slash infront of the route path *@
  <NavItem Name="{YOUR_NAV_NAME}" Route="{YOUR_NAV_ROUTE e.g. transaction/sales}" />
  

• NavLinkCustom

  Usage:

  • As default NavLink

      <NavLinkCustom Name="User Mapping" Route="" Color="#DA007F">
          <Icon><i class="bi bi-bezier fs-4"></i></Icon>
          <Submenu>
              @* Your submenu *@
              @* You can use <NavLink> or <NavItem> *@
          </Submenu>
      </NavLinkCustom>
  

• Pagination

  Usage:

      <Pagination StartIndex=StartIndex ItemsPerPage=PageSize TotalItems=TotalItems
          OnPageChanged=HandleOnValueUpdate />
  

• DecimalInput

  Usage:

  • Include the js CDN first in your _Host.cshtml or App.razor:

  <script src="https://unpkg.com/inputmask@latest/dist/inputmask.min.js"></script>
  

  • Use the component in your page or layout:

  <DecimalInput @bind-Value="yourVar" Digits=2 GroupSeparator="." OnInputChanged="() => OnInputChangeAsync(floor, level)" />
  

  • Acceptable parameters:
    • bind-Value: decimal variable to bind
    • GroupSeparator: group separator for thousands, can be "." or ","
    • Digits: number of digits after decimal point, default is 0
    • OnInputChanged : to trigger Event on Update Value

• Popup

  Don't forget to use InteractiveServer. Usage:

  <PopupModal @ref="modal" 
      Title="Your Title" 
      ModalCssClass="Bootstrap modal class e.g. => modal-lg">
      <Body>
          ...
          Add your modal item here
      </Body>
  </PopupModal>
  
  @code {
      private PopupModal? modal;
  }
  

  If your other component need to trigger close modal:

  • Component A

  @code {
      [Parameter] public EventCallback OnCancel { get; set; }
  
      private async Task OnCancelClicked()
      {
          // Use invoke to notify parent
          if (OnCancel.HasDelegate) await OnCancel.InvokeAsync();
      }
  }
  

  • Your page

  <PopupModal @ref="modal" 
      Title="..." 
      HeaderBackgroundColor="..." 
      ModalCssClass="...">
      <Body>
          @*
              Pass the close trigger to the component.
              Identical in React when you pass state of
              UseState to a component
          *@
          <ComponentA OnCancel="() => modal?.Close()" />
      </Body>
  </PopupModal>
  
  @code {
      private PopupModal? modal;
  }
  

• Progress Viewer

  Usage:

  1. Front End: Create ProgressViewerConfig class that implements IProgressViewerConfig interface from this UI nuget, this is used to set SignalR Hub URI for Progress Viewer.

     record ProgressViewerConfig(string BaseAddress) : IProgressViewerConfig { public string SignalRHubUri => $"{BaseAddress}"; }
     

  2. Front End: Register IProgressViewerConfig to program.cs as Singleton (note baseAddress to match API base path)

     builder.Services.AddSingleton<IProgressViewerConfig>(
         new ProgressViewerConfig($"{baseAddress}/ProgressViewer")
     );
     

  3. Front End: Use the component in your project

     @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, use to erase TaskId if needed *@
         private void Close()
         {
             @* 
                 There is callback for parent using this function,
                 if need the callback use StateHasChanged()
             *@
         }
     }
     

  4. Back End: insert following to program.cs and make sure to have RabbitMQ:host in appsettings

     builder.Services.AddSingleton<IPublisher>(p =>
     {
         var hostname = configuration["RabbitMQ:host"] ?? throw new ArgumentNullException(configuration["RabbitMQ:host"], "RabbitMQ host not configured!");
         return Publisher.InitiatePublisher(hostname).GetAwaiter().GetResult();
     });
     

  5. Back End: Usage in a service that needed progress viewer:

     public class ExcelJob(IServiceProvider provider)
     {
     
         public async Task<string> Run(IFormFile excelFile, String editor, bool doCommit = false)
         {
             //Generate ID for Process Tracking
             Guid tk = Guid.CreateVersion7();
             //Convert to String to make easy for send custom message
             String tkn = tk.ToString();
     
             //Trigger Long Processing Task Here
             _ = Task.Run(async () =>
             {
                 using var scope = provider.CreateScope();
                 var publisher = scope.ServiceProvider.GetRequiredService<IPublisher>();
     
                 try
                 {
                     await publisher.PublishMessage(tkn.GeneralMessage("Process is running"));
                     .
                     .Insert Logic Here...
                     .
                     await publisher.PublishMessage(tkn.FinishedMessage("Process is finished"));
                 }
                 catch (Exception ex)
                 {
                     await publisher.PublishMessage(tkn.ErrorMessage(ex.Message));
                 }
             });
     
             //this is the TaskId that will be used in ProgressViewer Front End
             return tkn;
         }
     }
     

  6. There is 4 message type: GeneralMessage, ErrorMessage, WarningMessage, and FinishedMessage, available as extension function from String class.
  7. If you need close callback from ProgressViewer make sure to return FinishedMessage in every process. You just need to map the processId to each message that you needed.

• Dark Mode Toggle

  Usage: read the DefaultLayout section. Just to make sure to use @rendermode="InteractiveServer" inside the component.