fix: Bug archived read only mode variants are editable even tho not p…

…ersisted (#257)

* German - translation typo fixed

* German - translation typo fixed

* UI / Dialog - if the variant is not editable -> readonly : disable user interactions
 
* UI / Dialog - if the variant is not editable -> remove buttons

* short key removed -> all editing function deleted (e.g. copy is allowed)

* removed unused scss "tags"

* Styling and color editor - menu adjusted (polished)

* fix: missing translations

* typo fixed

* code clean up

* if the project is archvied -> variants archive stat can not be edited. => write control doesn't allow changes

---------

Co-authored-by: Louis Greiner <[email protected]>

src/app/netzgrafik-application/netzgrafik-application.component.ts

@@ -71,10 +71,7 @@ export class NetzgrafikApplicationComponent {
   }
 
   getVariantIsWritable(): boolean {
-    if (this.versionControlService.variant === null) {
-      return true;
-    }
-    return this.versionControlService.variant.isWritable;
+    return this.versionControlService.getVariantIsWritable();
   }
 
   onVariantenClicked() {

src/app/perlenkette/perlenkette-node/perlenkette-node.component.html

@@ -1,4 +1,6 @@
-<div class="node-container" (click)="disapleSectionView($event)">
+<div class="node-container" (click)="disableSectionView($event)"
+     [class.readonly]="!getVariantIsWritable()"
+>
   <svg
     display="block"
     width="96px"

src/app/perlenkette/perlenkette-node/perlenkette-node.component.scss

@@ -9,6 +9,10 @@
   }
 }
 
+.readonly {
+  pointer-events: none;
+}
+
 .title_rect {
   cursor: pointer;
 }

src/app/perlenkette/perlenkette-node/perlenkette-node.component.ts

@@ -13,6 +13,7 @@ import {Trainrun} from "../../models/trainrun.model";
 import {PerlenketteConnection} from "../model/perlenketteConnection";
 import {PerlenketteItem} from "../model/perlenketteItem";
 import {UiInteractionService} from "../../services/ui/ui.interaction.service";
