added a proper qualifier partial & handling (labels are still WIP)

Author: Oaphi

app/assets/javascripts/subscriptions.js

@@ -1,25 +1,11 @@
 document.addEventListener('DOMContentLoaded', () => {
   /**
-   * Clears subscription qualifier field value
-   * @returns {void}
+   * Extracts qualifier type from the field's dataset
+   * @returns {string | null}
    */
-  const clearQualifier = () => {
-    const qualifierField = document.querySelector('.js-subscription-qualifier-field');
-
-    if (qualifierField instanceof HTMLInputElement) {
-      qualifierField.value = '';
-    }
-  };
-
-  /**
-   * Sets subscription qualifier section visibility
-   * @param {boolean} visible visibility state
-   * @returns {void}
-   */
-  const setQualifierVisibility = (visible) => {
-    document.querySelector('.js-subscription-qualifier-field')
-            ?.closest('.form-group')
-            ?.classList.toggle('hide', visible);
+  const getQualifierType = () => {
+    const field = document.querySelector('.js-sub-type-select');
+    return field instanceof HTMLSelectElement ? field.value : null;
   };
 
   /**
@@ -31,24 +17,50 @@ document.addEventListener('DOMContentLoaded', () => {
     return ['category', 'tag', 'user'].includes(type);
   };
 
+  /**
+   * Synchronizes qualifier field with the given type
+   * @param {string} type subscription type
+   */
+  const syncQualifier = (type) => {
+    const field = document.querySelector('.js-sub-qualifier-select');
+
+    if (field instanceof HTMLElement) {
+      $(field).val(null).trigger('change');
+      field.closest('.form-group')?.classList.toggle('hide', !isQualifiable(type));
+    }
+  };
+
   /**
    * Is a given element a subscription type select?
    * @param {Element} element
    * @returns {element is HTMLSelectElement}
    */
   const isTypeSelect = (element) => {
-    return element.matches('.js-subscription-type-select');
+    return element.matches('.js-sub-type-select');
   };
 
-  document.querySelectorAll('.js-subscription-type-select, .js-subscription-frequency-select').forEach((el) => {
+  document.querySelectorAll('.js-sub-type-select, .js-sub-frequency-select').forEach((el) => {
     $(el).select2().on('change', ($event) => {
       if (isTypeSelect($event.target)) {
-        clearQualifier();
-        setQualifierVisibility(!isQualifiable($event.target.value));
+        syncQualifier($event.target.value);
       }
     });
   });
 
+  $('.js-sub-qualifier-select').select2({
+    ajax: {
+      url: () => {
+        const type = getQualifierType();
+        return `/subscriptions/qualifiers?type=${type}`
+      },
+      headers: { 'Accept': 'application/json' },
+      delay: 100,
+      processResults: (results) => {
+        return { results }
+      },
+    }
+  });
+
   $('.js-enable-subscription').on('change', async (evt) => {
     const $tgt = $(evt.target);
     const $sub = $tgt.parents('details');

app/views/subscriptions/_qualifier.html.erb

@@ -0,0 +1,24 @@
+<%#
+   "Subscription qualifier field partial
+
+    Variables:
+      form         : form to render the field for
+      subscription : Subscription to render qualifier field for
+"%>
+
+<div class="form-group<%= ' hide' unless subscription.qualified? %>">
+  <%= form.label :qualifier,
+                 subscription.type&.capitalize || 'Qualifier',
+                 class: "form-element js-sub-qualifier-label" %>
+  <div class="form-caption">
+    Which <%= subscription.type || 'entity' %> to subscribe to?
+    Required for <%= subscription.type || 'qualified' %> subscriptions.
+  </div>
+  <%= form.select :qualifier,
+                  options_for_select([[subscription.qualifier_name, subscription.qualifier]],
+                                     selected: subscription.qualifier),
+                  {},
+                  class: "form-element js-sub-qualifier-select",
+                  data: { create: 'false', placeholder: '', use_ids: subscription.user? },
+                  multiple: false %>
+</div>

app/views/subscriptions/new.html.erb

@@ -14,17 +14,10 @@
     <%= f.select :type,
                  options_for_select(type_choice_for(current_user), selected: @subscription.type),
                  { include_blank: true },
-                 class: 'form-element js-subscription-type-select' %>
+                 class: 'form-element js-sub-type-select' %>
   </div>
 
-  <div class="form-group<%= ' hide' unless @subscription.qualified? %>">
-    <%= f.label :qualifier, class: "form-element" %>
-    <div class="form-caption">Should be an id for user subscriptions or name for tag & category subscriptions.
-      Leave the field blank otherwise.</div>
-    <%= f.text_field :qualifier,
-                     class: 'form-element js-subscription-qualifier-field',
-                     value: @subscription.qualifier %>
-  </div>
+  <%= render 'subscriptions/qualifier', form: f, subscription: @subscription %>
 
   <div class="form-group">
     <%= f.label :name, class: "form-element" %>