feat(subscription): add a reason on accept and on request

fix gravitee-io/issues#1098
gravitee-io · Mar 28, 2018 · 5668e2e · 5668e2e
1 parent bf16dff
commit 5668e2e
Show file tree

Hide file tree

Showing 7 changed files with 58 additions and 30 deletions.
diff --git a/src/management/api/portal/subscriptions/subscription.accept.dialog.controller.ts b/src/management/api/portal/subscriptions/subscription.accept.dialog.controller.ts
@@ -25,7 +25,11 @@ function DialogSubscriptionAcceptController($scope, $mdDialog) {
   };
 
   this.save = function () {
-    $mdDialog.hide({starting_at: $scope.starting_at, ending_at: $scope.ending_at});
+    $mdDialog.hide({
+      starting_at: $scope.starting_at,
+      ending_at: $scope.ending_at,
+      reason: $scope.reason
+    });
   };
 }
 

diff --git a/src/management/api/portal/subscriptions/subscription.accept.dialog.html b/src/management/api/portal/subscriptions/subscription.accept.dialog.html
@@ -18,14 +18,22 @@
 <md-dialog aria-label="Define dates for the subscription">
   <md-dialog-content layout-padding>
     <h4>Accept subscription</h4>
-    <div ng-cloak class="md-inline-form">
+    <div ng-cloak layout="column">
+      <div class="md-inline-form">
+        <md-input-container>
+          <label>Start date</label>
+          <md-datepicker ng-model="starting_at" md-min-date="now"></md-datepicker>
+        </md-input-container>
+        <md-input-container>
+          <label>End date</label>
+          <md-datepicker ng-model="ending_at" md-min-date="starting_at"></md-datepicker>
+        </md-input-container>
+      </div>
       <md-input-container>
-        <label>Start date</label>
-        <md-datepicker ng-model="starting_at" md-min-date="now"></md-datepicker>
-      </md-input-container>
-      <md-input-container>
-        <label>End date</label>
-        <md-datepicker ng-model="ending_at" md-min-date="starting_at"></md-datepicker>
+        <div layout="column" ng-cloak class="md-inline-form">
+          <h5>If needed, add a reason:</h5>
+          <textarea ng-model="reason"></textarea>
+        </div>
       </md-input-container>
     </div>
   </md-dialog-content>

diff --git a/src/management/api/portal/subscriptions/subscription.html b/src/management/api/portal/subscriptions/subscription.html
@@ -31,14 +31,12 @@
         <tr md-row style="height: 30px;">
           <td md-cell><span style="font-weight: bold">Plan</span></td>
           <td md-cell><span style="font-weight: bold">{{$ctrl.subscription.plan.name}}</span> ({{$ctrl.subscription.plan.security}})</td>
-
           <td md-cell><span style="font-weight: bold">Processed at</span></td>
           <td md-cell>{{$ctrl.subscription.processed_at || '-' | date:'MMM d, y h:mm:ss.sss a'}}</td>
         </tr>
         <tr md-row style="height: 30px;" ng-if="'rejected' !== $ctrl.subscription.status">
           <td md-cell><span style="font-weight: bold">Application</span></td>
           <td md-cell><span style="font-weight: bold">{{$ctrl.subscription.application.name}}</span> ({{$ctrl.subscription.application.owner.username}})</td>
-
           <td md-cell><span style="font-weight: bold">Starting at</span></td>
           <td md-cell>{{$ctrl.subscription.starting_at || '-' | date:'MMM d, y h:mm:ss.sss a'}}</td>
         </tr>
@@ -54,14 +52,21 @@
         </tr>
         <tr md-row style="height: 30px;" ng-if="'rejected' === $ctrl.subscription.status">
           <td md-cell><span style="font-weight: bold">Status</span></td>
-          <td md-cell>{{$ctrl.subscription.status|uppercase}} (Reason: {{$ctrl.subscription.reason || '-'}})</td>
+          <td md-cell>{{$ctrl.subscription.status|uppercase}}</td>
           <td md-cell><span style="font-weight: bold">Closed at</span></td>
           <td md-cell>{{$ctrl.subscription.closed_at | date:'MMM d, y h:mm:ss.sss a'}}</td>
         </tr>
