warning messages up, remove bad vars from fields on save

legacy/A2J_Pages.js

@@ -459,6 +459,23 @@ var handleNullButtonTargets = function (buttons) {
   return buttons
 }
 
+// this clears vars and problem messages before save in QDE
+function checkPageHealth (page) {
+  var fields = page && page.fields
+  for (var field of fields) {
+    // no var assigned, clear any problem message
+    if (field.name === '') {
+      field.problem = ''
+      return
+    }
+    // bad var assigned, clear var name and problem message
+    if (field && field.problem.length !== 0) {
+      field.name = ''
+      field.problem = ''
+    }
+  }
+}
+
 // Bring page edit window forward with page content
 function gotoPageEdit (pageName) {
   $pageEditDialog = window.$('.page-edit-form')
@@ -487,6 +504,8 @@ function gotoPageEdit (pageName) {
     close: function () {
       // cleanup QDE resize eventListener
       window.removeEventListener('resize', debouncedSetQDEmaxHeight)
+      // check for mismatched field/variable types and clear assignments if `health problem`
+      checkPageHealth(page)
       // callback from open below
       this.removeOverlay()
       // Update view and save any time edit dialog closes

src/health-message/health-message.js

@@ -6,7 +6,9 @@ export const HealthMessageVM = DefineMap.extend('HealthMessageVM', {
   message: {
     type: 'text',
     default: ''
-  }
+  },
+
+  alertClass: {}
 })
 
 export default Component.extend({

src/health-message/health-message.stache

@@ -1,7 +1,15 @@
 <can-import from="./health-message.less" />
 
-<div class="problem alert-danger">
-  <span class="glyphicon-attention"></span>
-    {{message}}
-  <span class="glyphicon-attention"></span>
-</div>
+{{#is(alertClass , "warning")}}
+  <div class="problem alert-warning">
+    <span class="glyphicon-info-circled-1"></span>
+      {{message}}
+    <span class="glyphicon-info-circled-1"></span>
+  </div>
+{{else}}
+  <div class="problem alert-danger">
+    <span class="glyphicon-attention"></span>
+      {{message}}
+    <span class="glyphicon-attention"></span>
+  </div>
+{{/is}}

src/pages-tab/components/page-fields/page-fields.js

@@ -71,10 +71,28 @@ export const FieldVM = DefineMap.extend('FieldVM', {
     }
   },
 
+  get noVariableAssigned () {
+    return !this.name
+  },
+
+  get showVarRemovalMessage () {
+    return !this.noVariableAssigned && !this.hasValidTypes
+  },
+
+  get alertClass () {
+    return this.noVariableAssigned ? 'warning' : 'danger'
+  },
+
   get problemMessage () {
-    const message = this.hasValidType ? '' : `Field Type: (${this.field.type}) requires Variable Type: (${this.expectedVarType}), found Variable Type: (${this.varType})`
-    this.field.problem = message
-    return message
+    if (this.noVariableAssigned) {
+      return `No Variable Assigned -> Field Type: (${this.field.type}) requires Variable Type: (${this.expectedVarType})`
+    } else if (!this.hasValidTypes) {
+      this.field.problem = `Field Type: (${this.field.type}) requires Variable Type: (${this.expectedVarType}), found Variable Type: (${this.varType})`
+      return this.field.problem
+    }
+
+    this.field.problem = ''
+    return ''
   },
 
   types: {

src/pages-tab/components/page-fields/page-fields.stache

@@ -68,9 +68,9 @@
                 </div>
               </div>
               {{#not(fieldVM.hasValidTypes)}}
-                <health-message message:from="fieldVM.problemMessage"></health-message>
+              <health-message alertClass:from="fieldVM.alertClass" message:from="fieldVM.problemMessage"></health-message>
               {{/not}}
-              <var-picker-field appState:from="appState" filterText:bind="fieldVM.name" obj:bind="fieldVM.field" key:from="'name'" />
+              <var-picker-field showVarRemovalMessage:from="fieldVM.showVarRemovalMessage" appState:from="appState" filterText:bind="fieldVM.name" obj:bind="fieldVM.field" key:from="'name'" />
               {{#if(fieldVM.canDefaultValue)}}
                 <div class="editspan form-group" name="default">
                   <label class="control-label">Default Value:</label>

src/pages-tab/components/var-picker/field/var-picker-field.js

@@ -7,6 +7,7 @@ import { onlyOne } from '../../../helpers/helpers'
 export const VarPickerField = DefineMap.extend('VarPickerField', {
   page: {},
   appState: {},
+  showVarRemovalMessage: {},
   // obj[key] like button['name']
   obj: {
     type: 'any'
@@ -39,7 +40,6 @@ export const VarPickerField = DefineMap.extend('VarPickerField', {
     Object.assign(partialVariable, { name: this.filterText, type: 'Text' })
     const assignedVariable = validVarName ? this.appState.guide.vars[this.filterText.toLowerCase()] : partialVariable
 
-    console.log('assignedVariable', assignedVariable)
     return assignedVariable
   },
 
@@ -80,7 +80,6 @@ export const VarPickerField = DefineMap.extend('VarPickerField', {
   newVarData: {},
 
   onVariableChange (variable) {
-    console.log('onvarchange', variable)
     this.newVarData = variable
   },
 

src/pages-tab/components/var-picker/field/var-picker-field.stache

@@ -8,6 +8,9 @@
   {{let showVariableModal = newObservableBool(false)}}
   {{let showVariableEditModal = newObservableBool(false)}}
   <label class="control-label">{{label}}</label>
+  {{#if(showVarRemovalMessage)}}
+    <span class="alert-warning"> ( Warning! Mismatched Variable will be removed on Close/Save. ) </span>
+  {{/if}}
   <div class="form-group has-var-picker">
     <input
       class="

src/variables/editor/editor.js

@@ -21,7 +21,6 @@ export const VariableEditorVM = DefineMap.extend('VariableEditorVM', {
 
   initialVariable: {
     set (initialVariable) {
-      console.log('setting initial', initialVariable)
       const variable = initialVariable || {}
       this.variableName = variable.name
       this.variableType = variable.type