Feat/allow multicombobox to set readonly

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

@@ -60,14 +60,21 @@ public void SetUp()
                 new() { Name = "Category4" },
                 new() { Name = "Category5" },
             };
-
+        }
+
+        [TestCase(true, false)]
+        [TestCase(false, false)]
+        [TestCase(false, true)]
+        public async Task VerifyComponent(bool isComponentEnabled, bool isComponentReadOnly)
+        {
             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.Enabled, isComponentEnabled);
+                parameter.Add(p => p.IsReadOnly, isComponentReadOnly);
 
                 parameter.Add(p => p.EditorTextTemplate, builder =>
                 {
@@ -78,14 +85,9 @@ public void SetUp()
 
                 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);
@@ -95,15 +97,25 @@ public async Task VerifyComponent()
             });
 
             var comboBox = this.component.FindComponent<DxComboBox<Category, Category>>();
-            Assert.IsNotNull(comboBox);
-            Assert.IsNull(comboBox.Instance.Value);
+
+            Assert.Multiple(() =>
+            {
+                Assert.IsNotNull(comboBox);
+                Assert.IsNull(comboBox.Instance.Value);
+                Assert.That(comboBox.Instance.ReadOnly, Is.EqualTo(isComponentReadOnly));
+                Assert.That(comboBox.Instance.Enabled, Is.EqualTo(isComponentEnabled));
+            });
 
             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);
+
+            Assert.Multiple(() =>
+            {
+                Assert.IsNotNull(dropdownItems);
+                Assert.IsNotEmpty(dropdownItems);
+                Assert.AreEqual(this.availableCategories.Count, dropdownItems.Count); 
+            });
         }
     }
 }

COMET.Web.Common/Components/MultiComboBox.razor

@@ -27,6 +27,7 @@
             Data="@this.Data"
             ValueChanged="@this.ItemSelected"
             Enabled="@this.Enabled"
+            ReadOnly="@(this.IsReadOnly)"
             Value="@this.lastSelectedValue"
             ClearButtonDisplayMode="DataEditorClearButtonDisplayMode.Auto"
             CssClass="w-100">

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

@@ -68,7 +68,8 @@ public partial class MultiComboBox<TItem>
         public IEnumerable<TItem> Data { get; set; } = Enumerable.Empty<TItem>();
 
         /// <summary>
-        /// Gets or sets if the component should show all the fields as readonly
+        /// Gets or sets if the component should show all the fields as enabled/disabled.
+        /// If a component is disabled, the user can't select the values within the component.
         /// </summary>
         [Parameter]
         public bool Enabled { get; set; } = true;
@@ -83,7 +84,14 @@ public partial class MultiComboBox<TItem>
         /// Gets or sets the callback used to update the component value
         /// </summary>
         [Parameter]
-        public EventCallback<List<TItem>> ValuesChanged { get; set; }        
+        public EventCallback<List<TItem>> ValuesChanged { get; set; }
+
+        /// <summary>
+        /// Gets or sets if the component is read only.
+        /// If a component is read only, the user can select the values but not edit them.
+        /// </summary>
+        [Parameter]
+        public bool IsReadOnly { get; set; }
 
         /// <summary>
         /// Handler for when the value of the component has changed