Set ng-change for tag control options

Create a function setupCategoryOptions to be called on ng-change

https://bugzilla.redhat.com/show_bug.cgi?id=1542590

src/dialog-editor/components/abstractModal.ts

@@ -26,6 +26,7 @@ export default class AbstractModal {
     addEntry: '=?',
     removeEntry: '=?',
     currentCategoryEntries: '=?',
+    setupCategoryOptions: '=?',
     resolveCategories: '=?',
     modalTabIsSet: '<',
     modalTabSet: '<',

src/dialog-editor/components/modal-field-template/modalFieldTemplateComponent.ts

@@ -47,6 +47,7 @@ export default class ModalFieldTemplate {
     addEntry: '=?',
     removeEntry: '=?',
     currentCategoryEntries: '=?',
+    setupCategoryOptions: '=?',
     resolveCategories: '=?',
     modalTabIsSet: '<',
     modalTab: '=',

src/dialog-editor/components/modal-field-template/tag-control.html

@@ -23,6 +23,7 @@
     </div>
     <div pf-form-group pf-label="{{'Category'|translate}}">
       <select class="form-control" pf-select
+              ng-change="vm.setupCategoryOptions()"
               ng-model="vm.modalData.options.category_id"
               ng-options="category.id.toString() as category.description for category in vm.categories.resources">
         <option selected="selected" value="" translate>None</option>

src/dialog-editor/components/modal-field/field.html

@@ -150,6 +150,7 @@ <h4 class="modal-title" id="myModalLabel" translate>Edit Field Details</h4>
                                         modal-tab-is-set="vm.modalTabIsSet"
                                         modal-tab="vm.modalTab"
                                         current-category-entries="vm.currentCategoryEntries"
+                                        setup-category-options="vm.setupCategoryOptions"
                                         categories="vm.categories"
                                         resolve-categories="vm.resolveCategories"
                                         modal-data="vm.modalData">

src/dialog-editor/components/modal/modalComponent.spec.ts

@@ -0,0 +1,26 @@
+describe('modalComponentSpec', () => {
+  let bindings;
+  describe('controller', () => {
+    let modalComponent;
+
+    beforeEach(() => {
+      bindings = {
+        modalData: { options: { category_id: '10' } }
+      };
+      angular.mock.module('miqStaticAssets.dialogEditor');
+      angular.mock.module('ui.bootstrap');
+      angular.mock.inject($componentController => {
+      modalComponent = $componentController('dialogEditorModal', {API: {} }, bindings);
+      });
+    });
+
+    describe('#setupCategoryOptions', () => {
+      it('sets the id, name and description entries for the selected tag control', () => {
+        modalComponent.categories = { resources : [{'id': '10', 'description': 'CategoryName'}] };
+        modalComponent.setupCategoryOptions();
+        expect(modalComponent.modalData.options.category_name).toEqual('category_name');
+        expect(modalComponent.modalData.options.category_description).toEqual('CategoryName');
+      });
+    });
+  });
+});

src/dialog-editor/components/modal/modalComponent.ts

@@ -241,6 +241,22 @@ class ModalController {
     }
   }
 
+  /**
+   * Finds entries for the selected TagControl and sets them.
+   * @memberof ModalController
+   * @function setupCategoryOptions
+   */
+  public setupCategoryOptions() {
+    let vm = this;
+    let item = this.modalData.options.category_id;
+    _.forEach(this.categories.resources, function (name) {
+      if(name['id'] === item) {
+        vm.modalData.options.category_description = name['description'];
+        vm.modalData.options.category_name = _.snakeCase(name['description']);
+      }
+    });
+  }
+
   /**
    * Receives specification of which modal should be created and it's
    * parameters, sets default tab, loads the data of the element edited in modal
@@ -289,6 +305,7 @@ class ModalController {
       tree-selector-show="modalCtrl.parent.treeSelectorShow"
       tree-selector-include-domain="modalCtrl.parent.treeSelectorIncludeDomain"
       on-select="modalCtrl.parent.onSelect"
+      setup-category-options="modalCtrl.parent.setupCategoryOptions"
       ></${component}>`;
   }
 }