Check for selectable tags before opening tag selection modal (#112)

extensions/tags/js/src/forum/addTagComposer.js

@@ -1,9 +1,11 @@
 import { extend, override } from 'flarum/extend';
 import IndexPage from 'flarum/components/IndexPage';
 import DiscussionComposer from 'flarum/components/DiscussionComposer';
+import classList from 'flarum/utils/classList';
 
 import TagDiscussionModal from './components/TagDiscussionModal';
 import tagsLabel from '../common/helpers/tagsLabel';
+import getSelectableTags from './utils/getSelectableTags';
 
 export default function () {
   extend(IndexPage.prototype, 'newDiscussionAction', function (promise) {
@@ -20,6 +22,10 @@ export default function () {
 
   // Add tag-selection abilities to the discussion composer.
   DiscussionComposer.prototype.chooseTags = function () {
+    const selectableTags = getSelectableTags();
+
+    if (!selectableTags.length) return;
+
     app.modal.show(TagDiscussionModal, {
       selectedTags: (this.composer.fields.tags || []).slice(0),
       onsubmit: tags => {
@@ -33,9 +39,10 @@ export default function () {
   // title.
   extend(DiscussionComposer.prototype, 'headerItems', function (items) {
     const tags = this.composer.fields.tags || [];
+    const selectableTags = getSelectableTags();
 
     items.add('tags', (
-      <a className="DiscussionComposer-changeTags" onclick={this.chooseTags.bind(this)}>
+      <a className={classList(['DiscussionComposer-changeTags', !selectableTags.length && 'disabled'])} onclick={this.chooseTags.bind(this)}>
         {tags.length
           ? tagsLabel(tags)
           : <span className="TagLabel untagged">{app.translator.trans('flarum-tags.forum.composer_discussion.choose_tags_link')}</span>}
@@ -47,9 +54,12 @@ export default function () {
     const chosenTags = this.composer.fields.tags || [];
     const chosenPrimaryTags = chosenTags.filter(tag => tag.position() !== null && !tag.isChild());
     const chosenSecondaryTags = chosenTags.filter(tag => tag.position() === null);
-    if (!chosenTags.length
-      || (chosenPrimaryTags.length < app.forum.attribute('minPrimaryTags'))
-      || (chosenSecondaryTags.length < app.forum.attribute('minSecondaryTags'))) {
+    const selectableTags = getSelectableTags();
+
+    if ((!chosenTags.length
+          || (chosenPrimaryTags.length < app.forum.attribute('minPrimaryTags'))
+          || (chosenSecondaryTags.length < app.forum.attribute('minSecondaryTags'))
+        ) && selectableTags.length) {
       app.modal.show(TagDiscussionModal, {
           selectedTags: chosenTags,
           onsubmit: tags => {

extensions/tags/js/src/forum/components/TagDiscussionModal.js

@@ -10,18 +10,13 @@ import Stream from 'flarum/utils/Stream';
 import tagLabel from '../../common/helpers/tagLabel';
 import tagIcon from '../../common/helpers/tagIcon';
 import sortTags from '../../common/utils/sortTags';
+import getSelectableTags from '../utils/getSelectableTags';
 
 export default class TagDiscussionModal extends Modal {
   oninit(vnode) {
     super.oninit(vnode);
 
-    this.tags = app.store.all('tags');
-
-    if (this.attrs.discussion) {
-      this.tags = this.tags.filter(tag => tag.canAddToDiscussion() || this.attrs.discussion.tags().indexOf(tag) !== -1);
-    } else {
-      this.tags = this.tags.filter(tag => tag.canStartDiscussion());
-    }
+    this.tags = getSelectableTags(this.attrs.discussion);
 
     this.tags = sortTags(this.tags);
 

extensions/tags/js/src/forum/utils/getSelectableTags.js

@@ -0,0 +1,11 @@
+export default function getSelectableTags(discussion) {
+  let tags = app.store.all('tags');
+
+  if (discussion) {
+    tags = tags.filter(tag => tag.canAddToDiscussion() || discussion.tags().indexOf(tag) !== -1);
+  } else {
+    tags = tags.filter(tag => tag.canStartDiscussion());
+  }
+
+  return tags;
+}

extensions/tags/less/forum.less

@@ -25,6 +25,11 @@
 .DiscussionComposer-changeTags {
   margin-right: 15px;
   vertical-align: 2px;
+
+  &.disabled {
+    opacity: 0.5;
+    cursor: default;
+  }
 }
 .DiscussionListItem-info > .item-tags {
   margin-right: 4px;