Refactored states so that each tab of the application is a child of

a parent state which provides the page chrome as well as universally needed resolves.
ginkgostreet · Dec 20, 2018 · ac9fe95 · ac9fe95
1 parent 55d8bd7
commit ac9fe95
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 33 deletions.
diff --git a/ang/orgdash.js b/ang/orgdash.js
@@ -1,25 +1,47 @@
 (function(angular, $, _) {
   angular.module('orgdash', CRM.angRequires('orgdash'))
-    .config(function($stateProvider) {
+    .config(function($stateProvider, $urlRouterProvider) {
+
+      // Redirect to the organization detail route if the abstract parent is
+      // accessed directly.
+      $urlRouterProvider.when('/:id', '/:id/org');
+
       $stateProvider
-        .state('org', {
-          url: '/org/:id',
+        // Abstract parent state for all pages; provides the page "chrome" and
+        // universally needed resolves.
+        .state('dash', {
+          abstract: true,
+          url: '/:id',
+          templateUrl: '~/orgdash/partials/Dash.html',
+          controller: 'DashCtrl',
+          resolve: {
+            orgId: function ($stateParams) {
+              return $stateParams.id;
+            }
+          }
+        })
+
+        // Organization detail
+        .state('dash.org', {
+          url: '/org',
           templateUrl: '~/orgdash/partials/Org.html',
           controller: 'OrgCtrl'
         })
-        .state('contacts', {
-          url: '/contacts/:id',
+
+        // Contact list and detail
+        .state('dash.contacts', {
+          url: '/contacts',
           templateUrl: '~/orgdash/partials/Contacts.html',
           controller: 'ContactsCtrl',
           resolve: {
             profileId: function () {
               return CRM.vars.orgdash.orgdash_single_contact_profile;
             },
-            relatedContacts: function($stateParams, RelatedContactService, profileId, relTypeIds) {
+            relatedContacts: function(RelatedContactService, orgId, profileId, relTypeIds) {
               const relTypes = _.union(relTypeIds.benefits, relTypeIds.contacts, relTypeIds.highlighted);
 
               return RelatedContactService.fetch(
-                $stateParams.id,
+                orgId,
                 relTypes,
                 profileId
               );

diff --git a/ang/orgdash/controllers/Dash.js b/ang/orgdash/controllers/Dash.js
@@ -0,0 +1,7 @@
+(function(angular, $, _) {
+
+  angular.module('orgdash')
+    .controller('DashCtrl', function() {
+    });
+
+})(angular, CRM.$, CRM._);
diff --git a/ang/orgdash/controllers/OrgCtrl.js b/ang/orgdash/controllers/OrgCtrl.js
@@ -1,10 +1,10 @@
 (function(angular, $, _) {
 
   angular.module('orgdash')
-    .controller('OrgCtrl', function($scope, $stateParams) {
+    .controller('OrgCtrl', function($scope, orgId) {
       $scope.profileId = CRM.vars.orgdash.orgdash_org_profile_id;
       $scope.orgContact = {
-        id: $stateParams.id
+        id: orgId
       };
     });
 

diff --git a/ang/orgdash/partials/Dash.html b/ang/orgdash/partials/Dash.html
@@ -0,0 +1,23 @@
+<h1 crm-page-title>TODO: Title this page</h1>
+
+<!-- TODO: this nav is probably placeholder -->
+<div class="crm-tabset ui-tabs ui-corner-all ui-widget ui-widget-content">
+  <ul role="tablist" class="ui-tabs-nav ui-corner-all ui-helper-reset ui-helper-clearfix ui-widget-header">
+    <li class="ui-corner-all crm-tab-button ui-tabs-tab ui-corner-top ui-state-default ui-tab ui-tabs-active ui-state-active" role="tab" tabindex="0">
+      <a ui-sref=".org" role="presentation" tabindex="-1">
+        {{ts('Organization Details')}}
+      </a>
+    </li>
+    <li class="ui-corner-all crm-tab-button ui-tabs-tab ui-corner-top ui-state-default ui-tab ui-tabs-active ui-state-active" role="tab" tabindex="0">
+      <a ui-sref=".contacts" role="presentation" tabindex="-1">
+        {{ts('Contacts and Benefits')}}
+      </a>
+    </li>
+    <li class="ui-corner-all crm-tab-button ui-tabs-tab ui-corner-top ui-state-default ui-tab ui-tabs-active ui-state-active" role="tab" tabindex="0">
+      <a ui-sref=".txn" role="presentation" tabindex="-1">
+        {{ts('Transaction History')}}
+      </a>
+    </li>
+  </ul>
+</div>
+<div ui-view></div>
diff --git a/templates/CRM/Orgdash/Page/Angular.tpl b/templates/CRM/Orgdash/Page/Angular.tpl
@@ -1,27 +1,5 @@
 {literal}
   <div ng-app="orgdash">
-    <h1 crm-page-title>TODO: Title this page</h1>
-
-    <!-- TODO: this nav is probably placeholder -->
-    <div class="crm-tabset ui-tabs ui-corner-all ui-widget ui-widget-content">
-      <ul role="tablist" class="ui-tabs-nav ui-corner-all ui-helper-reset ui-helper-clearfix ui-widget-header">
-        <li class="ui-corner-all crm-tab-button ui-tabs-tab ui-corner-top ui-state-default ui-tab ui-tabs-active ui-state-active" role="tab" tabindex="0">
-          <a ui-sref="org" role="presentation" tabindex="-1">
-            {{ts('Organization Details')}}
-          </a>
-        </li>
-        <li class="ui-corner-all crm-tab-button ui-tabs-tab ui-corner-top ui-state-default ui-tab ui-tabs-active ui-state-active" role="tab" tabindex="0">
-          <a ui-sref="contacts" role="presentation" tabindex="-1">
-            {{ts('Contacts and Benefits')}}
-          </a>
-        </li>
-        <li class="ui-corner-all crm-tab-button ui-tabs-tab ui-corner-top ui-state-default ui-tab ui-tabs-active ui-state-active" role="tab" tabindex="0">
-          <a ui-sref="txn" role="presentation" tabindex="-1">
-            {{ts('Transaction History')}}
-          </a>
-        </li>
-      </ul>
-      <div ui-view></div>
-    </div>
+    <div ui-view></div>
   </div>
-{/literal}
+{/literal}