feat: Implementation of rating of APIs

build.json

@@ -1,3 +1,3 @@
 {
-    "version": "1.10.4"
+    "version": "1.11.0-SNAPSHOT"
 }

constants.json

@@ -18,5 +18,8 @@
   },
   "support": {
     "enabled": false
+  },
+  "rating": {
+    "enabled": true
   }
 }

constants.tpl.json

@@ -43,5 +43,9 @@
   // Enable the creation of support tickets
   "support": {
     "enabled": false
+  },
+  // Enable rating on APIs
+  "rating": {
+    "enabled": false
   }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "gravitee-management-webui",
-  "version": "1.10.4",
+  "version": "1.11.0-SNAPSHOT",
   "description": "Gravitee.io APIM - Portal",
   "dependencies": {
     "angular": "^1.5.0",

src/components/emptystate/emptystate.directive.ts

@@ -24,7 +24,8 @@ class EmptyStateDirective {
         model: '@model',
         message: '@message',
         subMessage: '@subMessage',
-        createMode: '='
+        createMode: '=',
+        fill: '@fill'
       },
       template: require('./emptystate.html')
     };

src/components/emptystate/emptystate.html

@@ -16,7 +16,7 @@
 
 -->
 <div layout="column" flex layout-align="center center" style="color: #424E5A;">
-  <ng-md-icon icon="{{icon}}" style="fill: #cdcccc;" size="120"></ng-md-icon>
+  <ng-md-icon icon="{{icon}}" ng-style="{'fill':fill?fill:'#cdcccc'}" size="120"></ng-md-icon>
   <h2>{{message}}</h2>
   <div>
     <h5>{{subMessage}}</h5>

src/index.scss

@@ -366,12 +366,12 @@ md-list-item::before {
   }
 }
 
-
 .api-box {
   width: 98%;
   min-width: 320px;
   max-width: 480px;
   margin: 14px;
+  outline: none;
 }
 
 .apis-box {
@@ -472,9 +472,24 @@ md-card.no-box-shadow {
 }
 
 .gv-button-toggled {
-  background-color: rgba(158,158,158,0.2);
+  background-color: rgba(158, 158, 158, 0.2);
 }
 
 .md-select-menu-container {
   z-index: 99999 !important;
-}
+}
+
+.disabled {
+  pointer-events: none;
+  opacity: 0.7;
+}
+
+.readonly > [role=button] {
+  cursor: inherit;
+}
+
+.md-dialog-container {
+  height: 100vh !important;
+  top: 0 !important;
+  position: fixed !important;
+}

src/management/management.module.ts

@@ -548,7 +548,7 @@ angular.module('gravitee-management', [uiRouter, permission, uiPermission, 'ngMa
       if (!moment().subtract(1, 'weeks').isAfter(input)) {
         return moment(input).fromNow();
       } else {
-        return moment(input).format('D MMM. YYYY');
+        return moment(input).format('ll');
       }
     };
   })
@@ -557,7 +557,7 @@ angular.module('gravitee-management', [uiRouter, permission, uiPermission, 'ngMa
       if (!moment().subtract(1, 'weeks').isAfter(input)) {
         return moment(input).fromNow();
       } else {
-        return moment(input).format('D MMM. YYYY HH:mm:ss');
+        return moment(input).format('D MMM YYYY HH:mm:ss');
       }
     };
   })

src/portal/api/_api.scss

@@ -1,4 +1,5 @@
 @import 'plan/api-plan';
+@import 'rating/api.rating';
 
 #header {
   color: #000;
@@ -26,6 +27,10 @@
     }
   }
 
+  .api-rating {
+    margin-left: 25px;
+  }
+
   .md-button {
     width: 180px;
   }
