re base code

Change-Id: I12a5ca14a6d8a87e9316b9ff362eb131105f98a5
Issue-ID: SDC-1566
Signed-off-by: Michael Lando <ml636r@att.com>

1 files changed, 55 insertions, 61 deletions

diff --git a/catalog-ui/src/app/view-models/catalog/catalog-view.html b/catalog-ui/src/app/view-models/catalog/catalog-view.html
index 76f23573a1..0546db3196 100644
--- a/catalog-ui/src/app/view-models/catalog/catalog-view.html
+++ b/catalog-ui/src/app/view-models/catalog/catalog-view.html
@@ -7,10 +7,31 @@
 
     <div class="w-sdc-main-container">
 
+        <div
+            class="i-sdc-designer-leftbar-section-left-switch-header"
+            data-tests-id="catalog-selector-button"
+            data-ng-click="showCatalogSelector=!showCatalogSelector">
+            <div  class="i-sdc-designer-leftbar-section-left-switch-header-text">
+                {{selectedCatalogItem.title}}
+            </div>
+            <div class="i-sdc-designer-leftbar-section-left-switch-header-icon sprite-new arrow-up-small">&nbsp;</div>
+
+            <div
+                class="sdc-catalog-selector-wrapper"
+                data-ng-show="showCatalogSelector">
+                <div
+                    class="sdc-catalog-selector-item"
+                    data-ng-repeat="leftSwitchItem in catalogSelectorItems track by $index"
+                    data-tests-id="catalog-selector-{{leftSwitchItem.value}}"
+                    data-ng-click="selectLeftSwitchItem(leftSwitchItem)">
+                    <span>{{leftSwitchItem.title}}</span>
+                </div>
+            </div>
+        </div>
+
         <!-- LEFT SIDE -->
-        <perfect-scrollbar scroll-y-margin-offset="0" class="sdc-catalog-body-container w-sdc-left-sidebar" include-padding="true">
+        <perfect-scrollbar scroll-y-margin-offset="0" class="sdc-catalog-body-container w-sdc-left-sidebar i-sdc-designer-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"
@@ -23,20 +44,20 @@
                         <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}}"
+                                <ng1-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>
+                                              sdc-checked-change="gui.onComponentTypeClick(type, checked)"
+                                              text="{{type}}"></ng1-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}}"
+                                        <ng1-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>
+                                                      sdc-checked-change="gui.onComponentSubTypesClick(subType, type, checked)"
+                                                      text="{{subType}}"></ng1-checkbox>
 
                                     </li>
                                 </ul>
@@ -59,33 +80,33 @@
                             <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}}"
+                                <ng1-checkbox elem-id="checkbox-{{category.uniqueId | lowercase | clearWhiteSpaces}}"
                                               sdc-checklist-model="checkboxesFilter.selectedCategoriesModel"
                                               sdc-checklist-value="category.uniqueId"
+                                              sdc-checked-change="gui.onCategoryClick(category, checked)"
                                               data-tests-id="{{category.uniqueId}}"
-                                              data-ng-click="gui.onCategoryClick(category)"
-                                              text="{{category.name}}"></sdc-checkbox>
+                                              text="{{category.name}}"></ng1-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}}"
+                                        <ng1-checkbox elem-id="checkbox-{{subcategory.uniqueId | lowercase | clearWhiteSpaces}}"
                                                       sdc-checklist-model="checkboxesFilter.selectedCategoriesModel"
                                                       sdc-checklist-value="subcategory.uniqueId"
+                                                      sdc-checked-change="gui.onCategoryClick(subcategory, checked)"
                                                       data-tests-id="{{subcategory.uniqueId}}"
