[SDC-29] catalog 1707 rebase commit.

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

3 files changed, 247 insertions, 0 deletions

diff --git a/catalog-ui/src/app/directives/property-types/type-list/type-list-directive.html b/catalog-ui/src/app/directives/property-types/type-list/type-list-directive.html
new file mode 100644
index 0000000000..138e848e59
--- /dev/null
+++ b/catalog-ui/src/app/directives/property-types/type-list/type-list-directive.html
@@ -0,0 +1,56 @@
+<div>
+    <div data-ng-if="!isSchemaTypeDataType">
+        <div class="i-sdc-form-item list-new-item" data-ng-class="{error:(parentFormObj['listNewItem'+fieldsPrefixName].$dirty && parentFormObj['listNewItem'+fieldsPrefixName].$invalid)}">
+            <input class="i-sdc-form-input"
+                   data-tests-id="listNewItem{{fieldsPrefixName}}"
+                   ng-if="!((schemaProperty.simpleType||schemaProperty.type) == 'boolean')"
+                   data-ng-disabled="readOnly"
+                   data-ng-model="listNewItem.value"
+                   type="text"
+                   name="listNewItem{{fieldsPrefixName}}"
+                   data-ng-pattern="getValidationPattern((schemaProperty.simpleType||schemaProperty.type))"
+                   data-ng-model-options="{ debounce: 200 }"
+                   placeholder="Type a value and then click ADD"
+                   data-ng-maxlength="maxLength"
+                   maxlength="{{maxLength}}"
+                   sdc-keyboard-events="" key-enter="schemaProperty.type && !parentFormObj['listNewItem'+fieldsPrefixName].$invalid && listNewItem.value && addListItem"
+                   autofocus />
+            <select class="i-sdc-form-select"
+                    data-tests-id="listNewItem{{fieldsPrefixName}}"
+                    ng-if="(schemaProperty.simpleType||schemaProperty.type) == 'boolean'"
+                    data-ng-disabled="readOnly"
+                    name="listNewItem{{fieldsPrefixName}}"
+                    data-ng-model="listNewItem.value">
+                <option value="true">true</option>
+                <option value="false">false</option>
+            </select>
+            <div class="input-error" data-ng-show="parentFormObj['listNewItem'+fieldsPrefixName].$dirty && parentFormObj['listNewItem'+fieldsPrefixName].$invalid">
+                <span ng-show="parentFormObj['listNewItem'+fieldsPrefixName].$error.pattern" translate="PROPERTY_EDIT_PATTERN"></span>
+                <span ng-show="parentFormObj['listNewItem'+fieldsPrefixName].$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '{{maxLength}}' }"></span>
+            </div>
+        </div>
+        <div class="add-btn add-list-item" data-tests-id="add-list-item{{fieldsPrefixName}}"
+             data-ng-class="{'disabled': readOnly || !schemaProperty.type || parentFormObj['listNewItem'+fieldsPrefixName].$invalid || !listNewItem.value}" data-ng-click="addListItem()">Add</div>
+        <div class="list-value-items">
+                                    <span class="list-value-item" data-ng-repeat="value in valueObjRef track by $index">
+                                        {{value}}
+                                        <span ng-if="!readOnly" class="delete-list-item sprite-new small-x-button" data-ng-click="deleteListItem($index)"></span>
+                                    </span>
+        </div>
+    </div>
+    <div data-ng-if="isSchemaTypeDataType">
+        <div class="dt-list">
+            <div data-ng-repeat="value in valueObjRef track by $index" class="dt-list-item">
+                <span class="delete-dt-list-item" data-ng-click="deleteListItem($index)"></span>
+                <fields-structure value-obj-ref="valueObjRef[$index]"
+                                  type-name="schemaProperty.type"
+                                  parent-form-obj="parentFormObj"
+                                  fields-prefix-name="fieldsPrefixName+''+$index"
+                                  read-only="readOnly"></fields-structure>
+            </div>
+            <div class="add-btn add-list-item" data-tests-id="add-list-item"
+                       data-ng-class="{'disabled': readOnly}" data-ng-click="listNewItem.value='{}';addListItem();">Add</div>
+        </div>
+
+    </div>
+</div>
diff --git a/catalog-ui/src/app/directives/property-types/type-list/type-list-directive.less b/catalog-ui/src/app/directives/property-types/type-list/type-list-directive.less
new file mode 100644
index 0000000000..71263f2642
--- /dev/null
+++ b/catalog-ui/src/app/directives/property-types/type-list/type-list-directive.less
@@ -0,0 +1,85 @@
+.list-new-item{
+    float: left;
+    width: 50%;
+    min-width: 221px;
+    margin-right: 15px;
+    input{
+        min-width: 221px;
+    }
+}
+
+.list-value-items{
+    -webkit-border-radius: 2px;
+    -moz-border-radius: 2px;
+    border-radius: 2px;
+    border: 1px solid @main_color_o;
+    padding-bottom: 10px;
+    min-height: 100px;
+    clear: both;
+    background-color: white;
+    .list-value-item{
+        display: inline-block;
+        background-color: @tlv_color_v;
+        margin: 10px 0 0 10px;
+        padding: 0 8px;
+        .delete-list-item{
+            margin: 0 0 0 2px;
+            .hand;
+        }
+    }
+}
+
+.add-btn {
+    .f-color.a;
+    .f-type._14_m;
+    .hand;
+
+    &.add-list-item {
+        float: left;
+        margin-top: 5px;
+        width: 44px;
+    }
+
+    &:before {
+        .sprite-new;
+        .plus-icon;
+        margin-right: 5px;
+        content: "";
+
+    }
+    &:hover {
+        .f-color.b;
+        &:before {
+            .sprite-new;
+            .plus-icon-hover;
+        }
+    }
+
+}
+
+.dt-list{
+    display: table-caption;
+    .dt-list-item {
+        border-radius: 3px;
+        background-color: @tlv_color_v;
+        display: inline-block;
+        .delete-dt-list-item{
+            float: right;
+            position: relative;
+            top: 5px;
+            right: 5px;
+            .sprite-new;
+            .delete-icon;
+            &:hover{
+                .delete-icon-hover;
+            }
+        }
+        .data-type-name{
+            margin-right: 16px;
+        }
+    }
+    &>.add-list-item{
+        float:none;
+    }
+}
+
diff --git a/catalog-ui/src/app/directives/property-types/type-list/type-list-directive.ts b/catalog-ui/src/app/directives/property-types/type-list/type-list-directive.ts
new file mode 100644
index 0000000000..ac5da2be73
--- /dev/null
+++ b/catalog-ui/src/app/directives/property-types/type-list/type-list-directive.ts
@@ -0,0 +1,106 @@
+/**
+ * Created by rcohen on 9/15/2016.
+ */
+'use strict';
+import {SchemaProperty} from "app/models";
+import {ValidationUtils, PROPERTY_TYPES} from "app/utils";
+import {DataTypesService} from "app/services";
+
+export interface ITypeListScope extends ng.IScope {
+    parentFormObj:ng.IFormController;
+    schemaProperty:SchemaProperty;
+    isSchemaTypeDataType:boolean;
+    valueObjRef:any;
+    propertyNameValidationPattern:RegExp;
+    fieldsPrefixName:string;
+    readOnly:boolean;
+    listDefaultValue:any;
+    listNewItem:any;
+    maxLength:number;
+
+    getValidationPattern(type:string):RegExp;
+    validateIntRange(value:string):boolean;
+    addListItem():void;
+    deleteListItem(listItemIndex:number):void
+}
+
+
+export class TypeListDirective implements ng.IDirective {
+
+    constructor(private DataTypesService:DataTypesService,
+                private PropertyNameValidationPattern:RegExp,
+                private ValidationUtils:ValidationUtils) {
+    }
+
+    scope = {
+        valueObjRef: '=',//ref to list object in the parent value object
+        schemaProperty: '=',//get the schema.property object
+        parentFormObj: '=',//ref to parent form (get angular form object)
+        fieldsPrefixName: '=',//prefix for form fields names
+        readOnly: '=',//is form read only
+        defaultValue: '@',//this list default value
+        maxLength: '='
+    };
+
+    restrict = 'E';
+    replace = true;
+    template = ():string => {
+        return require('./type-list-directive.html');
+    };
+
+    link = (scope:ITypeListScope, element:any, $attr:any) => {
+        scope.propertyNameValidationPattern = this.PropertyNameValidationPattern;
+
+        //reset valueObjRef when schema type is changed
+        scope.$watchCollection('schemaProperty.type', (newData:any):void => {
+            scope.isSchemaTypeDataType = this.DataTypesService.isDataTypeForSchemaType(scope.schemaProperty);
+            //insert 1 empty item dt by default
+            if (scope.isSchemaTypeDataType && (!scope.valueObjRef || !scope.valueObjRef.length)) {
+                scope.valueObjRef = scope.valueObjRef || [];
+                scope.valueObjRef.push({});
+            }
+        });
+
+        //when user brows between properties in "edit property form"
+        scope.$watchCollection('fieldsPrefixName', (newData:any):void => {
+            scope.listNewItem = {value: ''};
+
+            if ($attr.defaultValue) {
+                scope.listDefaultValue = JSON.parse($attr.defaultValue);
+            }
+        });
+
+        scope.getValidationPattern = (type:string):RegExp => {
+            return this.ValidationUtils.getValidationPattern(type);
+        };
+
+        scope.validateIntRange = (value:string):boolean => {
+            return !value || this.ValidationUtils.validateIntRange(value);
+        };
+
+        scope.addListItem = ():void => {
+            scope.valueObjRef = scope.valueObjRef || [];
+            let newVal = ((scope.schemaProperty.simpleType || scope.schemaProperty.type) == PROPERTY_TYPES.STRING ? scope.listNewItem.value : JSON.parse(scope.listNewItem.value));
+            scope.valueObjRef.push(newVal);
+            scope.listNewItem.value = "";
+        };
+
+        scope.deleteListItem = (listItemIndex:number):void => {
+            scope.valueObjRef.splice(listItemIndex, 1);
+            if (!scope.valueObjRef.length) {
+                if (scope.listDefaultValue) {
+                    angular.copy(scope.listDefaultValue, scope.valueObjRef);
+                }
+            }
+        };
+    };
+
+    public static factory = (DataTypesService:DataTypesService,
+                             PropertyNameValidationPattern:RegExp,
+                             ValidationUtils:ValidationUtils)=> {
+        return new TypeListDirective(DataTypesService, PropertyNameValidationPattern, ValidationUtils);
+    };
+}
+
+TypeListDirective.factory.$inject = ['Sdc.Services.DataTypesService', 'PropertyNameValidationPattern', 'ValidationUtils'];
+