From 7757c4d76317a97e7464fed533c8d2a0a258a665 Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bjarne_fyrstenborg@hotmail.com>
Date: Mon, 30 Aug 2021 15:57:58 +0200
Subject: [PATCH] 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 <kja@vertica.dk>
Co-authored-by: Michael <michael@crossingpaths.be>
---
 .../components/forms/umbcheckbox.directive.js |  9 +++--
 .../forms/umbradiobutton.directive.js         |  9 +++--
 .../validation/nodirtycheck.directive.js      | 13 ++++---
 .../views/components/forms/umb-checkbox.html  | 34 ++++++-------------
 .../components/forms/umb-radiobutton.html     | 34 ++++++-------------
 5 files changed, 45 insertions(+), 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
index 717cefbb0a6b..a4508c8879b1 100644
--- 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
index 8c7157c414ba..dd0d2fc31b86 100644
--- 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
index 800ac8748088..31ef125511d6 100644
--- 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
index 9056963c9dc7..a093e66b61c6 100644
--- 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
index a2d6eb78cc62..fcdacb4423b7 100644
--- 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>