[SDC-29] catalog 1707 rebase commit.

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

3 files changed, 413 insertions, 0 deletions

diff --git a/catalog-ui/src/app/directives/layout/top-nav/top-nav.html b/catalog-ui/src/app/directives/layout/top-nav/top-nav.html
new file mode 100644
index 0000000000..60d3d63855
--- /dev/null
+++ b/catalog-ui/src/app/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" translate="PROJECT_TITLE"></a>
+        <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/src/app/directives/layout/top-nav/top-nav.less b/catalog-ui/src/app/directives/layout/top-nav/top-nav.less
new file mode 100644
index 0000000000..65021bdc4d
--- /dev/null
+++ b/catalog-ui/src/app/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/src/app/directives/layout/top-nav/top-nav.ts b/catalog-ui/src/app/directives/layout/top-nav/top-nav.ts
new file mode 100644
index 0000000000..c7208a909a
--- /dev/null
+++ b/catalog-ui/src/app/directives/layout/top-nav/top-nav.ts
@@ -0,0 +1,141 @@
+'use strict';
+import {IAppConfigurtaion, IHostedApplication, IUserProperties} from "app/models";
+import {IUserResourceClass} from "app/services";
+import {MenuItemGroup, MenuItem} from "app/utils";
+
+export interface ITopNavScope extends ng.IScope {
+    topLvlSelectedIndex:number;
+    hideSearch:boolean;
+    searchBind:any;
+    menuModel:Array<MenuItemGroup>;
+
+    topLvlMenu:MenuItemGroup;
+    goToState(state:string, params:Array<any>):ng.IPromise<boolean>;
+    menuItemClick:Function;
+    user:IUserProperties;
+    version:string;
+}
+
+
+export class TopNavDirective implements ng.IDirective {
+
+    constructor(private $filter:ng.IFilterService,
+                private $state:ng.ui.IStateService,
+                private $q:ng.IQService,
+                private userResourceService:IUserResourceClass,
+                private sdcConfig:IAppConfigurtaion) {
+    }
+
+    public replace = true;
+    public restrict = 'E';
+    public transclude = false;
+
+
+    scope = {
+        topLvlSelectedIndex: '@?',
+        hideSearch: '=',
+        searchBind: '=',
+        version: '@',
+        notificationIconCallback: '=',
+        menuModel: '=?',
+    };
+
+    template = ():string => {
+        return require('./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: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: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<MenuItem> = [
+            new MenuItem(this.$filter('translate')("TOP_MENU_HOME_BUTTON"), null, "dashboard", "goToState", null, null),
+            new 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 MenuItem(this.$filter('translate')("TOP_MENU_ON_BOARD_BUTTON"), null, "onboardVendor", "goToState", null, null));
+            _.each(this.sdcConfig.hostedApplications, (hostedApp:IHostedApplication)=> {
+                if (hostedApp.exists) {
+                    tmpArray.push(new MenuItem(hostedApp.navTitle, null, hostedApp.defaultState, "goToState", null, null));
+                }
+            });
+        }
+
+        scope.topLvlMenu = new 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:MenuItemGroup, item: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 = ($filter:ng.IFilterService, $state:ng.ui.IStateService, $q:ng.IQService, userResourceService:IUserResourceClass, sdcConfig:IAppConfigurtaion)=> {
+        return new TopNavDirective($filter, $state, $q, userResourceService, sdcConfig);
+    };
+
+}
+
+TopNavDirective.factory.$inject = ['$filter', '$state', '$q', 'Sdc.Services.UserResourceService', 'sdcConfig'];