SeemGen/Components/Pages/RadzenGridTest.razor

@page "/reordergridtest/{siteId:int}"
@using BLAIzor.Components.Layout
@using BLAIzor.Components.Partials
@using BLAIzor.Models
@using BLAIzor.Services
@using System.Collections.ObjectModel
@using Microsoft.JSInterop
@using Newtonsoft.Json
@inject ScopedContentService scopedContentService
@inject ContentEditorService contentEditorService
@inject QDrantService qDrantService
@layout AdminLayout

@* @inherits DbContextPage *@

@inject IJSRuntime JSRuntime;

<style>
    .my-class td {
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    }
</style>

@if (menuItems == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <RadzenRow Gap="1rem">
        <RadzenColumn Size="12" SizeMD="2">
            <RadzenStack Orientation="Orientation.Horizontal" JustifyContent="JustifyContent.Right">
                @{
                    <RadzenButton Click="ToggleReorder">
                        @(allowReorder? "Cancel" : "Reorder")
                    </RadzenButton>
                }

            </RadzenStack>
            <RadzenDataGrid @ref="dataGrid" TItem="MenuItem" RowSelect=@OnRowSelect AllowFiltering="true" AllowColumnResize="true" AllowAlternatingRows="false" FilterMode="FilterMode.Advanced" AllowSorting="true" PageSize="@pagesize" AllowPaging="true" PagerHorizontalAlign="HorizontalAlign.Left" ShowPagingSummary="true"
            Data="@menuItems" ColumnWidth="300px" LogicalFilterOperator="LogicalFilterOperator.Or" SelectionMode="DataGridSelectionMode.Single"
            @bind-Value=@selectedMenuItems RowRender="@RowRender">
                <Columns>
                    <RadzenDataGridColumn Property="@nameof(MenuItem.SortOrder)" Title="Sort order" Width="30px" />
                    @* <RadzenDataGridColumn Property="@nameof(MenuItem.Id)" Filterable="false" Title="ID" Frozen="true" Width="55px" TextAlign="TextAlign.Center" /> *@
                    <RadzenDataGridColumn Property="@nameof(MenuItem.Name)" Title="Name" Frozen="true" Width="130px" />
                    @* <RadzenDataGridColumn Property="@nameof(MenuItem.PointId)" Title="Point Id" Width="200px" /> *@
                    <RadzenDataGridColumn Property="@nameof(MenuItem.ShowInMainMenu)" Title="Show in menu" Width="30px" />
                </Columns>
            </RadzenDataGrid>
        </RadzenColumn>
        <RadzenColumn Size="12" SizeMD="10">
            <RadzenCard Variant="Variant.Outlined" Style="height: 100%;">
                <RadzenStack Gap="1rem">
                    <RadzenCard Variant="Variant.Text" class="rz-background-color-primary-lighter rz-color-on-primary-lighter">
                        Site:
                        @* <b>@selectedMenuItems.FirstOrDefault()?.SiteInfo.SiteName</b> *@
                    </RadzenCard>
                    <RadzenTabs>
                        <Tabs>
                            <RadzenTabsItem Text="MenuItems Details">

                                <MenuItemContentEditor Subject=@subject MenuItem="SelectedMenuItemModel" WordFile=@document SessionId="SessionId" OnContentUpdated="UpdateMenuItem" />
                                @* <RadzenDataGrid AllowFiltering="true" AllowPaging="true" AllowSorting="true" Data="@(selectedMenuItems.FirstOrDefault()?.Content)">
                                    <Columns>
                                        <RadzenDataGridColumn Property="Order.CustomerID" Title="Order" />
                                        <RadzenDataGridColumn Property="Product.ProductName" Title="Product" />
                                        <RadzenDataGridColumn Property="UnitPrice" Title="Unit Price">
                                            <Template Context="detail">
                                                @String.Format(new System.Globalization.CultureInfo("en-US"), "{0:C}", detail.UnitPrice)
                                            </Template>
                                        </RadzenDataGridColumn>
                                        <RadzenDataGridColumn Property="@nameof(OrderDetail.Quantity)" Title="Quantity" />
                                        <RadzenDataGridColumn Property="@nameof(OrderDetail.Discount)" Title="Discount">
                                            <Template Context="detail">
                                                @String.Format("{0}%", detail.Discount * 100)
                                            </Template>
                                        </RadzenDataGridColumn>
                                    </Columns>
                                </RadzenDataGrid> *@
                            </RadzenTabsItem>
                        </Tabs>
                    </RadzenTabs>
                </RadzenStack>
            </RadzenCard>
        </RadzenColumn>
    </RadzenRow>
}




