Skip to content

Commit

Permalink
Feat #617 [Improve] Model Editor page - useability (#620)
Browse files Browse the repository at this point in the history
  • Loading branch information
@joao4all
joao4all authored May 17, 2024
1 parent c8c3bf1 commit 403a2f9
Show file tree
Hide file tree
Showing 13 changed files with 284 additions and 110 deletions.
66 changes: 58 additions & 8 deletions COMETwebapp.Tests/Components/ModelEditor/ElementDefinitionTableTestFixture.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,8 +38,8 @@ namespace COMETwebapp.Tests.Components.ModelEditor
using COMETwebapp.Services.Interoperability;
using COMETwebapp.ViewModels.Components.ModelEditor;
using COMETwebapp.ViewModels.Components.ModelEditor.AddParameterViewModel;
using COMETwebapp.ViewModels.Components.ModelEditor.Rows;
using COMETwebapp.ViewModels.Components.SystemRepresentation;
using COMETwebapp.ViewModels.Components.SystemRepresentation.Rows;

using DevExpress.Blazor;

Expand All @@ -66,28 +66,36 @@ public void SetUp()
{
this.context = new TestContext();
this.context.ConfigureDevExpressBlazor();
this.context.Services.AddSingleton<ISessionService, SessionService>();
this.context.Services.AddSingleton<IDraggableElementService, DraggableElementService>();

var configuration = new Mock<IConfigurationService>();
configuration.Setup(x => x.ServerConfiguration).Returns(new ServerConfiguration());
this.context.Services.AddSingleton(configuration.Object);
var elementDefinition = new ElementDefinition();

this.elementDefinitionDetailsViewModel = new ElementDefinitionDetailsViewModel();
var row = new ElementDefinitionRowViewModel
{
ElementDefinitionName = "Test1",
ElementBase = elementDefinition,
IsTopElement = true
};

this.elementDefinitionDetailsViewModel = new ElementDefinitionDetailsViewModel();
this.addParameterViewModel = new Mock<IAddParameterViewModel>();
this.addParameterViewModel.Setup(x => x.ParameterTypeSelectorViewModel).Returns(new ParameterTypeSelectorViewModel());

this.elementDefinitionTableViewModel = new Mock<IElementDefinitionTableViewModel>();
this.elementDefinitionTableViewModel.Setup(x => x.RowsTarget).Returns([new ElementDefinitionRowViewModel { ElementDefinitionName = "Test" }]);
this.elementDefinitionTableViewModel.Setup(x => x.RowsSource).Returns([new ElementDefinitionRowViewModel { ElementDefinitionName = "Test1" }]);
this.elementDefinitionTableViewModel.Setup(x => x.RowsTarget).Returns([row]);
this.elementDefinitionTableViewModel.Setup(x => x.RowsSource).Returns([row]);
this.elementDefinitionTableViewModel.Setup(x => x.ElementDefinitionDetailsViewModel).Returns(this.elementDefinitionDetailsViewModel);
this.elementDefinitionTableViewModel.Setup(x => x.AddParameterViewModel).Returns(this.addParameterViewModel.Object);
this.elementDefinitionTableViewModel.Setup(x => x.SelectedElementDefinition).Returns(new ElementDefinition());
this.elementDefinitionTableViewModel.Setup(x => x.IsLoading).Returns(false);

this.context.Services.AddSingleton(configuration.Object);
this.context.Services.AddSingleton(this.elementDefinitionTableViewModel.Object);
this.context.Services.AddSingleton<ISessionService, SessionService>();
this.context.Services.AddSingleton<IDraggableElementService, DraggableElementService>();

this.renderedComponent = this.context.RenderComponent<ElementDefinitionTable>();

this.table = this.renderedComponent.Instance;
}

Expand Down Expand Up @@ -131,6 +139,48 @@ public void VerifyComponent()
});
}

