From 548db91c76fd295a7369a27c75d5a614d68a0190 Mon Sep 17 00:00:00 2001 From: Joffrey JAFFEUX Date: Wed, 14 Feb 2018 00:30:09 +0100 Subject: [PATCH] FIX: displays an error when reaching tags limit --- .../components/mini-tag-chooser.js.es6 | 44 ++++++++++++++----- .../select-kit/components/select-kit.js.es6 | 9 ++-- .../templates/components/select-kit.hbs | 4 +- .../select-kit/select-kit-collection.hbs | 34 +++++++------- .../common/select-kit/select-kit.scss | 5 +++ config/locales/client.en.yml | 1 + 6 files changed, 67 insertions(+), 30 deletions(-) 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 abce533ffcd..9f12c5c58f9 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 @@ -14,16 +14,33 @@ export default ComboBox.extend({ filterable: true, noTags: Ember.computed.empty("computedTags"), allowAny: true, + maximumSelectionSize: Ember.computed.alias("siteSettings.max_tags_per_topic"), caretUpIcon: Ember.computed.alias("caretIcon"), caretDownIcon: Ember.computed.alias("caretIcon"), - @computed("computedTags", "siteSettings.max_tags_per_topic") - caretIcon(computedTags, maxTagsPerTopic) { - if (computedTags.length >= maxTagsPerTopic) { - return null; + @computed("limitReached", "maximumSelectionSize") + maxContentRow(limitReached, count) { + if (limitReached) { + return I18n.t("select_kit.max_content_reached", { count }); + } + }, + + mutateAttributes() { + this.set("value", null); + }, + + @computed("limitReached") + caretIcon(limitReached) { + return limitReached ? null : "plus"; + }, + + @computed("computedTags.[]", "maximumSelectionSize") + limitReached(computedTags, maximumSelectionSize) { + if (computedTags.length >= maximumSelectionSize) { + return true; } - return "plus"; + return false; }, init() { @@ -46,6 +63,10 @@ export default ComboBox.extend({ }, validateCreate(term) { + if (this.get("limitReached")) { + return false; + } + const filterRegexp = new RegExp(this.site.tags_filter_regexp, "g"); term = term.replace(filterRegexp, "").trim().toLowerCase(); @@ -65,6 +86,10 @@ export default ComboBox.extend({ this.site.get("can_create_tag"); }, + filterComputedContent(computedContent) { + return computedContent; + }, + didRender() { this._super(); @@ -143,13 +168,16 @@ export default ComboBox.extend({ computeHeaderContent() { let content = this.baseHeaderComputedContent(); + const joinedTags = this.get("computedTags").join(", "); if (isEmpty(this.get("computedTags"))) { content.label = I18n.t("tagging.choose_for_topic"); } else { - content.label = this.get("computedTags").join(", "); + content.label = joinedTags; } + content.title = content.name = content.value = joinedTags; + return content; }, @@ -183,10 +211,6 @@ export default ComboBox.extend({ } }, - muateAttributes() { - this.set("value", null); - }, - _searchTags(query) { this.startLoading(); 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 ab9852b1541..b8bdf5c6674 100644 --- a/app/assets/javascripts/select-kit/components/select-kit.js.es6 +++ b/app/assets/javascripts/select-kit/components/select-kit.js.es6 @@ -37,7 +37,6 @@ export default Ember.Component.extend(UtilsMixin, PluginApiMixin, DomHelpersMixi tabindex: 0, none: null, highlightedValue: null, - noContentLabel: "select_kit.no_content", valueAttribute: "id", nameProperty: "name", autoFilterable: false, @@ -70,6 +69,8 @@ export default Ember.Component.extend(UtilsMixin, PluginApiMixin, DomHelpersMixi allowContentReplacement: false, collectionHeader: null, allowAutoSelectFirst: true, + maximumSelectionSize: null, + maxContentRow: null, init() { this._super(); @@ -155,8 +156,10 @@ export default Ember.Component.extend(UtilsMixin, PluginApiMixin, DomHelpersMixi }, @computed("filter", "filteredComputedContent.[]") - shouldDisplayNoContentRow(filter, filteredComputedContent) { - return filter.length > 0 && filteredComputedContent.length === 0; + noContentRow(filter, filteredComputedContent) { + if (filter.length > 0 && filteredComputedContent.length === 0) { + return I18n.t("select_kit.no_content"); + } }, @computed("filter", "filterable", "autoFilterable", "renderedFilterOnce") diff --git a/app/assets/javascripts/select-kit/templates/components/select-kit.hbs b/app/assets/javascripts/select-kit/templates/components/select-kit.hbs index 5e6e936db4a..cd92fb83122 100644 --- a/app/assets/javascripts/select-kit/templates/components/select-kit.hbs +++ b/app/assets/javascripts/select-kit/templates/components/select-kit.hbs @@ -40,11 +40,11 @@ select=(action "select") highlight=(action "highlight") create=(action "create") - noContentLabel=noContentLabel highlightedValue=highlightedValue computedValue=computedValue - shouldDisplayNoContentRow=shouldDisplayNoContentRow rowComponentOptions=rowComponentOptions + noContentRow=noContentRow + maxContentRow=maxContentRow }} {{/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 bb02559029f..35d46789dd3 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,22 +30,26 @@ }} {{/if}} -{{#each filteredComputedContent as |computedContent|}} - {{component rowComponent - computedContent=computedContent - highlightedValue=highlightedValue - computedValue=computedValue - templateForRow=templateForRow - select=select - highlight=highlight - options=rowComponentOptions - }} -{{/each}} - -{{#if shouldDisplayNoContentRow}} - {{#if noContentLabel}} +{{#if maxContentRow}} +
  • + {{maxContentRow}} +
    • +{{else}} + {{#if noContentRow}}
  • - {{i18n noContentLabel}} + {{noContentRow}}
    • + {{else}} + {{#each filteredComputedContent as |computedContent|}} + {{component rowComponent + computedContent=computedContent + highlightedValue=highlightedValue + computedValue=computedValue + templateForRow=templateForRow + select=select + highlight=highlight + options=rowComponentOptions + }} + {{/each}} {{/if}} {{/if}} diff --git a/app/assets/stylesheets/common/select-kit/select-kit.scss b/app/assets/stylesheets/common/select-kit/select-kit.scss index 91e7fe922f7..b5c1597ef32 100644 --- a/app/assets/stylesheets/common/select-kit/select-kit.scss +++ b/app/assets/stylesheets/common/select-kit/select-kit.scss @@ -165,6 +165,11 @@ white-space: nowrap; } + &.max-content { + white-space: nowrap; + color: $danger; + } + .name { margin: 0; overflow: hidden; diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml index fa7006c6cad..383e3007066 100644 --- a/config/locales/client.en.yml +++ b/config/locales/client.en.yml @@ -1184,6 +1184,7 @@ en: no_content: No matches found filter_placeholder: Search... create: "Create: '{{content}}'" + max_content_reached: "You can only select {{count}} items." emoji_picker: filter_placeholder: Search for emoji