Render admin/enterprises/<name>/edit page using stimulus

openfoodfoundation · Aug 9, 2022 · 2d53941 · 2d53941
1 parent dc48512
commit 2d53941
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 75 deletions.
diff --git a/app/helpers/admin/enterprises_helper.rb b/app/helpers/admin/enterprises_helper.rb
@@ -13,5 +13,34 @@ def add_check_if_single(count)
     def select_only_item(producers)
       producers.size == 1 ? producers.first.id : nil
     end
+
+    def enterprise_side_menu_items(enterprise)
+      is_shop = enterprise.sells != "none"
+      show_properties = !!enterprise.is_primary_producer
+      show_shipping_methods = can?(:manage_shipping_methods, enterprise) && is_shop
+      show_payment_methods = can?(:manage_payment_methods, enterprise) && is_shop
+      show_enterprise_fees = can?(:manage_enterprise_fees,
+                                  enterprise) && (is_shop || enterprise.is_primary_producer)
+
+      [
+        { name: 'primary_details', icon_class: "icon-home", show: true, selected: 'selected' },
+        { name: 'address', icon_class: "icon-map-marker", show: true },
+        { name: 'contact', icon_class: "icon-phone", show: true },
+        { name: 'social',  icon_class: "icon-twitter", show: true },
+        { name: 'about',   icon_class: "icon-pencil", show: true, form_name: "about_us" },
+        { name: 'business_details', icon_class: "icon-briefcase", show: true },
+        { name: 'images', icon_class: "icon-picture", show: true },
+        { name: 'properties', icon_class: "icon-tags", show: show_properties },
+        { name: 'shipping_methods', icon_class: "icon-truck", show: show_shipping_methods },
+        { name: 'payment_methods',  icon_class: "icon-money", show: show_payment_methods },
+        { name: 'enterprise_fees',  icon_class: "icon-tasks", show: show_enterprise_fees },
+        { name: 'enterprise_permissions', icon_class: "icon-plug", show: true,
+          href: admin_enterprise_relationships_path },
+        { name: 'inventory_settings', icon_class: "icon-list-ol", show: is_shop },
+        { name: 'tag_rules', icon_class: "icon-random", show: is_shop },
+        { name: 'shop_preferences', icon_class: "icon-shopping-cart", show: is_shop },
+        { name: 'users', icon_class: "icon-user", show: true }
+      ]
+    end
   end
 end
diff --git a/app/views/admin/enterprises/_form.html.haml b/app/views/admin/enterprises/_form.html.haml
@@ -1,63 +1,21 @@
-%fieldset.alpha.no-border-bottom{ ng: { show: "menu.selected.name=='primary_details'" } }
-  %legend {{menu.selected.label}}
-  = render 'admin/enterprises/form/primary_details', f: f
-
-%fieldset.alpha.no-border-bottom{ ng: { show: "menu.selected.name=='users'" } }
-  %legend {{menu.selected.label}}
-  = render 'admin/enterprises/form/users', f: f
-
-= f.fields_for :address do |af|
-  %fieldset.alpha.no-border-bottom{ ng: { show: "menu.selected.name=='address'" } }
-    %legend {{menu.selected.label}}
-    = render 'admin/enterprises/form/address', af: af
-
-%fieldset.alpha.no-border-bottom{ ng: { show: "menu.selected.name=='contact'" } }
-  %legend {{menu.selected.label}}
-  = render 'admin/enterprises/form/contact', f: f
-
-%fieldset.alpha.no-border-bottom{ ng: { show: "menu.selected.name=='social'" } }
-  %legend {{menu.selected.label}}
-  = render 'admin/enterprises/form/social', f: f
-
-%fieldset.alpha.no-border-bottom{ ng: { show: "menu.selected.name=='business_details'" } }
-  %legend {{menu.selected.label}}
-  = render 'admin/enterprises/form/business_details', f: f
-
-%fieldset.alpha.no-border-bottom{ ng: { show: "menu.selected.name=='about'" } }
-  %legend {{menu.selected.label}}
-  = render 'admin/enterprises/form/about_us', f: f
-
-%fieldset.alpha.no-border-bottom{ ng: { show: "menu.selected.name=='images'" } }
-  %legend {{menu.selected.label}}
-  = render 'admin/enterprises/form/images', f: f
-
-%fieldset.alpha.no-border-bottom{ ng: { show: "menu.selected.name=='properties'" } }
-  %legend {{menu.selected.label}}
-  = render 'admin/enterprises/form/properties', f: f
-
-%fieldset.alpha.no-border-bottom{ ng: { show: "menu.selected.name=='shipping_methods'" } }
-  %legend {{menu.selected.label}}
-  = render 'admin/enterprises/form/shipping_methods', f: f
-
-%fieldset.alpha.no-border-bottom{ ng: { show: "menu.selected.name=='payment_methods'" } }
-  %legend {{menu.selected.label}}
-  = render 'admin/enterprises/form/payment_methods', f: f
-
-%fieldset.alpha.no-border-bottom{ ng: { show: "menu.selected.name=='enterprise_fees'" } }
-  %legend {{menu.selected.label}}
-  = render 'admin/enterprises/form/enterprise_fees', f: f
-
-%fieldset.alpha.no-border-bottom{ ng: { show: "menu.selected.name=='enterprise_permissions'" } }
-  %legend {{menu.selected.label}}
-
-%fieldset.alpha.no-border-bottom{ ng: { show: "menu.selected.name=='inventory_settings'" } }
-  %legend {{menu.selected.label}}
-  = render 'admin/enterprises/form/inventory_settings', f: f
-
-%fieldset.alpha.no-border-bottom{ ng: { show: "menu.selected.name=='shop_preferences'" } }
-  %legend {{menu.selected.label}}
-  = render 'admin/enterprises/form/shop_preferences', f: f
-
-%fieldset.alpha.no-border-bottom{ ng: { if: "menu.selected.name=='tag_rules'" } }
-  %legend {{menu.selected.label}}
-  = render 'admin/enterprises/form/tag_rules', f: f
+- enterprise_side_menu_items(@enterprise).each do |item|
+  - case item[:name]
+  - when 'primary_details'
+    %fieldset.alpha.no-border-bottom{ id: "#{item[:name]}_form", data: { "enterprise-form-target": "form default"  }}
+      %legend= t("#{ item[:name] }")
+      = render "admin/enterprises/form/#{ item[:form_name] || item[:name] }", f: f
+
+  - when 'address'
+    = f.fields_for :address do |af|
+      %fieldset.alpha.no-border-bottom{ id: "#{item[:name]}_form", data: { "enterprise-form-target": "form" }}
+        %legend= t("#{ item[:name] }")
+        = render 'admin/enterprises/form/address', af: af
+
+  - when 'enterprise_permissions'
+    %fieldset.alpha.no-border-bottom{ id: "#{item[:name]}_form", data: { "enterprise-form-target": "form" }}
+      %legend= t("#{ item[:name] }")
+
+  - else
+    %fieldset.alpha.no-border-bottom{ id: "#{item[:name]}_form", data: { "enterprise-form-target": "form"  }}
+      %legend= t("#{ item[:name] }")
+      = render "admin/enterprises/form/#{ item[:form_name] || item[:name] }", f: f
diff --git a/app/views/admin/enterprises/_ng_form.html.haml b/app/views/admin/enterprises/_ng_form.html.haml
@@ -10,7 +10,8 @@
     %input.red{ type: "button", value: t(:update), ng: { click: "submit()", disabled: "!enterprise_form.$dirty" } }
     %input{ type: "button", ng: { value: "enterprise_form.$dirty ? '#{t(:cancel)}' : '#{t(:close)}'", click: "cancel('#{main_app.admin_enterprises_path}')" } }
 
