MOTECH-2409 Updates to admin bundles

src/admin/bundles/bundles-list.controller.js

@@ -6,9 +6,47 @@
 
     bundlesListController.$inject = ['$scope', '$rootScope', 'BundlesFactory'];
     function bundlesListController ($scope, $rootScope, BundlesFactory) {
+        $scope.bundles = [];
+        $scope.search = {};
         BundlesFactory.query(function(bundles){
             $scope.bundles = bundles;
         });
+
+        $scope.allBundlesCount = function () {
+            if ($scope.bundles) {
+                return $scope.bundles.length;
+            } else {
+                return 0;
+            }
+        };
+
+        $scope.activeBundlesCount = function () {
+            var count = 0;
+            angular.forEach($scope.bundles, function (bundle) {
+                count += bundle.isActive() ? 1 : 0;
+            });
+
+            return count;
+        };
+
+        $scope.installedBundlesCount = function () {
+            var count = 0;
+            angular.forEach($scope.bundles, function (bundle) {
+                count += bundle.isInstalled() ? 1 : 0;
+            });
+
+            return count;
+        };
+
+        $scope.resolvedBundlesCount = function () {
+            var count = 0;
+            angular.forEach($scope.bundles, function (bundle) {
+                count += bundle.isResolved() ? 1 : 0;
+            });
+
+            return count;
+        };
+
     }
 
 })();

src/admin/bundles/bundles-list.html

@@ -1,5 +1,24 @@
 <motech-list>
-    <motech-list-item ng-repeat="bundle in bundles" >
+    <motech-list-header>
+        <form class="form-inline ">
+            <div class="form-group">
+                <label for="admin.bundles.list.filter">{{msg('admin.filter')}}</label>
+                <input id="admin.bundles.list.filter" type="text" ng-model="search.$"/>
+            </div>
+        </form>
+        <h3>{{msg('admin.bundles.statistics')}}</h3>
+        <dl>
+            <dt>{{msg('admin.bundles.statistics.total')}}</dt>
+            <dd>{{allBundlesCount()}}</dd>
+            <dt>{{msg('admin.bundles.statistics.active')}}</dt>
+            <dd>{{activeBundlesCount()}}</dd>
+            <dt>{{msg('admin.bundles.statistics.installed')}}</dt>
+            <dd>{{installedBundlesCount()}}</dd>
+            <dt>{{msg('admin.bundles.statistics.resolved')}}</dt>
+            <dd>{{resolvedBundlesCount()}}</dd>
+        </dl>
+    </motech-list-header>
+    <motech-list-item ng-repeat="bundle in bundles | filter:search" >
         <div column-title="Name" class="bundle-main">
             <a ui-sref="bundles.bundle({bundleId:bundle.bundleId})">
                 <img class="bundle-icon" alt="" ng-src="{{bundle.getIconURL()}}" />

src/admin/bundles/bundles.factory.js

@@ -29,6 +29,13 @@
             return this.state === "ACTIVE";
         };
 
+        Bundle.prototype.isInstalled = function () {
+            return this.state === 'INSTALLED';
+        };
+
+        Bundle.prototype.isResolved = function () {
+            return this.state === 'RESOLVED';
+        };
 
         function callbackSuccess(){
             LoadingModal.close();
@@ -75,6 +82,8 @@
             });
         };
 
+
+
         return Bundle;
     }
 

src/common/base/base.scss

@@ -50,3 +50,9 @@ h3, h4{
     position: relative;
     padding: 0em 1em;
 }
+
+dl{
+  dt, dd{
+    line-height: 1em;
+  }
+}

src/common/motech-list/list.base.scss

@@ -45,6 +45,10 @@
         @extend .clearfix;
         background-color: $brand-accent;
         padding: $space-size;
+        >*{
+            @extend .navbar;
+            border-bottom: 0px;
+        }
         .pagination{
             @extend .button-group-primary;
         }

src/common/navbar.scss

@@ -24,6 +24,7 @@ Styleguide 5.1
     padding: 0em 0.5em;
     display: block;
     >*{
+        margin-bottom: 0px;
         margin-right: 1em;
         float: left;
     }
@@ -53,3 +54,18 @@ nav.navbar,
         border-bottom-color: transparent;
     }
 }
+
+.navbar dl{
+    display: inline-block;
+    >*{
+        display: inline-block;
+    }
+    dt:after{
+        content: ": ";
+        white-space: pre;
+    }
+    dd:after{
+        content: ". ";
+        white-space: pre;
+    }
+}