more items crossed off

ui/src/app/components/form-object/form-object.component.html

@@ -82,7 +82,7 @@
               isNew: current && current[entry.key] === undefined,
               isEdited: entry.value.dirty
             }"></form-label>
-            <ion-button fill="clear" color="primary" slot="end" (click)="addListItem(entry.key)">
+            <ion-button fill="clear" color="primary" slot="end" (click)="addListItemWrapper(entry.key, spec)">
               <ion-icon slot="start" name="add"></ion-icon>
               Add
             </ion-button>

ui/src/app/components/form-object/form-object.component.ts

@@ -80,6 +80,10 @@ export class FormObjectComponent {
     })
   }
 
+  addListItemWrapper (key: string, spec: ValueSpec) {
+    this.presentAlertChangeWarning(key, spec, () => this.addListItem(key))
+  }
+
   addListItem (key: string, markDirty = true, val?: string): void {
     const arr = this.formGroup.get(key) as FormArray
     if (markDirty) arr.markAsDirty()
@@ -149,28 +153,34 @@ export class FormObjectComponent {
     await modal.present()
   }
 
-  async presentAlertChangeWarning (key: string, spec: ValueSpec, okFn: Function = () => { }, cancelFn: Function = () => { }) {
-    if (!spec['change-warning'] || this.warningAck[key]) return
+  async presentAlertChangeWarning (key: string, spec: ValueSpec, okFn?: Function, cancelFn?: Function) {
+    console.log('Here here here', spec['change-warning'])
+    if (!spec['change-warning'] || this.warningAck[key]) return okFn ? okFn() : null
     this.warningAck[key] = true
 
+    const buttons = [
+      {
+        text: 'Proceed',
+        handler: () => {
+          if (okFn) okFn()
+        },
+      },
+    ]
+
+    if (okFn || cancelFn) {
+      buttons.unshift({
+        text: 'Cancel',
+        handler: () => {
+          if (cancelFn) cancelFn()
+        },
+      })
+    }
+
     const alert = await this.alertCtrl.create({
       header: 'Warning',
       subHeader: `Editing ${spec.name} has consequences:`,
       message: spec['change-warning'],
-      buttons: [
-        {
-          text: 'Cancel',
-          handler: () => {
-            cancelFn()
-          },
-        },
-        {
-          text: 'Proceed',
-          handler: () => {
-            okFn()
-          },
-        },
-      ],
+      buttons,
     })
     await alert.present()
   }

ui/src/app/modals/enum-list/enum-list.page.html

@@ -14,7 +14,7 @@
 <ion-content>
   <ion-item-group>
     <ion-item *ngFor="let option of options | keyvalue : asIsOrder">
-      <ion-label>{{ option.key }}</ion-label>
+      <ion-label>{{ spec.spec['value-names'][option.key] }}</ion-label>
       <ion-checkbox slot="end" [(ngModel)]="option.value" (click)="toggleSelected(option.key)"></ion-checkbox>
     </ion-item>
   </ion-item-group>