From 99a3022af5a72a3409415c8453e8ec8ee730386d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Kilchenmann?= <github@milchkannen.ch>
Date: Fri, 15 Oct 2021 10:02:26 +0200
Subject: [PATCH] fix(properties): do not submit res instance form by adding
 new value (DEV-150) (#553)

---
 .../resource/properties/properties.component.html          | 4 ++--
 .../workspace/resource/properties/properties.component.ts  | 3 ++-
 .../select-properties/select-properties.component.html     | 6 ++++--
 .../select-properties/select-properties.component.ts       | 7 +++++--
 4 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/app/workspace/resource/properties/properties.component.html b/src/app/workspace/resource/properties/properties.component.html
index cdad5dfc08..d4ef61e983 100644
--- a/src/app/workspace/resource/properties/properties.component.html
+++ b/src/app/workspace/resource/properties/properties.component.html
@@ -137,8 +137,8 @@ <h3 class="label mat-title">
                     </div>
                     <!-- Add button -->
                     <div *ngIf="addValueIsAllowed(prop) && project?.status">
-                        <button mat-icon-button class="value-action create"
-                            (click)="showAddValueForm(prop)"
+                        <button mat-icon-button type="button" class="value-action create"
+                            (click)="showAddValueForm(prop, $event)"
                             title="Add a new value">
                             <mat-icon>add_box</mat-icon>
                         </button>
diff --git a/src/app/workspace/resource/properties/properties.component.ts b/src/app/workspace/resource/properties/properties.component.ts
index 2e6ca139dd..ea0cccb24a 100644
--- a/src/app/workspace/resource/properties/properties.component.ts
+++ b/src/app/workspace/resource/properties/properties.component.ts
@@ -356,7 +356,8 @@ export class PropertiesComponent implements OnInit, OnChanges, OnDestroy {
     /**
      * called from the template when the user clicks on the add button
      */
-    showAddValueForm(prop: PropertyInfoValues) {
+    showAddValueForm(prop: PropertyInfoValues, ev: Event) {
+        ev.preventDefault();
         this.propID = prop.propDef.id;
         this.addValueFormIsVisible = true;
     }
diff --git a/src/app/workspace/resource/resource-instance-form/select-properties/select-properties.component.html b/src/app/workspace/resource/resource-instance-form/select-properties/select-properties.component.html
index bfdb1a8a10..b8e37a4ad4 100644
--- a/src/app/workspace/resource/resource-instance-form/select-properties/select-properties.component.html
+++ b/src/app/workspace/resource/resource-instance-form/select-properties/select-properties.component.html
@@ -50,9 +50,10 @@
                             <div class="buttons">
                                 <button mat-icon-button
                                     *ngIf="propertyValuesKeyValuePair[prop.id + '-filtered'].length !== 1"
+                                    type="button"
                                     class="value-action delete"
                                     title="Delete this value"
-                                    (click)="deleteValue(prop, i)">
+                                    (click)="deleteValue(prop, i, $event)">
                                     <mat-icon>delete</mat-icon>
                                 </button>
                             </div>
@@ -61,9 +62,10 @@
                     <!-- Add button -->
                     <div *ngIf="addValueIsAllowed(prop)">
                         <button mat-icon-button
+                            type="button"
                             class="value-action create"
                             title="Add a new value"
-                            (click)="addNewValueFormToProperty(prop)">
+                            (click)="addNewValueFormToProperty(prop, $event)">
                             <mat-icon>add_box</mat-icon>
                         </button>
                     </div>
diff --git a/src/app/workspace/resource/resource-instance-form/select-properties/select-properties.component.ts b/src/app/workspace/resource/resource-instance-form/select-properties/select-properties.component.ts
index f2a3263744..455ff0b175 100644
--- a/src/app/workspace/resource/resource-instance-form/select-properties/select-properties.component.ts
+++ b/src/app/workspace/resource/resource-instance-form/select-properties/select-properties.component.ts
@@ -111,7 +111,9 @@ export class SelectPropertiesComponent implements OnInit {
     /**
      * called from the template when the user clicks on the add button
      */
-    addNewValueFormToProperty(prop: ResourcePropertyDefinition) {
+    addNewValueFormToProperty(prop: ResourcePropertyDefinition, ev: Event) {
+        ev.preventDefault();
+
         // get the length of the corresponding property values array
         const length = this.propertyValuesKeyValuePair[prop.id].length;
 
@@ -124,7 +126,8 @@ export class SelectPropertiesComponent implements OnInit {
         this.propertyValuesKeyValuePair[prop.id + '-filtered'].push(length);
     }
 
-    deleteValue(prop: ResourcePropertyDefinition, index: number) {
+    deleteValue(prop: ResourcePropertyDefinition, index: number, ev: Event) {
+        ev.preventDefault();
         // don't actually remove the item from the property values array, just set it to undefined.
         // this is because if we actually modify the indexes of the array, the template will re-evaluate
         // and recreate components for any elements after the deleted index, effectively erasing entered data if any was entered