@@ -153,6 +158,7 @@ md-card-content {
 .api-views {
   border-top: 1px solid rgba(0, 0, 0, 0.05);
   padding-top: 10px;
+  height: 34px;
 }
 
 .ui.label {

src/portal/api/apis.controller.ts

@@ -21,15 +21,18 @@ export class PortalApisController {
   private apis: any[];
   private views: any[];
   private view: any;
+  private ratingEnabled: boolean;
 
   constructor (private resolvedApis,
                private resolvedViews,
                private $scope: IScope,
                private $state,
-               private $stateParams) {
+               private $stateParams,
+               private Constants) {
     'ngInject';
     this.apis = resolvedApis.data;
     this.views = resolvedViews;
+    this.ratingEnabled = Constants.rating.enabled;
 
     this.view = _.find(this.views, function (view) {
       return $stateParams.view === view.id;
@@ -41,11 +44,16 @@ export class PortalApisController {
   }
 
   goToApi(api) {
-    this.$state.go('portal.api.plans', {apiId: api.id});
+    this.$state.go('portal.api.detail', {apiId: api.id});
   }
 
   changeView(event, view) {
     event.stopPropagation();
     this.$state.go('portal.apis.list', {view: view});
   }
+
+  goToRating(event, api) {
+    event.stopPropagation();
+    this.$state.go('portal.api.rating', {apiId: api.id});
+  }
 }

src/portal/api/apisList.html

@@ -59,9 +59,15 @@ <h5 class="gravitee-view-description" ng-if="apisCtrl.view && apisCtrl.view.desc
               <div class="api-infos">
                 <small>{{::api.description}}</small>
               </div>
-              <div class="api-views">
-                <a ng-if="api.views" ng-repeat="view in api.views" class="ui label" ng-click="apisCtrl.changeView($event, view)">{{view}}</a>
-                <div ng-if="!api.views || api.views.length === 0" class="no-view"></div>
+              <div class="api-views" layout="row">
+                <div flex="65">
+                  <a ng-if="api.views" ng-repeat="view in api.views" class="ui label" ng-click="apisCtrl.changeView($event, view)">{{view}}</a>
+                  <div ng-if="!api.views || api.views.length === 0" class="no-view"></div>
+                </div>
+
+                <gv-star-rating flex ng-if="apisCtrl.ratingEnabled && api.rate"  value="api.rate"
+                                message="'api.rating.rate' | translate:{numberOfRatings: api.numberOfRatings}" display-none-message="true"
+                                ng-click="apisCtrl.goToRating($event, api)"></gv-star-rating>
               </div>
             </md-card-content>
           </md-card>

src/portal/api/header/api-header.component.ts

@@ -13,17 +13,27 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import ApiService from "../../../services/api.service";
+
 const ApiHeaderComponent: ng.IComponentOptions = {
   bindings: {
-    api: '<'
+    api: '<',
+    apiRatingSummary: '<'
   },
   template: require('./api-header.html'),
-  controller: function(Constants) {
+  controller: function(Constants, ApiService: ApiService, $stateParams, $rootScope) {
     'ngInject';
+    this.ratingEnabled = Constants.rating.enabled;
 
     this.getEndpoint = function () {
       return Constants.portal.entrypoint + this.api.context_path;
-    }
+    };
+
+    $rootScope.$on('onRatingSave', () => {
+      ApiService.getApiRatingSummaryByApi($stateParams.apiId).then((response) => {
+        this.apiRatingSummary = response.data;
+      });
+    });
   }
 };
 

src/portal/api/header/api-header.html

@@ -20,7 +20,19 @@
   <div layout="column" flex="65">
     <div layout="row" layout-align="start center">
       <img width="60" height="60" ng-src="{{$ctrl.api.picture_url}}" alt="api-logo" />
-      <span class="api-title" ui-sref="portal.api.plans({apiId: $ctrl.api.id})">{{::$ctrl.api.name}}</span>
+      <div layout="column">
+        <span class="api-title" ui-sref="portal.api.detail({apiId: $ctrl.api.id})">{{::$ctrl.api.name}}</span>
+
+        <a permission permission-only="'api-rating-r'" ui-sref="portal.api.rating({apiId: $ctrl.api.id})">
+          <gv-star-rating ng-if="$ctrl.ratingEnabled" class="api-rating" summary="$ctrl.apiRatingSummary"
+                          message="'api.rating.rate' | translate:{numberOfRatings: $ctrl.apiRatingSummary.numberOfRatings}"
+                          display-none-message="true"></gv-star-rating>
+        </a>
+        <gv-star-rating permission permission-except="'api-rating-r'"
+                        ng-if="$ctrl.ratingEnabled" class="api-rating" summary="$ctrl.apiRatingSummary"
+                        message="'api.rating.rate' | translate:{numberOfRatings: $ctrl.apiRatingSummary.numberOfRatings}"
+                        display-none-message="true"></gv-star-rating>
+      </div>
     </div>
 
     <div layout="row" style="margin-top: 18px;">
@@ -38,7 +50,7 @@
       <div layout="column" layout-align="center center" flex="20">
         <md-button class="md-raised" ui-sref="portal.api.pages({apiId: $ctrl.api.id})">{{'api.documentation.title' | translate}}</md-button>
         <md-button class="md-raised md-primary" style="background-color: #006CAB"
-                   ui-sref="portal.api.plans({apiId: $ctrl.api.id, '#': 'plans'})">{{'api.plan.subscribe' | translate}}</md-button>
+                   ui-sref="portal.api.detail({apiId: $ctrl.api.id, '#': 'plans'})">{{'api.plan.subscribe' | translate}}</md-button>
       </div>
 
       <div flex></div>

src/portal/api/rating/_api.rating.scss

@@ -0,0 +1,22 @@
+#ratings {
+  width: 70%;
+  margin: 30px auto;
+
+  & md-card p {
+    text-align: center;
+  }
+}
+
+.rating-comment {
+  margin: 20px;
+  white-space: pre-line;
+}
+
+.rating-answers {
+  margin: 10px 50px;
+}
+
+.rating-delete {
+  fill: #cdcccc;
+  float: right;
+}

src/portal/api/rating/api-ratings.component.ts

@@ -0,0 +1,29 @@
+/*
+ * 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.
+ */
+import ApiPortalRatingController from "./apiRating.controller";
+
+const ApiRatingsComponent: ng.IComponentOptions = {
+  bindings: {
+    api: '<',
+    rating: '<',
+    ratings: '<',
+    isAuthenticated: '<'
+  },
+  template: require('./api-ratings.html'),
+  controller: ApiPortalRatingController
+};
+
+export default ApiRatingsComponent;