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"
+        ng-model="variables.value"
-        name="variables"
+        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>

awx/ui/client/src/inventories-hosts/inventories/standard-inventory/edit/inventory-edit.controller.js

@@ -40,12 +40,12 @@ function InventoriesEdit($scope, $location,
         $scope.instance_groups = InstanceGroupsData;
         $scope.canRemediate = CanRemediate;
 
-        ParseTypeChange({
+        // ParseTypeChange({
-            scope: $scope,
+        //     scope: $scope,
-            variable: 'inventory_variables',
+        //     variable: 'inventory_variables',
-            parse_variable: 'parseType',
+        //     parse_variable: 'parseType',
-            field_id: 'inventory_inventory_variables'
+        //     field_id: 'inventory_inventory_variables'
-        });
+        // });
 
         OrgAdminLookup.checkForRoleLevelAdminAccess(inventoryData.organization, 'inventory_admin_role')
             .then(function(canEditOrg){

awx/ui/client/src/inventories-hosts/inventories/standard-inventory/inventory.form.js

@@ -66,13 +66,27 @@ function(i18n) {
                 dataContainer: 'body',
                 control: '<instance-groups-multiselect instance-groups="instance_groups" field-is-disabled="!(inventory_obj.summary_fields.user_capabilities.edit || canAdd)"></instance-groups-multiselect>',
             },
+            // inventory_variables: {
+            //     realName: 'variables',
+            //     label: i18n._('Variables'),
+            //     type: 'textarea',
+            //     class: 'Form-formGroup--fullWidth',
+            //     rows: 6,
+            //     "default": "---",
+            //     awPopOver: i18n._('Enter inventory variables using either JSON or YAML syntax. Use the radio button to toggle between the two. Refer to the Ansible Tower documentation for example syntax.'),
+            //     dataTitle: i18n._('Variables'),
+            //     dataPlacement: 'right',
+            //     dataContainer: 'body',
+            //     ngDisabled: '!(inventory_obj.summary_fields.user_capabilities.edit || canAdd)' // TODO: get working
+            // },
             inventory_variables: {
                 realName: 'variables',
                 label: i18n._('Variables'),
-                type: 'textarea',
+                type: 'code_mirror',
                 class: 'Form-formGroup--fullWidth',
                 rows: 6,
                 "default": "---",
+                variables: 'inventory_variables',
                 awPopOver: i18n._('Enter inventory variables using either JSON or YAML syntax. Use the radio button to toggle between the two. Refer to the Ansible Tower documentation for example syntax.'),
                 dataTitle: i18n._('Variables'),
                 dataPlacement: 'right',

awx/ui/client/src/shared/form-generator.js

@@ -1364,6 +1364,17 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
                         html += "</div>\n";
                     }
 
+                    if (field.type === 'code_mirror') {
+                        html += '<at-code-mirror ';
+                        html += `id="${form.name}_${fld}" `;
+                        html += `class="${field.class}" `;
+                        html += `label="${field.label}" `;
+                        html += `tooltip="${field.awPopOver}" `;
+                        html += `name="${field.realName}" `;
+                        html += `variables="{{ ${field.variables} }}" `;
+                        html += '></at-code-mirror>';
+                    }
+
                     if (field.type === 'custom') {
                         let labelOptions = {};