CouchLog/Components/Pages/GlobalList/Dialogs/AddNewGlobalEntityDialog.razor

@@ -1,146 +1,279 @@
 @using CouchLog.Data
 @using Microsoft.EntityFrameworkCore
-
 @using Microsoft.AspNetCore.Authorization
-@using CouchLog.Data
 @using Microsoft.AspNetCore.Identity
-@using Microsoft.EntityFrameworkCore
+@using System.ComponentModel.DataAnnotations
 
 @inject ApplicationDbContext CouchLogDB
 @inject UserManager<ApplicationUser> UserManager
 @inject AuthenticationStateProvider AuthenticationStateProvider
 @inject NavigationManager NavigationManager
+@inject ISnackbar Snackbar
+
+<style>
+    .drop-zone-hover-overlay {
+        position: absolute;
+        inset: 0;
+        background: rgba(0, 0, 0, 0.45);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        opacity: 0;
+        transition: opacity .2s ease;
+        border-radius: 6px;
+    }
+    .drop-zone-wrapper:hover .drop-zone-hover-overlay {
+        opacity: 1;
+    }
+</style>
 
 <MudDialog>
     <TitleContent>
-        <MudText Typo="Typo.h6">
-            Add Global Entity
-        </MudText>
+        <MudText Typo="Typo.h6">Add Global Entity</MudText>
     </TitleContent>
-    <DialogContent>
-        <EditForm Model="@newGlobalEntity" OnSubmit="CreateNewGlobalEntity">
-            <DataAnnotationsValidator />
-            <ValidationSummary />
 
