feat(subscription): api publisher could add app subscription

fix gravitee-io/issues#114

src/app/api/_api.scss

@@ -283,3 +283,9 @@ span.proxy-deactivated {
     cursor: pointer;
   }
 }
+
+
+.highlight{
+  color: black !important ;
+  font-weight: bolder !important ;
+}

src/app/api/admin/subscriptions/subscription.create.dialog.controller.js

@@ -0,0 +1,68 @@
+/*
+ * Copyright (C) 2015 The Gravitee team (http://gravitee.io)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+function DialogSubscriptionCreateController($scope, $mdDialog, plans, ApplicationService) {
+  'ngInject';
+  this.plans = plans;
+  this.selectedApp = null;
+  this.selectedPlan = null;
+  this.plansWithSubscriptions = [];
+
+
+  this.hide = function () {
+    $mdDialog.cancel();
+  };
+
+  this.save = function () {
+    if (this.selectedApp && this.selectedPlan) {
+      $mdDialog.hide({
+          applicationId: this.selectedApp.id,
+          planId: this.selectedPlan
+      });
+    }
+  };
+
+  this.planAlreadyHaveSubscriptions = function(planId) {
+    return _.indexOf(this.plansWithSubscriptions, planId) > -1;
+  };
+
+  this.selectedItemChange = function () {
+    this.plansWithSubscriptions = [];
+    this.selectedPlan = null;
+    if (this.selectedApp) {
+      _.map(this.plans, (plan) => {
+        ApplicationService.listSubscriptions(this.selectedApp.id, plan.id).then((response) => {
+          var subs = _.filter(response.data, (sub) => {
+            return sub.status === "pending" || sub.status === "accepted";
+          });
+          if (subs.length > 0) {
+            this.plansWithSubscriptions.push(plan.id);
+          }
+        });
+      });
+    }
+  };
+
+  this.searchApplication = function(searchedAppName) {
+    if (searchedAppName) {
+      return ApplicationService.search(searchedAppName).then((response) => {
+        return response.data;
+      });
+    }
+  };
+
+}
+
+export default DialogSubscriptionCreateController;

src/app/api/admin/subscriptions/subscription.create.dialog.html

@@ -0,0 +1,79 @@
+<!--
+
+    Copyright (C) 2015 The Gravitee team (http://gravitee.io)
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+
+-->
+<md-dialog aria-label="Create a subscription" style="width: 30%">
+  <md-toolbar>
+    <div class="md-toolbar-tools">
+      <h2>Create a subscription</h2>
+      <span flex></span>
+      <md-button type="button" class="md-icon-button" ng-click="dialogSubscriptionCreateController.hide()">
+        X
+      </md-button>
+    </div>
+  </md-toolbar>
+
+  <md-dialog-content layout-padding >
+    <div>
+      <h5>Choose an application</h5>
+      <form name="CreateSubscriptionForm" ng-submit="$event.preventDefault()" novalidate>
+        <md-autocomplete
+                md-selected-item="dialogSubscriptionCreateController.selectedApp"
+                md-selected-item-change="dialogSubscriptionCreateController.selectedItemChange()"
+                md-search-text="searchText"
+                md-items="app in dialogSubscriptionCreateController.searchApplication(searchText)"
+                md-item-text="app.name"
+                md-min-length="3"
+                placeholder="Search application ..."
+                md-autofocus="true"
+                required>
+          <md-item-template id="searchedApp">
+            <span md-highlight-text="searchText" md-highlight-flags="i">
+              {{app.name}} ({{app.type}}) by {{app.owner.username}}
+            </span>
+          </md-item-template>
+          <md-not-found>
+            No application matching "{{searchText}}" were found.
+          </md-not-found>
+        </md-autocomplete>
+      </form>
+    </div>
+    <h5>Select a plan</h5>
+    <div layout="column" layout-align="start start" ng-cloak >
+      <md-radio-group ng-model="dialogSubscriptionCreateController.selectedPlan">
+        <md-radio-button ng-repeat="plan in dialogSubscriptionCreateController.plans | orderBy: 'order'"
+                         value="{{plan.id}}"
+                         ng-disabled="dialogSubscriptionCreateController.planAlreadyHaveSubscriptions(plan.id)">
+          {{plan.name}}
+          <md-tooltip md-direction="right"> {{plan.description}} </md-tooltip>
+          <div ng-if="dialogSubscriptionCreateController.planAlreadyHaveSubscriptions(plan.id)"
+                style="color:rgba(0, 0, 0, 0.54);font-size: smaller;">
+            There is already a <i>pending</i> or <i>accepted</i> subscription for this plan.
+          </div>
+        </md-radio-button>
+      </md-radio-group>
+    </div>
+  </md-dialog-content>
+
+  <md-dialog-actions layout="row">
+    <md-button type="button" ng-click="dialogSubscriptionCreateController.hide()" class="md-primary">Cancel</md-button>
+    <md-button type="button" class="md-primary"
+               ng-click="dialogSubscriptionCreateController.save()"
+               ng-disabled="!dialogSubscriptionCreateController.selectedApp || !dialogSubscriptionCreateController.selectedPlan">
+      Create
+    </md-button>
+  </md-dialog-actions>
+</md-dialog>

src/app/api/admin/subscriptions/subscriptions.controller.js

@@ -14,13 +14,14 @@
  * limitations under the License.
  */
 class SubscriptionsController {
-  constructor($window, $mdDialog, $scope, $state, ApiService, NotificationService, resolvedApi, resolvedSubscriptions) {
+  constructor($window, $mdDialog, $scope, $state, ApiService, NotificationService, resolvedApi, resolvedSubscriptions, ApplicationService) {
     'ngInject';
     this.$window = $window;
     this.$mdDialog = $mdDialog;
     this.$state = $state;
     this.ApiService = ApiService;
     this.NotificationService = NotificationService;
+    this.ApplicationService = ApplicationService;
 
     $scope.data = [];
 
@@ -44,9 +45,16 @@ class SubscriptionsController {
 
   applyFilters() {
     var that = this;
-    this.subscriptionsByApplication = _.groupBy(_.filter(this.subscriptions, function (subscription) {
-      return _.includes(that.selectedStatus, subscription.status);
-    }), 'application.name');
+    this.subscriptionsByApplication =
+      _.orderBy(
+        _.groupBy(
+          _.filter(this.subscriptions, (subscription) => {
+            return _.includes(that.selectedStatus, subscription.status);
+          }), 'application.id'
+        ), (subscriptions) => {
+          return subscriptions[0].application.name;
+        }
+      );
   }
 
   hasKeysDefined() {
@@ -168,6 +176,34 @@ class SubscriptionsController {
         });
       });
   }
+
+  showAddSubscriptionModal() {
+    var _this = this;
+    this.ApiService.getPublishedApiPlans(this.api.id).then( (response) => {
+      var plans = response.data;
+
+      _this.$mdDialog.show({
+        controller: 'DialogSubscriptionCreateController',
+        controllerAs: 'dialogSubscriptionCreateController',
+        templateUrl: 'app/api/admin/subscriptions/subscription.create.dialog.html',
+        plans: plans,
+        clickOutsideToClose: false
+      }).then( (data) => {
+        if(data && data.applicationId && data.planId) {
+          _this.ApplicationService.subscribe(data.applicationId, data.planId).then( (response) => {
+            var newSub = response.data;
+            _this.NotificationService.show('A new subscription has been created.');
+            _this.subscriptions.push(newSub);
+            if (newSub.status === "pending") {
+              _this.doProcessSubscription(newSub, {accepted: true});
+            } else {
+              _this.refresh();
+            }
+          });
+        }
+      });
+    });
+  }
 }
 
 export default SubscriptionsController;

