Initial OpenECOMP SDC commit

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

3 files changed, 185 insertions, 0 deletions

diff --git a/catalog-ui/app/scripts/directives/utils/sdc-tags/sdc-tags.html b/catalog-ui/app/scripts/directives/utils/sdc-tags/sdc-tags.html
new file mode 100644
index 0000000000..fb1ada69c3
--- /dev/null
+++ b/catalog-ui/app/scripts/directives/utils/sdc-tags/sdc-tags.html
@@ -0,0 +1,27 @@
+<div class="tags-box" >
+    <input type="text"
+           name="{{elementName}}"
+           class="new-tag-input"
+           data-ng-class="{'view-mode':sdcDisabled}"
+           data-ng-change="validateName()"
+           data-ng-model="newTag"
+           data-ng-maxlength="50"
+           data-ng-pattern="pattern"
+           data-tests-id="i-sdc-tag-input"
+           maxlength="50"
+           sdc-keyboard-events
+           key-enter="addTag"
+
+        />
+    <perfect-scrollbar class="perfect-scrollbar tags-wrapper"  data-ng-class="{'view-mode':sdcDisabled}" include-padding="true">
+        <div data-tests-id="i-sdc-tags-wrapper" >
+            <div class="group-tag" data-ng-show="specialTag">
+                <sdc-tag data-hide-tooltip="true" data-hide-delete="true"
+                         data-tag-data="{tag: specialTag, id: specialTag }"></sdc-tag>
+            </div>
+            <div class="group-tag" ng-repeat="tag in tags track by $index">
+                <sdc-tag ng-if="tag != specialTag" data-on-delete="deleteTag(tag)" sdc-disable="sdcDisabled" data-hide-delete="sdcDisabled" data-hide-tooltip="true" data-tag-data="{tag: tag, id: tag }"></sdc-tag>
+            </div>
+        </div>
+    </perfect-scrollbar>
+</div>
diff --git a/catalog-ui/app/scripts/directives/utils/sdc-tags/sdc-tags.less b/catalog-ui/app/scripts/directives/utils/sdc-tags/sdc-tags.less
new file mode 100644
index 0000000000..942196e663
--- /dev/null
+++ b/catalog-ui/app/scripts/directives/utils/sdc-tags/sdc-tags.less
@@ -0,0 +1,61 @@
+.tags-box {
+
+    height: 297px;
+    .bg_c;
+
+    .perfect-scrollbar {
+        height: 265px;
+    }
+
+    .new-tag-input {
+        display: block;
+
+        -webkit-border-bottom-left-radius: 0 !important;
+        -moz-border-radius-bottomleft: 0 !important;
+        -khtml-border-bottom-left-radius: 0 !important;
+        border-bottom-left-radius: 0 !important;
+
+        -webkit-border-bottom-right-radius: 0 !important;
+        -moz-border-radius-bottomright: 0 !important;
+        -khtml-border-bottom-right-radius: 0 !important;
+        border-bottom-right-radius: 0 !important;
+
+        border: solid 1px #d8d8d8;
+        width: 100%;
+        height: 30px;
+        line-height: 30px;
+        padding: 2px 10px;
+        outline: none;
+    }
+
+    .tags-wrapper {
+        padding: 10px;
+        .border-radius-bottom-left(2px);
+        .border-radius-bottom-right(2px);
+        border: solid 1px #d8d8d8;
+        border-top: none;
+
+        .group-tag {
+            display: inline-block;
+
+            .sdc-tag {
+                border: solid 1px @main_color_n;
+                background-color: @main_color_p;
+                min-width: auto;
+                .tag {
+                    margin-right: 10px;
+                }
+            }
+        }
+        &.view-mode .group-tag {
+            opacity: 1;
+            background-color: #f8f8f8 !important;
+            .sdc-tag {
+                background: none;
+                border-color: @main_color_o;
+            }
+        }
+    }
+
+}
+
diff --git a/catalog-ui/app/scripts/directives/utils/sdc-tags/sdc-tags.ts b/catalog-ui/app/scripts/directives/utils/sdc-tags/sdc-tags.ts
new file mode 100644
index 0000000000..3f4147c920
--- /dev/null
+++ b/catalog-ui/app/scripts/directives/utils/sdc-tags/sdc-tags.ts
@@ -0,0 +1,97 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+/// <reference path="../../../references"/>
+module Sdc.Directives {
+    'use strict';
+
+    export interface ISdcTagsScope extends ng.IScope {
+        tags:Array<string>;
+        specialTag:string;
+        newTag:string;
+        formElement:ng.IFormController;
+        elementName:string;
+        pattern:any;
+        sdcDisabled:boolean;
+        maxTags:number;
+        deleteTag(tag:string):void;
+        addTag(tag:string):void;
+        validateName():void;
+    }
+
+    export class SdcTagsDirective implements ng.IDirective {
+
+        constructor(private $templateCache:ng.ITemplateCacheService) {
+        }
+
+        scope = {
+            tags: '=',
+            specialTag: '=',
+            pattern: '=',
+            sdcDisabled: '=',
+            formElement: '=',
+            elementName: '@',
+            maxTags: '@'
+        };
+
+        public replace = false;
+        public restrict = 'E';
+        public transclude = false;
+
+        template = ():string => {
+            return this.$templateCache.get('/app/scripts/directives/utils/sdc-tags/sdc-tags.html');
+        };
+
+        link = (scope:ISdcTagsScope, element:ng.INgModelController) => {
+
+               scope.deleteTag = (tag:string):void => {
+                scope.tags.splice(scope.tags.indexOf(tag),1);
+            };
+
+            scope.addTag = ():void => {
+                let valid = scope.formElement[scope.elementName].$valid;
+                if (valid &&
+                    scope.tags.length<scope.maxTags &&
+                    scope.newTag &&
+                    scope.newTag!=='' &&
+                    scope.tags.indexOf(scope.newTag)===-1 &&
+                    scope.newTag!==scope.specialTag) {
+                        scope.tags.push(scope.newTag);
+                        scope.newTag='';
+                }
+            };
+
+            scope.validateName = ():void => {
+                if (scope.tags.indexOf(scope.newTag)>-1) {
+                    scope.formElement[scope.elementName].$setValidity('nameExist', false);
+                }else{
+                    scope.formElement[scope.elementName].$setValidity('nameExist', true);
+                }
+            }
+
+        };
+
+        public static factory = ($templateCache:ng.ITemplateCacheService)=> {
+            return new SdcTagsDirective($templateCache);
+        };
+
+    }
+
+    SdcTagsDirective.factory.$inject = ['$templateCache'];
+}