[IDEA][BLAZOR] Editable user control should stop updating value when focused and value binding should be switched to 'Edit' property of primitive type

docs/articles/blazor/RENDERABLECONTENT.md

@@ -9,6 +9,7 @@ This file describes the purpose, features and usage of the **RenderableContentCo
 4. [Features](#id-features)
     - [Presentation Type and Presentation pipeline](#id-presentation)
     - [RenderIgnore and custom labels](#id-renderingore)
+	- [Edit property](#id-editprop)
     - [Layouts](#id-layouts)
     - [Styling](#id-styling)
 
@@ -168,6 +169,13 @@ It is possible to ignore properties only in specific presentation types:
 {#ix-attr:[RenderIgnore("Display","ShadowDisplay")]}  
 testIxComponent: IxComponent;
 ```
+<div id='id-editprop'/>
+
+### **Edit Property**
+
+Then renderer binds variables to `Cyclic` or `Edit` property of an Onliner. When an element gets focus, value is bound to `Edit` property and UI updates stops. After the focus is lost, the value is bound back to `Cyclic` property and the value in the UI start updating again. 
+
+![alt text](assets/edit-property.gif "Edit property")
 
 <div id='id-layouts'/>
 

src/ix.blazor/src/Ix.Presentation.Blazor.Controls/RenderableContent/RenderableComponentBase.cs

@@ -11,7 +11,7 @@
 using Ix.Connector;
 using Ix.Connector.ValueTypes;
 using Ix.Presentation.Blazor.Interfaces;
-
+using Ix.Connector.ValueTypes.Online;
 
 namespace Ix.Presentation.Blazor.Controls.RenderableContent
 {
@@ -20,6 +20,10 @@ namespace Ix.Presentation.Blazor.Controls.RenderableContent
     /// </summary>
     public partial class RenderableComponentBase : ComponentBase, IRenderableComponent
     {
+
+        public bool IsFocus { get; set; }
+        public string CssSymbol(string symbol) => symbol.Replace(".", "-");
+
         /// <summary>
         ///  Method, which updates are primitive values of ITwinObject instance
         /// <param name="element">ITwinObject instance.</param>
@@ -29,20 +33,22 @@ public void UpdateValuesOnChange(ITwinObject element)
             if (element != null)
             {
                 var tags = element.GetValueTags();
-                foreach (dynamic tag in tags)
+                foreach (OnlinerBase tag in tags)
                 {
                     tag.PropertyChanged += new PropertyChangedEventHandler(HandlePropertyChanged);
+
                 }
             }
         }
         /// <summary>
         ///  Method, which updates primitive value.
         /// <param name="tag">IValueTag instance.</param>
         /// </summary>
-        public void UpdateValuesOnChange(ITwinPrimitive tag)
+        public void UpdateValuesOnChange(OnlinerBase tag)
         {
-            ((dynamic)tag).PropertyChanged += new PropertyChangedEventHandler(HandlePropertyChanged);
+            tag.PropertyChanged += new PropertyChangedEventHandler(HandlePropertyChanged);
         }
+
         /// <summary>
         ///  Method, which updates are primitive shadow values of ITwinObject
         /// <param name="element">ITwinObject instance.</param>
@@ -67,6 +73,17 @@ public void UpdateShadowValuesOnChange(ITwinPrimitive tag)
             ((dynamic)tag).ShadowValueChangeEvent += new ValueChangedEventHandlerDelegate(HandleShadowPropertyChanged);
         }
 
+
+        /// <summary>
+        ///  Method, which updates primitive value only, when element is out of focus.
+        ///  Public property IsFocus can be set. If is true, element won't be updated.
+        /// <param name="tag">IValueTag instance.</param>
+        /// </summary>
+        public void UpdateValuesOnChangeOutFocus(OnlinerBase tag)
+        {
+            tag.PropertyChanged += new PropertyChangedEventHandler(HandlePropertyChangedOnOutFocus);
+        }
+
         protected void HandlePropertyChanged(object sender, PropertyChangedEventArgs a)
         {
             InvokeAsync(StateHasChanged);
@@ -77,6 +94,11 @@ protected void HandleShadowPropertyChanged(object sender, ValueChangedEventArgs
             InvokeAsync(StateHasChanged);
         }
 
-        public string CssSymbol(string symbol) => symbol.Replace(".", "-");
+        protected void HandlePropertyChangedOnOutFocus(object sender, PropertyChangedEventArgs a)
+        {
+            if(!IsFocus) InvokeAsync(StateHasChanged);
+        }
+
+
     }
 }

src/ix.blazor/src/Ix.Presentation.Blazor.Controls/Templates/Base/Online/Control/OnlinerBaseControlView.razor

@@ -6,13 +6,15 @@
         <label for="@ComponentId" class="form-label">@Onliner.AttributeName</label>
     </div>
     <div>
-            <input id="@ComponentId"
+            <input id="@ComponentId"    
                readonly="@IsReadOnly"
                class="w-100 form-control @AccessStatus"
-                   type=@IsNumeric(typeof(T))
-                   step=any
-                   @[email protected] />
-
+               type=@IsNumeric(typeof(T))
+               step=any
+               @onfocus="@( () => IsFocus = true )"
+               @onblur="@( () => IsFocus = false )"
+               @bind="Value" />
+
         <div class="invalid-feedback">
             @Onliner.AccessStatus.FailureReason
         </div>

src/ix.blazor/src/Ix.Presentation.Blazor.Controls/Templates/Base/Online/Control/OnlinerBoolControlView.razor

@@ -9,7 +9,7 @@
                disabled="@IsReadOnly"
                class="form-check-input @AccessStatus"
                type="checkbox"
-               @bind="Onliner.Cyclic">
+               @bind="Value">
         <div class="invalid-feedback">
             @Onliner.AccessStatus.FailureReason
         </div>

src/ix.blazor/src/Ix.Presentation.Blazor.Controls/Templates/Base/Online/Control/OnlinerDateControlView.razor

@@ -9,7 +9,7 @@
                readonly="@IsReadOnly"
                class="w-100 form-control @AccessStatus"
                type="date"
-               @bind="@Onliner.Cyclic" />
+               @bind="Value" />
         <div class="invalid-feedback">
             @Onliner.AccessStatus.FailureReason
         </div>

src/ix.blazor/src/Ix.Presentation.Blazor.Controls/Templates/Base/Online/Control/OnlinerDateTimeControlView.razor

@@ -11,7 +11,7 @@
                type="datetime-local"
                step=1
                name="onlineDateTime"
-               @bind="Onliner.Cyclic">
+               @bind="Value">
         <div class="invalid-feedback">
             @Onliner.AccessStatus.FailureReason
         </div>

src/ix.blazor/src/Ix.Presentation.Blazor.Controls/Templates/Base/Online/Control/OnlinerTimeOfDayControlView.razor

@@ -26,7 +26,7 @@
         try
         {
             var parsedTimeSpan = TimeSpan.Parse(args.Value.ToString());
-            Onliner.Cyclic = parsedTimeSpan;
+            Onliner.Edit = parsedTimeSpan;
 
         }
         catch

src/ix.blazor/src/Ix.Presentation.Blazor.Controls/Templates/Base/Online/TemplateBaseOnline.cs

@@ -2,9 +2,11 @@
 using Microsoft.AspNetCore.Components;
 using System;
 using System.Collections.Generic;
+using System.ComponentModel;
 using System.Linq;
 using System.Text;
 using System.Threading.Tasks;
+using System.Xml.Linq;
 
 namespace Ix.Presentation.Blazor.Controls.Templates.Base.Online
 {
@@ -16,14 +18,32 @@ public partial class TemplateBaseOnline<T>
         [Parameter]
         public bool IsReadOnly { get; set; }
 
+        protected T Value
+        {
+            get
+            {
+                return Onliner.Cyclic;
+            }
+            set
+            {
+                Onliner.Edit = value;
+            }
+        }
+
         internal string AccessStatus { get; set; }
         internal string ComponentId { get; set; }
-
-        protected override void OnInitialized()
+
+
+        protected override Task OnInitializedAsync()
         {
-            UpdateValuesOnChange(Onliner);
+
+            UpdateValuesOnChangeOutFocus(Onliner);
             AccessStatus = Onliner.AccessStatus.Failure ? "is-invalid" : "";
             ComponentId = Onliner.GetSymbolTail() + "_" + Guid.NewGuid().ToString();
+            return base.OnInitializedAsync();
         }
+
+
+
     }
 }

src/ix.blazor/src/Ix.Presentation.Blazor.Controls/Templates/Enumerators/Online/Control/EnumeratorContainerControlView.razor

@@ -8,7 +8,7 @@
     <div>
         <select id="@ComponentId"
                 class="w-100 form-select @AccessStatus"
-                @bind="@Onliner.Cyclic"
+                @bind="Value"
                 disabled="@IsReadOnly">
             @foreach (var name in Names)
             {

src/ix.blazor/src/Ix.Presentation.Blazor.Controls/Templates/Enumerators/Online/EnumeratorsBaseOnline.cs

@@ -17,6 +17,17 @@ public partial class EnumeratorsBaseOnline<T>
         public EnumeratorDiscriminatorAttribute EnumDiscriminatorAttribute { get; set; }
         [Parameter]
         public bool IsReadOnly { get; set; }
+        protected T Value
+        {
+            get
+            {
+                return Onliner.Cyclic;
+            }
+            set
+            {
+                Onliner.Edit = value;
+            }
+        }
         public string AccessStatus { get; set; }
         public Array Names { get; set; }
         public EnumToIntConverter EnumToIntConverter { get; set; }

src/ix.connectors/src/Ix.Connector/ValueTypes/Onlines/OnlinerBase`1.cs

@@ -156,9 +156,10 @@ public T Edit
 
         set
         {
+
             if (Validator.Validate(value, CultureInfo.InvariantCulture).IsValid)
             {
-                EditValue(GetAsync().Result, value);
+                EditValue(this.Cyclic, value);
                 Cyclic = value;
             }
         }
@@ -535,12 +536,12 @@ protected virtual void WriteItem()
 
     private void EditValue(T origin, T newValue)
     {
-        if (origin == null || !origin.Equals(newValue))
-        {
-            Parent.GetConnector()?.Logger.Verbose($"Value change; online; {Symbol};{origin};{newValue}'.");
-            EditValueChange?.Invoke(this, origin, newValue);
-            NotifyPropertyChanged(nameof(Edit));
-        }
+        //if (origin == null || !origin.Equals(newValue))
+        //{
+        //    Parent.GetConnector()?.Logger.Verbose($"Value change; online; {Symbol};{origin};{newValue}'.");
+        //    EditValueChange?.Invoke(this, origin, newValue);
+        //    NotifyPropertyChanged(nameof(Edit));
+        //}
     }
 
     private void ChangeShadowValue(T origin, T newValue)

src/sanbox/integration/ix-integration-blazor/Pages/StackedLayout.razor

@@ -19,13 +19,13 @@
 
 <div>
     <RenderableContentControl Presentation="Control"
-                              Context="@Entry.Plc.weather_stacked" />
+                              Context="@Entry.Plc.weather_stacked" />                  
 </div>
 
 
 
 @code {
-
+    
     private MarkupString text;
     private string code_example = 
     @"

src/sanbox/integration/ix-integration-blazor/Pages/_Layout.cshtml

@@ -10,7 +10,6 @@
     <base href="~/" />
     <link href="css/site.css" rel="stylesheet" />
     <link href="ix-integration-blazor.styles.css" rel="stylesheet" />
-    <link href="ix-blaxor.styles.css" rel="stylesheet" />
     <link rel="stylesheet" href="/_content/IX.Presentation.Blazor.Controls/css/ix-bootstrap.min.css">
     <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
 </head>