catalog-ui/src/app/ng2/pages/catalog/catalog.component.html

   1 <div class="sdc-catalog-container">
   2     <div class="w-sdc-main-container">
   3         <div class="i-sdc-designer-leftbar-section-left-switch-header"
   4              (click)="showCatalogSelector=!showCatalogSelector">
   5             <div class="i-sdc-designer-leftbar-section-left-switch-header-text">
   6                 {{selectedCatalogItem.title}}
   7             </div>
   8             <div class="i-sdc-designer-leftbar-section-left-switch-header-icon sprite-new arrow-up-small">&nbsp;</div>
   9
  10             <div class="sdc-catalog-selector-wrapper" *ngIf="showCatalogSelector">
  11                 <div class="sdc-catalog-selector-item"
  12                      *ngFor="let leftSwitchItem of catalogSelectorItems"
  13                      (click)="selectLeftSwitchItem(leftSwitchItem)">
  14                     <span>{{leftSwitchItem.title}}</span>
  15                 </div>
  16             </div>
  17         </div>
  18
  19         <!-- LEFT SIDE -->
  20         <div perfectScrollbar class="sdc-catalog-body-container w-sdc-left-sidebar i-sdc-designer-left-sidebar">
  21             <div class="sdc-catalog-leftbar-container">
  22                 <div class="sdc-catalog-type-filter-container">
  23                     <div class="i-sdc-designer-leftbar-section-title pointer"
  24                          (click)="sectionClick('type')"
  25                          [ngClass]="{'expanded': expandedSection.indexOf('type') !== -1}">
  26                         <span class="i-sdc-designer-leftbar-section-title-icon"></span>
  27                         <span class="i-sdc-designer-leftbar-section-title-text"
  28                               data-tests-id="typeFilterTitle">Type</span>
  29                     </div>
  30                     <div class="i-sdc-designer-leftbar-section-content">
  31                         <sdc-checklist [checklistModel]="typesChecklistModel" [testId]="'checklist-type'"
  32                                        (checkedChange)="gui.onComponentTypeClick()"></sdc-checklist>
  33                     </div>
  34                 </div>
  35
  36                 <div class="sdc-catalog-categories-filter-container">
  37                     <div class="i-sdc-designer-leftbar-section-title pointer" (click)="sectionClick('category')"
  38                          [ngClass]="{'expanded': expandedSection.indexOf('category') !== -1}">
  39                         <span class="i-sdc-designer-leftbar-section-title-icon"></span>
  40                         <span class="i-sdc-designer-leftbar-section-title-text" data-tests-id="categoriesFilterTitle">Categories</span>
  41                     </div>
  42                     <div class="i-sdc-designer-leftbar-section-content">
  43                         <sdc-checklist [checklistModel]="categoriesChecklistModel" [testId]="'checklist-category'"
  44                                        (checkedChange)="gui.onCategoryClick()"></sdc-checklist>
  45                     </div>
  46                 </div>
  47
  48                 <!-- STATUS -->
  49                 <div class="sdc-catalog-status-filter-container">
  50                     <div class="i-sdc-designer-leftbar-section-title pointer" (click)="sectionClick('status')"
  51                          [ngClass]="{'expanded': expandedSection.indexOf('status') !== -1}">
  52                         <span class="i-sdc-designer-leftbar-section-title-icon"></span>
  53                         <span class="i-sdc-designer-leftbar-section-title-text"
  54                               data-tests-id="statusFilterTitle">Status</span>
  55                     </div>
  56
  57                     <div class="i-sdc-designer-leftbar-section-content">
  58                         <sdc-checklist [checklistModel]="statusChecklistModel" [testId]="'checklist-status'"
  59                                        (checkedChange)="gui.onStatusClick()"></sdc-checklist>
  60                     </div>
  61                 </div>
  62
  63             </div>
  64         </div>
  65
  66         <!-- RIGHT SIDE -->
  67         <div class="w-sdc-main-right-container w-sdc-catalog-main" infiniteScroll
  68              (infiniteScroll)="raiseNumberOfElementToDisplay()" [infiniteScrollDistance]="100">
  69                 <!-- HEADER -->
  70                 <div class="catalog-top-bar">
  71                     <div class="w-sdc-dashboard-catalog-items-header"
  72                          [innerHTML]="getNumOfElements(catalogFilteredItems.length)">
  73
  74                     </div>
  75                     <div class="catalog-top-right-bar">
  76                         <span class="w-sdc-dashboard-catalog-header-order1">{{'SORT_CAPTION'|translate}}</span>&nbsp;&nbsp;
  77                         <a class="w-sdc-dashboard-catalog-sort" data-tests-id="sort-by-last-update"
  78                            [ngClass]="{'blue' : sortBy==='lastUpdateDate'}"
  79                            (click)="order('lastUpdateDate')">{{'SORT_BY_UPDATE_DATE'|translate}}</a>&nbsp;
  80                         <span *ngIf="sortBy === 'lastUpdateDate'" class="w-sdc-catalog-sort-arrow"
  81                               [ngClass]="{'down': reverse, 'up':!reverse}"></span>
  82                         <a class="w-sdc-dashboard-catalog-sort" data-tests-id="sort-by-alphabetical"
  83                            [ngClass]="{'blue' : sortBy!=='lastUpdateDate'}"
  84                            (click)="order('resourceName')">{{'SORT_ALPHABETICAL'|translate}}</a>&nbsp;
  85                         <span *ngIf="sortBy !== 'lastUpdateDate'" class="w-sdc-catalog-sort-arrow"
  86                               [ngClass]="{'down': reverse, 'up':!reverse}"></span>
  87                     </div>
  88                 </div>
  89
  90                 <div class='catalog-elements-list'>
  91                     <!-- Tile new -->
  92                     <ui-tile *ngFor="let component of catalogFilteredSlicedItems"
  93                              [component]="component" (onTileClick)="goToComponent(component)"></ui-tile>
  94                     <!-- Tile new -->
  95                 </div>
  96         </div>
  97     </div>
  98
  99     <top-nav [topLvlSelectedIndex]="1" [searchTerm]="search.filterTerm"
 100              (searchTermChange)="gui.changeFilterTerm($event)" [version]="version"></top-nav>
 101 </div>