refacto trainrun filter service for label uniqueness (SchweizerischeBundesbahnen#212)

* refacto trainrun filter service for label uniqueness

* fix error if trainrun is deleted

* refactor node filter label uniqueness

* fix bug for note label initialization + refactor label uniqueness

* remove console log for test

Author: louisgreiner

src/app/services/data/node.service.ts

@@ -982,17 +982,17 @@ export class NodeService implements OnDestroy {
 
   changeLabels(nodeId: number, labels: string[]) {
     const node = this.getNodeFromId(nodeId);
-    const labelIds: number[] = [];
-    labels.forEach((label) => {
-      labelIds.push(
-        this.labelService.getOrCreateLabel(label, LabelRef.Node).getId(),
-      );
-    });
-    const deletetLabelIds = this.labelService.clearLabel(
+
+    // ensure uniqueness of input labels
+    const uniqueLabels = Array.from(new Set(labels));
+    const labelIds = uniqueLabels.map(label =>
+      this.labelService.getOrCreateLabel(label, LabelRef.Node).getId()
+    );
+    const deletedLabelIds = this.labelService.clearLabel(
       this.findClearedLabel(node, labelIds),
       this.makeLabelIDCounterMap(this.getNodes()),
     );
-    this.filterService.clearDeletetFilterNodeLabels(deletetLabelIds);
+    this.filterService.clearDeletetFilterNodeLabels(deletedLabelIds);
     node.setLabelIds(labelIds);
     this.nodesUpdated();
   }

src/app/services/data/note.service.ts

@@ -188,17 +188,17 @@ export class NoteService {
 
   setLabels(noteId: number, labels: string[]) {
     const note = this.getNoteFromId(noteId);
-    const labelIds: number[] = [];
-    labels.forEach((label) => {
-      labelIds.push(
-        this.labelService.getOrCreateLabel(label, LabelRef.Note).getId(),
-      );
-    });
-    const deletetLabelIds = this.labelService.clearLabel(
+
+    // ensure uniqueness of input labels
+    const uniqueLabels = Array.from(new Set(labels));
+    const labelIds = uniqueLabels.map(label =>
+      this.labelService.getOrCreateLabel(label, LabelRef.Note).getId()
+    );
+    const deletedLabelIds = this.labelService.clearLabel(
       this.findClearedLabel(note, labelIds),
       this.makeLabelIDCounterMap(this.getNotes()),
     );
-    this.filterService.clearDeletetFilterNoteLabels(deletetLabelIds);
+    this.filterService.clearDeletetFilterNoteLabels(deletedLabelIds);
     note.setLabelIds(labelIds);
     this.notesUpdated();
   }

src/app/services/data/trainrun.service.ts

@@ -529,17 +529,17 @@ export class TrainrunService {
 
   setLabels(trainrunId: number, labels: string[]) {
     const trainrun = this.getTrainrunFromId(trainrunId);
-    const labelIds: number[] = [];
-    labels.forEach((label) => {
-      labelIds.push(
-        this.labelService.getOrCreateLabel(label, LabelRef.Trainrun).getId(),
-      );
-    });
-    const deletetLabelIds = this.labelService.clearLabel(
+
+    // ensure uniqueness of input labels
+    const uniqueLabels = Array.from(new Set(labels));
+    const labelIds = uniqueLabels.map(label =>
+      this.labelService.getOrCreateLabel(label, LabelRef.Trainrun).getId()
+    );
+    const deletedLabelIds = this.labelService.clearLabel(
       this.findClearedLabel(trainrun, labelIds),
       this.makeLabelIDCounterMap(this.getTrainruns()),
     );
-    this.filterService.clearDeletetFilterTrainrunLabels(deletetLabelIds);
+    this.filterService.clearDeletetFilterTrainrunLabels(deletedLabelIds);
     trainrun.setLabelIds(labelIds);
     this.trainrunsUpdated();
   }

src/app/view/dialogs/note-dialog/note-filter-tab/note-filter-tab.component.ts

@@ -30,9 +30,11 @@ export class NoteFilterTabComponent implements OnInit, OnDestroy {
 
   public note: Note;
   public noteLabels: string[];
+  private initialNoteLabels: string[];
   noteLabelsAutoCompleteOptions: string[] = [];
   readonly separatorKeysCodes = [ENTER, COMMA];
   private destroyed = new Subject<void>();
+  private isLabelBeingEdited = false;
 
   constructor(
     public dataService: DataService,
@@ -47,6 +49,11 @@ export class NoteFilterTabComponent implements OnInit, OnDestroy {
     this.noteService.notes.pipe(takeUntil(this.destroyed)).subscribe(() => {
       this.updateNoteLabelsAutoCompleteOptions();
     });
+    this.noteService.notes
+    .pipe(takeUntil(this.destroyed))
+    .subscribe(() => {
+      this.initializeWithCurrentNote();
+    });
     this.updateNoteLabelsAutoCompleteOptions();
   }
 
@@ -64,7 +71,9 @@ export class NoteFilterTabComponent implements OnInit, OnDestroy {
     this.noteLabels = this.noteLabels.filter(
       (labels) => labels !== valueDelete,
     );
-    this.noteService.setLabels(this.note.getId(), this.noteLabels);
+    this.isLabelBeingEdited = true;
+    this.checkAndSetLabels();
+    this.isLabelBeingEdited = false;
   }
 
   add(chipInputEvent: SbbChipInputEvent): void {
@@ -73,11 +82,15 @@ export class NoteFilterTabComponent implements OnInit, OnDestroy {
       return;
     }
     this.noteLabels.push(value);
-    this.noteService.setLabels(this.note.getId(), this.noteLabels);
+    this.isLabelBeingEdited = true;
+    this.checkAndSetLabels();
+    this.isLabelBeingEdited = false;
     chipInputEvent.chipInput!.clear();
   }
 
   onLabelsFocusout() {
+    if (this.isLabelBeingEdited) return;
+
     const keyboardEvent = new KeyboardEvent("keydown", {
       code: "Enter",
       key: "Enter",
@@ -87,6 +100,7 @@ export class NoteFilterTabComponent implements OnInit, OnDestroy {
       bubbles: true,
     });
     document.getElementById("noteLabelsInput").dispatchEvent(keyboardEvent);
+    this.checkAndSetLabels();
   }
 
   onDeleteNote(): void {
@@ -104,16 +118,32 @@ export class NoteFilterTabComponent implements OnInit, OnDestroy {
   }
 
   private initializeWithCurrentNote() {
+    if (this.note === null) return;
     this.note = this.noteService.getNoteFromId(
       this.noteDialogParameter.noteFormComponentModel.id,
     );
     this.noteLabels = this.labelService.getTextLabelsFromIds(
       this.note.getLabelIds(),
     );
+    this.initialNoteLabels = [...this.noteLabels]; // initialize labels
   }
 
   private updateNoteLabelsAutoCompleteOptions() {
     this.noteLabelsAutoCompleteOptions = this.getAutoCompleteLabels();
     this.cd.detectChanges();
   }
+
+  // set labels only if any of it has changed
+  private checkAndSetLabels() {
+    if (
+      this.noteLabels.length !== this.initialNoteLabels.length ||
+      !this.noteLabels.every((label, index) => label === this.initialNoteLabels[index])
+    ) {
+      this.noteService.setLabels(
+        this.note.getId(),
+        this.noteLabels
+      );
+      this.initialNoteLabels = [...this.noteLabels];
+    }
+  }
 }

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

@@ -30,9 +30,11 @@ export class TrainrunFilterTabComponent implements OnInit, OnDestroy {
 
   public selectedTrainrun: Trainrun;
   public trainrunLabels: string[];
+  private initialTrainrunLabels: string[];
   trainrunLabelsAutoCompleteOptions: string[] = [];
   readonly separatorKeysCodes = [ENTER, COMMA];
   private destroyed = new Subject<void>();
+  private isLabelBeingEdited = false;
 
   constructor(
     public dataService: DataService,
@@ -76,23 +78,20 @@ export class TrainrunFilterTabComponent implements OnInit, OnDestroy {
     this.trainrunLabels = this.trainrunLabels.filter(
       (labels) => labels !== valueDelete,
     );
-    this.trainrunService.setLabels(
-      this.selectedTrainrun.getId(),
-      this.trainrunLabels,
-    );
+    this.isLabelBeingEdited = true;
+    this.checkAndSetLabels();
+    this.isLabelBeingEdited = false;
   }
 
   add(inputEvent: SbbChipInputEvent): void {
     const value = (inputEvent.value || "").trim();
     if (!value) {
       return;
     }
-    console.log("add", value);
     this.trainrunLabels.push(value);
-    this.trainrunService.setLabels(
-      this.selectedTrainrun.getId(),
-      this.trainrunLabels,
-    );
+    this.isLabelBeingEdited = true;
+    this.checkAndSetLabels();
+    this.isLabelBeingEdited = false;
     inputEvent.chipInput!.clear();
   }
 
@@ -121,6 +120,8 @@ export class TrainrunFilterTabComponent implements OnInit, OnDestroy {
   }
 
   onLabelsFocusout() {
+    if (this.isLabelBeingEdited) return;
+
     const keyboardEvent = new KeyboardEvent("keydown", {
       code: "Enter",
       key: "Enter",
@@ -130,10 +131,7 @@ export class TrainrunFilterTabComponent implements OnInit, OnDestroy {
       bubbles: true,
     });
     document.getElementById("trainrunLabelsInput").dispatchEvent(keyboardEvent);
-    this.trainrunService.setLabels(
-      this.selectedTrainrun.getId(),
-      this.trainrunLabels,
-    );
+    this.checkAndSetLabels();
   }
 
   getAutoCompleteLabels(): string[] {
@@ -145,13 +143,29 @@ export class TrainrunFilterTabComponent implements OnInit, OnDestroy {
 
   private initializeWithCurrentSelectedTrainrun() {
     this.selectedTrainrun = this.trainrunService.getSelectedTrainrun();
+    if (this.selectedTrainrun === null) return;
     this.trainrunLabels = this.labelService.getTextLabelsFromIds(
       this.selectedTrainrun.getLabelIds(),
     );
+    this.initialTrainrunLabels = [...this.trainrunLabels]; // initialize labels
   }
 
   private updateTrainrunLabelsAutoCompleteOptions() {
     this.trainrunLabelsAutoCompleteOptions = this.getAutoCompleteLabels();
     this.cd.detectChanges();
   }
-}
+
+  // set labels only if any of it has changed
+  private checkAndSetLabels() {
+    if (
+      this.trainrunLabels.length !== this.initialTrainrunLabels.length ||
+      !this.trainrunLabels.every((label, index) => label === this.initialTrainrunLabels[index])
+    ) {
+      this.trainrunService.setLabels(
+        this.selectedTrainrun.getId(),
+        this.trainrunLabels
+      );
+      this.initialTrainrunLabels = [...this.trainrunLabels];
+    }
+  }
+}

src/app/view/editor-side-view/editor-node-detail-view/editor-node-detail-view.component.ts

@@ -54,10 +54,13 @@ export class EditorNodeDetailViewComponent implements OnInit, OnDestroy {
     labels: [],
   };
 
+  private initialNodeLabels: string[];
+
   readonly separatorKeysCodes = [ENTER, COMMA];
   nodeLabelsAutoCompleteOptions: string[] = [];
 
   private destroyed = new Subject<void>();
+  private isLabelBeingEdited = false;
 
   constructor(
     private uiInteractionService: UiInteractionService,
@@ -117,10 +120,9 @@ export class EditorNodeDetailViewComponent implements OnInit, OnDestroy {
       return;
     }
     this.nodeProperties.labels.push(value);
-    this.nodeService.changeLabels(
-      this.nodeProperties.nodeId,
-      this.nodeProperties.labels,
-    );
+    this.isLabelBeingEdited = true;
+    this.checkAndSetLabels();
+    this.isLabelBeingEdited = false;
     chipInputEvent.chipInput!.clear();
   }
 
@@ -133,13 +135,14 @@ export class EditorNodeDetailViewComponent implements OnInit, OnDestroy {
     this.nodeProperties.labels = this.nodeProperties.labels.filter(
       (labels) => labels !== valueDelete,
     );
-    this.nodeService.changeLabels(
-      this.nodeProperties.nodeId,
-      this.nodeProperties.labels,
-    );
+    this.isLabelBeingEdited = true;
+    this.checkAndSetLabels();
+    this.isLabelBeingEdited = false;
   }
 
   onLabelsFocusout() {
+    if (this.isLabelBeingEdited) return;
+
     const keyboardEvent = new KeyboardEvent("keydown", {
       code: "Enter",
       key: "Enter",
@@ -149,10 +152,7 @@ export class EditorNodeDetailViewComponent implements OnInit, OnDestroy {
       bubbles: true,
     });
     document.getElementById("nodeLabelsInput").dispatchEvent(keyboardEvent);
-    this.nodeService.changeLabels(
-      this.nodeProperties.nodeId,
-      this.nodeProperties.labels,
-    );
+    this.checkAndSetLabels();
   }
 
   onCapacityChanged() {
@@ -261,6 +261,21 @@ export class EditorNodeDetailViewComponent implements OnInit, OnDestroy {
           selectedNode.getLabelIds(),
         ),
       };
+      this.initialNodeLabels = [...this.nodeProperties.labels]; // initialize labels
+    }
+  }
+
+  // set labels only if any of it has changed
+  private checkAndSetLabels() {
+    if (
+      this.nodeProperties.labels.length !== this.initialNodeLabels.length ||
+      !this.nodeProperties.labels.every((label, index) => label === this.initialNodeLabels[index])
+    ) {
+      this.nodeService.changeLabels(
+        this.nodeProperties.nodeId,
+        this.nodeProperties.labels
+      );
+      this.initialNodeLabels = [...this.nodeProperties.labels];
     }
   }
 }