Megabit / Blazorise

Blazorise is a component library built on top of Blazor with support for CSS frameworks like Bootstrap, Tailwind, Bulma, AntDesign, and Material.
https://blazorise.com/
Other
3.27k stars 530 forks source link

DatePicker calendar does not open #4680

Closed raysefo closed 1 year ago

raysefo commented 1 year ago

Describe the bug I am trying to add your DatePicker to my Blazor Server application. I have already Jquery min v3.6.1 and bootstrap v5.2 installed. Just in case added <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> in _Layout.cshtml.

To Reproduce Steps to reproduce the behavior:

  1. Added @using Blazorise on top of the page which I am going to use DatePicker.
  2. Added <DatePicker @bind-Dates="selectedDates" TValue="DateTime?" InputMode="DateInputMode.Date" SelectionMode="DateInputSelectionMode.Multiple" />
  3. When I click on the Date Picker there is no calendar displaying on the screen.

Screenshots image

github-actions[bot] commented 1 year ago

Hello @raysefo, thank you for your submission. The issue was labeled "Status: Repro Missing", as you have not provided a way to reproduce the issue quickly. Most problems already solve themselves when isolated, but we would like you to provide us with a reproducible code to make it easier to investigate a possible bug.

stsrki commented 1 year ago

Do you get any errors in the console?

We would need some code to reproduce it on our side.

raysefo commented 1 year ago

Here are web developer tools screenshots. Ekran görüntüsü 2023-03-17 134537 Ekran görüntüsü 2023-03-17 134510

_Layout.cshtml:

@using Microsoft.AspNetCore.Components.Web
@namespace IMS.WebApp.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <base href="~/"/>
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css"/>
    <link href="css/site.css" rel="stylesheet"/>
    <link href="IMS.WebApp.styles.css" rel="stylesheet"/>
    <link rel="stylesheet" href="_content/Radzen.Blazor/css/material.css">
    <link href="css/sidebars.css" rel="stylesheet"/>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">

    <link href="_content/Blazorise/blazorise.css" rel="stylesheet" />
    <link href="_content/Blazorise.Bootstrap/blazorise.bootstrap.css" rel="stylesheet" />
    <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered"/>

</head>
<body>
@RenderBody()

<div id="blazor-error-ui">
    <environment include="Staging,Production">
        An error has occurred. This application may no longer respond until reloaded.
    </environment>
    <environment include="Development">
        An unhandled exception has occurred. See browser dev tools for details.
    </environment>
    <a href="" class="reload">Reload</a>
    <a class="dismiss">🗙</a>
</div>

<script src="_framework/blazor.server.js"></script>
<script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script>
<script src="~/jquery/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="~/bootstrap/js/bootstrap.min.js"></script>

<script>
    window.downloadFileFromStream = async (fileName, contentStreamReference) => {
        const arrayBuffer = await contentStreamReference.arrayBuffer();
        const blob = new Blob([arrayBuffer]);
        const url = URL.createObjectURL(blob);
        const anchorElement = document.createElement('a');
        anchorElement.href = url;
        anchorElement.download = fileName ?? '';
        anchorElement.click();
        anchorElement.remove();
        URL.revokeObjectURL(url);
    }
</script>
</body>
</html>

Program.cs:

using AutoMapper;
using IMS.Plugins.EFCore;
using IMS.UseCases;
using IMS.UseCases.Activities;
using IMS.UseCases.Customers;
using IMS.UseCases.Interfaces;
using IMS.UseCases.Inventories;
using IMS.UseCases.PluginInterfaces;
using IMS.USeCases.PluginInterfaces;
using IMS.UseCases.Products;
using IMS.UseCases.Reports;
using IMS.UseCases.Validations;
using IMS.UseCases.Vendors;
using IMS.WebApp.Areas.Identity;
using IMS.WebApp.Data;
using Microsoft.AspNetCore.Components.Authorization;
using Microsoft.AspNetCore.Identity;
using Microsoft.EntityFrameworkCore;
using IMS.UseCases.Interfaces.Customer;
using IMS.UseCases.Interfaces.Order;
using IMS.UseCases.Interfaces.OrderDetail;
using IMS.UseCases.Interfaces.Vendor;
using IMS.UseCases.OrderDetails;
using IMS.UseCases.Orders;
using Microsoft.Extensions.DependencyInjection.Extensions;
using NLog.Web;
using Radzen;
using NLog;
using System;
using Blazorise;
using Blazorise.Bootstrap;
using Blazorise.Icons.FontAwesome;