[Test]
public void VerifyElementSelection()
{
var sourceGrid = this.renderedComponent.FindComponent<DxGrid>();
var targetGrid = this.renderedComponent.FindComponents<DxGrid>()[1];

Assert.Multiple(() =>
{
Assert.That(sourceGrid.Instance.SelectedDataItem, Is.Null);
Assert.That(targetGrid.Instance.SelectedDataItem, Is.Null);
});

var firstSourceRow = sourceGrid.Find(".dxbl-grid-group-row").Children[1];
firstSourceRow.Click();

Assert.Multiple(() =>
{
this.elementDefinitionTableViewModel.Verify(x => x.SelectElement(It.IsAny<ElementBase>()), Times.Once);
Assert.That(sourceGrid.Instance.SelectedDataItem, Is.Not.Null);
Assert.That(targetGrid.Instance.SelectedDataItem, Is.Null);
});

var firstTargetRow = targetGrid.Find(".dxbl-grid-group-row").Children[1];
firstTargetRow.Click();

Assert.Multiple(() =>
{
this.elementDefinitionTableViewModel.Verify(x => x.SelectElement(It.IsAny<ElementBase>()), Times.Exactly(2));
Assert.That(sourceGrid.Instance.SelectedDataItem, Is.Null);
Assert.That(targetGrid.Instance.SelectedDataItem, Is.Not.Null);
});

firstSourceRow.Click();

Assert.Multiple(() =>
{
this.elementDefinitionTableViewModel.Verify(x => x.SelectElement(It.IsAny<ElementBase>()), Times.Exactly(3));
Assert.That(sourceGrid.Instance.SelectedDataItem, Is.Not.Null);
Assert.That(targetGrid.Instance.SelectedDataItem, Is.Null);
});
}

[Test]
public void VerifyMoveGridRow()
{
Expand Down
23 changes: 16 additions & 7 deletions ...app.Tests/ViewModels/Components/ModelEditor/ElementDefinitionTableViewModelTestFixture.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,6 @@ namespace COMETwebapp.Tests.ViewModels.Components.ModelEditor
using COMET.Web.Common.Services.SessionManagement;

using COMETwebapp.ViewModels.Components.ModelEditor;
using COMETwebapp.ViewModels.Components.SystemRepresentation.Rows;

using DynamicData;

Expand Down Expand Up @@ -99,7 +98,11 @@ public void Setup()
this.iteration = new Iteration
{
Iid = Guid.NewGuid(),
Element = { topElement, elementDefinition }
Element = { topElement, elementDefinition },
Container = new EngineeringModel
{
EngineeringModelSetup = new EngineeringModelSetup()
}
};

var iterations = new SourceList<Iteration>();
Expand Down Expand Up @@ -169,12 +172,15 @@ public void VerifyInitializeViewModel()
[Test]
public void VerifyRecordChange()
{
this.viewModel.SelectElement(this.iteration.Element[0]);

this.messageBus.SendMessage(SessionServiceEvent.SessionRefreshed, this.sessionService.Object.Session);
Assert.That(this.viewModel.RowsSource, Has.Count.EqualTo(3));

var elementDefinition = new ElementDefinition
{
Iid = Guid.NewGuid()
Iid = Guid.NewGuid(),
Name = "new element"
};

this.iteration.Element.Add(elementDefinition);
Expand All @@ -188,6 +194,11 @@ public void VerifyRecordChange()
this.messageBus.SendMessage(SessionServiceEvent.SessionRefreshed, this.sessionService.Object.Session);

Assert.That(this.viewModel.RowsSource, Has.Count.EqualTo(3));

elementDefinition.Iid = this.viewModel.SelectedElementDefinition.Iid;
this.messageBus.SendObjectChangeEvent(this.viewModel.RowsSource[0].ElementBase, EventKind.Updated);
this.messageBus.SendMessage(SessionServiceEvent.SessionRefreshed, this.sessionService.Object.Session);
Assert.That(this.viewModel.ElementDefinitionDetailsViewModel.Rows, Is.Not.Null);
}

[Test]
Expand Down Expand Up @@ -215,8 +226,7 @@ public void VerifySelectElement()
}
};

