* Added Syncfusion

* Changed MainPage
* Added styles
* Changed ScheduleOrders grid

OrdersManagement/Components/App.razor

@@ -8,8 +8,10 @@
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous" />
     <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css" rel="stylesheet" />
     <link href="_content/Blazor.Bootstrap/blazor.bootstrap.css" rel="stylesheet" />
+    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
     <link rel="stylesheet" href="app.css" />
     <link rel="stylesheet" href="OrdersManagement.styles.css" />
+    <link href="_content/Syncfusion.Blazor.Themes/fabric.css" rel="stylesheet" />
     <HeadOutlet @rendermode="@InteractiveServer" />
 </head>
 
@@ -23,6 +25,7 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.2.0/chartjs-plugin-datalabels.min.js" integrity="sha512-JPcRR8yFa8mmCsfrw4TNte1ZvF1e3+1SdGMslZvmrzDYxS69J7J49vkFL8u6u8PlPJK+H3voElBtUCzaXj+6ig==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
     <script src="_content/Blazor.Bootstrap/blazor.bootstrap.js"></script>
+    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
 </body>
 
 </html>

OrdersManagement/Components/Layout/MainLayout.razor

@@ -1,18 +1,36 @@
-@using BlazorBootstrap
+@using Syncfusion.Blazor.Navigations
+@using Syncfusion.Blazor.SplitButtons
+@using Orientation = Syncfusion.Blazor.Navigations.Orientation
+@inject NavigationManager NavigationManager
 @inherits LayoutComponentBase
 
-<div class="bb-page">
+<div class="page">
 
     <Sidebar @ref="_sidebar"
              IconName="IconName.App"
-             Title="FA Krosno Manager"
+             Title="FA Krosno Manager">
-             DataProvider="SidebarDataProvider" />
+        <SfMenu Items="@MenuItems" Orientation="Orientation.Vertical">
+            <MenuEvents TValue="MenuItem" ItemSelected="OnMenuItemSelected"></MenuEvents>
+            <MenuFieldSettings Text="Text" Children="Children"></MenuFieldSettings>
+        </SfMenu>
+    </Sidebar>
+    
+    @* <SfSidebar Width="300px" IsOpen="true" Type="SidebarType.Push" Position="SidebarPosition.Left"> *@
+    @*     <ChildContent> *@
+    @*         <div class="top-row"> *@
+    @*             <h3 class="sidebar-title">FA Krosno Manager</h3> *@
+    @*         </div> *@
+    @*         <SfMenu Items="@MenuItems" Orientation="Orientation.Vertical"> *@
+    @*             <MenuEvents TValue="MenuItem" ItemSelected="OnMenuItemSelected"></MenuEvents> *@
+    @*             <MenuFieldSettings Text="Text" Children="Children"></MenuFieldSettings> *@
+    @*         </SfMenu> *@
+    @*     </ChildContent> *@
+    @* </SfSidebar> *@
 
     <main>
         <div class="bb-top-row px-4 d-flex justify-content-end">
             <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
         </div>
-
         <article class="content px-4">
             <div class="py-2">@Body</div>
         </article>
@@ -21,29 +39,26 @@
 </div>
 
 @code {
+    private List<MenuItem> MenuItems { get; set; } = new();
+    
     Sidebar? _sidebar;
-    IEnumerable<NavItem>? _navItems;
 
-    private async Task<SidebarDataProviderResult> SidebarDataProvider(SidebarDataProviderRequest request)
+    protected override void OnInitialized()
     {
-        _navItems ??= GetNavItems();
+        MenuItems = new List<MenuItem>
-
-        return await Task.FromResult(request.ApplyTo(_navItems));
-    }
-
-    private IEnumerable<NavItem>? GetNavItems()
         {
-        _navItems = new List<NavItem>
+            new() { Text = "Zamówienia DELFOR", Url = "/", IconCss = "fas fa-home" },
-                   {
+            new() { Text = "Zamówienia klienta EDI", Url = "/EdiCustomerOrders", IconCss = "fas fa-database" },
-                       new NavItem { Id = "1", Href = "/", IconName = IconName.HouseDoorFill, Text = "Zamówienia DELFOR", Match=NavLinkMatch.All},
+            new() { Text = "Zamówienia klienta", Url = "/CustomerOrders", IconCss = "fas fa-database" }
-                       new NavItem { Id = "2", Href = "/EdiCustomerOrders", IconName = IconName.Database, Text = "Zamówienia klienta EDI"},
-                       new NavItem { Id = "3", Href = "/CustomerOrders", IconName = IconName.Database, Text = "Zamówienia klienta"}
         };
-
-        return _navItems;
-    }
     }
 
