diff options
| author |   ys9693 <ys9693@att.com> | 2020-01-19 13:50:02 +0200 |
|---|---|---|
| committer |   Ofir Sonsino <ofir.sonsino@intl.att.com> | 2020-01-22 12:33:31 +0000 |
| commit | 16a9fce0e104a38371a9e5a567ec611ae3fc7f33 (patch) | |
| tree | 03a2aff3060ddb5bc26a90115805a04becbaffc9 /catalog-ui/src/app/ng2/pages/catalog | |
| parent | aa83a2da4f911c3ac89318b8e9e8403b072942e1 (diff) | |
Catalog alignment
Issue-ID: SDC-2724
Signed-off-by: ys9693 <ys9693@att.com>
Change-Id: I52b4aacb58cbd432ca0e1ff7ff1f7dd52099c6fe
Diffstat (limited to 'catalog-ui/src/app/ng2/pages/catalog')
6 files changed, 1726 insertions, 0 deletions
diff --git a/catalog-ui/src/app/ng2/pages/catalog/__snapshots__/catalog.component.spec.ts.snap b/catalog-ui/src/app/ng2/pages/catalog/__snapshots__/catalog.component.spec.ts.snap new file mode 100644 index 0000000000..d6091cd599 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/catalog/__snapshots__/catalog.component.spec.ts.snap @@ -0,0 +1,164 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`catalog component should match current snapshot of catalog component 1`] = ` +<catalog + $state={[Function Object]} + cacheService={[Function Object]} + catalogService={[Function Object]} + componentShouldReload={[Function Function]} + defaultFilterParams={[Function Object]} + getTestIdForCheckboxByText={[Function Function]} + initCatalogData={[Function Function]} + initLeftSwitch={[Function Function]} + initScopeMembers={[Function Function]} + isDefaultFilter={[Function Function]} + loaderService={[Function Object]} + resourceNamePipe={[Function Object]} + sdcConfig={[Function Object]} + sdcMenu={[Function Object]} + updateCatalogItems={[Function Function]} +> + <div + class="sdc-catalog-container" + > + <div + class="w-sdc-main-container" + > + <div + class="i-sdc-designer-leftbar-section-left-switch-header" + > + <div + class="i-sdc-designer-leftbar-section-left-switch-header-text" + > + + </div> + <div + class="i-sdc-designer-leftbar-section-left-switch-header-icon sprite-new arrow-up-small" + > + + </div> + + </div> + <div + class="sdc-catalog-body-container w-sdc-left-sidebar i-sdc-designer-left-sidebar" + perfectscrollbar="" + > + <div + class="sdc-catalog-leftbar-container" + > + <div + class="sdc-catalog-type-filter-container" + > + <div + class="i-sdc-designer-leftbar-section-title pointer" + > + <span + class="i-sdc-designer-leftbar-section-title-icon" + /> + <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 /> + </div> + </div> + <div + class="sdc-catalog-categories-filter-container" + > + <div + class="i-sdc-designer-leftbar-section-title pointer" + > + <span + class="i-sdc-designer-leftbar-section-title-icon" + /> + <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 /> + </div> + </div> + <div + class="sdc-catalog-status-filter-container" + > + <div + class="i-sdc-designer-leftbar-section-title pointer" + > + <span + class="i-sdc-designer-leftbar-section-title-icon" + /> + <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 /> + </div> + </div> + </div> + </div> + <div + class="w-sdc-main-right-container w-sdc-catalog-main" + infinitescroll="" + > + <div + class="catalog-top-bar" + > + <div + class="w-sdc-dashboard-catalog-items-header" + /> + <div + class="catalog-top-right-bar" + > + <span + class="w-sdc-dashboard-catalog-header-order1" + > + + </span> + + <a + class="w-sdc-dashboard-catalog-sort" + data-tests-id="sort-by-last-update" + > + + </a> + + + <a + class="w-sdc-dashboard-catalog-sort" + data-tests-id="sort-by-alphabetical" + > + + </a> + + + </div> + </div> + <div + class="catalog-elements-list" + > + + </div> + </div> + </div> + <top-nav /> + </div> +</catalog> +`; diff --git a/catalog-ui/src/app/ng2/pages/catalog/catalog.component.html b/catalog-ui/src/app/ng2/pages/catalog/catalog.component.html new file mode 100644 index 0000000000..4a13bee973 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/catalog/catalog.component.html @@ -0,0 +1,101 @@ +<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"> + <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> diff --git a/catalog-ui/src/app/ng2/pages/catalog/catalog.component.less b/catalog-ui/src/app/ng2/pages/catalog/catalog.component.less new file mode 100644 index 0000000000..036db8d94d --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/catalog/catalog.component.less @@ -0,0 +1,113 @@ +@import '../../../../assets/styles/variables'; +@import '../../../../assets/styles/mixins'; + +.w-sdc-catalog-main { + height: 100%; + overflow-y: scroll; + padding: 10px 50px; + + .catalog-top-bar { + display: flex; + justify-content:space-between; + padding: 0px 10px; + } + + .catalog-elements-list { + display: flex; + flex-wrap: wrap; + flex-direction: row; + } + +} + + +.i-sdc-designer-left-sidebar { + margin-top: 43px; +} + +.sdc-catalog-selector-item { + text-transform: none; + line-height: 40px; + font-family: OpenSans-Bold, sans-serif; + font-size: 14px; + color: #000000; + background-color: #ffffff; + padding-left: 20px; +} + +.sdc-catalog-selector-wrapper { + position: absolute; + left: 0px; + top: 42px; + width: 241px; + height: auto; + cursor: pointer; + opacity: 1; + z-index: 1000; + box-shadow: 1px 2px 3px #b1b1b1; +} + +.sdc-catalog-selector-item { + text-transform: none; + line-height: 40px; + font-family: OpenSans-Bold, sans-serif; + font-size: 14px; + color: @main_color_l; + background-color: @main_color_p; + padding-left: 20px; +} + +.sdc-catalog-selector-item:hover { + color: @main_color_a; + background-color: @tlv_color_v; +} + +.i-sdc-designer-leftbar-section-left-switch-header { + text-transform: uppercase; + .l_14_m; + line-height: 40px; + width: 243px; + + font-family: OpenSans-Bold, sans-serif; + font-size: 14px; + + color: @main_color_a; + background-color: @tlv_color_t; + border: solid 1px fade(@main_color_t, 40%); + cursor: pointer; + opacity: 1; + z-index: 9999; + position: relative; +} + +.i-sdc-designer-leftbar-section-left-switch-header-text { + display: inline-block; + width: 180px; + margin-left: 20px; +} + +.i-sdc-designer-leftbar-section-left-switch-header-icon { + display: inline-block; + vertical-align: middle; +} + +.w-sdc-dashboard-catalog-items-header { + color: @main_color_m; + font-family: OpenSans-Regular, sans-serif; + font-size: 12px; + display: inline-block; + font-style: normal; size: 12px; + margin-left: 11px; + font-weight: normal; + b { + font-family: OpenSans-Bold, sans-serif; + color: @main_color_l; + font-weight: bold; + } +} + +.w-sdc-dashboard-catalog-header-order1 { + font-style: normal; + font-size: 12px; + font-weight: 800; +} diff --git a/catalog-ui/src/app/ng2/pages/catalog/catalog.component.spec.ts b/catalog-ui/src/app/ng2/pages/catalog/catalog.component.spec.ts new file mode 100644 index 0000000000..ff27ec77fd --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/catalog/catalog.component.spec.ts @@ -0,0 +1,649 @@ + +import { async, ComponentFixture, TestBed } from "@angular/core/testing"; +import {ConfigureFn, configureTests} from "../../../../jest/test-config.helper"; +import {NO_ERRORS_SCHEMA} from "@angular/core"; +import { CacheService} from "../../../../app/services-ng2"; +import {CatalogComponent} from "./catalog.component"; +import { SdcUiServices } from "onap-ui-angular"; +import { SdcConfigToken } from "../../config/sdc-config.config"; +import { SdcMenuToken} from "../../config/sdc-menu.config"; +import { ResourceNamePipe } from "../../pipes/resource-name.pipe"; +import { CatalogService } from "../../services/catalog.service"; +import {TranslatePipe} from "../../shared/translator/translate.pipe"; +import {TranslateService} from "../../shared/translator/translate.service"; +import {Observable} from "rxjs"; +import {LoaderService} from "onap-ui-angular/dist/loader/loader.service"; +import {categoriesElements} from "../../../../jest/mocks/categories.mock"; +import {sdcMenu} from "../../../../jest/mocks/sdc-menu.mock"; +import {IEntityFilterObject} from "../../pipes/entity-filter.pipe"; + + + + + +describe('catalog component', () => { + + let fixture: ComponentFixture<CatalogComponent>; + + //Data variables + let catalogSelectorItemsMock; + let checkListModelMock; + let filterParamsMock; + let checkboxesFilterMock; + let checkboxesFilterKeysMock; + + + //Service variables + let stateServiceMock; + let cacheServiceMock: Partial<CacheService>; + let loaderServiceMock: Partial<LoaderService>; + let catalogServiceMock: Partial<CatalogService>; + + + beforeEach( + + async(() => { + console.info = jest.fn(); + catalogSelectorItemsMock = [ + { + value: 0, + title: 'Active Items', + header: 'Active' + }, + { + value: 1, + title: 'Archive', + header: 'Archived' + } + ]; + checkListModelMock = { + checkboxes: [ + {label: "VF", disabled: false, isChecked: false, testId: "checkbox-vf", value: "Resource.VF"}, + {label: "VFC", disabled: false, isChecked: false, testId: "checkbox-vfc", value: "Resource.VFC", + subLevelChecklist: {checkboxes:[{label: "VFD", disabled: false, isChecked: false, testId: "checkbox-vfd", value: "Resource.VFD"}], + selectedValues: ["Resource.VFD"]} + }, + {label: "CR", disabled: false, isChecked: false, testId: "checkbox-cr", value: "Resource.CR", + subLevelChecklist: { checkboxes:[{label: "VF", disabled: false, isChecked: false, testId: "checkbox-vf", value: "Resource.VF"}], + selectedValues: []} + }], + selectedValues: ["Resource.VF"] + } + filterParamsMock = { + active: true, + categories: ["resourceNewCategory.allotted resource.allotted resource", "resourceNewCategory.allotted resource.contrail route", "resourceNewCategory.application l4+.application server"], + components: ["Resource.VF", "Resource.VFC"], + order: ["lastUpdateDate", true], + statuses: ["inDesign"], + term: "Vf" + } + checkboxesFilterMock = { + selectedCategoriesModel: ["serviceNewCategory.network l4+", "resourceNewCategory.allotted resource.allotted resource"], + selectedComponentTypes: ["Resource.VF", "Resource.VFC"], + selectedResourceSubTypes: ["VF", "VFC"], + selectedStatuses: ["NOT_CERTIFIED_CHECKOUT", "NOT_CERTIFIED_CHECKIN"] + }; + checkboxesFilterKeysMock = { + categories:{_main: ["serviceNewCategory.network l4+"]}, + componentTypes: { Resource: ["Resource.VF", "Resource.VFC"], _main: ["Resource.VFC"]}, + statuses: {_main: ["inDesign"]} + } + + stateServiceMock = { + go: jest.fn(), + current: jest.fn() + }; + cacheServiceMock = { + get: jest.fn().mockImplementation(()=> categoriesElements), + set: jest.fn(), + contains: jest.fn().mockImplementation(()=> true) + }; + loaderServiceMock = { + activate: jest.fn(), + deactivate: jest.fn() + }; + catalogServiceMock = { + //TODO create mock function of archive + getCatalog: jest.fn().mockImplementation(()=> Observable.of(categoriesElements)), + getArchiveCatalog: jest.fn().mockImplementation(()=> Observable.of(categoriesElements)) + }; + const configure: ConfigureFn = testBed => { + testBed.configureTestingModule({ + declarations: [CatalogComponent, TranslatePipe], + imports: [], + schemas: [NO_ERRORS_SCHEMA], + providers: [ + {provide: SdcConfigToken, useValue: {}}, + {provide: SdcMenuToken, useValue: sdcMenu}, + {provide: "$state", useValue: stateServiceMock }, + {provide: CacheService, useValue: cacheServiceMock }, + {provide: CatalogService, useValue: catalogServiceMock }, + {provide: ResourceNamePipe, useValue: {}}, + {provide: SdcUiServices.LoaderService, useValue: loaderServiceMock }, + {provide: TranslateService, useValue: {}} + ], + }); + }; + + configureTests(configure).then(testBed => { + fixture = testBed.createComponent(CatalogComponent); + }); + }) + ); + + + it('should match current snapshot of catalog component', () => { + expect(fixture).toMatchSnapshot(); + }); + + it ('should call on catalog component onInit' , () => { + const component = TestBed.createComponent(CatalogComponent); + component.componentInstance.initGui = jest.fn(); + component.componentInstance.initLeftSwitch = jest.fn(); + component.componentInstance.initScopeMembers = jest.fn(); + component.componentInstance.loadFilterParams = jest.fn(); + component.componentInstance.initCatalogData = jest.fn(); + component.componentInstance.ngOnInit(); + expect(component.componentInstance.initGui).toHaveBeenCalled(); + expect(component.componentInstance.initLeftSwitch).toHaveBeenCalled(); + expect(component.componentInstance.initScopeMembers).toHaveBeenCalled(); + expect(component.componentInstance.loadFilterParams).toHaveBeenCalled(); + expect(component.componentInstance.initCatalogData).toHaveBeenCalled(); + }); + + it ('should call on catalog component initLeftSwitch' , () => { + const component = TestBed.createComponent(CatalogComponent); + component.componentInstance.initLeftSwitch(); + expect(component.componentInstance.showCatalogSelector).toEqual(false); + expect(component.componentInstance.catalogSelectorItems).toEqual(catalogSelectorItemsMock); + expect(component.componentInstance.selectedCatalogItem).toEqual(catalogSelectorItemsMock[0]); + }); + + it ('should call on catalog component initCatalogData and selectedCatalogItem is archive ' , () => { + const component = TestBed.createComponent(CatalogComponent); + component.componentInstance.getArchiveCatalogItems = jest.fn(); + component.componentInstance.selectedCatalogItem = catalogSelectorItemsMock[1]; + component.componentInstance.initCatalogData(); + expect(component.componentInstance.getArchiveCatalogItems).toHaveBeenCalled(); + }); + + it ('should call on catalog component initCatalogData and selectedCatalogItem is active ' , () => { + const component = TestBed.createComponent(CatalogComponent); + component.componentInstance.getActiveCatalogItems = jest.fn(); + component.componentInstance.selectedCatalogItem = catalogSelectorItemsMock[0]; + component.componentInstance.initCatalogData(); + expect(component.componentInstance.getActiveCatalogItems).toHaveBeenCalled(); + }); + + it ('should call on catalog component initScopeMembers' , () => { + const component = TestBed.createComponent(CatalogComponent); + component.componentInstance.makeSortedCategories = jest.fn().mockImplementation(()=> categoriesElements); + component.componentInstance.initCategoriesMap = jest.fn(); + component.componentInstance.initCheckboxesFilter = jest.fn(); + component.componentInstance.initCheckboxesFilterKeys = jest.fn(); + component.componentInstance.buildCheckboxLists = jest.fn(); + component.componentInstance.initScopeMembers(); + expect(component.componentInstance.numberOfItemToDisplay).toEqual(0); + expect(component.componentInstance.categories).toEqual(categoriesElements); + expect(component.componentInstance.confStatus).toEqual(component.componentInstance.sdcMenu.statuses); + expect(component.componentInstance.expandedSection).toEqual( ["type", "category", "status"]); + expect(component.componentInstance.catalogItems).toEqual([]); + expect(component.componentInstance.search).toEqual({FilterTerm: ""}); + expect(component.componentInstance.initCategoriesMap).toHaveBeenCalled(); + expect(component.componentInstance.initCheckboxesFilter).toHaveBeenCalled(); + expect(component.componentInstance.initCheckboxesFilterKeys).toHaveBeenCalled(); + expect(component.componentInstance.buildCheckboxLists).toHaveBeenCalled(); + expect(component.componentInstance.version).toEqual(categoriesElements); + expect(component.componentInstance.sortBy).toEqual('lastUpdateDate'); + expect(component.componentInstance.reverse).toEqual(true); + }); + + it ('should call on catalog component buildCheckboxLists ' , () => { + const component = TestBed.createComponent(CatalogComponent); + component.componentInstance.buildChecklistModelForTypes = jest.fn(); + component.componentInstance.buildChecklistModelForCategories = jest.fn(); + component.componentInstance.buildChecklistModelForStatuses = jest.fn(); + component.componentInstance.buildCheckboxLists(); + expect(component.componentInstance.buildChecklistModelForTypes).toHaveBeenCalled(); + expect(component.componentInstance.buildChecklistModelForCategories).toHaveBeenCalled(); + expect(component.componentInstance.buildChecklistModelForStatuses).toHaveBeenCalled(); + }); + + it ('should call on catalog component getTestIdForCheckboxByText ' , () => { + const component = TestBed.createComponent(CatalogComponent); + let testId = component.componentInstance.getTestIdForCheckboxByText("catalog filter"); + expect(testId).toEqual("checkbox-catalogfilter"); + }); + + it ('should call on catalog component selectLeftSwitchItem with active catalog' , () => { + const component = TestBed.createComponent(CatalogComponent); + component.componentInstance.selectedCatalogItem = catalogSelectorItemsMock[1]; + component.componentInstance.getActiveCatalogItems = jest.fn(); + component.componentInstance.changeFilterParams = jest.fn(); + component.componentInstance.selectLeftSwitchItem(catalogSelectorItemsMock[0]); + expect(component.componentInstance.getActiveCatalogItems).toBeCalledWith(true); + expect(component.componentInstance.changeFilterParams).toBeCalledWith({"active": true}); + }); + + it ('should call on catalog component selectLeftSwitchItem with archive catalog' , () => { + const component = TestBed.createComponent(CatalogComponent); + component.componentInstance.selectedCatalogItem = catalogSelectorItemsMock[0]; + component.componentInstance.getArchiveCatalogItems = jest.fn(); + component.componentInstance.changeFilterParams = jest.fn(); + component.componentInstance.selectLeftSwitchItem(catalogSelectorItemsMock[1]); + expect(component.componentInstance.getArchiveCatalogItems).toBeCalledWith(true); + expect(component.componentInstance.changeFilterParams).toBeCalledWith({"active": false}); + }); + + it ('should call on catalog component buildChecklistModelForTypes' , () => { + const component = TestBed.createComponent(CatalogComponent); + component.componentInstance.checkboxesFilterKeys = checkboxesFilterKeysMock; + component.componentInstance.buildChecklistModelForTypes(); + expect(component.componentInstance.componentTypes).toEqual({ Resource: ['VF', 'VFC', 'CR', 'PNF', 'CP', 'VL'], + Service: null}) + expect(component.componentInstance.typesChecklistModel.checkboxes.length).toEqual(2); + }); + + it ('should call on catalog component buildChecklistModelForCategories' , () => { + const component = TestBed.createComponent(CatalogComponent); + component.componentInstance.checkboxesFilterKeys = checkboxesFilterKeysMock; + component.componentInstance.categories = categoriesElements; + component.componentInstance.buildChecklistModelForCategories(); + expect(component.componentInstance.categoriesChecklistModel.checkboxes).not.toEqual(null); + }); + + it ('should call on catalog component buildChecklistModelForStatuses' , () => { + const component = TestBed.createComponent(CatalogComponent); + component.componentInstance.checkboxesFilterKeys = checkboxesFilterKeysMock; + component.componentInstance.categories = categoriesElements; + component.componentInstance.confStatus = sdcMenu.statuses; + component.componentInstance.buildChecklistModelForStatuses(); + expect(component.componentInstance.statusChecklistModel.checkboxes.length).toEqual(3); + }); + + it ('should call on catalog component initCheckboxesFilter' , () => { + const component = TestBed.createComponent(CatalogComponent); + component.componentInstance.initCheckboxesFilter(); + expect(component.componentInstance.checkboxesFilter.selectedComponentTypes).toEqual([]); + expect(component.componentInstance.checkboxesFilter.selectedResourceSubTypes).toEqual([]); + expect(component.componentInstance.checkboxesFilter.selectedCategoriesModel).toEqual([]); + expect(component.componentInstance.checkboxesFilter.selectedStatuses).toEqual([]); + }); + + it ('should call on catalog component initCheckboxesFilterKeys' , () => { + const component = TestBed.createComponent(CatalogComponent); + component.componentInstance.initCheckboxesFilterKeys(); + expect(component.componentInstance.checkboxesFilterKeys.componentTypes).toEqual({ _main: [] }); + expect(component.componentInstance.checkboxesFilterKeys.categories).toEqual({ _main: [] }); + expect(component.componentInstance.checkboxesFilterKeys.statuses).toEqual({ _main: [] }); + }); + + it ('should call on catalog component initCategoriesMap' , () => { + const component = TestBed.createComponent(CatalogComponent); + const categoriesMap = component.componentInstance.initCategoriesMap(categoriesElements); + expect(categoriesMap["resourceNewCategory.allotted resource.allotted resource"].parent.name).toEqual("Allotted Resource"); + expect(categoriesMap["resourceNewCategory.generic"].category.uniqueId).toEqual("resourceNewCategory.generic"); + expect(categoriesMap["serviceNewCategory.voip call control"].category.name).toEqual("VoIP Call Control"); + + }); + + + it ('should call on catalog component selectLeftSwitchItem with active and selectedCatalogItem equal to archived' , () => { + const component = TestBed.createComponent(CatalogComponent); + component.componentInstance.getActiveCatalogItems = jest.fn(); + component.componentInstance.changeFilterParams = jest.fn(); + component.componentInstance.selectedCatalogItem = catalogSelectorItemsMock[1] + component.componentInstance.selectLeftSwitchItem(catalogSelectorItemsMock[0]); + expect(component.componentInstance.getActiveCatalogItems).toHaveBeenCalledWith(true); + expect(component.componentInstance.changeFilterParams).toHaveBeenCalledWith({active: true}) + }); + + it ('should call on catalog component selectLeftSwitchItem with archived and selectedCatalogItem equal to active' , () => { + const component = TestBed.createComponent(CatalogComponent); + component.componentInstance.getArchiveCatalogItems = jest.fn(); + component.componentInstance.changeFilterParams = jest.fn(); + component.componentInstance.selectedCatalogItem = catalogSelectorItemsMock[0] + component.componentInstance.selectLeftSwitchItem(catalogSelectorItemsMock[1]); + expect(component.componentInstance.getArchiveCatalogItems).toBeCalledWith(true); + expect(component.componentInstance.changeFilterParams).toHaveBeenCalledWith({active: false}) + }); + + it ('should call on catalog component sectionClick with section contains in expandedSection' , () => { + const component = TestBed.createComponent(CatalogComponent); + component.componentInstance.expandedSection = ["type", "category", "status"]; + component.componentInstance.sectionClick("type"); + expect(component.componentInstance.expandedSection).toEqual(["category", "status"]) + }); + + it ('should call on catalog component sectionClick with section not contains in expandedSection' , () => { + const component = TestBed.createComponent(CatalogComponent); + component.componentInstance.expandedSection = ["type", "category", "status"]; + component.componentInstance.sectionClick("newItem"); + expect(component.componentInstance.expandedSection).toEqual(["type", "category", "status", "newItem"]) + }); + + it ('should call on catalog component makeFilterParamsFromCheckboxes with selected values' , () => { + const component = TestBed.createComponent(CatalogComponent); + expect(component.componentInstance.makeFilterParamsFromCheckboxes(checkListModelMock)).toEqual(["Resource.VF", "Resource.VFD"]) + }); + + it ('should call on catalog component order with resourceName value' , () => { + const component = TestBed.createComponent(CatalogComponent); + component.componentInstance.changeFilterParams = jest.fn(); + component.componentInstance.filterParams = filterParamsMock + component.componentInstance.order("resourceName"); + expect(component.componentInstance.changeFilterParams).toHaveBeenCalledWith( {"order": ["resourceName", false]}) + }); + + it ('should call on catalog component goToComponent' , () => { + const component = TestBed.createComponent(CatalogComponent); + const componentMock = { uniqueId: "d3e80fed-12f6-4f29-aeb1-771050e5db72", componentType: "RESOURCE"} + component.componentInstance.goToComponent(componentMock); + expect(stateServiceMock.go).toHaveBeenCalledWith('workspace.general', {id: componentMock.uniqueId, type: componentMock.componentType.toLowerCase()}) + + }); + + it ('should call on catalog component getNumOfElements for active catalog' , () => { + const component = TestBed.createComponent(CatalogComponent); + component.componentInstance.selectedCatalogItem = catalogSelectorItemsMock[0] + expect(component.componentInstance.getNumOfElements(3)).toEqual("3 <b>Active</b> Elements found") + + }); + + it ('should call on catalog component raiseNumberOfElementToDisplay with empty catalogFilteredItems' , () => { + const component = TestBed.createComponent(CatalogComponent); + component.componentInstance.catalogFilteredItems = [] + component.componentInstance.raiseNumberOfElementToDisplay(true); + expect(component.componentInstance.numberOfItemToDisplay).toEqual(NaN); + expect(component.componentInstance.catalogFilteredSlicedItems).toEqual([]); + }); + + it ('should call on catalog component raiseNumberOfElementToDisplay with full catalogFilteredItems' , () => { + const component = TestBed.createComponent(CatalogComponent); + component.componentInstance.catalogFilteredItems = [1 , 2 , 3, 4, 5, 6] + component.componentInstance.numberOfItemToDisplay = 2; + component.componentInstance.raiseNumberOfElementToDisplay(false); + expect(component.componentInstance.numberOfItemToDisplay).toEqual(6); + expect(component.componentInstance.catalogFilteredSlicedItems).toEqual([1 , 2 , 3, 4, 5, 6]); + }); + + it ('should call on catalog component componentShouldReload return false' , () => { + const component = TestBed.createComponent(CatalogComponent); + component.componentInstance.isDefaultFilter = jest.fn().mockImplementation(() => false); + cacheServiceMock.get.mockImplementation(()=> "mockConstructor"); + let componentShouldReload = component.componentInstance.componentShouldReload(); + expect(component.componentInstance.cacheService.get()).toEqual(component.componentInstance.$state.current.name); + expect(component.componentInstance.cacheService.contains()).toEqual(true); + expect(component.componentInstance.isDefaultFilter).toHaveBeenCalled(); + expect(componentShouldReload).toEqual(false); + }); + + it ('should call on catalog component componentShouldReload return true' , () => { + const component = TestBed.createComponent(CatalogComponent); + component.componentInstance.isDefaultFilter = jest.fn(); + let componentShouldReload = component.componentInstance.componentShouldReload(); + expect(component.componentInstance.cacheService.get()).not.toEqual(component.componentInstance.$state.current.name); + expect(component.componentInstance.cacheService.contains()).toEqual(true); + expect(componentShouldReload).toEqual(true); + }); + + it ('should call on catalog component getActiveCatalogItems with true' , () => { + const component = TestBed.createComponent(CatalogComponent); + let resp = component.componentInstance.cacheService.get(); + component.componentInstance.updateCatalogItems = jest.fn().mockImplementation((resp) => {}); + component.componentInstance.getActiveCatalogItems(true); + expect(component.componentInstance.loaderService.activate).toHaveBeenCalled(); + expect(component.componentInstance.updateCatalogItems).toHaveBeenCalledWith(resp); + expect(component.componentInstance.loaderService.deactivate).toHaveBeenCalled(); + expect(component.componentInstance.cacheService.set).toHaveBeenCalledWith('breadcrumbsComponentsState', "mockConstructor"); + expect(component.componentInstance.cacheService.set).toHaveBeenCalledWith('breadcrumbsComponents', categoriesElements); + expect(component.componentInstance.catalogService.getCatalog).toHaveBeenCalled(); + }); + + it ('should call on catalog component getActiveCatalogItems with false' , () => { + const component = TestBed.createComponent(CatalogComponent); + component.componentInstance.componentShouldReload = jest.fn(); + component.componentInstance.updateCatalogItems = jest.fn().mockImplementation((resp) => {}); + component.componentInstance.getActiveCatalogItems(false); + expect(component.componentInstance.componentShouldReload).toHaveBeenCalled(); + let resp = component.componentInstance.cacheService.get(); + expect(component.componentInstance.updateCatalogItems).toHaveBeenCalledWith(resp); + }); + + it ('should call on catalog component getActiveCatalogItems with true observable return error' , () => { + const component = TestBed.createComponent(CatalogComponent); + catalogServiceMock.getCatalog.mockImplementation(()=> Observable.throwError('error')); + component.componentInstance.getActiveCatalogItems(true); + expect(component.componentInstance.loaderService.activate).toHaveBeenCalled(); + expect(console.info).toHaveBeenCalledWith('Failed to load catalog CatalogViewModel::getActiveCatalogItems'); + expect(component.componentInstance.loaderService.deactivate).toHaveBeenCalled(); + expect(component.componentInstance.catalogService.getCatalog).toHaveBeenCalled(); + }); + + it ('should call on catalog component getArchiveCatalogItems with true' , () => { + const component = TestBed.createComponent(CatalogComponent); + const resp = component.componentInstance.cacheService.get(); + component.componentInstance.updateCatalogItems = jest.fn().mockImplementation((resp) => {}); + component.componentInstance.getArchiveCatalogItems(true); + expect(component.componentInstance.loaderService.activate).toHaveBeenCalled(); + expect(component.componentInstance.catalogService.getArchiveCatalog).toHaveBeenCalled(); + expect(component.componentInstance.cacheService.set).toHaveBeenCalledWith('archiveComponents', categoriesElements); + expect(component.componentInstance.loaderService.deactivate).toHaveBeenCalled(); + expect(component.componentInstance.updateCatalogItems).toHaveBeenCalledWith(resp) + }); + + it ('should call on catalog component getArchiveCatalogItems with false' , () => { + const component = TestBed.createComponent(CatalogComponent); + component.componentInstance.updateCatalogItems = jest.fn().mockImplementation((resp) => Observable.of()); + component.componentInstance.getArchiveCatalogItems(false); + expect(component.componentInstance.cacheService.contains).toHaveBeenCalled(); + expect(component.componentInstance.cacheService.get).toHaveBeenCalled(); + let resp = component.componentInstance.cacheService.get(); + expect(component.componentInstance.updateCatalogItems).toHaveBeenCalledWith(resp); + }); + + it ('should call on catalog component getArchiveCatalogItems with true observable return error' , () => { + const component = TestBed.createComponent(CatalogComponent); + catalogServiceMock.getArchiveCatalog.mockImplementation(()=> Observable.throwError('error')); + component.componentInstance.getArchiveCatalogItems(true); + expect(component.componentInstance.loaderService.activate).toHaveBeenCalled(); + expect(component.componentInstance.catalogService.getArchiveCatalog).toHaveBeenCalled(); + expect(component.componentInstance.loaderService.deactivate).toHaveBeenCalled(); + expect(console.info).toHaveBeenCalledWith('Failed to load catalog CatalogViewModel::getArchiveCatalogItems'); + }); + + it ('should call on catalog component updateCatalogItems' , () => { + const component = TestBed.createComponent(CatalogComponent); + component.componentInstance.filterCatalogItems = jest.fn(); + component.componentInstance.addFilterTermToComponent = jest.fn(); + component.componentInstance.updateCatalogItems([1, 2, 3]); + expect(component.componentInstance.catalogItems).toEqual([1, 2, 3]); + expect(component.componentInstance.addFilterTermToComponent).toHaveBeenCalled(); + expect(component.componentInstance.filterCatalogItems).toHaveBeenCalled(); + }); + + it ('should call on catalog component applyFilterParamsToView' , () => { + const component = TestBed.createComponent(CatalogComponent); + component.componentInstance.initCheckboxesFilter = jest.fn(); + component.componentInstance.filterCatalogCategories = jest.fn(); + component.componentInstance.applyFilterParamsComponents = jest.fn(); + component.componentInstance.applyFilterParamsCategories = jest.fn(); + component.componentInstance.applyFilterParamsStatuses = jest.fn(); + component.componentInstance.applyFilterParamsOrder = jest.fn(); + component.componentInstance.applyFilterParamsTerm = jest.fn(); + component.componentInstance.filterCatalogItems = jest.fn(); + component.componentInstance.applyFilterParamsToView(filterParamsMock); + expect(component.componentInstance.initCheckboxesFilter).toHaveBeenCalled(); + expect(component.componentInstance.filterCatalogCategories).toHaveBeenCalled(); + expect(component.componentInstance.applyFilterParamsComponents).toHaveBeenCalledWith(filterParamsMock); + expect(component.componentInstance.applyFilterParamsCategories).toHaveBeenCalledWith(filterParamsMock); + expect(component.componentInstance.applyFilterParamsStatuses).toHaveBeenCalledWith(filterParamsMock); + expect(component.componentInstance.applyFilterParamsOrder).toHaveBeenCalledWith(filterParamsMock); + expect(component.componentInstance.applyFilterParamsTerm).toHaveBeenCalledWith(filterParamsMock); + expect(component.componentInstance.filterCatalogItems).toHaveBeenCalled(); + }); + + it ('should call on catalog component filterCatalogCategories' , () => { + const component = TestBed.createComponent(CatalogComponent); + component.componentInstance.makeFilteredCategories = jest.fn(); + component.componentInstance.buildChecklistModelForCategories = jest.fn(); + component.componentInstance.categories = categoriesElements; + component.componentInstance.checkboxesFilter = {selectedComponentTypes: ["firstType", "secondType"]}; + component.componentInstance.filterCatalogCategories(); + expect(component.componentInstance.makeFilteredCategories).toHaveBeenCalledWith(categoriesElements, ["firstType", "secondType"]); + expect(component.componentInstance.buildChecklistModelForCategories).toHaveBeenCalled(); + }); + + it ('should call on catalog component filterCatalogItems' , () => { + const component = TestBed.createComponent(CatalogComponent); + component.componentInstance.makeFilteredItems = jest.fn().mockImplementation(() => [1,2,3]); + component.componentInstance.raiseNumberOfElementToDisplay = jest.fn(); + component.componentInstance.catalogItems = ["firstComponent", "secondComponent"]; + component.componentInstance.checkboxesFilter = {}; + component.componentInstance.search = {}; + component.componentInstance.sortBy = ""; + component.componentInstance.reverse = true; + component.componentInstance.numberOfItemToDisplay = 2; + // component.componentInstance.catalogFilteredItems = component.componentInstance.makeFilteredItems(); + component.componentInstance.filterCatalogItems(); + expect(component.componentInstance.makeFilteredItems).toHaveBeenCalledWith(["firstComponent", "secondComponent"], {}, {}, "",true); + expect(component.componentInstance.raiseNumberOfElementToDisplay).toHaveBeenCalledWith(true); + expect(component.componentInstance.catalogFilteredSlicedItems).toEqual([1,2]); + }); + + it ('should call on catalog component applyFilterParamsToCheckboxes' , () => { + const component = TestBed.createComponent(CatalogComponent); + component.componentInstance.applyFilterParamsToCheckboxes(checkListModelMock, ["Resource.CR", "Resource.VFD", "Resource.VF"]); + expect(checkListModelMock.selectedValues).toEqual(["Resource.VF","Resource.CR"]); + expect(checkListModelMock.checkboxes[1].subLevelChecklist.selectedValues).toEqual(["Resource.VFD"]); + expect(checkListModelMock.checkboxes[2].subLevelChecklist.selectedValues).toEqual(["Resource.VF"]) + }); + + it ('should call on catalog component applyFilterParamsComponents and filterParams.active equal true' , () => { + const component = TestBed.createComponent(CatalogComponent); + component.componentInstance.applyFilterParamsToCheckboxes = jest.fn(); + component.componentInstance.checkboxesFilterKeys = checkboxesFilterKeysMock; + component.componentInstance.checkboxesFilter = checkboxesFilterMock; + component.componentInstance.catalogSelectorItems = catalogSelectorItemsMock; + component.componentInstance.typesChecklistModel = checkListModelMock; + component.componentInstance.applyFilterParamsComponents(filterParamsMock); + expect(component.componentInstance.applyFilterParamsToCheckboxes).toHaveBeenCalledWith(checkListModelMock, filterParamsMock.components); + expect(component.componentInstance.checkboxesFilter.selectedComponentTypes).toEqual(["Resource.VFC"]); + expect(component.componentInstance.checkboxesFilter.selectedResourceSubTypes).toEqual(["VF", "VFC"]); + expect(component.componentInstance.selectedCatalogItem).toEqual(catalogSelectorItemsMock[0]); + }); + + it ('should call on catalog component applyFilterParamsComponents and filterParams.active equal false' , () => { + const component = TestBed.createComponent(CatalogComponent); + component.componentInstance.applyFilterParamsToCheckboxes = jest.fn(); + filterParamsMock.active = false; + component.componentInstance.checkboxesFilterKeys = checkboxesFilterKeysMock; + component.componentInstance.checkboxesFilter = checkboxesFilterMock; + component.componentInstance.catalogSelectorItems = catalogSelectorItemsMock; + component.componentInstance.typesChecklistModel = checkListModelMock; + component.componentInstance.applyFilterParamsComponents(filterParamsMock); + expect(component.componentInstance.applyFilterParamsToCheckboxes).toHaveBeenCalledWith(checkListModelMock, filterParamsMock.components); + expect(component.componentInstance.checkboxesFilter.selectedComponentTypes).toEqual(["Resource.VFC"]); + expect(component.componentInstance.checkboxesFilter.selectedResourceSubTypes).toEqual(["VF", "VFC"]); + expect(component.componentInstance.selectedCatalogItem).toEqual(catalogSelectorItemsMock[1]); + }); + + it ('should call on catalog component applyFilterParamsCategories' , () => { + const component = TestBed.createComponent(CatalogComponent); + component.componentInstance.applyFilterParamsToCheckboxes = jest.fn(); + component.componentInstance.categoriesChecklistModel = checkListModelMock; + component.componentInstance.checkboxesFilterKeys = checkboxesFilterKeysMock; + component.componentInstance.checkboxesFilter = checkboxesFilterMock; + component.componentInstance.applyFilterParamsCategories(filterParamsMock); + expect(component.componentInstance.applyFilterParamsToCheckboxes).toHaveBeenCalledWith(checkListModelMock, filterParamsMock.categories); + expect(component.componentInstance.checkboxesFilter.selectedCategoriesModel).toEqual(["serviceNewCategory.network l4+"]); + }); + + it ('should call on catalog component applyFilterParamsStatuses' , () => { + const component = TestBed.createComponent(CatalogComponent); + component.componentInstance.applyFilterParamsToCheckboxes = jest.fn(); + + component.componentInstance.statusChecklistModel = checkListModelMock; + component.componentInstance.checkboxesFilterKeys = checkboxesFilterKeysMock; + component.componentInstance.checkboxesFilter = checkboxesFilterMock; + component.componentInstance.confStatus = sdcMenu.statuses; + component.componentInstance.applyFilterParamsStatuses(filterParamsMock); + expect(component.componentInstance.applyFilterParamsToCheckboxes).toHaveBeenCalledWith(checkListModelMock, filterParamsMock.statuses); + expect(component.componentInstance.checkboxesFilter.selectedStatuses).toEqual(["NOT_CERTIFIED_CHECKOUT", "NOT_CERTIFIED_CHECKIN"]); + }); + + it ('should call on catalog component applyFilterParamsOrder' , () => { + const component = TestBed.createComponent(CatalogComponent); + component.componentInstance.applyFilterParamsOrder(filterParamsMock); + expect(component.componentInstance.sortBy).toEqual("lastUpdateDate"); + expect(component.componentInstance.reverse).toEqual( true); + }); + + it ('should call on catalog component applyFilterParamsTerm' , () => { + const component = TestBed.createComponent(CatalogComponent); + component.componentInstance.applyFilterParamsTerm(filterParamsMock); + expect(component.componentInstance.search.filterTerm).toEqual("Vf"); + }); + + // it ('should call on catalog component loadFilterParams' , () => { + // const component = TestBed.createComponent(CatalogComponent); + // component.componentInstance.$state = {params: {}}; + // component.componentInstance.loadFilterParams(); + // }); + + it ('should call on catalog component changeFilterParams' , () => { + const component = TestBed.createComponent(CatalogComponent); + component.componentInstance.applyFilterParamsToView = jest.fn(); + component.componentInstance.filterParams = { active: true, categories: [], components: [], order: ["lastUpdateDate", true], statuses: [], term: ""}; + component.componentInstance.$state.go = jest.fn().mockImplementation(() => Promise.resolve({ json: () => [] })); + const newParams = {"filter.active": true, "filter.categories": "resourceNewCategory.allotted resource.allotted resource,resourceNewCategory.allotted resource.contrail route,resourceNewCategory.application l4+.application server", "filter.components": "Resource.VF,Resource.VFC", "filter.order": "-lastUpdateDate", "filter.statuses": "inDesign", "filter.term": "Vf"} + component.componentInstance.changeFilterParams(filterParamsMock); + expect(component.componentInstance.filterParams).toEqual(filterParamsMock); + expect(component.componentInstance.$state.go).toHaveBeenCalledWith('.',newParams, {location: 'replace', notify: false}); + expect(component.componentInstance.applyFilterParamsToView).toHaveBeenCalledWith(filterParamsMock); + }); + + it ('should call on catalog component changeFilterParams and rebuild equal true' , () => { + const component = TestBed.createComponent(CatalogComponent); + component.componentInstance.applyFilterParamsToView = jest.fn(); + component.componentInstance.makeFilterParamsFromCheckboxes = jest.fn(); + component.componentInstance.buildCheckboxLists = jest.fn(); + component.componentInstance.filterParams = { active: true, categories: [], components: [], order: ["lastUpdateDate", true], statuses: [], term: ""}; + component.componentInstance.$state.go = jest.fn().mockImplementation(() => Promise.resolve({ json: () => [] })); + const newParams = {"filter.active": true, "filter.categories": "resourceNewCategory.allotted resource.allotted resource,resourceNewCategory.allotted resource.contrail route,resourceNewCategory.application l4+.application server", "filter.components": "Resource.VF,Resource.VFC", "filter.order": "-lastUpdateDate", "filter.statuses": "inDesign", "filter.term": "Vf"} + component.componentInstance.typesChecklistModel = checkListModelMock; + component.componentInstance.categoriesChecklistModel = checkListModelMock; + component.componentInstance.statusChecklistModel = checkListModelMock; + component.componentInstance.changeFilterParams(filterParamsMock, true); + expect(component.componentInstance.filterParams).toEqual(filterParamsMock); + expect(component.componentInstance.$state.go).toHaveBeenCalledWith('.',newParams, {location: 'replace', notify: false}); + //expect(component.componentInstance.makeFilterParamsFromCheckboxes).toHaveBeenCalledWith(component.componentInstance.typesChecklistModel); + //expect(component.componentInstance.buildCheckboxLists).toHaveBeenCalled(); + expect(component.componentInstance.applyFilterParamsToView).toHaveBeenCalledWith(filterParamsMock); + }); + + it ('should call on catalog component makeFilteredCategories' , () => { + const component = TestBed.createComponent(CatalogComponent); + const categoryMock = [{"name":"Network L1-3","normalizedName":"network l1-3","uniqueId":"serviceNewCategory.network l1-3","icons":["network_l_1-3"],"subcategories":null,"version":null,"ownerId":null,"empty":false,"type":null}]; + cacheServiceMock.get.mockImplementation(()=> categoryMock); + const resp = component.componentInstance.makeFilteredCategories(categoriesElements, checkboxesFilterMock.selectedComponentTypes); + expect(component.componentInstance.cacheService.get).toHaveBeenCalledWith("resourceCategories"); + expect(resp).toEqual(categoryMock); + }); + + it ('should call on catalog component makeFilteredCategories return unique elements' , () => { + const component = TestBed.createComponent(CatalogComponent); + const categoryMock = [{"name":"Network L1-3","normalizedName":"network l1-3","uniqueId":"serviceNewCategory.network l1-3","icons":["network_l_1-3"],"subcategories":null,"version":null,"ownerId":null,"empty":false,"type":null}, + {"name":"Network L1-3","normalizedName":"network l1-3","uniqueId":"serviceNewCategory.network l1-3","icons":["network_l_1-3"],"subcategories":null,"version":null,"ownerId":null,"empty":false,"type":null}, + {"name":"Network Service","normalizedName":"network service","uniqueId":"serviceNewCategory.network service","icons":["network_l_1-3"],"subcategories":null,"version":null,"ownerId":null,"empty":false,"type":null}]; + const categoryUniqueMock = [{"name":"Network L1-3","normalizedName":"network l1-3","uniqueId":"serviceNewCategory.network l1-3","icons":["network_l_1-3"],"subcategories":null,"version":null,"ownerId":null,"empty":false,"type":null}, + {"name":"Network Service","normalizedName":"network service","uniqueId":"serviceNewCategory.network service","icons":["network_l_1-3"],"subcategories":null,"version":null,"ownerId":null,"empty":false,"type":null}]; + cacheServiceMock.get.mockImplementation(()=> categoryMock); + checkboxesFilterMock.selectedComponentTypes = ["SERVICE", "Resource.VF"]; + const resp = component.componentInstance.makeFilteredCategories(categoriesElements, checkboxesFilterMock.selectedComponentTypes); + expect(component.componentInstance.cacheService.get).toHaveBeenCalledWith("resourceCategories"); + expect(resp).toEqual(categoryUniqueMock); + }); + + +}); diff --git a/catalog-ui/src/app/ng2/pages/catalog/catalog.component.ts b/catalog-ui/src/app/ng2/pages/catalog/catalog.component.ts new file mode 100644 index 0000000000..527764862a --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/catalog/catalog.component.ts @@ -0,0 +1,666 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import * as _ from "lodash"; +import { Component as NgComponent, Inject } from '@angular/core'; +import { SdcUiCommon, SdcUiServices } from "onap-ui-angular"; +import { CacheService, CatalogService } from "app/services-ng2"; +import { SdcConfigToken, ISdcConfig } from "../../config/sdc-config.config"; +import { SdcMenuToken, IAppMenu } from "../../config/sdc-menu.config"; +import { Component, ICategoryBase, IMainCategory, ISubCategory, IConfigStatuses, ICatalogSelector, CatalogSelectorTypes } from "app/models"; +import { ResourceNamePipe } from "../../pipes/resource-name.pipe"; +import { EntityFilterPipe, IEntityFilterObject, ISearchFilter} from "../../pipes/entity-filter.pipe"; + +interface Gui { + onComponentSubTypesClick:Function; + onComponentTypeClick:Function; + onCategoryClick:Function; + onStatusClick:Function; + changeFilterTerm:Function; +} + +interface IFilterParams { + components: string[]; + categories: string[]; + statuses: (string)[]; + order: [string, boolean]; + term: string; + active: boolean; +} + +interface ICheckboxesFilterMap { + [key: string]: Array<string>; + _main: Array<string>; +} + +interface ICheckboxesFilterKeys { + componentTypes: ICheckboxesFilterMap; + categories: ICheckboxesFilterMap; + statuses: ICheckboxesFilterMap; +} + +interface ICategoriesMap { + [key: string]: { + category: ICategoryBase, + parent: ICategoryBase + } +} + +@NgComponent({ + selector: 'catalog', + templateUrl: './catalog.component.html', + styleUrls:['./catalog.component.less'] +}) +export class CatalogComponent { + public checkboxesFilter:IEntityFilterObject; + public checkboxesFilterKeys:ICheckboxesFilterKeys; + public gui:Gui; + public categories:Array<IMainCategory>; + public filteredCategories:Array<IMainCategory>; + public confStatus:IConfigStatuses; + public componentTypes:{[key:string]: Array<string>}; + public catalogItems:Array<Component>; + public catalogFilteredItems:Array<Component>; + public catalogFilteredSlicedItems:Array<Component>; + public expandedSection:Array<string>; + public version:string; + public sortBy:string; + public reverse:boolean; + public filterParams:IFilterParams; + public search:ISearchFilter; + + //this is for UI paging + public numberOfItemToDisplay:number; + + public selectedCatalogItem: ICatalogSelector; + public catalogSelectorItems: Array<ICatalogSelector>; + public showCatalogSelector: boolean; + + public typesChecklistModel: SdcUiCommon.ChecklistModel; + public categoriesChecklistModel: SdcUiCommon.ChecklistModel; + public statusChecklistModel: SdcUiCommon.ChecklistModel; + + private defaultFilterParams:IFilterParams = { + components: [], + categories: [], + statuses: [], + order: ['lastUpdateDate', true], + term: '', + active: true + }; + private categoriesMap:ICategoriesMap; + + constructor( + @Inject(SdcConfigToken) private sdcConfig:ISdcConfig, + @Inject(SdcMenuToken) public sdcMenu:IAppMenu, + @Inject("$state") private $state:ng.ui.IStateService, + private cacheService:CacheService, + private catalogService:CatalogService, + private resourceNamePipe:ResourceNamePipe, + private loaderService: SdcUiServices.LoaderService + ) {} + + ngOnInit(): void { + this.initGui(); + this.initLeftSwitch(); + this.initScopeMembers(); + this.loadFilterParams(); + this.initCatalogData(); // Async task to get catalog from server. + } + + private initLeftSwitch = ():void => { + this.showCatalogSelector = false; + + this.catalogSelectorItems = [ + {value: CatalogSelectorTypes.Active, title: "Active Items", header: "Active"}, + {value: CatalogSelectorTypes.Archive, title: "Archive", header: "Archived"} + ]; + // set active items is default + this.selectedCatalogItem = this.catalogSelectorItems[0]; + }; + + private initCatalogData = ():void => { + if(this.selectedCatalogItem.value === CatalogSelectorTypes.Archive){ + this.getArchiveCatalogItems(); + } else { + this.getActiveCatalogItems(); + } + }; + + + private initScopeMembers = ():void => { + this.numberOfItemToDisplay = 0; + this.categories = this.makeSortedCategories(this.cacheService.get('serviceCategories').concat(this.cacheService.get('resourceCategories'))) + .map((cat) => <IMainCategory>cat); + this.confStatus = this.sdcMenu.statuses; + this.expandedSection = ["type", "category", "status"]; + this.catalogItems = []; + this.search = {FilterTerm: ""}; + this.categoriesMap = this.initCategoriesMap(); + this.initCheckboxesFilter(); + this.initCheckboxesFilterKeys(); + this.buildCheckboxLists(); + + this.version = this.cacheService.get('version'); + this.sortBy = 'lastUpdateDate'; + this.reverse = true; + }; + + private buildCheckboxLists() { + this.buildChecklistModelForTypes(); + this.buildChecklistModelForCategories(); + this.buildChecklistModelForStatuses(); + } + + private getTestIdForCheckboxByText = ( text: string ):string => { + return 'checkbox-' + text.toLowerCase().replace(/ /g, ''); + } + + private buildChecklistModelForTypes() { + this.componentTypes = { + Resource: ['VF', 'VFC', 'CR', 'PNF', 'CP', 'VL'], + Service: null + }; + this.typesChecklistModel = new SdcUiCommon.ChecklistModel(this.checkboxesFilterKeys.componentTypes._main, + Object.keys(this.componentTypes).map((ct) => { + let subChecklist = null; + if (this.componentTypes[ct]) { + this.checkboxesFilterKeys.componentTypes[ct] = this.checkboxesFilterKeys.componentTypes[ct] || []; + subChecklist = new SdcUiCommon.ChecklistModel(this.checkboxesFilterKeys.componentTypes[ct], + this.componentTypes[ct].map((st) => { + const stKey = [ct, st].join('.'); + const testId = this.getTestIdForCheckboxByText(st); + return new SdcUiCommon.ChecklistItemModel(st, false, this.checkboxesFilterKeys.componentTypes[ct].indexOf(stKey) !== -1, null, testId, stKey); + }) + ); + } + const testId = this.getTestIdForCheckboxByText(ct); + return new SdcUiCommon.ChecklistItemModel(ct, false, this.checkboxesFilterKeys.componentTypes._main.indexOf(ct) !== -1, subChecklist, testId, ct); + }) + ); + } + + private buildChecklistModelForCategories() { + this.categoriesChecklistModel = new SdcUiCommon.ChecklistModel(this.checkboxesFilterKeys.categories._main, + (this.filteredCategories || this.categories).map((cat) => { + this.checkboxesFilterKeys.categories[cat.uniqueId] = this.checkboxesFilterKeys.categories[cat.uniqueId] || []; + const subCategoriesChecklistModel = new SdcUiCommon.ChecklistModel(this.checkboxesFilterKeys.categories[cat.uniqueId], + (cat.subcategories || []).map((scat) => { + this.checkboxesFilterKeys.categories[scat.uniqueId] = this.checkboxesFilterKeys.categories[scat.uniqueId] || []; + const groupingsChecklistModel = new SdcUiCommon.ChecklistModel(this.checkboxesFilterKeys.categories[scat.uniqueId], + (scat.groupings || []).map(gcat => + new SdcUiCommon.ChecklistItemModel(gcat.name, false, this.checkboxesFilterKeys.categories[scat.uniqueId].indexOf(gcat.uniqueId) !== -1, null, this.getTestIdForCheckboxByText(gcat.uniqueId), gcat.uniqueId)) + ); + return new SdcUiCommon.ChecklistItemModel(scat.name, false, this.checkboxesFilterKeys.categories[cat.uniqueId].indexOf(scat.uniqueId) !== -1, groupingsChecklistModel, this.getTestIdForCheckboxByText(scat.uniqueId), scat.uniqueId); + }) + ); + return new SdcUiCommon.ChecklistItemModel(cat.name, false, this.checkboxesFilterKeys.categories._main.indexOf(cat.uniqueId) !== -1, subCategoriesChecklistModel, this.getTestIdForCheckboxByText(cat.uniqueId), cat.uniqueId); + }) + ); + } + + private buildChecklistModelForStatuses() { + // For statuses checklist model, use the statuses keys as values. On applying filtering map the statuses keys to statuses values. + this.statusChecklistModel = new SdcUiCommon.ChecklistModel(this.checkboxesFilterKeys.statuses._main, + Object.keys(this.confStatus).map((sKey) => new SdcUiCommon.ChecklistItemModel( + this.confStatus[sKey].name, + false, + this.checkboxesFilterKeys.statuses._main.indexOf(sKey) !== -1, + null, + this.getTestIdForCheckboxByText(sKey), + sKey)) + ); + } + + private initCheckboxesFilter() { + // Checkboxes filter init + this.checkboxesFilter = <IEntityFilterObject>{}; + this.checkboxesFilter.selectedComponentTypes = []; + this.checkboxesFilter.selectedResourceSubTypes = []; + this.checkboxesFilter.selectedCategoriesModel = []; + this.checkboxesFilter.selectedStatuses = []; + } + + private initCheckboxesFilterKeys() { + // init checkboxes filter keys (for checklists values): + this.checkboxesFilterKeys = <ICheckboxesFilterKeys>{}; + this.checkboxesFilterKeys.componentTypes = { _main: [] }; + this.checkboxesFilterKeys.categories = { _main: [] }; + this.checkboxesFilterKeys.statuses = { _main: [] }; + } + + private initCategoriesMap(categoriesList?:(ICategoryBase)[], parentCategory:ICategoryBase=null): ICategoriesMap { + categoriesList = (categoriesList) ? categoriesList : this.categories; + + // Init categories map + return categoriesList.reduce((acc, cat) => { + acc[cat.uniqueId] = { + category: cat, + parent: parentCategory + }; + const catChildren = ((<IMainCategory>cat).subcategories) + ? (<IMainCategory>cat).subcategories + : (((<ISubCategory>cat).groupings) + ? (<ISubCategory>cat).groupings + : null); + if (catChildren) { + Object.assign(acc, this.initCategoriesMap(catChildren, cat)); + } + return acc; + }, <ICategoriesMap>{}); + } + + public selectLeftSwitchItem(item: ICatalogSelector): void { + if (this.selectedCatalogItem.value !== item.value) { + this.selectedCatalogItem = item; + switch (item.value) { + case CatalogSelectorTypes.Active: + this.getActiveCatalogItems(true); + break; + + case CatalogSelectorTypes.Archive: + this.getArchiveCatalogItems(true); + break; + } + this.changeFilterParams({active: (item.value === CatalogSelectorTypes.Active)}); + } + } + + public sectionClick(section: string): void { + let index: number = this.expandedSection.indexOf(section); + if (index !== -1) { + this.expandedSection.splice(index, 1); + } else { + this.expandedSection.push(section); + } + } + + + private makeFilterParamsFromCheckboxes(checklistModel:SdcUiCommon.ChecklistModel): Array<string> { + return checklistModel.checkboxes.reduce((acc, chbox) => { + if (checklistModel.selectedValues.indexOf(chbox.value) !== -1) { + acc.push(chbox.value); + } else if (chbox.subLevelChecklist) { // else, if checkbox is not checked, then try to get values from sub checklists + acc.push(...this.makeFilterParamsFromCheckboxes(chbox.subLevelChecklist)); + } + return acc; + }, []); + } + + //default sort by descending last update. default for alphabetical = ascending + public order(sortBy: string): void { + this.changeFilterParams({ + order: (this.filterParams.order[0] === sortBy) + ? [sortBy, !this.filterParams.order[1]] + : [sortBy, sortBy === 'lastUpdateDate'] + }); + } + + + public goToComponent(component: Component): void { + this.$state.go('workspace.general', {id: component.uniqueId, type: component.componentType.toLowerCase()}); + } + + + // Will print the number of elements found in catalog + public getNumOfElements(num:number):string { + if (!num || num === 0) { + return `No <b>${this.selectedCatalogItem.header}</b> Elements found`; + } else if (num === 1) { + return `1 <b>${this.selectedCatalogItem.header}</b> Element found`; + } else { + return num + ` <b>${this.selectedCatalogItem.header}</b> Elements found`; + } + } + + public initGui(): void { + this.gui = <Gui>{}; + + /** + * Select | unselect sub resource when resource is clicked | unclicked. + * @param type + */ + this.gui.onComponentTypeClick = (): void => { + this.changeFilterParams({ + components: this.makeFilterParamsFromCheckboxes(this.typesChecklistModel) + }); + }; + + this.gui.onCategoryClick = (): void => { + this.changeFilterParams({ + categories: this.makeFilterParamsFromCheckboxes(this.categoriesChecklistModel) + }); + }; + + this.gui.onStatusClick = (statusChecklistItem: SdcUiCommon.ChecklistItemModel) => { + this.changeFilterParams({ + statuses: this.makeFilterParamsFromCheckboxes(this.statusChecklistModel) + }); + }; + + this.gui.changeFilterTerm = (filterTerm: string) => { + this.changeFilterParams({ + term: filterTerm + }); + }; + } + + public raiseNumberOfElementToDisplay(recalculate:boolean = false): void { + const scrollPageAmount = 35; + if (!this.catalogFilteredItems) { + this.numberOfItemToDisplay = 0; + } else if (this.catalogFilteredItems.length > this.numberOfItemToDisplay || recalculate) { + let fullPagesAmount = Math.ceil(this.numberOfItemToDisplay / scrollPageAmount) * scrollPageAmount; + if (!recalculate || fullPagesAmount === 0) { //TODO trigger infiniteScroll to check bottom and fire onBottomHit by itself (sdc-ui) + fullPagesAmount += scrollPageAmount; + } + this.numberOfItemToDisplay = Math.min(this.catalogFilteredItems.length, fullPagesAmount); + this.catalogFilteredSlicedItems = this.catalogFilteredItems.slice(0, this.numberOfItemToDisplay); + } + } + + private isDefaultFilter = (): boolean => { + return angular.equals(this.defaultFilterParams, this.filterParams); + } + + private componentShouldReload = ():boolean => { + let breadcrumbsValid: boolean = (this.$state.current.name === this.cacheService.get('breadcrumbsComponentsState') && this.cacheService.contains('breadcrumbsComponents')); + return !breadcrumbsValid || this.isDefaultFilter(); + } + + private getActiveCatalogItems(forceReload?: boolean): void { + if (forceReload || this.componentShouldReload()) { + this.loaderService.activate(); + + let onSuccess = (followedResponse:Array<Component>):void => { + this.updateCatalogItems(followedResponse); + this.loaderService.deactivate(); + this.cacheService.set('breadcrumbsComponentsState', this.$state.current.name); //catalog + this.cacheService.set('breadcrumbsComponents', followedResponse); + + }; + + let onError = ():void => { + console.info('Failed to load catalog CatalogViewModel::getActiveCatalogItems'); + this.loaderService.deactivate(); + }; + this.catalogService.getCatalog().subscribe(onSuccess, onError); + } else { + let cachedComponents = this.cacheService.get('breadcrumbsComponents'); + this.updateCatalogItems(cachedComponents); + } + } + + private getArchiveCatalogItems(forceReload?: boolean): void { + if(forceReload || !this.cacheService.contains("archiveComponents")) { + this.loaderService.activate(); + let onSuccess = (followedResponse:Array<Component>):void => { + this.cacheService.set("archiveComponents", followedResponse); + this.loaderService.deactivate(); + this.updateCatalogItems(followedResponse); + }; + + let onError = ():void => { + console.info('Failed to load catalog CatalogViewModel::getArchiveCatalogItems'); + this.loaderService.deactivate(); + }; + + this.catalogService.getArchiveCatalog().subscribe(onSuccess, onError); + } else { + let archiveCache = this.cacheService.get("archiveComponents"); + this.updateCatalogItems(archiveCache); + } + } + + private updateCatalogItems = (items:Array<Component>):void => { + this.catalogItems = items; + this.catalogItems.forEach(this.addFilterTermToComponent); + this.filterCatalogItems(); + } + + private applyFilterParamsToView(filterParams:IFilterParams) { + // reset checkboxes filter + this.initCheckboxesFilter(); + + this.filterCatalogCategories(); + + this.applyFilterParamsComponents(filterParams); + this.applyFilterParamsCategories(filterParams); + this.applyFilterParamsStatuses(filterParams); + this.applyFilterParamsOrder(filterParams); + this.applyFilterParamsTerm(filterParams); + + // do filters when filter params are changed: + this.filterCatalogItems(); + } + + private filterCatalogCategories() { + this.filteredCategories = this.makeFilteredCategories(this.categories, this.checkboxesFilter.selectedComponentTypes); + this.buildChecklistModelForCategories(); + } + + private filterCatalogItems() { + this.catalogFilteredItems = this.makeFilteredItems(this.catalogItems, this.checkboxesFilter, this.search, this.sortBy, this.reverse); + this.raiseNumberOfElementToDisplay(true); + this.catalogFilteredSlicedItems = this.catalogFilteredItems.slice(0, this.numberOfItemToDisplay); + } + + private applyFilterParamsToCheckboxes(checklistModel:SdcUiCommon.ChecklistModel, filterParamsList:Array<string>) { + checklistModel.checkboxes.forEach((chbox) => { + // if checkbox is checked, then add it to selected values if not there, and select all sub checkboxes + if (filterParamsList.indexOf(chbox.value) !== -1 && checklistModel.selectedValues.indexOf(chbox.value) === -1) { + checklistModel.selectedValues.push(chbox.value); + if (chbox.subLevelChecklist) { + this.applyFilterParamsToCheckboxes(chbox.subLevelChecklist, chbox.subLevelChecklist.checkboxes.map((subchbox) => subchbox.value)); + } + } else if ( chbox.subLevelChecklist ) { + this.applyFilterParamsToCheckboxes(chbox.subLevelChecklist, filterParamsList); + } + }); + } + + private applyFilterParamsComponents(filterParams:IFilterParams) { + this.applyFilterParamsToCheckboxes(this.typesChecklistModel, filterParams.components); + this.checkboxesFilter.selectedComponentTypes = this.checkboxesFilterKeys.componentTypes._main; + Object.keys(this.checkboxesFilterKeys.componentTypes).forEach((chKey) => { + if (chKey !== '_main') { + this.checkboxesFilter['selected' + chKey + 'SubTypes'] = this.checkboxesFilterKeys.componentTypes[chKey].map((st) => st.substr(chKey.length + 1)); + } + }); + + let selectedCatalogIndex = filterParams.active ? CatalogSelectorTypes.Active : CatalogSelectorTypes.Archive; + this.selectedCatalogItem = this.catalogSelectorItems[selectedCatalogIndex]; + } + + private applyFilterParamsCategories(filterParams:IFilterParams) { + this.applyFilterParamsToCheckboxes(this.categoriesChecklistModel, filterParams.categories); + this.checkboxesFilter.selectedCategoriesModel = <Array<string>>_.flatMap(this.checkboxesFilterKeys.categories); + } + + private applyFilterParamsStatuses(filterParams: IFilterParams) { + this.applyFilterParamsToCheckboxes(this.statusChecklistModel, filterParams.statuses); + this.checkboxesFilter.selectedStatuses = _.reduce(_.flatMap(this.checkboxesFilterKeys.statuses), (stats, st:string) => [...stats, ...this.confStatus[st].values], []); + } + + private applyFilterParamsOrder(filterParams: IFilterParams) { + this.sortBy = filterParams.order[0]; + this.reverse = filterParams.order[1]; + } + + private applyFilterParamsTerm(filterParams: IFilterParams) { + this.search = { + filterTerm: filterParams.term + }; + } + + private loadFilterParams() { + const params = this.$state.params; + this.filterParams = angular.copy(this.defaultFilterParams); + Object.keys(params).forEach((k) => { + if (!angular.isUndefined(params[k])) { + let newVal; + let paramsChecklist: SdcUiCommon.ChecklistModel = null; + let filterKey = k.substr('filter.'.length); + switch (k) { + case 'filter.components': + paramsChecklist = paramsChecklist || this.typesChecklistModel; + case 'filter.categories': + paramsChecklist = paramsChecklist || this.categoriesChecklistModel; + case 'filter.statuses': + paramsChecklist = paramsChecklist || this.statusChecklistModel; + + // for those cases above - split param by comma and make reduced checklist values for filter params (url) + newVal = _.uniq(params[k].split(',')); + break; + case 'filter.order': + newVal = params[k].startsWith('-') ? [params[k].substr(1), true] : [params[k], false]; + break; + case 'filter.term': + newVal = params[k]; + break; + case 'filter.active': + newVal = (params[k] === "true" || params[k] === true)? true : false; + break; + default: + // unknown filter key + filterKey = null; + } + if (filterKey) { + this.filterParams[filterKey] = newVal; + } + } + }); + // re-set filter params with valid values, and then re-build checklists + this.changeFilterParams(this.filterParams, true); + } + + private changeFilterParams(changedFilterParams, rebuild:boolean = false) { + const newParams = {}; + Object.keys(changedFilterParams).forEach((k) => { + let newVal; + switch (k) { + case 'components': + case 'categories': + case 'statuses': + newVal = changedFilterParams[k] && changedFilterParams[k].length ? changedFilterParams[k].join(',') : null; + break; + case 'order': + newVal = (changedFilterParams[k][1] ? '-' : '') + changedFilterParams[k][0]; + break; + case 'term': + newVal = changedFilterParams[k] ? changedFilterParams[k] : null; + break; + case 'active': + newVal = (changedFilterParams[k] === "true" || changedFilterParams[k] === true); + break; + default: + return; + } + this.filterParams[k] = changedFilterParams[k]; + newParams['filter.' + k] = newVal; + }); + this.$state.go('.', newParams, {location: 'replace', notify: false}).then(() => { + if (rebuild) { + // fix the filter params to only valid values for checkboxes + this.changeFilterParams({ + components: this.makeFilterParamsFromCheckboxes(this.typesChecklistModel), + categories: this.makeFilterParamsFromCheckboxes(this.categoriesChecklistModel), + statuses: this.makeFilterParamsFromCheckboxes(this.statusChecklistModel) + }); + // rebuild the checkboxes to show selected + this.buildCheckboxLists(); + } + }); + this.applyFilterParamsToView(this.filterParams); + } + + private makeFilteredCategories(categories:Array<IMainCategory>, selectedTypes:Array<string>=[]): Array<IMainCategory> { + let filteredCategories = categories.slice(); + + const filteredMainTypes = selectedTypes.reduce((acc, st) => { + const mainType = st.split('.')[0]; + if (acc.indexOf(mainType) === -1) { + acc.push(mainType); + } + return acc; + }, []); + + // filter by selected types + if (filteredMainTypes.length) { + const filteredTypesCategories = filteredMainTypes.reduce((acc, mainType: string) => { + acc.push(...this.cacheService.get(mainType.toLowerCase() + 'Categories')); + return acc; + }, []); + + filteredCategories = _.intersectionBy(filteredCategories, filteredTypesCategories, c => c.uniqueId); + } + + return filteredCategories; + } + + private makeSortedCategories(categories:Array<IMainCategory|ISubCategory|ICategoryBase>, sortBy?:any): Array<IMainCategory|ISubCategory|ICategoryBase> { + sortBy = (sortBy !== undefined) ? sortBy : ['name']; + let sortedCategories = categories.map(cat => Object.assign({}, cat)); // copy each object in the array + sortedCategories = _.sortBy(sortedCategories, sortBy); + + // inner sort of subcategories and groupings + sortedCategories.forEach((cat) => { + if ('subcategories' in cat && cat['subcategories'] && cat['subcategories'].length > 0) { + cat['subcategories'] = this.makeSortedCategories(cat['subcategories'], sortBy); + } + if ('groupings' in cat && cat['groupings'] && cat['groupings'].length > 0) { + cat['groupings'] = this.makeSortedCategories(cat['groupings'], sortBy); + } + }); + + return sortedCategories; + } + + private addFilterTermToComponent(component:Component) { + component.filterTerm = component.name + ' ' + component.description + ' ' + component.tags.toString() + ' ' + component.version; + component.filterTerm = component.filterTerm.toLowerCase(); + } + + private makeFilteredItems(catalogItems:Array<Component>, filter:IEntityFilterObject, search:ISearchFilter, sortBy:string, reverse:boolean) { + let filteredComponents:Array<Component> = catalogItems; + + // common entity filter + // -------------------------------------------------------------------------- + filter = Object.assign({ search }, filter); // add search to entity filter object + filteredComponents = EntityFilterPipe.transform(filteredComponents, filter); + + // sort + // -------------------------------------------------------------------------- + if (sortBy) { + switch (sortBy) { + case 'resourceName': + filteredComponents = _.sortBy(filteredComponents, cat => this.resourceNamePipe.transform(cat.name)); + break; + default: + filteredComponents = _.sortBy(filteredComponents, [sortBy]); + } + if (reverse) { + _.reverse(filteredComponents); + } + } + + return filteredComponents; + } +} diff --git a/catalog-ui/src/app/ng2/pages/catalog/catalog.module.ts b/catalog-ui/src/app/ng2/pages/catalog/catalog.module.ts new file mode 100644 index 0000000000..5ef8de01e3 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/catalog/catalog.module.ts @@ -0,0 +1,33 @@ +import { NgModule } from "@angular/core"; +import { CommonModule } from "@angular/common"; +import { CatalogComponent } from "./catalog.component"; +import { LayoutModule } from "../../components/layout/layout.module"; +import { UiElementsModule } from "../../components/ui/ui-elements.module"; +import { GlobalPipesModule } from "../../pipes/global-pipes.module"; +import { TranslateModule } from "../../shared/translator/translate.module"; +import { SdcUiComponentsModule } from "onap-ui-angular"; +import {SdcTileModule} from "../../components/ui/tile/sdc-tile.module"; + +@NgModule({ + declarations: [ + CatalogComponent + ], + imports: [ + CommonModule, + SdcUiComponentsModule, + LayoutModule, + UiElementsModule, + GlobalPipesModule, + TranslateModule, + SdcTileModule + ], + exports: [ + CatalogComponent + ], + entryComponents: [ + CatalogComponent + ], + providers: [] +}) +export class CatalogModule { +} |