var row = new ElementDefinitionRowViewModel(elementDefinition);
this.viewModel.SelectElement(row);
this.viewModel.SelectElement(elementDefinition);
Assert.That(this.viewModel.SelectedElementDefinition, Is.EqualTo(elementDefinition));

var usage = new ElementUsage
Expand All @@ -225,8 +235,7 @@ public void VerifySelectElement()
Container = elementDefinition
};

row = new ElementDefinitionRowViewModel(usage);
this.viewModel.SelectElement(row);
this.viewModel.SelectElement(usage);
Assert.That(this.viewModel.SelectedElementDefinition, Is.EqualTo(usage.ElementDefinition));

this.viewModel.OpenAddParameterPopup();
Expand Down
4 changes: 2 additions & 2 deletions COMETwebapp/Components/Common/DataItemDetailsComponent.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ Copyright (c) 2023-2024 Starion Group S.A.

@namespace COMETwebapp.Components.Common

<div class="ps-3 data-items-panel-container">
<div class="ps-3 data-items-panel-container" style="width: @this.Width;">
<div class="data-item-details-section">
@if (this.IsSelected)
{
Expand All @@ -27,7 +27,7 @@ Copyright (c) 2023-2024 Starion Group S.A.
{
<div class="text-center py-5">
<div class="opacity-75 pb-3">
<h5>Select an item to view or edit, or click add to create</h5>
<h5>@this.NotSelectedText</h5>
<img src="images/comet-logo-black.png" class="data-item-details-image" alt="Comet Web"/>
</div>

Expand Down
12 changes: 12 additions & 0 deletions COMETwebapp/Components/Common/DataItemDetailsComponent.razor.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,5 +54,17 @@ public partial class DataItemDetailsComponent
/// </summary>
[Parameter]
public Action OnButtonClick { get; set; }

/// <summary>
/// Gets or sets the text to be displayed when the property <see cref="IsSelected"/> is set to false
/// </summary>
[Parameter]
public string NotSelectedText { get; set; } = "Select an item to view or edit, or click add to create";

/// <summary>
/// Gets or sets the width of the panel container
/// </summary>
[Parameter]
public string Width { get; set; } = "50%";
}
}
1 change: 0 additions & 1 deletion COMETwebapp/Components/Common/DataItemDetailsComponent.razor.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@
}

