add file input component

awx/ui/client/lib/components/components.strings.js

@@ -16,6 +16,10 @@ function ComponentsStrings (BaseString) {
         INVALID_INPUT: t.s('Invalid input for this type.')
     };
 
+    ns.file = {
+        PLACEHOLDER: t.s('CHOOSE A FILE')
+    };
+
     ns.form = {
         SUBMISSION_ERROR_TITLE: t.s('Unable to Submit'),
         SUBMISSION_ERROR_MESSAGE: t.s('Unexpected server error. View the console for more information'),

awx/ui/client/lib/components/index.js

@@ -5,6 +5,7 @@ import divider from '~components/utility/divider.directive';
 import form from '~components/form/form.directive';
 import formAction from '~components/form/action.directive';
 import inputCheckbox from '~components/input/checkbox.directive';
+import inputFile from '~components/input/file.directive';
 import inputGroup from '~components/input/group.directive';
 import inputLabel from '~components/input/label.directive';
 import inputLookup from '~components/input/lookup.directive';
@@ -41,6 +42,7 @@ angular
     .directive('atForm', form)
     .directive('atFormAction', formAction)
     .directive('atInputCheckbox', inputCheckbox)
+    .directive('atInputFile', inputFile)
     .directive('atInputGroup', inputGroup)
     .directive('atInputLabel', inputLabel)
     .directive('atInputLookup', inputLookup)

awx/ui/client/lib/components/input/_index.less

@@ -15,6 +15,10 @@
         border-color: @at-color-input-focus;
     }
 
+    &[readonly] {
+        background: @at-color-input-readonly;
+    }
+
     &[disabled] {
         background: @at-color-input-disabled;
     }

awx/ui/client/lib/components/input/file.directive.js

@@ -0,0 +1,94 @@
+const templateUrl = require('~components/input/file.partial.html');
+
+function atInputFileLink (scope, element, attrs, controllers) {
+    const formController = controllers[0];
+    const inputController = controllers[1];
+
+    if (scope.tab === '1') {
+        element.find('input')[0].focus();
+    }
+
+    inputController.init(scope, element, formController);
+}
+
+function AtInputFileController (baseInputController, eventService) {
+    const vm = this || {};
+
+    let input;
+    let scope;
+
+    vm.init = (_scope_, element, form) => {
+        baseInputController.call(vm, 'input', _scope_, element, form);
+
+        scope = _scope_;
+        [input] = element.find('input');
+
+        vm.listeners = vm.setFileListeners(input);
+
+        vm.check();
+    };
+
+    vm.onButtonClick = () => {
+        if (scope.state._value) {
+            vm.removeFile();
+        } else {
+            input.click();
+        }
+    };
+
+    vm.setFileListeners = inputEl => eventService.addListeners([
+        [inputEl, 'change', event => vm.handleFileChangeEvent(inputEl, event)]
+    ]);
+
+    vm.handleFileChangeEvent = (element, event) => {
+        if (element.files.length > 0) {
+            const reader = new FileReader();
+
+            reader.onload = () => vm.readFile(reader, event);
+            reader.readAsText(element.files[0]);
+        } else {
+            scope.$apply(vm.removeFile);
+        }
+    };
+
+    vm.readFile = (reader, event) => {
+        scope.$apply(() => {
+            scope.state._value = reader.result;
+            scope.state._displayValue = event.target.files[0].name;
+
+            vm.check();
+        });
+    };
+
+    vm.removeFile = () => {
+        delete scope.state._value;
+        delete scope.state._displayValue;
+
+        input.value = '';
+    };
+}
+
+AtInputFileController.$inject = [
+    'BaseInputController',
+    'EventService'
+];
+
+function atInputFile () {
+    return {
+        restrict: 'E',
+        transclude: true,
+        replace: true,
+        require: ['^^atForm', 'atInputFile'],
+        templateUrl,
+        controller: AtInputFileController,
+        controllerAs: 'vm',
+        link: atInputFileLink,
+        scope: {
+            state: '=',
+            col: '@',
+            tab: '@'
+        }
+    };
+}
+
+export default atInputFile;

awx/ui/client/lib/components/input/file.partial.html

@@ -0,0 +1,25 @@
+<div class="col-sm-{{::col}} at-InputContainer">
+    <div class="form-group at-u-flat">
+        <at-input-label></at-input-label>
+        <input class="at-InputFile--hidden" type="file"/>
+        <div class="input-group">
+            <span class="input-group-btn">
+                <button class="btn at-ButtonHollow--default at-Input-button"
+                        ng-disabled="state._disabled || form.disabled"
+                        ng-click="vm.onButtonClick()">
+                  <i class="fa fa-folder-open" ng-if="!state._value"></i>
+                  <i class="fa fa-trash" ng-if="state._value"></i>
+                </button>
+            </span>
+            <input class="form-control at-Input"
+                   type="text"
+                   ng-class="{ 'at-Input--rejected': state._rejected }"
+                   ng-model="state._displayValue"
+                   ng-attr-tabindex="{{ tab || undefined }}"
+                   ng-attr-placeholder="{{ state._disabled ? '' : vm.strings.get('file.PLACEHOLDER') }}"
+                   ng-disabled="state._disabled || form.disabled"
+                   readonly/>
+        </div>
+        <at-input-message></at-input-message>
+    </div>
+</div>

awx/ui/client/lib/components/input/group.directive.js

@@ -99,6 +99,8 @@ function AtInputGroupController ($scope, $compile) {
             config._component = 'at-input-number';
         } else if (input.type === 'boolean') {
             config._component = 'at-input-checkbox';
+        } else if (input.type === 'file') {
+            config._component = 'at-input-file';
         } else if (input.choices) {
             config._component = 'at-input-select';
             config._format = 'array';

awx/ui/client/lib/theme/_variables.less

@@ -131,6 +131,8 @@
 @at-color-input-button: @at-gray-light-3x;
 @at-color-input-button-hover: @at-gray-light-2x;
 @at-color-input-disabled: @at-gray-light;
+@at-color-input-readonly: @at-color-input-background;
+
 @at-color-input-error: @at-color-error;
 @at-color-input-focus: @at-color-info;
 @at-color-input-hint: @at-gray-dark-4x;