contentpicker: Don't validate minNumber if empty and not mandatory (#11330)

daniel-shuy · nathanwoulfe · web-flow · commit 6e04cc72c2d6 · 2021-10-20T09:51:26.000+10:00
* contentpicker: Don't validate minNumber if empty and not mandatory

* adds variable for accessing $scope.model.config.minNumber and $scope.model.config.maxNumber

Co-authored-by: Nathan Woulfe &lt;nathan@nathanw.com.au&gt;
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/contentpicker/contentpicker.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/contentpicker/contentpicker.controller.js
@@ -44,14 +44,15 @@ function contentPickerController($scope, $q, $routeParams, $location, entityReso
     function validate() {
         if ($scope.contentPickerForm) {
             //Validate!
-            if ($scope.model.config && $scope.model.config.minNumber && parseInt($scope.model.config.minNumber) > $scope.renderModel.length) {
+            var hasItemsOrMandatory = $scope.renderModel.length !== 0 || ($scope.model.validation && $scope.model.validation.mandatory);
+            if (hasItemsOrMandatory && $scope.minNumberOfItems > $scope.renderModel.length) {
                 $scope.contentPickerForm.minCount.$setValidity("minCount", false);
             }
             else {
                 $scope.contentPickerForm.minCount.$setValidity("minCount", true);
             }
 
-            if ($scope.model.config && $scope.model.config.maxNumber && parseInt($scope.model.config.maxNumber) < $scope.renderModel.length) {
+            if ($scope.maxNumberOfItems < $scope.renderModel.length) {
                 $scope.contentPickerForm.maxCount.$setValidity("maxCount", false);
             }
             else {
@@ -145,6 +146,10 @@ function contentPickerController($scope, $q, $routeParams, $location, entityReso
 
             $scope.umbProperty.setPropertyActions(propertyActions);
         }
+
+        // use these to avoid the nested property lookups/null-checks
+        $scope.minNumberOfItems = $scope.model.config.minNumber ? parseInt($scope.model.config.minNumber) : 0;
+        $scope.maxNumberOfItems = $scope.model.config.maxNumber ? parseInt($scope.model.config.maxNumber) : 0;
     }
 
     //Umbraco persists boolean for prevalues as "0" or "1" so we need to convert that!
@@ -194,7 +199,7 @@ function contentPickerController($scope, $q, $routeParams, $location, entityReso
     dialogOptions.dataTypeKey = $scope.model.dataTypeKey;
 
     // if we can't pick more than one item, explicitly disable multiPicker in the dialog options
-    if ($scope.model.config.maxNumber && parseInt($scope.model.config.maxNumber) === 1) {
+    if ($scope.maxNumberOfItems === 1) {
         dialogOptions.multiPicker = false;
     }
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/contentpicker/contentpicker.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/contentpicker/contentpicker.html
@@ -19,7 +19,7 @@
             </umb-node-preview>
         </div>
 
-        <button ng-show="model.config.multiPicker === true && renderModel.length < model.config.maxNumber || renderModel.length === 0 || !model.config.maxNumber"
+        <button ng-show="model.config.multiPicker === true && renderModel.length < maxNumberOfItems || renderModel.length === 0 || !maxNumberOfItems"
                 type="button"
                 class="umb-node-preview-add"
                 ng-click="openCurrentPicker()"
@@ -29,35 +29,35 @@
             <span class="sr-only">...</span>
         </button>
 
-        <div class="umb-contentpicker__min-max-help" ng-if="model.config.multiPicker === true && (model.config.maxNumber > 1 || model.config.minNumber > 0)">
+        <div class="umb-contentpicker__min-max-help" ng-if="model.config.multiPicker === true && (maxNumberOfItems > 1 || minNumberOfItems > 0) && (renderModel.length !== 0 || (model.validation && model.validation.mandatory))">
 
             <!-- Both min and max items -->
-            <span ng-if="model.config.minNumber && model.config.maxNumber && model.config.minNumber !== model.config.maxNumber">
-                <span ng-if="renderModel.length < model.config.maxNumber">Add between {{model.config.minNumber}} and {{model.config.maxNumber}} items</span>
-                <span ng-if="renderModel.length > model.config.maxNumber">
-                    <localize key="validation_maxCount">You can only have</localize> {{model.config.maxNumber}} <localize key="validation_itemsSelected"> items selected</localize>
+            <span ng-if="minNumberOfItems !== maxNumberOfItems">
+                <span ng-if="renderModel.length < maxNumberOfItems">Add between {{minNumberOfItems}} and {{maxNumberOfItems}} items</span>
+                <span ng-if="renderModel.length > maxNumberOfItems">
+                    <localize key="validation_maxCount">You can only have</localize> {{maxNumberOfItems}} <localize key="validation_itemsSelected"> items selected</localize>
                 </span>
             </span>
 
             <!-- Equal min and max -->
-            <span ng-if="model.config.minNumber && model.config.maxNumber && model.config.minNumber === model.config.maxNumber">
-                <span ng-if="renderModel.length < model.config.maxNumber">Add {{model.config.minNumber - renderModel.length}} item(s)</span>
-                <span ng-if="renderModel.length > model.config.maxNumber">
-                    <localize key="validation_maxCount">You can only have</localize> {{model.config.maxNumber}} <localize key="validation_itemsSelected"> items selected</localize>
+            <span ng-if="minNumberOfItems === maxNumberOfItems">
+                <span ng-if="renderModel.length < maxNumberOfItems">Add {{minNumberOfItems - renderModel.length}} item(s)</span>
+                <span ng-if="renderModel.length > maxNumberOfItems">
+                    <localize key="validation_maxCount">You can only have</localize> {{maxNumberOfItems}} <localize key="validation_itemsSelected"> items selected</localize>
                 </span>
             </span>
 
             <!-- Only max -->
-            <span ng-if="!model.config.minNumber && model.config.maxNumber">
-                <span ng-if="renderModel.length < model.config.maxNumber">Add up to {{model.config.maxNumber}} items</span>
-                <span ng-if="renderModel.length > model.config.maxNumber">
-                    <localize key="validation_maxCount">You can only have</localize> {{model.config.maxNumber}} <localize key="validation_itemsSelected">items selected</localize>
+            <span ng-if="!minNumberOfItems && maxNumberOfItems">
+                <span ng-if="renderModel.length < maxNumberOfItems">Add up to {{maxNumberOfItems}} items</span>
+                <span ng-if="renderModel.length > maxNumberOfItems">
+                    <localize key="validation_maxCount">You can only have</localize> {{maxNumberOfItems}} <localize key="validation_itemsSelected">items selected</localize>
                 </span>
             </span>
 
             <!-- Only min -->
-            <span ng-if="model.config.minNumber && !model.config.maxNumber && renderModel.length < model.config.minNumber">
-                Add at least {{model.config.minNumber}} item(s)
+            <span ng-if="minNumberOfItems && !maxNumberOfItems && renderModel.length < minNumberOfItems">
+                Add at least {{minNumberOfItems}} item(s)
             </span>
 
         </div>
@@ -70,12 +70,12 @@
 
         <div ng-messages="contentPickerForm.minCount.$error" show-validation-on-submit>
             <div class="help-inline" ng-message="minCount">
-                <localize key="validation_minCount">You need to add at least</localize> {{model.config.minNumber}} <localize key="validation_items">items</localize>
+                <localize key="validation_minCount">You need to add at least</localize> {{minNumberOfItems}} <localize key="validation_items">items</localize>
             </div>
         </div>
         <div ng-messages="contentPickerForm.maxCount.$error" show-validation-on-submit>
             <div class="help-inline" ng-message="maxCount">
-                <localize key="validation_maxCount">You can only have</localize> {{model.config.maxNumber}} <localize key="validation_itemsSelected">items selected</localize>
+                <localize key="validation_maxCount">You can only have</localize> {{maxNumberOfItems}} <localize key="validation_itemsSelected">items selected</localize>
             </div>
         </div>
 

Original file line number	Diff line number	Diff line change
`@@ -44,14 +44,15 @@ function contentPickerController($scope, $q, $routeParams, $location, entityReso`
`44`	`44`	`function validate() {`
`45`	`45`	`if ($scope.contentPickerForm) {`
`46`	`46`	`//Validate!`
`47`		`- if ($scope.model.config && $scope.model.config.minNumber && parseInt($scope.model.config.minNumber) > $scope.renderModel.length) {`
	`47`	`+ var hasItemsOrMandatory = $scope.renderModel.length !== 0 \|\| ($scope.model.validation && $scope.model.validation.mandatory);`
	`48`	`+ if (hasItemsOrMandatory && $scope.minNumberOfItems > $scope.renderModel.length) {`
`48`	`49`	`$scope.contentPickerForm.minCount.$setValidity("minCount", false);`
`49`	`50`	`}`
`50`	`51`	`else {`
`51`	`52`	`$scope.contentPickerForm.minCount.$setValidity("minCount", true);`
`52`	`53`	`}`
`53`	`54`
`54`		`- if ($scope.model.config && $scope.model.config.maxNumber && parseInt($scope.model.config.maxNumber) < $scope.renderModel.length) {`
	`55`	`+ if ($scope.maxNumberOfItems < $scope.renderModel.length) {`
`55`	`56`	`$scope.contentPickerForm.maxCount.$setValidity("maxCount", false);`
`56`	`57`	`}`
`57`	`58`	`else {`
`@@ -145,6 +146,10 @@ function contentPickerController($scope, $q, $routeParams, $location, entityReso`
`145`	`146`
`146`	`147`	`$scope.umbProperty.setPropertyActions(propertyActions);`
`147`	`148`	`}`
	`149`	`+`
	`150`	`+ // use these to avoid the nested property lookups/null-checks`
	`151`	`+ $scope.minNumberOfItems = $scope.model.config.minNumber ? parseInt($scope.model.config.minNumber) : 0;`
	`152`	`+ $scope.maxNumberOfItems = $scope.model.config.maxNumber ? parseInt($scope.model.config.maxNumber) : 0;`
`148`	`153`	`}`
`149`	`154`
`150`	`155`	`//Umbraco persists boolean for prevalues as "0" or "1" so we need to convert that!`
`@@ -194,7 +199,7 @@ function contentPickerController($scope, $q, $routeParams, $location, entityReso`
`194`	`199`	`dialogOptions.dataTypeKey = $scope.model.dataTypeKey;`
`195`	`200`
`196`	`201`	`// if we can't pick more than one item, explicitly disable multiPicker in the dialog options`
`197`		`- if ($scope.model.config.maxNumber && parseInt($scope.model.config.maxNumber) === 1) {`
	`202`	`+ if ($scope.maxNumberOfItems === 1) {`
`198`	`203`	`dialogOptions.multiPicker = false;`
`199`	`204`	`}`
`200`	`205`