+    private void OnMenuItemSelected(MenuEventArgs<MenuItem> args)
+    {
+        NavigationManager.NavigateTo(args.Item.Url);
+    }
+
+}
 
 <div id="blazor-error-ui">
     An unhandled error has occurred.

OrdersManagement/Components/Pages/CustomerOrder.razor

@@ -4,6 +4,7 @@
 @inject ScheduleOrderService ScheduleOrderService
 @using SytelineSaAppEfDataModel.Dtos
 @using OrdersManagement.Components.Pages.Shared
+@using GridColumns = BlazorBootstrap.GridColumns
 @inherits LayoutComponentBase
 
 <h3>Zamówienie klienta nr @CustomerOrders.FirstOrDefault()?.CoNum</h3>
@@ -49,17 +50,17 @@
     </div>
 </div>
 <br/>
-@if (_isVisible)
+@* @if (_isVisible) *@
-{
+@* { *@
-    <div class="row">
+@*     <div class="row"> *@
-        <h3>Zamówienie DELFOR do zamówienia @CustomerOrders.FirstOrDefault()?.CoNum</h3>
+@*         <h3>Zamówienie DELFOR do zamówienia @CustomerOrders.FirstOrDefault()?.CoNum</h3> *@
-    </div>
+@*     </div> *@
-    <br/>
+@*     <br/> *@
-    <div class="row">
+@*     <div class="row"> *@
-        <ScheduleOrdersGrid PageSize="5" PassGridRef="SetGridRef" DataProvider="ScheduleOrdersDataProvider"></ScheduleOrdersGrid>    
+@*         <ScheduleOrdersGrid PageSize="5" PassGridRef="SetGridRef" DataProvider="ScheduleOrdersDataProvider"></ScheduleOrdersGrid>     *@
-    </div>
+@*     </div> *@
-    <br/>
+@*     <br/> *@
-}
+@* } *@
 <div class="row">
     <h3>Indeksy</h3>
 </div>
@@ -242,7 +243,7 @@
     private bool _isVisibleCustomerOrderLine;
     private bool _isVisibleCustomerOrderLineItem;
 
-    private Grid<ScheduleOrderDto> _gridRef = new();
+    // private SfGrid<ScheduleOrderDto> _gridRef = new();
 
     private bool _isVisible = true;
     private string _text = "Pokaż powiązane zamówienia DELFOR";
@@ -262,7 +263,7 @@
     {
         if (firstRender)
         {
-            await SetGridRef(_gridRef);
+            // await SetGridRef(_gridRef);
             StateHasChanged();
             _isVisible = false;
         }
@@ -291,17 +292,17 @@
         }
         else
         {
-            await _gridRef.RefreshDataAsync();
+            // await _gridRef.Refresh();
             StateHasChanged();
             _isVisible = true;
             _text = "Ukryj";
         }
     }
 
