RobotApp/RobotApp.Client/Pages/Components/Mapping/MapTable.razor

@inject HttpClient Http

<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 overflow-hidden">
    <MudTable @ref="Table" Items="@MapsShow" T="MapDto" Dense Hover ReadOnly FixedHeader RowClass="cursor-pointer" Striped Elevation="10"
              ServerData="ReloadData" Loading=@IsLoading RowClassFunc="@SelectedRowClassFunc" OnRowClick="RowClickEvent" Height="90vh" HorizontalScrollbar>
        <ToolBarContent>
            <MudText Typo="Typo.h6">Maps</MudText>
        </ToolBarContent>
        <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>
                <MudMenuItem Icon="@Icons.Material.Filled.Edit" IconColor="Color.Info">Active</MudMenuItem>
                <MudMenuItem Icon="@Icons.Material.Filled.Delete" IconColor="Color.Error">Delete</MudMenuItem>
            </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>

@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;

    private MapPreview? MapPreviewRef;

    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;
            // MapPreviewRef?.SetMapPreview(MapSelected);
            return "selected";
        }
        else
        {
            return string.Empty;
        }
    }
}