Collection of Gudang2go Reusable UI Block

Table Of Content

• Layout
  • Default Layout
• 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"]" />
         <ImportMap />
         <link rel="icon" type="image/png" href="favicon.png" />
         <HeadOutlet />
     </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
     
     <DefaultLayout Header="Distributor">
         @* If you want to add CDN or anything *@
         <HeadExtra>
     
         </HeadExtra>
     
         <NavbarMenu>
             @* If you want to add customized menu for navbar *@
             @* Add this toggler to apply darkmode *@
             <DarkModeToggle @rendermode="InteractiveServer"/>
         </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>
     

  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

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

• 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="YourDecimalValueVariable" GroupSeparator="," Digits=2/>
  

  • 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

• 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. Add this to appsettings.json, appsettings.Development.json, and appsettings.Production.json

     "SignalR": {
         "HubUri": ${HUB_URI} => use localhost:PORT where PORT is the listener in SignalR project
     },
     

  2. Create new .cs file for configuration, you can add it to any folder.
  3. Register it to program.cs as Singleton

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

  4. Add this record at the bottom of program.cs

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

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

  6. In API, insert below 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();
     });
     

  7. Usage in a service that needed progress viewer (assign it to constructor):

     private readonly IPublisher _publisher;
     
     public Service(IPublisher publisher)
     {
         _publiser = publisher;
     }
     
     public async Task SendToProgressViewer()
     {
         await _publisher.PublishMessage(processId.ErrorMessage("Database is not found!"));
     }
     

  8. 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 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.