.data-items-panel-container {
width: 50%;
max-height: 85vh;
position: sticky;
top: 0px;
Expand Down
10 changes: 5 additions & 5 deletions COMETwebapp/Components/ModelEditor/DetailsPanelEditor.razor
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<!------------------------------------------------------------------------------
// Copyright (c) 2023-2024 Starion Group S.A.
//
// Authors: Sam Gerené, Alex Vorobiev, Alexander van Delft, Jaime Bernar, Théate Antoine, Nabil Abbar
// Authors: Sam Gerené, Alex Vorobiev, Alexander van Delft, Jaime Bernar, Théate Antoine, João Rua
//
// This file is part of CDP4-COMET WEB Community Edition
// The CDP4-COMET WEB Community Edition is the Starion Web Application implementation of ECSS-E-TM-10-25 Annex A and Annex C.
Expand Down Expand Up @@ -31,12 +31,12 @@
<DxGrid Data="this.ViewModel.Rows" ColumnResizeMode="GridColumnResizeMode.ColumnsContainer" ShowAllRows="true" >
<Columns>
<DxGridDataColumn Caption="Name" FieldName="@nameof(ElementDefinitionDetailsRowViewModel.ParameterTypeName)" />
<DxGridDataColumn Caption="Short Name" FieldName="@nameof(ElementDefinitionDetailsRowViewModel.ShortName)" Width="120" />
<DxGridDataColumn Caption="Short Name" FieldName="@nameof(ElementDefinitionDetailsRowViewModel.ShortName)" MinWidth="80" />
<DxGridDataColumn Caption="Actual Value" FieldName="@nameof(ElementDefinitionDetailsRowViewModel.ActualValue)" />
<DxGridDataColumn Caption="Published Value" FieldName="@nameof(ElementDefinitionDetailsRowViewModel.PublishedValue)" />
<DxGridDataColumn Caption="Owner" FieldName="@nameof(ElementDefinitionDetailsRowViewModel.Owner)" Width="50"/>
<DxGridDataColumn Caption="Switch" FieldName="@nameof(ElementDefinitionDetailsRowViewModel.SwitchValue)" Width="100"/>
<DxGridDataColumn Caption="Model Code" FieldName="@nameof(ElementDefinitionDetailsRowViewModel.ModelCode)" Width="300"/>
<DxGridDataColumn Caption="Owner" FieldName="@nameof(ElementDefinitionDetailsRowViewModel.Owner)" MinWidth="50"/>
<DxGridDataColumn Caption="Switch" FieldName="@nameof(ElementDefinitionDetailsRowViewModel.SwitchValue)" MinWidth="60"/>
<DxGridDataColumn Caption="Model Code" FieldName="@nameof(ElementDefinitionDetailsRowViewModel.ModelCode)" MinWidth="100"/>
</Columns>
</DxGrid>
}
105 changes: 59 additions & 46 deletions COMETwebapp/Components/ModelEditor/ElementDefinitionTable.razor
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<!------------------------------------------------------------------------------
// Copyright (c) 2023-2024 Starion Group S.A.
//
// Authors: Sam Gerené, Alex Vorobiev, Alexander van Delft, Jaime Bernar, Théate Antoine, Nabil Abbar
// Authors: Sam Gerené, Alex Vorobiev, Alexander van Delft, Jaime Bernar, Théate Antoine, João Rua
//
// This file is part of CDP4-COMET WEB Community Edition
// The CDP4-COMET WEB Community Edition is the Starion Web Application implementation of ECSS-E-TM-10-25 Annex A and Annex C.
Expand All @@ -21,60 +21,73 @@
------------------------------------------------------------------------------->

@using COMETwebapp.ViewModels.Components.SystemRepresentation.Rows;
@using COMETwebapp.ViewModels.Components.ModelEditor.Rows
@inherits SingleIterationApplicationBase<COMETwebapp.ViewModels.Components.ModelEditor.IElementDefinitionTableViewModel>;

<LoadingComponent IsVisible="@this.ViewModel.IsLoading">
<ValidationMessageComponent ValidationMessage="@(this.ErrorMessage)" />
<div style="display: flex">
<div style="width: 500px">
<h4>Target Model</h4>
<DxGrid @ref="this.FirstGrid"
Data="this.ViewModel.RowsTarget"
ShowAllRows="true"
CssClass="first-grid"
AllowSort="false"
RowClick="this.OnElementSelected"
AllowSelectRowByClick="true"
VerticalScrollBarMode="ScrollBarMode.Visible">
<Columns>
<DxGridDataColumn Caption="Element Definition" FieldName="@nameof(ElementDefinitionRowViewModel.ElementDefinitionName)" GroupIndex="0" GroupInterval="GridColumnGroupInterval.Value" />
<DxGridDataColumn Caption="Element Usage" FieldName="@nameof(ElementDefinitionRowViewModel.ElementUsageName)" />
</Columns>
</DxGrid>
</div>
<div style="width: 500px; padding-left: 10px">
<div>
<h4>Source Model</h4>
<DxGrid @ref="this.SecondGrid"
Data="this.ViewModel.RowsSource"
ShowAllRows="true"
CssClass="second-grid"
AllowSort="false"
RowClick="this.OnElementSelected"
AllowSelectRowByClick="true"
VerticalScrollBarMode="ScrollBarMode.Visible">
<Columns>
<DxGridDataColumn Caption="Element Definition" FieldName="@nameof(ElementDefinitionRowViewModel.ElementDefinitionName)" GroupIndex="0" GroupInterval="GridColumnGroupInterval.Value" />
<DxGridDataColumn Caption="Element Usage" FieldName="@nameof(ElementDefinitionRowViewModel.ElementUsageName)" />
</Columns>
</DxGrid>
<div class="model-elements-column sticky-scrollable-column">
<DxGrid @ref="this.SecondGrid"
Data="this.ViewModel.RowsSource"
ShowAllRows="true"
CssClass="second-grid"
AllowSort="false"
RowClick="this.OnElementSelected"
AllowSelectRowByClick="true"
SelectionMode="GridSelectionMode.Single"
VerticalScrollBarMode="ScrollBarMode.Visible"
CustomizeElement="@(OnCustomizeElement)">
<Columns>
<DxGridDataColumn Caption="Element Definition" FieldName="@nameof(ElementDefinitionRowViewModel.ElementDefinitionName)" GroupIndex="0" GroupInterval="GridColumnGroupInterval.Value" />
<DxGridDataColumn Caption="Element Usage" FieldName="@nameof(ElementDefinitionRowViewModel.ElementUsageName)" />
<DxGridDataColumn FieldName="@nameof(ElementDefinitionRowViewModel.IsTopElement)" Visible="false"/>
</Columns>
</DxGrid>
</div>
</div>
<div style="width: 1300px; padding-left: 40px;">
<div class="mb-2">
<h4 class="d-inline">Panel Editor</h4>
<div class="float-end">
@if (this.ViewModel.SelectedElementDefinition is not null)
{
<DxButton Id="addParameter" Text="Add Parameter" IconCssClass="oi oi-plus" Click="@(this.ViewModel.OpenAddParameterPopup)" />
}

