Refine input styling and form registration

awx/ui/client/lib/components/form/action.directive.js

@@ -1,18 +1,20 @@
-function link (scope, el, attrs, controllers) {
+function link (scope, element, attrs, controllers) {
     let formController = controllers[0];
     let actionController = controllers[1];
 
-    actionController.init(formController, scope);
+    actionController.init(formController, element, scope);
 }
 
 function atFormActionController ($state) {
     let vm = this || {};
 
+    let element;
     let form;
     let scope;
 
-    vm.init = (_form_, _scope_) => {
+    vm.init = (_form_, _element_, _scope_) => {
         form = _form_;
+        element = _element_;
         scope = _scope_;
 
         switch(scope.type) {
@@ -26,7 +28,7 @@ function atFormActionController ($state) {
                 vm.setCustomDefaults();
         }
 
-        form.use('action', scope);
+        form.register('action', scope);
     };
 
     vm.setCustomDefaults = () => {
@@ -44,6 +46,7 @@ function atFormActionController ($state) {
         scope.text = 'SAVE';
         scope.fill = '';
         scope.color = 'green';
+        scope.action = () => form.submit();
     };
 }
 

awx/ui/client/lib/components/form/form.directive.js

@@ -1,28 +1,70 @@
-function AtFormController () {
+function atFormLink (scope, el, attrs, controllers) {
+    let formController = controllers[0];
+    let form = el[0];
+
+    formController.init(scope, form);
+}
+
+function AtFormController (eventService) {
     let vm = this || {};
 
-    vm.components = [];
+    let scope;
+    let form;
 
+    vm.components = [];
     vm.state = {
         isValid: false
     };
 
-    vm.use = (type, component, el) => { 
-        return vm.trackComponent(type, component, el);
+    vm.init = (_scope_, _form_) => {
+        scope = _scope_;
+        form = _form_;
+
+        vm.setListeners();
     };
 
-    vm.trackComponent = (type, component) => {
-        component.type = type;
+    vm.register = (category, component, el) => { 
+        component.category = category;
         component.form = vm.state;
 
+        if (category === 'input') {
+            component.state.index = vm.components.length;
+        }
+
         vm.components.push(component)
     };
 
+    vm.setListeners = () => {
+        let listeners = eventService.addListeners([
+            [form, 'keypress', vm.submitOnEnter]
+        ]);
+
+        scope.$on('$destroy', () => eventService.remove(listeners));
+    };
+
+    vm.submitOnEnter = event => {
+        if (event.key !== 'Enter') {
+            return;
+        }
+
+        event.preventDefault();
+        
+        vm.submit();
+    };
+
+    vm.submit = event => {
+        if (!vm.state.isValid) {
+            return;
+        }
+
+        console.log('submit', event, vm.components);
+    };
+
     vm.validate = () => {
         let isValid = true;
 
         for (let i = 0; i < vm.components.length; i++) {
-            if (vm.components[i].type !== 'input') {
+            if (vm.components[i].category !== 'input') {
                 continue;
             }
 
@@ -43,19 +85,28 @@ function AtFormController () {
         }
     };
 
-    vm.remove = id => {
-        delete inputs[id];
+    vm.deregisterDynamicComponents = components => {
+        let offset = 0;
+
+        components.forEach(component => {
+            vm.components.splice(component.index - offset, 1);
+            offset++;
+        });
     };
 }
 
+AtFormController.$inject = ['EventService'];
+
 function atForm (pathService) {
     return {
         restrict: 'E',
         replace: true,
         transclude: true,
+        require: ['atForm'],
         templateUrl: pathService.getPartialPath('components/form/form'),
         controller: AtFormController,
         controllerAs: 'vm',
+        link: atFormLink,
         scope: {
             state: '='
         }