From ed64b5edff15e702493df21aa3230b81593e6133 Mon Sep 17 00:00:00 2001 From: Michael Lando Date: Fri, 9 Jun 2017 03:19:04 +0300 Subject: [SDC-29] catalog 1707 rebase commit. Change-Id: I43c3dc5cf44abf5da817649bc738938a3e8388c1 Signed-off-by: Michael Lando --- .../confirmation-modal-view-model.ts | 73 ++++++ .../confirmation-modal-view.html | 29 +++ .../confirmation-modal/confirmation-modal.less | 30 +++ .../modals/email-modal/email-modal-view-model.ts | 96 ++++++++ .../modals/email-modal/email-modal-view.html | 77 +++++++ .../modals/email-modal/email-modal.less | 57 +++++ .../modals/error-modal/error-403-view.html | 4 + .../modals/error-modal/error-view-model.ts | 19 ++ .../app/view-models/modals/error-modal/error.less | 13 ++ .../message-modal/message-base-modal-model.ts | 43 ++++ .../client-message-modal-view-model.ts | 22 ++ .../client-message-modal-view.html | 16 ++ .../message-client-modal/client-message-modal.less | 0 .../server-message-modal-view-model.ts | 24 ++ .../server-message-modal-view.html | 17 ++ .../message-server-modal/server-message-modal.less | 0 .../onboarding-modal-view-model.ts | 249 +++++++++++++++++++++ .../onboarding-modal/onboarding-modal-view.html | 144 ++++++++++++ .../modals/onboarding-modal/onboarding-modal.less | 148 ++++++++++++ 19 files changed, 1061 insertions(+) create mode 100644 catalog-ui/src/app/view-models/modals/confirmation-modal/confirmation-modal-view-model.ts create mode 100644 catalog-ui/src/app/view-models/modals/confirmation-modal/confirmation-modal-view.html create mode 100644 catalog-ui/src/app/view-models/modals/confirmation-modal/confirmation-modal.less create mode 100644 catalog-ui/src/app/view-models/modals/email-modal/email-modal-view-model.ts create mode 100644 catalog-ui/src/app/view-models/modals/email-modal/email-modal-view.html create mode 100644 catalog-ui/src/app/view-models/modals/email-modal/email-modal.less create mode 100644 catalog-ui/src/app/view-models/modals/error-modal/error-403-view.html create mode 100644 catalog-ui/src/app/view-models/modals/error-modal/error-view-model.ts create mode 100644 catalog-ui/src/app/view-models/modals/error-modal/error.less create mode 100644 catalog-ui/src/app/view-models/modals/message-modal/message-base-modal-model.ts create mode 100644 catalog-ui/src/app/view-models/modals/message-modal/message-client-modal/client-message-modal-view-model.ts create mode 100644 catalog-ui/src/app/view-models/modals/message-modal/message-client-modal/client-message-modal-view.html create mode 100644 catalog-ui/src/app/view-models/modals/message-modal/message-client-modal/client-message-modal.less create mode 100644 catalog-ui/src/app/view-models/modals/message-modal/message-server-modal/server-message-modal-view-model.ts create mode 100644 catalog-ui/src/app/view-models/modals/message-modal/message-server-modal/server-message-modal-view.html create mode 100644 catalog-ui/src/app/view-models/modals/message-modal/message-server-modal/server-message-modal.less create mode 100644 catalog-ui/src/app/view-models/modals/onboarding-modal/onboarding-modal-view-model.ts create mode 100644 catalog-ui/src/app/view-models/modals/onboarding-modal/onboarding-modal-view.html create mode 100644 catalog-ui/src/app/view-models/modals/onboarding-modal/onboarding-modal.less (limited to 'catalog-ui/src/app/view-models/modals') diff --git a/catalog-ui/src/app/view-models/modals/confirmation-modal/confirmation-modal-view-model.ts b/catalog-ui/src/app/view-models/modals/confirmation-modal/confirmation-modal-view-model.ts new file mode 100644 index 0000000000..3d8b6c3053 --- /dev/null +++ b/catalog-ui/src/app/view-models/modals/confirmation-modal/confirmation-modal-view-model.ts @@ -0,0 +1,73 @@ +'use strict'; +import {ValidationUtils, ModalType} from "app/utils"; + +export interface IConfirmationModalModel { + title:string; + message:string; + showComment:boolean; + type:ModalType; +} + +interface IConfirmationModalViewModelScope { + modalInstanceConfirmation:ng.ui.bootstrap.IModalServiceInstance; + confirmationModalModel:IConfirmationModalModel; + comment:any; + commentValidationPattern:RegExp; + editForm:ng.IFormController; + okButtonColor:string; + hideCancelButton:boolean; + ok():any; + cancel():void; +} + +export class ConfirmationModalViewModel { + + static '$inject' = ['$scope', '$uibModalInstance', 'confirmationModalModel', 'CommentValidationPattern', 'ValidationUtils']; + + constructor(private $scope:IConfirmationModalViewModelScope, + private $uibModalInstance:ng.ui.bootstrap.IModalServiceInstance, + confirmationModalModel:IConfirmationModalModel, + private CommentValidationPattern:RegExp, + private ValidationUtils:ValidationUtils) { + + this.initScope(confirmationModalModel); + } + + private initScope = (confirmationModalModel:IConfirmationModalModel):void => { + let self = this; + this.$scope.hideCancelButton = false; + this.$scope.modalInstanceConfirmation = this.$uibModalInstance; + this.$scope.confirmationModalModel = confirmationModalModel; + this.$scope.comment = {"text": ''}; + this.$scope.commentValidationPattern = this.CommentValidationPattern; + + this.$scope.ok = ():any => { + self.$uibModalInstance.close(this.ValidationUtils.stripAndSanitize(self.$scope.comment.text)); + }; + + this.$scope.cancel = ():void => { + console.info('Cancel pressed on: ' + this.$scope.confirmationModalModel.title); + self.$uibModalInstance.dismiss(); + }; + + // Set the OK button color according to modal type (standard, error, alert) + let _okButtonColor = 'blue'; // Default + switch (confirmationModalModel.type) { + case ModalType.STANDARD: + _okButtonColor = 'blue'; + break; + case ModalType.ERROR: + _okButtonColor = 'red'; + break; + case ModalType.ALERT: + this.$scope.hideCancelButton = true; + _okButtonColor = 'grey'; + break; + default: + _okButtonColor = 'blue'; + break; + } + this.$scope.okButtonColor = _okButtonColor; + + } +} diff --git a/catalog-ui/src/app/view-models/modals/confirmation-modal/confirmation-modal-view.html b/catalog-ui/src/app/view-models/modals/confirmation-modal/confirmation-modal-view.html new file mode 100644 index 0000000000..09c27f8cd3 --- /dev/null +++ b/catalog-ui/src/app/view-models/modals/confirmation-modal/confirmation-modal-view.html @@ -0,0 +1,29 @@ + +
+ + +
+ + +
+ + +
+
+
+
+ + + +
+ diff --git a/catalog-ui/src/app/view-models/modals/confirmation-modal/confirmation-modal.less b/catalog-ui/src/app/view-models/modals/confirmation-modal/confirmation-modal.less new file mode 100644 index 0000000000..666c41d5ed --- /dev/null +++ b/catalog-ui/src/app/view-models/modals/confirmation-modal/confirmation-modal.less @@ -0,0 +1,30 @@ +.w-sdc-modal-confirmation { + form.w-sdc-form{ + padding: 0; + } + + .w-sdc-modal-body-content { + .b_6; + word-break: break-word; + + } + .w-sdc-modal-body { + height: auto; + /* padding: 47px 60px 20px 60px; */ + border-bottom: none; + } + .w-sdc-modal-body-content { + padding: 0; + } + .w-sdc-modal-body-comment { + width: 430px; + height: 127px; + border: solid 1px @color_e; + margin: 20px 0 0 0; + padding: 15px; + } + .w-sdc-modal-label { + .m_14_r; + text-align: left; + } +} diff --git a/catalog-ui/src/app/view-models/modals/email-modal/email-modal-view-model.ts b/catalog-ui/src/app/view-models/modals/email-modal/email-modal-view-model.ts new file mode 100644 index 0000000000..f1fb56d0ff --- /dev/null +++ b/catalog-ui/src/app/view-models/modals/email-modal/email-modal-view-model.ts @@ -0,0 +1,96 @@ +'use strict'; +import {IAppConfigurtaion, Component, AsdcComment} from "app/models"; +import {ValidationUtils} from "app/utils"; + +export interface IEmailModalModel_Email { + to:string; + subject:string; + message:string; +} + +export interface IEmailModalModel_Data { + component:Component; + stateUrl:string; +} + +export interface IEmailModalModel { + title:string; + email:IEmailModalModel_Email; + data:IEmailModalModel_Data; +} + +interface IEmailModalViewModelScope { + modalInstanceEmail:ng.ui.bootstrap.IModalServiceInstance; + emailModalModel:IEmailModalModel; + submitInProgress:boolean; + commentValidationPattern:RegExp; + isLoading:boolean; + submit():any; + cancel():void; + validateField(field:any):boolean; +} + +export class EmailModalViewModel { + + static '$inject' = ['$scope', '$filter', 'sdcConfig', '$uibModalInstance', 'emailModalModel', 'ValidationUtils', 'CommentValidationPattern']; + + constructor(private $scope:IEmailModalViewModelScope, + private $filter:ng.IFilterService, + private sdcConfig:IAppConfigurtaion, + private $uibModalInstance:ng.ui.bootstrap.IModalServiceInstance, + private emailModalModel:IEmailModalModel, + private ValidationUtils:ValidationUtils, + private CommentValidationPattern:RegExp) { + + this.initScope(emailModalModel); + } + + private initScope = (emailModalModel:IEmailModalModel):void => { + this.$scope.emailModalModel = emailModalModel; + this.$scope.submitInProgress = false; + this.$scope.commentValidationPattern = this.CommentValidationPattern; + this.$scope.modalInstanceEmail = this.$uibModalInstance; + + this.$scope.submit = ():any => { + + let onSuccess = (component:Component) => { + this.$scope.isLoading = false; + this.$scope.submitInProgress = false; + // showing the outlook modal according to the config json + if (this.sdcConfig.showOutlook) { + let link:string = encodeURI(this.sdcConfig.api.baseUrl + "?folder=Ready_For_Testing"); + let outlook:string = this.$filter('translate')("EMAIL_OUTLOOK_MESSAGE", "{'to': '" + emailModalModel.email.to + "','subject': '" + emailModalModel.email.subject + "','message': '" + emailModalModel.email.message + "', 'entityNameAndVersion': '" + emailModalModel.email.subject + "','link': '" + link + "'}"); + window.location.href = outlook; // Open outlook with the email to send + } + this.$uibModalInstance.close(component); // Close the dialog + }; + + let onError = () => { + this.$scope.isLoading = false; + this.$scope.submitInProgress = false; + this.$uibModalInstance.close(); // Close the dialog + }; + + // Submit to server + // Prevent from user pressing multiple times on submit. + if (this.$scope.submitInProgress === false) { + this.$scope.isLoading = true; + this.$scope.submitInProgress = true; + let comment:AsdcComment = new AsdcComment(); + comment.userRemarks = emailModalModel.email.message; + emailModalModel.data.component.changeLifecycleState(emailModalModel.data.stateUrl, comment).then(onSuccess, onError); + } + }; + + this.$scope.cancel = ():void => { + this.$uibModalInstance.dismiss(); + }; + + this.$scope.validateField = (field:any):boolean => { + if (field && field.$dirty && field.$invalid) { + return true; + } + return false; + }; + } +} diff --git a/catalog-ui/src/app/view-models/modals/email-modal/email-modal-view.html b/catalog-ui/src/app/view-models/modals/email-modal/email-modal-view.html new file mode 100644 index 0000000000..bf65428033 --- /dev/null +++ b/catalog-ui/src/app/view-models/modals/email-modal/email-modal-view.html @@ -0,0 +1,77 @@ + diff --git a/catalog-ui/src/app/view-models/modals/email-modal/email-modal.less b/catalog-ui/src/app/view-models/modals/email-modal/email-modal.less new file mode 100644 index 0000000000..471089fa1a --- /dev/null +++ b/catalog-ui/src/app/view-models/modals/email-modal/email-modal.less @@ -0,0 +1,57 @@ +.w-sdc-modal-email { + + .w-sdc-modal-body { + border-bottom: none; + } + + form.w-sdc-form{ + padding: 0; + + .i-sdc-form-item { + clear: both; + label { + min-height: 30px; + padding-top: 4px; + } + + .col-sm-10 { + padding-right: 0; + } + + } + + .w-sdc-modal-body-email { + border-style: solid; + border-width: 1px; + border-color: @color_e; + box-sizing: border-box; + width: 100%; + height: 127px; + margin-bottom: 20px; + } + + label {.m_14_m; text-align: left;} + input {.m_14_r;} + textarea {.m_14_r;} + /* I made the subject and to fields as input (for future use), but for now they look like labels: */ + input:disabled { + .bg_c; + border: none; + } + } + + .w-sdc-modal-action { + background-color: @main_color_p; + padding: 0 13px 0 0; + height: 90px; + line-height: 65px; + + button {width: 174px;} + } + + .w-sdc-form .i-sdc-form-item label.required::before { + position: absolute; + left: -13px; + } + +} diff --git a/catalog-ui/src/app/view-models/modals/error-modal/error-403-view.html b/catalog-ui/src/app/view-models/modals/error-modal/error-403-view.html new file mode 100644 index 0000000000..41b1c6df1d --- /dev/null +++ b/catalog-ui/src/app/view-models/modals/error-modal/error-403-view.html @@ -0,0 +1,4 @@ +
+
+
+
diff --git a/catalog-ui/src/app/view-models/modals/error-modal/error-view-model.ts b/catalog-ui/src/app/view-models/modals/error-modal/error-view-model.ts new file mode 100644 index 0000000000..f622a6f53b --- /dev/null +++ b/catalog-ui/src/app/view-models/modals/error-modal/error-view-model.ts @@ -0,0 +1,19 @@ +'use strict'; +import {CookieService} from "app/services"; + +interface IErrorViewModelScope { + mailto:string; +} + +export class ErrorViewModel { + + static ADMIN_EMAIL = 'dl-asdcaccessrequest@att.com'; + static SUBJECT_PRFIEX = 'SDC Access Request for'; + + static '$inject' = ['$scope', 'Sdc.Services.CookieService', '$window']; + + constructor($scope:IErrorViewModelScope, cookieService:CookieService, $window) { + let userDetails = cookieService.getFirstName() + ' ' + cookieService.getLastName() + ' (' + cookieService.getUserId() + ')'; + $scope.mailto = ErrorViewModel.ADMIN_EMAIL + '?subject=' + $window.encodeURIComponent(ErrorViewModel.SUBJECT_PRFIEX + ' ' + userDetails); + } +} diff --git a/catalog-ui/src/app/view-models/modals/error-modal/error.less b/catalog-ui/src/app/view-models/modals/error-modal/error.less new file mode 100644 index 0000000000..8297b5053d --- /dev/null +++ b/catalog-ui/src/app/view-models/modals/error-modal/error.less @@ -0,0 +1,13 @@ +.sdc-error-403-container { + .bg_n; + width: 700px; + height: 400px; + margin: auto; + margin-top: 196px; + + .w-sdc-error-403-text { + .q_11; + margin-top: 20px; + } + +} diff --git a/catalog-ui/src/app/view-models/modals/message-modal/message-base-modal-model.ts b/catalog-ui/src/app/view-models/modals/message-modal/message-base-modal-model.ts new file mode 100644 index 0000000000..3c9e75238a --- /dev/null +++ b/catalog-ui/src/app/view-models/modals/message-modal/message-base-modal-model.ts @@ -0,0 +1,43 @@ +'use strict'; +import {SEVERITY} from "app/utils"; + +export interface IMessageModalModel { + title:string; + message:string; + severity:SEVERITY; +} + +export interface IMessageModalViewModelScope extends ng.IScope { + footerButtons:Array; + messageModalModel:IMessageModalModel; + modalInstanceError:ng.ui.bootstrap.IModalServiceInstance; + ok():void; +} + +export class MessageModalViewModel { + + constructor(private $baseScope:IMessageModalViewModelScope, + private $baseModalInstance:ng.ui.bootstrap.IModalServiceInstance, + private baseMessageModalModel:IMessageModalModel) { + + this.initScope(baseMessageModalModel); + } + + private initScope = (messageModalViewModel:IMessageModalModel):void => { + + this.$baseScope.messageModalModel = messageModalViewModel; + this.$baseScope.modalInstanceError = this.$baseModalInstance; + + this.$baseScope.ok = ():void => { + this.$baseModalInstance.close(); + }; + + this.$baseScope.footerButtons = [ + { + 'name': 'OK', + 'css': 'grey', + 'callback': this.$baseScope.ok + } + ]; + } +} diff --git a/catalog-ui/src/app/view-models/modals/message-modal/message-client-modal/client-message-modal-view-model.ts b/catalog-ui/src/app/view-models/modals/message-modal/message-client-modal/client-message-modal-view-model.ts new file mode 100644 index 0000000000..053ea41ba3 --- /dev/null +++ b/catalog-ui/src/app/view-models/modals/message-modal/message-client-modal/client-message-modal-view-model.ts @@ -0,0 +1,22 @@ +'use strict'; +import {IMessageModalModel, MessageModalViewModel, IMessageModalViewModelScope} from "../message-base-modal-model"; + +export interface IClientMessageModalModel extends IMessageModalModel { +} + +export interface IClientMessageModalViewModelScope extends IMessageModalViewModelScope { + clientMessageModalModel:IClientMessageModalModel; +} + +export class ClientMessageModalViewModel extends MessageModalViewModel { + + static '$inject' = ['$scope', '$uibModalInstance', 'clientMessageModalModel']; + + constructor(private $scope:IClientMessageModalViewModelScope, + private $uibModalInstance:ng.ui.bootstrap.IModalServiceInstance, + private clientMessageModalModel:IClientMessageModalModel) { + + super($scope, $uibModalInstance, clientMessageModalModel); + } + +} diff --git a/catalog-ui/src/app/view-models/modals/message-modal/message-client-modal/client-message-modal-view.html b/catalog-ui/src/app/view-models/modals/message-modal/message-client-modal/client-message-modal-view.html new file mode 100644 index 0000000000..cfb0a35f69 --- /dev/null +++ b/catalog-ui/src/app/view-models/modals/message-modal/message-client-modal/client-message-modal-view.html @@ -0,0 +1,16 @@ + + + +
+
+
+
+ + + + diff --git a/catalog-ui/src/app/view-models/modals/message-modal/message-client-modal/client-message-modal.less b/catalog-ui/src/app/view-models/modals/message-modal/message-client-modal/client-message-modal.less new file mode 100644 index 0000000000..e69de29bb2 diff --git a/catalog-ui/src/app/view-models/modals/message-modal/message-server-modal/server-message-modal-view-model.ts b/catalog-ui/src/app/view-models/modals/message-modal/message-server-modal/server-message-modal-view-model.ts new file mode 100644 index 0000000000..5f1d5e7a92 --- /dev/null +++ b/catalog-ui/src/app/view-models/modals/message-modal/message-server-modal/server-message-modal-view-model.ts @@ -0,0 +1,24 @@ +'use strict'; +import {IMessageModalModel, IMessageModalViewModelScope, MessageModalViewModel} from "../message-base-modal-model"; + +export interface IServerMessageModalModel extends IMessageModalModel { + status:string; + messageId:string; +} + +export interface IServerMessageModalViewModelScope extends IMessageModalViewModelScope { + serverMessageModalModel:IServerMessageModalModel; +} + +export class ServerMessageModalViewModel extends MessageModalViewModel { + + static '$inject' = ['$scope', '$uibModalInstance', 'serverMessageModalModel']; + + constructor(private $scope:IServerMessageModalViewModelScope, + private $uibModalInstance:ng.ui.bootstrap.IModalServiceInstance, + private serverMessageModalModel:IServerMessageModalModel) { + + super($scope, $uibModalInstance, serverMessageModalModel); + } + +} diff --git a/catalog-ui/src/app/view-models/modals/message-modal/message-server-modal/server-message-modal-view.html b/catalog-ui/src/app/view-models/modals/message-modal/message-server-modal/server-message-modal-view.html new file mode 100644 index 0000000000..294dc76c4c --- /dev/null +++ b/catalog-ui/src/app/view-models/modals/message-modal/message-server-modal/server-message-modal-view.html @@ -0,0 +1,17 @@ + + + +
+
+
Error code: {{messageModalModel.messageId}}
+
Status code: {{messageModalModel.status}}
+
+
+ + + diff --git a/catalog-ui/src/app/view-models/modals/message-modal/message-server-modal/server-message-modal.less b/catalog-ui/src/app/view-models/modals/message-modal/message-server-modal/server-message-modal.less new file mode 100644 index 0000000000..e69de29bb2 diff --git a/catalog-ui/src/app/view-models/modals/onboarding-modal/onboarding-modal-view-model.ts b/catalog-ui/src/app/view-models/modals/onboarding-modal/onboarding-modal-view-model.ts new file mode 100644 index 0000000000..8e7e79c576 --- /dev/null +++ b/catalog-ui/src/app/view-models/modals/onboarding-modal/onboarding-modal-view-model.ts @@ -0,0 +1,249 @@ +'use strict'; +import {ComponentType, CHANGE_COMPONENT_CSAR_VERSION_FLAG, SEVERITY, FileUtils, ModalsHandler, ComponentFactory} from "app/utils"; +import {OnboardingService, CacheService} from "app/services"; +import {Component, IComponent, IUser, IAppConfigurtaion, Resource} from "app/models"; +import {IServerMessageModalModel} from "../message-modal/message-server-modal/server-message-modal-view-model"; +import {Dictionary} from "app/utils"; +import * as _ from 'underscore'; + +interface IOnboardingModalViewModelScope { + modalOnboarding:ng.ui.bootstrap.IModalServiceInstance; + componentsList:Array; + tableHeadersList:Array; + selectedComponent:Component; + componentFromServer:Component; + reverse:boolean; + sortBy:string; + searchBind:string; + okButtonText:string; + isCsarComponentExists:boolean; + user:IUser; + isLoading:boolean; + + //this is for UI paging + numberOfItemsToDisplay:number; + allItemsDisplayed:boolean; + + doSelectComponent(component:Component):void; + doUpdateCsar():void; + doImportCsar():void; + sort(sortBy:string):void; + downloadCsar(packageId:string):void; + increaseNumItemsToDisplay():void; +} + +export class OnboardingModalViewModel { + + static '$inject' = [ + '$scope', + '$filter', + '$state', + 'sdcConfig', + '$uibModalInstance', + 'Sdc.Services.OnboardingService', + 'okButtonText', + 'currentCsarUUID', + 'Sdc.Services.CacheService', + 'FileUtils', + 'ComponentFactory', + 'ModalsHandler' + ]; + + constructor(private $scope:IOnboardingModalViewModelScope, + private $filter:ng.IFilterService, + private $state:any, + private sdcConfig:IAppConfigurtaion, + private $uibModalInstance:ng.ui.bootstrap.IModalServiceInstance, + private onBoardingService:OnboardingService, + private okButtonText:string, + private currentCsarUUID:string, + private cacheService:CacheService, + private fileUtils:FileUtils, + private componentFactory:ComponentFactory, + private modalsHandler:ModalsHandler) { + + this.init(); + } + + /** + * Called from controller constructor, this will call onboarding service to get list + * of "mini" components (empty components created from CSAR). + * The list is inserted to componentsList on $scope. + * And then call initScope method. + */ + private init = ():void => { + this.initOnboardingComponentsList(); + }; + + private initScope = ():void => { + + this.initSortedTableScope(); + this.initModalScope(); + this.$scope.sortBy = "name"; // Default sort by + this.$scope.user = this.cacheService.get('user'); + this.$scope.okButtonText = this.okButtonText; + this.$scope.numberOfItemsToDisplay = 0; + this.$scope.allItemsDisplayed = false; + + // Dismiss the modal and pass the "mini" component to workspace general page + this.$scope.doImportCsar = ():void => { + this.$uibModalInstance.dismiss(); + this.$state.go('workspace.general', { + type: ComponentType.RESOURCE.toLowerCase(), + componentCsar: this.$scope.selectedComponent + }); + }; + + this.$scope.doUpdateCsar = ():void => { + // In case user select on update the checkin and submit for testing buttons (in general page) should be disabled. + // to do that we need to pass to workspace.general state parameter to know to disable the buttons. + this.$uibModalInstance.close(); + // Change the component version to the CSAR version we want to update. + /*(this.$scope.componentFromServer).csarVersion = (this.$scope.selectedComponent).csarVersion; + let component:Components.Component = this.componentFactory.createComponent(this.$scope.componentFromServer); + this.$state.go('workspace.general', {vspComponent: component, disableButtons: true });*/ + this.cacheService.set(CHANGE_COMPONENT_CSAR_VERSION_FLAG, (this.$scope.selectedComponent).csarVersion); + this.$state.go('workspace.general', { + id: this.$scope.componentFromServer.uniqueId, + type: this.$scope.componentFromServer.componentType.toLowerCase(), + disableButtons: true + }); + }; + + this.$scope.downloadCsar = (packageId:string):void => { + this.$scope.isLoading = true; + this.onBoardingService.downloadOnboardingCsar(packageId).then( + (file:any):void => { + this.$scope.isLoading = false; + if (file) { + this.fileUtils.downloadFile(file, packageId + '.csar'); + } + }, ():void => { + this.$scope.isLoading = false; + var data:IServerMessageModalModel = { + title: 'Download error', + message: "Error downloading file", + severity: SEVERITY.ERROR, + messageId: "", + status: "" + }; + this.modalsHandler.openServerMessageModal(data); + } + ); + }; + + this.$scope.increaseNumItemsToDisplay = ():void => { + this.$scope.numberOfItemsToDisplay = this.$scope.numberOfItemsToDisplay + 40; + if (this.$scope.componentsList) { + this.$scope.allItemsDisplayed = this.$scope.numberOfItemsToDisplay >= this.$scope.componentsList.length; + } + }; + + // When the user select a row, set the component as selectedComponent + this.$scope.doSelectComponent = (component:Component):void => { + + if (this.$scope.selectedComponent === component) { + // Collapse the item + this.$scope.selectedComponent = undefined; + return; + } + + this.$scope.isLoading = true; + this.$scope.componentFromServer = undefined; + this.$scope.selectedComponent = component; + + let onSuccess = (componentFromServer:Component):void => { + this.$scope.isLoading = false; + if (componentFromServer) { + this.$scope.componentFromServer = componentFromServer; + this.$scope.isCsarComponentExists = true; + } else { + this.$scope.componentFromServer = component; + this.$scope.isCsarComponentExists = false; + } + }; + + let onError = ():void => { + this.$scope.isLoading = false; + this.$scope.componentFromServer = component; + this.$scope.isCsarComponentExists = false; + }; + + this.onBoardingService.getComponentFromCsarUuid((component).csarUUID).then(onSuccess, onError); + }; + + }; + + private initSortedTableScope = ():void => { + this.$scope.tableHeadersList = [ + {title: 'Name', property: 'name'}, + {title: 'Vendor', property: 'vendorName'}, + {title: 'Category', property: 'categories'}, + {title: 'Version', property: 'csarVersion'}, + {title: '#', property: 'importAndUpdate'} + //{title: 'Date', property: 'componentDate'} + ]; + + this.$scope.sort = (sortBy:string):void => { + this.$scope.reverse = (this.$scope.sortBy === sortBy) ? !this.$scope.reverse : false; + this.$scope.sortBy = sortBy; + }; + }; + + private initModalScope = ():void => { + // Enable the modal directive to close + this.$scope.modalOnboarding = this.$uibModalInstance; + }; + + private initOnboardingComponentsList = ():void => { + let onSuccess = (onboardingResponse:Array):void => { + initMaxVersionOfItemsInList(onboardingResponse); + + if (this.currentCsarUUID) { + //this.$scope.componentsList = this.$filter('filter')(this.$scope.componentsList, {csarUUID: this.currentCsarUUID}); + this.$scope.componentsList = this.$filter('filter')(this.$scope.componentsList, + (input):boolean => { + return input.csarUUID === this.currentCsarUUID; + } + ); + } + this.initScope(); + }; + + let onError = ():void => { + console.log("Error getting onboarding list"); + this.initScope(); + }; + + let initMaxVersionOfItemsInList = (onboardingResponse:Array):void => { + // Get only the latest version of each item + this.$scope.componentsList = []; + + // Get all unique items from the list + let uniqueItems:Array = _.uniq(onboardingResponse, false, (item:any):void=>{ + return item.packageId; + }); + + // Loop on all the items with unique packageId + _.each(uniqueItems, (item:any):void=> { + // Find all the items that has same packageId + let ItemsFound:Array = _.filter(onboardingResponse, (inListItem:any):any => { + return inListItem.packageId === item.packageId; + }); + + // Loop on all the items with same packageId and find the max version. + let maxItem:any; + _.each(ItemsFound, (ItemFound:any):void=> { + if (!maxItem) { + maxItem = ItemFound; + } else if (maxItem && parseInt(maxItem.csarVersion) < parseInt(ItemFound.csarVersion)) { + maxItem = ItemFound; + } + }); + this.$scope.componentsList.push(maxItem); + }); + }; + + this.onBoardingService.getOnboardingComponents().then(onSuccess, onError); + }; +} diff --git a/catalog-ui/src/app/view-models/modals/onboarding-modal/onboarding-modal-view.html b/catalog-ui/src/app/view-models/modals/onboarding-modal/onboarding-modal-view.html new file mode 100644 index 0000000000..3657fad017 --- /dev/null +++ b/catalog-ui/src/app/view-models/modals/onboarding-modal/onboarding-modal-view.html @@ -0,0 +1,144 @@ + + +
+
+

Select one of the software product component below:

+
+ +
+ + +
+
+ +
+
+ + +
+
{{header.title}} + +
+
+ + +
+ + + +
+ There are no software product component to display +
+ +
+ + +
+ + +
+ + {{component.name}} +
+ + +
+ {{component.vendorName}} +
+ + +
+ {{component.categories[0].name}} {{component.categories[0].subcategories[0].name}} +
+ + +
+ {{component.csarVersion}} +
+ + +
+ +
+ +
+ +
+
VSP Description:
+ {{component.description}} +
+ +
+
+
VF'S Meta Data:
+
Name: {{componentFromServer.name}}
+
Lifecycle: {{componentFromServer.lifecycleState}}
+
Creator: {{componentFromServer.creatorFullName}}
+
+
+ +
+
+
 
+
UUID: {{componentFromServer.uuid}}
+
Version: {{componentFromServer.version}}
+
Modifier: {{componentFromServer.lastUpdaterFullName}}
+
+ Designers cannot update a VSP if the VF is checked out by another user. +
+
+ Designers cannot update a VSP if the VF is in Ready for testing state. +
+
+
+ +
+ +
+ +
+ + + + + +
+ +
+
+ + +
+
+
+
+ + diff --git a/catalog-ui/src/app/view-models/modals/onboarding-modal/onboarding-modal.less b/catalog-ui/src/app/view-models/modals/onboarding-modal/onboarding-modal.less new file mode 100644 index 0000000000..c745a86888 --- /dev/null +++ b/catalog-ui/src/app/view-models/modals/onboarding-modal/onboarding-modal.less @@ -0,0 +1,148 @@ +.w-sdc-modal-onboarding { + + width: 100%; + display: inline-block; + + .general-info-button{ + position: relative; + top: -40px; + left: 86px; + float: left; + } + + .title-wrapper { + display: flex; + justify-content: space-between; + align-items: flex-end; + + .sub-title { + .m_14_r; + float:left; + } + } + + .w-sdc-classic-btn { + float: right; + margin-bottom: 10px; + } + + .table{ + height: 472px; + margin-bottom: 0; + } + + .table-container-flex { + margin-top: 10px; + + .table { + .body { + .data-row + div.item-opened { + word-wrap: break-word; + display: flex; + justify-content: space-between; + padding: 10px 0; + + .item-opened-description-title, + .item-opened-metadata-title { + .m_14_m; + } + + .item-opened-description, + .item-opened-metadata1, + .item-opened-metadata2, + .item-opened-metadata3 { + .th { .m_14_m; } + flex-basis: 0; + overflow: hidden; + padding: 5px 15px; + } + + .item-opened-description, + .item-opened-metadata3 { + border-right: 1px solid @main_color_o; + } + + .item-opened-metadata2 { + word-break: break-word; + .note { + color: @func_color_q; + } + } + + .item-opened-icon { + flex-basis: 0; + overflow: hidden; + padding: 5px 15px; + align-self: center; + } + + .item-opened-description {flex-grow: 25;} + .item-opened-metadata1 {flex-grow: 25;} + .item-opened-metadata2 {flex-grow: 30;} + .item-opened-metadata3 { + flex-grow: 10; + .info-button{ + float: right; + } + } + .item-opened-icon {flex-grow: 10;} + } + } + } + + .flex-item:nth-child(1) { + flex-grow: 25; + .hand; + span.table-arrow { + margin-right: 7px; + } + } + + .flex-item:nth-child(2) {flex-grow: 25;} + .flex-item:nth-child(3) {flex-grow: 30;} + .flex-item:nth-child(4) {flex-grow: 10; text-align: center; } + .flex-item:nth-child(5) {flex-grow: 10; } + + } + + .download-file-btn { + cursor: pointer; + margin-left: 4px; + } + + .refresh-file-btn, + .import-file-btn { + cursor: pointer; + margin-left: 20px; + } + + .top-search { + float: right; + position: relative; + + input.search-text { + .border-radius(2px); + width: 245px; + height: 32px; + line-height: 32px; + border: 1px solid @main_color_o; + margin: 0; + outline: none; + text-indent: 10px; + + &::-webkit-input-placeholder { font-style: italic; } /* Safari, Chrome and Opera */ + &:-moz-placeholder { font-style: italic; } /* Firefox 18- */ + &::-moz-placeholder { font-style: italic; } /* Firefox 19+ */ + &:-ms-input-placeholder { font-style: italic; } /* IE 10+ */ + &:-ms-input-placeholder { font-style: italic; } /* Edge */ + } + + .magnification { + position: absolute; + top: 10px; + right: 10px; + } + + } + +} -- cgit 1.2.3-korg