-  .row
+  .row{ data: { 
+    controller: "side-menu enterprise-form", action: "side-menu:changeActiveComponent->enterprise-form#show", "side-menu-class-name-value": "selected" }}
     .sixteen.columns.alpha
       .four.columns.alpha
         = render 'admin/shared/side_menu'

diff --git a/app/views/admin/shared/_side_menu.html.haml b/app/views/admin/shared/_side_menu.html.haml
@@ -1,8 +1,6 @@
-.side_menu{ ng: { controller: 'sideMenuCtrl' } }
-  %a.menu_item{ href: "", id: "{{ item.name.toLowerCase().replace(' ', '_') }}",
-    ng: { repeat: '(index,item) in menu.items | filter:{visible:true}',
-    click: 'select(index)',
-    show: '!showItem || showItem(item)',
-    class: '{ selected: item.selected }' } }
-    %i{ class: "{{item.icon_class}}" }
-    %span {{ item.label }}
+.side_menu
+  - enterprise_side_menu_items(@enterprise).each do |item|
+  - next unless item[:show]
+    %a.menu_item{ href: item[:href] || "##{item[:name]}_form", id: item[:name], data: { action: "side-menu#changeActiveTab", "side-menu-target": "tab" }, class: item[:selected] }
+      %i{ class: item[:icon_class] }
+      %span= t("#{item[:name] }")
diff --git a/spec/system/admin/enterprises_spec.rb b/spec/system/admin/enterprises_spec.rb
@@ -108,7 +108,7 @@
     description_input = page.find("text-angular#enterprise_long_description div[id^='taTextElement']")
     description_input.native.send_keys('This is an interesting long description')
 
-    # Check Angularjs switching of sidebar elements
+    # Check StimulusJs switching of sidebar elements
     accept_alert do
       click_link "Primary Details"
     end
@@ -485,7 +485,7 @@
           end
 
           choose "enterprise_preferred_shopfront_product_sorting_method_by_category"
-          find("#s2id_autogen7").click
+          find("#s2id_enterprise_preferred_shopfront_taxon_order").click
           find(".select2-result-label", text: "Tricky Taxon").click
           click_button 'Update'
           expect(flash_message).to eq('Enterprise "First Distributor" has been successfully updated!')
@@ -506,7 +506,7 @@
           end
 
           choose "enterprise_preferred_shopfront_product_sorting_method_by_producer"
-          find("#s2id_autogen8").click
+          find("#s2id_enterprise_preferred_shopfront_producer_order").click
           find(".select2-result-label", text: "First Supplier").click
           click_button 'Update'
           expect(flash_message).to eq('Enterprise "First Distributor" has been successfully updated!')