@code {
    [Parameter]
    public int siteId { get; set; }
    ObservableCollection<MenuItem> menuItems;
    IList<MenuItem> selectedMenuItems;
    private string document = "";
    private string subject = "";
    public bool hasCollection = false;
    public bool MenuItemsSaved = false;
    private bool allowReorder = false;
    private int pagesize = 5;
    private List<MenuItemModel> ExtractedMenuItems = new();
    MenuItem draggedItem;
    MenuItemModel SelectedMenuItemModel = new("");
    private RadzenDataGrid<MenuItem> dataGrid;

    protected override async Task OnParametersSetAsync()
    {
        await base.OnParametersSetAsync();
        var siteInfo = await contentEditorService.GetSiteInfoByIdAsync(siteId);
        // var menuItems1 = await contentEditorService.GetMenuItemsBySiteIdAsync(1);

        menuItems = new ObservableCollection<MenuItem>(await contentEditorService.GetMenuItemsBySiteIdAsync(siteId));

        selectedMenuItems = new List<MenuItem>() { menuItems.FirstOrDefault() };

        var collectionResult = await qDrantService.GetCollectionBySiteIdAsync(siteId);
        if (!string.IsNullOrEmpty(collectionResult))
        {
            //create colection
            hasCollection = true;
            Console.Write("Has collection already");
        }
        if (menuItems.Count() > 0)
        {
            foreach (var menuItem in menuItems)
            {

                List<WebPageContent> content;
                MenuItemModel model = new MenuItemModel("");
                //try to get content from qDrant
                if (menuItem.ContentGroupId != null && menuItem.ContentItemId != null)
                {
                    var contentItem = await contentEditorService.GetContentItemByIdAsync((int)menuItem.ContentItemId);
                    
                    if (contentItem != null)
                    {
                        model.Content = contentItem.Content;
                        
                    }

                }                
                model.MenuItem.Name = menuItem.Name;

                ExtractedMenuItems.Add(model);
                // UpdateMenuItem(model);
            }


            SelectedMenuItemModel.MenuItem.Name = selectedMenuItems.FirstOrDefault().Name;
            SelectedMenuItemModel.Content = (ExtractedMenuItems.Where(x => x.MenuItem.Name == selectedMenuItems.FirstOrDefault().Name).FirstOrDefault()).Content;

            MenuItemsSaved = true;
        }

    }

    async void ToggleReorder()
    {
        if (!allowReorder)
        {
            pagesize = 20;
        }
        else
        {
            pagesize = 5;
        }
        allowReorder = !allowReorder;
    }

    void Select(MenuItem menuItem)
    {
        SelectedMenuItemModel.MenuItem.Name = menuItem.Name;
        SelectedMenuItemModel.Content = ExtractedMenuItems.Where(x => x.MenuItem.Name == menuItem.Name).FirstOrDefault().Content;
    }

    void OnRowSelect(MenuItem menuItem)
    {
        Select(menuItem);
    }

    private void UpdateMenuItem(MenuItemModel updatedItem)
    {
        var item = ExtractedMenuItems!.FirstOrDefault(i => i.MenuItem.Name == updatedItem.MenuItem.Name);
        if (item != null)
        {
            item.Content = updatedItem.Content;
        }
    }

    void RowRender(RowRenderEventArgs<MenuItem> args)
    {
        if(allowReorder)
        {
            args.Attributes.Add("title", "Drag row to reorder");
            args.Attributes.Add("style", "cursor:grab");
            args.Attributes.Add("draggable", "true");
            args.Attributes.Add("ondragover", "event.preventDefault();event.target.closest('.rz-data-row').classList.add('my-class')");
            args.Attributes.Add("ondragleave", "event.target.closest('.rz-data-row').classList.remove('my-class')");
            args.Attributes.Add("ondragstart", EventCallback.Factory.Create<DragEventArgs>(this, () => draggedItem = args.Data));
            args.Attributes.Add("ondrop", EventCallback.Factory.Create<DragEventArgs>(this, () =>
            {
                var draggedIndex = menuItems.IndexOf(draggedItem);
                var droppedIndex = menuItems.IndexOf(args.Data);
                menuItems.Remove(draggedItem);
                menuItems.Insert(draggedIndex <= droppedIndex ? droppedIndex++ : droppedIndex, draggedItem);
                foreach (var menuItemToReorder in menuItems)
                {
                    menuItemToReorder.SortOrder = menuItems.IndexOf(menuItemToReorder);
                }
                JSRuntime.InvokeVoidAsync("eval", $"document.querySelector('.my-class').classList.remove('my-class')");
            }));
        }
        
    }

}