-    private async Task SetGridRef(Grid<ScheduleOrderDto> grid)
+    // private async Task SetGridRef(SfGrid<ScheduleOrderDto> grid)
-    {
+    // {
-        _gridRef = grid;
+    //     _gridRef = grid;
-    }
+    // }
 
     private async Task<GridDataProviderResult<ScheduleOrderDto>> ScheduleOrdersDataProvider(GridDataProviderRequest<ScheduleOrderDto> request)
     {

OrdersManagement/Components/Pages/ScheduleOrders.razor

@@ -1,6 +1,7 @@
 @page "/"
 
 @using OrdersManagement.Components.Pages.Shared
+@using Syncfusion.Blazor.Grids
 @inject ScheduleOrderService ScheduleOrderService
 @inherits LayoutComponentBase
 
@@ -8,23 +9,29 @@
     <h3>Zamówienia DELFOR </h3>
 </div>
 <br />
-<ScheduleOrdersGrid PageSize="20" PassGridRef="SetGridRef" DataProvider="ScheduleOrdersDataProvider"></ScheduleOrdersGrid>
+<ScheduleOrdersGrid PageSize="20" PassGridRef="SetGridRef" GridData="_scheduleOrders"></ScheduleOrdersGrid>
 
 @code {
-    private IEnumerable<ScheduleOrderDto>? _scheduleOrders;
+    private IEnumerable<ScheduleOrderDto> _scheduleOrders = [];
 
-    private Grid<ScheduleOrderDto> _gridRef;
+    protected override async Task OnInitializedAsync()
+    {
+        _scheduleOrders = await FetchScheduleOrdersAsync();
+    }
 
-    private async Task<GridDataProviderResult<ScheduleOrderDto>> ScheduleOrdersDataProvider(GridDataProviderRequest<ScheduleOrderDto> request)
+    private async Task<IEnumerable<ScheduleOrderDto>> FetchScheduleOrdersAsync()
     {
         _scheduleOrders = await ScheduleOrderService.GetScheduleOrdersAsync() ?? new List<ScheduleOrderDto>();
         _scheduleOrders = _scheduleOrders.OrderByDescending(x => x.LastUpdateDate).ToList();
         StateHasChanged();
 
-        return await Task.FromResult(request.ApplyTo(_scheduleOrders));
+        return _scheduleOrders;
     }
 
-    private async Task SetGridRef(Grid<ScheduleOrderDto> grid)
+    
+    private SfGrid<ScheduleOrderDto> _gridRef;
+    
+    private async Task SetGridRef(SfGrid<ScheduleOrderDto> grid)
     {
         _gridRef = grid;
     }

OrdersManagement/Components/Pages/Shared/ScheduleOrdersGrid.razor

@@ -1,53 +1,53 @@
 @inject NavigationManager NavigationManager
+@using Syncfusion.Blazor.Grids
 @inherits LayoutComponentBase
 
 <div class="row">
-    <Grid @ref="_grid"
+    <SfGrid @ref="_grid"
-          TItem="ScheduleOrderDto"
+            TValue="ScheduleOrderDto"
-          Class="table table-hover table-bordered table-striped"
             AllowFiltering="true"
-          Responsive="true"
             AllowPaging="true"
-          PageSize="@PageSize"
+            PageSettings="@(new GridPageSettings { PageSize = PageSize })"
+            AllowSorting="true"
             AllowSelection="true"
+            DataSource="@_dataSource"
             AllowRowClick="true"
-          DataProvider="LoadData"
+            SelectionMode="GridSelectionMode.Single"
-          OnRowDoubleClick="OnRowDoubleClick">
+            QueryCellInfo="OnQueryCellInfo"
+            RowSelected="OnRowSelected">
+        <Syncfusion.Blazor.Grids.GridColumns>
+            <Syncfusion.Blazor.Grids.GridColumn Field=@nameof(ScheduleOrderDto.OrderID) HeaderText="Zamówienie" Width="120" AllowFiltering="true"></Syncfusion.Blazor.Grids.GridColumn>
+            <Syncfusion.Blazor.Grids.GridColumn Field=@nameof(ScheduleOrderDto.PONum) HeaderText="Zamówienie Klienta" Width="150" AllowFiltering="true"></Syncfusion.Blazor.Grids.GridColumn>
+            <Syncfusion.Blazor.Grids.GridColumn Field=@nameof(ScheduleOrderDto.RecipientCode) HeaderText="Odbiorca" Width="100" AllowFiltering="true"></Syncfusion.Blazor.Grids.GridColumn>
+            <Syncfusion.Blazor.Grids.GridColumn Field=@nameof(ScheduleOrderDto.PurchaserCode) HeaderText="Klient" Width="100" AllowFiltering="true"></Syncfusion.Blazor.Grids.GridColumn>
+            <Syncfusion.Blazor.Grids.GridColumn Field=@nameof(ScheduleOrderDto.LastUpdateDate) HeaderText="Data Utworzenia" Format="d" Type="ColumnType.Date" Width="130" AllowFiltering="true"></Syncfusion.Blazor.Grids.GridColumn>
+            <Syncfusion.Blazor.Grids.GridColumn Field=@nameof(ScheduleOrderDto.DocType) HeaderText="Typ Dokumentu" Width="100" AllowFiltering="true"></Syncfusion.Blazor.Grids.GridColumn>
+        </Syncfusion.Blazor.Grids.GridColumns>
+        <GridEvents TValue="ScheduleOrderDto" OnRecordDoubleClick="OnRowDoubleClick"></GridEvents>
+        <GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.Excel">
+        </GridFilterSettings>
 
-        <GridColumns>
+    </SfGrid>
-            <GridColumn TItem="ScheduleOrderDto" HeaderText="Zamówienie" PropertyName="OrderID">
-                @context.OrderID
-            </GridColumn>
-            <GridColumn TItem="ScheduleOrderDto" HeaderText="Zamówienie Klienta" PropertyName="PONum">
-                @context.PONum
-            </GridColumn>
-            <GridColumn TItem="ScheduleOrderDto" HeaderText="Odbiorca" PropertyName="RecipientCode">
-                @context.RecipientCode
-            </GridColumn>
-            <GridColumn TItem="ScheduleOrderDto" HeaderText="Klient" PropertyName="PurchaserCode">
-                @context.PurchaserCode
-            </GridColumn>
-            <GridColumn TItem="ScheduleOrderDto" HeaderText="Data Utworzenia" PropertyName="LastUpdateDate">
-                @context.LastUpdateDate
-            </GridColumn>
-            <GridColumn TItem="ScheduleOrderDto" HeaderText="Typ Dokumentu" PropertyName="DocType">
-                @context.DocType
-            </GridColumn>
-        </GridColumns>
-    </Grid>
 </div>
 
 @code {
     [Parameter]
-    public required Func<GridDataProviderRequest<ScheduleOrderDto>, Task<GridDataProviderResult<ScheduleOrderDto>>> DataProvider { get; set; }
+    public required IEnumerable<ScheduleOrderDto> GridData { get; set; }
 
     [Parameter]
-    public required Func<Grid<ScheduleOrderDto>, Task> PassGridRef { get; set; }
+    public required Func<SfGrid<ScheduleOrderDto>, Task> PassGridRef { get; set; }
     
     [Parameter]
     public required int PageSize { get; set; }
     
-    private Grid<ScheduleOrderDto> _grid { get; set; }
+    private SfGrid<ScheduleOrderDto> _grid { get; set; }
+    
+    private IEnumerable<ScheduleOrderDto> _dataSource = [];
+
+    protected override void OnParametersSet()
+    {
+        _dataSource = GridData;
+    }
 
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
@@ -57,15 +57,9 @@
         }
     }
 
-    private async Task<GridDataProviderResult<ScheduleOrderDto>> LoadData(GridDataProviderRequest<ScheduleOrderDto> request)
+    private void OnRowDoubleClick(RecordDoubleClickEventArgs<ScheduleOrderDto> obj)
     {
-        return await DataProvider.Invoke(request);
+        int scheduleOrderId = obj.RowData.ID;
-    }
-
-    private void OnRowDoubleClick(GridRowEventArgs<ScheduleOrderDto> obj)
-    {
-        int scheduleOrderId = obj.Item.ID;
-
         NavigationManager.NavigateTo($"/ScheduleOrder/{scheduleOrderId}");
     }
 }

