Restyle the billing invoices tab

static/js/directives/ui/billing-invoices.js

@@ -0,0 +1,44 @@
+/**
+ * Element for displaying the list of billing invoices for the user or organization.
+ */
+angular.module('quay').directive('billingInvoices', function () {
+  var directiveDefinitionObject = {
+    priority: 0,
+    templateUrl: '/static/directives/billing-invoices.html',
+    replace: false,
+    transclude: false,
+    restrict: 'C',
+    scope: {
+      'organization': '=organization',
+      'user': '=user',
+      'makevisible': '=makevisible'
+    },
+    controller: function($scope, $element, $sce, ApiService) {
+      $scope.loading = false;
+
+      var update = function() {
+        var hasValidUser = !!$scope.user;
+        var hasValidOrg = !!$scope.organization;
+        var isValid = hasValidUser || hasValidOrg;
+
+        if (!$scope.makevisible || !isValid) {
+          return;
+        }
+
+        $scope.loading = true;
+
+        ApiService.listInvoices($scope.organization).then(function(resp) {
+          $scope.invoices = resp.invoices;
+          $scope.loading = false;
+        });
+      };
+
+      $scope.$watch('organization', update);
+      $scope.$watch('user', update);
+      $scope.$watch('makevisible', update);
+    }
+  };
+
+  return directiveDefinitionObject;
+});
+