edit variable and add variable working

CCALI · Aug 27, 2024 · a69a2aa · a69a2aa
1 parent 0aaf80d
commit a69a2aa
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 6 deletions.
diff --git a/src/pages-tab/components/page-fields/page-fields.js b/src/pages-tab/components/page-fields/page-fields.js
@@ -45,7 +45,7 @@ export const FieldVM = DefineMap.extend('FieldVM', {
     return pageFieldsHelpers.getExpectedVarType(this.type)
   },
 
-  hasValidType: {
+  hasValidTypes: {
     value ({ listenTo, resolve }) {
       let fieldType = this.type && this.type.toLowerCase()
       let varType = this.varType && this.varType.toLowerCase()

diff --git a/src/pages-tab/components/page-fields/page-fields.stache b/src/pages-tab/components/page-fields/page-fields.stache
@@ -67,7 +67,7 @@
                   </select>
                 </div>
               </div>
-              {{#not(fieldVM.hasValidType)}}
+              {{#not(fieldVM.hasValidTypes)}}
                 <health-message message:from="fieldVM.problemMessage"></health-message>
               {{/not}}
               <var-picker-field appState:from="appState" filterText:bind="fieldVM.name" obj:bind="fieldVM.field" key:from="'name'" />

diff --git a/src/pages-tab/components/var-picker/field/var-picker-field.js b/src/pages-tab/components/var-picker/field/var-picker-field.js
@@ -33,6 +33,20 @@ export const VarPickerField = DefineMap.extend('VarPickerField', {
     default: ''
   },
 
+  get assignedVariable () {
+    const validVarName = this.validVarName(this.filterText)
+    const partialVariable = new TVariable()
+    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
+  },
+
+  get blankVariable () {
+    return new TVariable()
+  },
+
   newObservableBool (tf = false) {
     return new DefineMap({ value: tf })
   },
@@ -66,6 +80,7 @@ export const VarPickerField = DefineMap.extend('VarPickerField', {
   newVarData: {},
 
   onVariableChange (variable) {
+    console.log('onvarchange', variable)
     this.newVarData = variable
   },
 
@@ -76,7 +91,7 @@ export const VarPickerField = DefineMap.extend('VarPickerField', {
     }
   },
 
-  addVarCB (bool) {
+  addEditVarCB (bool) {
     return () => {
       const variable = this.newVarData
       const name = variable && variable.name

diff --git a/src/pages-tab/components/var-picker/field/var-picker-field.stache b/src/pages-tab/components/var-picker/field/var-picker-field.stache
@@ -6,6 +6,7 @@
 <div class="divvariable auto-close-shared-bool-on-outside-focus">
   {{let nameVarPickerVisible = newObservableBool(false)}}
   {{let showVariableModal = newObservableBool(false)}}
+  {{let showVariableEditModal = newObservableBool(false)}}
   <label class="control-label">{{label}}</label>
   <div class="form-group has-var-picker">
     <input
@@ -28,6 +29,11 @@
         <var-picker appState:from="appState" varName:bind="filterText" selectedCallback:from="nameVarPickerVisible.value = false" />
       {{/if}}
     </div>
+    <div class="var-picker-edit">
+      <button class="newvar-button btn btn-default btn-wide-sm" on:click="makeTrueAndFocusPopup(showVariableEditModal)" style="margin-top: 4px;">
+        <span class="glyphicon-plus" aria-hidden="true"></span> Edit Current
+      </button>
+    </div>
     <div class="var-picker-add">
       <button class="newvar-button btn btn-default btn-wide-sm" on:click="makeTrueAndFocusPopup(showVariableModal)" style="margin-top: 4px;">
         <span class="glyphicon-plus" aria-hidden="true"></span> Add New
@@ -37,13 +43,33 @@
 
   {{#if(showVariableModal.value)}}
     <author-modal
-      modalTitle:raw="Add New Variable"
+      modalTitle:raw="Add Variable"
       cancelText:raw="Cancel"
       submitText:raw="Save"
       onCancel:from="makeFalseAndClearDataCB(showVariableModal)"
-      onSubmit:from="addVarCB(showVariableModal)"
+      onSubmit:from="addEditVarCB(showVariableModal)"
     >
-      <variable-editor showUsageFinder:from="{{false}}" onVariableChange:from="onVariableChange" />
+      <variable-editor 
+        initialVariable:from="blankVariable" 
+        showUsageFinder:from="{{false}}" 
+        onVariableChange:from="onVariableChange" 
+      />
     </author-modal>
   {{/if}}
+
+  {{#if(showVariableEditModal.value)}}
+    <author-modal
+      modalTitle:raw="Edit Variable"
+      cancelText:raw="Cancel"
+      submitText:raw="Save"
+      onCancel:from="makeFalseAndClearDataCB(showVariableEditModal)"
+      onSubmit:from="addEditVarCB(showVariableEditModal)"
+    >
+      <variable-editor
+        initialVariable:from="assignedVariable"
+        showUsageFinder:raw="true"
+        onVariableChange:from="onVariableChange"
+      />
+    </author-modal>
+{{/if}}
 </div>