Allow to pass in boolean to noDirtyCheck directive (#8638)

* Adjust noDirtyCheck directive to accept a parameter to enable/disable dirty check * Update dirty property * Use Utilities.noop and add description * Set default value from controller * Check for truthly value * Use Object.toBoolean * Revert setting $pristine and $dirty for now * Handle default values in dirty check attributes * Add check on presence of disableDirtyCheck atribute * Check for truthy value otherwise it should be default return false and work as no-dirty-check without value * update test conditions for vamue of no-dirty-check and disable-dirty-check * Remove whitespace * update check Co-authored-by: Kenn Jacobsen <[email protected]> Co-authored-by: Michael <[email protected]>
umbraco · Aug 30, 2021 · 7757c4d · 7757c4d
1 parent 20eda44
commit 7757c4d
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 54 deletions.
diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/forms/umbcheckbox.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/forms/umbcheckbox.directive.js
@@ -41,7 +41,7 @@
 (function () {
     'use strict';
 
-    function UmbCheckboxController($timeout, localizationService) {
+    function UmbCheckboxController($timeout, $attrs, localizationService) {
 
         var vm = this;
 
@@ -50,7 +50,12 @@
 
         function onInit() {
             vm.inputId = vm.inputId || "umb-check_" + String.CreateGuid();
-
+            vm.disableDirtyCheck =
+                $attrs.hasOwnProperty("disableDirtyCheck") &&
+                vm.disableDirtyCheck !== '0' &&
+                vm.disableDirtyCheck !== 0 &&
+                vm.disableDirtyCheck !== 'false' &&
+                vm.disableDirtyCheck !== false;
             vm.icon = vm.icon || vm.iconClass || null;
 
             // If a labelKey is passed let's update the returned text if it's does not contain an opening square bracket [

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/forms/umbradiobutton.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/forms/umbradiobutton.directive.js
@@ -40,7 +40,7 @@
 (function () {
     'use strict';
 
-    function UmbRadiobuttonController($timeout, localizationService) {
+    function UmbRadiobuttonController($timeout, $attrs, localizationService) {
 
         var vm = this;
 
@@ -49,7 +49,12 @@
 
         function onInit() {
             vm.inputId = vm.inputId || "umb-radio_" + String.CreateGuid();
-
+            vm.disableDirtyCheck =
+                $attrs.hasOwnProperty("disableDirtyCheck") &&
+                vm.disableDirtyCheck !== '0' &&
+                vm.disableDirtyCheck !== 0 &&
+                vm.disableDirtyCheck !== 'false' &&
+                vm.disableDirtyCheck !== false;
             vm.icon = vm.icon || vm.iconClass || null;
 
             // If a labelKey is passed let's update the returned text if it's does not contain an opening square bracket [

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/validation/nodirtycheck.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/validation/nodirtycheck.directive.js
@@ -10,13 +10,18 @@ function noDirtyCheck() {
         require: 'ngModel',
         link: function (scope, elm, attrs, ctrl) {
 
+            // if "no-dirty-check" attribute is explicitly falsy, then skip and use default behaviour. In all other cases we consider it truthy
+            var skipNoDirtyCheck = attrs.noDirtyCheck === '0' || attrs.noDirtyCheck === 0 || attrs.noDirtyCheck.toString().toLowerCase() === 'false';
+            if (skipNoDirtyCheck)
+                return;
+
             var alwaysFalse = {
-                    get: function () { return false; },
-                    set: function () { }
-                };
+                get: function () { return false; },
+                set: function () { }
+            };
+
             Object.defineProperty(ctrl, '$pristine', alwaysFalse);
             Object.defineProperty(ctrl, '$dirty', alwaysFalse);
-
         }
     };
 }

diff --git a/src/Umbraco.Web.UI.Client/src/views/components/forms/umb-checkbox.html b/src/Umbraco.Web.UI.Client/src/views/components/forms/umb-checkbox.html
@@ -1,29 +1,17 @@
 <label class="checkbox umb-form-check umb-form-check--checkbox {{vm.cssClass}}" ng-class="{ 'umb-form-check--disabled': vm.disabled }">
     <span class="umb-form-check__symbol">
-        <input ng-if="vm.disableDirtyCheck"
-            type="checkbox"
-            id="{{vm.inputId}}"
-            name="{{vm.name}}"
-            value="{{vm.value}}"
-            class="umb-form-check__input"
-            val-server-field="{{vm.serverValidationField}}"
-            ng-model="vm.model"
-            ng-disabled="vm.disabled"
-            ng-required="vm.required"
-            ng-change="vm.change()"
-            no-dirty-check />
 
-        <input ng-if="!vm.disableDirtyCheck"
-            type="checkbox"
-            id="{{vm.inputId}}"
-            name="{{vm.name}}"
-            value="{{vm.value}}"
-            class="umb-form-check__input"
-            val-server-field="{{vm.serverValidationField}}"
-            ng-model="vm.model"
-            ng-disabled="vm.disabled"
-            ng-required="vm.required"
-            ng-change="vm.change()"/>
+        <input type="checkbox"
+               id="{{vm.inputId}}"
+               name="{{vm.name}}"
+               value="{{vm.value}}"
+               class="umb-form-check__input"
+               val-server-field="{{vm.serverValidationField}}"
+               ng-model="vm.model"
+               ng-disabled="vm.disabled"
+               ng-required="vm.required"
+               ng-change="vm.change()"
+               no-dirty-check="{{vm.disableDirtyCheck}}" />
 
         <span class="umb-form-check__state" aria-hidden="true">
             <span class="umb-form-check__check">

diff --git a/src/Umbraco.Web.UI.Client/src/views/components/forms/umb-radiobutton.html b/src/Umbraco.Web.UI.Client/src/views/components/forms/umb-radiobutton.html
@@ -1,29 +1,17 @@
 <label class="radio umb-form-check umb-form-check--radiobutton {{vm.cssClass}}" ng-class="{ 'umb-form-check--disabled': vm.disabled }">
     <span class="umb-form-check__symbol">
-        <input ng-if="vm.disableDirtyCheck"
-            type="radio"
-            id="{{vm.inputId}}"
-            name="{{vm.name}}"
-            value="{{vm.value}}"
-            class="umb-form-check__input"
-            val-server-field="{{vm.serverValidationField}}"
-            ng-model="vm.model"
-            ng-disabled="vm.disabled"
-            ng-required="vm.required"
-            ng-change="vm.change()"
-            no-dirty-check />
 
-        <input ng-if="!vm.disableDirtyCheck"
-            type="radio"
-            id="{{vm.inputId}}"
-            name="{{vm.name}}"
-            value="{{vm.value}}"
-            class="umb-form-check__input"
-            val-server-field="{{vm.serverValidationField}}"
-            ng-model="vm.model"
-            ng-disabled="vm.disabled"
-            ng-required="vm.required"
-            ng-change="vm.change()" />
+        <input type="radio"
+               id="{{vm.inputId}}"
+               name="{{vm.name}}"
+               value="{{vm.value}}"
+               class="umb-form-check__input"
+               val-server-field="{{vm.serverValidationField}}"
+               ng-model="vm.model"
+               ng-disabled="vm.disabled"
+               ng-required="vm.required"
+               ng-change="vm.change()"
+               no-dirty-check="{{vm.disableDirtyCheck}}" />
 
         <span class="umb-form-check__state" aria-hidden="true">
             <span class="umb-form-check__check"></span>