Merge pull request #81 from paviliondev/similar-topics-impr

IMPR: added a state for insufficient characters

assets/javascripts/wizard/components/similar-topics-validator.js.es6

@@ -18,9 +18,6 @@ export default WizardFieldValidator.extend({
   noSimilarTopics: computed('similarTopics', function() {
     return this.similarTopics !== null && this.similarTopics.length == 0;
   }),
-  showDefault: computed('hasNotSearched', 'hasInput', 'typing', function() {
-    return this.hasInput && (this.hasNotSearched || this.typing);
-  }),
   showSimilarTopics: computed('typing', 'hasSimilarTopics', function() {
     return this.hasSimilarTopics && !this.typing;
   }),
@@ -28,7 +25,10 @@ export default WizardFieldValidator.extend({
     return this.noSimilarTopics && !this.typing;
   }),
   hasValidationCategories: notEmpty('validationCategories'),
-  showValidationCategories: and('showDefault', 'hasValidationCategories'),
+  insufficientCharacters: computed('typing', 'field.value', function() {
+    return this.hasInput && this.field.value.length < 5 && !this.typing;
+  }),
+  insufficientCharactersCategories: and('insufficientCharacters', 'hasValidationCategories'),
   
   @discourseComputed('validation.categories')
   validationCategories(categoryIds) {
@@ -46,15 +46,15 @@ export default WizardFieldValidator.extend({
     'loading',
     'showSimilarTopics',
     'showNoSimilarTopics',
-    'showValidationCategories',
-    'showDefault'
+    'insufficientCharacters',
+    'insufficientCharactersCategories'
   )
   currentState(
     loading,
     showSimilarTopics,
     showNoSimilarTopics,
-    showValidationCategories,
-    showDefault
+    insufficientCharacters,
+    insufficientCharactersCategories
   ) {
     switch (true) {
       case loading:
@@ -63,10 +63,10 @@ export default WizardFieldValidator.extend({
         return 'results';
       case showNoSimilarTopics:
         return 'no_results';
-      case showValidationCategories:
-        return 'default_categories';
-      case showDefault:
-        return 'default';
+      case insufficientCharactersCategories:
+        return 'insufficient_characters_categories';
+      case insufficientCharacters:
+        return 'insufficient_characters';
       default:
         return false;
     }
@@ -97,11 +97,6 @@ export default WizardFieldValidator.extend({
     
     this.set("typing", true);
     
-    if (value && value.length < 5) {
-      this.set('similarTopics', null);
-      return;
-    }
-    
     const lastKeyUp = new Date();
     this._lastKeyUp = lastKeyUp;
 
@@ -114,6 +109,11 @@ export default WizardFieldValidator.extend({
       }
       this.set("typing", false);
 
+      if (value && value.length < 5) {
+        this.set('similarTopics', null);
+        return;
+      }
+
       this.updateSimilarTopics();
     }, 1000);
   },

assets/javascripts/wizard/templates/components/similar-topics-validator.hbs

@@ -1,6 +1,6 @@
 <label class={{currentStateClass}}>
   {{#if currentState}}
-    {{#if showValidationCategories}}
+    {{#if insufficientCharactersCategories}}
       {{html-safe (i18n currentStateKey catLinks=catLinks)}}
     {{else}}
       {{i18n currentStateKey}}

config/locales/client.en.yml

@@ -528,8 +528,8 @@ en:
     
     realtime_validations:
       similar_topics:
-        default: "When you stop typing we'll look for similar topics."
-        default_categories: "When you stop typing we'll look for similar topics in %{catLinks}"
+        insufficient_characters: "Type a minimum 5 characters to start looking for similar topics"
+        insufficient_characters_categories: "Type a minimum 5 characters to start looking for similar topics in %{catLinks}"
         results: "Your topic is similar to..."
         no_results: "No similar topics."
         loading: "Looking for similar topics..."