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