feat(docs): setting version from INavbarProperty to custom property

packages/docs/src/app/components/navbar/navbar.component.ts

@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 
 import { INavbarProperty, NavbarProperty } from './navbar-property';
+import { mosaicVersion } from '../../shared/version/version';
 
 
 @Component({
@@ -9,6 +10,8 @@ import { INavbarProperty, NavbarProperty } from './navbar-property';
     styleUrls: ['./navbar.scss']
 })
 export class NavbarComponent {
+    mosaicVersion = mosaicVersion;
+
     /*To add navbar property create new private property of type INavbarProperty
     and instantiate new NavbarProperty(property: INavbarProperty)*/
     versionSwitch: NavbarProperty;
@@ -74,25 +77,51 @@ export class NavbarComponent {
         updateSelected: true
     };
 
-    private versionProperty: INavbarProperty = {
-        property: 'PT_version',
-        data: [
+    // To add new version to dropdown add new object to the end of data array,
+    // number of current version is taken from package.json, rest should be specified
+    // run npm show @ptsecurity/mosaic versions --json to see all mosaic versions
+    private versionData = [
             {
-                number: '8.0',
+                number: '8.1.0',
                 date: '9 октября',
-                selected: true
+                selected: false,
+                link: '//mosaic.ptsecurity.com'
+            },
+            {
+                number: '8.-.-',
+                date: '9 октября',
+                selected: false,
+                link: '//v8.mosaic.ptsecurity.com'
             }
-        ],
-        updateTemplate: false,
-        updateSelected: true
-    };
+        ];
 
     constructor() {
-        this.versionSwitch = new NavbarProperty(this.versionProperty);
+        this.setSelectedVersion();
+
         this.colorSwitch = new NavbarProperty(this.activeColorProperty);
         this.themeSwitch = new NavbarProperty(this.themeProperty);
         this.languageSwitch = new NavbarProperty(this.languageProperty);
     }
 
+    goToVersion(i: number) {
+        const link = this.versionData[i].link;
+        if (!location.origin.match(link)) {
+            location.href = `${link}${location.pathname}${location.search}${location.hash}`;
+        }
+        this.versionSwitch.setValue(i)
+    }
 
+    setSelectedVersion() {
+        /* Если мы находимся на последней версии - обновляем ее из package.json
+        Если нет - последние версии предыдущих мажоров должны быть указаны в массиве*/
+        if (location.origin.match(this.versionData[0].link)) {
+            this.versionData[0].number =  this.mosaicVersion;
+            this.versionData[0].selected = true;
+        } else {
+            // Определяем выбранную версию
+            this.versionData.forEach((version) => {
+                if(version.number == this.mosaicVersion) version.selected = true;
+            })
+        }
+    }
 }

packages/docs/src/app/components/navbar/navbar.template.html

@@ -6,13 +6,13 @@
 
     <div class="docs-navbar-version">
         <button mc-button class="mc-button mc-button_transparent" [mcDropdownTriggerFor]="versionDropdown">
-            Версия {{versionSwitch.currentValue.number}}
+            Версия {{mosaicVersion}}
             <i mc-icon="mc-angle-down-L_16" class="docs-navbar-version__icon"></i>
         </button>
 
         <mc-dropdown #versionDropdown="mcDropdown" class="docs-navbar-version__dropdown">
-            <button mc-dropdown-item *ngFor="let version of versionSwitch.data; let i = index"
-                    [class.mc-selected]="version.selected" (click)="versionSwitch.setValue(i)"
+            <button mc-dropdown-item *ngFor="let version of versionData; let i = index"
+                    (click)="goToVersion(i)" [class.mc-selected]="version.selected"
                     [class.docs-navbar-version_bold]="version.number.length < 4">
                 <span class="docs-navbar-version__item">
                     <span class="docs-navbar-version__num">{{version.number}}</span>