src/app/api/admin/subscriptions/subscriptions.html

@@ -27,9 +27,12 @@
   </span>
 
   <div layout-padding ui-tree data-empty-placeholder-enabled="false"
-       ng-repeat="(application, subscriptions) in subscriptionsCtrl.subscriptionsByApplication">
+       ng-repeat="subscriptions in subscriptionsCtrl.subscriptionsByApplication">
     <div ui-tree-nodes ng-model="data">
-      <h5>[<b> {{application}} </b>]</h5>
+      <h4><b>{{subscriptions[0].application.name}} </b>
+        <span style="font-size: small;" ng-if="subscriptions[0].application.type">( {{subscriptions[0].application.type}} )</span>
+        <span style="color:rgba(0, 0, 0, 0.54);font-size: small;">by {{subscriptions[0].application.owner.username}}</span>
+      </h4>
       <table md-table>
         <thead md-head>
         <tr md-row>
@@ -120,5 +123,8 @@ <h5>[<b> {{application}} </b>]</h5>
                       icon="vpn_key"
                       model="Subscription"
                       message="Your API Subscriptions will appear here"
-                      sub-message="Tell users your API is awesome"></gravitee-empty-state>
+                      create-mode="true"></gravitee-empty-state>
 
+<md-button class="md-fab md-fab-bottom-right gravitee-add-button" aria-label="Add" ng-click="subscriptionsCtrl.showAddSubscriptionModal()">
+  <ng-md-icon icon="add"></ng-md-icon>
+</md-button>

