catalog-ui/src/app/view-models/catalog/catalog-view.html

   1 <div class="sdc-catalog-container">
   2
   3     <loader data-display="gui.isLoading"></loader>
   4 <!--
   5     <ecomp-header menu-data="menuItems" version="{{version}}"></ecomp-header>
   6 -->
   7
   8     <div class="w-sdc-main-container">
   9
  10         <div
  11             class="i-sdc-designer-leftbar-section-left-switch-header"
  12             data-tests-id="catalog-selector-button"
  13             data-ng-click="showCatalogSelector=!showCatalogSelector">
  14             <div  class="i-sdc-designer-leftbar-section-left-switch-header-text">
  15                 {{selectedCatalogItem.title}}
  16             </div>
  17             <div class="i-sdc-designer-leftbar-section-left-switch-header-icon sprite-new arrow-up-small">&nbsp;</div>
  18
  19             <div
  20                 class="sdc-catalog-selector-wrapper"
  21                 data-ng-show="showCatalogSelector">
  22                 <div
  23                     class="sdc-catalog-selector-item"
  24                     data-ng-repeat="leftSwitchItem in catalogSelectorItems track by $index"
  25                     data-tests-id="catalog-selector-{{leftSwitchItem.value}}"
  26                     data-ng-click="selectLeftSwitchItem(leftSwitchItem)">
  27                     <span>{{leftSwitchItem.title}}</span>
  28                 </div>
  29             </div>
  30         </div>
  31
  32         <!-- LEFT SIDE -->
  33         <perfect-scrollbar scroll-y-margin-offset="0" class="sdc-catalog-body-container w-sdc-left-sidebar i-sdc-designer-left-sidebar" include-padding="true">
  34             <div class="sdc-catalog-leftbar-container">
  35                 <div class="sdc-catalog-type-filter-container">
  36                     <div
  37                         class="i-sdc-designer-leftbar-section-title pointer"
  38                         data-ng-click="sectionClick('type')"
  39                         data-ng-class="{'expanded': expandedSection.indexOf('type') !== -1}">
  40                         <span class="i-sdc-designer-leftbar-section-title-icon"></span>
  41                         <span class="i-sdc-designer-leftbar-section-title-text" data-tests-id="typeFilterTitle">Type</span>
  42                     </div>
  43                     <div class="i-sdc-designer-leftbar-section-content">
  44                         <ul class="list-unstyled i-sdc-designer-leftbar-section-content-ul">
  45                             <li class="i-sdc-designer-leftbar-section-content-ul-li" data-ng-repeat="type in checkboxes.componentTypes">
  46
  47                                 <ng1-checkbox elem-id="checkbox-{{type | lowercase | clearWhiteSpaces}}"
  48                                               sdc-checklist-model="checkboxesFilter.selectedComponentTypes"
  49                                               sdc-checklist-value="type"
  50                                               sdc-checked-change="gui.onComponentTypeClick(type, checked)"
  51                                               text="{{type}}"></ng1-checkbox>
  52
  53                                 <ul class="list-unstyled i-sdc-catalog-subcategories-checkbox" data-ng-if="type==='Resource'">
  54                                     <li data-ng-repeat="subType in checkboxes.resourceSubTypes">
  55
  56                                         <ng1-checkbox elem-id="checkbox-{{subType | lowercase | clearWhiteSpaces}}"
  57                                                       sdc-checklist-model="checkboxesFilter.selectedResourceSubTypes"
  58                                                       sdc-checklist-value="subType"
  59                                                       sdc-checked-change="gui.onComponentSubTypesClick(subType, type, checked)"
  60                                                       text="{{subType}}"></ng1-checkbox>
  61
  62                                     </li>
  63                                 </ul>
  64                             </li>
  65                         </ul>
  66                     </div>
  67                 </div>
  68
  69                 <div class="sdc-catalog-categories-filter-container">
  70                     <div
  71                         class="i-sdc-designer-leftbar-section-title pointer"
  72                         data-ng-click="sectionClick('category')"
  73                         data-ng-class="{'expanded': expandedSection.indexOf('category') !== -1}">
  74                         <span class="i-sdc-designer-leftbar-section-title-icon"></span>
  75                         <span class="i-sdc-designer-leftbar-section-title-text" data-tests-id="categoriesFilterTitle">Categories</span>
  76                     </div>
  77                     <div class="i-sdc-designer-leftbar-section-content">
  78                         <!-- CATEGORY CHECKBOX -->
  79                         <ul class="list-unstyled i-sdc-designer-leftbar-section-content-ul">
  80                             <li class="i-sdc-designer-leftbar-section-content-ul-li"
  81                                 data-ng-repeat="category in categories | categoryTypeFilter:checkboxesFilter.selectedComponentTypes:checkboxesFilter.selectedResourceSubTypes | orderBy: category">
  82
  83                                 <ng1-checkbox elem-id="checkbox-{{category.uniqueId | lowercase | clearWhiteSpaces}}"
  84                                               sdc-checklist-model="checkboxesFilter.selectedCategoriesModel"
  85                                               sdc-checklist-value="category.uniqueId"
  86                                               sdc-checked-change="gui.onCategoryClick(category, checked)"
  87                                               data-tests-id="{{category.uniqueId}}"
  88                                               text="{{category.name}}"></ng1-checkbox>
  89
  90                                 <!-- SUB CATEGORY CHECKBOX -->
  91                                 <ul class="list-unstyled i-sdc-catalog-subcategories-checkbox" data-ng-if="category.subcategories && category.subcategories.length>0">
  92                                     <li ng-repeat="subcategory in category.subcategories track by subcategory.uniqueId | orderBy:'name'">
  93
  94                                         <ng1-checkbox elem-id="checkbox-{{subcategory.uniqueId | lowercase | clearWhiteSpaces}}"
  95                                                       sdc-checklist-model="checkboxesFilter.selectedCategoriesModel"
  96                                                       sdc-checklist-value="subcategory.uniqueId"
  97                                                       sdc-checked-change="gui.onCategoryClick(subcategory, checked)"
  98                                                       data-tests-id="{{subcategory.uniqueId}}"
  99                                                       text="{{subcategory.name}}"></ng1-checkbox>
 100
 101                                         <!-- GROUPING CHECKBOX -->
 102                                         <ul class=" list-unstyled i-sdc-catalog-grouping-checkbox" data-ng-if="subcategory.groupings && subcategory.groupings.length>0">
 103                                             <li ng-repeat="grouping in subcategory.groupings track by grouping.uniqueId | orderBy:'name'">
 104
 105                                                 <ng1-checkbox elem-id="checkbox-{{grouping.uniqueId | lowercase | clearWhiteSpaces}}"
 106                                                               sdc-checklist-model="checkboxesFilter.selectedCategoriesModel"
 107                                                               sdc-checklist-value="grouping.uniqueId"
 108                                                               sdc-checked-change="gui.onCategoryClick(grouping, checked)"
 109                                                               text="{{grouping.name}}"></ng1-checkbox>
 110
 111                                             </li>
 112                                         </ul>
 113                                     </li><!-- Close subcategory -->
 114                                 </ul><!-- Close subcategories -->
 115                             </li><!-- Close main category -->
 116                         </ul><!-- Close main categories -->
 117
 118                     </div>
 119                 </div>
 120
 121                 <!-- STATUS -->
 122                 <div class="sdc-catalog-status-filter-container">
 123                     <div
 124                         class="i-sdc-designer-leftbar-section-title pointer"
 125                         data-ng-click="sectionClick('status')"
 126                         data-ng-class="{'expanded': expandedSection.indexOf('status') !== -1}">
 127                         <span class="i-sdc-designer-leftbar-section-title-icon"></span>
 128                         <span class="i-sdc-designer-leftbar-section-title-text" data-tests-id="statusFilterTitle">Status</span>
 129                     </div>
 130
 131                     <div class="i-sdc-designer-leftbar-section-content">
 132                         <ul class="list-unstyled i-sdc-designer-leftbar-section-content-ul">
 133                             <!--li data-ng-repeat="(key, value) in confStatus" -->
 134
 135                             <li class="i-sdc-designer-leftbar-section-content-ul-li"
 136                                 data-ng-repeat="(key, state) in confStatus">
 137
 138                                 <ng1-checkbox elem-id="checkbox-{{key | lowercase | clearWhiteSpaces}}"
 139                                               sdc-checklist-model="checkboxesFilter.selectedStatuses"
 140                                               sdc-checklist-value="state.values"
 141                                               sdc-checked-change="gui.onStatusClick(key, state, checked)"
 142                                               text="{{state.name}}"></ng1-checkbox>
 143
 144                                 <div class="i-sdc-categories-list-item-icon"></div>
 145                             </li>
 146                         </ul>
 147                     </div>
 148                 </div>
 149
 150             </div>
 151         </perfect-scrollbar>
 152
 153         <!-- RIGHT SIDE -->
 154         <perfect-scrollbar id="catalog-main-scroll" include-padding="true" class="w-sdc-main-right-container w-sdc-catalog-main">
 155
 156             <!-- HEADER -->
 157             <div>
 158                 <div class="w-sdc-dashboard-catalog-items-header"
 159                      ng-bind-html="getNumOfElements((catalogFilterdItems| entityFilter:checkboxesFilter | filter:search).length)"
 160                 ></div>
 161                 <div class="w-sdc-dashboard-catalog-header-right">
 162                     <span class="w-sdc-dashboard-catalog-header-order1" translate="SORT_CAPTION"></span>&nbsp;&nbsp;
 163                     <a class="w-sdc-dashboard-catalog-sort" data-tests-id="sort-by-last-update" data-ng-class="{'blue' : sortBy==='lastUpdateDate'}"
 164                        ng-click="order('lastUpdateDate')" translate="SORT_BY_UPDATE_DATE"></a>&nbsp;
 165                     <span data-ng-show="sortBy === 'lastUpdateDate'" class="w-sdc-catalog-sort-arrow" data-ng-class="{'down': reverse, 'up':!reverse}"></span>
 166                     &nbsp;|&nbsp;
 167                     <a class="w-sdc-dashboard-catalog-sort" data-tests-id="sort-by-alphabetical" data-ng-class="{'blue' : sortBy!=='lastUpdateDate'}"
 168                        ng-click="order('name|resourceName')" translate="SORT_ALPHABETICAL"></a>&nbsp;
 169                     <span data-ng-show="sortBy !== 'lastUpdateDate'" class="w-sdc-catalog-sort-arrow" data-ng-class="{'down': reverse, 'up':!reverse}"></span>
 170                 </div>
 171             </div>
 172
 173             <div infinite-scroll-disabled='isAllItemDisplay'  infinite-scroll="raiseNumberOfElementToDisplay()" infinite-scroll-container="'#catalog-main-scroll'" infinite-scroll-distance="'0.2'" infinite-scroll-parent>
 174
 175                 <div class='w-sdc-row-flex-items'>
 176
 177                     <!-- Tile new -->
 178                     <ng2-ui-tile data-ng-repeat="component in catalogFilterdItems| entityFilter:checkboxesFilter | filter:search | orderBy:sortBy:reverse | limitTo:numberOfItemToDisplay"
 179                         data-ng-init="component.filterTerm = component.name +  ' '  + component.description + ' ' + component.tags.toString() + ' ' + component.version;"
 180                         [component]="component" (on-tile-click)="gui.isLoading || goToComponent(component)"></ng2-ui-tile>
 181                     <!-- Tile new -->
 182
 183                 </div>
 184
 185             </div>
 186         </perfect-scrollbar>
 187
 188     </div>
 189
 190     <top-nav [top-lvl-selected-index]="1" [search-term]="search.filterTerm" (search-term-change)="gui.changeFilterTerm($event)" [version]="version"></top-nav>
 191
 192
 193 </div>