[SDC-29] catalog 1707 rebase commit.

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

3 files changed, 444 insertions, 0 deletions

diff --git a/catalog-ui/src/app/view-models/onboard-vendor/onboard-vendor-view-model.ts b/catalog-ui/src/app/view-models/onboard-vendor/onboard-vendor-view-model.ts
new file mode 100644
index 0000000000..faeaefb5e5
--- /dev/null
+++ b/catalog-ui/src/app/view-models/onboard-vendor/onboard-vendor-view-model.ts
@@ -0,0 +1,125 @@
+'use strict';
+import {IUserProperties} from "app/models";
+import {MenuItemGroup, MenuItem} from "app/utils";
+import {CacheService} from "app/services";
+
+export class BreadcrumbsMenuItem {
+    key:string;
+    displayText:string;
+}
+
+export class BreadcrumbsMenu {
+    selectedKey:string;
+    menuItems:Array<BreadcrumbsMenuItem>;
+}
+
+export class BreadcrumbsPath {
+    selectedKeys:Array<string>;
+}
+
+export class VendorData {
+    breadcrumbs:BreadcrumbsPath;
+}
+
+export interface IOnboardVendorViewModelScope extends ng.IScope {
+    vendorData:VendorData;
+    onVendorEvent:Function;
+    topNavMenuModel:Array<MenuItemGroup>;
+    topNavRootMenu:MenuItemGroup;
+    user:IUserProperties;
+    version:string;
+}
+
+export class OnboardVendorViewModel {
+    static '$inject' = [
+        '$scope',
+        '$q',
+        'Sdc.Services.CacheService'
+    ];
+
+    private firstControlledTopNavMenu:MenuItemGroup;
+
+    constructor(private $scope:IOnboardVendorViewModelScope,
+                private $q:ng.IQService,
+                private cacheService:CacheService) {
+
+        this.$scope.vendorData = {
+            breadcrumbs: {
+                selectedKeys: []
+            }
+        };
+
+        this.$scope.version = this.cacheService.get('version');
+
+        this.$scope.onVendorEvent = (eventName:string, data:any):void => {
+            switch (eventName) {
+                case 'breadcrumbsupdated':
+                    this.handleBreadcrumbsUpdate(data);
+                    break;
+            }
+        };
+
+        this.$scope.topNavMenuModel = [];
+
+        this.$scope.user = this.cacheService.get('user');
+    }
+
+    updateBreadcrumbsPath = (selectedKeys:Array<string>):ng.IPromise<boolean> => {
+        let topNavMenuModel = this.$scope.topNavMenuModel;
+        let startIndex = topNavMenuModel.indexOf(this.firstControlledTopNavMenu);
+        if (startIndex === -1) {
+            startIndex = topNavMenuModel.length;
+        }
+        topNavMenuModel.splice(startIndex + selectedKeys.length);
+        this.$scope.vendorData = {
+            breadcrumbs: {selectedKeys: selectedKeys}
+        };
+
+        return this.$q.when(true);
+    };
+
+    handleBreadcrumbsUpdate(breadcrumbsMenus:Array<BreadcrumbsMenu>):void {
+        let selectedKeys = [];
+        let topNavMenus = breadcrumbsMenus.map((breadcrumbMenu, breadcrumbIndex) => {
+            let topNavMenu = new MenuItemGroup();
+            topNavMenu.menuItems = breadcrumbMenu.menuItems.map(menuItem =>
+                new MenuItem(
+                    menuItem.displayText,
+                    this.updateBreadcrumbsPath,
+                    null,
+                    null,
+                    [selectedKeys.concat([menuItem.key])]
+                )
+            );
+            topNavMenu.selectedIndex = _.findIndex(
+                breadcrumbMenu.menuItems,
+                menuItem => menuItem.key === breadcrumbMenu.selectedKey
+            );
+            selectedKeys.push(breadcrumbMenu.selectedKey);
+            return topNavMenu;
+        });
+
+        let topNavMenuModel = this.$scope.topNavMenuModel;
+        let len = topNavMenuModel.length;
+        let startIndex = topNavMenuModel.indexOf(this.firstControlledTopNavMenu);
+        if (startIndex === -1) {
+            startIndex = len;
+        }
+        topNavMenuModel.splice(startIndex, len - startIndex);
+        topNavMenuModel.push.apply(topNavMenuModel, topNavMenus);
+        this.firstControlledTopNavMenu = topNavMenus[0];
+
+        if (startIndex === 1 && this.$scope.topNavRootMenu == null) {
+            let topNavRootMenu = topNavMenuModel[0];
+            let onboardItem = topNavRootMenu.menuItems[topNavRootMenu.selectedIndex];
+            let originalCallback = onboardItem.callback;
+            onboardItem.callback = (...args) => {
+                let ret = this.updateBreadcrumbsPath([]);
+                return originalCallback && originalCallback.apply(undefined, args) || ret;
+            };
+            this.$scope.topNavRootMenu = topNavRootMenu;
+        }
+
+        this.updateBreadcrumbsPath(selectedKeys);
+    }
+}
diff --git a/catalog-ui/src/app/view-models/onboard-vendor/onboard-vendor-view.html b/catalog-ui/src/app/view-models/onboard-vendor/onboard-vendor-view.html
new file mode 100644
index 0000000000..734fb93daf
--- /dev/null
+++ b/catalog-ui/src/app/view-models/onboard-vendor/onboard-vendor-view.html
@@ -0,0 +1,16 @@
+<div class="sdc-catalog-container">
+
+    <loader data-display="gui.isLoading"></loader>
+<!--
+    <ecomp-header menu-data="menuItems" version="{{version}}"></ecomp-header>
+-->
+
+    <div class="w-sdc-main-container">
+        <punch-out name="'onboarding/vendor'" data="vendorData"  user="user" on-event="onVendorEvent"></punch-out>
+    </div>
+
+    <top-nav top-lvl-selected-index="2" search-bind="search.filterTerm" menu-model="topNavMenuModel" version="{{version}}" hide-search="true"></top-nav>
+
+    <ecomp-footer></ecomp-footer>
+
+</div>
diff --git a/catalog-ui/src/app/view-models/onboard-vendor/onboard-vendor.less b/catalog-ui/src/app/view-models/onboard-vendor/onboard-vendor.less
new file mode 100644
index 0000000000..4a16ca2b5b
--- /dev/null
+++ b/catalog-ui/src/app/view-models/onboard-vendor/onboard-vendor.less
@@ -0,0 +1,303 @@
+.sdc-catalog-container {
+
+    .i-sdc-categories-list-item {
+        font-weight: normal;
+    }
+
+    // Checkboxes
+    .i-sdc-designer-leftbar-section-content-ul {
+        padding: 0;
+        margin: 0;
+
+        .i-sdc-catalog-subcategories-checkbox {
+            padding: 0 0 0 20px;
+            margin: 0;
+
+            .i-sdc-catalog-grouping-checkbox {
+                padding: 0 0 0 20px;
+                margin: 0;
+            }
+
+        }
+
+    }
+
+    .i-sdc-designer-leftbar-section-content-li {
+        &:last-child {
+            .i-sdc-categories-list-item {
+                margin: 0;
+            }
+        }
+    }
+
+    .i-sdc-categories-list-item {
+        display: block;
+        //margin-bottom: 5px;
+        //padding-left: 15px;
+        //text-indent: -24px;
+        vertical-align: top;
+        font-weight: bold;
+    }
+
+    .i-sdc-subcategories-list-item {
+        display: block;
+        //padding-left: 20px;
+        vertical-align: top;
+        font-weight: normal;
+        margin: 0;
+        //text-indent: -10px;
+    }
+
+    /*Added by - Ikram */
+     .i-sdc-product-input,
+    .i-sdc-product-select {
+        border: 1px solid @border_color_f;
+        min-height: 30px;
+        padding: 0;
+        width: 100%;
+        margin: 1px 0;
+        background-color: #F2F2F2;
+        outline: none;
+
+        &:disabled {
+            .disabled;
+        }
+        optgroup{
+            color: @color_u;
+            option{
+                color: @color_b;
+            }
+        }
+    }
+
+    .i-sdc-categories-list-item-icon {
+        display: inline-block;
+        float: right;
+        position: relative;
+        right: -8px;
+        top: 6px;
+    }
+
+    .i-sdc-categories-list-item {
+        margin-top: 7px;
+        &.NOT_CERTIFIED_CHECKOUT,
+        &.NOT_CERTIFIED_CHECKIN {
+            .i-sdc-categories-list-item-icon {
+                background: url('/assets/styles/images/sprites/sprite-global-old.png') no-repeat -53px -2889px;
+                width: 14px;
+                height: 14px;
+
+            }
+        }
+
+        &.CERTIFIED {
+            .i-sdc-categories-list-item-icon {
+                background: url('/assets/styles/images/sprites/sprite-global-old.png') no-repeat -53px -3034px;
+                width: 14px;
+                height: 16px;
+            }
+        }
+
+        &.READY_FOR_CERTIFICATION {
+            .i-sdc-categories-list-item-icon {
+                background: url('/assets/styles/images/sprites/sprite-global-old.png') no-repeat -53px -2985px;
+                width: 14px;
+                height: 16px;
+            }
+        }
+
+        &.CERTIFICATION_IN_PROGRESS {
+            .i-sdc-categories-list-item-icon {
+                background: url('/assets/styles/images/sprites/sprite-global-old.png') no-repeat -53px -2934px;
+                width: 14px;
+                height: 16px;
+            }
+        }
+
+        &.DISTRIBUTED,
+        &.TBD {
+            .i-sdc-categories-list-item-icon {
+                background: url('/assets/styles/images/sprites/sprite-global-old.png') no-repeat -43px -3087px;
+                width: 24px;
+                height: 14px;
+
+            }
+        }
+    }
+
+    .i-sdc-categories-list-input {
+        margin: 8px;
+
+    }
+
+    .i-sdc-subcategories-list-input {
+
+        margin: 8px;
+    }
+    .i-sdc-subcategories-list-input-container {
+        margin: 0px 0px 0px 20px;
+        padding: 2px;
+    }
+
+    .w-sdc-header-catalog-search-container {
+        display: table;
+        padding: 21px 0;
+        position: relative;
+
+        .w-sdc-designer-leftbar-search-input {
+            color: #000;
+            width: 300px;
+        }
+
+       // .magnification {
+      //      .sprite;
+      //      .sprite.magnification-glass;
+      //      .hand;
+      //      position: absolute;
+      //      top: 40px;
+     //       right: 42px;
+      //  }
+    }
+
+    .w-sdc-catalog-main {
+        padding: 10px 12px;
+    }
+    .w-sdc-dashboard-catalog-header {
+        .b_9;
+        display: inline-block;
+        font-style: italic;
+        font-weight: bold;
+        padding-left: 10px;
+    }
+
+    .w-sdc-dashboard-catalog-header-order {
+        .b_9;
+        font-weight: 800;
+    }
+
+    .w-sdc-dashboard-catalog-sort {
+        .b_9;
+        font-weight: bold;
+        white-space:pre;
+        &:hover{
+            .hand;
+            text-decoration: none;
+            .a_9;
+        }
+        &.blue {
+            .a_9;
+        }
+    }
+
+    .w-sdc-catalog-sort-arrow{
+        display: inline-block;
+        &.up{
+            .b_9;
+            width: 0;
+            height: 0;
+            border-left: 5px solid transparent;
+            border-right: 5px solid transparent;
+            border-bottom: 5px solid ;
+        }
+        &.down{
+            .b_9;
+            width: 0;
+            height: 0;
+            border-left: 5px solid transparent;
+            border-right: 5px solid transparent;
+            border-top: 5px solid;
+        }
+    }
+
+
+
+
+    .w-sdc-dashboard-catalog-header-right{
+        float: right;
+        display: inline-block;
+        padding-right:34px;
+    }
+
+    .w-sdc-header-catalog-search-input {
+        width: 420px;
+        display: table-cell;
+        padding: 0 25px 1px 10px;
+        border: 1px solid #bcbcbc;
+        .border-radius(10px);
+        height: 30px;
+        margin: 10px 30px;
+        outline: none;
+    }
+
+    .sdc-catalog-type-filter-container {
+        margin-top: -1px;
+    }
+
+    .i-sdc-designer-leftbar-section-title {
+        text-transform: uppercase;
+        .l_14_m;
+        line-height: 30px;
+    }
+
+    .i-sdc-designer-leftbar-section-title-icon {
+        .hand;
+        .tlv-sprite;
+        .footer-close;
+        transition: .3s all;
+        margin-top: -4px;
+    }
+
+    .i-sdc-designer-leftbar-section-title-text {
+        margin-left: 20px;
+    }
+
+    .seperator-left,
+    .seperator-right {
+        border-right: solid 1px @color_m;
+        display: table-cell;
+        width: 2px;
+    }
+
+    // Rotate catalog left side arrows
+    .i-sdc-designer-leftbar-section-title.expanded .i-sdc-designer-leftbar-section-title-icon {
+        transform: rotate(180deg);
+    }
+
+    // Transform catalog left side sections
+    .i-sdc-designer-leftbar-section-title + .i-sdc-designer-leftbar-section-content {
+        max-height: 0px;
+        margin: 0 auto;
+        transition: all .3s;
+        overflow: hidden;
+        padding: 0 10px 0 18px;
+    }
+
+    .i-sdc-designer-leftbar-section-title.expanded + .i-sdc-designer-leftbar-section-content {
+        max-height: 9999px;
+        margin: 0 auto 1px;
+        transition: all .3s;
+        padding: 10px 18px 10px 18px;
+        overflow: hidden;
+    }
+
+}
+
+.w-sdc-search-icon{
+    position: absolute;
+    right: 40px;
+    top: 40px;
+    &.leftbar{
+        top: 19px;
+        right: 18px;
+    }
+    &.magnification {
+        .sprite;
+        .sprite.magnification-glass;
+        .hand;
+    }
+    &.cancel {
+        .sprite;
+        .sprite.clear-text;
+        .hand;
+    }
+}