Improve shops performance

app/assets/javascripts/darkswarm/controllers/hub_node_controller.js.coffee

@@ -1,9 +1,37 @@
-Darkswarm.controller "HubNodeCtrl", ($scope, HashNavigation, Navigation, $location, $templateCache, CurrentHub) ->
-  $scope.toggle = (e) ->
-    HashNavigation.toggle $scope.hub.hash if !angular.element(e.target).inheritedData('is-link')
+Darkswarm.controller "HubNodeCtrl", ($scope, HashNavigation, Navigation, $location, $templateCache, CurrentHub, $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.hub.id]
+      $scope.hub = $scope.enterprise_details[$scope.hub.id]
+      $scope.toggle_tab(event)
+      return
+
+    $scope.shopfront_loading = true
+    $scope.toggle_tab(event)
+
+    $http.get("/api/enterprises/" + $scope.hub.id + "/shopfront")
+      .success (data) ->
+        $scope.shopfront_loading = false
+        $scope.hub = data
+        $scope.enterprise_details[$scope.hub.id] = $scope.hub
+      .error (data) ->
+        console.error(data)
+
+  $scope.toggle_tab = (event) ->
+    HashNavigation.toggle $scope.hub.hash if !angular.element(event.target).inheritedData('is-link')
+
+  # Returns boolean: pulldown tab is currently open/closed
   $scope.open = ->
     HashNavigation.active $scope.hub.hash
-  
+
+  # Returns boolean: is this hub the hub that the user is currently "shopping" in?
   $scope.current = ->
     $scope.hub.id is CurrentHub.hub.id

app/assets/javascripts/darkswarm/directives/enterprise_modal.js.coffee

@@ -1,15 +1,10 @@
-Darkswarm.directive "enterpriseModal", ($modal, Enterprises, EnterpriseResource) ->
+Darkswarm.directive "enterpriseModal", (EnterpriseModal) ->
   restrict: 'E'
   replace: true
   template: "<a ng-transclude></a>"
   transclude: true
   link: (scope, elem, attrs, ctrl) ->
-    elem.on "click", (ev) =>
-      ev.stopPropagation()
-      params =
-        id: scope.enterprise.id
-      EnterpriseResource.relatives params, (data) =>
-        Enterprises.addEnterprises data
-        scope.enterprise = Enterprises.enterprises_by_id[scope.enterprise.id]
-        Enterprises.dereferenceEnterprise scope.enterprise
-      scope.modalInstance = $modal.open(controller: ctrl, templateUrl: 'enterprise_modal.html', scope: scope)
+    elem.on "click", (event) =>
+      event.stopPropagation()
+
+      scope.modalInstance = EnterpriseModal.open scope.enterprise

app/assets/javascripts/darkswarm/services/enterprises.js.coffee

@@ -1,14 +1,18 @@
 Darkswarm.factory 'Enterprises', (enterprises, CurrentHub, Taxons, Dereferencer, visibleFilter, Matcher, Geo, $rootScope) ->
   new class Enterprises
     enterprises_by_id: {}
+
     constructor: ->
       # Populate Enterprises.enterprises from json in page.
       @enterprises = enterprises
+
       # Map enterprises to id/object pairs for lookup.
       for enterprise in enterprises
         @enterprises_by_id[enterprise.id] = enterprise
+
       # Replace enterprise and taxons ids with actual objects.
       @dereferenceEnterprises()
+
       @visible_enterprises = visibleFilter @enterprises
       @producers = @visible_enterprises.filter (enterprise)->
         enterprise.category in ["producer_hub", "producer_shop", "producer"]
