feat(pages): set a page as an api homepage

fix gravitee-io/issues#467

src/api/admin/documentation/_apiDocumentation.scss

@@ -17,4 +17,16 @@ a.md-button:not([disabled]).selected, .md-button:not([disabled]).selected {
   display: inline-block;
   padding-left: 4px;
   font-weight: 300;
+}
+
+.icon-button-nothomepage {
+  fill: #676a6c;
+}
+
+.icon-button-homepage {
+  fill: rgb(68,138,255);
+}
+
+sup.icon-button-homepage, sup.icon-button-nothomepage {
+  top: -1em;
 }

src/api/admin/documentation/apiDocumentation.html

@@ -23,7 +23,11 @@
                      ng-class="{'selected' : page.id === documentationCtrl.$state.params.pageId }">
             <div class="inset">
               <md-icon md-svg-src="assets/logo_{{page.type | lowercase}}.svg"></md-icon>
-              <span ng-style="page.published?'':{'font-style': 'italic', 'color': 'grey'}">{{page.name}}</span>
+              <span ng-style="page.published?'':{'font-style': 'italic', 'color': 'grey'}">{{page.name}}
+                <sup ng-if="page.homepage" class="icon-button-homepage">
+                  <ng-md-icon icon="home" size="12"></ng-md-icon>
+                </sup>
+              </span>
             </div>
           </md-button>
         </md-item-content>

src/api/admin/documentation/page/apiPage.controller.ts

@@ -134,8 +134,8 @@ class PageController {
     }
   }
 
-  delete() {
-	  let that = this;
+  remove() {
+    let that = this;
     this.$mdDialog.show({
       controller: 'DialogConfirmController',
       controllerAs: 'ctrl',
@@ -176,6 +176,11 @@ class PageController {
     }
   }
 
+  toggleHomepage(){
+      this.page.homepage = !this.page.homepage;
+      this.upsert();
+  }
+
   showSettings() {
     this.$mdSidenav('page-settings').toggle();
   }
@@ -186,9 +191,9 @@ class PageController {
   }
 
   changePublication() {
-    var editPage = _.clone(this.initialPage);
+    let editPage = _.clone(this.initialPage);
     editPage.published = this.page.published;
-    var that = this;
+    let that = this;
     this.DocumentationService.editPage(this.$scope.$parent.apiCtrl.api.id, this.page.id, editPage).then(function () {
       that.$scope.$parent.documentationCtrl.list();
       that.NotificationService.show('Page ' + editPage.name + ' has been ' + (editPage.published ? '':'un') + 'published with success');

src/api/admin/documentation/page/apiPage.html

@@ -29,22 +29,31 @@ <h3 ng-if="!pageCtrl.editMode" style="color: #676a6c; clear:both;">{{pageCtrl.pa
         </div>
       </div>
 
-      <div layout="column" layout-align="end center" flex="20">
+      <div layout="column" layout-align="end center" flex="20" ng-if="pageCtrl.page.id">
+        <div layout="row" layout-align="center center">
+          <md-tooltip md-direction="top ">
+            Last modification @ {{pageCtrl.page.lastModificationDate | date:'medium'}} by {{pageCtrl.page.lastContributor}}
+          </md-tooltip>
+          <ng-md-icon icon="timer"></ng-md-icon>
+          <span style="top: 5px;position: relative;">{{pageCtrl.page.lastModificationDate | date}}</span>
+        </div>
         <md-switch ng-model="pageCtrl.page.published" ng-change="pageCtrl.changePublication()" style="margin: 4px 0;">
           <md-tooltip md-direction="top">Publish modifications</md-tooltip>
           <span ng-show="pageCtrl.page.published">Published</span>
           <span ng-show="!pageCtrl.page.published">Not Published</span>
         </md-switch>
-        <div layout="row" layout-align="center center">
-        <md-tooltip md-direction="top ">
-          Last modification @ {{pageCtrl.page.lastModificationDate | date:'medium'}} by {{pageCtrl.page.lastContributor}}
-        </md-tooltip>
-        <ng-md-icon icon="timer"></ng-md-icon>
-        <span style="top: 5px;position: relative;">{{pageCtrl.page.lastModificationDate | date}}</span>
-      </div></div>
+      </div>
 
-      <div class="documentation-tool-bar" layout="row" layout-align="end center" flex="40">
+      <div class="documentation-tool-bar" layout="row" layout-align="end center" flex="{{ pageCtrl.page.id ? 40 : 60 }}">
 
+        <md-button ng-click="pageCtrl.toggleHomepage()"
+                   class="md-icon-button" ng-class="{'icon-button-homepage': pageCtrl.page.homepage, 'icon-button-nothomepage': !pageCtrl.page.homepage}"
+                   aria-label="Homepage"
+                   ng-if="pageCtrl.page.id">
+          <md-tooltip md-direction="top" ng-if="pageCtrl.page.homepage">This page is your homepage. Click to convert to a documentation page</md-tooltip>
+          <md-tooltip md-direction="top" ng-if="!pageCtrl.page.homepage">This page is a documentation page. Click to convert to the api homepage</md-tooltip>
+          <ng-md-icon icon="home"></ng-md-icon>
+        </md-button>
         <md-button ng-click="pageCtrl.edit()" class="md-icon-button" aria-label="Edit">
           <md-tooltip md-direction="top">Edit this page</md-tooltip>
           <ng-md-icon icon="edit"></ng-md-icon>
@@ -53,7 +62,7 @@ <h3 ng-if="!pageCtrl.editMode" style="color: #676a6c; clear:both;">{{pageCtrl.pa
           <md-tooltip md-direction="top">Configure this page</md-tooltip>
           <ng-md-icon icon="settings"></ng-md-icon>
         </md-button>
-        <md-button ng-click="pageCtrl.delete()" class="md-icon-button" aria-label="Delete">
+        <md-button ng-click="pageCtrl.remove()" class="md-icon-button" aria-label="Delete">
           <md-tooltip md-direction="top">Delete this page</md-tooltip>
           <ng-md-icon icon="delete"></ng-md-icon>
         </md-button>

src/services/apiDocumentation.service.ts

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 import * as _ from 'lodash';
+import DialogEditPolicyController from "../api/admin/policies/dialog/policyDialog.controller";
 
 class DocumentationService {
   private swaggerConfigurationCache: any;
@@ -56,6 +57,7 @@ class DocumentationService {
         published: editPage.published,
         content: editPage.content || '',
         source: editPage.source,
+        homepage: editPage.homepage,
         configuration: editPage.configuration
       }
     );