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
     

  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>
     
         <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>
     
     @* Add this toggler to apply darkmode *@
     <DarkModeToggle @rendermode="InteractiveServer"/>
     

  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:

  <NavSideMenu>
      @* Use Color to give button a color *@ 
      <NavItem Name="Dashboard" Route="/" Color="#499D0A">
          <Icon>
              <i class="ms-Icon ms-Icon--BIDashboard fs-4"></i>
          </Icon>
      </NavItem>
  </NavSideMenu>
  

  • Using submenu and icon:

      <NavItem Name="Purchase" Route="/purcahse" Color="#3C00FF">
          <Icon>
              <i class="bi bi-credit-card fs-4"></i>
          </Icon>
          <Submenu>
              <NavLinkCustom Name="Purchase Order" Route="/purcase/order" />
              <NavLinkCustom Name="Purcase Return" Route="/purcase/return" />
              <NavLinkCustom Name="Payables" Route="/purcase/payables" />
              <NavLinkCustom Name="Principal" Route="/purcase/principal" />
          </Submenu>
      </NavItem>
  

  • Parameter:

      string Name="Required"
      string Route="Required"
      string Color=""
      RenderFragment Icon=""
      RenderFragment Submenu=""
  

• NavLinkCustom

  Usage:

  • As default NavLink

      <NavLinkCustom Name="Purchase Order" Route="/purcase/order" />
  

  • Complex parameter

      <NavLinkCustom 
          Name="@Name" 
          IsUppercase="true" 
          Route="@Route" 
          Color="@Color"
          AdditionalAttributes="@(Submenu is not null 
          ? new Dictionary<string, object> {
              { "data-bs-toggle", "collapse" },
              { "data-bs-target", $"#{Name?.ToLower()}" },
              { "aria-expanded", "false" },
              { "aria-controls", $"{Name?.ToLower()}" }
          } : new ())">
          <Icon>
              @Icon
          </Icon>
      </NavLinkCustom>
  

  Parameter:

      string Name="Required"
      string Route="Required"
      bool IsUpperCase=false
      string Color=""
      RenderFragment Icon=""
      Dictionary<string, object> AdditionalAttributes=""
  

• Pagination

• Popup

  Don't forget to use InteractiveServer. Usage:

  <PopupModal @ref="modal" 
      Title="Your Title" 
      HeaderCssClass="Inject CSS Style e.g. => color: red;" 
      ModalCssClass="Bootstrap modal class e.g. => modal-lg"
      IsDarkButton=(default false)>
      <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="..." 
      HeaderCssClass="..." 
      ModalCssClass="..."
      IsDarkButton=...>
      <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},
         "MethodName": ${METHOD_NAME}
     },
     

  2. Create new .cs file for configuration, you can add it to any folder.
  3. Add this to configuration file

     using com.gudang2go.UI.Components.ProgressViewer;
     
     namespace {YOUR_NAMESPACE}
     {
         public class {YOUR_FILE_NAME} : IProgressViewerConfig
         {
             private readonly IConfiguration _configuration;
     
             public {YOUR_FILE_NAME}(IConfiguration configuration)
             {
                 _configuration = configuration;
             }
     
             public string SignalRHubUri => _configuration["SignalR:HubUri"] ?? throw new InvalidOperationException("SignalR:HubUri is missing");
             public string MethodName => _configuration["SignalR:MethodName"] ?? throw new InvalidOperationException("SignalR:MethodName is missing");
         }
     }
     

  4. Register it to program.cs as Singleton builder.Services.AddSingleton<IProgressViewerConfig, {YOUR_CONFIG_FILE_NAME}>();
  5. Use the component in your project

     @using com.gudang2go.UI.ProgressViewer
     
     <ProgressViewer TaskId="@TaskId" OnClose="Close" />
     
     @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()
         {
     
         }
     }
     

• Dark Mode Toggle

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