re base code

Change-Id: I12a5ca14a6d8a87e9316b9ff362eb131105f98a5
Issue-ID: SDC-1566
Signed-off-by: Michael Lando <ml636r@att.com>

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>