Browse Source

HUE-5932 [metadata] Add client-side validation to the tag editor

Johan Ahlen 8 năm trước cách đây
mục cha
commit
91cc5e1c96

Những thai đổi đã bị hủy bỏ vì nó quá lớn
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue.css


Những thai đổi đã bị hủy bỏ vì nó quá lớn
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue3-extra.css


+ 20 - 0
desktop/core/src/desktop/static/desktop/js/ko.hue-bindings.js

@@ -269,6 +269,21 @@
       var options = valueAccessor();
       var $element = $(element);
 
+      var validRegExp = options.validRegExp ? new RegExp(options.validRegExp) : undefined;
+
+      var showErrorMessage = function () {
+        var $errorWrapper = $element.siblings('.selectize-error');
+        if (options.invalidMessage && $errorWrapper.length > 0) {
+          $errorWrapper.find('.message').text(options.invalidMessage);
+          $errorWrapper.show();
+          window.setTimeout(function () {
+            $errorWrapper.fadeOut(400, function () {
+              $errorWrapper.hide();
+            })
+          }, 4000);
+        }
+      };
+
       options = $.extend({
         plugins: ['remove_button'],
         options: $.map(options.setTags(), function (value) { return { value: value, text: value } }),
@@ -278,6 +293,11 @@
         persist: true,
         preload: true,
         create: function(input) {
+          if (typeof validRegExp !== 'undefined' && !validRegExp.test(input)) {
+            showErrorMessage();
+            return false;
+          }
+
           return {
             value: input.replace(/\s/g, '-'),
             text: input.replace(/\s/g, '-')

+ 2 - 0
desktop/core/src/desktop/static/desktop/less/hue-attributes.less

@@ -28,6 +28,8 @@
 @hue-primary-color-dark: #338BB8;
 @hue-primary-color-light: #DBE8F1;
 
+@hue-error-color: @cui-red-400;
+
 @hue-panel-border-radius: 2px;
 
 .hue-ease-transition(@attributes) {

+ 5 - 0
desktop/core/src/desktop/static/desktop/less/hue.less

@@ -942,4 +942,9 @@ a:visited {
   input.search-query {
     width: 70px;
   }
+}
+
+.selectize-error {
+  color: @hue-error-color;
+  font-size: 12px;
 }

+ 5 - 0
desktop/core/src/desktop/static/desktop/less/hue3-extra.less

@@ -21,3 +21,8 @@
 
 @import "hue-assist";
 @import "hue-autocomplete";
+
+.selectize-error {
+  color: @hue-error-color;
+  font-size: 12px;
+}

+ 3 - 0
desktop/core/src/desktop/templates/nav_components.mako

@@ -32,8 +32,11 @@ from django.utils.translation import ugettext as _
           readOnly: '${ readOnly }' === 'True',
           setTags: currentTags,
           onSave: onSave,
+          validRegExp: '^[a-zA-z0-9_\-]{1,50}$',
+          invalidMessage: '${_ko("Tags can only contain 1 to 50 alphanumeric characters, '_' or '-'.")}',
           load: loadTags
         }"></textarea>
+       <div class="selectize-error" style="display: none;"><i class="fa fa-exclamation-triangle"></i> <span class="message"></span></div>
      </div>
   </script>
 

Một số tệp đã không được hiển thị bởi vì quá nhiều tập tin thay đổi trong này khác