From ed97400a23738bb7f51b019f3c03f2975a9f861d Mon Sep 17 00:00:00 2001
From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com>
Date: Thu, 9 May 2019 20:27:41 +0100
Subject: [PATCH] Improve producers performance

---
 .../producer_node_controller.js.coffee        | 32 +++++++++++++++++--
 app/controllers/producers_controller.rb       | 10 +++++-
 .../api/enterprise_thin_serializer.rb         |  2 +-
 app/views/producers/_fat.html.haml            | 13 +++++---
 app/views/producers/_skinny.html.haml         | 18 ++++++-----
 app/views/producers/index.html.haml           |  2 +-
 6 files changed, 58 insertions(+), 19 deletions(-)

diff --git a/app/assets/javascripts/darkswarm/controllers/producer_node_controller.js.coffee b/app/assets/javascripts/darkswarm/controllers/producer_node_controller.js.coffee
index d46106a830..e8aeb58af2 100644
--- a/app/assets/javascripts/darkswarm/controllers/producer_node_controller.js.coffee
+++ b/app/assets/javascripts/darkswarm/controllers/producer_node_controller.js.coffee
@@ -1,6 +1,32 @@
-Darkswarm.controller "ProducerNodeCtrl", ($scope, HashNavigation, $anchorScroll) ->
-  $scope.toggle = ->
-    HashNavigation.toggle $scope.producer.hash
+Darkswarm.controller "ProducerNodeCtrl", ($scope, HashNavigation, $anchorScroll, $http) ->
+  $scope.shopfront_loading = false
+  $scope.enterprise_details = []
+
+  # Toggles shopfront tabs open/closed. Fetches enterprise details from the api, diplays them and adds them
+  # to $scope.enterprise_details, or simply displays the details again if previously fetched
+  $scope.toggle = (event) ->
+    if $scope.open()
+      $scope.toggle_tab(event)
+      return
+
+    if $scope.enterprise_details[$scope.producer.id]
+      $scope.producer = $scope.enterprise_details[$scope.producer.id]
+      $scope.toggle_tab(event)
+      return
+
+    $scope.shopfront_loading = true
+    $scope.toggle_tab(event)
+
+    $http.get("/api/enterprises/" + $scope.producer.id + "/shopfront")
+      .success (data) ->
+        $scope.shopfront_loading = false
+        $scope.producer = data
+        $scope.enterprise_details[$scope.producer.id] = $scope.producer
+      .error (data) ->
+        console.error(data)
+
+  $scope.toggle_tab = (event) ->
+    HashNavigation.toggle $scope.producer.hash if !angular.element(event.target).inheritedData('is-link')
 
   $scope.open = ->
     HashNavigation.active($scope.producer.hash)
diff --git a/app/controllers/producers_controller.rb b/app/controllers/producers_controller.rb
index efdd889aed..4dd7800003 100644
--- a/app/controllers/producers_controller.rb
+++ b/app/controllers/producers_controller.rb
@@ -3,5 +3,13 @@ class ProducersController < BaseController
 
   before_filter :enable_embedded_shopfront
 
-  def index; end
+  def index
+    @enterprises = Enterprise
+      .activated
+      .is_primary_producer
+      .includes(address: :state)
+      .includes(:properties)
+      .includes(supplied_products: :properties)
+      .all
+  end
 end
diff --git a/app/serializers/api/enterprise_thin_serializer.rb b/app/serializers/api/enterprise_thin_serializer.rb
index cdc4d6b9eb..7127ab12bd 100644
--- a/app/serializers/api/enterprise_thin_serializer.rb
+++ b/app/serializers/api/enterprise_thin_serializer.rb
@@ -1,6 +1,6 @@
 module Api
   class EnterpriseThinSerializer < ActiveModel::Serializer
-    attributes :name, :id, :active, :path
+    attributes :name, :id, :active, :path, :visible
 
     has_one :address, serializer: Api::AddressSerializer
 
diff --git a/app/views/producers/_fat.html.haml b/app/views/producers/_fat.html.haml
index 190e244bb5..2dc7454671 100644
--- a/app/views/producers/_fat.html.haml
+++ b/app/views/producers/_fat.html.haml
@@ -1,6 +1,9 @@
 .row.active_table_row{"ng-if" => "open()", "ng-click" => "toggle($event)", "ng-class" => "{'open' : open()}"}
+  .columns.small-12.fat.text-center{"ng-show" => "open() && shopfront_loading"}
+    %p
+      %img.spinner.text-center{ src: "/assets/spinning-circles.svg" }
 
