rework cutofing processing (#716)

* rework cutofing processing

* fix default generation bug

* dont hard code all dependent ids to 'hello'

* fix recommendation display and bug with health cehck not updating

* fix key name

* fix dependency error updates and retain order on backup

* fix health check display

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

@@ -30,5 +30,8 @@
     <p *ngIf="control.hasError('listNotUnique')">
       {{ control.errors.listNotUnique.value }}
     </p>
+    <p *ngIf="control.hasError('listItemIssue')">
+      {{ control.errors.listItemIssue.value }}
+    </p>
   </ng-container>
 </div>

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

@@ -1,11 +1,16 @@
-<ion-button *ngIf="data.spec.description" class="help-button" fill="clear" size="small" (click)="presentAlertDescription()">
+<ion-button *ngIf="data.spec.description" class="slot-start" fill="clear" size="small" (click)="presentAlertDescription()">
   <ion-icon name="help-circle-outline"></ion-icon>
 </ion-button>
 
+<!-- this is a button for css purposes only -->
+<ion-button *ngIf="data.invalid" class="slot-start" fill="clear" size="small" color="danger">
+  <ion-icon name="warning-outline"></ion-icon>
+</ion-button>
+
 <span>{{ data.spec.name }}</span>
 
-<ion-text color="success" *ngIf="data.isNew">&nbsp;(New)</ion-text>
-<ion-text color="warning" *ngIf="data.isEdited">&nbsp;(Edited)</ion-text>
+<ion-text color="success" *ngIf="data.new">&nbsp;(New)</ion-text>
+<ion-text color="warning" *ngIf="data.edited">&nbsp;(Edited)</ion-text>
 
 <span *ngIf="(['string', 'number'] | includes : data.spec.type) && !$any(data.spec).nullable">&nbsp;*</span>
 

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

@@ -26,8 +26,8 @@
         <h4 class="input-label">
           <form-label [data]="{
             spec: spec,
-            isNew: current && current[entry.key] === undefined,
-            isEdited: entry.value.dirty
+            new: current && current[entry.key] === undefined,
+            edited: entry.value.dirty
           }"></form-label>
         </h4>
         <!-- string or number -->
@@ -73,8 +73,8 @@
         <ion-item-divider>
           <form-label [data]="{
             spec: spec,
-            isNew: current && current[entry.key] === undefined,
-            isEdited: entry.value.dirty
+            new: current && current[entry.key] === undefined,
+            edited: entry.value.dirty
           }"></form-label>
         </ion-item-divider>
         <!-- body -->
@@ -97,8 +97,8 @@
           <ion-item-divider>
             <form-label [data]="{
               spec: spec,
-              isNew: current && current[entry.key] === undefined,
-              isEdited: entry.value.dirty
+              new: current && current[entry.key] === undefined,
+              edited: entry.value.dirty
             }"></form-label>
             <ion-button fill="clear" color="primary" slot="end" (click)="addListItemWrapper(entry.key, spec)">
               <ion-icon slot="start" name="add"></ion-icon>
@@ -117,8 +117,9 @@
                 <ion-item button (click)="toggleExpand(entry.key, i)">
                   <form-label [data]="{
                     spec: $any({ name: objectListInfo[entry.key][i].displayAs || 'Entry ' + (i + 1) }),
-                    isNew: false,
-                    isEdited: abstractControl.dirty
+                    new: false,
+                    edited: abstractControl.dirty,
+                    invalid: abstractControl.invalid
                   }"></form-label>
                   <ion-icon
                     slot="end"
@@ -192,13 +193,13 @@
           <p class="input-label">
             <form-label [data]="{
               spec: spec,
-              isNew: current && current[entry.key] === undefined,
-              isEdited: entry.value.dirty
+              new: current && current[entry.key] === undefined,
+              edited: entry.value.dirty
             }"></form-label>
           </p>
           <!-- list -->
           <ion-item button detail="false" color="dark" (click)="presentModalEnumList(entry.key, $any(spec), formArr.value)">
-            <ion-label>
+            <ion-label style="white-space: nowrap !important;">
               <h2>{{ getEnumListDisplay(formArr.value, $any(spec.spec)) }}</h2>
             </ion-label>
             <ion-button slot="end" fill="clear" color="light">
@@ -211,7 +212,7 @@
         *ngIf="formGroup.get(entry.key).errors"
         [control]="$any(formGroup.get(entry.key))"
         [spec]="spec"
-        >
+      >
       </form-error>
     </ng-container>
   </div>

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

@@ -1,4 +1,4 @@
-.help-button {
+.slot-start {
   display: inline-block;
   vertical-align: middle;
 }

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

@@ -1,12 +1,12 @@
 import { Component, Input, Output, SimpleChange, EventEmitter } from '@angular/core'
-import { AbstractControl, AbstractFormGroupDirective, FormArray, FormGroup } from '@angular/forms'
+import { AbstractFormGroupDirective, FormArray, FormGroup } from '@angular/forms'
 import { AlertButton, AlertController, IonicSafeString, ModalController } from '@ionic/angular'
-import { ConfigSpec, ListValueSpecOf, ListValueSpecString, ValueSpec, ValueSpecBoolean, ValueSpecEnum, ValueSpecList, ValueSpecListOf, ValueSpecNumber, ValueSpecString, ValueSpecUnion } from 'src/app/pkg-config/config-types'
+import { ConfigSpec, ListValueSpecOf, ValueSpec, ValueSpecBoolean, ValueSpecList, ValueSpecListOf, ValueSpecUnion } from 'src/app/pkg-config/config-types'
 import { FormService } from 'src/app/services/form.service'
 import { Range } from 'src/app/pkg-config/config-utilities'
 import { EnumListPage } from 'src/app/modals/enum-list/enum-list.page'
-const Mustache = require('mustache')
 import { pauseFor } from 'src/app/util/misc.util'
+const Mustache = require('mustache')
 
 @Component({
   selector: 'form-object',
@@ -76,6 +76,7 @@ export class FormObjectComponent {
   addListItem (key: string, markDirty = true, val?: string): void {
     const arr = this.formGroup.get(key) as FormArray
     if (markDirty) arr.markAsDirty()
+    // @TODO why are these commented out?
     // const validators = this.formService.getListItemValidators(this.objectSpec[key] as ValueSpecList, key, arr.length)
     // arr.push(new FormControl(value, validators))
     const listSpec = this.objectSpec[key] as ValueSpecList
@@ -225,8 +226,9 @@ export class FormObjectComponent {
 
 interface HeaderData {
   spec: ValueSpec
-  isEdited: boolean
-  isNew: boolean
+  edited: boolean
+  new: boolean
+  invalid?: boolean
 }
 
 @Component({