src/app/index.module.js

@@ -104,6 +104,7 @@ import SubscriptionService from './services/subscription.service';
 import ApiPlansController from './api/admin/plans/apiPlans.controller';
 import DialogSubscriptionRejectController from './api/admin/subscriptions/subscription.reject.dialog.controller';
 import DialogSubscriptionAcceptController from './api/admin/subscriptions/subscription.accept.dialog.controller';
+import DialogSubscriptionCreateController from './api/admin/subscriptions/subscription.create.dialog.controller';
 import EmptyStateDirective from './components/emptystate/emptystate.directive';
 import DialogClosePlanController from './api/admin/plans/closePlanDialog.controller';
 import DialogPublishPlanController from './api/admin/plans/publishPlanDialog.controller';
@@ -192,6 +193,7 @@ angular.module('gravitee', ['ui.router', 'ngMaterial', 'ramlConsoleApp', 'ng-sho
   .controller('ApiPlansController', ApiPlansController)
   .controller('DialogSubscriptionRejectController', DialogSubscriptionRejectController)
   .controller('DialogSubscriptionAcceptController', DialogSubscriptionAcceptController)
+  .controller('DialogSubscriptionCreateController', DialogSubscriptionCreateController)
   .controller('DialogClosePlanController', DialogClosePlanController)
   .controller('DialogPublishPlanController', DialogPublishPlanController)
   .service('ApplicationService', ApplicationService)

src/app/services/api.service.js

@@ -175,6 +175,10 @@ class ApiService {
     return this.$http.get(this.apisURL + apiId + '/plans?status=staging,published,closed');
   }
 
+  getPublishedApiPlans(apiId) {
+    return this.$http.get(this.apisURL + apiId + '/plans?status=published');
+  }
+
   savePlan(apiId, plan) {
     if (plan.id) {
       return this.$http.put(this.apisURL + apiId + '/plans/' + plan.id,

src/app/services/applications.service.js

@@ -69,14 +69,22 @@ class ApplicationService {
     return this.$http.delete(this.applicationsURL + application.id);
   }
 
+  search(query) {
+    return this.$http.get(this.applicationsURL + "?query=" + query);
+  }
+
   // Plans
 
   subscribe(applicationId, planId) {
     return this.$http.post(this.subscriptionsURL(applicationId) + '?plan=' + planId);
   }
 
-  listSubscriptions(applicationId) {
-    return this.$http.get(this.subscriptionsURL(applicationId));
+  listSubscriptions(applicationId, planId) {
+    var url = this.subscriptionsURL(applicationId);
+    if (planId) {
+      url = url + '?plan=' + planId;
+    }
+    return this.$http.get(url);
   }
 
   getSubscription(applicationId, subscriptionId) {