-  .columns.small-12.medium-7.large-7.fat
+  .columns.small-12.medium-7.large-7.fat{"ng-show" => "open() && !shopfront_loading"}
     / Will add in long description available once clean up HTML formatting producer.long_description
     %div{"ng-if" => "::producer.description"}
       %label
@@ -11,7 +14,7 @@
       %label &nbsp;
       %img.right.show-for-medium-up{"ng-src" => "{{::producer.logo}}" }
 
-  .columns.small-12.medium-5.large-5.fat
+  .columns.small-12.medium-5.large-5.fat{"ng-show" => "open() && !shopfront_loading"}
 
     %div{"ng-if" => "::producer.supplied_taxons"}
       %label
@@ -64,8 +67,8 @@
           %a{"ng-href" => "http://instagram.com/{{::producer.instagram}}", target: "_blank"}
             %i.ofn-i_043-instagram
 
-.row.active_table_row.pad-top{"ng-if" => "open() && producer.hubs"}
-  .columns.small-12
+.row.active_table_row.pad-top{"ng-if" => "open() && producer.hubs && !shopfront_loading"}
+  .columns.small-12{"ng-if" => "producer.hubs.length > 0"}
     .row
       .columns.small-12.fat
         %div{"ng-if" => "::producer.name"}
@@ -76,7 +79,7 @@
     .row.cta-container
       .columns.small-12
         %a.cta-hub{"ng-repeat" => "hub in producer.hubs | visible | orderBy:'-active'",
-        "ng-href" => "{{::hub.path}}", "ng-attr-target" => "{{ embedded_layout ? '_blank' : undefined }}", "ofn-change-hub" => "hub",
+        "ng-href" => "{{::hub.path}}", "ng-attr-target" => "{{ embedded_layout ? '_blank' : undefined }}",
         "ng-class" => "::{primary: hub.active, secondary: !hub.active}"}
           %i.ofn-i_068-shop-reversed{"ng-if" => "::hub.active"}
           %i.ofn-i_068-shop-reversed{"ng-if" => "::!hub.active"}
diff --git a/app/views/producers/_skinny.html.haml b/app/views/producers/_skinny.html.haml
index 9771576842..6e05619d07 100644
--- a/app/views/producers/_skinny.html.haml
+++ b/app/views/producers/_skinny.html.haml
@@ -1,24 +1,26 @@
 .row.active_table_row{"ng-click" => "toggle($event)", "ng-class" => "{'closed' : !open(), 'is_distributor' : producer.is_distributor}"}
-  .columns.small-12.medium-8.large-8.skinny-head
+  .columns.small-12.medium-7.large-7.skinny-head
     %span{"ng-if" => "::producer.is_distributor" }
-      %a.is_distributor{"ng-href" => "{{::producer.path}}", "ng-attr-target" => "{{ embedded_layout ? '_blank' : undefined}}"}
-        .row.vertical-align-middle
-          .columns.small-2.medium-2.large-2
+      .row.vertical-align-middle
+        .columns.small-12
+          %a.is_distributor{"ng-href" => "{{::producer.path}}", "ng-attr-target" => "{{ embedded_layout ? '_blank' : undefined}}", "data-is-link" => "true"}
             %i{ng: {class: "::producer.producer_icon_font"}}
-          .columns.small-10.medium-10.large-10
             %span.margin-top
               %strong{"ng-bind" => "::producer.name"}
+
     %span.producer-name{"ng-if" => "::!producer.is_distributor" }
       .row.vertical-align-middle
-        .columns.small-2.medium-2.large-2
+        .columns.small-12
           %i{ng: {class: "::producer.producer_icon_font"}}
-        .columns.small-10.medium-10.large-10
           %span.margin-top
             %strong{"ng-bind" => "::producer.name"}
-  .columns.small-6.medium-2.large-2
+
+  .columns.small-6.medium-3.large-3
     %span.margin-top{"ng-bind" => "::producer.address.city"}
+
   .columns.small-4.medium-1.large-1
     %span.margin-top{"ng-bind" => "::producer.address.state_name"}
+
   .columns.small-2.medium-1.large-1.text-right
     %span.margin-top
       %i{"ng-class" => "{'ofn-i_005-caret-down' : !open(), 'ofn-i_006-caret-up' : open()}"}
diff --git a/app/views/producers/index.html.haml b/app/views/producers/index.html.haml
index af6c2e4fd1..1558fc131c 100644
--- a/app/views/producers/index.html.haml
+++ b/app/views/producers/index.html.haml
@@ -1,7 +1,7 @@
 - content_for(:title) do
   = t :producers_title
 
-= inject_enterprises
+= inject_enterprises(@enterprises)
 
 .producers{"ng-controller" => "EnterprisesCtrl", "ng-cloak" => true}
   .row