diff --git a/webadmin/src/js/index.js b/webadmin/src/js/index.js index 75d234491..9813e7440 100644 --- a/webadmin/src/js/index.js +++ b/webadmin/src/js/index.js @@ -316,3 +316,118 @@ app.directive('ngClickSelect', function () { } }; }); + +// https://codepen.io/webmatze/pen/isuHh +app.directive('tagInput', function () { + return { + restrict: 'E', + scope: { + inputTags: '=taglist', + autocomplete: '=autocomplete' + }, + link: function ($scope, element, attrs) { + $scope.defaultWidth = 200; + $scope.tagText = ''; + $scope.placeholder = attrs.placeholder; + if ($scope.autocomplete) { + $scope.autocompleteFocus = function (event, ui) { + $(element).find('input').val(ui.item.value); + return false; + }; + $scope.autocompleteSelect = function (event, ui) { + $scope.$apply('tagText=\'' + ui.item.value + '\''); + $scope.$apply('addTag()'); + return false; + }; + $(element).find('input').autocomplete({ + minLength: 0, + source: function (request, response) { + var item; + return response(function () { + var i, len, ref, results; + ref = $scope.autocomplete; + results = []; + for (i = 0, len = ref.length; i < len; i++) { + if (window.CP.shouldStopExecution(1)) { + break; + } + item = ref[i]; + if (item.toLowerCase().indexOf(request.term.toLowerCase()) !== -1) { + results.push(item); + } + } + window.CP.exitedLoop(1); + return results; + }()); + }, + focus: function (event, ui) { + return $scope.autocompleteFocus(event, ui); + }, + select: function (event, ui) { + return $scope.autocompleteSelect(event, ui); + } + }); + } + $scope.tagArray = function () { + if ($scope.inputTags === undefined) { + return []; + } + return $scope.inputTags.split(',').filter(function (tag) { + return tag !== ''; + }); + }; + $scope.addTag = function () { + var tagArray; + if ($scope.tagText.length === 0) { + return; + } + tagArray = $scope.tagArray(); + tagArray.push($scope.tagText); + $scope.inputTags = tagArray.join(','); + return $scope.tagText = ''; + }; + $scope.deleteTag = function (key) { + var tagArray; + tagArray = $scope.tagArray(); + if (tagArray.length > 0 && $scope.tagText.length === 0 && key === undefined) { + tagArray.pop(); + } else { + if (key !== undefined) { + tagArray.splice(key, 1); + } + } + return $scope.inputTags = tagArray.join(','); + }; + $scope.$watch('tagText', function (newVal, oldVal) { + var tempEl; + if (!(newVal === oldVal && newVal === undefined)) { + tempEl = $('' + newVal + '').appendTo('body'); + $scope.inputWidth = tempEl.width() + 5; + if ($scope.inputWidth < $scope.defaultWidth) { + $scope.inputWidth = $scope.defaultWidth; + } + return tempEl.remove(); + } + }); + element.bind('keydown', function (e) { + var key; + key = e.which; + if (key === 9 || key === 13) { + e.preventDefault(); + } + if (key === 8) { + return $scope.$apply('deleteTag()'); + } + }); + return element.bind('keyup', function (e) { + var key; + key = e.which; + if (key === 9 || key === 13 || key === 188) { + e.preventDefault(); + return $scope.$apply('addTag()'); + } + }); + }, + template: '
{{tag}}
×
' + }; +}); diff --git a/webadmin/src/theme.scss b/webadmin/src/theme.scss index c3fb1a651..6a0bda6d4 100644 --- a/webadmin/src/theme.scss +++ b/webadmin/src/theme.scss @@ -1054,3 +1054,53 @@ $graphs-success-alt: lighten(#27CE65, 20%); width: 200px; } } + +// ---------------------------- +// Tag Input +// ---------------------------- +// https://codepen.io/webmatze/pen/isuHh + +.tag-input-ctn { + border: 1px solid #ccc; + padding: 2px 3px; + display: inline-block; + width: 500px; + border-radius: 3px; + box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.075); + + input { + display: inline-block; + float: left; + height: 18px; + padding: 0px; + font-size: 14px; + line-height: 18px; + color: black; + border: 0px; + margin: 2px; + &:focus { + outline: 0; + box-shadow: 0px; + } + } + .input-tag { + padding: 2px 4px; + line-height: 12px; + font-size: 11px; + background-color: #e3eaf6; + display: inline-block; + float: left; + border-radius: 2px; + margin: 2px 5px 2px 0px; + border: 1px solid #a9b6d2; + .delete-tag { + display: inline-block; + font-size: 12px; + cursor: pointer; + padding: 0px 2px; + &:hover { + background-color: #96b4d2; + } + } + } +} diff --git a/webadmin/src/views/users.html b/webadmin/src/views/users.html index 424bcff6e..7c8fce426 100644 --- a/webadmin/src/views/users.html +++ b/webadmin/src/views/users.html @@ -122,6 +122,7 @@
+