[SDC-29] catalog 1707 rebase commit.

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

3 files changed, 806 insertions, 0 deletions

diff --git a/catalog-ui/src/app/view-models/catalog/catalog-view-model.ts b/catalog-ui/src/app/view-models/catalog/catalog-view-model.ts
new file mode 100644
index 0000000000..0e7e4aaeae
--- /dev/null
+++ b/catalog-ui/src/app/view-models/catalog/catalog-view-model.ts
@@ -0,0 +1,303 @@
+'use strict';
+import {Component, IMainCategory, IGroup, IConfigStatuses, IAppMenu, IAppConfigurtaion, IUserProperties, ISubCategory} from "app/models";
+import {EntityService, IUserResourceClass, CacheService} from "app/services";
+import {ComponentFactory, ResourceType, MenuHandler, ChangeLifecycleStateHandler} from "app/utils";
+
+
+interface Checkboxes {
+    componentTypes:Array<string>;
+    resourceSubTypes:Array<string>;
+}
+
+interface CheckboxesFilter {
+    // Types
+    selectedComponentTypes:Array<string>;
+    selectedResourceSubTypes:Array<string>;
+    // Categories
+    selectedCategoriesModel:Array<string>;
+    // Statuses
+    selectedStatuses:Array<string>;
+}
+
+interface Gui {
+    isLoading:boolean;
+    onResourceSubTypesClick:Function;
+    onComponentTypeClick:Function;
+    onCategoryClick:Function;
+    onSubcategoryClick:Function;
+    onGroupClick:Function;
+}
+
+export interface ICatalogViewModelScope extends ng.IScope {
+    checkboxes:Checkboxes;
+    checkboxesFilter:CheckboxesFilter;
+    gui:Gui;
+
+    categories:Array<IMainCategory>;
+    confStatus:IConfigStatuses;
+    sdcMenu:IAppMenu;
+    catalogFilterdItems:Array<Component>;
+    expandedSection:Array<string>;
+    actionStrategy:any;
+    user:IUserProperties;
+    catalogMenuItem:any;
+    version:string;
+    sortBy:string;
+    reverse:boolean;
+    vfcmtType:string;
+
+    //this is for UI paging
+    numberOfItemToDisplay:number;
+    isAllItemDisplay:boolean;
+
+    changeLifecycleState(entity:any, state:string):void;
+    sectionClick (section:string):void;
+    order(sortBy:string):void;
+    getNumOfElements(num:number):string;
+    goToComponent(component:Component):void;
+    raiseNumberOfElementToDisplay():void;
+}
+
+export class CatalogViewModel {
+    static '$inject' = [
+        '$scope',
+        '$filter',
+        'Sdc.Services.EntityService',
+        'sdcConfig',
+        'sdcMenu',
+        '$state',
+        '$q',
+        'Sdc.Services.UserResourceService',
+        'Sdc.Services.CacheService',
+        'ComponentFactory',
+        'ChangeLifecycleStateHandler',
+        'MenuHandler'
+    ];
+
+    constructor(private $scope:ICatalogViewModelScope,
+                private $filter:ng.IFilterService,
+                private EntityService:EntityService,
+                private sdcConfig:IAppConfigurtaion,
+                private sdcMenu:IAppMenu,
+                private $state:ng.ui.IStateService,
+                private $q:ng.IQService,
+                private userResourceService:IUserResourceClass,
+                private cacheService:CacheService,
+                private ComponentFactory:ComponentFactory,
+                private ChangeLifecycleStateHandler:ChangeLifecycleStateHandler,
+                private MenuHandler:MenuHandler) {
+
+
+        this.initScopeMembers();
+        this.initCatalogData(); // Async task to get catalog from server.
+        this.initScopeMethods();
+    }
+
+    private initCatalogData = ():void => {
+        let onSuccess = (followedResponse:Array<Component>):void => {
+            this.$scope.catalogFilterdItems = followedResponse;
+            this.$scope.isAllItemDisplay = this.$scope.numberOfItemToDisplay >= this.$scope.catalogFilterdItems.length;
+            this.$scope.categories = this.cacheService.get('serviceCategories').concat(this.cacheService.get('resourceCategories')).concat(this.cacheService.get('productCategories'));
+            this.$scope.gui.isLoading = false;
+        };
+
+        let onError = ():void => {
+            console.info('Failed to load catalog CatalogViewModel::initCatalog');
+            this.$scope.gui.isLoading = false;
+        };
+        this.EntityService.getCatalog().then(onSuccess, onError);
+    };
+
+
+    private initScopeMembers = ():void => {
+        // Gui init
+        this.$scope.gui = <Gui>{};
+        this.$scope.gui.isLoading = true;
+        this.$scope.numberOfItemToDisplay = 0;
+        //this.$scope.categories = this.cacheService.get('categoriesMap');
+        this.$scope.sdcMenu = this.sdcMenu;
+        this.$scope.confStatus = this.sdcMenu.statuses;
+        this.$scope.expandedSection = ["type", "category", "product-category", "status"];
+        this.$scope.user = this.userResourceService.getLoggedinUser();
+        this.$scope.catalogMenuItem = this.sdcMenu.catalogMenuItem;
+        this.$scope.version = this.cacheService.get('version');
+        this.$scope.sortBy = 'lastUpdateDate';
+        this.$scope.reverse = true;
+
+
+        // Checklist init
+        this.$scope.checkboxes = <Checkboxes>{};
+        this.$scope.checkboxes.componentTypes = ['Resource', 'Service', 'Product'];
+        this.$scope.checkboxes.resourceSubTypes = ['VF', 'VFC', 'CP', 'VL'];
+
+        // Checkboxes filter init
+        this.$scope.checkboxesFilter = <CheckboxesFilter>{};
+        this.$scope.checkboxesFilter.selectedComponentTypes = [];
+        this.$scope.checkboxesFilter.selectedResourceSubTypes = [];
+        this.$scope.checkboxesFilter.selectedCategoriesModel = [];
+        this.$scope.checkboxesFilter.selectedStatuses = [];
+
+        //      this.$scope.isAllItemDisplay = this.$scope.numberOfItemToDisplay >= this.$scope.catalogFilterdItems.length;
+
+        this.$scope.vfcmtType = ResourceType.VFCMT;
+    };
+
+    private initScopeMethods = ():void => {
+        this.$scope.sectionClick = (section:string):void => {
+            let index:number = this.$scope.expandedSection.indexOf(section);
+            if (index !== -1) {
+                this.$scope.expandedSection.splice(index, 1);
+            } else {
+                this.$scope.expandedSection.push(section);
+            }
+        };
+
+
+        this.$scope.order = (sortBy:string):void => {//default sort by descending last update. default for alphabetical = ascending
+            this.$scope.reverse = (this.$scope.sortBy === sortBy) ? !this.$scope.reverse : (sortBy === 'lastUpdateDate') ? true : false;
+            this.$scope.sortBy = sortBy;
+        };
+
+
+        this.$scope.goToComponent = (component:Component):void => {
+            this.$scope.gui.isLoading = true;
+            this.$state.go('workspace.general', {id: component.uniqueId, type: component.componentType.toLowerCase()});
+        };
+
+
+        // Will print the number of elements found in catalog
+        this.$scope.getNumOfElements = (num:number):string => {
+            if (!num || num === 0) {
+                return "No Elements found";
+            } else if (num === 1) {
+                return "1 Element found";
+            } else {
+                return num + " Elements found";
+            }
+        };
+
+        /**
+         * Select | unselect sub resource when resource is clicked | unclicked.
+         * @param type
+         */
+        this.$scope.gui.onComponentTypeClick = (type:string):void => {
+            if (type === 'Resource') {
+                if (this.$scope.checkboxesFilter.selectedComponentTypes.indexOf('Resource') === -1) {
+                    // If the resource was not selected, unselect all childs.
+                    this.$scope.checkboxesFilter.selectedResourceSubTypes = [];
+                } else {
+                    // If the resource was selected, select all childs
+                    this.$scope.checkboxesFilter.selectedResourceSubTypes = angular.copy(this.$scope.checkboxes.resourceSubTypes);
+                }
+            }
+        };
+
+        /**
+         * Selecting | unselect resources when sub resource is clicked | unclicked.
+         */
+        this.$scope.gui.onResourceSubTypesClick = ():void => {
+            if (this.$scope.checkboxesFilter.selectedResourceSubTypes && this.$scope.checkboxesFilter.selectedResourceSubTypes.length === this.$scope.checkboxes.resourceSubTypes.length) {
+                this.$scope.checkboxesFilter.selectedComponentTypes.push('Resource');
+            } else {
+                this.$scope.checkboxesFilter.selectedComponentTypes = _.without(this.$scope.checkboxesFilter.selectedComponentTypes, 'Resource');
+            }
+        };
+
+        this.$scope.gui.onCategoryClick = (category:IMainCategory):void => {
+            // Select | Unselect all childs
+            if (this.isCategorySelected(category.uniqueId)) {
+                this.$scope.checkboxesFilter.selectedCategoriesModel = this.$scope.checkboxesFilter.selectedCategoriesModel.concat(angular.copy(_.map(category.subcategories, (item) => {
+                    return item.uniqueId;
+                })));
+                if (category.subcategories) {
+                    category.subcategories.forEach((sub:ISubCategory)=> { // Loop on all selected subcategories and mark the childrens
+                        this.$scope.checkboxesFilter.selectedCategoriesModel = this.$scope.checkboxesFilter.selectedCategoriesModel.concat(angular.copy(_.map(sub.groupings, (item) => {
+                            return item.uniqueId;
+                        })));
+                    });
+                }
+            } else {
+                this.$scope.checkboxesFilter.selectedCategoriesModel = _.difference(this.$scope.checkboxesFilter.selectedCategoriesModel, _.map(category.subcategories, (item) => {
+                    return item.uniqueId;
+                }));
+                if (category.subcategories) {
+                    category.subcategories.forEach((sub:ISubCategory)=> { // Loop on all selected subcategories and un mark the childrens
+                        this.$scope.checkboxesFilter.selectedCategoriesModel = _.difference(this.$scope.checkboxesFilter.selectedCategoriesModel, _.map(sub.groupings, (item) => {
+                            return item.uniqueId;
+                        }));
+                    });
+                }
+            }
+        };
+
+        this.$scope.gui.onSubcategoryClick = (category:IMainCategory, subCategory:ISubCategory):void => {
+            // Select | Unselect all childs
+            if (this.isCategorySelected(subCategory.uniqueId)) {
+                this.$scope.checkboxesFilter.selectedCategoriesModel = this.$scope.checkboxesFilter.selectedCategoriesModel.concat(angular.copy(_.map(subCategory.groupings, (item) => {
+                    return item.uniqueId;
+                })));
+            } else {
+                this.$scope.checkboxesFilter.selectedCategoriesModel = _.difference(this.$scope.checkboxesFilter.selectedCategoriesModel, _.map(subCategory.groupings, (item) => {
+                    return item.uniqueId;
+                }));
+            }
+
+            // Mark | Un mark the parent when all childs selected.
+            if (this.areAllCategoryChildsSelected(category)) {
+                // Add the category to checkboxesFilter.selectedCategoriesModel
+                this.$scope.checkboxesFilter.selectedCategoriesModel.push(category.uniqueId);
+            } else {
+                this.$scope.checkboxesFilter.selectedCategoriesModel = _.without(this.$scope.checkboxesFilter.selectedCategoriesModel, category.uniqueId);
+            }
+
+        };
+
+        this.$scope.raiseNumberOfElementToDisplay = ():void => {
+            this.$scope.numberOfItemToDisplay = this.$scope.numberOfItemToDisplay + 35;
+            if (this.$scope.catalogFilterdItems) {
+                this.$scope.isAllItemDisplay = this.$scope.numberOfItemToDisplay >= this.$scope.catalogFilterdItems.length;
+            }
+        };
+
+        this.$scope.gui.onGroupClick = (subCategory:ISubCategory):void => {
+            // Mark | Un mark the parent when all childs selected.
+            if (this.areAllSubCategoryChildsSelected(subCategory)) {
+                // Add the category to checkboxesFilter.selectedCategoriesModel
+                this.$scope.checkboxesFilter.selectedCategoriesModel.push(subCategory.uniqueId);
+            } else {
+                this.$scope.checkboxesFilter.selectedCategoriesModel = _.without(this.$scope.checkboxesFilter.selectedCategoriesModel, subCategory.uniqueId);
+            }
+        };
+
+
+    };
+
+    private areAllCategoryChildsSelected = (category:IMainCategory):boolean => {
+        if (!category.subcategories) {
+            return false;
+        }
+        let allIds = _.map(category.subcategories, (sub:ISubCategory)=> {
+            return sub.uniqueId;
+        });
+        let total = _.intersection(this.$scope.checkboxesFilter.selectedCategoriesModel, allIds);
+        return total.length === category.subcategories.length ? true : false;
+    };
+
+    private areAllSubCategoryChildsSelected = (subCategory:ISubCategory):boolean => {
+        if (!subCategory.groupings) {
+            return false;
+        }
+        let allIds = _.map(subCategory.groupings, (group:IGroup)=> {
+            return group.uniqueId;
+        });
+        let total = _.intersection(this.$scope.checkboxesFilter.selectedCategoriesModel, allIds);
+        return total.length === subCategory.groupings.length ? true : false;
+    };
+
+    private isCategorySelected = (uniqueId:string):boolean => {
+        if (this.$scope.checkboxesFilter.selectedCategoriesModel.indexOf(uniqueId) !== -1) {
+            return true;
+        }
+        return false;
+    };
+}
diff --git a/catalog-ui/src/app/view-models/catalog/catalog-view.html b/catalog-ui/src/app/view-models/catalog/catalog-view.html
new file mode 100644
index 0000000000..03ca4cb81f
--- /dev/null
+++ b/catalog-ui/src/app/view-models/catalog/catalog-view.html
@@ -0,0 +1,199 @@
+<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">
+
+        <!-- LEFT SIDE -->
+        <perfect-scrollbar scroll-y-margin-offset="0" class="sdc-catalog-body-container w-sdc-left-sidebar" include-padding="true">
+            <div class="sdc-catalog-leftbar-container">
+
+                <div class="sdc-catalog-type-filter-container">
+                    <div
+                        class="i-sdc-designer-leftbar-section-title pointer"
+                        data-ng-click="sectionClick('type')"
+                        data-ng-class="{'expanded': expandedSection.indexOf('type') !== -1}">
+                        <span class="i-sdc-designer-leftbar-section-title-icon"></span>
+                        <span class="i-sdc-designer-leftbar-section-title-text" data-tests-id="typeFilterTitle">Type</span>
+                    </div>
+                    <div class="i-sdc-designer-leftbar-section-content">
+                        <ul class="list-unstyled i-sdc-designer-leftbar-section-content-ul">
+                            <li class="i-sdc-designer-leftbar-section-content-ul-li" data-ng-repeat="type in checkboxes.componentTypes">
+
+                                <sdc-checkbox elem-id="checkbox-{{type | lowercase | clearWhiteSpaces}}"
+                                              sdc-checklist-model="checkboxesFilter.selectedComponentTypes"
+                                              sdc-checklist-value="type"
+                                              data-ng-click="gui.onComponentTypeClick(type)"
+                                              text="{{type}}"></sdc-checkbox>
+
+                                <ul class="list-unstyled i-sdc-catalog-subcategories-checkbox" data-ng-if="type==='Resource'">
+                                    <li data-ng-repeat="subType in checkboxes.resourceSubTypes">
+
+                                        <sdc-checkbox elem-id="checkbox-{{subType | lowercase | clearWhiteSpaces}}"
+                                                      sdc-checklist-model="checkboxesFilter.selectedResourceSubTypes"
+                                                      sdc-checklist-value="subType"
+                                                      data-ng-click="gui.onResourceSubTypesClick()"
+                                                      text="{{subType}}"></sdc-checkbox>
+
+                                    </li>
+                                </ul>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+
+                <div class="sdc-catalog-categories-filter-container">
+                    <div
+                        class="i-sdc-designer-leftbar-section-title pointer"
+                        data-ng-click="sectionClick('category')"
+                        data-ng-class="{'expanded': expandedSection.indexOf('category') !== -1}">
+                        <span class="i-sdc-designer-leftbar-section-title-icon"></span>
+                        <span class="i-sdc-designer-leftbar-section-title-text" data-tests-id="categoriesFilterTitle">Categories</span>
+                    </div>
+                    <div class="i-sdc-designer-leftbar-section-content">
+                        <!-- CATEGORY CHECKBOX -->
+                        <ul class="list-unstyled i-sdc-designer-leftbar-section-content-ul">
+                            <li class="i-sdc-designer-leftbar-section-content-ul-li"
+                                data-ng-repeat="category in categories | categoryTypeFilter:checkboxesFilter.selectedComponentTypes:checkboxesFilter.selectedResourceSubTypes | orderBy: category">
+
+                                <sdc-checkbox elem-id="checkbox-{{category.uniqueId | lowercase | clearWhiteSpaces}}"
+                                              sdc-checklist-model="checkboxesFilter.selectedCategoriesModel"
+                                              sdc-checklist-value="category.uniqueId"
+                                              data-tests-id="{{category.uniqueId}}"
+                                              data-ng-click="gui.onCategoryClick(category)"
+                                              text="{{category.name}}"></sdc-checkbox>
+
+                                <!-- SUB CATEGORY CHECKBOX -->
+                                <ul class="list-unstyled i-sdc-catalog-subcategories-checkbox" data-ng-if="category.subcategories && category.subcategories.length>0">
+                                    <li ng-repeat="subcategory in category.subcategories track by subcategory.uniqueId | orderBy:'name'">
+
+                                        <sdc-checkbox elem-id="checkbox-{{subcategory.uniqueId | lowercase | clearWhiteSpaces}}"
+                                                      sdc-checklist-model="checkboxesFilter.selectedCategoriesModel"
+                                                      sdc-checklist-value="subcategory.uniqueId"
+                                                      data-tests-id="{{subcategory.uniqueId}}"
+                                                      data-ng-click="gui.onSubcategoryClick($parent.category, subcategory)"
+                                                      text="{{subcategory.name}}"></sdc-checkbox>
+
+                                        <!-- GROUPING CHECKBOX -->
+                                        <ul class=" list-unstyled i-sdc-catalog-grouping-checkbox" data-ng-if="subcategory.groupings && subcategory.groupings.length>0">
+                                            <li ng-repeat="grouping in subcategory.groupings track by grouping.uniqueId | orderBy:'name'">
+
+                                                <sdc-checkbox elem-id="checkbox-{{grouping.uniqueId | lowercase | clearWhiteSpaces}}"
+                                                              sdc-checklist-model="checkboxesFilter.selectedCategoriesModel"
+                                                              sdc-checklist-value="grouping.uniqueId"
+                                                              data-ng-click="gui.onGroupClick($parent.subcategory)"
+                                                              text="{{grouping.name}}"></sdc-checkbox>
+
+                                            </li>
+                                        </ul>
+                                    </li><!-- Close subcategory -->
+                                </ul><!-- Close subcategories -->
+                            </li><!-- Close main category -->
+                        </ul><!-- Close main categories -->
+
+                    </div>
+                </div>
+
+                <!-- STATUS -->
+                <div class="sdc-catalog-status-filter-container">
+                    <div
+                        class="i-sdc-designer-leftbar-section-title pointer"
+                        data-ng-click="sectionClick('status')"
+                        data-ng-class="{'expanded': expandedSection.indexOf('status') !== -1}">
+                        <span class="i-sdc-designer-leftbar-section-title-icon"></span>
+                        <span class="i-sdc-designer-leftbar-section-title-text" data-tests-id="statusFilterTitle">Status</span>
+                    </div>
+
+                    <div class="i-sdc-designer-leftbar-section-content">
+                        <ul class="list-unstyled i-sdc-designer-leftbar-section-content-ul">
+                            <!--li data-ng-repeat="(key, value) in confStatus" -->
+
+                            <li class="i-sdc-designer-leftbar-section-content-ul-li"
+                                data-ng-repeat="(key, state) in confStatus | catalogStatusFilter">
+
+                                <sdc-checkbox elem-id="checkbox-{{key | lowercase | clearWhiteSpaces}}"
+                                              sdc-checklist-model="checkboxesFilter.selectedStatuses"
+                                              sdc-checklist-value="state.values"
+                                              text="{{state.name}}"></sdc-checkbox>
+
+                                <div class="i-sdc-categories-list-item-icon"></div>
+                                </label>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+
+            </div>
+        </perfect-scrollbar>
+
+        <!-- RIGHT SIDE -->
+        <perfect-scrollbar id="catalog-main-scroll" include-padding="true" class="w-sdc-main-right-container w-sdc-catalog-main">
+
+            <!-- HEADER -->
+            <div>
+                <div class="w-sdc-dashboard-catalog-header">
+                    {{getNumOfElements((catalogFilterdItems| filter:{resourceType:('!'+vfcmtType)} | entityFilter:checkboxesFilter | filter:search).length)}}
+                </div>
+                <div class="w-sdc-dashboard-catalog-header-right">
+                    <span class="w-sdc-dashboard-catalog-header-order" translate="SORT_CAPTION"></span>&nbsp;&nbsp;
+                    <a class="w-sdc-dashboard-catalog-sort" data-tests-id="sort-by-last-update" data-ng-class="{'blue' : sortBy==='lastUpdateDate'}"
+                       ng-click="order('lastUpdateDate')" translate="SORT_BY_UPDATE_DATE"></a>&nbsp;
+                    <span data-ng-show="sortBy === 'lastUpdateDate'" class="w-sdc-catalog-sort-arrow" data-ng-class="{'down': reverse, 'up':!reverse}"></span>
+                    &nbsp;|&nbsp;
+                    <a class="w-sdc-dashboard-catalog-sort" data-tests-id="sort-by-alphabetical" data-ng-class="{'blue' : sortBy!=='lastUpdateDate'}"
+                       ng-click="order('name | resourceName')" translate="SORT_ALPHABETICAL"></a>&nbsp;
+                    <span data-ng-show="sortBy !== 'lastUpdateDate'" class="w-sdc-catalog-sort-arrow" data-ng-class="{'down': reverse, 'up':!reverse}"></span>
+                </div>
+            </div>
+
+            <div infinite-scroll-disabled='isAllItemDisplay'  infinite-scroll="raiseNumberOfElementToDisplay()" infinite-scroll-container="'#catalog-main-scroll'" infinite-scroll-parent>
+
+                <div class='w-sdc-row-flex-items'>
+                    
+                    <!-- Tile new -->
+                    <div data-ng-init="component.filterTerm = component.name +  ' '  + component.description + ' ' + component.tags.toString() + ' ' + component.version"
+                        class="sdc-tile-catalog sdc-tile-fix-width"
+                        data-ng-repeat="component in catalogFilterdItems| filter:{resourceType:('!'+vfcmtType)} | entityFilter:checkboxesFilter | filter:search | orderBy:sortBy:reverse | limitTo:numberOfItemToDisplay"
+                        >
+
+                        <div class="sdc-tile-header">
+                            <div class='sdc-tile-header-type' data-ng-class="{'purple': component.isResource(), 'blue': !component.isResource()}">
+                                <div data-ng-if="component.isResource()" data-tests-id="asset-type">{{component.getComponentSubType()}}</div>
+                                <div data-ng-if="component.isService()">S</div>
+                            </div>
+                        </div>
+                        <div class='sdc-tile-content' data-ng-click="gui.isLoading || goToComponent(component)">
+                            <div class='sdc-tile-content-icon'>
+                                <div class="{{component.iconSprite}} {{component.icon}}"
+                                    data-ng-class="{'sprite-resource-icons': component.isResource(), 'sprite-services-icons': component.isService()}"
+                                    data-tests-id="{{component.name}}"></div>
+                            </div>
+                            <div class='sdc-tile-content-info'>
+                                <div class="sdc-tile-content-info-item-name" data-tests-id="{{component.name | resourceName}}" sdc-smart-tooltip>{{component.name | resourceName}}</div>
+                                <div class="sdc-tile-content-info-version-info">
+                                    <div class="sdc-tile-content-info-version-info-text" data-tests-id="{{component.name}}Version">V {{component.version}}</div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class='sdc-tile-footer'>
+                            <div class='sdc-tile-footer-text'>{{component.getStatus(sdcMenu)}}</div>
+                        </div>               
+
+                    </div>
+                    <!-- Tile new -->
+                    
+                </div>
+                
+            </div>
+        </perfect-scrollbar>
+
+    </div>
+
+    <top-nav top-lvl-selected-index="1" search-bind="search.filterTerm" version="{{version}}"></top-nav>
+
+    <ecomp-footer></ecomp-footer>
+
+</div>
diff --git a/catalog-ui/src/app/view-models/catalog/catalog.less b/catalog-ui/src/app/view-models/catalog/catalog.less
new file mode 100644
index 0000000000..9db9192167
--- /dev/null
+++ b/catalog-ui/src/app/view-models/catalog/catalog.less
@@ -0,0 +1,304 @@
+.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;
+    }
+}