Initial OpenECOMP SDC commit

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

6 files changed, 564 insertions, 0 deletions

diff --git a/catalog-ui/app/scripts/directives/layout/top-nav/top-nav.html b/catalog-ui/app/scripts/directives/layout/top-nav/top-nav.html
new file mode 100644
index 0000000000..40b1e86d90
--- /dev/null
+++ b/catalog-ui/app/scripts/directives/layout/top-nav/top-nav.html
@@ -0,0 +1,54 @@
+<nav class="top-nav">
+
+    <div class="asdc-app-title-wrapper">
+        <a class="asdc-app-title">SDC</a> <!-- data-ui-sref="dashboard" -->
+        <div class="asdc-version"> v.{{version}}</div>
+    </div>
+
+    <ul class="top-menu" data-ng-show="!menuModel">
+        <!-- no hierarchy & dropdowns mode -->
+        <li data-ng-repeat="item in topLvlMenu.menuItems"
+            data-ng-class="{'selected': $index == topLvlMenu.selectedIndex}">
+            <a data-ng-click="menuItemClick(topLvlMenu, item)"
+               data-tests-id="main-menu-button-{{item.text | lowercase}}">{{item.text}}</a>
+        </li>
+    </ul>
+
+    <ul class="top-menu" data-ng-show="menuModel">
+        <!-- with hierarchy & dropdowns mode -->
+        <li data-ng-repeat-start="groupItem in menuModel"
+            data-ng-class="{'selected': $last }">
+            <a data-ng-click="menuItemClick(groupItem, groupItem.menuItems[groupItem.selectedIndex])"
+               data-tests-id="breadcrumbs-button-{{$index}}">
+                {{groupItem.menuItems[groupItem.selectedIndex].text}}
+            </a>
+        </li>
+        <li data-ng-repeat-end="" class="triangle-dropdown"
+            data-ng-class="{'item-click': groupItem.itemClick}" data-ng-mouseover="groupItem.itemClick = true">
+            <div class="triangle"><span class="sprite-new arrow-right"></span></div>
+            <perfect-scrollbar scroll-y-margin-offset="15" include-padding="true">
+                <ul>
+                    <li data-ng-repeat="ddItem in groupItem.menuItems"
+                        data-ng-click="menuItemClick(groupItem, ddItem)"
+                        data-ng-class="{'selected': $index == groupItem.selectedIndex, 'disabled': ddItem.isDisabled}"
+                        data-tests-id="sub-menu-button-{{ddItem.text | lowercase}}">
+                        <span sdc-smart-tooltip="">{{ddItem.text}}</span>
+                    </li>
+                </ul>
+            </perfect-scrollbar>
+        </li>
+    </ul>
+
+    <div class="top-search" data-ng-hide="hideSearch === true">
+        <input type="text"
+               class="search-text"
+               placeholder="Search"
+               data-ng-model="searchBind"
+               data-tests-id="main-menu-input-search"
+               ng-model-options="{ debounce: 500 }" />
+        <span class="w-sdc-search-icon magnification"></span>
+    </div>
+
+    <div class="notification-icon"  data-ng-disabled= "progress > 0" data-ng-class="{'disabled' : progress > 0}" data-ng-if="user.role === 'DESIGNER' && notificationIconCallback" data-ng-click="notificationIconCallback()" tooltips tooltip-side="left" tooltip-content="Vendor Software Product Repository" data-tests-id="repository-icon"></div>
+
+</nav>
diff --git a/catalog-ui/app/scripts/directives/layout/top-nav/top-nav.less b/catalog-ui/app/scripts/directives/layout/top-nav/top-nav.less
new file mode 100644
index 0000000000..65021bdc4d
--- /dev/null
+++ b/catalog-ui/app/scripts/directives/layout/top-nav/top-nav.less
@@ -0,0 +1,218 @@
+.top-nav {
+    position: fixed;
+    top: @header_height;
+    background-color: @main_color_p;
+    .box-shadow(0px 1px 3px 0px rgba(0, 0, 0, 0.33));
+    width: 100%;
+    height: @top_nav_height;
+    line-height: @top_nav_height;
+    z-index: 10;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    .asdc-app-title-wrapper {
+        flex-grow: 1;
+        line-height: 16px;
+        margin: 0 20px;
+
+        a.asdc-app-title {
+            .m_18_r;
+            text-decoration: none;
+        }
+
+        .asdc-version {
+            .m_12_r;
+            .opacity(0.8);
+            line-height: 14px;
+            flex-grow: 1;
+        }
+
+    }
+
+    ul.top-menu {
+        list-style-type: none;
+        margin: 0 0 0 20px;
+        padding: 0;
+        flex-grow: 999;
+
+        & > li {
+            float: left;
+            cursor: pointer;
+            line-height: 50px;
+            height: 50px;
+            padding: 0 20px;
+
+            &.selected {
+                border-bottom: solid 4px @main_color_a;
+
+                a {
+                    color: @func_color_s;
+                }
+            }
+
+            /*&:hover {
+                border-bottom: solid 4px @main_color_a;
+            }*/
+
+            a {
+                font-family: @font-omnes-medium;
+                color: @main_color_m;
+                font-size: 18px;
+                display: block;
+                text-align: center;
+                text-decoration: none;
+            }
+
+            &.triangle-dropdown {
+                padding: 0;
+                position: relative;
+
+                div.triangle {
+                    margin-top: 15px;
+                    border-radius: 2px;
+                    width: 17px;
+                    height: 18px;
+
+                    //temp use - until new triangle gets in
+                    line-height: 18px;
+                    text-align: center;
+                    font-size: 10px;
+
+                    &:hover {
+                        background-color: rgba(156, 156, 156, 0.2);
+
+                        span {
+                            .arrow-right-hover;
+                        }
+                    }
+                }
+
+                + li a {
+                    font-size: 16px;
+                }
+
+                .ps-container {
+                    .perfect-scrollbar;
+                    position: absolute;
+                    left: 0;
+                    top: 40px;
+                    z-index: 1;
+
+                    overflow: hidden;
+                    max-height: 0;
+                    -webkit-transition: max-height 200ms ease-in;
+                    -moz-transition: max-height 200ms ease-in;
+                    -o-transition: max-height 200ms ease-in;
+                    transition: max-height 200ms ease-in;
+
+                    div ul {
+
+                        padding: 0;
+                        background-color: white;
+
+                        li {
+
+                            height: 35px;
+                            background-color: white;
+                            font-size: 13px;
+                            width: 150px;
+                            line-height: 35px;
+                            padding: 0 10px;
+
+                            &.disabled {
+                                opacity: 1;
+                            }
+                            &.selected {
+                                background-color: @tlv_color_v;
+                                font-weight: bold;
+                            }
+                            &:hover {
+                                color: @main_color_a;
+                            }
+                            span {
+                                height: 35px;
+                                width: 130px;
+                                display: inline-block;
+                            }
+                        }
+                    }
+                }
+                &.item-click:hover .ps-container,
+                &.item-click:active .ps-container {
+                    max-height: 500px;
+                    border: 1px solid @func_color_b;
+                    border-radius: 2px;
+                    box-shadow: 0px 2px 2px 0px rgba(24, 24, 25, 0.1);
+
+                    div ul {
+
+                    }
+                }
+            }
+        }
+
+    }
+
+    .top-search {
+        position: relative;
+        flex-grow: 1;
+        padding: 0 20px;
+
+        input.search-text {
+            .border-radius(2px);
+            width: 245px;
+            height: 32px;
+            line-height: 32px;
+            border: 1px solid @main_color_o;
+            outline: none;
+            text-indent: 10px;
+
+            &::-webkit-input-placeholder { font-style: italic; } /* Safari, Chrome and Opera */
+            &:-moz-placeholder { font-style: italic; } /* Firefox 18- */
+            &::-moz-placeholder { font-style: italic; } /* Firefox 19+ */
+            &:-ms-input-placeholder { font-style: italic; } /* IE 10+ */
+            &:-ms-input-placeholder { font-style: italic; } /* Edge */
+             /*   font-style: italic;
+            }*/
+            /* Firefox 18- */
+            &::-moz-placeholder {
+                font-style: italic;
+            }
+            /* Firefox 19+ */
+            &:-ms-input-placeholder {
+                font-style: italic;
+            }
+            /* IE 10+ */
+            &:-ms-input-placeholder {
+                font-style: italic;
+            }
+            /* Edge */
+        }
+
+        .magnification {
+            position: absolute;
+            top: 19px;
+            right: 26px;
+        }
+
+    }
+
+    .notification-icon {
+        cursor: pointer;
+        flex-grow: 1;
+        margin: 0 10px 6px 0;
+        .sprite-new;
+        .vsp-list-icon;
+
+        &:hover {
+            .vsp-list-icon-hover;
+        }
+
+        &:active {
+            .vsp-list-icon-active;
+        }
+
+    }
+
+}
diff --git a/catalog-ui/app/scripts/directives/layout/top-nav/top-nav.ts b/catalog-ui/app/scripts/directives/layout/top-nav/top-nav.ts
new file mode 100644
index 0000000000..356e43b7f7
--- /dev/null
+++ b/catalog-ui/app/scripts/directives/layout/top-nav/top-nav.ts
@@ -0,0 +1,155 @@
+/*-
+ * ============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 ITopNavScope extends ng.IScope {
+        topLvlSelectedIndex: number;
+        hideSearch: boolean;
+        searchBind: any;
+        menuModel: Array<Utils.MenuItemGroup>;
+
+        topLvlMenu: Utils.MenuItemGroup;
+        goToState(state:string, params:Array<any>):ng.IPromise<boolean>;
+        menuItemClick: Function;
+        user: Models.IUserProperties;
+        version:string;
+    }
+
+
+    export class TopNavDirective implements ng.IDirective {
+
+        constructor(private $templateCache:ng.ITemplateCacheService,
+                    private $filter:ng.IFilterService,
+                    private $state:ng.ui.IStateService,
+                    private $q: ng.IQService,
+                    private userResourceService: Sdc.Services.IUserResourceClass
+            ) {
+        }
+
+        public replace = true;
+        public restrict = 'E';
+        public transclude = false;
+
+
+        scope = {
+            topLvlSelectedIndex: '@?',
+            hideSearch: '=',
+            searchBind: '=',
+            version: '@',
+            notificationIconCallback: '=',
+            menuModel: '=?',
+        };
+
+        template = ():string => {
+            return this.$templateCache.get('/app/scripts/directives/layout/top-nav/top-nav.html');
+        };
+
+        public link = (scope:ITopNavScope, $elem:ng.IAugmentedJQuery, $attrs:angular.IAttributes) => {
+
+            let getTopLvlSelectedIndexByState = ():number => {
+                if (!scope.topLvlMenu.menuItems) {
+                    return 0;
+                }
+
+                let result = -1;
+
+                //set result to current state
+                scope.topLvlMenu.menuItems.forEach((item:Utils.MenuItem, index:number)=> {
+                    if (item.state === this.$state.current.name) {
+                        result = index;
+                    }
+                });
+
+                //if it's a different state , checking previous state param
+                if (result === -1) {
+                    scope.topLvlMenu.menuItems.forEach((item:Utils.MenuItem, index:number)=> {
+                        if (item.state === this.$state.params['previousState']) {
+                            result = index;
+                        }
+                    });
+                }
+
+                if (result === -1) {
+                    result = 0;
+                }
+
+                return result;
+            };
+
+            scope.user = this.userResourceService.getLoggedinUser();
+
+            let tmpArray:Array<Utils.MenuItem> = [
+                new Utils.MenuItem(this.$filter('translate')("TOP_MENU_HOME_BUTTON"), null, "dashboard", "goToState", null, null),
+                new Utils.MenuItem(this.$filter('translate')("TOP_MENU_CATALOG_BUTTON"), null, "catalog", "goToState", null, null)
+            ];
+
+            // Only designer can perform onboarding
+            if (scope.user && scope.user.role === 'DESIGNER'){
+                tmpArray.push(new Utils.MenuItem(this.$filter('translate')("TOP_MENU_ON_BOARD_BUTTON"), null, "onboardVendor", "goToState", null, null));
+            }
+
+            scope.topLvlMenu = new Utils.MenuItemGroup(0, tmpArray , true );
+            scope.topLvlMenu.selectedIndex = isNaN(scope.topLvlSelectedIndex) ? getTopLvlSelectedIndexByState() : scope.topLvlSelectedIndex;
+
+            let generateMenu = () => {
+                if (scope.menuModel && scope.menuModel[0] !== scope.topLvlMenu) {
+                    scope.menuModel.unshift(scope.topLvlMenu);
+                }
+            };
+            scope.$watch('menuModel', generateMenu);
+
+            generateMenu();
+
+            /////scope functions////
+
+            scope.goToState = (state:string, params:Array<any>):ng.IPromise<boolean> => {
+                let deferred = this.$q.defer();
+                this.$state.go(state, params && params.length > 0 ? [0] : undefined);
+                deferred.resolve(true);
+                return deferred.promise;
+            };
+
+            scope.menuItemClick = (itemGroup:Utils.MenuItemGroup, item:Utils.MenuItem) => {
+
+                itemGroup.itemClick = false;
+
+                let onSuccess = ():void => {
+                    itemGroup.selectedIndex = itemGroup.menuItems.indexOf(item);
+                };
+                let onFailed = ():void => {};
+
+                if (item.callback) {
+                    (item.callback.apply(undefined, item.params)).then(onSuccess, onFailed);
+                } else {
+                    scope[item.action](item.state, item.params).then(onSuccess, onFailed);
+                }
+            };
+        };
+
+        public static factory = ($templateCache:ng.ITemplateCacheService, $filter:ng.IFilterService, $state:ng.ui.IStateService, $q: ng.IQService, userResourceService: Sdc.Services.IUserResourceClass)=> {
+            return new TopNavDirective($templateCache, $filter, $state,$q, userResourceService);
+        };
+
+    }
+
+    TopNavDirective.factory.$inject = ['$templateCache', '$filter', '$state','$q', 'Sdc.Services.UserResourceService'];
+}
diff --git a/catalog-ui/app/scripts/directives/layout/top-progress/top-progress.html b/catalog-ui/app/scripts/directives/layout/top-progress/top-progress.html
new file mode 100644
index 0000000000..ab2c8e364e
--- /dev/null
+++ b/catalog-ui/app/scripts/directives/layout/top-progress/top-progress.html
@@ -0,0 +1,22 @@
+<div class="top-progress">
+
+    <!--======================= Top progress var =======================-->
+    <div data-ng-if="progressValue>0 && progressValue<100">
+        <span class="sdc-progress-title">{{progressMessage}}<span class="progress-percentage">{{progressValue}}&nbsp;%</span></span>
+        <div class="sdc-progress">
+            <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="{{progressValue}}" aria-valuemin="0" aria-valuemax="100" data-ng-style="{width: progressValue+'%'}"></div>
+        </div>
+    </div>
+
+    <div class="sdc-progress-success-wrapper" data-ng-if="progressValue===100">
+        <span class="sdc-progress-success"></span>
+        <span class="sdc-progress-success-title">{{progressMessage}}</span>
+    </div>
+
+    <div class="sdc-progress-error-wrapper" data-ng-if="progressValue===-1">
+        <span class="sdc-progress-error"></span>
+        <span class="sdc-progress-error-title">{{progressMessage}}</span>
+    </div>
+    <!--======================= Top progress var =======================-->
+
+</div>
diff --git a/catalog-ui/app/scripts/directives/layout/top-progress/top-progress.less b/catalog-ui/app/scripts/directives/layout/top-progress/top-progress.less
new file mode 100644
index 0000000000..acce826f80
--- /dev/null
+++ b/catalog-ui/app/scripts/directives/layout/top-progress/top-progress.less
@@ -0,0 +1,58 @@
+.top-progress {
+    text-align: left;
+
+    .sdc-progress-title {
+        .n_12_r;
+
+        .progress-percentage {
+            float: right;
+        }
+    }
+
+    .sdc-progress {
+        position: relative;
+        display: block;
+        height: 6px;
+        background-color: @main_color_o;
+        border-radius: 3px;
+        box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
+
+        .progress-bar {
+            border-radius: 3px;
+            background-color: @main_color_a;
+        }
+
+    }
+
+    .sdc-progress-success-wrapper {
+        display: flex;
+        align-items: flex-end;
+
+        .sdc-progress-success-title {
+            .d_12_r;
+            margin-left: 10px;
+        }
+
+        .sdc-progress-success {
+            .sprite-new;
+            .success-circle;
+        }
+    }
+
+    .sdc-progress-error-wrapper {
+        display: flex;
+        align-items: flex-end;
+
+        .sdc-progress-error-title {
+            .q_12_r;
+            margin-left: 10px;
+        }
+
+        .sdc-progress-error {
+            .sprite-new;
+            .error-icon;
+        }
+
+    }
+
+}
diff --git a/catalog-ui/app/scripts/directives/layout/top-progress/top-progress.ts b/catalog-ui/app/scripts/directives/layout/top-progress/top-progress.ts
new file mode 100644
index 0000000000..8e8a289281
--- /dev/null
+++ b/catalog-ui/app/scripts/directives/layout/top-progress/top-progress.ts
@@ -0,0 +1,57 @@
+/*-
+ * ============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 ITopProgressScope extends ng.IScope {
+        progressValue:number;
+        progressMessage:string;
+    }
+
+    export class TopProgressDirective implements ng.IDirective {
+
+        constructor(private $templateCache:ng.ITemplateCacheService) {}
+
+        public replace = true;
+        public restrict = 'E';
+        public transclude = false;
+
+        scope = {
+            progressValue: '=',
+            progressMessage: '='
+        };
+
+        template = ():string => {
+            return this.$templateCache.get('/app/scripts/directives/layout/top-progress/top-progress.html');
+        };
+
+        public link = (scope:ITopProgressScope, $elem:ng.IAugmentedJQuery, $attrs:angular.IAttributes) => {
+
+        };
+
+        public static factory = ($templateCache:ng.ITemplateCacheService)=> {
+            return new TopProgressDirective($templateCache);
+        };
+
+    }
+
+    TopProgressDirective.factory.$inject = ['$templateCache'];
+}