Change country selection to checkbox tree

app/controllers/campaigns_controller.rb

@@ -48,6 +48,7 @@ def edit
 
   def create
     @campaign = Campaign.new(campaign_params)
+    @campaign.country_codes = @campaign.country_codes.filter { |code| code.present? }
 
     respond_to do |format|
       if @campaign.save

app/helpers/campaigns_helper.rb

@@ -20,4 +20,10 @@ def campaign_status_html(status)
     when "archived" then tag.span(class: "fas fa-circle text-muted", title: "Archived", data: tooltip_expando(placement: "left"))
     end
   end
+
+  def countries_with_codes_for_subregion(subregion)
+    Country.where(subregion: subregion).map do |country|
+      [country.name, country.iso_code]
+    end
+  end
 end

app/javascript/src/app/controllers/checkbox_tree_branch_controller.js

@@ -0,0 +1,41 @@
+import { Controller } from 'stimulus';
+
+export default class extends Controller {
+  static targets = ['toggle', 'selectAll', 'leaves', 'leaf'];
+
+  toggleBranch(event) {
+    this.toggleTarget.classList.toggle('open');
+    this.leavesTarget.classList.toggle('open');
+  }
+
+  toggleSelectAll() {
+    this.leafTargets.forEach(leaf => {
+      leaf.checked = this.selectAllTarget.checked;
+    });
+  }
+
+  handleLeafChange() {
+    const allChecked = () => {
+      return this.leafTargets.every((leaf) => {
+        return leaf.checked;
+      });
+    };
+
+    const anyChecked = () => {
+      return this.leafTargets.some((leaf) => {
+        return leaf.checked;
+      });
+    }
+
+    if (allChecked()) {
+      this.selectAllTarget.checked = true;
+      this.selectAllTarget.indeterminate = false;
+    } else if (anyChecked()) {
+      this.selectAllTarget.checked = true;
+      this.selectAllTarget.indeterminate = true;
+    } else {
+      this.selectAllTarget.checked = false;
+      this.selectAllTarget.indeterminate = false;
+    }
+  }
+}

app/javascript/src/app/stylesheets/components.scss

@@ -2,6 +2,7 @@
 @import './components/hubspot';
 @import './components/job_listing';
 @import './components/job_listing_keyword';
+@import './components/checkbox_tree';
 
 legend,
 label {

app/javascript/src/app/stylesheets/components/checkbox_tree.scss

@@ -0,0 +1,39 @@
+.checkbox-tree {
+
+  &__branch {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    grid-template-rows: auto 1fr;
+    color: $primary;
+  }
+
+  &__branch > i {
+    align-self: flex-start;
+    margin-right: 10px;
+    margin-top: 5px;
+    cursor: pointer;
+    transition: all .2s;
+
+    &.open {
+      transform: rotate(90deg);
+    }
+  }
+
+  &__branch-leaves {
+    grid-column: 2/3;
+    align-self: start;
+    height: 0;
+    overflow: hidden;
+    transition: all .2s;
+    color: #1e2022;
+    font-size: 14px;
+
+    &.open {
+      height: auto;
+    }
+  }
+
+  &__branch-leaves legend {
+    display: none;
+  }
+}

app/views/campaigns/_form.html.erb

@@ -60,16 +60,34 @@
     <%= render "/@shared/forms/section_heading", title: "Targeting", subtitle: "Who do you want this campaign to reach?" %>
 
     <div class="row" data-controller="select-geo-targets" data-action="cf:select:changed->select-geo-targets#updateProvinceCodeOptions">
-      <div class="col-12 mb-3" data-controller="select-multiple">
-        <%= f.input :country_codes, required: true, collection: countries_with_pricing_for_select(@campaign.ecpm), label: "Targeted Counties",
-          input_html: { multiple: true, data: { controller: "select", target: "select-multiple.select select-geo-targets.countryCodesSelect" }} %>
-        <div class="d-block">
-          <%= link_to "All", request.path, class: "btn text-uppercase btn-soft-secondary btn-xs py-0", data: { action: "click->select-multiple#selectAll" }  %>
+      <div class="col-12 mb-3">
+        <%= f.label :country_codes, label: "Targeted Countries", class: "form-label", required: true %>
+        <div class="checkbox-tree">
           <% Country.all.map(&:subregion).uniq.sort.each do |subregion| %>
-            <%= link_to subregion, request.path, class: "btn text-uppercase btn-soft-secondary btn-xs py-0",
-              data: { action: "click->select-multiple#selectSubset", values: Country.where(subregion: subregion).map(&:iso_code).to_json }  %>
+            <div class="checkbox-tree__branch" data-controller="checkbox-tree-branch">
+              <i class="fa fa-caret-right"
+                 data-target="checkbox-tree-branch.toggle"
+                 data-action="click->checkbox-tree-branch#toggleBranch">
+              </i>
+              <div class="form-check">
+                <%= check_box_tag subregion.downcase,
+                  nil,
+                  false,
+                  class: 'form-check-input',
+                  data: {
+                    target: 'checkbox-tree-branch.selectAll',
+                    action: 'change->checkbox-tree-branch#toggleSelectAll'
+                  } %>
+                <%= label_tag subregion.downcase, subregion, class: 'form-check-label' %>
+              </div>
+              <div class="checkbox-tree__branch-leaves" data-target="checkbox-tree-branch.leaves">
+                <%= f.input :country_codes,
+                  as: :check_boxes,
+                  collection: countries_with_codes_for_subregion(subregion),
+                  input_html: { data: { target: 'checkbox-tree-branch.leaf', action: 'change->checkbox-tree-branch#handleLeafChange' } } %>
+              </div>
+            </div>
           <% end %>
-          <%= link_to "Clear", request.path, class: "btn text-uppercase btn-soft-secondary btn-xs py-0", data: { action: "click->select-multiple#clearSelections" }  %>
         </div>
       </div>
       <div class="col-12 mb-3" data-controller="select-multiple">