@@ -22,8 +26,6 @@ Darkswarm.factory 'Enterprises', (enterprises, CurrentHub, Taxons, Dereferencer,
         @dereferenceEnterprise enterprise
 
     dereferenceEnterprise: (enterprise) ->
-      @dereferenceProperty(enterprise, 'hubs', @enterprises_by_id)
-      @dereferenceProperty(enterprise, 'producers', @enterprises_by_id)
       @dereferenceProperty(enterprise, 'taxons', Taxons.taxons_by_id)
       @dereferenceProperty(enterprise, 'supplied_taxons', Taxons.taxons_by_id)
 

app/controllers/shops_controller.rb

@@ -6,6 +6,7 @@ class ShopsController < BaseController
   def index
     @enterprises = Enterprise
       .activated
+      .is_distributor
       .includes(address: :state)
       .includes(:properties)
       .includes(supplied_products: :properties)

app/serializers/api/cached_enterprise_serializer.rb

@@ -14,7 +14,7 @@ module Api
                :long_description, :website, :instagram, :linkedin, :twitter,
                :facebook, :is_primary_producer, :is_distributor, :phone, :visible,
                :email_address, :hash, :logo, :promo_image, :path, :pickup, :delivery,
-               :icon, :icon_font, :producer_icon_font, :category, :producers, :hubs
+               :icon, :icon_font, :producer_icon_font, :category
 
     attributes :taxons, :supplied_taxons
 
@@ -53,16 +53,6 @@ module Api
       enterprise_shop_path(enterprise)
     end
 
-    def producers
-      relatives = data.relatives[enterprise.id]
-      ids_to_objs(relatives.andand[:producers])
-    end
-
-    def hubs
-      relatives = data.relatives[enterprise.id]
-      ids_to_objs(relatives.andand[:distributors])
-    end
-
     def taxons
       if active
         ids_to_objs data.current_distributed_taxons[enterprise.id]

app/views/shops/_fat.html.haml

@@ -1,5 +1,9 @@
 .row.active_table_row{"ng-show" => "open()", "ng-click" => "toggle($event)", "ng-class" => "{'open' : open()}"}
-  .columns.small-12.medium-6.large-5.fat
+  .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-6.large-5.fat{"ng-show" => "open() && !shopfront_loading"}
     %div{"ng-if" => "::hub.taxons"}
       %label
         = t :hubs_buy
@@ -13,7 +17,7 @@
             %span{"ng-bind" => "property.presentation"}
     %div.show-for-medium-up{"ng-if" => "::hub.taxons.length==0"}
        
-  .columns.small-12.medium-3.large-2.fat
+  .columns.small-12.medium-3.large-2.fat{"ng-show" => "open() && !shopfront_loading"}
     %div{"ng-if" => "::(hub.pickup || hub.delivery)"}
       %label
         = t :hubs_delivery_options
@@ -24,7 +28,7 @@
         %li.delivery{"ng-if" => "::hub.delivery"}
           %i.ofn-i_039-delivery
           = t :hubs_delivery
-  .columns.small-12.medium-3.large-5.fat
+  .columns.small-12.medium-3.large-5.fat{"ng-show" => "open() && !shopfront_loading"}
     %div{"ng-if" => "::hub.producers"}
       %label
         = t :hubs_producers

app/views/shops/_hubs.html.haml

@@ -1,5 +1,3 @@
-= inject_enterprises(@enterprises)
-
 #hubs.hubs{"ng-controller" => "EnterprisesCtrl", "ng-cloak" => true}
   .row
     .small-12.columns

app/views/shops/index.html.haml

@@ -1,6 +1,8 @@
 - content_for(:title) do
   = t :shops_title
 
+= inject_enterprises(@enterprises)
+
 #panes
   #shops.pane
     .row

lib/open_food_network/enterprise_injection_data.rb

@@ -12,10 +12,6 @@ module OpenFoodNetwork
       @shipping_method_services ||= Spree::ShippingMethod.services
     end
 
-    def relatives
-      @relatives ||= EnterpriseRelationship.relatives(true)
-    end
-
     def supplied_taxons
       @supplied_taxons ||= Spree::Taxon.supplied_taxons
     end