+        <tr md-row style="height: 30px;" ng-if="$ctrl.subscription.request">
+          <td md-cell><span style="font-weight: bold">Message from subscriber</span></td>
+          <td md-cell colspan="3">{{$ctrl.subscription.request}}</td>
+        </tr>
+        <tr md-row style="height: 30px;" ng-if="$ctrl.subscription.reason">
+          <td md-cell><span style="font-weight: bold">Message to subscriber</span></td>
+          <td md-cell colspan="3">{{$ctrl.subscription.reason}}</td>
+        </tr>
         <tr md-row style="height: 30px;" ng-if="'rejected' !== $ctrl.subscription.status && $ctrl.subscription.closed_at">
-          <td md-cell colspan="2"></td>
           <td md-cell><span style="font-weight: bold">Closed at</span></td>
-          <td md-cell>{{$ctrl.subscription.closed_at | date:'MMM d, y h:mm:ss.sss a'}}</td>
+          <td md-cell colspan="3">{{$ctrl.subscription.closed_at | date:'MMM d, y h:mm:ss.sss a'}}</td>
         </tr>
         </tbody>
       </table>

diff --git a/src/management/application/details/subscriptions/application-subscription.html b/src/management/application/details/subscriptions/application-subscription.html
@@ -32,35 +32,38 @@
         <tr md-row style="height: 30px;">
           <td md-cell><span style="font-weight: bold">API</span></td>
           <td md-cell><span style="font-weight: bold">{{$ctrl.subscription.api.name}}</span></td>
-
           <td md-cell><span style="font-weight: bold">Processed at</span></td>
           <td md-cell>{{$ctrl.subscription.processed_at || '-' | date:'MMM d, y h:mm:ss.sss a'}}</td>
         </tr>
         <tr md-row style="height: 30px;" ng-if="'rejected' !== $ctrl.subscription.status">
           <td md-cell><span style="font-weight: bold">Plan</span></td>
           <td md-cell><span style="font-weight: bold">{{$ctrl.subscription.plan.name}}</span> ({{$ctrl.subscription.plan.security}})</td>
-
           <td md-cell><span style="font-weight: bold">Starting at</span></td>
           <td md-cell>{{$ctrl.subscription.starting_at || '-' | date:'MMM d, y h:mm:ss.sss a'}}</td>
         </tr>
         <tr md-row style="height: 30px;"  ng-if="'rejected' !== $ctrl.subscription.status">
           <td md-cell><span style="font-weight: bold">Status</span></td>
           <td md-cell>{{$ctrl.subscription.status|uppercase}}</td>
-
           <td md-cell><span style="font-weight: bold">Ending at</span></td>
           <td md-cell>{{$ctrl.subscription.ending_at || '-' | date:'MMM d, y h:mm:ss.sss a'}}</td>
         </tr>
         <tr md-row style="height: 30px;" ng-if="'rejected' === $ctrl.subscription.status">
           <td md-cell><span style="font-weight: bold">Status</span></td>
-          <td md-cell>{{$ctrl.subscription.status|uppercase}} (Reason: {{$ctrl.subscription.reason || '-'}})</td>
-
+          <td md-cell>{{$ctrl.subscription.status|uppercase}}</td>
           <td md-cell><span style="font-weight: bold">Closed at</span></td>
           <td md-cell>{{$ctrl.subscription.closed_at | date:'MMM d, y h:mm:ss.sss a'}}</td>
         </tr>
+        <tr md-row style="height: 30px;" ng-if="$ctrl.subscription.request">
+          <td md-cell><span style="font-weight: bold">Message from subscriber</span></td>
+          <td md-cell colspan="3">{{$ctrl.subscription.request}}</td>
+        </tr>
+        <tr md-row style="height: 30px;" ng-if="$ctrl.subscription.reason">
+          <td md-cell><span style="font-weight: bold">Message to subscriber</span></td>
+          <td md-cell colspan="3">{{$ctrl.subscription.reason}}</td>
+        </tr>
         <tr md-row style="height: 30px;" ng-if="'rejected' !== $ctrl.subscription.status && $ctrl.subscription.closed_at">
-          <td md-cell colspan="2"></td>
           <td md-cell><span style="font-weight: bold">Closed at</span></td>
-          <td md-cell>{{$ctrl.subscription.closed_at | date:'MMM d, y h:mm:ss.sss a'}}</td>
+          <td md-cell colspan="3">{{$ctrl.subscription.closed_at | date:'MMM d, y h:mm:ss.sss a'}}</td>
         </tr>
         </tbody>
       </table>