+import {VersionControlService} from "../../services/data/version-control.service";
 
 @Component({
   selector: "sbb-perlenkette-node",
@@ -37,6 +38,7 @@ export class PerlenketteNodeComponent implements OnInit {
     public trainrunService: TrainrunService,
     readonly filterService: FilterService,
     readonly uiInteractionService: UiInteractionService,
+    readonly versionControlService : VersionControlService,
   ) {
   }
 
@@ -45,6 +47,10 @@ export class PerlenketteNodeComponent implements OnInit {
     this.calculateHeightConnectionSurplus();
   }
 
+  getVariantIsWritable() : boolean {
+    return this.versionControlService.getVariantIsWritable();
+  }
+
   getConnectionIssue(): string {
     let amountOfWarningConnections = 0;
     this.perlenketteNode.connections.forEach(
@@ -343,8 +349,10 @@ export class PerlenketteNodeComponent implements OnInit {
     );
   }
 
-  disapleSectionView(event: MouseEvent) {
-    this.signalIsBeingEdited.next(undefined);
+  disableSectionView(event: MouseEvent) {
+    if (!this.getVariantIsWritable()) {
+      this.signalIsBeingEdited.next(undefined);
+    }
     event.stopPropagation();
   }
 

src/app/perlenkette/perlenkette-section/perlenkette-section.component.html

@@ -1,6 +1,7 @@
 <div
   [class.sectionEditingContainer]="isBeingEdited() === 'TimeEditor'"
   (click)="disableSectionView($event)"
+  [class.readonly]="!getVariantIsWritable()"
 >
   <!--- START - RENDER SVG --->
   <svg

src/app/perlenkette/perlenkette-section/perlenkette-section.component.scss

@@ -11,6 +11,12 @@ svg {
   overflow: visible;
 }
 
+
+.readonly {
+  pointer-events: none;
+}
+
+
 .start_text {
   text-anchor: start !important;
   cursor: pointer;

src/app/perlenkette/perlenkette-section/perlenkette-section.component.ts

@@ -33,6 +33,7 @@ import {
 } from "../../view/rastering/definitions";
 import {StaticDomTags} from "../../view/editor-main-view/data-views/static.dom.tags";
 import {MathUtils} from "../../utils/math";
+import {VersionControlService} from "../../services/data/version-control.service";
 
 export interface TopAndBottomTimeStructure {
   leftDepartureTime: number;
@@ -105,6 +106,7 @@ export class PerlenketteSectionComponent
     public trainrunSectionTimesService: TrainrunSectionTimesService,
     readonly filterService: FilterService,
     private loadPerlenketteService: LoadPerlenketteService,
+    private versionControlService : VersionControlService
   ) {
     this.trainrunSectionHelper = new TrainrunsectionHelper(
       this.trainrunService,
@@ -170,6 +172,10 @@ export class PerlenketteSectionComponent
     this.destroyed$.complete();
   }
 
+  getVariantIsWritable() : boolean {
+    return this.versionControlService.getVariantIsWritable();
+  }
+
   isBeingEdited(): string {
     if (this.perlenketteSection.isBeingEdited === false) {
       return "Rendering";
@@ -216,7 +222,9 @@ export class PerlenketteSectionComponent
   }
 
   disableSectionView(event: MouseEvent) {
-    this.signalIsBeingEdited.next(this.perlenketteSection);
+    if (!this.getVariantIsWritable()) {
+      this.signalIsBeingEdited.next(this.perlenketteSection);
+    }
     event.stopPropagation();
   }
 

src/app/perlenkette/perlenkette.component.ts

@@ -21,6 +21,7 @@ import {EditorMode} from "../view/editor-menu/editor-mode";
 import {NodeService} from "../services/data/node.service";
 import {takeUntil} from "rxjs/operators";
 import {PerlenketteConnection} from "./model/perlenketteConnection";
+import {VersionControlService} from "../services/data/version-control.service";
 
 @Component({
   selector: "sbb-perlenkette",
@@ -53,6 +54,7 @@ export class PerlenketteComponent implements AfterContentChecked, OnDestroy {
     readonly filterService: FilterService,
     private readonly uiInteractionService: UiInteractionService,
     private readonly nodeService: NodeService,
+    private versionControlService : VersionControlService,
     private changeDetectorRef: ChangeDetectorRef,
   ) {
     this.selectedPerlenketteConnection = undefined;
@@ -227,8 +229,14 @@ export class PerlenketteComponent implements AfterContentChecked, OnDestroy {
     return this.signalAllChildrenIsBeingEditedSubject.asObservable();
   }
 
+  getVariantIsWritable() : boolean {
+    return this.versionControlService.getVariantIsWritable();
+  }
+
   disableSectionView() {
-    this.signalIsBeingEdited(undefined);
+    if (!this.getVariantIsWritable()) {
+      this.signalIsBeingEdited(undefined);
+    }
   }
 
   scrollFirst(event: MouseEvent) {

src/app/services/data/version-control.service.ts

@@ -86,6 +86,13 @@ export class VersionControlService implements OnDestroy {
     this.load(this.variant.id, loadModel);
   }
 
+  getVariantIsWritable(): boolean {
+    if (this.variant === null) {
+      return true;
+    }
+    return this.variant.isWritable;
+  }
+
   createSnapshot(newName?: string): void {
     const name = newName || this.variant.latestVersion.name;
     this.versionsBackendService

src/app/view/dialogs/trainrun-and-section-dialog/trainrun-filter-tab/trainrun-filter-tab.component.html

@@ -1,4 +1,4 @@
-<div sbbDialogContent class="EditTrainrunFilterableLabelsDialogTabContent">
+<div sbbDialogContent [class]="getContentClassTag()">
   <sbb-form-field class="sbb-form-field-long" [label]="'app.view.dialogs.trainrun-and-section-dialog.trainrun-filter-tab.labels' | translate">
     <sbb-chip-list
       [value]="trainrunLabels"
@@ -30,7 +30,7 @@
     </sbb-autocomplete>
   </sbb-form-field>
 </div>
-<div sbbDialogActions class="EditTrainrunDialogTabFooter">
+<div sbbDialogActions [class]="getContentFooterClassTag()">
   <button
     class="FunctionButton"
     tabindex="-1"

src/app/view/dialogs/trainrun-and-section-dialog/trainrun-filter-tab/trainrun-filter-tab.component.scss

@@ -15,3 +15,11 @@
   max-height: 48px;
   min-height: 48px;
 }
+
+::ng-deep div.EditTrainrunFilterableLabelsDialogTabContent.readonly {
+  pointer-events: none;
+}
+
+::ng-deep div.EditTrainrunDialogTabFooter.readonly {
+  pointer-events: none;
+}

src/app/view/dialogs/trainrun-and-section-dialog/trainrun-filter-tab/trainrun-filter-tab.component.ts

@@ -19,6 +19,7 @@ import {Subject} from "rxjs";
 import {takeUntil} from "rxjs/operators";
 import {SbbChipEvent, SbbChipInputEvent} from "@sbb-esta/angular/chips";
 import {COMMA, ENTER} from "@angular/cdk/keycodes";
+import {VersionControlService} from "../../../../services/data/version-control.service";
 
 @Component({
   selector: "sbb-trainrun-filter-tab",
@@ -43,6 +44,7 @@ export class TrainrunFilterTabComponent implements OnInit, OnDestroy {
     private labelService: LabelService,
     private labelGroupService: LabelGroupService,
     private uiInteractionService: UiInteractionService,
+    private versionControlService: VersionControlService,
     private cd: ChangeDetectorRef,
   ) {
     this.initializeWithCurrentSelectedTrainrun();
@@ -69,6 +71,23 @@ export class TrainrunFilterTabComponent implements OnInit, OnDestroy {
     this.destroyed.complete();
   }
 
+  getContentClassTag() : string {
+    const retVal = "EditTrainrunFilterableLabelsDialogTabContent";
+    if (this.versionControlService.getVariantIsWritable()){
+      return retVal;
+    }
+    return retVal + " readonly";
+  }
+
+  getContentFooterClassTag(): string {
+    const retVal: string = "EditTrainrunDialogTabFooter";
+    if (this.versionControlService.getVariantIsWritable()) {
+      return retVal;
+    }
+    return retVal + " readonly";
+  }
+
+
   remove(chipEvent: SbbChipEvent): void {
     const valueDelete = chipEvent.chip.value as string;
     const value = (valueDelete || "").trim();

src/app/view/dialogs/trainrun-and-section-dialog/trainrun-tab/trainrun-tab.component.html

@@ -1,4 +1,4 @@
-<div sbbDialogContent [class]="getDialogContentClassTag()">
+<div sbbDialogContent [class]="getContentClassTag()">
   <sbb-form-field [label]="'app.view.dialogs.trainrun-and-section-dialog.trainrun-tab.tabName' | translate" class="sbb-form-field-long">
     <input
       id="trainrunTitleField"
@@ -59,7 +59,7 @@
   </div>
 </div>
 <ng-container *ngIf="toolbarVisible">
-  <div sbbDialogActions class="EditTrainrunDialogTabFooter">
+  <div sbbDialogActions [class]="getContentFooterClassTag()">
     <button
       class="FunctionButton"
       tabindex="-1"

src/app/view/dialogs/trainrun-and-section-dialog/trainrun-tab/trainrun-tab.component.scss

@@ -115,3 +115,11 @@
 }
 
 
+::ng-deep div.EditTrainrunDialogTabContent.readonly {
+  pointer-events: none;
+}
+
+::ng-deep div.EditTrainrunDialogTabFooter.readonly {
+  pointer-events: none;
+  opacity: 0.5;
+}

src/app/view/dialogs/trainrun-and-section-dialog/trainrun-tab/trainrun-tab.component.ts

@@ -14,6 +14,7 @@ import {StaticDomTags} from "../../../editor-main-view/data-views/static.dom.tag
 import {takeUntil} from "rxjs/operators";
 import {Subject} from "rxjs";
 import {TrainrunDialogParameter} from "../trainrun-and-section-dialog.component";
+import {VersionControlService} from "../../../../services/data/version-control.service";
 
 @Component({
   selector: "sbb-trainrun-tab",
@@ -39,6 +40,7 @@ export class TrainrunTabComponent implements OnDestroy {
     private trainrunService: TrainrunService,
     private trainrunSectionService: TrainrunSectionService,
     private uiInteractionService: UiInteractionService,
+    private versionControlService: VersionControlService,
   ) {
     this.initializeWithCurrentSelectedTrainrun();
     this.trainrunService.trainruns
@@ -53,13 +55,23 @@ export class TrainrunTabComponent implements OnDestroy {
     this.destroyed.complete();
   }
 
-  getDialogContentClassTag(): string {
+  getContentClassTag(): string {
+    const readonlyTag: string = this.versionControlService.getVariantIsWritable() ? " " : " readonly";
     if (this.isIntegratedComponent) {
-      return "EditTrainrunDialogTabContent IntegratedComponent";
+      return "EditTrainrunDialogTabContent IntegratedComponent" + readonlyTag;
     }
-    return "EditTrainrunDialogTabContent";
+    return "EditTrainrunDialogTabContent" + readonlyTag;
   }
 
+  getContentFooterClassTag(): string {
+    const retVal: string = "EditTrainrunDialogTabFooter";
+    if (this.versionControlService.getVariantIsWritable()) {
+      return retVal;
+    }
+    return retVal + " readonly";
+  }
+
+
   getFrequencyClassname(trainrunFrequency: TrainrunFrequency): string {
     if (trainrunFrequency.id === this.selectedFrequency.id) {
       return (

src/app/view/dialogs/trainrun-and-section-dialog/trainrunsection-tab/trainrun-section-tab.component.html

@@ -1,4 +1,4 @@
-<div sbbDialogContent class="EditTrainrunSectionDialogTabContent">
+<div sbbDialogContent [class]="getContentClassTag()">
   <table>
     <tr>
       <td>
@@ -467,7 +467,7 @@
     </tr>
   </table>
 </div>
-<div sbbDialogActions class="EditTrainrunDialogTabFooter">
+<div sbbDialogActions [class]="getContentFooterClassTag()">
   <button
     class="warning"
     *ngIf="trainrunSectionTimesService.getShowWarningTwoLocks() === true"

src/app/view/dialogs/trainrun-and-section-dialog/trainrunsection-tab/trainrun-section-tab.component.scss

@@ -406,3 +406,13 @@ div.sbb-dialog-content.sbb-scrollbar.EditTrainrunSectionDialogTabContent {
   max-height: 48px;
   min-height: 48px;
 }
+
+
+::ng-deep div.EditTrainrunSectionDialogTabContent.readonly {
+  pointer-events: none;
+}
+
+::ng-deep div.EditTrainrunDialogTabFooter.readonly {
+  pointer-events: none;
+  opacity: 0.5;
+}

src/app/view/dialogs/trainrun-and-section-dialog/trainrunsection-tab/trainrun-section-tab.component.ts

@@ -25,6 +25,7 @@ import {ColorRefType} from "../../../../data-structures/technical.data.structure
 import {
   TrainrunSectionTimesService
 } from "../../../../services/data/trainrun-section-times.service";
+import {VersionControlService} from "../../../../services/data/version-control.service";
 
 export interface LeftAndRightTimeStructure {
   leftDepartureTime: number;
@@ -83,6 +84,7 @@ export class TrainrunSectionTabComponent implements AfterViewInit, OnDestroy {
     private trainrunSectionService: TrainrunSectionService,
     private changeDetection: ChangeDetectorRef,
     public trainrunSectionTimesService: TrainrunSectionTimesService,
+    private versionControlService: VersionControlService,
   ) {
 
     this.trainrunSectionHelper = new TrainrunsectionHelper(
@@ -180,6 +182,22 @@ export class TrainrunSectionTabComponent implements AfterViewInit, OnDestroy {
     this.changeDetection.detectChanges();
   }
 
+  getContentClassTag() : string {
+    const retVal: string = "EditTrainrunSectionDialogTabContent";
+    if (this.versionControlService.getVariantIsWritable()){
+      return retVal;
+    }
+    return retVal + " readonly";
+  }
+
+  getContentFooterClassTag() : string {
+    const retVal: string = "EditTrainrunDialogTabFooter";
+    if (this.versionControlService.getVariantIsWritable()){
+      return retVal;
+    }
+    return retVal + " readonly";
+  }
+
   setFocusToUIElement(focusElement: LeftAndRightElement) {
     switch (focusElement) {
       case LeftAndRightElement.LeftArrival: