From c8aeb63f6322f0a5d91daeab2ab2f10a6a98c0ea Mon Sep 17 00:00:00 2001
From: alex <alexanderyi933@gmail.com>
Date: Wed, 5 Feb 2025 02:13:36 -0500
Subject: [PATCH 01/10] initial implementation

the multiselect rendered in the casa_cases/form partial gets used in both casa_cases/new view and casa_cases/edit view
---
 .../form/multiple_select_component.html.erb   | 13 +++
 .../form/multiple_select_component.rb         |  3 +-
 .../controllers/multiple_select_controller.js | 79 +++++++++++++++++--
 .../form/_contact_types.html.erb              |  3 +-
 4 files changed, 88 insertions(+), 10 deletions(-)

diff --git a/app/components/form/multiple_select_component.html.erb b/app/components/form/multiple_select_component.html.erb
index 58bb6f3098..79f8efaaa2 100644
--- a/app/components/form/multiple_select_component.html.erb
+++ b/app/components/form/multiple_select_component.html.erb
@@ -3,6 +3,7 @@
      data-multiple-select-options-value="<%= @options %>"
      data-multiple-select-selected-items-value="<%= @selected_items %>"
      data-multiple-select-placeholder-term-value="<%= @placeholder_term %>"
+     data-multiple-select-show-all-option-value="<%= @show_all_option %>"
      data-multiple-select-with-options-value="true">
 
   <template data-multiple-select-target="option">
@@ -18,6 +19,18 @@
     <div class="badge rounded-pill bg-primary active px-3">DATA_LABEL</div>
   </template>
 
+  <% if @show_all_option %>
+    <template data-multiple-select-target="hiddenItem">
+      <div class="d-none"></div>
+    </template>
+
+    <template data-multiple-select-target="showAllOption">
+      <div class="fug d-flex align-items-baseline show-all-options" data-multiple-select-target="showAllOption" data-action="multiple-select#toggleSelectAll">
+        <span class='mr-5'>DATA_LABEL</span>
+      </div>
+    </template>
+  <% end %>
+  
   <%= @form.select @name, {}, { multiple: true } , {
     data: { "multiple-select-target": "select",  } , class: "form-control-lg form-select form-select-lg input-group-lg"
   } %>
diff --git a/app/components/form/multiple_select_component.rb b/app/components/form/multiple_select_component.rb
index 4df7c864bc..c2f0725c1d 100644
--- a/app/components/form/multiple_select_component.rb
+++ b/app/components/form/multiple_select_component.rb
@@ -1,12 +1,13 @@
 # frozen_string_literal: true
 
 class Form::MultipleSelectComponent < ViewComponent::Base
-  def initialize(form:, name:, options:, selected_items:, render_option_subtext: false, placeholder_term: nil)
+  def initialize(form:, name:, options:, selected_items:, render_option_subtext: false, placeholder_term: nil, show_all_option: false)
     @form = form
     @name = name
     @options = options.to_json
     @selected_items = selected_items
     @render_option_subtext = render_option_subtext
     @placeholder_term = placeholder_term
+    @show_all_option = show_all_option
   end
 end
diff --git a/app/javascript/controllers/multiple_select_controller.js b/app/javascript/controllers/multiple_select_controller.js
index 1ebd2dd6ec..574d4cf638 100644
--- a/app/javascript/controllers/multiple_select_controller.js
+++ b/app/javascript/controllers/multiple_select_controller.js
@@ -2,7 +2,7 @@ import { Controller } from '@hotwired/stimulus'
 import TomSelect from 'tom-select'
 
 export default class extends Controller {
-  static targets = ['select', 'option', 'item']
+  static targets = ['select', 'option', 'item', 'hiddenItem', 'showAllOption'] // add 'selectAllBtn' if going with button
   static values = {
     options: Array,
     selectedItems: Array,
@@ -10,7 +10,8 @@ export default class extends Controller {
     placeholderTerm: {
       type: String,
       default: 'contact(s)'
-    }
+    },
+    showAllOption: Boolean,
   }
 
   connect () {
@@ -37,11 +38,52 @@ export default class extends Controller {
     const itemTemplate = this.itemTarget.innerHTML
     const placeholder = `Select or search ${this.placeholderTermValue}`
 
+    const showAllOptionCheck = this.showAllOptionValue
+    const hiddenItemTemplate = showAllOptionCheck && this.hiddenItemTarget && this.hiddenItemTarget.innerHTML
+    const showAllOptionTemplate = showAllOptionCheck && this.showAllOptionTarget && this.showAllOptionTarget.innerHTML
+    
+    // orderedOptionVals is of type (" " | number)[] - the " " could appear
+    // because using it as the value for the select/unselect all option
+    let orderedOptionVals = this.optionsValue.map(opt => opt.value)
+    if (showAllOptionCheck) {
+      // using " " as value instead of "" bc tom-select doesn't init the "" in the item list
+      orderedOptionVals = [" "].concat(orderedOptionVals)
+    }
+
+    // used to determine initial items selected by tom-select
+    const initItems = this.selectedItemsValue?.length ? this.selectedItemsValue : orderedOptionVals
+
+    const dropdownOptions = showAllOptionCheck ? 
+      [{ text: "Select/Unseselect all", subtext: "", value: " ", group: ""}].concat(this.optionsValue) 
+        : this.optionsValue
+    
+    // const selectAllBtn = this.selectAllBtnTarget
+    // assign TomSelect instance to this.selectEl if going with button implementation
+
     /* eslint-disable no-new */
     new TomSelect(this.selectTarget, {
-      onItemAdd: function () {
+      onItemRemove: function(value, data) {
+        // for the select/unselect all button - add in short circuit in case showAllBtn doesn't exist
+        // if (this.items.length < orderedOptionVals.length) {
+        //   selectAllBtn.innerText = 'Select all'
+        // }
+
+        if (value === " ") {
+          this.clear()
+        }
+      },
+      onItemAdd: function (value) {
         this.setTextboxValue('')
         this.refreshOptions()
+
+        // for the select/unselect all button - add in short circuit in case showAllBtn doesn't exist
+        // if (this.items.length < orderedOptionVals.length) {
+        //   selectAllBtn.innerText = 'Select all'
+        // }
+
+        if (value === " ") {
+          this.addItems(orderedOptionVals);
+        }
       },
       plugins: {
         remove_button: {
@@ -54,21 +96,42 @@ export default class extends Controller {
           uncheckedClassNames: ['form-check-input']
         }
       },
-      options: this.optionsValue,
-      items: this.selectedItemsValue,
+      options: dropdownOptions,
+      items: initItems,
       placeholder,
       hidePlaceholder: true,
       searchField: ['text', 'group'],
       render: {
         option: function (data, escape) {
-          let html = optionTemplate.replace(/DATA_LABEL/g, escape(data.text))
-          html = html.replace(/DATA_SUB_TEXT/g, escape(data.subtext))
+          let html
+
+          if (showAllOptionCheck && data && data.value === " ") {
+            html = showAllOptionTemplate.replace(/DATA_LABEL/g, escape(data.text))
+          } else {
+            html = optionTemplate.replace(/DATA_LABEL/g, escape(data.text))
+            html = html.replace(/DATA_SUB_TEXT/g, escape(data.subtext))
+          }
           return html
         },
         item: function (data, escape) {
-          return itemTemplate.replace(/DATA_LABEL/g, escape(data.text))
+          return showAllOptionCheck && data.value === " " ? hiddenItemTemplate : itemTemplate.replace(/DATA_LABEL/g, escape(data.text))
         }
       }
     })
   }
+
+  // action for the select/unselect all button - add in short circuit in case showAllBtn or selectEl doesn't exist
+  // toggleSelectAll() {
+  //   if (!this.selectEl || !this.selectAllBtnTarget) return
+
+  //   const checkedStatus = this.selectEl.items.length === Object.keys(this.selectEl.options).length ? "all" : "not-all"
+    
+  //   if (checkedStatus === "all") {
+  //     this.selectEl.clear()
+  //     this.selectAllBtnTarget.textContent = "Select all"
+  //   } else {
+  //     this.selectEl.addItems(this.optionsValue.map(opt => opt.value))
+  //     this.selectAllBtnTarget.textContent = "Unselect all"
+  //   }
+  // }
 }
diff --git a/app/views/case_contacts/form/_contact_types.html.erb b/app/views/case_contacts/form/_contact_types.html.erb
index 1f91e5f1d1..517d71b65b 100644
--- a/app/views/case_contacts/form/_contact_types.html.erb
+++ b/app/views/case_contacts/form/_contact_types.html.erb
@@ -5,6 +5,7 @@
     name: :contact_type_ids,
     options: options.decorate.map { |ct| ct.hash_for_multi_select_with_cases(casa_cases&.pluck(:id)) },
     selected_items: selected_items,
-    render_option_subtext: true
+    render_option_subtext: true,
+    show_all_option: true,
   )) %>
 </div>

From ba3f142a2410ea05068bfc273b349b23791e886d Mon Sep 17 00:00:00 2001
From: alex <alexanderyi933@gmail.com>
Date: Sun, 9 Feb 2025 22:21:03 -0500
Subject: [PATCH 02/10] adds select all option that is initially checked when
 editing casa case

---
 app/components/form/multiple_select_component.html.erb   | 1 +
 app/javascript/controllers/multiple_select_controller.js | 3 +--
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/components/form/multiple_select_component.html.erb b/app/components/form/multiple_select_component.html.erb
index 79f8efaaa2..3b47516ca6 100644
--- a/app/components/form/multiple_select_component.html.erb
+++ b/app/components/form/multiple_select_component.html.erb
@@ -19,6 +19,7 @@
     <div class="badge rounded-pill bg-primary active px-3">DATA_LABEL</div>
   </template>
 
+  <%# not needed, but want to be explicit when including this markup %>
   <% if @show_all_option %>
     <template data-multiple-select-target="hiddenItem">
       <div class="d-none"></div>
diff --git a/app/javascript/controllers/multiple_select_controller.js b/app/javascript/controllers/multiple_select_controller.js
index 574d4cf638..a7161f643e 100644
--- a/app/javascript/controllers/multiple_select_controller.js
+++ b/app/javascript/controllers/multiple_select_controller.js
@@ -50,8 +50,7 @@ export default class extends Controller {
       orderedOptionVals = [" "].concat(orderedOptionVals)
     }
 
-    // used to determine initial items selected by tom-select
-    const initItems = this.selectedItemsValue?.length ? this.selectedItemsValue : orderedOptionVals
+    const initItems = Array.isArray(this.selectedItemsValue) && this.selectedItemsValue.length ? showAllOptionCheck ? [" "].concat(this.selectedItemsValue) : this.selectedItemsValue : orderedOptionVals
 
     const dropdownOptions = showAllOptionCheck ? 
       [{ text: "Select/Unseselect all", subtext: "", value: " ", group: ""}].concat(this.optionsValue) 

From cd1ea60a76093f993dca77fbde4d6988015bc571 Mon Sep 17 00:00:00 2001
From: alex <alexanderyi933@gmail.com>
Date: Sun, 9 Feb 2025 22:40:40 -0500
Subject: [PATCH 03/10] linting

---
 .../form/multiple_select_component.html.erb   |  2 +-
 .../controllers/multiple_select_controller.js | 34 +++++++++++--------
 2 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/app/components/form/multiple_select_component.html.erb b/app/components/form/multiple_select_component.html.erb
index 3b47516ca6..08851cea08 100644
--- a/app/components/form/multiple_select_component.html.erb
+++ b/app/components/form/multiple_select_component.html.erb
@@ -31,7 +31,7 @@
       </div>
     </template>
   <% end %>
-  
+
   <%= @form.select @name, {}, { multiple: true } , {
     data: { "multiple-select-target": "select",  } , class: "form-control-lg form-select form-select-lg input-group-lg"
   } %>
diff --git a/app/javascript/controllers/multiple_select_controller.js b/app/javascript/controllers/multiple_select_controller.js
index a7161f643e..c7f88c7d21 100644
--- a/app/javascript/controllers/multiple_select_controller.js
+++ b/app/javascript/controllers/multiple_select_controller.js
@@ -11,7 +11,7 @@ export default class extends Controller {
       type: String,
       default: 'contact(s)'
     },
-    showAllOption: Boolean,
+    showAllOption: Boolean
   }
 
   connect () {
@@ -41,33 +41,37 @@ export default class extends Controller {
     const showAllOptionCheck = this.showAllOptionValue
     const hiddenItemTemplate = showAllOptionCheck && this.hiddenItemTarget && this.hiddenItemTarget.innerHTML
     const showAllOptionTemplate = showAllOptionCheck && this.showAllOptionTarget && this.showAllOptionTarget.innerHTML
-    
+
     // orderedOptionVals is of type (" " | number)[] - the " " could appear
     // because using it as the value for the select/unselect all option
     let orderedOptionVals = this.optionsValue.map(opt => opt.value)
     if (showAllOptionCheck) {
       // using " " as value instead of "" bc tom-select doesn't init the "" in the item list
-      orderedOptionVals = [" "].concat(orderedOptionVals)
+      orderedOptionVals = [' '].concat(orderedOptionVals)
     }
 
-    const initItems = Array.isArray(this.selectedItemsValue) && this.selectedItemsValue.length ? showAllOptionCheck ? [" "].concat(this.selectedItemsValue) : this.selectedItemsValue : orderedOptionVals
+    const initItems = Array.isArray(this.selectedItemsValue) && this.selectedItemsValue.length
+      ? showAllOptionCheck
+        ? [' '].concat(this.selectedItemsValue)
+        : this.selectedItemsValue
+      : orderedOptionVals
+
+    const dropdownOptions = showAllOptionCheck
+      ? [{ text: 'Select/Unseselect all', subtext: '', value: ' ', group: '' }].concat(this.optionsValue)
+      : this.optionsValue
 
-    const dropdownOptions = showAllOptionCheck ? 
-      [{ text: "Select/Unseselect all", subtext: "", value: " ", group: ""}].concat(this.optionsValue) 
-        : this.optionsValue
-    
     // const selectAllBtn = this.selectAllBtnTarget
     // assign TomSelect instance to this.selectEl if going with button implementation
 
     /* eslint-disable no-new */
     new TomSelect(this.selectTarget, {
-      onItemRemove: function(value, data) {
+      onItemRemove: function (value, data) {
         // for the select/unselect all button - add in short circuit in case showAllBtn doesn't exist
         // if (this.items.length < orderedOptionVals.length) {
         //   selectAllBtn.innerText = 'Select all'
         // }
 
-        if (value === " ") {
+        if (value === ' ') {
           this.clear()
         }
       },
@@ -80,8 +84,8 @@ export default class extends Controller {
         //   selectAllBtn.innerText = 'Select all'
         // }
 
-        if (value === " ") {
-          this.addItems(orderedOptionVals);
+        if (value === ' ') {
+          this.addItems(orderedOptionVals)
         }
       },
       plugins: {
@@ -104,7 +108,7 @@ export default class extends Controller {
         option: function (data, escape) {
           let html
 
-          if (showAllOptionCheck && data && data.value === " ") {
+          if (showAllOptionCheck && data && data.value === ' ') {
             html = showAllOptionTemplate.replace(/DATA_LABEL/g, escape(data.text))
           } else {
             html = optionTemplate.replace(/DATA_LABEL/g, escape(data.text))
@@ -113,7 +117,7 @@ export default class extends Controller {
           return html
         },
         item: function (data, escape) {
-          return showAllOptionCheck && data.value === " " ? hiddenItemTemplate : itemTemplate.replace(/DATA_LABEL/g, escape(data.text))
+          return showAllOptionCheck && data.value === ' ' ? hiddenItemTemplate : itemTemplate.replace(/DATA_LABEL/g, escape(data.text))
         }
       }
     })
@@ -124,7 +128,7 @@ export default class extends Controller {
   //   if (!this.selectEl || !this.selectAllBtnTarget) return
 
   //   const checkedStatus = this.selectEl.items.length === Object.keys(this.selectEl.options).length ? "all" : "not-all"
-    
+
   //   if (checkedStatus === "all") {
   //     this.selectEl.clear()
   //     this.selectAllBtnTarget.textContent = "Select all"

From 14c7aa35ceafa89533c051e2dd8f34649f982aca Mon Sep 17 00:00:00 2001
From: alex <alexanderyi933@gmail.com>
Date: Sun, 9 Feb 2025 22:56:52 -0500
Subject: [PATCH 04/10] remove comments

---
 .../controllers/multiple_select_controller.js | 32 ++-----------------
 1 file changed, 2 insertions(+), 30 deletions(-)

diff --git a/app/javascript/controllers/multiple_select_controller.js b/app/javascript/controllers/multiple_select_controller.js
index c7f88c7d21..6add7f495e 100644
--- a/app/javascript/controllers/multiple_select_controller.js
+++ b/app/javascript/controllers/multiple_select_controller.js
@@ -2,7 +2,7 @@ import { Controller } from '@hotwired/stimulus'
 import TomSelect from 'tom-select'
 
 export default class extends Controller {
-  static targets = ['select', 'option', 'item', 'hiddenItem', 'showAllOption'] // add 'selectAllBtn' if going with button
+  static targets = ['select', 'option', 'item', 'hiddenItem', 'showAllOption']
   static values = {
     options: Array,
     selectedItems: Array,
@@ -60,17 +60,9 @@ export default class extends Controller {
       ? [{ text: 'Select/Unseselect all', subtext: '', value: ' ', group: '' }].concat(this.optionsValue)
       : this.optionsValue
 
-    // const selectAllBtn = this.selectAllBtnTarget
-    // assign TomSelect instance to this.selectEl if going with button implementation
-
     /* eslint-disable no-new */
     new TomSelect(this.selectTarget, {
-      onItemRemove: function (value, data) {
-        // for the select/unselect all button - add in short circuit in case showAllBtn doesn't exist
-        // if (this.items.length < orderedOptionVals.length) {
-        //   selectAllBtn.innerText = 'Select all'
-        // }
-
+      onItemRemove: function (value) {
         if (value === ' ') {
           this.clear()
         }
@@ -79,11 +71,6 @@ export default class extends Controller {
         this.setTextboxValue('')
         this.refreshOptions()
 
-        // for the select/unselect all button - add in short circuit in case showAllBtn doesn't exist
-        // if (this.items.length < orderedOptionVals.length) {
-        //   selectAllBtn.innerText = 'Select all'
-        // }
-
         if (value === ' ') {
           this.addItems(orderedOptionVals)
         }
@@ -122,19 +109,4 @@ export default class extends Controller {
       }
     })
   }
-
-  // action for the select/unselect all button - add in short circuit in case showAllBtn or selectEl doesn't exist
-  // toggleSelectAll() {
-  //   if (!this.selectEl || !this.selectAllBtnTarget) return
-
-  //   const checkedStatus = this.selectEl.items.length === Object.keys(this.selectEl.options).length ? "all" : "not-all"
-
-  //   if (checkedStatus === "all") {
-  //     this.selectEl.clear()
-  //     this.selectAllBtnTarget.textContent = "Select all"
-  //   } else {
-  //     this.selectEl.addItems(this.optionsValue.map(opt => opt.value))
-  //     this.selectAllBtnTarget.textContent = "Unselect all"
-  //   }
-  // }
 }

From 13ff0d173c0555b0e78ca6c204cacd8e038aef49 Mon Sep 17 00:00:00 2001
From: alex <alexanderyi933@gmail.com>
Date: Mon, 10 Feb 2025 13:18:03 -0500
Subject: [PATCH 05/10] clean up unused code

---
 app/components/form/multiple_select_component.html.erb   | 4 ++--
 app/javascript/controllers/multiple_select_controller.js | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/components/form/multiple_select_component.html.erb b/app/components/form/multiple_select_component.html.erb
index 08851cea08..abd03c3197 100644
--- a/app/components/form/multiple_select_component.html.erb
+++ b/app/components/form/multiple_select_component.html.erb
@@ -25,8 +25,8 @@
       <div class="d-none"></div>
     </template>
 
-    <template data-multiple-select-target="showAllOption">
-      <div class="fug d-flex align-items-baseline show-all-options" data-multiple-select-target="showAllOption" data-action="multiple-select#toggleSelectAll">
+    <template data-multiple-select-target="selectAllOption">
+      <div class="d-flex align-items-baseline">
         <span class='mr-5'>DATA_LABEL</span>
       </div>
     </template>
diff --git a/app/javascript/controllers/multiple_select_controller.js b/app/javascript/controllers/multiple_select_controller.js
index 6add7f495e..845c1805a3 100644
--- a/app/javascript/controllers/multiple_select_controller.js
+++ b/app/javascript/controllers/multiple_select_controller.js
@@ -2,7 +2,7 @@ import { Controller } from '@hotwired/stimulus'
 import TomSelect from 'tom-select'
 
 export default class extends Controller {
-  static targets = ['select', 'option', 'item', 'hiddenItem', 'showAllOption']
+  static targets = ['select', 'option', 'item', 'hiddenItem', 'selectAllOption']
   static values = {
     options: Array,
     selectedItems: Array,
@@ -40,7 +40,7 @@ export default class extends Controller {
 
     const showAllOptionCheck = this.showAllOptionValue
     const hiddenItemTemplate = showAllOptionCheck && this.hiddenItemTarget && this.hiddenItemTarget.innerHTML
-    const showAllOptionTemplate = showAllOptionCheck && this.showAllOptionTarget && this.showAllOptionTarget.innerHTML
+    const showAllOptionTemplate = showAllOptionCheck && this.selectAllOptionTarget && this.selectAllOptionTarget.innerHTML
 
     // orderedOptionVals is of type (" " | number)[] - the " " could appear
     // because using it as the value for the select/unselect all option

From 8a28aa79263efa9ff54ec4a2853cae113d61e977 Mon Sep 17 00:00:00 2001
From: alex <alexanderyi933@gmail.com>
Date: Wed, 12 Feb 2025 17:12:21 -0500
Subject: [PATCH 06/10] fix typo in select all option text

---
 app/javascript/controllers/multiple_select_controller.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/javascript/controllers/multiple_select_controller.js b/app/javascript/controllers/multiple_select_controller.js
index 845c1805a3..4a2ada42a9 100644
--- a/app/javascript/controllers/multiple_select_controller.js
+++ b/app/javascript/controllers/multiple_select_controller.js
@@ -57,7 +57,7 @@ export default class extends Controller {
       : orderedOptionVals
 
     const dropdownOptions = showAllOptionCheck
-      ? [{ text: 'Select/Unseselect all', subtext: '', value: ' ', group: '' }].concat(this.optionsValue)
+      ? [{ text: 'Select/Unselect all', subtext: '', value: ' ', group: '' }].concat(this.optionsValue)
       : this.optionsValue
 
     /* eslint-disable no-new */

From f44883fef54f201d401998d17b0bec0f170dbfeb Mon Sep 17 00:00:00 2001
From: alex <alexanderyi933@gmail.com>
Date: Fri, 14 Feb 2025 01:52:58 -0500
Subject: [PATCH 07/10] refactor multi-select stimulus controller so it matches
 existing behavior on new case contact creation page

---
 .../controllers/multiple_select_controller.js        | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/app/javascript/controllers/multiple_select_controller.js b/app/javascript/controllers/multiple_select_controller.js
index 4a2ada42a9..2b8af74ccb 100644
--- a/app/javascript/controllers/multiple_select_controller.js
+++ b/app/javascript/controllers/multiple_select_controller.js
@@ -50,11 +50,13 @@ export default class extends Controller {
       orderedOptionVals = [' '].concat(orderedOptionVals)
     }
 
-    const initItems = Array.isArray(this.selectedItemsValue) && this.selectedItemsValue.length
-      ? showAllOptionCheck
-        ? [' '].concat(this.selectedItemsValue)
-        : this.selectedItemsValue
-      : orderedOptionVals
+    const hasInitialItems = Array.isArray(this.selectedItemsValue) && this.selectedItemsValue.length
+    // initItems: number[], possibly empty
+    let initItems = this.selectedItemsValue
+    if (showAllOptionCheck) {
+      const emptyItem = [' ']
+      initItems = hasInitialItems ? emptyItem.concat(this.selectedItemsValue) : orderedOptionVals
+    }
 
     const dropdownOptions = showAllOptionCheck
       ? [{ text: 'Select/Unselect all', subtext: '', value: ' ', group: '' }].concat(this.optionsValue)

From ca99d157eddd75ef134e4ecf70d782e4c9915226 Mon Sep 17 00:00:00 2001
From: alex <alexanderyi933@gmail.com>
Date: Fri, 14 Feb 2025 16:28:49 -0500
Subject: [PATCH 08/10] casa_cases edit system spec passing with additional
 tests

---
 .../form/multiple_select_component.html.erb   |  2 +-
 spec/system/casa_cases/edit_spec.rb           | 34 ++++++++++++++++---
 2 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/app/components/form/multiple_select_component.html.erb b/app/components/form/multiple_select_component.html.erb
index abd03c3197..0720cb874d 100644
--- a/app/components/form/multiple_select_component.html.erb
+++ b/app/components/form/multiple_select_component.html.erb
@@ -27,7 +27,7 @@
 
     <template data-multiple-select-target="selectAllOption">
       <div class="d-flex align-items-baseline">
-        <span class='mr-5'>DATA_LABEL</span>
+        <span data-test="select-all-input" class='mr-5'>DATA_LABEL</span>
       </div>
     </template>
   <% end %>
diff --git a/spec/system/casa_cases/edit_spec.rb b/spec/system/casa_cases/edit_spec.rb
index 3cf34f3638..a8d87b5cf7 100644
--- a/spec/system/casa_cases/edit_spec.rb
+++ b/spec/system/casa_cases/edit_spec.rb
@@ -12,6 +12,8 @@
     let(:contact_type_group) { create(:contact_type_group, casa_org: organization) }
     let(:other_org_contact_type_group) { create(:contact_type_group, casa_org: other_organization) }
     let!(:contact_type) { create(:contact_type, contact_type_group: contact_type_group) }
+    let!(:another_contact_type) { create(:contact_type, contact_type_group: contact_type_group) }
+    let!(:saved_case_contact_type) { create(:casa_case_contact_type, casa_case: casa_case, contact_type: contact_type) }
     let!(:other_org_contact_type) { create(:contact_type, contact_type_group: other_org_contact_type_group) }
     let!(:siblings_casa_cases) do
       create(:casa_case, :with_one_court_order, casa_org: organization)
@@ -41,6 +43,20 @@
       select "Submitted", from: "casa_case_court_report_status"
 
       find(".ts-control").click
+
+      ts_checkboxes = page.all('.ts-dropdown-content input')
+
+      select_all_el = page.find('span[data-test=select-all-input]')
+      # uncheck all contact type options
+      select_all_el.click
+      ts_checkboxes.each do |el|
+        expect(el).not_to be_checked
+      end
+      # check all contact type options
+      select_all_el.click
+      expect(ts_checkboxes).to all(be_checked)
+
+      # unselect contact_type from dropdown
       find("span", text: contact_type.name).click
 
       page.find('button[data-action="court-order-form#add"]').click
@@ -57,7 +73,7 @@
       expect(page).to have_text("Court Order Text One")
       expect(page).not_to have_text("Deactivate Case")
 
-      expect(casa_case.contact_types).to eq [contact_type]
+      expect(casa_case.contact_types).to eq [another_contact_type]
       has_checked_field? contact_type.name
     end
 
@@ -222,9 +238,19 @@
       expect(page).to have_text("Set Implementation Status")
 
       find(".ts-control").click
-      find("span", text: "Youth").click
-
-      within ".actions-cc" do
+      ts_checkboxes = page.all('.ts-dropdown-content input')
+
+      select_all_el = page.find('span[data-test=select-all-input]')
+      # uncheck all contact type options
+      select_all_el.click
+      ts_checkboxes.each do |el|
+        expect(el).not_to be_checked
+      end
+      # check all contact type options
+      select_all_el.click
+      expect(ts_checkboxes).to all(be_checked)
+      # since all contact type options checked, don't need to select one
+      within ".top-page-actions" do
         click_on "Update CASA Case"
       end
       has_checked_field? "Youth"

From c9d2042894f42ed131b136858f3c9b4b0236ff08 Mon Sep 17 00:00:00 2001
From: alex <alexanderyi933@gmail.com>
Date: Fri, 14 Feb 2025 16:59:25 -0500
Subject: [PATCH 09/10] adds system spec tests for casa case creation flow

---
 spec/system/casa_cases/new_spec.rb | 26 ++++++++++++++------------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/spec/system/casa_cases/new_spec.rb b/spec/system/casa_cases/new_spec.rb
index ce9247fe08..fff472cdfd 100644
--- a/spec/system/casa_cases/new_spec.rb
+++ b/spec/system/casa_cases/new_spec.rb
@@ -33,8 +33,17 @@
           select "Submitted", from: "casa_case_court_report_status"
 
           find(".ts-control").click
-          find("span", text: contact_type.name).click
-          find(".ts-control").click
+
+          ts_checkboxes = page.all('.ts-dropdown-content input')
+          select_all_el = page.find('span[data-test=select-all-input]')
+          # uncheck all contact type options
+          select_all_el.click
+          ts_checkboxes.each do |el|
+            expect(el).not_to be_checked
+          end
+          # check all contact type options
+          select_all_el.click
+          expect(ts_checkboxes).to all(be_checked)
 
           select "Test User", from: "casa_case[case_assignments_attributes][0][volunteer_id]"
 
@@ -57,7 +66,7 @@
         casa_org = build(:casa_org)
         admin = create(:casa_admin, casa_org: casa_org)
         contact_type_group = create(:contact_type_group, casa_org: casa_org)
-        contact_type = create(:contact_type, contact_type_group: contact_type_group)
+        create(:contact_type, contact_type_group: contact_type_group)
         case_number = "12345"
 
         sign_in admin
@@ -69,9 +78,6 @@
         select "March", from: "casa_case_birth_month_year_youth_2i"
         select five_years, from: "casa_case_birth_month_year_youth_1i"
 
-        find(".ts-control").click
-        find("span", text: contact_type.name).click
-
         within ".actions-cc" do
           click_on "Create CASA Case"
         end
@@ -109,7 +115,7 @@
           casa_org = build(:casa_org)
           admin = create(:casa_admin, casa_org: casa_org)
           contact_type_group = create(:contact_type_group, casa_org: casa_org)
-          contact_type = create(:contact_type, contact_type_group: contact_type_group)
+          create(:contact_type, contact_type_group: contact_type_group)
           case_number = "12345"
 
           sign_in admin
@@ -121,9 +127,6 @@
           select five_years, from: "casa_case_birth_month_year_youth_1i"
           check "casa_case_empty_court_date"
 
-          find(".ts-control").click
-          find("span", text: contact_type.name).click
-
           within ".actions-cc" do
             click_on "Create CASA Case"
           end
@@ -152,8 +155,7 @@
           select "March", from: "casa_case_birth_month_year_youth_2i"
           select five_years, from: "casa_case_birth_month_year_youth_1i"
 
-          find(".ts-control").click
-          find("span", text: contact_type.name).click
+          # 2/14/2025 - by default, all contact types are selected on page load so don't need to manually select
 
           within ".actions-cc" do
             click_on "Create CASA Case"

From a6fab58e68c27be375d07cec89541e5a0b4781e0 Mon Sep 17 00:00:00 2001
From: alex <alexanderyi933@gmail.com>
Date: Fri, 14 Feb 2025 17:20:00 -0500
Subject: [PATCH 10/10] lint spec files

---
 spec/system/casa_cases/edit_spec.rb | 8 ++++----
 spec/system/casa_cases/new_spec.rb  | 4 ++--
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/spec/system/casa_cases/edit_spec.rb b/spec/system/casa_cases/edit_spec.rb
index a8d87b5cf7..fb56acb60e 100644
--- a/spec/system/casa_cases/edit_spec.rb
+++ b/spec/system/casa_cases/edit_spec.rb
@@ -44,9 +44,9 @@
 
       find(".ts-control").click
 
-      ts_checkboxes = page.all('.ts-dropdown-content input')
+      ts_checkboxes = page.all(".ts-dropdown-content input")
 
-      select_all_el = page.find('span[data-test=select-all-input]')
+      select_all_el = page.find("span[data-test=select-all-input]")
       # uncheck all contact type options
       select_all_el.click
       ts_checkboxes.each do |el|
@@ -238,9 +238,9 @@
       expect(page).to have_text("Set Implementation Status")
 
       find(".ts-control").click
-      ts_checkboxes = page.all('.ts-dropdown-content input')
+      ts_checkboxes = page.all(".ts-dropdown-content input")
 
-      select_all_el = page.find('span[data-test=select-all-input]')
+      select_all_el = page.find("span[data-test=select-all-input]")
       # uncheck all contact type options
       select_all_el.click
       ts_checkboxes.each do |el|
diff --git a/spec/system/casa_cases/new_spec.rb b/spec/system/casa_cases/new_spec.rb
index fff472cdfd..169864d271 100644
--- a/spec/system/casa_cases/new_spec.rb
+++ b/spec/system/casa_cases/new_spec.rb
@@ -34,8 +34,8 @@
 
           find(".ts-control").click
 
-          ts_checkboxes = page.all('.ts-dropdown-content input')
-          select_all_el = page.find('span[data-test=select-all-input]')
+          ts_checkboxes = page.all(".ts-dropdown-content input")
+          select_all_el = page.find("span[data-test=select-all-input]")
           # uncheck all contact type options
           select_all_el.click
           ts_checkboxes.each do |el|