// load nlog.config
var logger = NLog.LogManager.Setup().LoadConfigurationFromAppSettings().GetCurrentClassLogger();
logger.Debug("init main");
try
{
    var builder = WebApplication.CreateBuilder(args);

    // Add services to the container.
    var connectionString = builder.Configuration.GetConnectionString("InventoryManagement");
    builder.Services.AddDbContext<ApplicationDbContext>(options =>
        options.UseSqlServer(connectionString));
    builder.Services.AddDatabaseDeveloperPageExceptionFilter();
    builder.Services.AddDefaultIdentity<IdentityUser>(options => options.SignIn.RequireConfirmedAccount = false)
        .AddRoles<IdentityRole>()
        .AddEntityFrameworkStores<ApplicationDbContext>();
    builder.Services.AddRazorPages();
    builder.Services.AddServerSideBlazor();
    builder.Services
        .AddScoped<AuthenticationStateProvider, RevalidatingIdentityAuthenticationStateProvider<IdentityUser>>();

    builder.Services.AddDbContextFactory<IMSContext>(options =>
        {
            options.EnableSensitiveDataLogging().UseSqlServer(connectionString);
        }
    );

    builder.Services
        .AddBlazorise( options =>
        {
            options.Immediate = true;
        } )
        .AddBootstrapProviders()
        .AddFontAwesomeIcons();

    //Radzen DialogService
    builder.Services.AddScoped<DialogService>();
    //DI Repo
    builder.Services.AddScoped<IInventoryRepository, InventoryRepository>();
    builder.Services.AddScoped<IProductRepository, ProductRepository>();
    builder.Services.AddScoped<IInventoryTransactionRepository, InventoryTransactionRepository>();
    builder.Services.AddScoped<IProductTransactionRepository, ProductTransactionRepository>();
    builder.Services.AddScoped<IOrderDetailRepository, OrderDetailRepository>();

    //vendors
    builder.Services.AddScoped<IVendorRepository, VendorRepository>();
    //Customers
    builder.Services.AddScoped<ICustomerRepository, CustomerRepository>();

    //Order
    builder.Services.AddScoped<IOrderRepository, OrderRepository>();
    //DI Use cases
    builder.Services.AddScoped<IViewInventoriesByNameUseCase, ViewInventoriesByNameUseCase>();
    builder.Services.AddScoped<IAddInventoryUseCase, AddInventoryUseCase>();
    builder.Services.AddScoped<IEditInventoryUseCase, EditInventoryUseCase>();
    builder.Services.AddScoped<IViewInventoryByIdUseCase, ViewInventoryByIdUseCase>();
    builder.Services.AddScoped<IViewProductsByNameUseCase, ViewProductsByNameUseCase>();
    builder.Services.AddScoped<IAddProductUseCase, AddProductUseCase>();
    builder.Services.AddScoped<IViewProductByIdUseCase, ViewProductByIdUseCase>();
    builder.Services.AddScoped<IEditProductUseCase, EditProductUseCase>();
    builder.Services.AddScoped<IDeleteProductUseCase, DeleteProductUseCase>();
    builder.Services.AddScoped<IPurchaseInventoryUseCase, PurchaseInventoryUseCase>();
    builder.Services
        .AddScoped<IValidateEnoughInventoriesForproducingUseCase, ValidateEnoughInventoriesForproducingUseCase>();
    builder.Services.AddScoped<IProduceProductUsecase, ProduceProductUsecase>();
    builder.Services.AddScoped<ISellProductUseCase, SellProductUseCase>();
    builder.Services.AddScoped<ISearchInventoryTransactionsUseCase, SearchInventoryTransactionsUseCase>();
    builder.Services.AddScoped<ISearchProductTransactionsUseCase, SearchProductTransactionsUseCase>();
    //vendors
    builder.Services.AddScoped<IViewVendorsByNameUseCase, ViewVendorsByNameUseCase>();
    builder.Services.AddScoped<IAddVendorUseCase, AddVendorUseCase>();
    builder.Services.AddScoped<IEditVendorUseCase, EditVendorUseCase>();
    builder.Services.AddScoped<IViewVendorByIdUseCase, ViewVendorByIdUseCase>();
    builder.Services.AddScoped<IViewAllVendorsUseCase, ViewAllVendorsUseCase>();
    builder.Services.AddScoped<IDeleteVendorByIdUseCase, DeleteVendorByIdUseCase>();
    //customers
    builder.Services.AddScoped<IAddCustomerUseCase, AddCustomerUseCase>();
    builder.Services.AddScoped<IEditCustomerUseCase, EditCustomerUseCase>();
    builder.Services.AddScoped<IViewCustomerByIdUseCase, ViewCustomerByIdUseCase>();
    builder.Services.AddScoped<IViewCustomersByNameUseCase, ViewCustomersByNameUseCase>();
    builder.Services.AddScoped<IViewAllCustomersUseCase, ViewAllCustomersUseCase>();
    builder.Services.AddScoped<IDeleteCustomerByIdUseCase, DeleteCustomerByIdUseCase>();
    //orders
    builder.Services.AddScoped<IAddOrderUseCase, AddOrderUseCase>();
    builder.Services.AddScoped<IEditOrderUseCase, EditOrderUseCase>();
    builder.Services.AddScoped<IViewOrderByIdUseCase, ViewOrderByIdUseCase>();
    builder.Services.AddScoped<IViewOrdersByCustomerNameUseCase, ViewOrdersByCustomerNameUseCase>();
    builder.Services.AddScoped<IViewAllOrdersUseCase, ViewAllOrdersUseCase>();
    builder.Services.AddScoped<IAddOrderListUseCase, AddOrderListUseCase>();
    builder.Services.AddScoped<IViewOrdersByStatusUseCase, ViewOrdersByStatusUseCase>();
    builder.Services.AddScoped<ICancelOrderUseCase, CancelOrderUseCase>();
    builder.Services.AddScoped<IAnnualStatusViewModel, AnnualStatusViewModel>();
    builder.Services.AddScoped<IGetOrdersExportUseCase, GetOrdersExportUseCase>();
    builder.Services.AddScoped<IDeleteOrderByIdUseCase, DeleteOrderByIdUseCase>();
    builder.Services.AddScoped<IUpdateOrdersIsCompletedUseCase, UpdateOrdersIsCompletedUseCase>();
    builder.Services.AddScoped<IUpdateOrdersIsContinuesUseCase, UpdateOrdersIsContinuesUseCase>();
    //order details
    builder.Services.AddScoped<IAddOrderDetailUseCase, AddOrderDetailUseCase>();
    builder.Services.AddScoped<IEditOrderDetailUseCase, EditOrderDetailUseCase>();
    builder.Services.AddScoped<ICancelOrderDetailUseCase, CancelOrderDetailUseCase>();
    builder.Services.AddScoped<IViewOrderDetailsByOrderIdUseCase, ViewOrderDetailsByOrderIdUseCase>();
    builder.Services.AddScoped<IPassiveOrderDetailUseCase, PassiveOrderDetailUseCase>();
    builder.Services.AddScoped<IDeleteOrderDetailByIdUseCase, DeleteOrderDetailByIdUseCase>();
    builder.Services.AddScoped<IUpdateReportListUseCase, UpdateReportListUseCase>();
    builder.Services.AddScoped<IViewAllOrderDetailsStatusByOrderIdUseCase, ViewAllOrderDetailsStatusByOrderIdUseCase>();

    // Auto Mapper Configurations
    builder.Services
        .AddAutoMapper(typeof(Program).Assembly);

    //logging
    builder.Logging.ClearProviders();
    builder.Logging.AddConsole();
    builder.Host.UseNLog();

    //Aspnetcore_Environment
    builder.WebHost.UseWebRoot("wwwroot");
    builder.WebHost.UseStaticWebAssets();

    var app = builder.Build();

    var scope = app.Services.CreateScope();
    var imsContext = scope.ServiceProvider.GetRequiredService<IMSContext>();

    // Configure the HTTP request pipeline.
    if (app.Environment.IsDevelopment())
    {
        app.UseMigrationsEndPoint();
    }
    else
    {
        app.UseExceptionHandler("/Error");
        // 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.UseStaticFiles();

    app.UseRouting();

    app.UseAuthentication();
    app.UseAuthorization();

    app.MapControllers();
    app.MapBlazorHub();
    app.MapFallbackToPage("/_Host");

    app.Run();
}
catch (Exception exception)
{
    // catch setup errors
    logger.Error(exception, "Stopped program because of exception");
    throw;
}
finally
{
    // Ensure to flush and stop internal timers/threads before application-exit (Avoid segmentation fault on Linux)
    NLog.LogManager.Shutdown();
}

ExportOrders.razor (the page I want to use DatePicker)

@page "/report"
<PageTitle>Report</PageTitle>
@using IMS.CoreBusiness
@using IMS.UseCases.Interfaces.Customer
@using IMS.UseCases.Interfaces.Order
@using IMS.UseCases.Interfaces.Vendor
@using Microsoft.AspNetCore.Components
@using System.Globalization
@using System.Linq.Dynamic.Core
@using System.Security.Claims
@using AutoMapper
@using IMS.CoreBusiness.DTO
@using IMS.UseCases.Interfaces.OrderDetail
@using IMS.UseCases.OrderDetails
@using OfficeOpenXml
@using OfficeOpenXml.DataValidation
@using OfficeOpenXml.Style
@using VendorDto = IMS.CoreBusiness.DTO.VendorDto
@using Blazorise

@inject NavigationManager NavigationManager
@inject ILogger<ExportOrders> Logger
@inject IWebHostEnvironment Environment
@inject IViewAllOrdersUseCase ViewAllOrdersUseCase
@inject IViewAllVendorsUseCase ViewAllVendorsUseCase
@inject IGetOrdersExportUseCase GetOrdersExportUseCase
@inject IViewAllCustomersUseCase ViewAllCustomersUseCase
@inject IEditOrderDetailUseCase EditOrderDetailUseCase
@inject ICancelOrderDetailUseCase CancelOrderDetailUseCase
@inject DialogService DialogService
@inject AuthenticationStateProvider _authenticationStateProvider
@inject IJSRuntime JS
@inject IMapper Mapper
@inject IHttpContextAccessor httpContextAccessor
@inject ILogger<OrderList> _logger
@implements IDisposable
<style>
    .btns {
        padding: 5px;
        width: calc(9% - 10px);
    }

    .rz-grid-table td .rz-cell-data { font-size: 10px; }

    h1 { margin-bottom: 0.1rem !important; }

    .rz-card {
        margin-bottom: 0.3rem !important;
        padding-bottom: 0.1rem !important;
    }

    .mt-5 { margin-top: 0.1rem !important; }

    .mb-3 { margin-top: 0.01rem !important; }

    .col { margin-top: 0.3px; }

    .rz-data-row { height: 11px !important; }

    td {
        padding-top: 1px !important;
        padding-bottom: 1px !important;
    }

    #popup-vendor .rz-cell-data { font-size: 16px; }

    #popup-customer .rz-cell-data { font-size: 16px; }
</style>

<RadzenCard class="mb-3">
    <RadzenDataFilter @ref="dataFilter" Auto="auto" Data="@_orders" TItem="ReportViewModel" ViewChanged="@(view => filteredOrders = view.ToList())"
                      FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive">
        <Properties>
            <MyCustomDataFilterProperty TItem="ReportViewModel" Property="ProductCode" Title="Product Code"/>
            <MyCustomDataFilterProperty TItem="ReportViewModel" Property="CustomerName" Title="Customer" FilterValue="@selectedCustomer"
                                        Type="typeof(string)" FilterOperator="FilterOperator.Equals">
                <FilterTemplate>
                    <RadzenDropDown @bind-Value="@selectedCustomer" Style="width: 100%;" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" AllowFiltering="true" Placeholder="Select..."
                                    Change="@OnSelectedCustomerChange" Data="@(_customersDto.Select(c => c.Name).ToList())" Multiple="false" AllowClear="true"/>
                </FilterTemplate>
            </MyCustomDataFilterProperty>
            <MyCustomDataFilterProperty TItem="ReportViewModel" Property="Status" Title="Order Status" FilterValue="@selectedStatus"
                                        Type="typeof(string)" FilterOperator="FilterOperator.Equals">
                <FilterTemplate>
                    <RadzenDropDown @bind-Value="@selectedStatus" Style="width: 100%;" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" AllowFiltering="true" Placeholder="Select..."
                                    Change="@OnSelectedStatusChange" Data="@(orderStatusList)" Multiple="false" AllowClear="true"/>
                </FilterTemplate>
            </MyCustomDataFilterProperty>
            <MyCustomDataFilterProperty TItem="ReportViewModel" Property="VendorName" Title="Vendor" FilterValue="@selectedVendor"
                                        Type="typeof(string)" FilterOperator="FilterOperator.Equals">
                <FilterTemplate>
                    <RadzenDropDown @bind-Value="@selectedVendor" Style="width: 100%;" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" AllowFiltering="true" Placeholder="Select..."
                                    Change="@OnSelectedVendorChange" Data="@(_vendorsDto.Select(c => c.Name).ToList())" Multiple="false" AllowClear="true"/>
                </FilterTemplate>
            </MyCustomDataFilterProperty>
            <MyCustomDataFilterProperty TItem="ReportViewModel" Property="OrderDateTime" Title="Order Date" FormatString="{0:d}"/>
            <MyCustomDataFilterProperty TItem="ReportViewModel" Property="CustomerOrderNumber" Title="Customer Order Number"/>
            <MyCustomDataFilterProperty TItem="ReportViewModel" Property="CustomerStockCode" Title="Customer Stock Code"/>
            <MyCustomDataFilterProperty TItem="ReportViewModel" Property="OrderId" Title="Order ID"/>
            <MyCustomDataFilterProperty TItem="ReportViewModel" Property="OrderDetailId" Title="Product ID"/>
            <MyCustomDataFilterProperty TItem="ReportViewModel" Property="DoneBy" Title="Employee"/>
            <MyCustomDataFilterProperty TItem="ReportViewModel" Property="UnitCost" Title="Unit Cost"/>
            <MyCustomDataFilterProperty TItem="ReportViewModel" Property="TotalSellPrice" Title="Total Sell Price"/>
            <MyCustomDataFilterProperty TItem="ReportViewModel" Property="Warehouse" Title="Warehouse"/>
            <MyCustomDataFilterProperty TItem="ReportViewModel" Property="OrderDetailStatus" Title="Order Detail Status" FilterValue="@selectedDetailStatus"
                                        Type="typeof(string)" FilterOperator="FilterOperator.Equals">
                <FilterTemplate>
                    <RadzenDropDown @bind-Value="@selectedDetailStatus" Style="width: 100%;" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" AllowFiltering="true" Placeholder="Select..."
                                    Change="@OnSelectedDetailStatusChange" Data="@(detailStatusList)" Multiple="false" AllowClear="true"/>
                </FilterTemplate>
            </MyCustomDataFilterProperty>
            <MyCustomDataFilterProperty TItem="ReportViewModel" Property="CompletionDateTime" Title="Completion Date" FormatString="{0:d}"/>
            <AuthorizeView Roles="Administrators">
                <MyCustomDataFilterProperty TItem="ReportViewModel" Property="PaymentStatus" Title="Payment Status"/>
            </AuthorizeView>
        </Properties>
    </RadzenDataFilter>
    <DatePicker @bind-Dates="selectedDates" TValue="DateTime?" InputMode="DateInputMode.Date" SelectionMode="DateInputSelectionMode.Multiple" />
</RadzenCard>

<RadzenButton Text="Export XLS" Icon="grid_on" Click="@(args => Export())" ButtonStyle="ButtonStyle.Secondary" Size="ButtonSize.Small" Class="mb-1"/>
<RadzenDataGrid @ref="_grid" AllowPaging="true" AllowSorting="true" Data="@(filteredOrders ?? _orders)" TItem="ReportViewModel"
                PagerHorizontalAlign="HorizontalAlign.Justify" ShowPagingSummary="true" AllowColumnResize="true"
                AllowVirtualization="true" Style="width: calc(100vw - 70px);" ColumnWidth="170px" PageSize="20" GridLines="DataGridGridLines.Both"
                CellRender="@CellRender" AllowColumnPicking="true">

<Columns>
<RadzenDataGridColumn TItem="ReportViewModel" Property="OrderId" Title="Order ID" Width="100px" OrderIndex="1"/>
<AuthorizeView Roles="Administrators">
    <RadzenDataGridColumn TItem="ReportViewModel" Property="CustomerName" Title="Customer" OrderIndex="2"/>
</AuthorizeView>
<RadzenDataGridColumn TItem="ReportViewModel" Property="OrderDateTime" Title="Order Date" Width="100px" OrderIndex="3">
    <Template Context="ReportViewModel">
        @($"{ReportViewModel.OrderDateTime:dd/MM/yyyy}")
    </Template>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="ReportViewModel" Property="Status" Title="Status" Width="100px" OrderIndex="4"/>
<RadzenDataGridColumn TItem="ReportViewModel" Property="DoneBy" Title="Employee" OrderIndex="5"/>
<RadzenDataGridColumn TItem="ReportViewModel" Property="OrderDetailId" Title="Product ID" OrderIndex="6"/>
<RadzenDataGridColumn TItem="ReportViewModel" Property="ProductCode" Title="Product Code" Width="100px" OrderIndex="7">
    <EditTemplate Context="orderDetail">
        <RadzenTextBox @bind-Value="orderDetail.ProductCode" Style="width: 100%; display: block" Name="ProductCode"/>
        <RadzenRequiredValidator Text="Product Code is Required!" Component="ProductCode" Popup="true" Style="position: absolute; z-index: 9999;"/>
    </EditTemplate>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="ReportViewModel" Property="VendorName" Title="Vendor" OrderIndex="8"
                      Type="typeof(IEnumerable<string>)" FilterValue="@selectedVendors" FilterOperator="FilterOperator.Contains" LogicalFilterOperator="LogicalFilterOperator.Or">
    <FilterTemplate>
        <RadzenDropDown Style="width: 100%;" @bind-Value="@selectedVendors" Placeholder="Select..."
                        Change="@OnSelectedVendorsChange" Data="@(vendorNames)" AllowClear="true" Multiple="true"/>
    </FilterTemplate>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="ReportViewModel" Property="Warehouse" Title="Warehouse" Width="100px" OrderIndex="9">
    <EditTemplate Context="detail">
        <RadzenDropDown AllowClear="true" TValue="string" Class="w-100" Data="@warehouse" @bind-Value="detail.Warehouse" Name="Warehouse"/>
        <RadzenRequiredValidator Text="Warehouse is Required!" Component="Warehouse" Popup="true" Style="position: absolute; z-index: 9999;"/>
    </EditTemplate>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="ReportViewModel" Property="Quantity" Title="Quantity" Width="100px" OrderIndex="10">
    <EditTemplate Context="orderDetail">
        <RadzenNumeric TValue="int" Min="1" @bind-Value="orderDetail.Quantity" Style="width: 100%; display: block" Name="Quantity"/>
        <RadzenRequiredValidator Text="Required!" Component="Quantity" Popup="true" Style="position: absolute; z-index: 9999;"/>
    </EditTemplate>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="ReportViewModel" Property="BuyUnitPrice" Title="Buy Unit Price" OrderIndex="11">
    <Template Context="detail">
        @switch (detail.Currency)
        {
            case "USD":
                @string.Format(new CultureInfo("en-US"), "{0}{1:0.#####}", new CultureInfo("en-US").NumberFormat.CurrencySymbol, detail.BuyUnitPrice)
                break;
            case "EURO":
                @string.Format(new CultureInfo("en-FR"), "{0}{1:0.#####}", new CultureInfo("en-FR").NumberFormat.CurrencySymbol, detail.BuyUnitPrice)
                break;
            default:
                @string.Format(new CultureInfo("tr-TR"), "{0}{1:0.#####}", new CultureInfo("tr-TR").NumberFormat.CurrencySymbol, detail.BuyUnitPrice)
                break;
        }
    </Template>
    <EditTemplate Context="detail">
        <RadzenNumeric TValue="double" Min="0" @bind-Value="detail.BuyUnitPrice" Style="width: 100%; display: block" Name="BuyUnitPrice"/>
    </EditTemplate>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="ReportViewModel" Property="CostRatio" Title="Cost Ratio" Width="100px" OrderIndex="12">
    <EditTemplate Context="detail">
        <RadzenNumeric TValue="double" Min="0" @bind-Value="detail.CostRatio" Style="width: 100%; display: block" Name="CostRatio"/>
        <RadzenRequiredValidator Text="Required!" Component="CostRatio" Popup="false" Style="position: absolute"/>
    </EditTemplate>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="ReportViewModel" Property="UnitCost" Title="Unit Cost" OrderIndex="13">
    <Template Context="detail">
        @switch (detail.Currency)
        {
            case "USD":
                @string.Format(new CultureInfo("en-US"), "{0}{1:0.#####}", new CultureInfo("en-US").NumberFormat.CurrencySymbol, detail.UnitCost)
                break;
            case "EURO":
                @string.Format(new CultureInfo("en-FR"), "{0}{1:0.#####}", new CultureInfo("en-FR").NumberFormat.CurrencySymbol, detail.UnitCost)
                break;
            default:
                @string.Format(new CultureInfo("tr-TR"), "{0}{1:0.#####}", new CultureInfo("tr-TR").NumberFormat.CurrencySymbol, detail.UnitCost)
                break;
        }
    </Template>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="ReportViewModel" Property="TotalBuyPrice" Title="Total Buy" Width="100px" OrderIndex="14">
    <Template Context="detail">
        @switch (detail.Currency)
        {
            case "USD":
                @string.Format(new CultureInfo("en-US"), "{0}{1:0.#####}", new CultureInfo("en-US").NumberFormat.CurrencySymbol, detail.TotalBuyPrice)
                break;
            case "EURO":
                @string.Format(new CultureInfo("en-FR"), "{0}{1:0.#####}", new CultureInfo("en-FR").NumberFormat.CurrencySymbol, detail.TotalBuyPrice)
                break;
            default:
                @string.Format(new CultureInfo("tr-TR"), "{0}{1:0.#####}", new CultureInfo("tr-TR").NumberFormat.CurrencySymbol, detail.TotalBuyPrice)
                break;
        }
    </Template>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="ReportViewModel" Property="SellUnitPrice" Title="Sell Unit Price" OrderIndex="15">
    <Template Context="detail">
        @switch (detail.Currency)
        {
            case "USD":
                @string.Format(new CultureInfo("en-US"), "{0}{1:0.#####}", new CultureInfo("en-US").NumberFormat.CurrencySymbol, detail.SellUnitPrice)
                break;
            case "EURO":
                @string.Format(new CultureInfo("en-FR"), "{0}{1:0.#####}", new CultureInfo("en-FR").NumberFormat.CurrencySymbol, detail.SellUnitPrice)
                break;
            default:
                @string.Format(new CultureInfo("tr-TR"), "{0}{1:0.#####}", new CultureInfo("tr-TR").NumberFormat.CurrencySymbol, detail.SellUnitPrice)
                break;
        }
    </Template>
    <EditTemplate Context="detail">
        <RadzenNumeric TValue="double?" Min="0" @bind-Value="detail.SellUnitPrice" Style="width: 100%; display: block" Name="SellUnitPrice"/>

    </EditTemplate>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="ReportViewModel" Property="TotalSellPrice" Title="Total Sell Price" OrderIndex="16">
    <Template Context="detail">
        @switch (detail.Currency)
        {
            case "USD":
                @string.Format(new CultureInfo("en-US"), "{0}{1:0.#####}", new CultureInfo("en-US").NumberFormat.CurrencySymbol, detail.TotalSellPrice)
                break;
            case "EURO":
                @string.Format(new CultureInfo("en-FR"), "{0}{1:0.#####}", new CultureInfo("en-FR").NumberFormat.CurrencySymbol, detail.TotalSellPrice)
                break;
            default:
                @string.Format(new CultureInfo("tr-TR"), "{0}{1:0.#####}", new CultureInfo("tr-TR").NumberFormat.CurrencySymbol, detail.TotalSellPrice)
                break;
        }
    </Template>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="ReportViewModel" Property="TotalUnitCost" Title="Total Unit Cost" OrderIndex="17">
    <Template Context="detail">
        @switch (detail.Currency)
        {
            case "USD":
                @string.Format(new CultureInfo("en-US"), "{0}{1:0.#####}", new CultureInfo("en-US").NumberFormat.CurrencySymbol, (detail.BuyUnitPrice * (detail.CostRatio / 100) + detail.BuyUnitPrice) * detail.Quantity)
                break;
            case "EURO":
                @string.Format(new CultureInfo("en-FR"), "{0}{1:0.#####}", new CultureInfo("en-FR").NumberFormat.CurrencySymbol, (detail.BuyUnitPrice * (detail.CostRatio / 100) + detail.BuyUnitPrice) * detail.Quantity)
                break;
            default:
                @string.Format(new CultureInfo("tr-TR"), "{0}{1:0.#####}", new CultureInfo("tr-TR").NumberFormat.CurrencySymbol, (detail.BuyUnitPrice * (detail.CostRatio / 100) + detail.BuyUnitPrice) * detail.Quantity)
                break;
        }
    </Template>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="ReportViewModel" Property="ShippingNumber" Title="Shipping Number" OrderIndex="18">
    <EditTemplate Context="orderDetail">
        <RadzenTextBox @bind-Value="orderDetail.ShippingNumber" Style="width: 100%; display: block" Name="ShippingNumber"/>
    </EditTemplate>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="ReportViewModel" Property="OrderDetailStatus" Title="Detail Status" OrderIndex="19">
    <EditTemplate Context="orderDetail">
        <RadzenDropDown AllowClear="true" TValue="string" Class="w-100" Data="@detailStatusList" @bind-Value="orderDetail.OrderDetailStatus" Name="Status"/>
        <RadzenRequiredValidator Text="Status is Required!" Component="Status" Popup="true" Style="position: absolute; z-index: 9999;"/>
    </EditTemplate>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="ReportViewModel" Property="TrackingNumber" Title="Tracking" OrderIndex="20">
    <EditTemplate Context="orderDetail">
        <RadzenTextBox @bind-Value="orderDetail.TrackingNumber" Style="width: 100%; display: block" Name="TrackingNumber"/>
    </EditTemplate>
</RadzenDataGridColumn>
<AuthorizeView Roles="Administrators">
    <RadzenDataGridColumn TItem="ReportViewModel" Property="PaymentStatus" Title="PaymentStatus" Width="100px" OrderIndex="21">
        <EditTemplate Context="orderDetail">
            <RadzenDropDown AllowClear="true" TValue="string" @bind-Value="orderDetail.PaymentStatus" Class="w-100" Data="@paymentStatus" Name="PaymentStatus"/>
        </EditTemplate>
    </RadzenDataGridColumn>
</AuthorizeView>
<RadzenDataGridColumn TItem="ReportViewModel" Property="Currency" Title="Currency" Width="100px" OrderIndex="22"/>
<RadzenDataGridColumn TItem="ReportViewModel" Property="CustomerStockCode" Title="Customer Stock Code" Width="100px" OrderIndex="23">
    <EditTemplate Context="orderDetail">
        <RadzenTextBox @bind-Value="orderDetail.CustomerStockCode" Style="width: 100%; display: block" Name="CustomerStockCode"/>
    </EditTemplate>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="ReportViewModel" Property="CustomerOrderNumber" Title="Customer OrderNumber" Width="100px" OrderIndex="24">
    <EditTemplate Context="orderDetail">
        <RadzenTextBox @bind-Value="orderDetail.CustomerOrderNumber" Style="width: 100%; display: block" Name="CustomerOrderNumber"/>
    </EditTemplate>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="ReportViewModel" Property="CompletionDateTime" Title="Completion Date" Width="100px" OrderIndex="25">
    @*<Template Context="ReportViewModel">
        @switch (ReportViewModel.OrderDetailStatus)
        {
            case "Completed":
                @($"{DateTime.Now.Date:dd/MM/yyyy}")
                break;
        }
    </Template>*@
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="ReportViewModel" Property="Description" Title="Description" OrderIndex="26">
    <EditTemplate Context="orderDetail">
        <RadzenTextBox @bind-Value="orderDetail.Description" Style="width: 100%; display: block" Name="Description"/>
    </EditTemplate>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="ReportViewModel" Context="order" Filterable="false" Sortable="false" TextAlign="TextAlign.Center" Width="120px" OrderIndex="27">
    <Template Context="order">
        <RadzenButton Icon="print" ButtonStyle="ButtonStyle.Secondary" Class="m-1" Click="@(args => OpenOrder(order))" Size="ButtonSize.Small">
        </RadzenButton>
        <RadzenButton Icon="edit" ButtonStyle="ButtonStyle.Primary" Class="m-1" Click="@(args => EditRow(order))" @onclick:stopPropagation="true" Size="ButtonSize.Small">
        </RadzenButton>
    </Template>
    <EditTemplate Context="detail">
        <RadzenButton Icon="check" ButtonStyle="ButtonStyle.Primary" Class="m-1" Click="@(args => SaveRowDetail(detail))" Size="ButtonSize.Small">
        </RadzenButton>
        <RadzenButton Icon="close" ButtonStyle="ButtonStyle.Light" Class="m-1" Click="@(args => CancelEditDetail(detail))" Size="ButtonSize.Small">
        </RadzenButton>

    </EditTemplate>
</RadzenDataGridColumn>

</Columns>
</RadzenDataGrid>

@code {
    RadzenDataGrid<ReportViewModel> _grid;
    RadzenDataFilter<ReportViewModel> dataFilter;
    IEnumerable<ReportViewModel> filteredOrders;
    bool auto = true;
    ReportViewModel reportViewModel;
    OrderDetailDto orderDetailDto;
    DateTime? _startDate;
    DateTime? _endDate;
    string? _status;
    string? _detailStatus;
    int _vendorId;
    int _customerId;
    int orderID;
    string _productCode;
    IEnumerable<string> orderStatusList = new[] { "Continues", "Cancelled", "Completed" };
    readonly List<string> detailStatusList = new() { "Order Opened", "Confirmed", "Partner Warehouse", "Shipped", "At Custom", "Warehouse", "Completed" };
    readonly List<string> paymentStatus = new() { "Pending Payment", "Paid" };
    readonly List<string> warehouse = new() { "China Warehouse", "USA Warehouse", "Private Shipping" };
    IEnumerable<ReportViewModel> _orders;
    IEnumerable<Vendor?> _vendors;
    IEnumerable<Customer?> _customers;
    IEnumerable<VendorDto?> _vendorsDto;
    IEnumerable<CustomerDto?> _customersDto;
    ClaimsPrincipal user;
    IEnumerable<string?> selectedVendors;
    bool isLoading = false;
    IQueryable<ReportViewModel?> query;
    List<string> vendorNames;
    int count;
    OrderDetail orderDetail = new();
    IQueryable<ReportViewModel?> filter;
    string selectedStatus;
    string selectedDetailStatus;
    string selectedCustomer;
    string selectedVendor;
    private bool DataLoading = false;
    IReadOnlyList<DateTime?> selectedDates;

    void OnSelectedStatusChange(object value)
    {
        if (selectedStatus != null && !selectedStatus.Any())
        {
            selectedStatus = null;
        }
    }

    void OnSelectedDetailStatusChange(object value)
    {
        if (selectedDetailStatus != null && !selectedDetailStatus.Any())
        {
            selectedDetailStatus = null;
        }
    }

    void OnSelectedCustomerChange(object value)
    {
        if (selectedCustomer != null && !selectedCustomer.Any())
        {
            selectedCustomer = null;
        }
    }

    void OnSelectedVendorChange(object value)
    {
        if (selectedVendor != null && !selectedVendor.Any())
        {
            selectedVendor = null;
        }
    }

    private async Task CancelEditDetail(ReportViewModel? reportViewModel)
    {
        //_orders = await GetOrdersExportUseCase.ExecuteAsync(_vendorId, _status, _startDate, _endDate, _productCode, _customerId, user);

        //_grid.CancelEditRow(reportViewModel);
        //await _grid.Reload();
        try
        {
            var orderDetailDto = Mapper.Map<OrderDetailDto>(reportViewModel);
            //Mapper.Map(reportViewModel, orderDetailDto);
            var orderDetailOriginal = await CancelOrderDetailUseCase.Execute(orderDetailDto);

            Mapper.Map(orderDetailOriginal, reportViewModel);
            _grid.CancelEditRow(reportViewModel);
        }
        catch (Exception e)
        {
            _logger.LogError(e.Message);
            Console.WriteLine(e);
        }

    }

    async Task SaveRowDetail(ReportViewModel reportViewModel)
    {
        if (reportViewModel != null)
        {
            orderDetail.Id = reportViewModel.OrderDetailId;
            orderDetail.Quantity = reportViewModel.Quantity;
            orderDetail.CostRatio = reportViewModel.CostRatio;
            orderDetail.Description = reportViewModel.Description;
            orderDetail.ProductCode = reportViewModel.ProductCode;
            orderDetail.ProductName = reportViewModel.ProductName;
            orderDetail.BuyUnitPrice = reportViewModel.BuyUnitPrice;
            orderDetail.ShippingNumber = reportViewModel.ShippingNumber;
            orderDetail.Status = reportViewModel.OrderDetailStatus;
            orderDetail.TotalBuyPrice = reportViewModel.TotalBuyPrice;
            orderDetail.TotalSellPrice = reportViewModel.TotalSellPrice;
            orderDetail.SellUnitPrice = reportViewModel.SellUnitPrice;
            orderDetail.UnitCost = reportViewModel.UnitCost;
            orderDetail.TrackingNumber = reportViewModel.TrackingNumber;
            orderDetail.TotalUnitCost = reportViewModel.TotalUnitCost;
            orderDetail.Currency = reportViewModel.Currency;
            orderDetail.OrderId = reportViewModel.OrderId;
            orderDetail.VendorId = reportViewModel.VendorId;
            orderDetail.Warehouse = reportViewModel.Warehouse;
            orderDetail.PaymentStatus = reportViewModel.PaymentStatus;
            orderDetail.CustomerOrderNumber = reportViewModel.CustomerOrderNumber;
            orderDetail.CustomerStockCode = reportViewModel.CustomerStockCode;

            if (reportViewModel.OrderDetailStatus == "Completed")
            {
                orderDetail.CompletionDateTime = DateTime.Now.Date;
            }
            else
            {
                orderDetail.CompletionDateTime = null;
            }
        }
        await _grid.UpdateRow(reportViewModel);
        await EditOrderDetailUseCase.ExecuteAsync(orderDetail);
        _orders = await GetOrdersExportUseCase.ExecuteAsync(_vendorId, _status, _startDate, _endDate, _productCode, _customerId, user);
        await _grid.Reload();

    }

    async Task EditRow(ReportViewModel? reportViewModel)
    {
    //reportViewModelOld = reportViewModel;
        await _grid.EditRow(reportViewModel);
    }

    protected override async Task OnInitializedAsync()
    {
        _logger.LogInformation("************ Reports Preparing... ************");

        user = (await _authenticationStateProvider.GetAuthenticationStateAsync()).User;

        if (!user.Identity.IsAuthenticated)
        {
            NavigationManager.NavigateTo("/Identity/Account/Login", false);
        }
    }

    async Task OnSelectedVendorsChange(object value)
    {
        if (selectedVendors != null && !selectedVendors.Any())
        {
            selectedVendors = null;
        }

        await _grid.FirstPage();
    }

    public void Dispose()
    {

        DialogService.Dispose();
    }

    private async Task OpenOrder(object args)
    {
        reportViewModel = (ReportViewModel)args;
        await DialogService.OpenAsync<DialogCardPage>("",
            new Dictionary<string, object>() { { "Order", reportViewModel } },
            new DialogOptions() { Width = "1000px", Height = "685px", Resizable = true, Draggable = true, ShowClose = false, CloseDialogOnEsc = true });
    }

    void CellRender(DataGridCellRenderEventArgs<ReportViewModel> args)
    {
        args.Attributes.Add("style", $"background-color: {(args.Data.TotalSellPrice <= args.Data.TotalUnitCost ? "var(--rz-secondary)" : "var(--rz-base-background-color)")};");
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await base.OnAfterRenderAsync(firstRender);

        if (firstRender)
        {
            if (DataLoading)
            {
                return;
            }

            try
            {
                DataLoading = true;
                _orders = await GetOrdersExportUseCase.ExecuteAsync(_vendorId, _status, _startDate, _endDate, _productCode, _customerId, user);

                filteredOrders = _orders.ToList();
                _vendors = await ViewAllVendorsUseCase.ExecuteAsync();
                _customers = await ViewAllCustomersUseCase.ExecuteAsync();
                _vendorsDto = Mapper.Map(_vendors, _vendorsDto);
                _customersDto = Mapper.Map(_customers, _customersDto);

            }catch (Exception e)
            {
                _logger.LogError(e.Message);
                Console.WriteLine(e);
            }

            finally
            {
                DataLoading = false;
            }

            if (_vendorsDto != null) 
                vendorNames = _vendorsDto.Select(c => c.Name).ToList();

            await dataFilter.AddFilter(new CompositeFilterDescriptor()
            {
                Property = "ProductCode",
                FilterOperator = FilterOperator.Contains
            });
            await dataFilter.AddFilter(new CompositeFilterDescriptor()
            {
                Property = "CustomerName",
                FilterOperator = FilterOperator.Equals
            });
            await dataFilter.AddFilter(new CompositeFilterDescriptor()
            {
                Property = "Status",
                FilterOperator = FilterOperator.Equals
            });
            await dataFilter.AddFilter(new CompositeFilterDescriptor()
            {
                Property = "VendorName",
                FilterOperator = FilterOperator.Equals
            });
        }
    }

    private async Task Export()
    {
        filter = _grid.View;
        ExcelPackage.LicenseContext = LicenseContext.NonCommercial;
        var stream = new MemoryStream();

        using (var package = new ExcelPackage(stream))
        {
            var workSheet = package.Workbook.Worksheets.Add("Report");
            workSheet.Protection.IsProtected = true;

            var recordIndex = 2;

            workSheet.Row(1).Style.Font.Bold = true;
            var headerCells = workSheet.Cells["A1:Z1"];
            headerCells.Style.Font.Bold = true;
            headerCells.Style.Font.Size = 13;
            headerCells.Style.Border.BorderAround(ExcelBorderStyle.Thin);
            headerCells.Style.Border.Top.Style = ExcelBorderStyle.Thin;
            headerCells.Style.Border.Left.Style = ExcelBorderStyle.Thin;
            headerCells.Style.Border.Right.Style = ExcelBorderStyle.Thin;
            headerCells.Style.Border.Bottom.Style = ExcelBorderStyle.Thin;
            headerCells.Style.Font.Color.SetColor(System.Drawing.Color.Black);
            headerCells = workSheet.Cells["A1:E1"];
    // Set their background color to DarkBlue.
            headerCells.Style.Fill.PatternType = ExcelFillStyle.Solid;
            headerCells.Style.Fill.BackgroundColor.SetColor(System.Drawing.Color.LightGray);
            headerCells = workSheet.Cells["F1:Z1"];
    // Set their background color to DarkBlue.
            headerCells.Style.Fill.PatternType = ExcelFillStyle.Solid;
            headerCells.Style.Fill.BackgroundColor.SetColor(System.Drawing.Color.LightBlue);
            workSheet.Cells[1, 1].Value = "Order Id";
            workSheet.Cells[1, 2].Value = "Customer";
            workSheet.Cells[1, 3].Value = "Order Date";
            workSheet.Cells[1, 4].Value = "Order Status";
            workSheet.Cells[1, 5].Value = "DoneBy";
            workSheet.Cells[1, 6].Value = "Product ID";
            workSheet.Cells[1, 7].Value = "Product Code";
    //workSheet.Cells[1, 8].Value = "Product";
            workSheet.Cells[1, 8].Value = "Vendor";
            workSheet.Cells[1, 9].Value = "Warehouse";
            workSheet.Cells[1, 10].Value = "Quantity";
            workSheet.Cells[1, 11].Value = "Buy Unit Price";
            workSheet.Cells[1, 12].Value = "Cost Ratio";
            workSheet.Cells[1, 13].Value = "Unit Cost";
            workSheet.Cells[1, 14].Value = "Total Buy Price";
            workSheet.Cells[1, 15].Value = "Sell Unit Price";
            workSheet.Cells[1, 16].Value = "Total Sell Price";
            workSheet.Cells[1, 17].Value = "Total Unit Cost";
            workSheet.Cells[1, 18].Value = "Order Detail Status";
            workSheet.Cells[1, 19].Value = "Tracking Number";
            workSheet.Cells[1, 20].Value = "Payment Status";
            workSheet.Cells[1, 21].Value = "Currency";
            workSheet.Cells[1, 22].Value = "Customer Stock Code";
            workSheet.Cells[1, 23].Value = "Customer Order Number";
            workSheet.Cells[1, 24].Value = "Completion Date";
            workSheet.Cells[1, 25].Value = "Customer Id";
            workSheet.Cells[1, 26].Value = "Vendor Id";

            // Set up the list of payment statuses for the drop-down
            string[] paymentStatuses = { "Paid", "Pending Payment" };
            string paymentStatusList = string.Join(",", paymentStatuses);

            foreach (var order in filter)
            {
                workSheet.Cells[recordIndex, 1].Value = order.OrderId;
                workSheet.Cells[recordIndex, 1].Style.Font.Bold = true;
                workSheet.Cells[recordIndex, 2].Value = order.CustomerName;
                workSheet.Cells[recordIndex, 3].Value = order.OrderDateTime.ToShortDateString();
                workSheet.Cells[recordIndex, 4].Value = order.Status;
                workSheet.Cells[recordIndex, 5].Value = order.DoneBy;

                workSheet.Cells[recordIndex, 6].Value = order.OrderDetailId;
                workSheet.Cells[recordIndex, 6].Style.Font.Bold = true;
                workSheet.Cells[recordIndex, 7].Value = order.ProductCode;
                workSheet.Cells[recordIndex, 7].Style.Locked = false;
                workSheet.Cells[recordIndex, 8].Value = order.VendorName;
                workSheet.Cells[recordIndex, 8].Style.Locked = false;
                workSheet.Cells[recordIndex, 9].Value = order.Warehouse;
                workSheet.Cells[recordIndex, 9].Style.Locked = false;
                workSheet.Cells[recordIndex, 10].Value = order.Quantity;
                workSheet.Cells[recordIndex, 10].Style.Locked = false;
                workSheet.Cells[recordIndex, 11].Value = order.BuyUnitPrice;
                workSheet.Cells[recordIndex, 11].Style.Locked = false;
                workSheet.Cells[recordIndex, 12].Value = order.CostRatio;
                workSheet.Cells[recordIndex, 12].Style.Locked = false;
                workSheet.Cells[recordIndex, 13].Value = order.UnitCost;
                workSheet.Cells[recordIndex, 13].Style.Locked = false;
                workSheet.Cells[recordIndex, 14].Value = order.TotalBuyPrice;
                workSheet.Cells[recordIndex, 14].Style.Locked = false;
                workSheet.Cells[recordIndex, 15].Value = order.SellUnitPrice;
                workSheet.Cells[recordIndex, 15].Style.Locked = false;
                workSheet.Cells[recordIndex, 16].Value = order.TotalSellPrice;
                workSheet.Cells[recordIndex, 16].Style.Locked = false;
                workSheet.Cells[recordIndex, 17].Value = order.TotalUnitCost;
                workSheet.Cells[recordIndex, 17].Style.Locked = false;
                workSheet.Cells[recordIndex, 18].Value = order.OrderDetailStatus;
                workSheet.Cells[recordIndex, 18].Style.Locked = false;
                workSheet.Cells[recordIndex, 19].Value = order.TrackingNumber;
                workSheet.Cells[recordIndex, 19].Style.Locked = false;

                // add a validation and set values
                var validation = workSheet.DataValidations.AddListValidation("T"+recordIndex);
                validation.ShowErrorMessage = true;
                validation.ErrorStyle = ExcelDataValidationWarningStyle.stop;
                validation.ErrorTitle = "An invalid payment status was entered";
                validation.Error = "Please select a valid payment status";
                validation.Formula.Values.Add(paymentStatusList);

                workSheet.Cells[recordIndex, 20].Value = order.PaymentStatus;
                workSheet.Cells[recordIndex, 20].Style.Locked = false;

                workSheet.Cells[recordIndex, 21].Value = order.Currency;
                workSheet.Cells[recordIndex, 22].Value = order.CustomerStockCode;
                workSheet.Cells[recordIndex, 22].Style.Locked = false;
                workSheet.Cells[recordIndex, 23].Value = order.CustomerOrderNumber;
                workSheet.Cells[recordIndex, 23].Style.Locked = false;
                workSheet.Cells[recordIndex, 24].Value = order.CompletionDateTime.ToString();
                workSheet.Cells[recordIndex, 25].Value = order.CustomerId;
                workSheet.Cells[recordIndex, 26].Value = order.VendorId;

                recordIndex++;
            }

    //Make all text fit the cells
            workSheet.Cells[workSheet.Dimension.Address].AutoFitColumns();
            await package.SaveAsync();
        }
        stream.Position = 0;
        var excelName = $"ReportList-{DateTime.Now.ToString("ddMMyyyyHHmm")}.xlsx";

        using var streamRef = new DotNetStreamReference(stream);

        await JS.InvokeVoidAsync("downloadFileFromStream", excelName, streamRef);
    }

}
steal4life commented 1 year ago

Hi, can you send us a small part of the code, it would be good if you make a small project with only that part of the code so that the error is clearer for us and we can come to a solution

raysefo commented 1 year ago

Hello, I tried to simplify the codes, hope this could help you.

@page "/report"
<PageTitle>Report</PageTitle>
@using IMS.CoreBusiness
@using IMS.UseCases.Interfaces.Order
@using Microsoft.AspNetCore.Components
@using System.Globalization
@using System.Linq.Dynamic.Core
@using System.Security.Claims
@using IMS.CoreBusiness.DTO
@using Blazorise

@inject NavigationManager NavigationManager
@inject ILogger<ExportOrders> Logger
@inject IGetOrdersExportUseCase GetOrdersExportUseCase
@inject AuthenticationStateProvider _authenticationStateProvider
@inject IHttpContextAccessor httpContextAccessor
@implements IDisposable

<RadzenCard class="mb-3">
    <RadzenDataFilter @ref="dataFilter" Auto="auto" Data="@_orders" TItem="ReportViewModel" ViewChanged="@(view => filteredOrders = view.ToList())"
                      FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive">
        <Properties>

            <MyCustomDataFilterProperty TItem="ReportViewModel" Property="OrderDateTime" Title="Order Date" FormatString="{0:d}"/>
            <MyCustomDataFilterProperty TItem="ReportViewModel" Property="CompletionDateTime" Title="Completion Date" FormatString="{0:d}"/>

        </Properties>
    </RadzenDataFilter>
    <DatePicker @bind-Dates="selectedDates" TValue="DateTime?" InputMode="DateInputMode.Date" SelectionMode="DateInputSelectionMode.Multiple" />
</RadzenCard>

@code {

    IEnumerable<ReportViewModel> filteredOrders;
    IEnumerable<ReportViewModel> _orders;
    ClaimsPrincipal user;
    private bool DataLoading = false;
    DateTime? _startDate;
    DateTime? _endDate;
    string? _status;
    int _vendorId;
    int _customerId;
    int orderID;
    string _productCode;
    IReadOnlyList<DateTime?> selectedDates;

    protected override async Task OnInitializedAsync()
    {
        _logger.LogInformation("************ Reports Preparing... ************");

        user = (await _authenticationStateProvider.GetAuthenticationStateAsync()).User;

        if (!user.Identity.IsAuthenticated)
        {
            NavigationManager.NavigateTo("/Identity/Account/Login", false);
        }
    }  

    public void Dispose()
    {

        DialogService.Dispose();
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await base.OnAfterRenderAsync(firstRender);

        if (firstRender)
        {
            if (DataLoading)
            {
                return;
            }

            try
            {
                DataLoading = true;
                _orders = await GetOrdersExportUseCase.ExecuteAsync(_vendorId, _status, _startDate, _endDate, _productCode, _customerId, user);

                filteredOrders = _orders.ToList();

            }catch (Exception e)
            {
                _logger.LogError(e.Message);
                Console.WriteLine(e);
            }

            finally
            {
                DataLoading = false;
            }            
        }
    }   

}
using IMS.Plugins.EFCore;
using IMS.WebApp.Areas.Identity;
using IMS.WebApp.Data;
using Microsoft.AspNetCore.Components.Authorization;
using Microsoft.AspNetCore.Identity;
using Microsoft.EntityFrameworkCore;
using IMS.UseCases.Interfaces.Order;
using IMS.UseCases.Orders;
using Microsoft.Extensions.DependencyInjection.Extensions;
using NLog.Web;
using Radzen;
using NLog;
using System;
using Blazorise;
using Blazorise.Bootstrap;
using Blazorise.Icons.FontAwesome;

    var builder = WebApplication.CreateBuilder(args);

    // Add services to the container.
    var connectionString = builder.Configuration.GetConnectionString("InventoryManagement");
    builder.Services.AddDbContext<ApplicationDbContext>(options =>
        options.UseSqlServer(connectionString));
    builder.Services.AddDatabaseDeveloperPageExceptionFilter();
    builder.Services.AddDefaultIdentity<IdentityUser>(options => options.SignIn.RequireConfirmedAccount = false)
        .AddRoles<IdentityRole>()
        .AddEntityFrameworkStores<ApplicationDbContext>();
    builder.Services.AddRazorPages();
    builder.Services.AddServerSideBlazor();
    builder.Services
        .AddScoped<AuthenticationStateProvider, RevalidatingIdentityAuthenticationStateProvider<IdentityUser>>();

    builder.Services.AddDbContextFactory<IMSContext>(options =>
        {
            options.EnableSensitiveDataLogging().UseSqlServer(connectionString);
        }
    );
    //Blazorise
    builder.Services
        .AddBlazorise( options =>
        {
            options.Immediate = true;
        } )
        .AddBootstrapProviders()
        .AddFontAwesomeIcons();

    //Radzen
    builder.Services.AddScoped<IGetOrdersExportUseCase, GetOrdersExportUseCase>();

    //logging
    builder.Logging.ClearProviders();
    builder.Logging.AddConsole();
    builder.Host.UseNLog();

    //Aspnetcore_Environment
    builder.WebHost.UseWebRoot("wwwroot");
    builder.WebHost.UseStaticWebAssets();

    var app = builder.Build();

    var scope = app.Services.CreateScope();
    var imsContext = scope.ServiceProvider.GetRequiredService<IMSContext>();

    // Configure the HTTP request pipeline.
    if (app.Environment.IsDevelopment())
    {
        app.UseMigrationsEndPoint();
    }
    else
    {
        app.UseExceptionHandler("/Error");
        // 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.UseStaticFiles();

    app.UseRouting();

    app.UseAuthentication();
    app.UseAuthorization();

    app.MapControllers();
    app.MapBlazorHub();
    app.MapFallbackToPage("/_Host");

    app.Run();
using System.ComponentModel.DataAnnotations;

namespace IMS.WebApp.ViewModels
{
    public class ReportViewModel
    {
        public int OrderId { get; set; }
        [DataType(DataType.Date)]
        public DateTime OrderDateTime { get; set; }
        public int CustomerId { get; set; }
        public string Status { get; set; }
        public string DoneBy { get; set; }
        public int OrderDetailId { get; set; }
        public string ProductCode { get; set; }
       public string ProductName { get; set; }
       public int Quantity { get; set; }
       public double BuyUnitPrice { get; set; }
        public double CostRatio { get; set; }
        public double UnitCost { get; set; }
        public double TotalBuyPrice { get; set; }
        public double? SellUnitPrice { get; set; }
        public double? TotalSellPrice { get; set; }
       public string? ShippingNumber { get; set; }
        public string? OrderDetailStatus { get; set; }
        public string? TrackingNumber { get; set; }
        public string? Description { get; set; }
        public string? Currency { get; set; }
        public string CustomerName { get; set; }
        public string VendorName { get; set; }
        public int VendorId { get; set; }
        public double? TotalUnitCost { get; set; }
        public int IsActive { get; set; }
        public string? Warehouse { get; set; }
        public string? PaymentStatus { get; set; }
        public string? CustomerStockCode { get; set; }
        public string? CustomerOrderNumber { get; set; }
        [DataType(DataType.DateTime)]
        public DateTime? CompletionDateTime { get; set; }

    }
}
using System.Security.Claims;
using IMS.WebApp.ViewModels;

namespace IMS.UseCases.Interfaces.Order;

public interface IGetOrdersExportUseCase
{
    Task<IEnumerable<ReportViewModel?>> ExecuteAsync(int vendorId, string status, DateTime? startDateTime, DateTime? endDateTime, string productCode, int customerId, ClaimsPrincipal user);
}
using IMS.WebApp.ViewModels;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Security.Claims;
using System.Text;
using System.Threading.Tasks;

namespace IMS.UseCases.Orders
{
    public class GetOrdersExportUseCase : IGetOrdersExportUseCase
    {
        private readonly IOrderRepository _orderRepository;

        public GetOrdersExportUseCase(IOrderRepository orderRepository)
        {
            _orderRepository = orderRepository;
        }

        public async Task<IEnumerable<ReportViewModel?>> ExecuteAsync(int vendorId, string status, DateTime? startDateTime, DateTime? endDateTime , string productCode, int customerId, ClaimsPrincipal user)
        {
            return await _orderRepository.GetOrdersForExport(vendorId, status, startDateTime, endDateTime, productCode, customerId, user);
        }
    }
}
using System.Security.Claims;
using IMS.WebApp.ViewModels;

namespace IMS.UseCases.PluginInterfaces;

public interface IOrderRepository
{
    Task<IEnumerable<ReportViewModel?>> GetOrdersForExport(int vendorId, string status, DateTime? startDateTime, DateTime? endDateTime, string productCode, int customerId, ClaimsPrincipal user);

}
using IMS.WebApp.ViewModels;
using Microsoft.EntityFrameworkCore;
using System.Security.Claims;
using System.Security.Cryptography;

namespace IMS.Plugins.EFCore
{
    public class OrderRepository : IOrderRepository
    {
        private readonly IDbContextFactory<IMSContext> _db;

        public OrderRepository(IDbContextFactory<IMSContext> db) { _db = db; }

        public async Task<IEnumerable<ReportViewModel>> GetOrdersForExport(
            int vendorId,
            string status,
            DateTime? startDateTime,
            DateTime? endDateTime,
            string productCode,
            int customerId,
            ClaimsPrincipal user)
        {
            await using var ctx = await _db.CreateDbContextAsync();
            IQueryable<ReportViewModel> result = from o in ctx.Orders
                join c in ctx.Customers on o.CustomerId equals c.Id
                join od in ctx.OrdersDetail on o.Id equals od.Order.Id
                join v in ctx.Vendors on od.Vendor.Id equals v.Id
                orderby o.Id descending
                select new ReportViewModel()
                {
                    OrderId = o.Id,
                    OrderDateTime = o.OrderDateTime.Date,
                    CustomerId = o.CustomerId,
                    Status = o.Status,
                    DoneBy = o.DoneBy,
                    OrderDetailId = od.Id,
                    ProductCode = od.ProductCode,
                    ProductName = od.ProductName,
                    Quantity = od.Quantity,
                    BuyUnitPrice = od.BuyUnitPrice,
                    CostRatio = od.CostRatio,
                    UnitCost = od.UnitCost,
                    TotalBuyPrice = od.TotalBuyPrice,
                    SellUnitPrice = od.SellUnitPrice,
                    TotalSellPrice = od.TotalSellPrice,
                    ShippingNumber = od.ShippingNumber,
                    OrderDetailStatus = od.Status,
                    TrackingNumber = od.TrackingNumber,
                    Description = od.Description,
                    Currency = od.Currency,
                    CustomerName = c.Name,
                    VendorName = v.Name,
                    VendorId = v.Id,
                    IsActive = od.IsActive,
                    TotalUnitCost = od.TotalUnitCost,
                    Warehouse = od.Warehouse,
                    PaymentStatus = od.PaymentStatus,
                    CustomerOrderNumber = od.CustomerOrderNumber,
                    CustomerStockCode = od.CustomerStockCode,
                    CompletionDateTime = od.CompletionDateTime
                };

            if (vendorId > 0)
            {
                result = result.Where(d => d.VendorId == vendorId);
            }

            if (status != null)
            {
                result = result.Where(dy => dy.Status == status);
            }

            if (startDateTime != null)
            {
                result = result.Where(
                    dt => dt.OrderDateTime >= DateTime.ParseExact(startDateTime.ToString(), "dd.MM.yyyy 00:00:00", null));
            }
            if (endDateTime != null)
            {
                result = result.Where(
                    dt => dt.OrderDateTime <= DateTime.ParseExact(endDateTime.ToString(), "dd.MM.yyyy 00:00:00", null));
            }

            if (productCode != null)
            {
                result = result.Where(dy => dy.ProductCode == productCode);
            }

            if (customerId > 0)
            {
                result = result.Where(d => d.CustomerId == customerId);
            }

            if (!user.IsInRole("Administrators"))
            {
                result = result.Where(u => u.DoneBy == user.Identity.Name);
            }

            result = result.Where(a => a.IsActive == 1); //Active Order Details

            return await result.ToListAsync();
        }

    }
}
stsrki commented 1 year ago

You're also using Radzen? My suspect is that something from Radzen is overriding the position of the calendar menu. It still shows but at the wrong position. Can you inspect in the devtools?

raysefo commented 1 year ago

How can I change the CSS of the datepicker so that it displays on the screen?

stsrki commented 1 year ago

Can you try this CSS

.flatpickr-calendar.static {
    top: unset;
}

taken from https://github.com/Megabit/Blazorise/issues/4647#issuecomment-1460682614

raysefo commented 1 year ago

Thank you for your time and support.

raysefo commented 1 year ago

One last question, is it possible to

Selected dates are string or date?

Thank you.

stsrki commented 1 year ago

Considering you have <DatePicker @bind-Dates="selectedDates" TValue="DateTime?" InputMode="DateInputMode.Date" SelectionMode="DateInputSelectionMode.Multiple" />, to clear date you should just clear the selectedDates, eg. selectedDates = null;.

Not sure what you mean by display icon but you can look at the docs for reference: https://blazorise.com/docs/components/date-picker

To set the format you can define DisplayFormat="dd/mm/yyyy".

raysefo commented 1 year ago

I mean I can't delete the selected dates because every time I click on the textbox, the calendar opens :)

<RadzenDataFilterProperty TItem="ReportViewModel" Property="OrderDateTime" Title="Order Date" FormatString="{0:d}" FilterValue="@selectedDates" 
                                      Type="typeof(IEnumerable<string?>)"
                                      FilterOperator="FilterOperator.Equals">
                <FilterTemplate>
                    <DatePicker @bind-Dates="selectedDates" TValue="DateTime?" InputMode="DateInputMode.Date" SelectionMode="DateInputSelectionMode.Multiple" 
                                DisplayFormat="dd/MM/Y" Placeholder="DD/MM/YYYY" />
                </FilterTemplate>
            </RadzenDataFilterProperty>

Ekran görüntüsü 2023-03-21 144536

raysefo commented 1 year ago

Is there an example of a selected date change action that I can follow? I want to set IReadOnlyList<DateTime?> selectedDates; intoIEnumerable<DateTime?> datesEnumerable = selectedDates.Select(x => x); when dates are selected or changed.

stsrki commented 1 year ago

When you have a two-way binding like @bind-Dates="selectedDates" the Blazor does the plumbing for you. But you can also do the manual two-way binding as follows:

<DatePicker Dates="selectedDates" DatesChanged="@OnDatesChanged" TValue="DateTime?" />

@code{
  IReadOnlyList<DateTime?> selectedDates;

  Task OnDatesChanged(IReadOnlyList<DateTime?> values)
  {
    selectedDates = values;
    return Task.CompletedTask;
  }
}
raysefo commented 1 year ago

Thank you, the other library forces me to use selectedDates as IEnumerable thats why I want to do it manually.

raysefo commented 1 year ago

I have one more question, actually a different issue. Since it is related to this topic, I didn't want to open a new one. The problem is when I select a date, it is not displayed behind the calendar. I can't multi-select dates, after selecting a date, it immediately goes to the current date on the calendar. How can I fix those issues?

Here is the code sample:

<RadzenCard class="mb-3">
    <RadzenDataFilter @ref="dataFilter" Auto="auto" Data="@_orders" TItem="ReportViewModel" ViewChanged="@(view => filteredOrders = view.ToList())"
                      FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive">
        <Properties>

            <RadzenDataFilterProperty TItem="ReportViewModel" Property="OrderDateTime" Title="Order Date" FormatString="{0:d}" 
                                      FilterValue="@filteredDates"
                                      Type="typeof(IEnumerable<DateTime>)"
                                      FilterOperator="FilterOperator.Contains">
                <FilterTemplate>
                    <DatePicker Dates="selectedDates" TValue="DateTime" InputMode="DateInputMode.Date" SelectionMode="DateInputSelectionMode.Multiple"
                                DisplayFormat="dd/MM/Y" Placeholder="DD/MM/YYYY" DatesChanged="@OnDatesChanged" />
                </FilterTemplate>
            </RadzenDataFilterProperty>

        </Properties>
    </RadzenDataFilter>

@code {
    RadzenDataFilter<ReportViewModel> dataFilter;
    IEnumerable<ReportViewModel> filteredOrders;
    bool auto = true;

    IReadOnlyList<DateTime> selectedDates = new List<DateTime>().AsReadOnly();
    IEnumerable<DateTime> filteredDates;

    Task OnDatesChanged(IReadOnlyList<DateTime> values)
    {
        filteredDates = values.Cast<DateTime>();
        return Task.CompletedTask;
    }
}

https://user-images.githubusercontent.com/859957/226986690-2e545901-9746-47dc-9ee4-11a7569ec4d1.mp4