diff options
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.html | 116 |
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"> </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> + <span class="w-sdc-dashboard-catalog-header-order1" translate="SORT_CAPTION"></span> <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> <span data-ng-show="sortBy === 'lastUpdateDate'" class="w-sdc-catalog-sort-arrow" data-ng-class="{'down': reverse, 'up':!reverse}"></span> | <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> + ng-click="order('name|resourceName')" translate="SORT_ALPHABETICAL"></a> <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> |