Skip to content

Commit

Permalink
contentpicker: Don't validate minNumber if empty and not mandatory (u…
Browse files Browse the repository at this point in the history 
…mbraco#11330)

* 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 <[email protected]>
  • Loading branch information
@daniel-shuy @nathanwoulfe
daniel-shuy and nathanwoulfe authored Oct 19, 2021
1 parent 5f97fca commit 6e04cc7
Show file tree
Hide file tree
Showing 2 changed files with 26 additions and 21 deletions.
11 changes: 8 additions & 3 deletions ...Umbraco.Web.UI.Client/src/views/propertyeditors/contentpicker/contentpicker.controller.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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!
Expand Down Expand Up @@ -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;
}

Expand Down
36 changes: 18 additions & 18 deletions src/Umbraco.Web.UI.Client/src/views/propertyeditors/contentpicker/contentpicker.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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()"
Expand All @@ -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>
Expand All @@ -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>

Expand Down

0 comments on commit 6e04cc7

Please sign in to comment.