Add improvements to the MultiComboBox component

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

@@ -74,7 +74,6 @@
             <MultiComboBox TItem="Category"
                            Values="@categorizableThing.Category"
                            Data="@this.AvailableCategories"
-                           ShowCheckBoxes="true"
                            ValuesChanged="@this.OnCategoryChange">
                 <RowTemplate>
                     <span>@context.Name</span>

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

@@ -31,6 +31,7 @@ namespace COMET.Web.Common.Components.BookEditor
     using CDP4Common.SiteDirectoryData;
 
     using COMET.Web.Common.Model;
+    using COMET.Web.Common.Services.SessionManagement;
     using COMET.Web.Common.Utilities;
 
     using Microsoft.AspNetCore.Components;
@@ -46,20 +47,26 @@ public partial class InputEditor<TItem>
         /// Gets or sets the <see cref="ILogger"/>
         /// </summary>
         [Inject]
-        ILogger<InputEditor<TItem>> Logger { get; set; }
+        public ILogger<InputEditor<TItem>> Logger { get; set; }
 
         /// <summary>
         /// Gets or sets the <see cref="HttpClient"/>
         /// </summary>
         [Inject]
-        HttpClient HttpClient { get; set; }
+        public HttpClient HttpClient { get; set; }
 
-        /// <summary>
-        /// Gets or sets the <see cref="IOptions{GlobalOptions}"/>
+        /// <summary>
+        /// Gets or sets the <see cref="IOptions{GlobalOptions}"/>
         /// </summary>
         [Inject]
         public IOptions<GlobalOptions> Options { get; set; }
 
+        /// <summary>
+        /// Gets or sets the <see cref="ISessionService"/>
+        /// </summary>
+        [Inject] 
+        public ISessionService SessionService { get; set; }
+
         /// <summary>
         /// Gets or sets the item for which the input is being provided
         /// </summary>
@@ -117,6 +124,11 @@ protected override async Task OnInitializedAsync()
                 {
                     this.showShortName = showShortNameValue;
                 }
+
+                if (this.Item is IOwnedThing ownedThing)
+                {
+                    ownedThing.Owner = this.SessionService.Session.ActivePerson.DefaultDomain;
+                }
             }
             catch (Exception e)
             {

COMET.Web.Common/Components/MultiComboBox.razor

@@ -26,6 +26,8 @@
             Data="@this.Data"
             ValueChanged="@this.ItemSelected"
             Enabled="@this.Enabled"
+            Value="@this.lastSelectedValue"
+            ClearButtonDisplayMode="DataEditorClearButtonDisplayMode.Auto"
             CssClass="w-100">
     <ItemTemplate>
         <div class="multi-combo-item-template">
@@ -47,12 +49,12 @@
     </ItemTemplate>
 
     <EditBoxTemplate>
-        @if(this.Values.Count <= 2)
+        @if(this.Values.Count <= this.MaxNumberOfChips)
         {
             <div class="chips-container">
                 @foreach(var value in this.Values)
                 {
-                    <button class="chip" @onclick="@(() => this.ItemSelected(value))">
+                    <div class="chip">
                         @if (this.RowTemplate != null)
                         {
                             @this.RowTemplate(value)
@@ -61,13 +63,21 @@
                         {
                             @value
                         }
-                    </button>
+                        <button class="chip-button icon icon-close" @onclick="@(() => this.ItemSelected(value))"></button>
+                    </div>
                 }
             </div>
         }
         else
         {
-            <div>@(this.Values.Count) items are selected</div>
+            if (this.EditorTextTemplate != null)
+            {
+                @this.EditorTextTemplate
+            }
+            else
+            {
+                <div>@(this.Values.Count) items are selected</div>
+            }
         }
     </EditBoxTemplate>
 </DxComboBox>

COMET.Web.Common/Components/MultiComboBox.razor.cs

@@ -20,18 +20,35 @@ namespace COMET.Web.Common.Components
     /// </summary>
     public partial class MultiComboBox<TItem>
     {
+        /// <summary>
+        /// The last selected value of the combobox
+        /// </summary>
+        private TItem lastSelectedValue;
+
+        /// <summary>
+        /// Gets or sets the maximum number of chips that the combo should show
+        /// </summary>
+        [Parameter]
+        public int MaxNumberOfChips { get; set; } = 3;
+
         /// <summary>
         /// Gets or sets if the checkboxes for the selected items should be drawn
         /// </summary>
         [Parameter]
-        public bool ShowCheckBoxes { get; set; }
+        public bool ShowCheckBoxes { get; set; } = true;
 
         /// <summary>
         /// Gets or sets the item template for the selected items
         /// </summary>
         [Parameter]
         public RenderFragment<TItem> RowTemplate { get; set; }
 
+        /// <summary>
+        /// Gets or sets item template to show when the number of selected items is greater or equal to the <see cref="MaxNumberOfChips"/>
+        /// </summary>
+        [Parameter]
+        public RenderFragment EditorTextTemplate { get; set; }
+
         /// <summary>
         /// Gets or sets the data of the combobox
         /// </summary>
@@ -63,6 +80,8 @@ public partial class MultiComboBox<TItem>
         /// <returns>an asynchronous operation</returns>
         private async Task ItemSelected(TItem newValue)
         {
+            this.lastSelectedValue = default;
+
             if(this.Values.Contains(newValue))
             {
                 this.Values.Remove(newValue);

COMET.Web.Common/Components/MultiComboBox.razor.css

@@ -1,17 +1,33 @@
 ::deep.chip {
     border: 0;
     background-color: #EEEEEE;
-    border-radius: 15px;
-    padding: 2.5% 5%;
+    border-radius: 30px;
+    padding: 2%;
     box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.2);
+    color: #555;
+    display: flex;
+    align-items:center;
+    justify-content:center;
+    column-gap: 5px;
 }
 
+::deep.chip-button {
+    border: 0;
+    border-radius: 30px;
+}
+
+    ::deep.chip-button:hover {
+        box-shadow: 0px 0px 0px 2px rgba(0,0,0,0.2);
+    }
+
 ::deep.chips-container {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     row-gap: 5px;
     column-gap: 5px;
+    width: 100%;
+    height: 100%;
 }
 
 ::deep.dxbl-listbox-item{

COMET.Web.Common/wwwroot/css/styles.css

@@ -60,6 +60,10 @@
     background-image: url(SVG/icons/trash.svg)
 }
 
+.icon-close {
+    background-image: url(SVG/icons/close.svg)
+}
+
 .logo-size {
     max-width: 95px;
     height: auto;