diff options
Diffstat (limited to 'catalog-ui/src/app/view-models/dashboard')
| -rw-r--r-- | catalog-ui/src/app/view-models/dashboard/dashboard-view-model.ts | 117 | ||||
| -rw-r--r-- | catalog-ui/src/app/view-models/dashboard/dashboard-view.html | 113 |
2 files changed, 143 insertions, 87 deletions
diff --git a/catalog-ui/src/app/view-models/dashboard/dashboard-view-model.ts b/catalog-ui/src/app/view-models/dashboard/dashboard-view-model.ts index 42628607c9..4d084045f7 100644 --- a/catalog-ui/src/app/view-models/dashboard/dashboard-view-model.ts +++ b/catalog-ui/src/app/view-models/dashboard/dashboard-view-model.ts @@ -21,13 +21,15 @@ 'use strict'; import {IConfigRoles, IAppConfigurtaion, IAppMenu, IUserProperties, Component} from "app/models"; import {EntityService, SharingService, CacheService} from "app/services"; -import {ComponentType, ResourceType, MenuHandler, ModalsHandler, ChangeLifecycleStateHandler, SEVERITY, ComponentFactory} from "app/utils"; +import {ComponentType, ResourceType, MenuHandler, ModalsHandler, ChangeLifecycleStateHandler, SEVERITY, ComponentFactory, CHANGE_COMPONENT_CSAR_VERSION_FLAG} from "app/utils"; import {IClientMessageModalModel} from "../modals/message-modal/message-client-modal/client-message-modal-view-model"; import {UserService} from "../../ng2/services/user.service"; + export interface IDashboardViewModelScope extends ng.IScope { isLoading:boolean; + numberOfItemToDisplay:number; components:Array<Component>; folders:FoldersMenu; roles:IConfigRoles; @@ -38,10 +40,11 @@ export interface IDashboardViewModelScope extends ng.IScope { showTutorial:boolean; isFirstTime:boolean; version:string; - checkboxesFilter:CheckboxesFilter; + filterParams:DashboardFilter; vfcmtType:string; - + changeFilterParams():void; + updateSearchTerm(newTerm:string):void; onImportVfc(file:any):void; onImportVf(file:any):void; openCreateModal(componentType:ComponentType, importedFile:any):void; @@ -52,11 +55,12 @@ export interface IDashboardViewModelScope extends ng.IScope { getCurrentFolderDistributed():Array<Component>; changeLifecycleState(entity:any, data:any):void; goToComponent(component:Component):void; + raiseNumberOfElementToDisplay():void; wizardDebugEdit:Function; notificationIconCallback:Function; } -interface CheckboxesFilter { +interface ICheckboxesFilter { // Statuses selectedStatuses:Array<string>; // distributed @@ -76,6 +80,35 @@ export interface IMenuItemProperties { states:Array<any>; } +export interface IQueryFilterParams { + 'filter.term': string; + 'filter.distributed': string; + 'filter.status': string +} + + +export class DashboardFilter { + searchTerm: string; + checkboxes: ICheckboxesFilter; + + constructor(params = {}) { + this.searchTerm = params['filter.term'] || ""; + this.checkboxes = { + selectedStatuses : params['filter.status']? params['filter.status'].split(',') : [], + distributed : params['filter.distributed']? params['filter.distributed'].split(',') : [] + }; + } + + public toParam = ():IQueryFilterParams => { + return { + 'filter.term': this.searchTerm, + 'filter.distributed': this.checkboxes && this.checkboxes.distributed.join(',') || null, + 'filter.status': this.checkboxes && this.checkboxes.selectedStatuses.join(',') || null + }; + } + +} + export class FoldersMenu { private _folders:Array<FoldersItemsMenu> = []; @@ -190,7 +223,7 @@ export class DashboardViewModel { private $http:ng.IHttpService, private sdcConfig:IAppConfigurtaion, private sdcMenu:IAppMenu, - private $state:any, + private $state:ng.ui.IStateService, private $stateParams:any, private userService:UserService, private sharingService:SharingService, @@ -202,7 +235,7 @@ export class DashboardViewModel { private MenuHandler:MenuHandler) { this.initScope(); this.initFolders(); - this.initEntities(true); + this.initEntities(); if (this.$stateParams) { @@ -237,6 +270,7 @@ export class DashboardViewModel { this.$scope.version = this.cacheService.get('version'); this.$scope.sharingService = this.sharingService; + this.$scope.numberOfItemToDisplay = 0; this.$scope.isLoading = false; this.$scope.sdcConfig = this.sdcConfig; this.$scope.sdcMenu = this.sdcMenu; @@ -245,21 +279,26 @@ export class DashboardViewModel { this.$scope.showTutorial = false; this.$scope.isFirstTime = false; this.$scope.vfcmtType = ResourceType.VFCMT; + this.$scope.filterParams = new DashboardFilter(this.$state.params); // Open onboarding modal this.$scope.notificationIconCallback = ():void => { - this.ModalsHandler.openOnboadrdingModal('Import').then(()=> { - // OK + this.ModalsHandler.openOnboadrdingModal('Import').then((result)=> { + //OK + if(!result.previousComponent || result.previousComponent.csarVersion != result.componentCsar.csarVersion) { + this.cacheService.set(CHANGE_COMPONENT_CSAR_VERSION_FLAG, result.componentCsar.csarVersion); + } + + this.$state.go('workspace.general', { + id: result.previousComponent && result.previousComponent.uniqueId, + componentCsar: result.componentCsar, + type: result.type + }); }, ()=> { // ERROR }); }; - // Checkboxes filter init - this.$scope.checkboxesFilter = <CheckboxesFilter>{}; - this.$scope.checkboxesFilter.selectedStatuses = []; - this.$scope.checkboxesFilter.distributed = []; - this.$scope.onImportVf = (file:any):void => { if (file && file.filename) { // Check that the file has valid extension. @@ -367,6 +406,20 @@ export class DashboardViewModel { this.$state.go('workspace.general', {id: component.uniqueId, type: component.componentType.toLowerCase()}); }; + this.$scope.raiseNumberOfElementToDisplay = ():void => { + this.$scope.numberOfItemToDisplay = this.$scope.numberOfItemToDisplay + 35; + if (this.$scope.components) { + this.$scope.isAllItemDisplay = this.$scope.numberOfItemToDisplay >= this.$scope.components.length; + } + }; + + this.$scope.updateSearchTerm = (newTerm: string):void => { + this.$scope.filterParams.searchTerm = newTerm; + }; + + this.$scope.changeFilterParams = ():void => { + this.$state.go('.', this.$scope.filterParams.toParam(), {location: 'replace', notify: false}); + }; }; private _getTotalCounts(tmpFolder, self):number { @@ -393,16 +446,38 @@ export class DashboardViewModel { } } - private initEntities = (reload:boolean):void => { - this.$scope.isLoading = reload; - this.entityService.getAllComponents().then( - (components:Array<Component>) => { - this.components = components; - this.$scope.components = components; - this.$scope.isLoading = false; - }); + private initEntities = (forceReload?:boolean):void => { + + if(forceReload || this.componentShouldReload()){ + this.$scope.isLoading = true; + this.entityService.getAllComponents(true).then( + (components:Array<Component>) => { + this.cacheService.set('breadcrumbsComponentsState', this.$state.current.name); //dashboard + this.cacheService.set('breadcrumbsComponents', components); + this.components = components; + this.$scope.components = components; + this.$scope.isAllItemDisplay = this.$scope.numberOfItemToDisplay >= this.$scope.components.length; + this.$scope.isLoading = false; + }); + } else { + this.components = this.cacheService.get('breadcrumbsComponents'); + this.$scope.components = this.components; + this.$scope.isAllItemDisplay = this.$scope.numberOfItemToDisplay >= this.$scope.components.length; + + } + }; + private isDefaultFilter = (): boolean => { + let defaultFilter = new DashboardFilter(); + return angular.equals(defaultFilter, this.$scope.filterParams); + } + + private componentShouldReload = ():boolean => { + let breadcrumbsValid: boolean = (this.$state.current.name === this.cacheService.get('breadcrumbsComponentsState') && this.cacheService.contains('breadcrumbsComponents')); + return !breadcrumbsValid || this.isDefaultFilter(); + } + private getEntitiesByStateDist = (state:string, dist:string):Array<Component> => { let gObj:Array<Component>; if (this.components && (state || dist)) { diff --git a/catalog-ui/src/app/view-models/dashboard/dashboard-view.html b/catalog-ui/src/app/view-models/dashboard/dashboard-view.html index bddcbcd46c..8279232b13 100644 --- a/catalog-ui/src/app/view-models/dashboard/dashboard-view.html +++ b/catalog-ui/src/app/view-models/dashboard/dashboard-view.html @@ -8,74 +8,53 @@ <div class="w-sdc-main-container"> - <perfect-scrollbar include-padding="true" class="w-sdc-main-right-container"> - - <div class='w-sdc-row-flex-items'> - - <!-- ADD Component --> - <div ng-if="user.role === 'DESIGNER'" class="w-sdc-dashboard-card-new" - data-ng-mouseleave="displayActions = false" - data-ng-mouseover="displayActions = true" - data-ng-init="displayActions = false"> - <div class="w-sdc-dashboard-card-new-content" data-tests-id="AddButtonsArea"> - <div class="w-sdc-dashboard-card-new-content-plus" data-ng-show="!displayActions"></div> - <div class="sdc-dashboard-create-element-container" data-ng-show="displayActions"> - <button data-ng-if="roles[user.role].dashboard.showCreateNew" data-tests-id="createResourceButton" class="tlv-btn outline blue" data-ng-click="openCreateModal('RESOURCE')">Add VF</button> - <button data-ng-if="roles[user.role].dashboard.showCreateNew" data-tests-id="createCRButton" class="tlv-btn outline blue" data-ng-click="createCR()">Add CR</button> - <button data-ng-if="roles[user.role].dashboard.showCreateNew" data-tests-id="createPNFButton" class="tlv-btn outline blue" data-ng-click="createPNF()">Add PNF</button> - <button data-ng-if="roles[user.role].dashboard.showCreateNew" data-tests-id="createServiceButton" class="tlv-btn outline blue" data-ng-click="openCreateModal('SERVICE')">Add Service</button> - </div> - </div> - </div> - - <!-- Import Component --> - <div ng-if="user.role === 'DESIGNER'" class="w-sdc-dashboard-card-new" - data-ng-mouseleave="displayActions = false" - data-ng-mouseover="displayActions = true" - data-ng-init="displayActions = false"> - <div class="w-sdc-dashboard-card-new-content" data-tests-id="importButtonsArea" > - <div class="w-sdc-dashboard-card-import-content-plus" data-ng-show="!displayActions"></div> - <div class="sdc-dashboard-import-element-container" data-ng-show="displayActions"> - <div data-ng-if="roles[user.role].dashboard.showCreateNew" class="tlv-btn outline blue">Import VFC - <file-opener on-file-upload="onImportVfc(file)" data-tests-id="importVFCbutton" extensions="{{sdcConfig.toscaFileExtension}}" data-ng-click="displayActions=false"></file-opener> - </div> - <div data-ng-if="roles[user.role].dashboard.showCreateNew" class="tlv-btn outline blue" data-ng-click="notificationIconCallback()">Import VSP</div> - <div data-ng-if="roles[user.role].dashboard.showCreateNew" class="tlv-btn outline blue import-dcae">Import DCAE asset - <file-opener on-file-upload="onImportVf(file)" data-tests-id="importVFbutton" extensions="{{sdcConfig.csarFileExtension}}" data-ng-click="displayActions=false"></file-opener> + <perfect-scrollbar id="dashboard-main-scroll" include-padding="true" class="w-sdc-main-right-container"> + + <div infinite-scroll-disabled='isAllItemDisplay' infinite-scroll="raiseNumberOfElementToDisplay()" infinite-scroll-container="'#dashboard-main-scroll'" infinite-scroll-distance="'0.2'" infinite-scroll-parent> + + <div class='w-sdc-row-flex-items'> + + <!-- ADD Component --> + <div ng-if="user.role === 'DESIGNER'" class="w-sdc-dashboard-card-new" + data-ng-mouseleave="displayActions = false" + data-ng-mouseover="displayActions = true" + data-ng-init="displayActions = false"> + <div class="w-sdc-dashboard-card-new-content" data-tests-id="AddButtonsArea"> + <div class="w-sdc-dashboard-card-new-content-plus" data-ng-show="!displayActions"></div> + <div class="sdc-dashboard-create-element-container" data-ng-show="displayActions"> + <button data-ng-if="roles[user.role].dashboard.showCreateNew" data-tests-id="createResourceButton" class="tlv-btn outline blue" data-ng-click="openCreateModal('RESOURCE')">Add VF</button> + <button data-ng-if="roles[user.role].dashboard.showCreateNew" data-tests-id="createCRButton" class="tlv-btn outline blue" data-ng-click="createCR()">Add CR</button> + <button data-ng-if="roles[user.role].dashboard.showCreateNew" data-tests-id="createPNFButton" class="tlv-btn outline blue" data-ng-click="createPNF()">Add PNF</button> + <button data-ng-if="roles[user.role].dashboard.showCreateNew" data-tests-id="createServiceButton" class="tlv-btn outline blue" data-ng-click="openCreateModal('SERVICE')">Add Service</button> </div> </div> </div> - </div> - <!-- Tile new --> - <div class="sdc-tile sdc-tile-fix-width" data-ng-repeat="component in components | filter:{resourceType:('!'+vfcmtType)} | entityFilter:checkboxesFilter | filter:search"> - - <div class='sdc-tile-header' data-ng-class="{'purple': component.isResource(), 'blue': !component.isResource()}"> - <div data-ng-if="component.isResource()" data-tests-id="asset-type">{{component.getComponentSubType()}}</div> - <div data-ng-if="component.isService()">S</div> - </div> - - <div class='sdc-tile-content' data-tests-id="dashboard-Elements" data-ng-click="goToComponent(component)"> - <div class='sdc-tile-content-icon'> - <div class="{{component.iconSprite}} {{component.icon}}" - data-ng-class="{'sprite-resource-icons': component.isResource(), 'sprite-services-icons': component.isService()}" - data-tests-id="{{component.name}}"></div> - </div> - - <div class='sdc-tile-content-info'> - <div class="sdc-tile-info-line title" data-tests-id="{{component.name | resourceName}}" sdc-smart-tooltip>{{component.name | resourceName}}</div> - <div class="sdc-tile-info-line subtitle" data-tests-id="{{component.name}}Version">V {{component.version}}</div> + <!-- Import Component --> + <div ng-if="user.role === 'DESIGNER'" class="w-sdc-dashboard-card-new" + data-ng-mouseleave="displayActions = false" + data-ng-mouseover="displayActions = true" + data-ng-init="displayActions = false"> + <div class="w-sdc-dashboard-card-new-content" data-tests-id="importButtonsArea" > + <div class="w-sdc-dashboard-card-import-content-plus" data-ng-show="!displayActions"></div> + <div class="sdc-dashboard-import-element-container" data-ng-show="displayActions"> + <div data-ng-if="roles[user.role].dashboard.showCreateNew" class="tlv-btn outline blue">Import VFC + <file-opener on-file-upload="onImportVfc(file)" data-tests-id="importVFCbutton" extensions="{{sdcConfig.toscaFileExtension}}" data-ng-click="displayActions=false"></file-opener> + </div> + <div data-ng-if="roles[user.role].dashboard.showCreateNew" class="tlv-btn outline blue" data-ng-click="notificationIconCallback()">Import VSP</div> + <div data-ng-if="roles[user.role].dashboard.showCreateNew" class="tlv-btn outline blue import-dcae">Import DCAE asset + <file-opener on-file-upload="onImportVf(file)" data-tests-id="importVFbutton" extensions="{{sdcConfig.csarFileExtension}}" data-ng-click="displayActions=false"></file-opener> + </div> + </div> </div> </div> - <div class='sdc-tile-footer'> - <div class="sdc-tile-footer-content"> - <div class='sdc-tile-footer-text'>{{component.getStatus(sdcMenu)}}</div> - </div> - </div> + <!-- Tile new --> + <ng2-ui-tile data-ng-repeat="component in components | filter:{resourceType:('!'+vfcmtType)} | entityFilter:filterParams.checkboxes | filter:filterParams.searchTerm | limitTo:numberOfItemToDisplay" + [component]="component" (on-tile-click)="goToComponent(component)"></ng2-ui-tile> + <!-- Tile new --> </div> - <!-- Tile new --> </div> @@ -88,24 +67,26 @@ > <span data-ng-if="folder.isGroup()">{{folder.text}}</span> - <sdc-checkbox data-ng-if="!folder.isGroup() && !folder.dist" + <ng1-checkbox data-ng-if="!folder.isGroup() && !folder.dist" elem-id="checkbox-{{folder.text | lowercase | clearWhiteSpaces}}" - sdc-checklist-model="checkboxesFilter.selectedStatuses" + sdc-checklist-model="filterParams.checkboxes.selectedStatuses" sdc-checklist-value="folder.state" - text="{{folder.text}}"></sdc-checkbox> + sdc-checklist-change="changeFilterParams()" + text="{{folder.text}}"></ng1-checkbox> - <sdc-checkbox data-ng-if="!folder.isGroup() && folder.dist" + <ng1-checkbox data-ng-if="!folder.isGroup() && folder.dist" elem-id="checkbox-{{folder.text | lowercase | clearWhiteSpaces}}" - sdc-checklist-model="checkboxesFilter.distributed" + sdc-checklist-model="filterParams.checkboxes.distributed" sdc-checklist-value="folder.dist" - text="{{folder.text}}"></sdc-checkbox> + sdc-checklist-change="changeFilterParams()" + text="{{folder.text}}"></ng1-checkbox> <span class="i-sdc-left-sidebar-item-state-count">{{entitiesCount(folder)}}</span> </div> </div> </div> - <top-nav [top-lvl-selected-index]="0" [version]="version" [search-term]="search.filterTerm" (search-term-change)="search.filterTerm=$event" [notification-icon-callback]="notificationIconCallback"></top-nav> + <top-nav [top-lvl-selected-index]="0" [version]="version" [search-term]="filterParams.searchTerm" (search-term-change)="updateSearchTerm($event);changeFilterParams()" [notification-icon-callback]="notificationIconCallback"></top-nav> </div> <div data-ui-view=""></div> |