diff --git a/src/portal/api/subscribe/api-subscribe.component.ts b/src/portal/api/subscribe/api-subscribe.component.ts
@@ -37,14 +37,15 @@ const ApiSubscribeComponent: ng.IComponentOptions = {
     private planInformation: any;
     private apiKey: any;
     private subscription: any;
+    private requestMessage: string;
 
     constructor(
       private $stateParams: ng.ui.IStateParamsService,
       private NotificationService: NotificationService,
       private ApplicationService: ApplicationService,
       private ApiService: ApiService,
       private Constants,
-      private $translate) {
+      private $scope: ng.IScope) {
       'ngInject';
     }
 
@@ -78,7 +79,7 @@ const ApiSubscribeComponent: ng.IComponentOptions = {
     }
 
     subscribe(application: any) {
-      this.ApplicationService.subscribe(application.id, this.selectedPlan.id).then( (subscription) => {
+      this.ApplicationService.subscribe(application.id, this.selectedPlan.id, this.requestMessage).then( (subscription) => {
         this.subscription = subscription.data;
         this.NotificationService.show('api.subscription.step3.successful', null, {planName: this.selectedPlan.name});
         this.fetchApiKey(this.subscription.id);

diff --git a/src/portal/api/subscribe/api-subscribe.html b/src/portal/api/subscribe/api-subscribe.html
@@ -39,8 +39,7 @@ <h5 translate="api.subscription.step1.subtitle"></h5>
             md-min-length="0"
             placeholder="Search plans ..."
             md-autofocus="true"
-            md-menu-class="autocomplete-custom-template"
-            style="width: 450px;">
+            md-menu-class="autocomplete-custom-template" >
             <md-item-template>
               <md-list-item class="md-2-line contact-item">
                 <div class="md-list-item-text compact">
@@ -69,7 +68,7 @@ <h5 ng-if="$ctrl.selectedPlan && !$ctrl.isPlanSubscribable()" translate="api.sub
         <h1 translate="api.subscription.step2.title"></h1>
         <h5 translate="api.subscription.step2.subtitle"></h5>
 
-        <div layout="row">
+        <div layout="column">
           <md-autocomplete
             md-selected-item="$ctrl.selectedApp"
             md-search-text="filterApp"
@@ -81,8 +80,7 @@ <h5 translate="api.subscription.step2.subtitle"></h5>
             placeholder="{{'api.subscription.step2.application.placeholder' | translate}}"
             md-autofocus="true"
             ng-if="$ctrl.isPlanSubscribable()"
-            md-menu-class="autocomplete-custom-template"
-            style="width: 450px;">
+            md-menu-class="autocomplete-custom-template" >
             <md-item-template>
               <md-list-item class="md-2-line contact-item">
                 <div class="md-list-item-text compact">
@@ -92,7 +90,10 @@ <h3>{{application.name}} <small ng-if="application.type">{{application.type}}</s
             </md-item-template>
             <md-not-found translate="application.notFound" translate-values="{applicationName: filterApp}"></md-not-found>
           </md-autocomplete>
-
+          <md-input-container class="md-block">
+            <label>Optional message to the API Owner</label>
+            <textarea ng-model="$ctrl.requestMessage" md-maxlength="150" rows="2"></textarea>
+          </md-input-container>
           <md-button class="md-raised" ng-click="$ctrl.subscribe($ctrl.selectedApp)"
                      aria-label="subscribe-api-plan"
                      ng-disabled="!$ctrl.canApplicationSubscribe()"

diff --git a/src/services/applications.service.ts b/src/services/applications.service.ts
@@ -105,8 +105,14 @@ class ApplicationService {
   /*
    * Subscriptions
    */
-  subscribe(applicationId, planId): ng.IHttpPromise<any> {
-    return this.$http.post(this.subscriptionsURL(applicationId) + '?plan=' + planId, '');
+  subscribe(applicationId: string, planId: string, request?: string): ng.IHttpPromise<any> {
+    let data;
+    if (request) {
+      data = {request: request}
+    } else {
+      data = '';
+    }
+    return this.$http.post(this.subscriptionsURL(applicationId) + '?plan=' + planId, data);
   }
 
   listSubscriptions(applicationId: string, query?: string): ng.IHttpPromise<PagedResult> {