From e3a0adf3c2722aeb1fc996c5688cefe8b91ffb71 Mon Sep 17 00:00:00 2001
From: jaimeatrhea <j.bernar@rheagroup.com>
Date: Tue, 26 Sep 2023 12:34:55 +0200
Subject: [PATCH] Add improvements to the MultiComboBox component

---
 .../Components/BookEditor/InputEditor.razor   |  1 -
 .../BookEditor/InputEditor.razor.cs           | 20 ++++++++++++++----
 .../Components/MultiComboBox.razor            | 18 ++++++++++++----
 .../Components/MultiComboBox.razor.cs         | 21 ++++++++++++++++++-
 .../Components/MultiComboBox.razor.css        | 20 ++++++++++++++++--
 .../wwwroot/css/SVG/icons/close.svg           |  1 +
 COMET.Web.Common/wwwroot/css/styles.css       |  4 ++++
 7 files changed, 73 insertions(+), 12 deletions(-)
 create mode 100644 COMET.Web.Common/wwwroot/css/SVG/icons/close.svg

diff --git a/COMET.Web.Common/Components/BookEditor/InputEditor.razor b/COMET.Web.Common/Components/BookEditor/InputEditor.razor
index 0f57520c..37eda25a 100644
--- a/COMET.Web.Common/Components/BookEditor/InputEditor.razor
+++ b/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>
diff --git a/COMET.Web.Common/Components/BookEditor/InputEditor.razor.cs b/COMET.Web.Common/Components/BookEditor/InputEditor.razor.cs
index a4aa9133..35cd9c7b 100644
--- a/COMET.Web.Common/Components/BookEditor/InputEditor.razor.cs
+++ b/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)
             {
diff --git a/COMET.Web.Common/Components/MultiComboBox.razor b/COMET.Web.Common/Components/MultiComboBox.razor
index 29d4d824..af62e64f 100644
--- a/COMET.Web.Common/Components/MultiComboBox.razor
+++ b/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>
\ No newline at end of file
diff --git a/COMET.Web.Common/Components/MultiComboBox.razor.cs b/COMET.Web.Common/Components/MultiComboBox.razor.cs
index 5b904a2f..cc06144c 100644
--- a/COMET.Web.Common/Components/MultiComboBox.razor.cs
+++ b/COMET.Web.Common/Components/MultiComboBox.razor.cs
@@ -20,11 +20,22 @@ 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
@@ -32,6 +43,12 @@ public partial class MultiComboBox<TItem>
         [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);
diff --git a/COMET.Web.Common/Components/MultiComboBox.razor.css b/COMET.Web.Common/Components/MultiComboBox.razor.css
index 9ad30922..bf7ef31b 100644
--- a/COMET.Web.Common/Components/MultiComboBox.razor.css
+++ b/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{
diff --git a/COMET.Web.Common/wwwroot/css/SVG/icons/close.svg b/COMET.Web.Common/wwwroot/css/SVG/icons/close.svg
new file mode 100644
index 00000000..3c597777
--- /dev/null
+++ b/COMET.Web.Common/wwwroot/css/SVG/icons/close.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#555" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
\ No newline at end of file
diff --git a/COMET.Web.Common/wwwroot/css/styles.css b/COMET.Web.Common/wwwroot/css/styles.css
index ee7b7cc8..d05981b9 100644
--- a/COMET.Web.Common/wwwroot/css/styles.css
+++ b/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;