trying to make codemirror editable

awx/ui/client/lib/components/code-mirror/code-mirror.directive.js

@@ -11,21 +11,30 @@ function atCodeMirrorController (
     ParseVariableString
 ) {
     const vm = this;
-    const variables = `${$scope.name}_variables`;
+    const variablesName = `${$scope.name}_variables`;
     function init (vars, name) {
+        console.log('init', $scope, vars);
         if ($scope.disabled === 'true') {
             $scope.disabled = true;
         } else if ($scope.disabled === 'false') {
             $scope.disabled = false;
         }
-        $scope[variables] = ParseVariableString(_.cloneDeep(vars));
+        $scope.variablesName = variablesName;
+        // $scope[variablesName] = ParseVariableString(_.cloneDeep(vars));
+        $scope.variables = {
+            value: ParseVariableString(_.cloneDeep(vars)),
+        };
+        $scope.value = $scope.variables.value;
         $scope.parseType = ParseType;
         const options = {
             scope: $scope,
-            variable: variables,
+            variable: 'value', // variablesName,
             parse_variable: ParseVariable,
             field_id: name,
-            readOnly: $scope.disabled
+            readOnly: $scope.disabled,
+            onChange: (value) => {
+                console.log('change', value);
+            },
         };
         ParseTypeChange(options);
     }
@@ -41,7 +50,7 @@ function atCodeMirrorController (
         vm.expanded = false;
     }
 
-    vm.variables = variables;
+    // vm.variablesName = variablesName;
     vm.name = $scope.name;
     vm.modalName = `${vm.name}_modal`;
     vm.strings = strings;

awx/ui/client/lib/components/code-mirror/code-mirror.partial.html

@@ -44,15 +44,15 @@
     <textarea
         ng-disabled="disabled"
         rows="6"
-        ng-model="variables"
-        name="variables"
+        ng-model="variables.value"
+        name="variablesName"
         class="form-control Form-textArea"
         id="{{ vm.name }}">
     </textarea>
     <at-code-mirror-modal
         name="{{ vm.modalName }}"
         ng-if="vm.expanded"
-        variables="{{ variables }}"
+        variables="variables"
         tooltip="{{ tooltip || vm.strings.get('code_mirror.tooltip.TOOLTIP') }}"
         label="{{ label || vm.strings.get('code_mirror.label.VARIABLES') }}"
         disabled="{{ disabled || false }}"

awx/ui/client/lib/components/code-mirror/modal/code-mirror-modal.directive.js

@@ -11,10 +11,10 @@ function atCodeMirrorModalController (
     $scope,
     strings,
     ParseTypeChange,
-    ParseVariableString
+    // ParseVariableString
 ) {
     const vm = this;
-    const variables = `${$scope.name}_variables`;
+    const variablesName = `${$scope.name}_variables`;
     function resize () {
         if ($scope.disabled === 'true') {
             $scope.disabled = true;
@@ -28,7 +28,7 @@ function atCodeMirrorModalController (
     }
 
     function toggle () {
-        $scope.parseTypeChange('parseType', variables);
+        $scope.parseTypeChange('parseType', variablesName);
         setTimeout(resize, 0);
     }
 
@@ -39,11 +39,12 @@ function atCodeMirrorModalController (
             $scope.disabled = false;
         }
         $(CodeMirrorModalID).modal('show');
-        $scope[variables] = ParseVariableString(_.cloneDeep(vars));
+        // $scope[variablesName] = ParseVariableString(_.cloneDeep(vars));
         $scope.parseType = ParseType;
+        $scope.value = $scope.variables.value;
         const options = {
             scope: $scope,
-            variable: variables,
+            variable: 'value', // variablesName,
             parse_variable: ParseVariable,
             field_id: name,
             readOnly: $scope.disabled
@@ -58,15 +59,19 @@ function atCodeMirrorModalController (
         $(`${CodeMirrorModalID} .modal-dialog`).on('resize', resize);
     }
 
-    vm.variables = variables;
+    vm.variablesName = variablesName;
     vm.name = $scope.name;
     vm.strings = strings;
     vm.toggle = toggle;
+    $scope.close = () => {
+        $scope.variables.value = $scope.value;
+        $scope.closeFn();
+    };
     if ($scope.init) {
         $scope.init = init;
     }
     angular.element(document).ready(() => {
-        init($scope.variables, $scope.name);
+        init($scope.variablesName, $scope.name);
     });
 }
 
@@ -90,7 +95,7 @@ function atCodeMirrorModal () {
             label: '@',
             labelClass: '@',
             tooltip: '@',
-            variables: '@',
+            variables: '=',
             name: '@',
             closeFn: '&'
         }

awx/ui/client/lib/components/code-mirror/modal/code-mirror-modal.partial.html

@@ -46,13 +46,16 @@
                         <div class="at-RowItem-tag at-RowItem-tag--header atCodeMirror-badge" ng-show="disabled === 'true' || disabled === true">
                             {{ vm.strings.get('label.READONLY')}}
                         </div>
-                        <button type="button" class="close" ng-click="closeFn()">
+                        <button type="button" class="close" ng-click="close()">
                             <i class="fa fa-times-circle"></i>
                         </button>
                     </div>
                 </div>
             </div>
             <div class="modal-body">
+                {{extra_variables}}
+                :
+                {{variables.value}}
                 <textarea
                     ng-disabled="disabled"
                     ng-model="extra_variables"
@@ -63,7 +66,7 @@
             </div>
             <div class="modal-footer">
                 <div class="CodeMirror-modalControls">
-                    <button ng-click="closeFn()" class="btn btn-sm btn-default">Close</button>
+                    <button ng-click="close()" class="btn btn-sm btn-default">Close</button>
                 </div>
             </div>
         </div>