swcs/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Remove empty strings from repeatable textstrings whitespace (#8269)

Browse Source
This commit is contained in:
Bjarne Fyrstenborg
2020-07-09 17:14:01 +02:00
committed by GitHub
parent c019872eb4
commit b5c099b15a
2 changed files with 38 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Umbraco.Web.UI.Client/src/views/propertyeditors/multipletextbox/multipletextbox.controller.js
+26 -13
View File
@@ -17,7 +17,7 @@
$scope.model.value = [];
}
//add any fields that there isn't values for
// Add any fields that there isn't values for
if ($scope.model.config.min > 0) {
for (var i = 0; i < $scope.model.config.min; i++) {
if ((i + 1) > $scope.model.value.length) {
@@ -37,7 +37,7 @@
if ($scope.model.config.max <= 0 && txtBoxValue.value || $scope.model.value.length < $scope.model.config.max && txtBoxValue.value) {
var newItemIndex = index + 1;
$scope.model.value.splice(newItemIndex, 0, { value: "" });
//Focus on the newly added value
// Focus on the newly added value
$scope.model.value[newItemIndex].hasFocus = true;
}
break;
@@ -47,7 +47,7 @@
var remainder = [];
// Used to require an extra hit on backspace for the field to be removed
if(txtBoxValue.value === "") {
if (txtBoxValue.value === "") {
backspaceHits++;
} else {
backspaceHits = 0;
@@ -64,11 +64,11 @@
var prevItemIndex = index - 1;
//Set focus back on false as the directive only watches for true
if(prevItemIndex >= 0) {
// Set focus back on false as the directive only watches for true
if (prevItemIndex >= 0) {
$scope.model.value[prevItemIndex].hasFocus = false;
$timeout(function () {
//Focus on the previous value
// Focus on the previous value
$scope.model.value[prevItemIndex].hasFocus = true;
});
}
@@ -81,12 +81,13 @@
default:
}
validate();
}
};
$scope.add = function () {
if ($scope.model.config.max <= 0 || $scope.model.value.length < $scope.model.config.max) {
$scope.model.value.push({ value: "" });
// focus new value
// Focus new value
var newItemIndex = $scope.model.value.length - 1;
$scope.model.value[newItemIndex].hasFocus = true;
}
@@ -106,7 +107,7 @@
$scope.model.value = remainder;
};
$scope.showPrompt = function (idx, item){
$scope.showPrompt = function (idx, item) {
var i = $scope.model.value.indexOf(item);
@@ -114,11 +115,11 @@
if (i === idx) {
$scope.promptIsVisible = i;
}
}
};
$scope.hidePrompt = function(){
$scope.hidePrompt = function () {
$scope.promptIsVisible = "-1";
}
};
function validate() {
if ($scope.multipleTextboxForm) {
@@ -126,10 +127,22 @@
$scope.multipleTextboxForm.mandatory.$setValidity("minCount", !invalid);
}
}
$timeout(function () {
validate();
});
// We always need to ensure we dont submit anything broken
var unsubscribe = $scope.$on("formSubmitting", function (ev, args) {
// Filter to items with values
$scope.model.value = $scope.model.value.filter(el => el.value.trim() !== "") || [];
});
// When the scope is destroyed we need to unsubscribe
$scope.$on('$destroy', function () {
unsubscribe();
});
}
angular.module("umbraco").controller("Umbraco.PropertyEditors.MultipleTextBoxController", MultipleTextBoxController);
src/Umbraco.Web.UI.Client/src/views/propertyeditors/multipletextbox/multipletextbox.html
+12 -6
View File
@@ -2,14 +2,18 @@
<ng-form name="multipleTextboxForm">
<div ui-sortable="sortableOptions" ng-model="model.value">
<div class="flex flex-wrap textbox-wrapper" ng-repeat="item in model.value track by $index">
<input type="text" name="item_{{$index}}" ng-model="item.value" class="umb-property-editor umb-textstring textstring flx-i"
ng-keyup="addRemoveOnKeyDown($event, $index)" focus-when="{{item.hasFocus}}"/>
<input type="text" name="item_{{$index}}" ng-model="item.value"
class="umb-property-editor umb-textstring textstring flx-i"
ng-trim="false"
ng-keyup="addRemoveOnKeyDown($event, $index)"
focus-when="{{item.hasFocus}}" />
<div class="icon-wrapper">
<i class="icon icon-navigation handle" localize="title" title="@general_move"></i>
<div class="umb-multiple-textbox__confirm" ng-show="model.value.length > model.config.min">
<button class="umb-multiple-textbox__confirm-action" type="button" prevet-default ng-click="showPrompt($index, item)" localize="title" title="@content_removeTextBox">
<i class="icon-trash"></i>
<button type="button" class="umb-multiple-textbox__confirm-action" ng-click="showPrompt($index, item)" localize="title" title="@content_removeTextBox">
<i class="icon-trash" aria-hidden="true"></i>
</button>
<umb-confirm-action
@@ -22,11 +26,13 @@
</div>
</div>
</div>
<a prevent-default href="" class="add-link" localize="title" title="@content_addTextBox"
<button type="button" class="add-link" localize="title" title="@content_addTextBox"
ng-show="model.config.max <= 0 || model.value.length < model.config.max"
ng-click="add()">
<localize key="general_add">Add</localize>
</a>
</button>
<input type="hidden" name="mandatory" ng-model="model.value" />
</ng-form>
</div>