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

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