feat(left-sidebar): Configure left-side menu view in config file (closes #814) (#919)

* feat(left-sidebar): Configure left-side menu view in config file

* refactor(template-model): after review

Author: HeyRoach

config-guide.md

@@ -221,5 +221,21 @@ Account tags are available only for the last API version. If you are using anoth
 "accountTagsEnabled": false
 ```
 
+### Sidebar Order
+This configuration allows a user to set a list of left-sidebar sections. Configure possible if  property “allowReorderingSidebar” is true.
+For example, 
+```
+"sidebarOrder": [
+  "vms",
+  "volumes",
+  "templates",
+  "sgs",
+  "events",
+  "ssh",
+  "accounts",
+ "settings"
+]
+```
+
 ### Extensions
 Please check [Wiki](https://github.com/bwsw/cloudstack-ui/wiki/Plugins) for extension configuration options.

src/app/navigation/app-sidebar.component.html

@@ -67,9 +67,7 @@
           (change)="handleRouteChecked($event)"
           [@handleSlide]="!editing ? 'in' : ''"
         ></mat-checkbox>
-        <div [@linkSlide]="'out'">
-          <div class="link-element" [innerHTML]="route.text | translate"></div>
-        </div>
+        <div class="link-element-edit" [innerHTML]="route.text | translate"></div>
       </div>
     </ng-container>
   </div>

src/app/navigation/app-sidebar.component.scss

@@ -40,6 +40,9 @@
   display: inline-block;
   border-color: inherit;
   vertical-align: middle;
+  &-edit {
+    transform: translateX(60px);
+  }
 }
 
 a {

src/app/navigation/app-sidebar.component.ts

@@ -62,6 +62,7 @@ export class AppSidebarComponent extends WithUnsubscribe()
   }
 
   public ngOnInit() {
+    this.setUpRoutes();
     this.setUpDragula();
     this.initNavigationOrder();
   }
@@ -164,4 +165,13 @@ export class AppSidebarComponent extends WithUnsubscribe()
   private toggleState(): void {
     this._editing = !this._editing;
   }
+
+  public setUpRoutes() {
+    if (this.canEdit) {
+      const defaultOrder = this.configService.get<Array<string>>('sidebarOrder');
+      if (defaultOrder) {
+        this.routes = this.routes.filter(route => defaultOrder.some(_ => _.toUpperCase() === route.id));
+      }
+    }
+  }
 }