Merge pull request #854 from amatsuda/integrate_stimulus_controllers

Consolidate three multiselect-related Stimulus controllers into one

Author: amatsuda

app/assets/stylesheets/modules/proposal.css

@@ -171,7 +171,6 @@ div.col-md-4 {
 }
 
 #review-tags-form-wrapper {
-  display: none;
   padding: 0;
   text-align: left;
   #autocomplete-options {

app/javascript/controllers/index.js

@@ -32,7 +32,6 @@ import MaxlengthAlertController from "./maxlength_alert_controller"
 import MentionController from "./mention_controller"
 import ModalAutofocusController from "./modal_autofocus_controller"
 import ModalFormController from "./modal_form_controller"
-import MultiselectController from "./multiselect_controller"
 import NestedFormController from "./nested_form_controller"
 import NextProposalController from "./next_proposal_controller"
 import NotificationsChannelController from "./notifications_channel_controller"
@@ -42,7 +41,6 @@ import ProposalSelectController from "./proposal_select_controller"
 import ProposalsTableController from "./proposals_table_controller"
 import RatingController from "./rating_controller"
 import RemoteModalController from "./remote_modal_controller"
-import ReviewTagsController from "./review_tags_controller"
 import ReviewerTagsController from "./reviewer_tags_controller"
 import ScheduleGridController from "./schedule_grid_controller"
 import ScheduleTabsController from "./schedule_tabs_controller"
@@ -81,7 +79,6 @@ application.register("maxlength-alert", MaxlengthAlertController)
 application.register("mention", MentionController)
 application.register("modal-autofocus", ModalAutofocusController)
 application.register("modal-form", ModalFormController)
-application.register("multiselect", MultiselectController)
 application.register("nested-form", NestedFormController)
 application.register("next-proposal", NextProposalController)
 application.register("notifications-channel", NotificationsChannelController)
@@ -91,7 +88,6 @@ application.register("proposal-select", ProposalSelectController)
 application.register("proposals-table", ProposalsTableController)
 application.register("rating", RatingController)
 application.register("remote-modal", RemoteModalController)
-application.register("review-tags", ReviewTagsController)
 application.register("reviewer-tags", ReviewerTagsController)
 application.register("schedule-grid", ScheduleGridController)
 application.register("schedule-tabs", ScheduleTabsController)

app/javascript/controllers/multiselect_controller.js

@@ -6,19 +6,6 @@ export default class extends Controller {
   toggle() {
     this.displayTarget.classList.toggle('hidden')
     this.iconTarget.classList.toggle('hidden')
-
-    // Slide toggle with CSS transition
-    const form = this.formTarget
-    if (form.classList.contains('hidden')) {
-      form.classList.remove('hidden')
-      form.style.maxHeight = form.scrollHeight + 'px'
-    } else {
-      form.style.maxHeight = '0'
-      form.addEventListener('transitionend', () => {
-        if (form.style.maxHeight === '0px') {
-          form.classList.add('hidden')
-        }
-      }, { once: true })
-    }
+    this.formTarget.classList.toggle('hidden')
   }
 }

app/javascript/controllers/review_tags_controller.js

@@ -2,24 +2,53 @@ import { Controller } from '@hotwired/stimulus'
 import TomSelect from 'tom-select'
 
 export default class extends Controller {
+  static targets = ['input']
   static values = {
     sortable: { type: Boolean, default: false },
-    create: { type: Boolean, default: false }
+    create: { type: Boolean, default: false },
+    options: { type: Array, default: [] },
+    delimiter: { type: String, default: '' },
+    labelClass: { type: String, default: '' }
   }
 
-  connect() {
-    const options = {}
+  get inputElement() {
+    return this.hasInputTarget ? this.inputTarget : this.element
+  }
 
-    if (this.sortableValue || this.createValue) {
-      options.plugins = ['drag_drop']
+  connect() {
+    const plugins = ['remove_button']
+    if (this.sortableValue) {
+      plugins.push('drag_drop')
     }
 
+    const options = { plugins }
+
     if (this.createValue) {
       options.persist = false
       options.create = (input) => ({ value: input, text: input })
     }
 
-    this.tomSelect = new TomSelect(this.element, options)
+    if (this.delimiterValue) {
+      options.delimiter = this.delimiterValue
+      options.persist = false
+      options.create = (input) => ({ value: input, text: input, item: input })
+    }
+
+    if (this.optionsValue.length > 0) {
+      const items = this.optionsValue.map(x => ({ item: x }))
+      options.options = items
+      options.valueField = 'item'
+      options.labelField = 'item'
+      options.searchField = 'item'
+    }
+
+    if (this.labelClassValue) {
+      options.render = {
+        item: (data, escape) => '<div class="' + this.labelClassValue + '" style="margin-right: 4px;">' + escape(data.text) + '</div>'
+      }
+    }
+
+    this.tomSelect = new TomSelect(this.inputElement, options)
   }
 
   disconnect() {

app/javascript/controllers/reviewer_tags_controller.js

@@ -31,7 +31,7 @@
         Tags
       = f.select :tags,
         options_for_select(event.proposal_tags, proposal.object.tags),
-        {}, {class: 'multiselect proposal-tags', multiple: true, data: {controller: 'multiselect'}}
+        {}, {class: 'multiselect proposal-tags', multiple: true, data: {controller: 'tom-select', tom_select_label_class_value: 'label label-primary'}}
 
 %fieldset
   %legend.fieldset-legend For Review Committee

app/javascript/controllers/tom_select_controller.js

@@ -5,5 +5,5 @@
     - else
       %em None
   #edit-tags-icon.fa.fa-pencil{data: {reviewer_tags_target: 'icon', action: 'click->reviewer-tags#toggle'}}
-  #review-tags-form-wrapper{data: {reviewer_tags_target: 'form'}, style: 'display: none'}
+  #review-tags-form-wrapper.hidden{data: {reviewer_tags_target: 'form'}}
     = render 'shared/proposals/tags_form', event: event, proposal: proposal

app/views/proposals/_form.html.haml

@@ -1,7 +1,7 @@
-= form_for proposal, url: event_staff_proposal_path(event, proposal), data: {turbo_frame: dom_id(proposal, :reviewer_tags), controller: 'review-tags', review_tags_options_value: (event.review_tags | proposal.review_tags).to_json} do |f|
+= form_for proposal, url: event_staff_proposal_path(event, proposal), data: {turbo_frame: dom_id(proposal, :reviewer_tags), controller: 'tom-select', tom_select_options_value: (event.review_tags | proposal.review_tags).to_json, tom_select_delimiter_value: ','} do |f|
   .form-group.col-sm-8.no-pad-left
     .tag-list
-      = f.text_field :review_tags, value: proposal.review_tags.join(','), tabindex: '-1', data: {review_tags_target: 'input'}
+      = f.text_field :review_tags, value: proposal.review_tags.join(','), tabindex: '-1', data: {tom_select_target: 'input'}
       = program_tracker
   .form-group.col-sm-4
     %button.btn.btn-success.btn-sm(type="submit")