fix: list node gets updated (#1437)

dasch-swiss · Feb 6, 2024 · 6b8aa08 · 6b8aa08
1 parent bb60878
commit 6b8aa08
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 17 deletions.
diff --git a/apps/dsp-app/src/app/project/list/list-item-element/list-item-element.component.ts b/apps/dsp-app/src/app/project/list/list-item-element/list-item-element.component.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, Input, OnChanges, OnInit, Output } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
 import { ListNode } from '@dasch-swiss/dsp-js';
 import { ListItemService } from '../list-item/list-item.service';
@@ -8,7 +8,7 @@ import { ListItemService } from '../list-item/list-item.service';
   template: `
     <div style="display: flex">
       <button type="button" color="primary" mat-icon-button (click)="showChildren = !showChildren">
-        <mat-icon>{{ showChildren ? 'expand_more' : 'chevron_right' }} </mat-icon>
+        <mat-icon>{{ showChildren ? 'expand_more' : 'chevron_right' }}</mat-icon>
       </button>
 
       <div style="flex: 1">
@@ -39,7 +39,7 @@ import { ListItemService } from '../list-item/list-item.service';
   `,
   styles: [':host ::ng-deep dasch-swiss-multi-language-input .mat-mdc-form-field-bottom-align { display: none;}'],
 })
-export class ListItemElementComponent implements OnInit {
+export class ListItemElementComponent implements OnInit, OnChanges {
   @Input() node: ListNode;
   @Input() position: number;
   @Input() length: number;
@@ -59,6 +59,14 @@ export class ListItemElementComponent implements OnInit {
   ) {}
 
   ngOnInit() {
+    this.buildForm();
+  }
+
+  ngOnChanges() {
+    this.buildForm();
+  }
+
+  private buildForm() {
     this.readOnlyForm = this._fb.group({
       labels: this._fb.array(
         this.node.labels.map(({ language, value }) =>
@@ -76,6 +84,7 @@ export class ListItemElementComponent implements OnInit {
       this.showActionBubble = true;
     }
   }
+
   mouseLeave() {
     this.showActionBubble = false;
   }

diff --git a/libs/vre/shared/app-string-literal/src/lib/multi-language-input.component.ts b/libs/vre/shared/app-string-literal/src/lib/multi-language-input.component.ts
@@ -1,5 +1,5 @@
 import { CommonModule } from '@angular/common';
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnChanges, OnInit } from '@angular/core';
 import { FormGroup, FormsModule, ReactiveFormsModule, ValidatorFn } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
@@ -56,11 +56,11 @@ import { MultiLanguageFormService } from './multi-language-form.service';
     <mat-error *ngIf="formService.formArray.invalid && formService.formArray.touched">
       <ng-container *ngIf="formService.invalidErrors?.language"
         >Language {{ formService.invalidErrors.language }}:
-        {{ formService.invalidErrors.error | humanReadableError }}</ng-container
-      >
-      <ng-container *ngIf="!formService.invalidErrors?.language">{{
-        formService.invalidErrors.error | humanReadableError
-      }}</ng-container>
+        {{ formService.invalidErrors.error | humanReadableError }}
+      </ng-container>
+      <ng-container *ngIf="!formService.invalidErrors?.language"
+        >{{ formService.invalidErrors.error | humanReadableError }}
+      </ng-container>
     </mat-error>
 
     <mat-menu #selectLanguage="matMenu" class="lang-menu">
@@ -85,7 +85,7 @@ import { MultiLanguageFormService } from './multi-language-form.service';
     `,
   ],
 })
-export class MutiLanguageInputComponent implements OnInit {
+export class MutiLanguageInputComponent implements OnInit, OnChanges {
   @Input() formGroup: FormGroup;
   @Input() controlName: string;
   @Input() editable = true;
@@ -95,6 +95,14 @@ export class MutiLanguageInputComponent implements OnInit {
   constructor(public formService: MultiLanguageFormService) {}
 
   ngOnInit() {
+    this.initialize();
+  }
+
+  ngOnChanges() {
+    this.initialize();
+  }
+
+  private initialize() {
     this.formService.onInit(this.formGroup, this.controlName, this.validators);
   }
 }
diff --git a/libs/vre/shared/app-string-literal/src/lib/multi-language-textarea.component.ts b/libs/vre/shared/app-string-literal/src/lib/multi-language-textarea.component.ts
@@ -1,5 +1,5 @@
 import { CommonModule } from '@angular/common';
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnChanges, OnInit } from '@angular/core';
 import { FormGroup, FormsModule, ReactiveFormsModule, ValidatorFn } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
@@ -51,11 +51,11 @@ import { MultiLanguageFormService } from './multi-language-form.service';
     <mat-error *ngIf="formService.formArray.invalid && formService.formArray.touched">
       <ng-container *ngIf="formService.invalidErrors?.language"
         >Language {{ formService.invalidErrors.language }}:
-        {{ formService.invalidErrors.error | humanReadableError }}</ng-container
-      >
-      <ng-container *ngIf="!formService.invalidErrors?.language">{{
-        formService.invalidErrors.error | humanReadableError
-      }}</ng-container>
+        {{ formService.invalidErrors.error | humanReadableError }}
+      </ng-container>
+      <ng-container *ngIf="!formService.invalidErrors?.language"
+        >{{ formService.invalidErrors.error | humanReadableError }}
+      </ng-container>
     </mat-error>
   `,
   styles: [
@@ -71,7 +71,7 @@ import { MultiLanguageFormService } from './multi-language-form.service';
     `,
   ],
 })
-export class MultiLanguageTextareaComponent implements OnInit {
+export class MultiLanguageTextareaComponent implements OnInit, OnChanges {
   @Input() formGroup: FormGroup;
   @Input() controlName: string;
   @Input() editable = true;
@@ -81,6 +81,14 @@ export class MultiLanguageTextareaComponent implements OnInit {
   constructor(public formService: MultiLanguageFormService) {}
 
   ngOnInit() {
+    this.initialize();
+  }
+
+  ngOnChanges() {
+    this.initialize();
+  }
+
+  private initialize() {
     this.formService.onInit(this.formGroup, this.controlName, this.validators);
   }
 }