New Provider form & controller improvements

Signed-off-by: Vojtech Szocs <vojtech.szocs@gmail.com>

app/javascript/forms-common/defaultFormController.ts

@@ -1,33 +1,32 @@
 import { getStore, addReducer, applyReducerHash } from '../miq-redux/redux-client';
-import { MiqStore, IMiqReducerHash, AppState, IMiqAction } from '../miq-redux/redux-types';
+import { AppState, MiqStore, IMiqReducerHash, IMiqAction } from '../miq-redux/redux-types';
 
-export interface IUnbindReduxReducers {
-  redux?: () => void;
+interface IUnbindRedux {
+  store?: () => void;
   reducer?: () => void;
 }
 
 export abstract class DefaultFormController {
-  protected unbind: IUnbindReduxReducers = {};
-  protected reduxStore: MiqStore;
+  protected store: MiqStore;
+  private unbind: IUnbindRedux = {};
 
-  constructor(reducersHash?: IMiqReducerHash) {
-    if (reducersHash) {
+  constructor(reducers?: IMiqReducerHash) {
+    this.store = getStore();
+    this.unbind.store = this.store.subscribe(() => this.updateFromStore());
+
+    if (reducers) {
       this.unbind.reducer = addReducer(
-        (state: AppState, action: IMiqAction) => applyReducerHash(reducersHash, state, action)
+        (state: AppState, action: IMiqAction) => applyReducerHash(reducers, state, action)
       );
     }
-    this.reduxStore = getStore();
-    this.unbind.redux = this.reduxStore.subscribe(() => this.updateStore());
   }
 
-  protected updateStore() {
-    throw new Error('Controller should implement updateStore method');
+  public updateFromStore() {
+    throw new Error('Controller should implement updateFromStore method');
   }
 
   public $onDestroy() {
-    this.unbind.redux();
-    if (this.unbind.reducer) {
-      this.unbind.reducer();
-    }
+    this.unbind.store();
+    this.unbind.reducer && this.unbind.reducer();
   }
 }

app/javascript/middleware/forms/index.ts

@@ -1,3 +1,3 @@
-import NewProviderForm from './new';
+import NewProviderForm from './new-provider';
 
 ManageIQ.angular.app.component('newProviderForm', new NewProviderForm());

app/javascript/middleware/forms/new-provider-action.ts

@@ -0,0 +1,17 @@
+import { IMiqAction } from '../../miq-redux/redux-types';
+
+export const INIT_NEW_PROVIDER = 'INIT_NEW_PROVIDER_HAWKULAR'
+export const UPDATE_NEW_PROVIDER = 'UPDATE_NEW_PROVIDER_HAWKULAR';
+
+export function initNewProvider(): IMiqAction {
+  return {
+    type: INIT_NEW_PROVIDER
+  };
+}
+
+export function updateNewProvider(payload: Object): IMiqAction {
+  return {
+    type: UPDATE_NEW_PROVIDER,
+    payload
+  };
+}

app/javascript/middleware/forms/new-provider-reducer.ts

@@ -1,37 +1,36 @@
-import { AppState, IMiqReducerHash } from '../../miq-redux/redux-types';
-import { merge, defaultsDeep } from 'lodash';
+import { AppState, IMiqAction, IMiqReducerHash } from '../../miq-redux/redux-types';
+import { INIT_NEW_PROVIDER, UPDATE_NEW_PROVIDER } from './new-provider-action';
+import { defaultsDeep, merge } from 'lodash';
 
-export const INIT_NEW_PROVIDER: string = 'INIT_NEW_PROVIDER_HAWKULAR'
-export const UPDATE_NEW_PROVIDER = 'UPDATE_NEW_PROVIDER_HAWKULAR';
-
-function initNewProvider(state, action): AppState {
-  const newProvider = {
-    providers: {
-      middleware: {
-        hawkular: {
-          newProvider: {
-            name: '',
-            type: undefined
+function initNewProvider(state: AppState, action: IMiqAction): AppState {
+  return {
+    ...defaultsDeep(state, {
+      providers: {
+        middleware: {
+          hawkular: {
+            newProvider: {
+              name: '',
+              type: undefined
+            }
           }
         }
       }
-    }
-  };
-  return { ...defaultsDeep(state, newProvider) }
+    })
+  }
 }
 
-function updateNewProvider(state, action): AppState {
-  const newProvider = {
-    providers: {
-      middleware: {
-        hawkular: {
-          newProvider: action.payload
+function updateNewProvider(state: AppState, action: IMiqAction): AppState {
+  return {
+    ...merge(state, {
+      providers: {
+        middleware: {
+          hawkular: {
+            newProvider: action.payload
+          }
         }
       }
-    }
-  };
-  console.log({ ...merge(state, newProvider) });
-  return { ...merge(state, newProvider) }
+    })
+  }
 }
 
 export const reducers: IMiqReducerHash = {

app/javascript/middleware/forms/new.ts → app/javascript/middleware/forms/new-provider.ts

@@ -1,5 +1,6 @@
 import * as ng from 'angular';
-import { INIT_NEW_PROVIDER, reducers, UPDATE_NEW_PROVIDER } from './new-provider-reducer';
+import { initNewProvider, updateNewProvider } from './new-provider-action';
+import { reducers } from './new-provider-reducer';
 import { DefaultFormController } from '../../forms-common/defaultFormController';
 
 export default class NewProviderForm implements ng.IComponentOptions {
@@ -9,17 +10,17 @@ export default class NewProviderForm implements ng.IComponentOptions {
   public bindings: any = {
     types: '<',
     formFieldsUrl: '@',
-    novalidate: '@',
-    createUrl: '@'
+    createUrl: '@',
+    novalidate: '@'
   };
 }
 
 class NewProviderController extends DefaultFormController {
-  public types: any[];
-  public newProvider: any;
+  private componentState: Object;
+  private types: Array<any>;
   private formFieldsUrl: string;
-  private novalidate: boolean;
   private createUrl: string;
+  private novalidate: boolean;
   private selects: NodeListOf<HTMLSelectElement>;
 
   public static $inject = ['$element', '$scope'];
@@ -28,18 +29,18 @@ class NewProviderController extends DefaultFormController {
     super(reducers);
   }
 
-  public updateStore() {
-    const currState: any = this.reduxStore.getState();
-    this.newProvider = { ...currState.providers.middleware.hawkular.newProvider };
+  public updateFromStore() {
+    const currState: any = this.store.getState();
+    this.componentState = { ...currState.providers.middleware.hawkular.newProvider };
   }
 
   public $onInit() {
     this.selects = this.$element.querySelectorAll('select');
-    this.reduxStore.dispatch({ type: INIT_NEW_PROVIDER });
+    this.store.dispatch(initNewProvider());
     setTimeout(() => (<any>angular.element(this.selects)).selectpicker('refresh'));
   }
 
-  public onChangedProvider() {
-    this.reduxStore.dispatch({ type: UPDATE_NEW_PROVIDER, payload: this.newProvider });
+  public onDataChange() {
+    this.store.dispatch(updateNewProvider(this.componentState));
   }
 }

app/views/static/middleware/new-provider.html.haml

@@ -6,21 +6,21 @@
       %input.form-control{"type"        => "text",
                           "id"          => "ems_name",
                           "name"        => "name",
-                          "ng-model"    => "newProv.newProvider.name",
-                          "ng-change"   => "newProv.onChangedProvider()",
-                          "ng-value"    => "newProv.newProvider.name",
+                          "ng-model"    => "newProv.componentState.name",
+                          "ng-value"    => "newProv.componentState.name",
+                          "ng-change"   => "newProv.onDataChange()",
                           "auto-focus"  => ""}
   .form-group
     %label.col-md-2.control-label{"for" => "ems_type"}
       = _('Type')
     .col-md-8
       %select{"ng-options"=>"type[1] as type[0] for type in newProv.types track by type[1]",
-              "ng-model"  => "newProv.newProvider.type",
-              "ng-value"  => "newProv.newProvider.type",
-              "ng-change" => "newProv.onChangedProvider()",
+              "ng-model"  => "newProv.componentState.type",
+              "ng-value"  => "newProv.componentState.type",
+              "ng-change" => "newProv.onDataChange()",
               "selectpicker-for-select-tag" => ""}
 
-      -# %pf-select{"ng-model"                    => "newProv.newProvider.type",
-      -#            "ng-change"                   => "newProv.onChangedProvider()",
+      -# %pf-select{"ng-model"                    => "newProv.componentState.type",
+      -#            "ng-change"                   => "newProv.onDataChange()",
       -#            "id"                          => "ems_type",
       -#            "options"=>"newProv.types"}