From 1409a5596746cb175f60cf57c06e030639232777 Mon Sep 17 00:00:00 2001
From: Drew Bomhof <dbomhof@redhat.com>
Date: Mon, 12 Feb 2018 14:35:08 -0500
Subject: [PATCH] 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 |  1 +
 .../modalFieldTemplateComponent.ts            |  1 +
 .../modal-field-template/tag-control.html     |  1 +
 .../components/modal-field/field.html         |  1 +
 .../components/modal/modalComponent.spec.ts   | 28 +++++++++++++++++++
 .../components/modal/modalComponent.ts        | 17 +++++++++++
 6 files changed, 49 insertions(+)
 create mode 100644 src/dialog-editor/components/modal/modalComponent.spec.ts

diff --git a/src/dialog-editor/components/abstractModal.ts b/src/dialog-editor/components/abstractModal.ts
index b0d648c04e..57532dd7c9 100644
--- a/src/dialog-editor/components/abstractModal.ts
+++ b/src/dialog-editor/components/abstractModal.ts
@@ -26,6 +26,7 @@ export default class AbstractModal {
     addEntry: '=?',
     removeEntry: '=?',
     currentCategoryEntries: '=?',
+    setupCategoryOptions: '=?',
     resolveCategories: '=?',
     modalTabIsSet: '<',
     modalTabSet: '<',
diff --git a/src/dialog-editor/components/modal-field-template/modalFieldTemplateComponent.ts b/src/dialog-editor/components/modal-field-template/modalFieldTemplateComponent.ts
index 459900fee4..326b284363 100644
--- a/src/dialog-editor/components/modal-field-template/modalFieldTemplateComponent.ts
+++ b/src/dialog-editor/components/modal-field-template/modalFieldTemplateComponent.ts
@@ -47,6 +47,7 @@ export default class ModalFieldTemplate {
     addEntry: '=?',
     removeEntry: '=?',
     currentCategoryEntries: '=?',
+    setupCategoryOptions: '=?',
     resolveCategories: '=?',
     modalTabIsSet: '<',
     modalTab: '=',
diff --git a/src/dialog-editor/components/modal-field-template/tag-control.html b/src/dialog-editor/components/modal-field-template/tag-control.html
index f6275c6e04..d719a4a1ef 100644
--- a/src/dialog-editor/components/modal-field-template/tag-control.html
+++ b/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>
diff --git a/src/dialog-editor/components/modal-field/field.html b/src/dialog-editor/components/modal-field/field.html
index b1b727a10e..282f2d5654 100644
--- a/src/dialog-editor/components/modal-field/field.html
+++ b/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">
diff --git a/src/dialog-editor/components/modal/modalComponent.spec.ts b/src/dialog-editor/components/modal/modalComponent.spec.ts
new file mode 100644
index 0000000000..c7e98a3563
--- /dev/null
+++ b/src/dialog-editor/components/modal/modalComponent.spec.ts
@@ -0,0 +1,28 @@
+describe('modalComponentSpec', () => {
+  let bindings;
+  describe('controller', () => {
+    let modalComponent;
+
+    beforeEach(() => {
+      bindings = {
+      modalData: { categories: [{'resources': [{'id': '10', 'description': 'Category'}] }] }
+      };
+      angular.mock.module('miqStaticAssets.dialogEditor');
+      angular.mock.module('miqStaticAssets.API');
+      angular.mock.module('ui.bootstrap');
+      angular.mock.inject($componentController => {
+        modalComponent = $componentController('dialogEditorModal', null, bindings);
+        modalComponent.$onInit();
+      });
+    });
+
+    describe('#setupCategoryOptions', () => {
+      it('sets the id, name and description entries for the selected tag control', () => {
+        modalComponent.setupCategoryOptions();
+        expect(modalComponent.modalData.options.category_id).toEqual('10');
+        expect(modalComponent.modalData.options.category_name).toEqual('category_name');
+        expect(modalComponent.modalData.options.category_description).toEqual('Category');
+      });
+    });
+  });
+});
diff --git a/src/dialog-editor/components/modal/modalComponent.ts b/src/dialog-editor/components/modal/modalComponent.ts
index a7e8cbceb4..c0d016ce5a 100644
--- a/src/dialog-editor/components/modal/modalComponent.ts
+++ b/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}>`;
   }
 }