diff --git a/app/assets/javascripts/discourse/templates/tag-groups-show.hbs b/app/assets/javascripts/discourse/templates/tag-groups-show.hbs
index 032f0ce06eb..55dea80a7c4 100644
--- a/app/assets/javascripts/discourse/templates/tag-groups-show.hbs
+++ b/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"}}
{{i18n 'tagging.groups.parent_tag_description'}}
diff --git a/app/assets/javascripts/select-kit/components/mini-tag-chooser.js.es6 b/app/assets/javascripts/select-kit/components/mini-tag-chooser.js.es6
index bc53b6ba335..740fd9e61be 100644
--- a/app/assets/javascripts/select-kit/components/mini-tag-chooser.js.es6
+++ b/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;
diff --git a/app/assets/javascripts/select-kit/components/multi-select.js.es6 b/app/assets/javascripts/select-kit/components/multi-select.js.es6
index 0635f8b906a..9a9453445b5 100644
--- a/app/assets/javascripts/select-kit/components/multi-select.js.es6
+++ b/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.[]")
diff --git a/app/assets/javascripts/select-kit/components/select-kit.js.es6 b/app/assets/javascripts/select-kit/components/select-kit.js.es6
index eab8ccb7315..a45da128fdd 100644
--- a/app/assets/javascripts/select-kit/components/select-kit.js.es6
+++ b/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;
diff --git a/app/assets/javascripts/select-kit/components/single-select.js.es6 b/app/assets/javascripts/select-kit/components/single-select.js.es6
index 204ff3349c0..65e73840adf 100644
--- a/app/assets/javascripts/select-kit/components/single-select.js.es6
+++ b/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;
},
diff --git a/app/assets/javascripts/select-kit/components/tag-chooser.js.es6 b/app/assets/javascripts/select-kit/components/tag-chooser.js.es6
index 2ddd86b08aa..de5341c32ac 100644
--- a/app/assets/javascripts/select-kit/components/tag-chooser.js.es6
+++ b/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")));
}
},
diff --git a/app/assets/javascripts/select-kit/mixins/tags.js.es6 b/app/assets/javascripts/select-kit/mixins/tags.js.es6
index e90ab473fdf..1c2e10f6f43 100644
--- a/app/assets/javascripts/select-kit/mixins/tags.js.es6
+++ b/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;
}
diff --git a/app/assets/javascripts/select-kit/templates/components/multi-select.hbs b/app/assets/javascripts/select-kit/templates/components/multi-select.hbs
index b3d4f473645..d541cc2c1c4 100644
--- a/app/assets/javascripts/select-kit/templates/components/multi-select.hbs
+++ b/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}}
diff --git a/app/assets/javascripts/select-kit/templates/components/select-kit/select-kit-collection.hbs b/app/assets/javascripts/select-kit/templates/components/select-kit/select-kit-collection.hbs
index 6a7089e9ecd..b673bd18d24 100644
--- a/app/assets/javascripts/select-kit/templates/components/select-kit/select-kit-collection.hbs
+++ b/app/assets/javascripts/select-kit/templates/components/select-kit/select-kit-collection.hbs
@@ -30,26 +30,25 @@
}}
{{/if}}
-{{#if maxContentRow}}
-
- {{maxContentRow}}
+{{#if noContentRow}}
+
+ {{noContentRow}}
{{else}}
- {{#if noContentRow}}
-
- {{noContentRow}}
-
- {{else}}
- {{#each collectionComputedContent as |computedContent|}}
- {{component rowComponent
- computedContent=computedContent
- highlighted=highlighted
- computedValue=computedValue
- templateForRow=templateForRow
- onClickRow=onClickRow
- onMouseoverRow=onMouseoverRow
- options=rowComponentOptions
- }}
- {{/each}}
+ {{#if validationMessage}}
+
+ {{validationMessage}}
+
{{/if}}
+ {{#each collectionComputedContent as |computedContent|}}
+ {{component rowComponent
+ computedContent=computedContent
+ highlighted=highlighted
+ computedValue=computedValue
+ templateForRow=templateForRow
+ onClickRow=onClickRow
+ onMouseoverRow=onMouseoverRow
+ options=rowComponentOptions
+ }}
+ {{/each}}
{{/if}}
diff --git a/app/assets/javascripts/select-kit/templates/components/single-select.hbs b/app/assets/javascripts/select-kit/templates/components/single-select.hbs
index 46128823d3a..e01241d3190 100644
--- a/app/assets/javascripts/select-kit/templates/components/single-select.hbs
+++ b/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}}
diff --git a/app/assets/stylesheets/common/select-kit/select-kit.scss b/app/assets/stylesheets/common/select-kit/select-kit.scss
index 4d43328f846..0ba0af1bf5a 100644
--- a/app/assets/stylesheets/common/select-kit/select-kit.scss
+++ b/app/assets/stylesheets/common/select-kit/select-kit.scss
@@ -171,11 +171,6 @@
white-space: nowrap;
}
- &.max-content {
- white-space: nowrap;
- color: $danger;
- }
-
.name {
margin: 0;
overflow: hidden;
@@ -211,6 +206,14 @@
padding: 0;
max-height: 200px;
+ .validation-message {
+ white-space: nowrap;
+ color: $danger;
+ flex: 1 0 auto;
+ margin: 5px;
+ padding: 0 2px;
+ }
+
.select-kit-collection {
padding: 0;
margin: 0;
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index fb144a214bd..49cb1121f8a 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -1250,7 +1250,8 @@ en:
no_content: No matches found
filter_placeholder: Search...
create: "Create: '{{content}}'"
- max_content_reached: "You can only select {{count}} items."
+ max_content_reached: "You can only select {{count}} item(s)."
+ min_content_not_reached: "Select at least {{count}} item(s)."
emoji_picker:
filter_placeholder: Search for emoji
diff --git a/test/javascripts/components/multi-select-test.js.es6 b/test/javascripts/components/multi-select-test.js.es6
index 349b26d7c63..d77583271c8 100644
--- a/test/javascripts/components/multi-select-test.js.es6
+++ b/test/javascripts/components/multi-select-test.js.es6
@@ -160,3 +160,44 @@ componentTest('with limitMatches', {
andThen(() => assert.equal(this.get('subject').el().find(".select-kit-row").length, 2));
}
});
+
+componentTest('with minimum', {
+ template: '{{multi-select content=content minimum=1}}',
+
+ beforeEach() {
+ this.set('content', ['sam', 'jeff', 'neil']);
+ },
+
+ test(assert) {
+ this.get('subject').expand();
+
+ andThen(() => assert.equal(this.get('subject').validationMessage(), 'Select at least 1 item(s).'));
+
+ this.get('subject').selectRowByValue('sam');
+
+ andThen(() => {
+ assert.equal(this.get('subject').header().label(), 'sam');
+ });
+ }
+});
+
+componentTest('with minimumLabel', {
+ template: '{{multi-select content=content minimum=1 minimumLabel="test.minimum"}}',
+
+ beforeEach() {
+ I18n.translations[I18n.locale].js.test = { minimum: 'min %{count}' };
+ this.set('content', ['sam', 'jeff', 'neil']);
+ },
+
+ test(assert) {
+ this.get('subject').expand();
+
+ andThen(() => assert.equal(this.get('subject').validationMessage(), 'min 1'));
+
+ this.get('subject').selectRowByValue('jeff');
+
+ andThen(() => {
+ assert.equal(this.get('subject').header().label(), 'jeff');
+ });
+ }
+});
diff --git a/test/javascripts/components/single-select-test.js.es6 b/test/javascripts/components/single-select-test.js.es6
index 3cf74cd51ad..619e56ee68d 100644
--- a/test/javascripts/components/single-select-test.js.es6
+++ b/test/javascripts/components/single-select-test.js.es6
@@ -501,3 +501,44 @@ componentTest('with limitMatches', {
andThen(() => assert.equal(this.get('subject').el().find(".select-kit-row").length, 2));
}
});
+
+componentTest('with minimum', {
+ template: '{{single-select content=content minimum=1 allowAutoSelectFirst=false}}',
+
+ beforeEach() {
+ this.set('content', ['sam', 'jeff', 'neil']);
+ },
+
+ test(assert) {
+ this.get('subject').expand();
+
+ andThen(() => assert.equal(this.get('subject').validationMessage(), 'Select at least 1 item(s).'));
+
+ this.get('subject').selectRowByValue('sam');
+
+ andThen(() => {
+ assert.equal(this.get('subject').header().label(), 'sam');
+ });
+ }
+});
+
+componentTest('with minimumLabel', {
+ template: '{{single-select content=content minimum=1 minimumLabel="test.minimum" allowAutoSelectFirst=false}}',
+
+ beforeEach() {
+ I18n.translations[I18n.locale].js.test = { minimum: 'min %{count}' };
+ this.set('content', ['sam', 'jeff', 'neil']);
+ },
+
+ test(assert) {
+ this.get('subject').expand();
+
+ andThen(() => assert.equal(this.get('subject').validationMessage(), 'min 1'));
+
+ this.get('subject').selectRowByValue('jeff');
+
+ andThen(() => {
+ assert.equal(this.get('subject').header().label(), 'jeff');
+ });
+ }
+});
diff --git a/test/javascripts/helpers/select-kit-helper.js b/test/javascripts/helpers/select-kit-helper.js
index 17f5c578c77..a215bdd75bb 100644
--- a/test/javascripts/helpers/select-kit-helper.js
+++ b/test/javascripts/helpers/select-kit-helper.js
@@ -63,6 +63,7 @@ function selectKit(selector) { // eslint-disable-line no-unused-vars
return {
value: function() { return header.attr('data-value'); },
name: function() { return header.attr('data-name'); },
+ label: function() { return header.text().trim(); },
icon: function() { return header.find('.icon'); },
title: function() { return header.attr('title'); },
el: function() { return header; }
@@ -183,6 +184,16 @@ function selectKit(selector) { // eslint-disable-line no-unused-vars
return rowHelper(find(selector).find('.select-kit-row.none'));
},
+ validationMessage: function() {
+ var validationMessage = find(selector).find('.validation-message');
+
+ if (validationMessage.length) {
+ return validationMessage.html().trim();
+ } else {
+ return null;
+ }
+ },
+
selectedRow: function() {
return rowHelper(find(selector).find('.select-kit-row.is-selected'));
},