-            <div class="mb-3">
-                <label for="Title" class="form-label">Title</label>
-                <InputText id="Title" class="form-control" @bind-Value="newGlobalEntity.Title"></InputText>
-                <ValidationMessage For="@(() => newGlobalEntity.Title)"></ValidationMessage>
-            </div>
-            <div class="mb-3">
-                <label for="Type" class="form-label">Type</label>
-                <select id="Type" class="form-select" @bind="SelectedMediaTypeId">
-                    @foreach(MediaType Type in MediaTypes)
-                    {
-                        <option value="@Type.Id">@Type.Name</option>
-                    }
-                </select>
-            </div>
-            @*<div class="mb-3">
-                <label for="Picture" class="form-label">Picture</label>
-                <InputFile OnChange="@LoadImage" accept="image/*" />
-                @if (!string.IsNullOrEmpty(ImageString))
-                {
-                    <img src="@ImageString" style="max-width: 256px; max-height: 256px;" />
-                }
-            </div>*@
-            <div class="mb-3">
-                <label for="Genres" class="form-label">Genres</label>
-                @foreach(Genre Genre in Genres)
-                {
-                    <button class="btn-primary btn me-2" value="@Genre.Id" type="button" @onclick="() => AddGenreIdToGenreIdList(Genre.Id)">@Genre.Name</button>
-                }
-            </div>
-            <div class="mb-3">
-                <InputCheckbox DisplayName="isPrivate" @bind-Value="IsPrivate" ></InputCheckbox>
-            </div>
-            <button type="submit" class="btn-success btn">Create new Global Entity</button>
+    <DialogContent>
+        <EditForm EditContext="_editContext" OnSubmit="HandleSubmit">
+            <DataAnnotationsValidator />
+
+            <MudGrid Style="min-height: 400px;">
+                <MudItem xs="5" Style="display: flex;">
+                    <MudFileUpload T="IBrowserFile" @ref="_fileUpload" FilesChanged="OnPictureUploaded" Accept="image/*" Style="width: 100%; display: flex;">
+                        <ActivatorContent>
+                            <div @onclick="OpenFilePicker"
+                                 @ondragenter="@(() => _isDragOver = true)"
+                                 @ondragleave="@(() => _isDragOver = false)"
+                                 @ondragover:preventDefault="true"
+                                 @ondrop:preventDefault="true"
+                                 @ondrop="@(() => _isDragOver = false)"
+                                 style="@GetDropZoneStyle()"
+                                 class="d-flex align-center justify-center cursor-pointer drop-zone-wrapper">
+
+                                @if (_imagePreviewUrl is not null)
+                                {
+                                    <div style="position: relative; width: 100%; height: 100%;">
+                                        <img src="@_imagePreviewUrl"
+                                             alt="Preview"
+                                             style="width: 100%; height: 100%; object-fit: cover; border-radius: 6px; display: block;" />
+                                        <div class="drop-zone-hover-overlay">
+                                            <MudStack AlignItems="AlignItems.Center" Spacing="1">
+                                                <MudIcon Icon="@Icons.Material.Filled.Edit"
+                                                         Color="Color.Surface"
+                                                         Size="Size.Large" />
+                                                <MudText Typo="Typo.caption" Style="color: white;">
+                                                    Replace Image
+                                                </MudText>
+                                            </MudStack>
+                                        </div>
+                                    </div>
+                                }
+                                else
+                                {
+                                    <MudStack AlignItems="AlignItems.Center" Spacing="2">
+                                        <MudIcon Icon="@Icons.Material.Filled.CloudUpload"
+                                                 Size="Size.Large"
+                                                 Color="@(_isDragOver ? Color.Primary : Color.Secondary)" />
+                                        <MudText Typo="Typo.body2"
+                                                 Align="Align.Center"
+                                                 Color="@(_isDragOver ? Color.Primary : Color.Secondary)">
+                                            Bild hierher ziehen<br />oder klicken zum Auswählen
+                                        </MudText>
+                                    </MudStack>
+                                }
+
+                            </div>
+                        </ActivatorContent>
+                    </MudFileUpload>
+                </MudItem>
+
+                <!-- ═══ Rechte Spalte: Formular ═══ -->
+                <MudItem xs="7">
+                    <MudStack Spacing="3">
+
+                        <MudTextField @bind-Value="_form.Title"
+                                      Label="Title"
+                                      For="@(() => _form.Title)"
+                                      Variant="Variant.Outlined" />
+
+                        <MudSelect T="int"
+                                   @bind-Value="_selectedMediaTypeId"
+                                   Label="Type"
+                                   Variant="Variant.Outlined">
+                            @foreach (var type in _mediaTypes)
+                            {
+                                <MudSelectItem T="int" Value="@type.Id">@type.Name</MudSelectItem>
+                            }
+                        </MudSelect>
+
+                        <MudSelect T="int"
+                                   Label="Genres"
+                                   MultiSelection="true"
+                                   @bind-SelectedValues="_selectedGenreIds"
+                                   Variant="Variant.Outlined">
+                            @foreach (var genre in _genres)
+                            {
+                                <MudSelectItem T="int" Value="@genre.Id">@genre.Name</MudSelectItem>
+                            }
+                        </MudSelect>
+                        <MudCheckBox @bind-Value="_isPrivate" Label="Is Private" Color="Color.Primary" />
+                        <MudButton ButtonType="ButtonType.Submit" Variant="Variant.Filled" Color="Color.Success" Disabled="_isSaving" Class="mt-3">
+                            @if (_isSaving)
+                            {
+                                <MudProgressCircular Indeterminate="true" Size="Size.Small" Class="mr-2" />
+                                <span>Saving...</span>
+                            }
+                            else
+                            {
+                                <span>Create Global Entity</span>
+                            }
+                        </MudButton>
+                    </MudStack>
+                </MudItem>
+            </MudGrid>
         </EditForm>
     </DialogContent>
 
-    @*Dialog Footer*@
     <DialogActions>