-                                                      data-ng-click="gui.onSubcategoryClick($parent.category, subcategory)"
-                                                      text="{{subcategory.name}}"></sdc-checkbox>
+                                                      text="{{subcategory.name}}"></ng1-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}}"
+                                                <ng1-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>
+                                                              sdc-checked-change="gui.onCategoryClick(grouping, checked)"
+                                                              text="{{grouping.name}}"></ng1-checkbox>
 
                                             </li>
                                         </ul>
@@ -112,15 +133,15 @@
                             <!--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">
+                                data-ng-repeat="(key, state) in confStatus">
 
-                                <sdc-checkbox elem-id="checkbox-{{key | lowercase | clearWhiteSpaces}}"
+                                <ng1-checkbox elem-id="checkbox-{{key | lowercase | clearWhiteSpaces}}"
                                               sdc-checklist-model="checkboxesFilter.selectedStatuses"
                                               sdc-checklist-value="state.values"
-                                              text="{{state.name}}"></sdc-checkbox>
+                                              sdc-checked-change="gui.onStatusClick(key, state, checked)"
+                                              text="{{state.name}}"></ng1-checkbox>
 
                                 <div class="i-sdc-categories-list-item-icon"></div>
-                                </label>
                             </li>
                         </ul>
                     </div>
@@ -134,66 +155,39 @@
 
             <!-- HEADER -->
             <div>
-                <div class="w-sdc-dashboard-catalog-header">
-                    {{getNumOfElements((catalogFilterdItems| entityFilter:checkboxesFilter | filter:search).length)}}
-                </div>
+                <div class="w-sdc-dashboard-catalog-items-header"
+                     ng-bind-html="getNumOfElements((catalogFilterdItems| 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;
+                    <span class="w-sdc-dashboard-catalog-header-order1" 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;
+                       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 infinite-scroll-disabled='isAllItemDisplay'  infinite-scroll="raiseNumberOfElementToDisplay()" infinite-scroll-container="'#catalog-main-scroll'" infinite-scroll-distance="'0.2'" 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 sdc-tile-fix-width"
-                        data-ng-repeat="component in catalogFilterdItems| entityFilter:checkboxesFilter | filter:search | orderBy:sortBy:reverse | limitTo:numberOfItemToDisplay"
-                        >
-
-                        <div class='sdc-tile-header' 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 class='sdc-tile-content' data-ng-click="gui.isLoading || goToComponent(component)">
-                            <div class='sdc-tile-content-icon centered'>
-                                <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-info-line title" data-tests-id="{{component.name | resourceName}}" sdc-smart-tooltip>{{component.name | resourceName}}</div>
-                                <div class="sdc-tile-info-line subtitle" data-tests-id="{{component.name}}Version">
-                                    V {{component.version}}
-                                </div>
-                            </div>
-                        </div>
-                        <div class='sdc-tile-footer'>
-                            <div class="sdc-tile-footer-content">
-                                <div class='sdc-tile-footer-text'>{{component.getStatus(sdcMenu)}}</div>
-                            </div>
-                        </div>               
 
-                    </div>
                     <!-- Tile new -->
-                    
+                    <ng2-ui-tile data-ng-repeat="component in catalogFilterdItems| entityFilter:checkboxesFilter | filter:search | orderBy:sortBy:reverse | limitTo:numberOfItemToDisplay"
+                        data-ng-init="component.filterTerm = component.name +  ' '  + component.description + ' ' + component.tags.toString() + ' ' + component.version;"
+                        [component]="component" (on-tile-click)="gui.isLoading || goToComponent(component)"></ng2-ui-tile>
+                    <!-- Tile new -->
+
                 </div>
-                
+
             </div>
         </perfect-scrollbar>
 
     </div>
 
-    <top-nav [top-lvl-selected-index]="1" [search-term]="search.filterTerm" (search-term-change)="search.filterTerm=$event" [version]="version"></top-nav>
+    <top-nav [top-lvl-selected-index]="1" [search-term]="search.filterTerm" (search-term-change)="gui.changeFilterTerm($event)" [version]="version"></top-nav>
 
 
 </div>