aboutsummaryrefslogtreecommitdiffstats
path: root/catalog-ui/src/app/view-models/catalog/catalog-view.html
diff options
context:
space:
mode:
authorMichael Lando <ml636r@att.com>2018-07-29 16:13:45 +0300
committerMichael Lando <ml636r@att.com>2018-07-29 16:20:34 +0300
commit5b593496b8f1b8e8be8d7d2dbcc223332e65a49b (patch)
tree2f9dfc45191e723da69cf74be7829784e9741b94 /catalog-ui/src/app/view-models/catalog/catalog-view.html
parent9200382f2ce7b4bb729aa287d0878004b2d2b4f9 (diff)
re base code
Change-Id: I12a5ca14a6d8a87e9316b9ff362eb131105f98a5 Issue-ID: SDC-1566 Signed-off-by: Michael Lando <ml636r@att.com>
Diffstat (limited to 'catalog-ui/src/app/view-models/catalog/catalog-view.html')
-rw-r--r--catalog-ui/src/app/view-models/catalog/catalog-view.html116
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>