<DxButton Id="addElementDefinition" Text="Add Element Definition" IconCssClass="oi oi-plus" Click="@this.ViewModel.OpenCreateElementDefinitionCreationPopup" />
</div>
<div style="padding-left: 10px">
<h4>Target Model</h4>
<div class="model-elements-column sticky-scrollable-column">
<DxGrid @ref="this.FirstGrid"
Data="this.ViewModel.RowsTarget"
ShowAllRows="true"
CssClass="first-grid"
AllowSort="false"
RowClick="this.OnElementSelected"
AllowSelectRowByClick="true"
SelectionMode="GridSelectionMode.Single"
VerticalScrollBarMode="ScrollBarMode.Visible"
CustomizeElement="@(OnCustomizeElement)">
<Columns>
<DxGridDataColumn Caption="Element Definition" FieldName="@nameof(ElementDefinitionRowViewModel.ElementDefinitionName)" GroupIndex="0" GroupInterval="GridColumnGroupInterval.Value"/>
<DxGridDataColumn Caption="Element Usage" FieldName="@nameof(ElementDefinitionRowViewModel.ElementUsageName)"/>
</Columns>
</DxGrid>
</div>
<div style="display:flex; justify-content: space-between;">
<div style="flex: 1;">
<DetailsPanelEditor ViewModel="this.ViewModel.ElementDefinitionDetailsViewModel" />
</div>

<div style="width: 1300px;">
<DataItemDetailsComponent IsSelected="@(this.ViewModel.SelectedElementDefinition is not null)"
NotSelectedText="Select an item to view or edit"
Width="100%">
<div class="mb-2">
<h4 class="d-inline">Panel Editor</h4>
<div class="float-end">
@if (this.ViewModel.SelectedElementDefinition is not null)
{
<DxButton Id="addParameter" Text="Add Parameter" IconCssClass="oi oi-plus" Click="@(this.ViewModel.OpenAddParameterPopup)"/>
}

<DxButton Id="addElementDefinition" Text="Add Element Definition" IconCssClass="oi oi-plus" Click="@this.ViewModel.OpenCreateElementDefinitionCreationPopup"/>
</div>
</div>
</div>
<div style="height: 73vh!important;" class="sticky-scrollable-column d-flex justify-content-between">
<DetailsPanelEditor ViewModel="this.ViewModel.ElementDefinitionDetailsViewModel"/>
</div>
</DataItemDetailsComponent>
</div>
</div>
<DxPopup CloseOnOutsideClick="false" HeaderText="Create Element Definition" @bind-Visible="@this.ViewModel.IsOnCreationMode">
Expand Down
Loading

0 comments on commit 403a2f9

Please sign in to comment.