IMPR: simplified similar topics template (#73)

* IMPR: simplified similar topics template

* renamed label to key

* minor formatting

* added dasherize logic for classnames

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

@@ -7,6 +7,7 @@ import EmberObject, { computed } from "@ember/object";
 import { notEmpty, and, equal, empty } from "@ember/object/computed";
 import discourseComputed from "discourse-common/utils/decorators";
 import { categoryBadgeHTML } from "discourse/helpers/category-link";
+import { dasherize } from "@ember/string";
 
 export default WizardFieldValidator.extend({
   classNames: ['similar-topics-validator'],
@@ -27,6 +28,7 @@ export default WizardFieldValidator.extend({
     return this.noSimilarTopics && !this.typing;
   }),
   hasValidationCategories: notEmpty('validationCategories'),
+  showValidationCategories: and('showDefault', 'hasValidationCategories'),
   
   @discourseComputed('validation.categories')
   validationCategories(categoryIds) {
@@ -39,7 +41,51 @@ export default WizardFieldValidator.extend({
   catLinks(categories) {
     return categories.map(category => categoryBadgeHTML(category)).join("");
   },
-  
+
+  @discourseComputed(
+    'loading',
+    'showSimilarTopics',
+    'showNoSimilarTopics',
+    'showValidationCategories',
+    'showDefault'
+  )
+  currentState(
+    loading,
+    showSimilarTopics,
+    showNoSimilarTopics,
+    showValidationCategories,
+    showDefault
+  ) {
+    switch (true) {
+      case loading:
+        return 'loading';
+      case showSimilarTopics:
+        return 'results';
+      case showNoSimilarTopics:
+        return 'no_results';
+      case showValidationCategories:
+        return 'default_categories';
+      case showDefault:
+        return 'default';
+      default:
+        return false;
+    }
+  },
+
+  @discourseComputed('currentState')
+  currentStateClass (currentState) {
+    if (currentState) return `similar-topics-${dasherize(currentState)}`;
+
+    return "similar-topics";
+  },
+
+  @discourseComputed('currentState')
+  currentStateKey (currentState) {
+    if (currentState) return `realtime_validations.similar_topics.${currentState}`;
+
+    return false;
+  },
+
   validate() {},
 
   @observes("field.value")

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

@@ -1,16 +1,13 @@
-{{#if loading}}
+<label class={{currentStateClass}}>
-  <label>{{i18n 'realtime_validations.similar_topics.loading'}}</label>
+  {{#if currentState}}
-{{else if showSimilarTopics}}
+    {{#if showValidationCategories}}
-  <label>{{i18n 'realtime_validations.similar_topics.results'}}</label>
+      {{html-safe (i18n currentStateKey catLinks=catLinks)}}
-  {{wizard-similar-topics topics=similarTopics}}
+    {{else}}
-{{else if showNoSimilarTopics}}
+      {{i18n currentStateKey}}
-  <label>{{i18n 'realtime_validations.similar_topics.no_results'}}</label>
+    {{/if}}
-{{else if showDefault}}
-  {{#if hasValidationCategories}}
-    <label>{{{i18n 'realtime_validations.similar_topics.default_categories' catLinks=catLinks}}}</label>
-  {{else}}
-    <label>{{i18n 'realtime_validations.similar_topics.default'}}</label>
   {{/if}}
-{{else}}
+</label>
-  <label></label>
+
-{{/if}}
+{{#if showSimilarTopics}}
+  {{wizard-similar-topics topics=similarTopics}}
+{{/if}}