[editor] Rework always-visible page

It is now always made the first when page and it is taken out of the the 
index counter. So other pages start with 1, when a page is set as always 
visible.

projects/editor/src/app/components/unit-view/unit-view.component.html

@@ -17,8 +17,15 @@
                      (selectedIndexChange)="selectPage($event)">
         <mat-tab *ngFor="let page of unit.pages; let i = index">
           <ng-template mat-tab-label>
-            <mat-icon *ngIf="page.alwaysVisible" class="page-alwaysVisible-icon">assignment</mat-icon>
-            {{'pageIndication' | translate: {index: i + 1} }}
+            <ng-container *ngIf="page.alwaysVisible">
+            <mat-icon class="page-alwaysVisible-icon">assignment</mat-icon>
+            </ng-container>
+            <ng-container *ngIf="!page.alwaysVisible && unit.pages[0].alwaysVisible === false">
+              Seite {{i + 1}}
+            </ng-container>
+            <ng-container *ngIf="!page.alwaysVisible && unit.pages[0].alwaysVisible === true">
+              Seite {{i}}
+            </ng-container>
             <button class="delete-page-button" mat-button (click)="deletePage()">
               <mat-icon>delete</mat-icon>
             </button>

projects/editor/src/app/components/unit-view/unit-view.component.ts

@@ -14,7 +14,6 @@ import { Unit } from '../../../../../common/unit';
     '.properties_drawer {width: 320px}',
     '.delete-page-button {min-width: 0; padding: 0;position: absolute; left: 130px; bottom: 6px; visibility: hidden}',
     '::ng-deep .mat-tab-label:hover .delete-page-button {visibility: visible;}',
-    '.page-alwaysVisible-icon {position: absolute; left: 15px}',
     '.drawer-button {font-size: large;background-color: lightgray; min-width: 0; width: 2%; border: none; cursor: pointer}',
     '.show-elements-button span {transform: rotate(-90deg); display: inherit}',
     '.show-properties-button {padding-bottom: 140px}',

projects/editor/src/app/unit.service.ts

@@ -73,14 +73,29 @@ export class UnitService {
   }
 
   updatePageProperty(page: UnitPage, property: string, value: number | boolean): void {
-    if (property === 'alwaysVisible' && value === true && !this.isSetPageAlwaysVisibleAllowed()) {
-      this.messageService.showError('Kann nur für eine Seite gesetzt werden');
+    if (property === 'alwaysVisible' && value === true) {
+      this.handlePageAlwaysVisiblePropertyChange(page);
     } else {
       page[property] = value;
     }
     this.veronaApiService.sendVoeDefinitionChangedNotification();
   }
 
+  private handlePageAlwaysVisiblePropertyChange(page: UnitPage): void {
+    if (!this.isSetPageAlwaysVisibleAllowed()) {
+      this.messageService.showError('Kann nur für eine Seite gesetzt werden');
+    } else {
+      const pageIndex = this._unit.value.pages.indexOf(page);
+      if (pageIndex !== 0) { // Make page first element in page array
+        this._unit.value.pages.splice(pageIndex, 1);
+        this._unit.value.pages.splice(0, 0, page);
+        this._unit.next(this._unit.value);
+        this.pageMoved.next();
+      }
+      page.alwaysVisible = true;
+    }
+  }
+
   /* Disallow when not more than 1 page or when is already set. */
   isSetPageAlwaysVisibleAllowed(): boolean {
     return this._unit.value.pages.length > 1 && this._unit.value.pages.find(page => page.alwaysVisible) === undefined;