RobotApp/RobotApp.Client/Pages/MapsManager.razor

@page "/maps-manager"
@using MudBlazor
@using RobotApp.Common.Shares.Dtos

@attribute [Authorize]
@inject HttpClient Http

<PageTitle>Map Manager</PageTitle>

<style>
    .selected {
        background-color: #3399ff !important;
    }

        .selected > td {
            color: white !important;
        }

            .selected > td .mud-input {
                color: white !important;
            }
</style>

<div class="d-flex flex-row w-100 h-100 p-2 overflow-hidden">
    <div class="d-flex h-100 flex-column flex-grow-1 pe-2">
        <div class="d-flex justify-content-between align-items-center mb-2">
            <MudTextField Value="txtSearch" T="string" Label="Search" Variant="Variant.Outlined" Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Filled.Search"
                          AdornmentColor="Color.Secondary" ValueChanged="TextSearchChanged" Style="max-width: 550px" />
            <MudButton Class="ms-3" StartIcon="@Icons.Material.Filled.Add" Variant="Variant.Filled" Color="Color.Primary" Size="Size.Large">
                NEW
            </MudButton>
        </div>
        <div class="d-flex" style="height: 92%">
            <MudTable Class="w-100" @ref="Table" Items="@MapsShow" T="MapDto" Dense=true Hover=true ReadOnly=true FixedHeader=true RowClass="cursor-pointer" Striped="true"
                      ServerData="ReloadData" Loading=@IsLoading Outlined="true" RowClassFunc="@SelectedRowClassFunc" OnRowClick="RowClickEvent" Height="95%">
                <HeaderContent>
                    <MudTh>Nr</MudTh>
                    <MudTh>Name</MudTh>
                    <MudTh>Width (m)</MudTh>
                    <MudTh>Height (m)</MudTh>
                    <MudTh>Resolution (m/px)</MudTh>
                    <MudTh>OriginX</MudTh>
                    <MudTh>OriginY</MudTh>
                    <MudTh></MudTh>
                </HeaderContent>
                <RowTemplate>
                    <MudTd DataLabel="Nr">
                        @(Table?.CurrentPage * Table?.RowsPerPage + MapsShow.IndexOf(context) + 1)
                    </MudTd>
                    <MudTd DataLabel="Name">
                        @context.Name
                    </MudTd>
                    <MudTd DataLabel="Width">
                        @context.Width
                    </MudTd>
                    <MudTd DataLabel="Height">
                        @context.Height
                    </MudTd>
                    <MudTd DataLabel="Resolution">
                        @context.Resolution
                    </MudTd>
                    <MudTd DataLabel="OriginX">
                        @context.OriginX
                    </MudTd>
                    <MudTd DataLabel="OriginY">
                        @context.OriginY
                    </MudTd>
                    <MudTd>
                        <div class="d-flex flex-row-reverse">
                            <MudMenu Icon="@Icons.Material.Filled.MoreVert" AnchorOrigin="Origin.BottomCenter">
                                <MudMenuItem Icon="@Icons.Material.Filled.Edit" IconColor="Color.Info">Edit</MudMenuItem>
                                <MudMenuItem Icon="@Icons.Material.Filled.Delete" IconColor="Color.Error">Delete</MudMenuItem>
                            </MudMenu>
                        </div>
                    </MudTd>
                </RowTemplate>
                <PagerContent>
                    <div class="d-flex w-100 flex-row-reverse">
                        <MudTablePager Style="width: 100%;" PageSizeOptions="new[] {25 , 100, 200}" />
                    </div>
                </PagerContent>
            </MudTable>
        </div>
    </div>
    <div class="map-preview">
    </div>
</div>

@code {
    private string txtSearch = "";
    private bool IsLoading = false;

    private List<MapDto> Maps = [];
    private List<MapDto> MapsShow = [];

    private int selectedRowNumber = -1;
    private MapDto MapSelected = new();

    private MudTable<MapDto>? Table; protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await base.OnAfterRenderAsync(firstRender);
        if (!firstRender) return;

        await LoadMaps();
    }

    private async Task LoadMaps()
    {
        try
        {
            IsLoading = true;
            Maps.Clear();
            StateHasChanged();

            var maps = await Http.GetFromJsonAsync<IEnumerable<MapDto>>($"api/MapsManager?txtSearch={txtSearch}");
            Maps.AddRange(maps ?? []);

            Table?.ReloadServerData();
            IsLoading = false;
            StateHasChanged();
        }
        catch
        {
            return;
        }
    }

    private void TextSearchChanged(string text)
    {
        txtSearch = text;
        Table?.ReloadServerData();
    }

    private bool FilterFunc(MapDto map)
    {
        if (string.IsNullOrWhiteSpace(txtSearch))
            return true;
        if (map.Name is not null && map.Name.Contains(txtSearch, StringComparison.OrdinalIgnoreCase))
            return true;
        if ($"{map.Name}".Contains(txtSearch))
            return true;
        return false;
    }

    private Task<TableData<MapDto>> ReloadData(TableState state, CancellationToken _)
    {
        MapsShow.Clear();
        var tasks = new List<MapDto>();
        Maps.ForEach(map =>
        {
            if (FilterFunc(map)) tasks.Add(map);
        });
        MapsShow = tasks.Skip(state.Page * state.PageSize).Take(state.PageSize).ToList();
        return Task.FromResult(new TableData<MapDto>() { TotalItems = tasks.Count, Items = MapsShow });
    }

    private void RowClickEvent(TableRowClickEventArgs<MapDto> tableRowClickEventArgs) { }

    private string SelectedRowClassFunc(MapDto element, int rowNumber)
    {
        if (selectedRowNumber == rowNumber && Table?.SelectedItem != null && !Table.SelectedItem.Equals(element))
        {
            return string.Empty;
        }
        else if (selectedRowNumber == rowNumber && Table?.SelectedItem != null && Table.SelectedItem.Equals(element))
        {
            return "selected";
        }
        else if (Table?.SelectedItem != null && Table.SelectedItem.Equals(element))
        {
            selectedRowNumber = rowNumber;
            MapSelected = element;
            // NavigationMapPreviewRef.SetMapPreview(MapSelected);
            return "selected";
        }
        else
        {
            return string.Empty;
        }
    }
}