-        <MudButton OnClick="Cancel">Cancel</MudButton>
+        <MudButton OnClick="Cancel" Variant="Variant.Text" Disabled="_isSaving">Cancel</MudButton>
     </DialogActions>
 </MudDialog>
 
 @code {
-    private ApplicationUser AppUser = null!;
-
     [CascadingParameter]
-    private IMudDialogInstance MudDialog { get; set; }
-    private void Cancel() => MudDialog.Cancel();
+    private IMudDialogInstance MudDialog { get; set; } = null!;
 
+    private ApplicationUser? _appUser;
+    private EditContext _editContext = null!;
 
-    private List<MediaType> MediaTypes = new();
-    private List<Genre> Genres = new();
+    private List<MediaType> _mediaTypes = new();
+    private List<Genre> _genres = new();
 
-    #region ForNewGlobalEntity
-        private GlobalEntity newGlobalEntity = new();
-        private IBrowserFile? Picture;
-        private int SelectedMediaTypeId;
-        private bool IsPrivate;
-        private List<int> GenreIds = new ();
-    #endregion
+    private GlobalEntityFormModel _form = new();
+    private MudFileUpload<IBrowserFile>? _fileUpload;
+    private IBrowserFile? _picture;
+    private string? _imagePreviewUrl;
+    private bool _isDragOver;
+    private int _selectedMediaTypeId;
+    private bool _isPrivate;
+    private bool _isSaving;
+    private IEnumerable<int> _selectedGenreIds = new HashSet<int>();
+
+    private class GlobalEntityFormModel
+    {
+        [Required(ErrorMessage = "Title is required.")]
+        [MaxLength(200, ErrorMessage = "Title may not exceed 200 characters.")]
+        public string Title { get; set; } = string.Empty;
+    }
+
+    private string GetDropZoneStyle() =>
+        "width: 100%; height: 100%; min-height: 380px; border-radius: 6px; " +
+        $"border: 2px dashed {(_isDragOver ? "var(--mud-palette-primary)" : "var(--mud-palette-lines-default)")}; " +
+        $"background-color: {(_isDragOver ? "var(--mud-palette-primary-hover)" : "transparent")}; " +
+        "transition: border-color .2s ease, background-color .2s ease;";
+
+    private Task OpenFilePicker() =>
+        _fileUpload?.OpenFilePickerAsync() ?? Task.CompletedTask;
 
     protected override async Task OnInitializedAsync()
     {
-        var AuthState = await AuthenticationStateProvider.GetAuthenticationStateAsync();
-        var User = AuthState.User;
-        AppUser = (await UserManager.GetUserAsync(User))!;
+        _editContext = new EditContext(_form);
 
-        if(AppUser == null)
+        var authState = await AuthenticationStateProvider.GetAuthenticationStateAsync();
+        _appUser = await UserManager.GetUserAsync(authState.User);
+
+        if (_appUser is null)
         {
-            throw new Exception("Not Authenticated");
+            Snackbar.Add("Not authenticated.", Severity.Error);
+            MudDialog.Cancel();
+            return;
         }
 
-        MediaTypes = await CouchLogDB.MediaType.OrderBy(Type => Type.Id).ToListAsync();
-        Genres = await CouchLogDB.Genres.OrderBy(Type => Type.Id).ToListAsync();
+        _mediaTypes = await CouchLogDB.MediaType.OrderBy(t => t.Id).ToListAsync();
+        _genres = await CouchLogDB.Genres.OrderBy(t => t.Id).ToListAsync();
+
+        if (_mediaTypes.Count > 0)
+            _selectedMediaTypeId = _mediaTypes.First().Id;
     }
 
-    private async Task CreateNewGlobalEntity()
+    private async Task OnPictureUploaded(IBrowserFile file)
     {
-        if (Picture is null)
-        {
-            throw new InvalidOperationException("No Picture selected.");
-        }
+        _picture = file;
 
-        if (AppUser is null)
-        {
-            throw new InvalidOperationException("User not loaded or not logged in.");
-        }
+        // Base64-Vorschau generieren (max. 5 MB)
+        const long maxPreviewSize = 5 * 1024 * 1024;
+        await using var stream = file.OpenReadStream(maxPreviewSize);
+        using var ms = new MemoryStream();
+        await stream.CopyToAsync(ms);
 
-        //Save Picture and Name it
-        string NewFileName = $"{newGlobalEntity.Title.Replace(" ", "-")}-{Guid.NewGuid()}{Path.GetExtension(Picture.Name)}";
-        string PicturePath = Path.Combine("wwwroot", "Pictures", NewFileName);
-        using FileStream FileStream = File.Create(PicturePath);
-        await Picture.OpenReadStream().CopyToAsync(FileStream);
-        //await Picture.OpenReadStream(maxAllowedSize: 10_000_000).CopyToAsync(FileStream);
-
-        newGlobalEntity.PicturePath = $"Pictures/{NewFileName}";
-        newGlobalEntity.CreatorId = AppUser.Id;
-        newGlobalEntity.TypeId = SelectedMediaTypeId;
-        newGlobalEntity.CreationTime = DateTime.Now;
-        newGlobalEntity.IsPrivate = IsPrivate;
-
-        CouchLogDB.Add(newGlobalEntity);
-        await CouchLogDB.SaveChangesAsync();
-
-        foreach(int GenreId in GenreIds)
-        {
-            LinkTableGlobalGenre LinkTableGlobalGenre = new() { GenreId = GenreId, GlobalEntityId = newGlobalEntity.Id };
-            CouchLogDB.Add(LinkTableGlobalGenre);
-        }
-
-        await CouchLogDB.SaveChangesAsync();
-        NavigationManager.NavigateTo(NavigationManager.Uri, true);
+        var base64 = Convert.ToBase64String(ms.ToArray());
+        _imagePreviewUrl = $"data:{file.ContentType};base64,{base64}";
     }
 
-    private void AddGenreIdToGenreIdList(int GenreId)
+    private void Cancel() => MudDialog.Cancel();
+
+    private async Task HandleSubmit(EditContext ctx)
     {
-        if (!GenreIds.Contains(GenreId))
+        if (!ctx.Validate()) return;
+
+        if (_picture is null)
         {
-            GenreIds.Add(GenreId);
+            Snackbar.Add("Please upload a picture.", Severity.Warning);
+            return;
+        }
+
+        if (_selectedMediaTypeId == 0)
+        {
+            Snackbar.Add("Please select a media type.", Severity.Warning);
+            return;
+        }
+
+        _isSaving = true;
+
+        try
+        {
+            string safeTitle = _form.Title.Replace(" ", "-");
+            string fileName = $"{safeTitle}-{Guid.NewGuid()}{Path.GetExtension(_picture.Name)}";
+            string picturePath = Path.Combine("wwwroot", "Pictures", fileName);
+
+            await using (var fs = File.Create(picturePath))
+            {
+                await _picture.OpenReadStream(maxAllowedSize: 10_000_000).CopyToAsync(fs);
+            }
+
+            var entity = new GlobalEntity
+            {
+                Title = _form.Title,
+                PicturePath = $"Pictures/{fileName}",
+                CreatorId = _appUser!.Id,
+                TypeId = _selectedMediaTypeId,
+                CreationTime = DateTime.UtcNow,
+                IsPrivate = _isPrivate
+            };
+
+            CouchLogDB.Add(entity);
+            await CouchLogDB.SaveChangesAsync();
+
+            foreach (int genreId in _selectedGenreIds)
+            {
+                CouchLogDB.Add(new LinkTableGlobalGenre
+                {
+                    GenreId = genreId,
+                    GlobalEntityId = entity.Id
+                });
+            }
+
+            await CouchLogDB.SaveChangesAsync();
+
+            Snackbar.Add("Global Entity created!", Severity.Success);
+            MudDialog.Close(DialogResult.Ok(entity.Id));
+        }
+        catch (Exception ex)
+        {
+            Snackbar.Add($"Error: {ex.Message}", Severity.Error);
+        }
+        finally
+        {
+            _isSaving = false;
         }
     }
-}
+}