KI-Kunst-Kirsten-Kloeckner/KIKunstKirstenKlöckner/Pages/Gallery.razor

@page "/gallery"

@using DataAccess.Data
@using DataAccess.Models

@inject DialogService DialogService;
@inject BildInfoData BildInfoData;
@inject WunschInfoData WunschInfoData;

<style>
    .small-image {
        width: 10em;
        height: 10em;
        z-index: auto;
        margin: 0.5em;
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
        border-radius: 1em;
        /* Gibt an, dass Änderungen an der transform-Eigenschaft innerhalb von 0.2s angewandt werden.*/
        transition: transform 0.2s;
    }

    /* Style, der angewendet wird, wenn über small-image gehovert wird. */
    .small-image:hover {
        transform: scale(1.1, 1.1);
        z-index: 100;
    }
</style>

<RadzenDataList WrapItems="@true" AllowPaging="true" PageSize="40" Data="@_bildInfos" PagerHorizontalAlign="HorizontalAlign.Left" ShowPagingSummary="true">
    <Template Context="bildInfo">
        <RadzenImage class="small-image" Src="@bildInfo.Dateiname" Click="@(args => ShowImageDialog(bildInfo))" />
    </Template>
</RadzenDataList>

@code {
    IEnumerable<BildInfoModel>? _bildInfos;

    protected override async Task OnInitializedAsync()
    {
        _bildInfos = await BildInfoData.GetAllBildInfosAsync();

        await base.OnInitializedAsync();
    }
    
    async Task ShowImageDialog(BildInfoModel bildInfo)
    {
        WunschInfoModel wunschInfo = await WunschInfoData.GetWunschInfoAsync(bildInfo.WunschId);

        List<BildInfoModel> bilderVomWunsch = _bildInfos!.Where(info => info.WunschId == wunschInfo.Id).ToList();

        var result = await DialogService.OpenAsync(wunschInfo.Wunsch, ds =>
            @<div>
                <RadzenStack Orientation="Orientation.Horizontal" Wrap="FlexWrap.Wrap">
                    <RadzenStack Orientation="Orientation.Horizontal">
                        <RadzenStack Orientation="Orientation.Vertical">
                            <RadzenImage Style="width: 400px; height: 400px;" Path="@bildInfo.Dateiname" />
                        </RadzenStack>
                        <RadzenText Text="@wunschInfo.BildBeschreibung"/>
                    </RadzenStack>
                    @foreach (var bild in bilderVomWunsch)
                    {
                        <RadzenImage class="small-image" Path="@bild.Dateiname" 
                                     Click="async () => { bildInfo = bild; DialogService.Close(); await ShowImageDialog(bild); }" />
                    }
                </RadzenStack>
            </div>, 
            new DialogOptions() { CloseDialogOnOverlayClick = true, Width = "50%" });
    }

    [Inject]
    private IWebHostEnvironment _environment { get; set; }
}