[SDC-29] catalog 1707 rebase commit.

Change-Id: I43c3dc5cf44abf5da817649bc738938a3e8388c1
Signed-off-by: Michael Lando <ml636r@att.com>

3 files changed, 228 insertions, 0 deletions

diff --git a/catalog-ui/src/app/directives/file-upload/file-upload.html b/catalog-ui/src/app/directives/file-upload/file-upload.html
new file mode 100644
index 0000000000..a69340d0ba
--- /dev/null
+++ b/catalog-ui/src/app/directives/file-upload/file-upload.html
@@ -0,0 +1,23 @@
+<div class="i-sdc-form-item i-sdc-form-file-upload">
+    <span class="i-sdc-form-file-name" data-tests-id="filename">{{(fileModel && fileModel.filename) || defaultText}}</span>
+    <div class="i-sdc-form-file-upload-x-btn" ng-click="cancel()" data-ng-show="fileModel.filename && fileModel.filename!=='' && elementDisabled!=='true'"></div>
+    <label class="i-sdc-form-file-upload-label">
+        <input
+            type="file"
+            name="{{elementName}}"
+            ng-model="myFileModel"
+            base-sixty-four-input
+            accept="{{getExtensionsWithDot()}}"
+            file-type="{{extensions}}"
+            data-ng-change="onFileChange()"
+            onchange="angular.element(this).scope().setEmptyError(this)"
+            onclick="angular.element(this).scope().onFileClick(this)"
+            on-after-validate="onAfterValidate"
+            data-ng-required="{{elementRequired}}"
+            data-ng-disabled="elementDisabled==='true'"
+            data-tests-id="browseButton"
+            maxsize="10240"
+            />
+        <div class="file-upload-browse-btn" data-ng-class="{'disabled':elementDisabled==='true'}">Browse</div>
+    </label>
+</div>
diff --git a/catalog-ui/src/app/directives/file-upload/file-upload.less b/catalog-ui/src/app/directives/file-upload/file-upload.less
new file mode 100644
index 0000000000..1c4b010853
--- /dev/null
+++ b/catalog-ui/src/app/directives/file-upload/file-upload.less
@@ -0,0 +1,75 @@
+.i-sdc-form-file-upload {
+
+    display: flex;
+    margin-top: 0;
+    width: 100%;
+    .p_1;
+    .bg_c;
+    .border-radius(2px);
+    border: solid 1px @border_color_f;
+    height: 30px;
+
+    input[type="file"] {
+        cursor: inherit;
+        display: block;
+        filter: alpha(opacity=0);
+        width: 100px;
+        height: 30px;
+        opacity: 0;
+        position: absolute;
+        right: 0;
+        text-align: right;
+        top: 0;
+    }
+
+    .i-sdc-form-file-name{
+        flex-grow: 999;
+        text-align: left;
+        padding: 3px 10px;
+        opacity: 0.6;
+        width: 80%;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+
+    }
+
+    .i-sdc-form-file-upload-x-btn{
+        flex-grow: 1;
+        .sprite;
+        .sprite.small-x-btn-black;
+        cursor: pointer;
+        top: 10px;
+        right: 9px;
+        width: 10px;
+        position: relative;
+    }
+    .i-sdc-form-file-upload-label {
+        float: right;
+        width: 100px;
+        height: 100%;
+        .bg_n;
+        .b_9;
+
+        .file-upload-browse-btn {
+            .noselect;
+            padding: 4px 6px;
+            cursor: pointer;
+            z-index: 999;
+            position: absolute;
+            width: 100px;
+            height: 28px;
+            text-align: center;
+
+            &.disabled {
+                cursor: default;
+            }
+        }
+    }
+
+    &.error {
+        border-color: #da1f3d;
+        outline: none;
+        box-sizing: border-box;
+    }
+}
diff --git a/catalog-ui/src/app/directives/file-upload/file-upload.ts b/catalog-ui/src/app/directives/file-upload/file-upload.ts
new file mode 100644
index 0000000000..63a6f08062
--- /dev/null
+++ b/catalog-ui/src/app/directives/file-upload/file-upload.ts
@@ -0,0 +1,130 @@
+/**
+ * Created by obarda on 1/27/2016.
+ */
+'use strict';
+import {IAppConfigurtaion} from "app/models";
+
+export class FileUploadModel {
+    filetype:string;
+    filename:string;
+    filesize:number;
+    base64:string;
+}
+
+export interface IFileUploadScope extends ng.IScope {
+    fileModel:FileUploadModel;
+    formElement:ng.IFormController;
+    extensions:string;
+    elementDisabled:string;
+    elementName:string;
+    elementRequired:string;
+    myFileModel:any; // From the ng bind to <input type=file
+    defaultText:string;
+    onFileChangedInDirective:Function;
+
+    getExtensionsWithDot():string;
+    onFileChange():void
+    onFileClick(element:any):void;
+    onAfterValidate():void;
+    setEmptyError(element):void;
+    validateField(field:any):boolean;
+    cancel():void;
+}
+
+
+export class FileUploadDirective implements ng.IDirective {
+
+    constructor(private sdcConfig:IAppConfigurtaion) {
+    }
+
+    scope = {
+        fileModel: '=',
+        formElement: '=',
+        extensions: '@',
+        elementDisabled: '@',
+        elementName: '@',
+        elementRequired: '@',
+        onFileChangedInDirective: '=?',
+        defaultText: '=',
+    };
+
+    restrict = 'E';
+    replace = true;
+    template = ():string => {
+        return require('./file-upload.html');
+    };
+
+    link = (scope:IFileUploadScope, element:any, $attr:any) => {
+
+        // In case the browse has filename, set it valid.
+        // When editing artifact the file is not sent again, so if we have filename I do not want to show error.
+        if (scope.fileModel && scope.fileModel.filename && scope.fileModel.filename !== '') {
+            scope.formElement[scope.elementName].$setValidity('required', true);
+        }
+
+        scope.getExtensionsWithDot = ():string => {
+            let ret = [];
+            if (scope.extensions) {
+                _.each(scope.extensions.split(','), function (item) {
+                    ret.push("." + item.toString());
+                });
+            }
+            return ret.join(",");
+        };
+
+        scope.onFileChange = ():void => {
+            if (scope.onFileChangedInDirective) {
+                scope.onFileChangedInDirective();
+            }
+            if (scope.myFileModel) {
+                scope.fileModel = scope.myFileModel;
+                scope.formElement[scope.elementName].$setValidity('required', true);
+            }
+        };
+
+        scope.setEmptyError = (element):void => {
+            if (element.files[0].size) {
+                scope.formElement[scope.elementName].$setValidity('emptyFile', true);
+            } else {
+                scope.formElement[scope.elementName].$setValidity('emptyFile', false);
+                scope.fileModel = undefined;
+            }
+
+        };
+
+        // Prevent case-sensitivity in the upload-file accept parameter
+        // Workaround for github issue: https://github.com/adonespitogo/angular-base64-upload/issues/81
+        scope.onAfterValidate = () => {
+            if (!scope.formElement[scope.elementName].$valid && scope.extensions) {
+                let uploadfileExtension:string = scope.fileModel.filename.split('.').pop().toLowerCase();
+                if (scope.extensions.split(',').indexOf(uploadfileExtension) > -1) {
+                    scope.formElement[scope.elementName].$setValidity('accept', true);
+                }
+            }
+                // Adding fix for cases when we're changing file type for upload from file that requires certain
+                // extensions to a file that don't requires any extensions
+                if (!scope.formElement[scope.elementName].$valid && scope.formElement[scope.elementName].$error.accept && scope.extensions === "") {
+                    scope.formElement[scope.elementName].$setValidity('accept', true);
+                }
+        };
+
+        // Workaround, in case user select a file then cancel (X) then select the file again, the event onChange is not fired.
+        // This is a workaround to fix this issue.
+        scope.onFileClick = (element:any):void => {
+            element.value = null;
+        };
+
+        scope.cancel = ():void => {
+            scope.fileModel.filename = '';
+            scope.formElement[scope.elementName].$pristine;
+            scope.formElement[scope.elementName].$setValidity('required', false);
+        }
+    };
+
+    public static factory = (sdcConfig:IAppConfigurtaion)=> {
+        return new FileUploadDirective(sdcConfig);
+    };
+
+}
+
+FileUploadDirective.factory.$inject = [ 'sdcConfig'];