Improvements to the InputEditor

.gitignore

@@ -349,3 +349,6 @@ MigrationBackup/
 # Ionide (cross platform F# VS Code tools) working folder
 .ionide/
 /COMETwebapp/Tools
+
+# Jetbrains folders
+.idea/

COMET.Web.Common.Tests/Components/BookEditor/EditotPopupTestFixture.cs

@@ -31,6 +31,7 @@ namespace COMET.Web.Common.Tests.Components.BookEditor
 
     using COMET.Web.Common.Components;
     using COMET.Web.Common.Components.BookEditor;
+    using COMET.Web.Common.Services.SessionManagement;
     using COMET.Web.Common.Test.Helpers;
     using COMET.Web.Common.ViewModels.Components.BookEditor;
 
@@ -40,6 +41,7 @@ namespace COMET.Web.Common.Tests.Components.BookEditor
     using DynamicData;
 
     using Microsoft.AspNetCore.Components;
+    using Microsoft.Extensions.DependencyInjection;
 
     using Moq;
 
@@ -58,12 +60,15 @@ public class EditotPopupTestFixture
         private List<Category> availableCategories;
         private bool onCancelCalled;
         private bool onAcceptCalled;
+        private Mock<ISessionService> sessionService;
 
         [SetUp]
         public void Setup()
         {
             this.context = new TestContext();
             this.context.ConfigureDevExpressBlazor();
+            this.sessionService = new Mock<ISessionService>();
+            this.context.Services.AddSingleton(this.sessionService.Object);
 
             this.book = new Book();
 

COMET.Web.Common.Tests/Components/BookEditor/InputEditorTestFixture.cs

@@ -24,18 +24,28 @@
 
 namespace COMET.Web.Common.Tests.Components.BookEditor
 {
+    using System.Text.Json;
+
     using Bunit;
 
     using CDP4Common.ReportingData;
     using CDP4Common.SiteDirectoryData;
 
+    using COMET.Web.Common.Components;
     using COMET.Web.Common.Components.BookEditor;
+    using COMET.Web.Common.Services.SessionManagement;
     using COMET.Web.Common.Test.Helpers;
 
     using DevExpress.Blazor;
-
+
+    using Microsoft.Extensions.DependencyInjection;
+
+    using Moq;
+
     using NUnit.Framework;
 
+    using RichardSzalay.MockHttp;
+
     using TestContext = Bunit.TestContext;
 
     [TestFixture]
@@ -46,12 +56,26 @@ public class InputEditorTestFixture
         private Book book;
         private List<DomainOfExpertise> activeDomains;
         private List<Category> availableCategories;
-
+        private Mock<ISessionService> sessionService;
+        private MockHttpMessageHandler mockHttpMessageHandler;
+        private HttpClient httpClient;
+        private const string BookName = "Book Example";
+        private const string BookShortName = "bookExample";
+
         [SetUp]
         public void Setup()
         {
             this.context = new TestContext();
             this.context.ConfigureDevExpressBlazor();
+            this.sessionService = new Mock<ISessionService>();
+            this.context.Services.AddSingleton(this.sessionService.Object);
+            this.mockHttpMessageHandler = new MockHttpMessageHandler();
+            this.httpClient = this.mockHttpMessageHandler.ToHttpClient();
+            this.httpClient.BaseAddress = new Uri("http://localhost/");
+            this.context.Services.AddScoped(_ => this.httpClient);
+            var httpResponse = new HttpResponseMessage();
+            httpResponse.Content = new StringContent("{\n  \"ShowName\": true,\n  \"ShowShortName\" : true \n}\n");
+            this.mockHttpMessageHandler.When(HttpMethod.Get, "/_content/CDP4.WEB.Common/BookInputConfiguration.json").Respond(_ => httpResponse);
 
             this.activeDomains = new List<DomainOfExpertise>
             {
@@ -65,8 +89,8 @@ public void Setup()
 
             this.book = new Book()
             {
-                Name = "Book Example",
-                ShortName = "bookExample",
+                Name = BookName,
+                ShortName = BookShortName,
                 Owner = this.activeDomains.First(),
                 Category = this.availableCategories
             };
@@ -82,33 +106,27 @@ public void Setup()
         [Test]
         public void VerifyComponent()
         {
-            var basicTab = this.component.Find(".basic-tab");
-            basicTab.Click();
-
             var textboxes = this.component.FindComponents<DxTextBox>();
             var combobox = this.component.FindComponent<DxComboBox<DomainOfExpertise, DomainOfExpertise>>();
+            var categoryComboBox = this.component.FindComponent<MultiComboBox<Category>>();
 
-            var nameTextbox = textboxes[0];
-            var shortNameTextbox = textboxes[1];
-
+            var nameTextbox = textboxes.FirstOrDefault(x => x.Instance.Text == BookName);
+            var shortNameTextbox = textboxes.FirstOrDefault(x => x.Instance.Text == BookShortName);
+            
             Assert.Multiple(() =>
             {
-                Assert.That(nameTextbox.Instance.Text, Is.EqualTo("Book Example"));
-                Assert.That(shortNameTextbox.Instance.Text, Is.EqualTo("bookExample"));
+                Assert.IsNotNull(nameTextbox);
+                Assert.IsNotNull(shortNameTextbox);
                 Assert.That(combobox.Instance.Value, Is.EqualTo(this.activeDomains.First()));
+                Assert.That(categoryComboBox.Instance, Is.Not.Null);
             });
-
-            var categoryTab = this.component.Find(".category-tab");
-            categoryTab.Click();
-
+
             this.component.Render();
-
-            var listbox = this.component.FindComponent<DxListBox<Category, Category>>();
-
+
             Assert.Multiple(() =>
             {
-                Assert.That(listbox.Instance.Data, Is.EquivalentTo(this.availableCategories));
-                Assert.That(listbox.Instance.Values, Is.EquivalentTo(this.availableCategories));
+                Assert.That(categoryComboBox.Instance.Data, Is.EquivalentTo(this.availableCategories));
+                Assert.That(categoryComboBox.Instance.Values, Is.EquivalentTo(this.availableCategories));
             });
         }
     }

COMET.Web.Common.Tests/Components/MultiComboBoxTestFixture.cs

@@ -0,0 +1,109 @@
+// --------------------------------------------------------------------------------------------------------------------
+//  <copyright file="MultiComboBoxTestFixture.cs" company="RHEA System S.A.">
+//     Copyright (c) 2023 RHEA System S.A.
+// 
+//     Authors: Sam Gerené, Alex Vorobiev, Alexander van Delft, Jaime Bernar, Théate Antoine
+// 
+//     This file is part of COMET WEB Community Edition
+//     The COMET WEB Community Edition is the RHEA Web Application implementation of ECSS-E-TM-10-25 Annex A and Annex C.
+// 
+//     The COMET WEB Community Edition is free software; you can redistribute it and/or
+//     modify it under the terms of the GNU Affero General Public
+//     License as published by the Free Software Foundation; either
+//     version 3 of the License, or (at your option) any later version.
+// 
+//     The COMET WEB Community Edition is distributed in the hope that it will be useful,
+//     but WITHOUT ANY WARRANTY; without even the implied warranty of
+//     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+//    Affero General Public License for more details.
+// 
+//    You should have received a copy of the GNU Affero General Public License
+//    along with this program.  If not, see <http://www.gnu.org/licenses/>.
+//  </copyright>
+//  --------------------------------------------------------------------------------------------------------------------
+
+namespace COMET.Web.Common.Tests.Components
+{
+    using Bunit;
+
+    using CDP4Common.DTO;
+
+    using COMET.Web.Common.Components;
+    using COMET.Web.Common.Test.Helpers;
+
+    using DevExpress.Blazor;
+
+    using Microsoft.AspNetCore.Components;
+
+    using TestContext = Bunit.TestContext;
+
+    using NUnit.Framework;
+
+    [TestFixture]
+    public class MultiComboBoxTestFixture
+    {
+        private TestContext context;
+        private IRenderedComponent<MultiComboBox<Category>> component;
+        private List<Category> availableCategories;
+
+        [SetUp]
+        public void SetUp()
+        {
+            this.context = new TestContext();
+            this.context.ConfigureDevExpressBlazor();
+
+            this.availableCategories = new List<Category>
+            {
+                new() { Name = "Category" },
+                new() { Name = "Category2" },
+                new() { Name = "Category3" },
+                new() { Name = "Category4" },
+                new() { Name = "Category5" },
+            };
+
+            this.component = this.context.RenderComponent<MultiComboBox<Category>>(parameter =>
+            {
+                parameter.Add(p => p.Data, this.availableCategories);
+                parameter.Add(p => p.Values, this.availableCategories);
+                parameter.Add(p => p.ShowCheckBoxes, true);
+                parameter.Add(p => p.MaxNumberOfChips, 2);
+                parameter.Add(p => p.Enabled, true);
+
+                parameter.Add(p => p.EditorTextTemplate, builder =>
+                {
+                    builder.OpenElement(0, "span");
+                    builder.AddContent(1, ""); 
+                    builder.CloseElement();
+                });
+
+                parameter.Add(p => p.RowTemplate, value => value.Name);
+            });
+        }
+
+        [Test]
+        public async Task VerifyComponent()
+        {
+            Assert.Multiple(() =>
+            {
+                Assert.IsTrue(this.component.Instance.Enabled);
+                Assert.IsNotEmpty(this.component.Instance.Data);
+                Assert.IsNotEmpty(this.component.Instance.Values);
+                Assert.IsTrue(this.component.Instance.ShowCheckBoxes);
+                Assert.IsNotNull(this.component.Instance.EditorTextTemplate);
+                Assert.That(this.component.Instance.MaxNumberOfChips, Is.EqualTo(2));
+                Assert.IsNotNull(this.component.Instance.RowTemplate);
+            });
+
+            var comboBox = this.component.FindComponent<DxComboBox<Category, Category>>();
+            Assert.IsNotNull(comboBox);
+            Assert.IsNull(comboBox.Instance.Value);
+
+            await this.component.InvokeAsync(() => comboBox.Instance.ShowDropDown());
+
+            var dropdownItems = this.component.FindAll(".item-template-checkbox");
+            Assert.IsNotNull(dropdownItems);
+            Assert.IsNotEmpty(dropdownItems);
+            Assert.AreEqual(this.availableCategories.Count, dropdownItems.Count);
+        }
+    }
+}

COMET.Web.Common/COMET.Web.Common.csproj

@@ -47,6 +47,9 @@
     <Content Update="wwwroot\DefaultTextConfiguration.json">
       <CopyToOutputDirectory>Always</CopyToOutputDirectory>
     </Content>
+    <Content Update="wwwroot\BookInputConfiguration.json">
+      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
+    </Content>
     <Content Update="wwwroot\server_configuration.json">
       <CopyToOutputDirectory>Always</CopyToOutputDirectory>
     </Content>

COMET.Web.Common/Components/BookEditor/InputEditor.razor

@@ -27,67 +27,58 @@
 @using CDP4Common.ReportingData
 @typeparam TItem
 
-<div>
-    <DxTabs>
-        <DxTabPage Text="Basic" CssClass="basic-tab">
-            <div class="tab-content">
-                @if (this.Item is INamedThing namedThing)
-                {
-                    <div class="w-100 editor-row">
-                        <p>Name:</p>
-                        <DxTextBox CssClass="w-100" @bind-Text="@namedThing.Name" />
-                    </div>
-                }
+<div class="input-content">
+    @if (this.Item is INamedThing namedThing && this.showName)
+    {
+        <div class="w-100 editor-row">
+            <p>Name:</p>
+            <DxTextBox CssClass="w-100" @bind-Text="@namedThing.Name" />
+        </div>
+    }
 
-                @if (this.Item is IShortNamedThing shortNamedThing)
-                {
-                    <div class="w-100 editor-row">
-                        <p>ShortName:</p>
-                        <DxTextBox CssClass="w-100" @bind-Text="@shortNamedThing.ShortName" />
-                    </div>
-                }
+    @if (this.Item is IShortNamedThing shortNamedThing && this.showShortName)
+    {
+        <div class="w-100 editor-row">
+            <p>ShortName:</p>
+            <DxTextBox CssClass="w-100" @bind-Text="@shortNamedThing.ShortName" />
+        </div>
+    }
 
-                @if (this.Item is IOwnedThing ownedThing)
-                {
-                    <div class="w-100 editor-row">
-                        <p>Owner:</p>
-                        <DxComboBox @bind-Value="@ownedThing.Owner"
-                                    Data="@this.ActiveDomains"
-                                    TData="DomainOfExpertise"
-                                    TValue="DomainOfExpertise"
-                                    TextFieldName="@nameof(DomainOfExpertise.Name)"
-                                    CssClass="w-100" />
-                    </div>
-                }
+    @if (this.Item is IOwnedThing ownedThing)
+    {
+        <div class="w-100 editor-row">
+            <p>Owner:</p>
+            <DxComboBox @bind-Value="@ownedThing.Owner"
+                        Data="@this.ActiveDomains"
+                        TData="DomainOfExpertise"
+                        TValue="DomainOfExpertise"
+                        TextFieldName="@nameof(DomainOfExpertise.Name)"
+                        CssClass="w-100" />
+        </div>
+    }
 
-                @if (this.Item is TextualNote textualNote)
-                {
-                    <div class="w-100 editor-row">
-                        <p>Content:</p>
-                        <DxMemo @bind-Text="textualNote.Content"
-                                CssClass="w-100"
-                                Rows="4" />
-                    </div>
-                }
-            </div>
-        </DxTabPage>
-        <DxTabPage Text="Category" CssClass="category-tab">
-            <div class="tab-content">
-                @if (this.Item is ICategorizableThing categorizableThing)
-                {
-                    <DxListBox Values="@categorizableThing.Category"
-                               Data="@this.AvailableCategories"
-                               TData="Category"
-                               TValue="Category"
-                               ValuesChanged="@this.OnCategoryChange"
-                               TextFieldName="@nameof(Category.Name)"
-                               SelectionMode="ListBoxSelectionMode.Multiple"
-                               ShowCheckboxes="true"
-                               CssClass="w-auto mt-1 me-1 flex-grow-1 chi-220"
-                               style="flex-basis: 240px">
-                    </DxListBox>
-                }
-            </div>
-        </DxTabPage>
-    </DxTabs>
+    @if (this.Item is TextualNote textualNote)
+    {
+        <div class="w-100 editor-row">
+            <p>Content:</p>
+            <DxMemo @bind-Text="textualNote.Content"
+                    CssClass="w-100"
+                    Rows="4" />
+        </div>
+    }
+
+    @if (this.Item is ICategorizableThing categorizableThing)
+    {
+        <div class="w-100 editor-row category-row">
+            <p>Category:</p>
+            <MultiComboBox TItem="Category"
+                           Values="@categorizableThing.Category"
+                           Data="@this.AvailableCategories"
+                           ValuesChanged="@this.OnCategoryChange">
+                <RowTemplate>
+                    <span>@context.Name</span>
+                </RowTemplate>
+            </MultiComboBox>
+        </div>
+    }
 </div>