feat(tree): allow tree depth of two

This commit changes the tree view to (inefficiently) allow trees of depth two. The bhNavigation component has been updated with a few new methods to clarify the HTML and controller functioning. As a demonstration, cashflow is now located in the finance/reports directory.
IMA-WorldHealth · Sep 17, 2016 · 532a62b · 532a62b
1 parent f0258a3
commit 532a62b
Show file tree

Hide file tree

Showing 6 changed files with 85 additions and 35 deletions.
diff --git a/client/src/css/structure.css b/client/src/css/structure.css
@@ -356,7 +356,12 @@
 }
 
 .flex-tree li {
-  border-bottom : 1px solid #ccc;
+  border-top: 1px solid #ccc;
+}
+
+/* make sure the bottom node has a bottom border */
+.flex-tree > ul > li:last-child {
+  border-bottom: 1px solid #ccc;
 }
 
 .flex-tree a {
@@ -374,7 +379,7 @@
   cursor : pointer;
 }
 
-.file {
+.subtree {
   border-left : 5px solid #707070;
 }
 

diff --git a/client/src/i18n/en.json b/client/src/i18n/en.json
@@ -1192,6 +1192,7 @@
     "REFERENCE"                  : "Reference",
     "REFERENCE_GROUP"            : "Reference Group",
     "REGISTER_SUPPLIER"          : "Supplier",
+    "REPORTS"                    : "Reports",
     "ROOT"                       : "Root",
     "RUBRIC_MANAGEMENT"          : "Rubrics Management",
     "INVOICES"                   : "Invoices",

diff --git a/client/src/js/components/bhNavigation.js b/client/src/js/components/bhNavigation.js
@@ -1,29 +1,31 @@
-/**
- * Top level application navigation component
- */
 angular.module('bhima.components')
-.component('bhNavigation', {
-  controller : NavigationController,
-  templateUrl : 'partials/templates/navigation.tmpl.html'
-});
+  .component('bhNavigation', {
+    controller : NavigationController,
+    templateUrl : 'partials/templates/navigation.tmpl.html'
+  });
 
 NavigationController.$inject = [
-  '$location', '$rootScope', 'Tree', 'AppCache'
+  '$location', '$rootScope', 'Tree', 'AppCache', 'NotifyService'
 ];
 
-function NavigationController($location, $rootScope, Tree, AppCache) {
+/**
+ * Navigation Controller
+ *
+ * @description
+ * This controller determines the
+ */
+function NavigationController($location, $rootScope, Tree, AppCache, Notify) {
   var $ctrl = this;
   var cache = AppCache('navigation');
 
-  /**
+  /*
    * Object used to index unit ids and paths, this allows for very efficient
    * lookups during runtime and means that the units only have to be recursively
    * parsed once - every following method should use the index to point to the
-   * relevent unit
+   * relevant unit
    */
   var unitsIndex = { id : {}, path : {} };
 
-  /** @todo handle exception cases displayed at the top of the Tree directive */
   Tree.units()
     .then(function (result) {
 
@@ -32,7 +34,8 @@ function NavigationController($location, $rootScope, Tree, AppCache) {
 
       calculateUnitIndex($ctrl.units);
       expandInitialUnits($ctrl.units);
-    });
+    })
+    .catch(Notify.handleError);
 
   // Tree Utility methods
   $ctrl.toggleUnit = function toggleUnit(unit) {
@@ -52,6 +55,18 @@ function NavigationController($location, $rootScope, Tree, AppCache) {
     Tree.sortByTranslationKey($ctrl.units);
   };
 
+  $ctrl.isParentNode = function isParentNode(node) {
+    return node.children && node.children.length > 0;
+  };
+
+  $ctrl.isChildNode = function isChildNode(node) {
+    return node.children && node.children.length === 0;
+  };
+
+  $ctrl.isOpen = function isOpen(node) {
+    return $ctrl.isParentNode(node) && node.open;
+  };
+
   /**
    * Select a unit in the tree given a specified URL.
    */
@@ -108,7 +123,7 @@ function NavigationController($location, $rootScope, Tree, AppCache) {
 
       if (angular.isDefined(currentUnit)) {
 
-        // Unit exists - set the relevent open state
+        // Unit exists - set the relevant open state
         currentUnit.open = node.open;
       } else {
 

diff --git a/client/src/partials/finance/cashflow/cashflow.routes.js b/client/src/partials/finance/cashflow/cashflow.routes.js
@@ -4,7 +4,7 @@ angular.module('bhima.routes')
 
   /* cashflow page */
   .state('cashflow', {
-    url : '/finance/cashflow',
+    url : '/finance/reports/cashflow',
     params: { dateFrom: null, dateTo: null, cashbox: null },
     controller : 'CashflowController as CashflowIndexCtrl',
     templateUrl : 'partials/finance/cashflow/index.html'

diff --git a/client/src/partials/templates/navigation.tmpl.html b/client/src/partials/templates/navigation.tmpl.html
@@ -1,11 +1,13 @@
 <!--
 Limitations of current templating structure:
 * Assumption is made children of the root node are folders
-* Only one level of depth is supported for children
+* Only two levels of depth is supported for children
 -->
 <div class="flex-tree">
   <ul>
-    <li ng-repeat-start="unit in $ctrl.units">
+
+    <!-- first level: unit -->
+    <li ng-repeat="unit in $ctrl.units track by unit.id">
       <a ng-click="$ctrl.toggleUnit(unit)">
         <span
           class="fa"
@@ -16,19 +18,42 @@
         </span>
         <span class="tree-title">{{ unit.key | translate }}</span>
       </a>
-    </li>
 
-    <!-- Naive one level child depth -->
-    <li
-      ng-repeat-end
-      ng-repeat="child in unit.children"
-      ng-show="unit.open"
-      class="file"
-      ng-class="{ 'selected' : child.selected }">
-      <a ng-click="$ctrl.navigate(child)">
-        <span class="fa fa-file"></span>
-        <span class="tree-title">{{ child.key | translate }}</a></span>
-      </a>
+      <ul ng-if="$ctrl.isOpen(unit)">
+
+        <!-- second level: child -->
+        <li ng-repeat="child in unit.children track by child.id" ng-class="{ 'selected' : child.selected }" class="subtree">
+
+          <!-- if there is a subtree, this is the top level node -->
+          <a ng-click="$ctrl.toggleUnit(child)" ng-if="$ctrl.isParentNode(child)">
+            <span
+              class="fa"
+              ng-class="{
+              'fa-exclamation-circle' : child.children.length === 0,
+              'fa-folder-open' : child.open && child.children.length > 0,
+              'fa-folder' : !child.open && child.children.length > 0}">
+            </span>
+            <span class="tree-title">{{ child.key | translate }}</span>
+          </a>
+
+          <!-- otherwise, it is just a plan link -->
+          <a ng-click="$ctrl.navigate(child)"ng-if="$ctrl.isChildNode(child)">
+            <span class="fa fa-file"></span>
+            <span class="tree-title">{{ child.key | translate }}</a></span>
+          </a>
+
+          <ul ng-if="$ctrl.isOpen(child)">
+
+            <!-- third level: subchild -->
+            <li ng-repeat="subchild in child.children track by subchild.id" ng-class="{ 'selected' : subchild.selected }" class="subtree">
+              <a ng-click="$ctrl.navigate(subchild)" ng-class="{ 'selected' : subchild.selected }">
+                <span class="fa fa-file"></span>
+                <span class="tree-title">{{ subchild.key | translate }}</a></span>
+              </a>
+            </li>
+          </ul>
+        </li>
+      </ul>
     </li>
   </ul>
 </div>
diff --git a/server/models/test/data.sql b/server/models/test/data.sql
@@ -47,9 +47,10 @@ INSERT INTO unit VALUES
   (141, 'Vouchers Records', 'TREE.VOUCHER_REGISTRY', 'Vouchers registry module', 5, '/partials/vouchers/index', '/vouchers'),
   (142, 'Purchase Orders', 'TREE.PURCHASING', 'This module is responsible for creating purchase orders', 138, '/partials/purchases/create', '/purchases/create'),
   (143, 'Transaction Type Module', 'TREE.TRANSACTION_TYPE', 'This module is responsible for managing transaction type', 1, '/partials/admin/transaction_type', '/admin/transaction_type'),
-  (144, 'Cashflow', 'TREE.CASHFLOW', 'the cashflow report', 5, '/partials/finance/cashflow', '/finance/cashflow');
+  (144, 'Reports (Finance)', 'TREE.REPORTS', 'A folder holding all finance reports', 5, '/partials/finance/reports', '/finance/reports'),
+  (145, 'Cashflow', 'TREE.CASHFLOW', 'The Cashflow Report', 144, '/partials/finance/cashflow', '/finance/reports/cashflow');
 
--- Reserved system account types
+-- Reserved system account type
 INSERT INTO `account_type` VALUES
   (1, 'income', 'ACCOUNT.TYPES.INCOME'),
   (2, 'expense', 'ACCOUNT.TYPES.EXPENSE'),
@@ -238,8 +239,11 @@ INSERT INTO permission (unit_id, user_id) VALUES
 -- transaction type
 (143, 1),
 
--- Cashflow
-(144,1);
+-- [Folder] Finance/Reports
+(144,1),
+
+-- Cashflow Report
+(145,1);
 
 
 -- testing financial transactions