PeerConnectiveChat/PCC.Gui/Gui/MudIse/MainMudIse.razor

@layout DevEjectionSeat

@using Color = MudBlazor.Color
@using Size = MudBlazor.Size

@inject IEventBus EventBus;
@inject IJSRuntime JSRuntime;

@* Required *@
<MudThemeProvider />
<MudPopoverProvider />

@* Needed for dialogs *@
<MudDialogProvider />

@* Needed for snackbars *@
<MudSnackbarProvider />

@{
    RenderFragment<ItemChild> RenderItemChild = child => __builder=>
    {
        <MudPaper Class="pa-1 my-1">
            <MudStack Row StretchItems="StretchItems.Start" AlignItems="AlignItems.Center" Justify="Justify.SpaceBetween" Class="mud-paper mud-paper-square stack-adorner">
                <MudText Class="hideable">@child.Name</MudText>
                <MudStack Row>
                    <MudIcon Icon="@Icons.Material.Sharp.ConnectWithoutContact"></MudIcon>
                    <MudIcon Icon="@Icons.Custom.Uncategorized.AlertSuccess"></MudIcon>
                </MudStack>
                <MudMenu Icon="@Icons.Material.Outlined.Menu" Variant="Variant.Filled" AnchorOrigin="Origin.BottomRight" TransformOrigin="Origin.TopRight" Color="Color.Default" Size="Size.Large">
                    <MudMenuItem Icon="@Icons.Material.Sharp.PrivateConnectivity">Connect</MudMenuItem>
                    <MudMenuItem Icon="@Icons.Material.Sharp.DisabledByDefault">Disconnect</MudMenuItem>
                    <MudMenuItem Icon="@Icons.Material.Sharp.Edit">Edit...</MudMenuItem>
                    <MudMenuItem Icon="@Icons.Material.Sharp.Delete" IconColor="Color.Error">Delete Trusted Peer</MudMenuItem>
                </MudMenu>
            </MudStack>
        </MudPaper>
    };

    RenderFragment<Item> RenderItem = item => __builder =>
    {
        <MudPaper Class="pa-1 my-1">
            <MudStack Row StretchItems="StretchItems.Start" AlignItems="AlignItems.Center" Justify="Justify.SpaceBetween" Class="mud-paper mud-paper-square stack-adorner">
                <MudText Class="hideable">@item.Name</MudText>
                <MudStack Row>
                    <MudIcon Icon="@Icons.Material.Sharp.Start"></MudIcon>
                    <MudIcon Icon="@Icons.Custom.Uncategorized.AlertSuccess"></MudIcon>
                </MudStack>
                <MudMenu Icon="@Icons.Material.Outlined.Menu" Variant="Variant.Filled" AnchorOrigin="Origin.BottomRight" TransformOrigin="Origin.TopRight" Color="Color.Default" Size="Size.Large">
                    <MudMenuItem Icon="@Icons.Material.Sharp.PlayArrow" >Start Listener</MudMenuItem>
                    <MudMenuItem Icon="@Icons.Material.Sharp.Stop" >Stop Listener</MudMenuItem>
                    <MudMenuItem Icon="@Icons.Material.Sharp.Edit" >Edit...</MudMenuItem>
                    <MudMenuItem Icon="@Icons.Material.Sharp.Delete" IconColor="Color.Error">Delete Local Peer</MudMenuItem>
                </MudMenu>
            </MudStack>
            <MudDropContainer T="ItemChild" Items="@item.Children" ItemsSelector="(_, _) => true" Class="flex-grow-1">
                <ChildContent>
                    <MudDropZone AllowReorder T="ItemChild">
                        <ItemRenderer>
                            @RenderItemChild(context)
                        </ItemRenderer>
                    </MudDropZone>
                </ChildContent>
            </MudDropContainer>
        </MudPaper>
    };

    RenderFragment RenderContacts = __builder =>
    {
        <MudStack StretchItems="StretchItems.End" AlignItems="AlignItems.Stretch" Spacing="1" Style="width:100%;height:100%">
            <MudStack Row AlignItems="AlignItems.Center" Justify="Justify.SpaceBetween" Spacing="1" Class="mud-paper mud-paper-square stack-adorner">
                <MudText Class="hideable">Contacts</MudText>
                <MudMenu Icon="@Icons.Material.Outlined.Menu" Variant="Variant.Filled" AnchorOrigin="Origin.BottomRight" TransformOrigin="Origin.TopRight" Color="Color.Default" Size="Size.Large">
                    <MudMenuItem Icon="@Icons.Material.Sharp.Add">Add Local Peer...</MudMenuItem>
                    <MudMenuItem Icon="@Icons.Material.Sharp.Settings">Settings...</MudMenuItem>
                    <MudMenuItem Icon="@Icons.Material.Sharp.Refresh" IconColor="Color.Warning" OnClick="@ReloadUI">Reload UI</MudMenuItem>
                    <MudMenuItem Icon="@Icons.Material.Sharp.ExitToApp" IconColor="Color.Error">Quit</MudMenuItem>
                </MudMenu>
            </MudStack>
            <MudStack Row Class="mud-background-gray stack-adorner" Style="overflow-x: auto;">
                <MudDropContainer T="Item" Items="_items" ItemsSelector="(_, _) =>true " Class="flex-grow-1">
                    <ChildContent>
                        <MudDropZone AllowReorder T="Item">
                            <ItemRenderer>
                                @RenderItem(context)
                            </ItemRenderer>
                        </MudDropZone>
                    </ChildContent>
                </MudDropContainer>
            </MudStack>
        </MudStack>
    };
}

<DevEjectionSeat>
    <Splitter Direction="SplitterDirection.Horizontal" GutterSize="5">
        <SplitterSection Size="30">
            @RenderContacts
        </SplitterSection>
        <SplitterSection Size="70">
            <Splitter Direction="SplitterDirection.Vertical" GutterSize="5">
                <SplitterSection Size="70">
                    <div>Chat!</div>
                </SplitterSection>
                <SplitterSection Size="30">
                    <div>Input!</div>
                </SplitterSection>
            </Splitter>
        </SplitterSection>
    </Splitter>
</DevEjectionSeat>

@code {

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            EventBus.Publish<UiShownEvent>();
        }
    }

    private void ReloadUI()
    {
        JSRuntime.InvokeVoidAsync("window.location.reload");
    }

    private List<Item> _items = new()
    {
        new()
        {
            Name = "Item 1",
            Children =
            {
                new ItemChild() { Name = "1A" },
                new ItemChild() { Name = "1B" },
                new ItemChild() { Name = "1C" },
            }
        },
        new()
        {
            Name = "Item 2",
            Children =
            {
                new ItemChild() { Name = "2A" },
                new ItemChild() { Name = "2B" },
                new ItemChild() { Name = "2C" },
            }
        },
        new()
        {
            Name = "Item 3",
            Children =
            {
                new ItemChild() { Name = "2A" },
                new ItemChild() { Name = "2B" },
                new ItemChild() { Name = "2C" },
            }
        },
    };

    private class Item
    {
        public string Name { get; init; }
        public List<ItemChild> Children { get; set; } = new();
    }

    private class ItemChild
    {
        public string Name { get; init; }
    }
}