adjsut detailed send button

app/javascript/application.js

@@ -36,6 +36,7 @@ import EmailsTextarea from './elements/emails_textarea'
 import ToggleSubmit from './elements/toggle_submit'
 import ToggleOnSubmit from './elements/toggle_on_submit'
 import ToggleOnChecked from './elements/toggle_on_checked'
+import ToggleSendTitle from './elements/toggle_send_title'
 import AppendTemplate from './elements/append_template'
 import CheckOnClick from './elements/check_on_click'
 import PasswordInput from './elements/password_input'
@@ -162,6 +163,7 @@ safeRegisterElement('toggle-cookies', ToggleCookies)
 safeRegisterElement('toggle-submit', ToggleSubmit)
 safeRegisterElement('toggle-on-submit', ToggleOnSubmit)
 safeRegisterElement('toggle-on-checked', ToggleOnChecked)
+safeRegisterElement('toggle-send-title', ToggleSendTitle)
 safeRegisterElement('append-template', AppendTemplate)
 safeRegisterElement('password-input', PasswordInput)
 safeRegisterElement('search-input', SearchInput)

app/javascript/elements/toggle_send_title.js

@@ -0,0 +1,43 @@
+export default class extends HTMLElement {
+  connectedCallback () {
+    this.events.forEach((event) => this.form.addEventListener(event, this.toggle))
+
+    this.toggle()
+  }
+
+  disconnectedCallback () {
+    this.events.forEach((event) => this.form.removeEventListener(event, this.toggle))
+  }
+
+  toggle = (event) => {
+    if (event?.type === 'input' && event.target.matches(this.fieldSelector('name'))) return
+
+    const isNameOnly = (field) => this.isFilled('name') && !this.isFilled(field)
+
+    const isSend = (this.isChecked('send_email') && !isNameOnly('email')) ||
+      (this.isChecked('send_sms') && !isNameOnly('phone'))
+
+    this.firstElementChild.classList.toggle('hidden', !isSend)
+    this.lastElementChild.classList.toggle('hidden', isSend)
+  }
+
+  isChecked (name) {
+    return !!this.form.querySelector(`[name="${name}"]:checked:enabled`)
+  }
+
+  isFilled (field) {
+    return [...this.form.querySelectorAll(this.fieldSelector(field))].some((input) => input.value.trim())
+  }
+
+  fieldSelector (field) {
+    return `[name$="[][${field}]"]`
+  }
+
+  get events () {
+    return ['change', 'input', 'linked-input.update']
+  }
+
+  get form () {
+    return this.closest('form')
+  }
+}

app/views/submissions/_detailed_form.html.erb

@@ -100,10 +100,10 @@
   </div>
   <div class="form-control mt-4">
     <%= f.button class: 'base-button' do %>
-      <toggle-on-checked data-names="send_email send_sms">
+      <toggle-send-title>
         <span><%= button_title(title: t('send'), disabled_with: t('sending')) %></span>
         <span class="hidden"><%= button_title(title: t('add_recipients')) %></span>
-      </toggle-on-checked>
+      </toggle-send-title>
     <% end %>
   </div>
 <% end %>