Convert enterprises/edit page to stimulus

app/controllers/admin/enterprises_controller.rb

@@ -7,6 +7,7 @@
 module Admin
   class EnterprisesController < Admin::ResourceController
     include GeocodeEnterpriseAddress
+    include CablecarResponses
 
     # These need to run before #load_resource so that @object is initialised with sanitised values
     prepend_before_action :override_owner, only: :create
@@ -44,7 +45,11 @@ def index
     def edit
       @object = Enterprise.where(permalink: params[:id]).
         includes(users: [:ship_address, :bill_address]).first
-      super
+      if params[:stimulus]
+        @enterprise.is_primary_producer = params[:is_primary_producer]
+        @enterprise.sells = params[:enterprise_sells]
+        render operations: cable_car.morph("#side_menu", partial("admin/shared/side_menu"))
+      end
     end
 
     def welcome

app/views/admin/enterprises/_form.html.haml

@@ -1,7 +1,7 @@
 - enterprise_side_menu_items(@enterprise).each do |item|
   - case item[:name]
   - when 'primary_details'
-    %fieldset.alpha.no-border-bottom{ id: "#{item[:name]}_panel", data: { "tabs-and-panels-target": "panel default"  }}
+    %fieldset.alpha.no-border-bottom{ id: "#{item[:name]}_panel", data: { controller: "primary-details", "primary-details-primary-producer-value": @enterprise.is_primary_producer.to_s, "primary-details-enterprise-sells-value": @enterprise.sells, "tabs-and-panels-target": "panel default" }}
       %legend= t("#{ item[:name] }")
       = render "admin/enterprises/form/#{ item[:form_name] || item[:name] }", f: f
 

app/views/admin/enterprises/form/_primary_details.html.haml

@@ -12,14 +12,13 @@
         %a= t('admin.whats_this')
     .eight.columns.omega
       = f.collection_select :group_ids, @groups, :id, :name, {}, class: "select2 fullwidth", multiple: true, placeholder: t('.groups_placeholder')
-
 .row
   .three.columns.alpha
     %label= t('.primary_producer')
     %div{'ofn-with-tip' => t('.primary_producer_tip')}
       %a= t('admin.whats_this')
   .five.columns.omega
-    = f.check_box :is_primary_producer, 'ng-model' => 'Enterprise.is_primary_producer'
+    = f.check_box :is_primary_producer, data: { action: "change->primary-details#primaryProducerChanged" } 
     = f.label :is_primary_producer, t('.producer')
 - if spree_current_user.admin?
   .row
@@ -28,13 +27,13 @@
       %div{'ofn-with-tip' => t('.sells_tip')}
         %a= t('admin.whats_this')
     .two.columns
-      = f.radio_button :sells, "none", 'ng-model' => 'Enterprise.sells'
+      = f.radio_button :sells, "none", 'ng-model' => 'Enterprise.sells', data: {action: "change->primary-details#enterpriseSellsChanged"} 
       = f.label :sells, t('.none'), value: "none"
     .two.columns
-      = f.radio_button :sells, "own", 'ng-model' => 'Enterprise.sells'
+      = f.radio_button :sells, "own", 'ng-model' => 'Enterprise.sells', data: {action: "change->primary-details#enterpriseSellsChanged"}
       = f.label :sells, t('.own'), value: "own"
     .four.columns.omega
-      = f.radio_button :sells, "any", 'ng-model' => 'Enterprise.sells'
+      = f.radio_button :sells, "any", 'ng-model' => 'Enterprise.sells', data: {action: "change->primary-details#enterpriseSellsChanged"}
       = f.label :sells, t('.any'), value: "any"
 .row
   .three.columns.alpha

app/views/admin/shared/_side_menu.html.haml

@@ -1,4 +1,4 @@
-.side_menu
+.side_menu#side_menu
   - enterprise_side_menu_items(@enterprise).each do |item|
   - next unless item[:show]
     %a.menu_item{ href: item[:href] || "##{item[:name]}_panel", id: item[:name], data: { action: "tabs-and-panels#changeActivePanel tabs-and-panels#changeActiveTab", "tabs-and-panels-target": "tab" }, class: item[:selected] }

app/webpacker/controllers/primary_details_controller.js

@@ -0,0 +1,30 @@
+import { Controller } from "stimulus";
+import CableReady from "cable_ready";
+
+export default class extends Controller {
+  static values = { primaryProducer: String, enterpriseSells: String };
+
+  primaryProducerChanged(event) {
+    this.primaryProducerValue = event.currentTarget.checked;
+    this.makeRequest();
+  }
+
+  enterpriseSellsChanged(event) {
+    if (event.currentTarget.checked) {
+      this.enterpriseSellsValue = event.currentTarget.value;
+      this.makeRequest();
+    }
+  }
+
+  makeRequest() {
+    fetch(
+      `?stimulus=true&enterprise_sells=${this.enterpriseSellsValue}&is_primary_producer=${this.primaryProducerValue}`,
+      {
+        method: "GET",
+        headers: { "Content-type": "application/json; charset=UTF-8" },
+      }
+    )
+      .then((data) => data.json())
+      .then(CableReady.perform);
+  }
+}