Render enterprise groups #edit and #new page using stimulus

app/helpers/admin/enterprise_groups_helper.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module Admin
+  module EnterpriseGroupsHelper
+    def enterprise_group_side_menu_items
+      [
+        { name: 'primary_details', label: 'primary_details', icon_class: "icon-user",
+          selected: "selected" },
+        { name: 'users', label: 'users', icon_class: "icon-user" },
+        { name: 'about', label: 'about', icon_class: "icon-pencil" },
+        { name: 'images', label: 'images', icon_class: "icon-picture" },
+        { name: 'contact', label: 'admin_enterprise_groups_contact', icon_class: "icon-phone" },
+        { name: 'web', label: 'admin_enterprise_groups_web', icon_class: "icon-globe" },
+      ]
+    end
+  end
+end

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

@@ -1,7 +1,7 @@
 = render 'spree/shared/error_messages', target: @enterprise
 
 = form_for [main_app, :admin, @enterprise_group] do |f|
-  .row{ ng: {app: 'admin.enterprise_groups', controller: 'enterpriseGroupCtrl'} }
+  .row{ ng: {app: 'admin.enterprise_groups', controller: 'enterpriseGroupCtrl'}, data: { controller: 'tabs-and-panels', "tabs-and-panels-class-name-value": "selected" } }
     .sixteen.columns.alpha
       .four.columns.alpha
         = render 'admin/shared/side_menu'

app/views/admin/enterprise_groups/_form_about.html.haml

@@ -1,5 +1,5 @@
-%fieldset.alpha.no-border-bottom{ ng: { show: "menu.selected.name=='about'" } }
-  %legend {{menu.selected.label}}
+%fieldset.alpha.no-border-bottom#about_panel{ data: { "tabs-and-panels-target": "panel" } }
+  %legend= t('about')
   = f.field_container :long_description do
     %text-angular{'id' => 'enterprise_group_long_description', 'name' => 'enterprise_group[long_description]', 'class' => 'text-angular', "textangular-links-target-blank" => true,
       'ta-toolbar' => "[['h1','h2','h3','h4','p'],['bold','italics','underline','clear'],['insertLink']]"}

app/views/admin/enterprise_groups/_form_address.html.haml

@@ -1,6 +1,6 @@
 = f.fields_for :address do |af|
-  %fieldset.alpha.no-border-bottom{ ng: { show: "menu.selected.name=='contact'" } }
-    %legend {{menu.selected.label}}
+  %fieldset.alpha.no-border-bottom#contact_panel{ data: { "tabs-and-panels-target": "panel" } }
+    %legend= t('admin_enterprise_groups_contact')
     .row
       .alpha.three.columns
         = af.label :phone

app/views/admin/enterprise_groups/_form_images.html.haml

@@ -1,5 +1,5 @@
-%fieldset.alpha.no-border-bottom{ ng: { show: "menu.selected.name=='images'" } }
-  %legend {{menu.selected.label}}
+%fieldset.alpha.no-border-bottom#images_panel{ data: { "tabs-and-panels-target": "panel" } }
+  %legend= t('images')
   .row
     .alpha.three.columns
       = f.label :logo, 'ofn-with-tip' => t('admin_enterprise_groups_data_powertip_logo')

app/views/admin/enterprise_groups/_form_primary_details.html.haml

@@ -1,5 +1,5 @@
-%fieldset.alpha.no-border-bottom{ ng: { show: "menu.selected.name=='primary_details'" } }
-  %legend {{menu.selected.label}}
+%fieldset.alpha.no-border-bottom#primary_details_panel{ data: { "tabs-and-panels-target": "panel default" } }
+  %legend= t('primary_details')
   = f.field_container :name do
     = f.label :name
     %br/

app/views/admin/enterprise_groups/_form_users.html.haml

@@ -1,5 +1,5 @@
-%fieldset.alpha.no-border-bottom{ ng: { show: "menu.selected.name=='users'" } }
-  %legend {{menu.selected.label}}
+%fieldset.alpha.no-border-bottom#users_panel{ data: { "tabs-and-panels-target": "panel" } }
+  %legend= t('users')
   .row
     .three.columns.alpha
       =f.label :owner_id, t(:admin_enterprise_groups_owner)

app/views/admin/enterprise_groups/_form_web.html.haml

@@ -1,5 +1,5 @@
-%fieldset.alpha.no-border-bottom{ ng: { show: "menu.selected.name=='web'" } }
-  %legend {{menu.selected.label}}
+%fieldset.alpha.no-border-bottom#web_panel{ data: { "tabs-and-panels-target": "panel" } }
+  %legend= t('admin_enterprise_groups_web')
   .row
     .alpha.three.columns
       = f.label :website

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

@@ -1,6 +1,13 @@
 .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] }
-      %i{ class: item[:icon_class] }
-      %span= t("#{item[:name] }")
+  - if @enterprise
+    - 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] }
+        %i{ class: item[:icon_class] }
+        %span= t("#{item[:name] }")
+  - else
+    - enterprise_group_side_menu_items.each do |item|
+      %a.menu_item{ href: "##{item[:name]}_panel", class: item[:selected], id: item[:name], data: { action: "tabs-and-panels#changeActivePanel tabs-and-panels#changeActiveTab", "tabs-and-panels-target": "tab" } }
+        %i{ class: item[:icon_class] }
+        %span= t("#{item[:label] }")
+