Collection of Gudang2go Reusable UI Block

Table Of Content

• Layout
  • Default Layout
• Components
  • NavItem
  • NavLinkCustom
  • Pagination
  • Popup
  • ProgressViewer
  • DarkModeToggle

Layout

• Default Layout

  Usage:
  1. At your frontend project add @using com.gudang2go.UI and @using Gudang2GoUI.com_gudang2go_layout into _Imports.Razor
  2. Add builder.Services.AddHttpContextAccessor(); into Program.cs. The purpose is for getting darkmode value in cookies.
  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

     <body class="@bodyClass">
         <Routes />
         <script src="_framework/blazor.web.js"></script>
     </body>
     

  4. Remove and replace your MainLayout:

     @inherits LayoutComponentBase
     @using com.gudang2go.UI.Navigation
     
     <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"/>
     

  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. Make sure to add @using Gudang2GoUI.com_gudang2go_layout and @using com.gudang2go.UI into _Imports.razor
  2. Add this to appsettings.json, appsettings.Development.json, and appsettings.Production.json

     "SignalR": {
         "HubUri": ${HUB_URI},
         "MethodName": ${METHOD_NAME}
     },
     

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

     using Gudang2GoUI.com.gudang2go.UI.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");
         }
     }
     

  5. Register it to program.cs as Singleton builder.Services.AddSingleton<IProgressViewerConfig, {YOUR_CONFIG_FILE_NAME}>();
  6. 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.