FEATURE: implements minimum selection for select-kit

app/assets/javascripts/discourse/templates/tag-groups-show.hbs

@@ -15,7 +15,7 @@
     {{tag-chooser
       tags=model.parent_tag_name
       everyTag=true
-      limit=1
+      maximum=1
       allowCreate=true
       filterPlaceholder="tagging.groups.parent_tag_placeholder"}}
     <span class="description">{{i18n 'tagging.groups.parent_tag_description'}}</span>

app/assets/javascripts/select-kit/components/mini-tag-chooser.js.es6

@@ -34,12 +34,12 @@ export default ComboBox.extend(Tags, {
       });
     });
 
-    this.set("limit", parseInt(this.get("limit") || this.get("siteSettings.max_tags_per_topic")));
+    this.set("maximum", parseInt(this.get("limit") || this.get("maximum") || this.get("siteSettings.max_tags_per_topic")));
   },
 
-  @computed("hasReachedLimit")
-  caretIcon(hasReachedLimit) {
-    return hasReachedLimit ? null : "plus fa-fw";
+  @computed("hasReachedMaximum")
+  caretIcon(hasReachedMaximum) {
+    return hasReachedMaximum ? null : "plus fa-fw";
   },
 
   @computed("tags")
@@ -135,6 +135,12 @@ export default ComboBox.extend(Tags, {
       content.label = joinedTags;
     }
 
+    if (!this.get("hasReachedMinimum") && isEmpty(this.get("selection"))) {
+      const key = this.get("minimumLabel") || "select_kit.min_content_not_reached";
+      const label = I18n.t(key, { count: this.get("minimum") });
+      content.title = content.name = content.label = label;
+    }
+
     content.title = content.name = content.value = joinedTags;
 
     return content;

app/assets/javascripts/select-kit/components/multi-select.js.es6

@@ -140,10 +140,23 @@ export default SelectKitComponent.extend({
   },
 
   computeHeaderContent() {
-    return {
+    let content = {
       title: this.get("title"),
       selection: this.get("selection")
     };
+
+    if (this.get("noneLabel")) {
+      if (!this.get("hasSelection")) {
+        content.title = content.name = content.label = I18n.t(this.get("noneLabel"));
+      }
+    } else {
+      if (!this.get("hasReachedMinimum")) {
+        const key = this.get("minimumLabel") || "select_kit.min_content_not_reached";
+        content.title = content.name = content.label = I18n.t(key, { count: this.get("minimum") });
+      }
+    }
+
+    return content;
   },
 
   @computed("filter")
@@ -154,7 +167,7 @@ export default SelectKitComponent.extend({
   },
 
   validateSelect() {
-    return this._super() && !this.get("hasReachedLimit");
+    return this._super() && !this.get("hasReachedMaximum");
   },
 
   @computed("computedValues.[]", "computedContent.[]")

app/assets/javascripts/select-kit/components/select-kit.js.es6

@@ -25,7 +25,8 @@ export default Ember.Component.extend(UtilsMixin, PluginApiMixin, DomHelpersMixi
     "isLeftAligned",
     "isRightAligned",
     "hasSelection",
-    "hasReachedLimit",
+    "hasReachedMaximum",
+    "hasReachedMinimum",
   ],
   isDisabled: false,
   isExpanded: false,
@@ -71,6 +72,10 @@ export default Ember.Component.extend(UtilsMixin, PluginApiMixin, DomHelpersMixi
   collectionHeader: null,
   allowAutoSelectFirst: true,
   highlightedSelection: null,
+  maximum: null,
+  minimum: null,
+  minimumLabel: null,
+  maximumLabel: null,
 
   init() {
     this._super();
@@ -188,14 +193,22 @@ export default Ember.Component.extend(UtilsMixin, PluginApiMixin, DomHelpersMixi
     }
   },
 
-  validateCreate() { return !this.get("hasReachedLimit"); },
+  validateCreate() { return !this.get("hasReachedMaximum"); },
 
-  validateSelect() { return !this.get("hasReachedLimit"); },
+  validateSelect() { return !this.get("hasReachedMaximum"); },
 
-  @computed("limit", "selection.[]")
-  hasReachedLimit(limit, selection) {
-    if (!limit) return false;
-    return selection.length >= limit;
+  @computed("maximum", "selection.[]")
+  hasReachedMaximum(maximum, selection) {
+    if (!maximum) return false;
+    selection = makeArray(selection);
+    return selection.length >= maximum;
+  },
+
+  @computed("minimum", "selection.[]")
+  hasReachedMinimum(minimum, selection) {
+    if (!minimum) return true;
+    selection = makeArray(selection);
+    return selection.length >= minimum;
   },
 
   @computed("shouldFilter", "allowAny", "filter")
@@ -212,10 +225,16 @@ export default Ember.Component.extend(UtilsMixin, PluginApiMixin, DomHelpersMixi
     }
   },
 
-  @computed("hasReachedLimit", "limit")
-  maxContentRow(hasReachedLimit, limit) {
-    if (hasReachedLimit) {
-      return I18n.t("select_kit.max_content_reached", { count: limit });
+  @computed("hasReachedMaximum", "hasReachedMinimum", "isExpanded")
+  validationMessage(hasReachedMaximum, hasReachedMinimum) {
+    if (hasReachedMaximum && this.get("maximum")) {
+      const key = this.get("maximumLabel") || "select_kit.max_content_reached";
+      return I18n.t(key, { count: this.get("maximum") });
+    }
+
+    if (!hasReachedMinimum && this.get("minimum")) {
+      const key = this.get("minimumLabel") || "select_kit.min_content_not_reached";
+      return I18n.t(key, { count: this.get("minimum") });
     }
   },
 
@@ -227,9 +246,9 @@ export default Ember.Component.extend(UtilsMixin, PluginApiMixin, DomHelpersMixi
     return false;
   },
 
-  @computed("computedValue", "filter", "collectionComputedContent.[]", "hasReachedLimit", "isLoading")
-  shouldDisplayCreateRow(computedValue, filter, collectionComputedContent, hasReachedLimit, isLoading) {
-    if (isLoading || hasReachedLimit) return false;
+  @computed("computedValue", "filter", "collectionComputedContent.[]", "hasReachedMaximum", "isLoading")
+  shouldDisplayCreateRow(computedValue, filter, collectionComputedContent, hasReachedMaximum, isLoading) {
+    if (isLoading || hasReachedMaximum) return false;
     if (collectionComputedContent.map(c => c.value).includes(filter)) return false;
     if (this.get("allowAny") && filter.length > 0 && this.validateCreate(filter)) return true;
     return false;

app/assets/javascripts/select-kit/components/single-select.js.es6

@@ -91,7 +91,7 @@ export default SelectKitComponent.extend({
       name: this.get("selection.name") || this.get("noneRowComputedContent.name")
     };
 
-    if (!this.get("hasSelection") && this.get("noneLabel")) {
+    if (this.get("noneLabel") && !this.get("hasSelection")) {
       content.title = content.name = I18n.t(this.get("noneLabel"));
     }
 
@@ -134,7 +134,7 @@ export default SelectKitComponent.extend({
     return selection !== this.get("noneRowComputedContent") && !isNone(selection);
   },
 
-  @computed("computedValue", "filter", "collectionComputedContent.[]", "hasReachedLimit")
+  @computed("computedValue", "filter", "collectionComputedContent.[]", "hasReachedMaximum", "hasReachedMinimum")
   shouldDisplayCreateRow(computedValue, filter) {
     return this._super() && computedValue !== filter;
   },

app/assets/javascripts/select-kit/components/tag-chooser.js.es6

@@ -37,7 +37,7 @@ export default MultiSelectComponent.extend(Tags, {
     });
 
     if (!this.get("unlimitedTagCount")) {
-      this.set("limit", parseInt(this.get("limit") || this.get("siteSettings.max_tags_per_topic")));
+      this.set("maximum", parseInt(this.get("limit") || this.get("maximum") || this.get("siteSettings.max_tags_per_topic")));
     }
   },
 

app/assets/javascripts/select-kit/mixins/tags.js.es6

@@ -33,7 +33,7 @@ export default Ember.Mixin.create({
   },
 
   validateCreate(term) {
-    if (this.get("hasReachedLimit") || !this.site.get("can_create_tag")) {
+    if (this.get("hasReachedMaximum") || !this.site.get("can_create_tag")) {
       return false;
     }
 

app/assets/javascripts/select-kit/templates/components/multi-select.hbs

@@ -41,7 +41,7 @@
       computedValue=computedValue
       rowComponentOptions=rowComponentOptions
       noContentRow=noContentRow
-      maxContentRow=maxContentRow
+      validationMessage=validationMessage
     }}
   {{/unless}}
   {{/if}}

app/assets/javascripts/select-kit/templates/components/select-kit/select-kit-collection.hbs

@@ -30,26 +30,25 @@
   }}
 {{/if}}
 
-{{#if maxContentRow}}
-  <li class="select-kit-row max-content">
-    {{maxContentRow}}
+{{#if noContentRow}}
+  <li class="select-kit-row no-content">
+    {{noContentRow}}
   </li>
 {{else}}
-  {{#if noContentRow}}
-    <li class="select-kit-row no-content">
-      {{noContentRow}}
-    </li>
-  {{else}}
-    {{#each collectionComputedContent as |computedContent|}}
-      {{component rowComponent
-        computedContent=computedContent
-        highlighted=highlighted
-        computedValue=computedValue
-        templateForRow=templateForRow
-        onClickRow=onClickRow
-        onMouseoverRow=onMouseoverRow
-        options=rowComponentOptions
-      }}
-    {{/each}}
+  {{#if validationMessage}}
+    <div class="validation-message">
+      {{validationMessage}}
+    </div>
   {{/if}}
+  {{#each collectionComputedContent as |computedContent|}}
+    {{component rowComponent
+      computedContent=computedContent
+      highlighted=highlighted
+      computedValue=computedValue
+      templateForRow=templateForRow
+      onClickRow=onClickRow
+      onMouseoverRow=onMouseoverRow
+      options=rowComponentOptions
+    }}
+  {{/each}}
 {{/if}}

app/assets/javascripts/select-kit/templates/components/single-select.hbs

@@ -40,7 +40,7 @@
       computedValue=computedValue
       rowComponentOptions=rowComponentOptions
       noContentRow=noContentRow
-      maxContentRow=maxContentRow
+      validationMessage=validationMessage
     }}
   {{/if}}
 </div>