Element dialog split & unplaced elements re-arrangement (#471)

* - move unplaced learning elements to bottom container
- separate learning elements and adaptivity elements in two different tabs

* CenterContainer - optimized width

* Full width for ElementFormContainer

* Changed display of 3d representation

* implemented fully fluid layout and styled UnplacedElementsDropZone.razor

* fixed initial scrollbar behaviour  of LearningSpaceLayoutView.razor in smallest screen size possible

* fix ui tests

* -add some tests
-add localization for unplaced elements component

* update changelog

---------

Co-authored-by: Andreas Weishaupt <andreas-93@web.de>
Co-authored-by: e01118 <e01118@th-ab.de>
Co-authored-by: splican <daniel2105@gmx.net>

Changelog.md

@@ -25,6 +25,8 @@
 - UI:
   - Optimized styling of the adaptivity dialog.
   - Optimized responsive design.
+  - The container for the unplaced learning elements is now in the bottom center below the space view.
+  - Separate sidebar panel for different types of learning elements
 
 ### Deprecated
 

Presentation/Components/ContentFiles/ContentFilesContainer.razor

@@ -1,4 +1,4 @@
-<MudPaper Class="w-full h-full max-h-[128rem] flex px-3 overflow-auto">
+<MudPaper Class="w-full h-full flex px-3 overflow-auto">
     <CascadingValue Value="@RerenderAsync" Name="RerenderContentContainer">
         <div class="flex flex-col w-full grow">
             <div>

Presentation/Components/Forms/Element/ElementFormContainer.razor

@@ -1,23 +1,21 @@
 @using Presentation.PresentationLogic.LearningWorld
 @using Presentation.PresentationLogic.Mediator
 @using Presentation.PresentationLogic.SelectedViewModels
-@using Presentation.View.LearningElement
 @using Microsoft.Extensions.Localization
 @using System.ComponentModel
 @using System.Diagnostics.CodeAnalysis
 @using Presentation.PresentationLogic.LearningContent.AdaptivityContent
-@using Presentation.PresentationLogic.LearningElement
-<MudCard Class="overflow-auto w-[70%]">
+<MudCard Class="overflow-auto w-full max-h-[128rem]">
     @if (SelectedViewModelsProvider.LearningElement == null || Mediator.OverwriteElementEdit)
     {
-        <MudTabs TabHeaderClass="sticky top-0 z-10 backdrop-blur-sm bg-adlerdeactivated/[.50]">
-            <MudTabPanel Text="@Localizer["Tab.Element.Header"]">
-                <CreateElementForm OnSubmitted="InvokeMasterLayoutStateHasChanged" AdaptivityElementMode="false"/>
-            </MudTabPanel>
-            <MudTabPanel Text="@Localizer["Tab.Adaptivity.Header"]">
-                <CreateElementForm OnSubmitted="InvokeMasterLayoutStateHasChanged" AdaptivityElementMode="true"/>
-            </MudTabPanel>
-        </MudTabs>
+        if (ContentType == typeof(IAdaptivityContentViewModel))
+        {
+            <CreateElementForm OnSubmitted="InvokeMasterLayoutStateHasChanged" AdaptivityElementMode="true"/>
+        }
+        else
+        {
+            <CreateElementForm OnSubmitted="InvokeMasterLayoutStateHasChanged" AdaptivityElementMode="false"/>
+        }
     }
     else
     {
@@ -33,20 +31,6 @@
 
 </MudCard>
 
-<div class="flex flex-col items-center w-[30%] h-full bg-adlerdeactivated rounded-lg px-1.5">
-    <p class="cursor-default text-xs 2xl:text-sm text-center mx-1 py-2 text-adlergrey-500 font-bold">@Localizer["ElementFormContainer.UnplacedElements.Title"]</p>
-    <MudDropZone T="ILearningElementViewModel" Identifier="unplacedElements"
-                 Class="overflow-y-auto overflow-x-hidden rounded-lg border-2 border-solid h-[85svh] w-full bg-white flex flex-col justify-center pt-1 px-1">
-        <ItemRenderer>
-            <DragDropLearningElement
-                LearningElement="@context"
-                OnShowLearningElementContent="@WorldPresenter.ShowSelectedElementContentAsync"
-                OnEditLearningElement="@WorldPresenter.SetSelectedLearningElement"
-                OnDeleteLearningElement="@WorldPresenter.DeleteLearningElement"
-                OnClicked="@WorldPresenter.SetSelectedLearningElement"/>
-        </ItemRenderer>
-    </MudDropZone>
-</div>
 
 @code {
 
@@ -65,6 +49,8 @@
     [Inject, AllowNull] //can never be null, DI will throw exception on unresolved types - n.stich
     private IStringLocalizer<ElementFormContainer> Localizer { get; set; }
 
+    [Parameter, EditorRequired] public Type ContentType { get; set; } = null!;
+
     private void InvokeMasterLayoutStateHasChanged()
     {
         if (TriggerMasterLayoutStateHasChanged != null) InvokeAsync(TriggerMasterLayoutStateHasChanged);
@@ -76,6 +62,17 @@
         if (SelectedViewModelsProvider.LearningWorld != null) SelectedViewModelsProvider.PropertyChanged += SelectedViewModelsProviderOnPropertyChanged;
     }
 
+    protected override void OnAfterRender(bool firstRender)
+    {
+        base.OnAfterRender(firstRender);
+        if (!firstRender) return;
+        if (SelectedViewModelsProvider.LearningElement == null
+            || ((ContentType != typeof(IAdaptivityContentViewModel) || SelectedViewModelsProvider.LearningElement.LearningContent is IAdaptivityContentViewModel)
+                && (ContentType == typeof(IAdaptivityContentViewModel) || SelectedViewModelsProvider.LearningElement.LearningContent is not AdaptivityContentViewModel))) return;
+        SelectedViewModelsProvider.SetLearningElement(null, null);
+        InvokeMasterLayoutStateHasChanged();
+    }
+
     private async void SelectedViewModelsProviderOnPropertyChanged(object? sender, PropertyChangedEventArgs e)
     {
         if (e.PropertyName == nameof(SelectedViewModelsProvider.LearningElement))

Presentation/Components/Forms/Element/UnplacedElementsDropZone.razor

@@ -0,0 +1,47 @@
+@using Presentation.PresentationLogic.LearningWorld
+@using Presentation.PresentationLogic.SelectedViewModels
+@using Presentation.View.LearningElement
+@using Microsoft.Extensions.Localization
+@using System.ComponentModel
+@using System.Diagnostics.CodeAnalysis
+@using Presentation.PresentationLogic.LearningElement
+<div class="flex flex-col items-center h-full bg-adlerdeactivated rounded-lg px-1.5">
+    <p class="cursor-default text-xs h-1/4 2xl:text-sm text-center mx-1 py-2 flex-auto basis-1/5 text-adlergrey-500 font-bold">@Localizer["UnplacedElementsDropZone.Title"]</p>
+    <MudDropZone T="ILearningElementViewModel" Identifier="unplacedElements"
+                 Class="overflow-y-auto overflow-x-hidden flex-wrap rounded-lg flex-auto basis-4/5 border-2 border-solid p-2 mb-2 gap-4 bg-white flex flex-row justify-center w-full">
+        <ItemRenderer>
+            <DragDropLearningElement
+                LearningElement="@context"
+                OnShowLearningElementContent="@WorldPresenter.ShowSelectedElementContentAsync"
+                OnEditLearningElement="@WorldPresenter.SetSelectedLearningElement"
+                OnDeleteLearningElement="@WorldPresenter.DeleteLearningElement"
+                OnClicked="@WorldPresenter.SetSelectedLearningElement"/>
+        </ItemRenderer>
+    </MudDropZone>
+</div>
+
+@code {
+
+    [Inject, AllowNull] //can never be null, DI will throw exception on unresolved types
+    public ILearningWorldPresenter WorldPresenter { get; set; }
+
+
+    [Inject, AllowNull] //can never be null, DI will throw exception on unresolved types
+    private IStringLocalizer<UnplacedElementsDropZone> Localizer { get; set; }
+
+
+    [Inject, AllowNull] //can never be null, DI will throw exception on unresolved types
+    public ISelectedViewModelsProvider SelectedViewModelsProvider { get; set; }
+
+    protected override void OnParametersSet()
+    {
+        base.OnParametersSet();
+        if (SelectedViewModelsProvider.LearningWorld != null) SelectedViewModelsProvider.PropertyChanged += SelectedViewModelsProviderOnPropertyChanged;
+    }
+
+    private async void SelectedViewModelsProviderOnPropertyChanged(object? sender, PropertyChangedEventArgs e)
+    {
+        await InvokeAsync(StateHasChanged);
+    }
+
+}

Presentation/Components/Forms/ElementModelGridSelect.razor

@@ -4,7 +4,7 @@
 @using System.Diagnostics.CodeAnalysis
 @inherits MudBaseInput<ElementModel>
 
-<div class="grid grid-cols-3 2xl:grid-cols-4">
+<div class="grid grid-cols-4 2xl:grid-cols-5">
     @foreach (var elementModel in Elements)
     {
         var classString = elementModel == Value ? "bg-adlerblue-600" : "hover:bg-adlergrey-100";

Presentation/Components/Forms/Space/SpaceFormContainer.razor

@@ -2,7 +2,7 @@
 @using Presentation.PresentationLogic.SelectedViewModels
 @using System.ComponentModel
 @using System.Diagnostics.CodeAnalysis
-<MudCard Class="overflow-auto w-full max-h-[128rem]">
+<MudCard Class="overflow-auto w-full">
     @if (SpacePresenter.LearningSpaceVm == null || _editOverwritten)
     {
         <CreateSpaceForm/>

Presentation/PresentationLogic/LearningSpace/LearningSpacePresenter.cs

@@ -6,6 +6,7 @@
 using Presentation.PresentationLogic.API;
 using Presentation.PresentationLogic.AuthoringToolWorkspace;
 using Presentation.PresentationLogic.LearningContent;
+using Presentation.PresentationLogic.LearningContent.AdaptivityContent;
 using Presentation.PresentationLogic.LearningElement;
 using Presentation.PresentationLogic.LearningWorld;
 using Presentation.PresentationLogic.Mediator;
@@ -185,7 +186,15 @@ public void CreateLearningElementInSlot(string name, ILearningContentViewModel l
     /// <inheritdoc cref="ILearningSpacePresenter.ClickedLearningElement"/>
     public void ClickedLearningElement(ILearningElementViewModel learningElementViewModel)
     {
-        _mediator.RequestOpenElementDialog();
+        if (learningElementViewModel.LearningContent is AdaptivityContentViewModel)
+        {
+            _mediator.RequestOpenAdaptivityElementDialog();
+        }
+        else
+        {
+            _mediator.RequestOpenElementDialog();
+        }
+
         _selectedViewModelsProvider.SetActiveSlotInSpace(-1, null);
         SetSelectedLearningElement(learningElementViewModel);
     }

Presentation/PresentationLogic/LearningWorld/LearningWorldPresenter.cs

@@ -6,6 +6,7 @@
 using Presentation.PresentationLogic.API;
 using Presentation.PresentationLogic.AuthoringToolWorkspace;
 using Presentation.PresentationLogic.LearningContent;
+using Presentation.PresentationLogic.LearningContent.AdaptivityContent;
 using Presentation.PresentationLogic.LearningElement;
 using Presentation.PresentationLogic.LearningPathway;
 using Presentation.PresentationLogic.LearningSpace;
@@ -153,7 +154,7 @@ public void SaveLearningWorld()
             return;
 
         //Nullability of LearningWorldVm is checked in CheckLearningWorldNotNull
-        _presentationLogic.SaveLearningWorld((LearningWorldViewModel)LearningWorldVm!);
+        _presentationLogic.SaveLearningWorld((LearningWorldViewModel) LearningWorldVm!);
     }
 
     #endregion
@@ -317,7 +318,7 @@ public async Task SaveSelectedLearningSpaceAsync()
         try
         {
             await _presentationLogic.SaveLearningSpaceAsync(
-                (LearningSpaceViewModel)_selectedViewModelsProvider.LearningObjectInPathWay);
+                (LearningSpaceViewModel) _selectedViewModelsProvider.LearningObjectInPathWay);
         }
         catch (SerializationException e)
         {
@@ -422,7 +423,7 @@ public void SetOnHoveredObjectInPathWay(IObjectInPathWayViewModel sourceObject,
         var objectAtPosition = LearningWorldVm?.LearningSpaces.FirstOrDefault(ls =>
                                    ls.PositionX <= x && ls.PositionX + 66 >= x && ls.PositionY <= y &&
                                    ls.PositionY + 64 >= y) ??
-                               (IObjectInPathWayViewModel?)LearningWorldVm?.PathWayConditions.FirstOrDefault(lc =>
+                               (IObjectInPathWayViewModel?) LearningWorldVm?.PathWayConditions.FirstOrDefault(lc =>
                                    lc.PositionX <= x && lc.PositionX + 76 >= x && lc.PositionY <= y &&
                                    lc.PositionY + 43 >= y);
         return objectAtPosition;
@@ -523,7 +524,14 @@ public void SetSelectedLearningElement(ILearningElementViewModel learningElement
         }
 
         _selectedViewModelsProvider.SetLearningElement(learningElement, null);
-        _mediator.RequestOpenElementDialog();
+        if (learningElement.LearningContent is AdaptivityContentViewModel)
+        {
+            _mediator.RequestOpenAdaptivityElementDialog();
+        }
+        else
+        {
+            _mediator.RequestOpenElementDialog();
+        }
     }
 
     /// <inheritdoc cref="ILearningWorldPresenter.EditLearningElement"/>
@@ -565,7 +573,7 @@ public async Task ShowSelectedElementContentAsync(ILearningElementViewModel lear
         SetSelectedLearningElement(learningElement);
         try
         {
-            await _presentationLogic.ShowLearningElementContentAsync((LearningElementViewModel)learningElement);
+            await _presentationLogic.ShowLearningElementContentAsync((LearningElementViewModel) learningElement);
         }
         catch (ArgumentOutOfRangeException e)
         {

Presentation/PresentationLogic/Mediator/IMediator.cs

@@ -8,22 +8,32 @@ public interface IMediator : INotifyPropertyChanged
     /// Indicates whether the world dialog is open.
     /// </summary>
     bool WorldDialogOpen { get; }
+
     /// <summary>
     /// Indicates whether the space dialog is open.
     /// </summary>
     bool SpaceDialogOpen { get; }
+
     /// <summary>
     /// Indicates whether the element dialog is open.
     /// </summary>
     bool ElementDialogOpen { get; }
+
+    /// <summary>
+    /// Indicates whether the element dialog is open.
+    /// </summary>
+    bool AdaptivityElementDialogOpen { get; }
+
     /// <summary>
     /// Indicates whether the content dialog is open.
     /// </summary>
     bool ContentDialogOpen { get; }
+
     /// <summary>
     /// Indicates whether the world view is open.
     /// </summary>
     bool WorldPathwayViewOpen { get; }
+
     /// <summary>
     /// Indicates whether the world overview is open.
     /// </summary>
@@ -35,50 +45,72 @@ public interface IMediator : INotifyPropertyChanged
     /// Requests the opening of the world dialog.
     /// </summary>
     void RequestOpenWorldDialog();
+
     /// <summary>
     /// Requests the opening of the space dialog.
     /// </summary>
     void RequestOpenSpaceDialog();
+
     /// <summary>
     /// Requests the opening of the element dialog.
     /// </summary>
     void RequestOpenElementDialog();
+
+    /// <summary>
+    /// Requests the opening of the adaptivity element dialog.
+    /// </summary>
+    void RequestOpenAdaptivityElementDialog();
+
     /// <summary>
     /// Requests the opening of the element dialog with the new element dialog being forced.
     /// </summary>
     void RequestOpenNewElementDialog();
+
     /// <summary>
     /// Requests the opening of the content dialog.
     /// </summary>
     void RequestOpenContentDialog();
+
     /// <summary>
     /// Requests the opening of the world view.
     /// </summary>
     void RequestOpenPathwayView();
+
     /// <summary>
     /// Requests the opening of the world overview.
     /// </summary>
     void RequestOpenWorldTreeView();
+
     /// <summary>
     /// Requests toggling the world dialog.
     /// </summary>
     void RequestToggleWorldDialog();
+
     /// <summary>
     /// Requests toggling the space dialog.
     /// </summary>
     void RequestToggleSpaceDialog();
+
     /// <summary>
     /// Requests toggling the element dialog.
     /// </summary>
     void RequestToggleElementDialog();
+
+    /// <summary>
+    /// Requests toggling the adaptivity element dialog.
+    /// </summary>
+    void RequestToggleAdaptivityElementDialog();
+
     /// <summary>
     /// Requests toggling the content dialog.
     /// </summary>
     void RequestToggleContentDialog();
+
     /// <summary>
     /// Requests toggling the world view.
     /// </summary>
     void RequestToggleWorldPathwayView();
+
     /// <summary>
     /// Requests toggling the world overview.
     /// </summary>