OrdersManagement/OrdersManagement.csproj

@@ -8,6 +8,11 @@
 
   <ItemGroup>
     <PackageReference Include="Blazor.Bootstrap" Version="3.2.0" />
+    <PackageReference Include="Syncfusion.Blazor.Core" Version="28.2.3" />
+    <PackageReference Include="Syncfusion.Blazor.Grid" Version="28.2.3" />
+    <PackageReference Include="Syncfusion.Blazor.Navigations" Version="28.2.3" />
+    <PackageReference Include="Syncfusion.Blazor.SplitButtons" Version="28.2.3" />
+    <PackageReference Include="Syncfusion.Blazor.Themes" Version="28.2.3" />
   </ItemGroup>
 
   <ItemGroup>

OrdersManagement/Program.cs

@@ -1,9 +1,11 @@
 using Microsoft.AspNetCore.Routing.Constraints;
 using OrdersManagement.Components;
 using OrdersManagement.Services;
+using Syncfusion.Blazor;
 
 var builder = WebApplication.CreateBuilder(args);
 
+builder.Services.AddSyncfusionBlazor();
 builder.Services.AddBlazorBootstrap();
 
 string apiUrl = builder.Configuration["ApiUrl"] ?? "http://localhost:5555"; // Ustawienie na adres twojego API
@@ -36,4 +38,6 @@ app.UseAntiforgery();
 app.MapRazorComponents<App>()
     .AddInteractiveServerRenderMode();
 
+Syncfusion.Licensing.SyncfusionLicenseProvider.RegisterLicense("Ngo9BigBOggjHTQxAR8/V1NMaF5cXmBCf1FpRmJGdld5fUVHYVZUTXxaS00DNHVRdkdmWX1ec3VWQmNYV01wWUE=");
+
 app.Run();

OrdersManagement/wwwroot/app.css

@@ -49,3 +49,26 @@ h1:focus {
 .darker-border-checkbox.form-check-input {
     border-color: #929292;
 }
+
+.e-grid .e-gridheader {
+    background-color: #0078d4; /* Kolor tła nagłówka */
+}
+
+.e-grid .e-headercell {
+    color: #000000; /* Czarne litery */
+    font-weight: bold; /* Pogrubienie */
+}
+
+.e-grid .e-rowcell {
+    background-color: #f3f2f1; /* Kolor tła wierszy */
+}
+.e-grid .e-row:hover .e-rowcell {
+    background-color: #edebe9; /* Kolor tła wierszy przy najechaniu myszką */
+}
+.e-grid .e-rowcell {
+    color: #333333; /* Kolor tekstu w komórkach wierszy */
+}
+.e-grid .e-selectionbackground {
+    background-color: #0078d4; /* Kolor tła dla zaznaczonych wierszy */
+    color: white; /* Kolor tekstu w zaznaczonych wierszach */
+}