diff options
Diffstat (limited to 'catalog-ui/app/scripts/view-models/modals')
19 files changed, 1191 insertions, 0 deletions
diff --git a/catalog-ui/app/scripts/view-models/modals/confirmation-modal/confirmation-modal-view-model.ts b/catalog-ui/app/scripts/view-models/modals/confirmation-modal/confirmation-modal-view-model.ts new file mode 100644 index 0000000000..f906593d8a --- /dev/null +++ b/catalog-ui/app/scripts/view-models/modals/confirmation-modal/confirmation-modal-view-model.ts @@ -0,0 +1,96 @@ +/*- + * ============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========================================================= + */ +/// <reference path="../../../references"/> +module Sdc.ViewModels { + 'use strict'; + + export interface IConfirmationModalModel { + title: string; + message: string; + showComment: boolean; + type: Utils.Constants.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', '$modalInstance', 'confirmationModalModel', 'CommentValidationPattern', 'ValidationUtils', '$templateCache', '$modal']; + + constructor(private $scope:IConfirmationModalViewModelScope, + private $modalInstance:ng.ui.bootstrap.IModalServiceInstance, + confirmationModalModel:IConfirmationModalModel, + private CommentValidationPattern: RegExp, + private ValidationUtils: Sdc.Utils.ValidationUtils, + private $templateCache:ng.ITemplateCacheService, + private $modal:ng.ui.bootstrap.IModalService) { + + this.initScope(confirmationModalModel); + } + + private initScope = (confirmationModalModel:IConfirmationModalModel):void => { + let self = this; + this.$scope.hideCancelButton = false; + this.$scope.modalInstanceConfirmation = this.$modalInstance; + this.$scope.confirmationModalModel = confirmationModalModel; + this.$scope.comment = {"text": ''}; + this.$scope.commentValidationPattern = this.CommentValidationPattern; + + this.$scope.ok = ():any => { + self.$modalInstance.close(this.ValidationUtils.stripAndSanitize(self.$scope.comment.text)); + }; + + this.$scope.cancel = ():void => { + console.info('Cancel pressed on: ' + this.$scope.confirmationModalModel.title); + self.$modalInstance.dismiss(); + }; + + // Set the OK button color according to modal type (standard, error, alert) + let _okButtonColor = 'blue'; // Default + switch (confirmationModalModel.type) { + case Sdc.Utils.Constants.ModalType.STANDARD: + _okButtonColor='blue'; + break; + case Sdc.Utils.Constants.ModalType.ERROR: + _okButtonColor='red'; + break; + case Sdc.Utils.Constants.ModalType.ALERT: + this.$scope.hideCancelButton = true; + _okButtonColor='grey'; + break; + default: + _okButtonColor='blue'; + break; + } + this.$scope.okButtonColor = _okButtonColor; + + } + } +} diff --git a/catalog-ui/app/scripts/view-models/modals/confirmation-modal/confirmation-modal-view.html b/catalog-ui/app/scripts/view-models/modals/confirmation-modal/confirmation-modal-view.html new file mode 100644 index 0000000000..09c27f8cd3 --- /dev/null +++ b/catalog-ui/app/scripts/view-models/modals/confirmation-modal/confirmation-modal-view.html @@ -0,0 +1,29 @@ +<sdc-modal modal="modalInstanceConfirmation" type="classic" class="w-sdc-modal-confirmation modal-type-{{confirmationModalModel.type}}" header="{{confirmationModalModel.title}}" show-close-button="true"> + <form novalidate class="w-sdc-form" name="editForm"> + <label class="i-sdc-form-label required w-sdc-modal-label" data-ng-bind-html="confirmationModalModel.message"></label> + + <div class="i-sdc-form-item"> + <textarea class="w-sdc-modal-body-comment" + data-tests-id="checkindialog" + autofocus="autofocus" + data-ng-show="confirmationModalModel.showComment===true" + data-ng-model="comment.text" + placeholder="Comment..." + maxlength="256" + data-required + name="comment1" + data-ng-pattern="commentValidationPattern" + data-ng-maxlength="256"></textarea> + + <div class="input-error" data-ng-show="editForm.comment1.$dirty && editForm.comment1.$invalid"> + <span ng-show="editForm.comment1.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span> + <span ng-show="editForm.comment1.$error.required" translate="VALIDATION_ERROR_REQUIRED" translate-values="{'field': 'Comment' }"></span> + </div> + </div> + </form> + <div class="w-sdc-modal-footer classic"> + <button class="tlv-btn {{okButtonColor}}" data-tests-id="OK" data-ng-click="ok()" data-ng-disabled="confirmationModalModel.showComment===true && (!comment.text || comment.text && comment.text.length===0)">OK</button> + <button class="tlv-btn grey" data-ng-if="hideCancelButton===false" data-tests-id="Cancel" data-ng-click="cancel()" >Cancel</button> + <button class="tlv-btn blue add-property-add-another" data-ng-if="isNew" data-ng-click="saveAndAnother()" type="reset" data-ng-disabled="editForm.$invalid">Add Another</button> + </div> +</sdc-modal> diff --git a/catalog-ui/app/scripts/view-models/modals/confirmation-modal/confirmation-modal.less b/catalog-ui/app/scripts/view-models/modals/confirmation-modal/confirmation-modal.less new file mode 100644 index 0000000000..666c41d5ed --- /dev/null +++ b/catalog-ui/app/scripts/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/app/scripts/view-models/modals/email-modal/email-modal-view-model.ts b/catalog-ui/app/scripts/view-models/modals/email-modal/email-modal-view-model.ts new file mode 100644 index 0000000000..6430a955a6 --- /dev/null +++ b/catalog-ui/app/scripts/view-models/modals/email-modal/email-modal-view-model.ts @@ -0,0 +1,117 @@ +/*- + * ============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========================================================= + */ +/// <reference path="../../../references"/> +module Sdc.ViewModels { + 'use strict'; + + export interface IEmailModalModel_Email { + to: string; + subject: string; + message: string; + } + + export interface IEmailModalModel_Data { + component: Models.Components.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', '$modalInstance', 'emailModalModel', 'ValidationUtils', 'CommentValidationPattern']; + + constructor(private $scope:IEmailModalViewModelScope, + private $filter:ng.IFilterService, + private sdcConfig:Models.IAppConfigurtaion, + private $modalInstance:ng.ui.bootstrap.IModalServiceInstance, + private emailModalModel:IEmailModalModel, + private ValidationUtils: Sdc.Utils.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.$modalInstance; + + this.$scope.submit = ():any => { + + let onSuccess = (component:Models.Components.Component) => { + this.$scope.isLoading = false; + this.$scope.submitInProgress=false; + 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 + "'}"); + if(!this.sdcConfig.openSource) { + window.location.href=outlook; // Open outlook with the email to send + } + this.$modalInstance.close(component); // Close the dialog + }; + + let onError = () => { + this.$scope.isLoading = false; + this.$scope.submitInProgress=false; + this.$modalInstance.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:Models.AsdcComment = new Models.AsdcComment(); + comment.userRemarks = emailModalModel.email.message; + emailModalModel.data.component.changeLifecycleState(emailModalModel.data.stateUrl, comment).then(onSuccess, onError); + } + }; + + this.$scope.cancel = ():void => { + this.$modalInstance.dismiss(); + }; + + this.$scope.validateField = (field:any):boolean => { + if (field && field.$dirty && field.$invalid){ + return true; + } + return false; + }; + } + + + } +} diff --git a/catalog-ui/app/scripts/view-models/modals/email-modal/email-modal-view.html b/catalog-ui/app/scripts/view-models/modals/email-modal/email-modal-view.html new file mode 100644 index 0000000000..82293a3091 --- /dev/null +++ b/catalog-ui/app/scripts/view-models/modals/email-modal/email-modal-view.html @@ -0,0 +1,79 @@ +<sdc-modal modal="modalInstanceEmail" type="classic" class="w-sdc-modal-email modal-type-standard" header="{{emailModalModel.title}}" show-close-button="true"> + <loader data-display="isLoading"></loader> + <form novalidate class="w-sdc-form" name="editForm"> + <div class="w-sdc-modal-body"> + + <div class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.to)}"> + <label class="i-sdc-form-label col-sm-2">To</label> + <div class="col-sm-10"> + <input class="i-sdc-form-input" type="text" + data-ng-model="emailModalModel.email.to" + data-ng-model-options="{ debounce: 500 }" + data-ng-maxlength="255" + data-required + name="to" + id="to" + data-ng-disabled="true" + /> + </div> + + <div class="input-error" data-ng-show="validateField(editForm.to)" alignToSelector="#to"> + <span ng-show="editForm.to.$error.required" translate="VALIDATION_ERROR_REQUIRED" translate-values="{'field': 'To' }"></span> + <span ng-show="editForm.to.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '255' }"></span> + <span ng-show="editForm.to.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span> + </div> + + </div> + + <div class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.subject)}"> + <label class="i-sdc-form-label col-sm-2">Subject</label> + <div class="col-sm-10"> + <input class="i-sdc-form-input" type="text" + data-ng-model="emailModalModel.email.subject" + data-ng-model-options="{ debounce: 500 }" + data-ng-maxlength="255" + data-required + name="subject" + data-ng-disabled="true" + /> + </div> + + <div class="input-error" data-ng-show="validateField(editForm.subject)"> + <span ng-show="editForm.subject.$error.required" translate="VALIDATION_ERROR_REQUIRED" translate-values="{'field': 'Subject' }"></span> + <span ng-show="editForm.subject.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '255' }"></span> + <span ng-show="editForm.subject.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span> + </div> + + </div> + + <div class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.message)}"> + <label class="i-sdc-form-label required col-sm-2">Message</label> + <div class="col-sm-10"> + <textarea class="w-sdc-modal-body-email" + data-ng-model="emailModalModel.email.message" + placeholder="{{'EMAIL_MODAL_MESSAGE' | translate }}" + data-required + name="message" + data-ng-pattern="commentValidationPattern" + maxlength="255" + data-tests-id="changeLifeCycleMessage" + data-ng-maxlength="255"> + </textarea> + + <div class="input-error" data-ng-show="validateField(editForm.message)"> + <span ng-show="editForm.message.$error.required" translate="VALIDATION_ERROR_REQUIRED" translate-values="{'field': 'Message' }"></span> + <span ng-show="editForm.message.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '255' }"></span> + <span ng-show="editForm.message.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span> + </div> + </div> + + </div> + + </div> + </form> + + <div class="w-sdc-modal-footer classic"> + <button class="tlv-btn blue" data-tests-id="OK" data-ng-click="submit()" data-ng-disabled="editForm.$invalid">OK</button> + <button class="tlv-btn grey" data-tests-id="Cancel" data-ng-click="cancel()" >Cancel</button> + </div> +</sdc-modal> diff --git a/catalog-ui/app/scripts/view-models/modals/email-modal/email-modal.less b/catalog-ui/app/scripts/view-models/modals/email-modal/email-modal.less new file mode 100644 index 0000000000..b946a097cd --- /dev/null +++ b/catalog-ui/app/scripts/view-models/modals/email-modal/email-modal.less @@ -0,0 +1,56 @@ +.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; + } + + 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/app/scripts/view-models/modals/error-modal/error-403-view.html b/catalog-ui/app/scripts/view-models/modals/error-modal/error-403-view.html new file mode 100644 index 0000000000..185fcce461 --- /dev/null +++ b/catalog-ui/app/scripts/view-models/modals/error-modal/error-403-view.html @@ -0,0 +1,4 @@ +<div class="sdc-error-403-container" > + <div class="sdc-error-403-container-title" translate="GENERAL_ERROR_403_TITLE"></div> + <div class="w-sdc-error-403-text w-sdc-form" translate="GENERAL_ERROR_403_DESCRIPTION" translate-values="{{ mailtoJson }}"></div> +</div> diff --git a/catalog-ui/app/scripts/view-models/modals/error-modal/error-view-model.ts b/catalog-ui/app/scripts/view-models/modals/error-modal/error-view-model.ts new file mode 100644 index 0000000000..b8b2bfbbe7 --- /dev/null +++ b/catalog-ui/app/scripts/view-models/modals/error-modal/error-view-model.ts @@ -0,0 +1,43 @@ +/*- + * ============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========================================================= + */ +/// <reference path="../../../references"/> +module Sdc.ViewModels { + 'use strict'; + + interface IErrorViewModelScope{ + mailtoJson: any; + } + + export class ErrorViewModel { + + static '$inject' = ['$scope', 'Sdc.Services.CookieService', '$window', '$filter']; + + constructor($scope:IErrorViewModelScope, cookieService:Services.CookieService, $window, $filter:ng.IFilterService){ + let adminEmail:string = $filter('translate')('ADMIN_EMAIL'); + let subjectPrefix:string = $filter('translate')('EMAIL_SUBJECT_PREFIX'); + let userDetails = cookieService.getFirstName() + ' '+cookieService.getLastName() + ' ('+cookieService.getUserId() + ')'; + let line = adminEmail+'?subject='+$window.encodeURIComponent(subjectPrefix+' '+userDetails); + $scope.mailtoJson = { + "mailto": line + }; + } + + } +} diff --git a/catalog-ui/app/scripts/view-models/modals/error-modal/error.less b/catalog-ui/app/scripts/view-models/modals/error-modal/error.less new file mode 100644 index 0000000000..8297b5053d --- /dev/null +++ b/catalog-ui/app/scripts/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/app/scripts/view-models/modals/message-modal/message-base-modal-model.ts b/catalog-ui/app/scripts/view-models/modals/message-modal/message-base-modal-model.ts new file mode 100644 index 0000000000..26df780d25 --- /dev/null +++ b/catalog-ui/app/scripts/view-models/modals/message-modal/message-base-modal-model.ts @@ -0,0 +1,64 @@ +/*- + * ============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========================================================= + */ +/// <reference path="../../../references"/> +module Sdc.ViewModels { + 'use strict'; + + export interface IMessageModalModel { + title: string; + message: string; + severity: Utils.Constants.SEVERITY; + } + + export interface IMessageModalViewModelScope extends ng.IScope { + footerButtons: Array<any>; + 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/app/scripts/view-models/modals/message-modal/message-client-modal/client-message-modal-view-model.ts b/catalog-ui/app/scripts/view-models/modals/message-modal/message-client-modal/client-message-modal-view-model.ts new file mode 100644 index 0000000000..82afe11fe4 --- /dev/null +++ b/catalog-ui/app/scripts/view-models/modals/message-modal/message-client-modal/client-message-modal-view-model.ts @@ -0,0 +1,43 @@ +/*- + * ============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========================================================= + */ +/// <reference path="../../../../references"/> +module Sdc.ViewModels { + 'use strict'; + + export interface IClientMessageModalModel extends IMessageModalModel { + } + + export interface IClientMessageModalViewModelScope extends IMessageModalViewModelScope { + clientMessageModalModel: IClientMessageModalModel; + } + + export class ClientMessageModalViewModel extends MessageModalViewModel { + + static '$inject' = ['$scope', '$modalInstance', 'clientMessageModalModel']; + + constructor(private $scope:IClientMessageModalViewModelScope, + private $modalInstance:ng.ui.bootstrap.IModalServiceInstance, + private clientMessageModalModel:IClientMessageModalModel) { + + super($scope, $modalInstance, clientMessageModalModel); + } + + } +} diff --git a/catalog-ui/app/scripts/view-models/modals/message-modal/message-client-modal/client-message-modal-view.html b/catalog-ui/app/scripts/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/app/scripts/view-models/modals/message-modal/message-client-modal/client-message-modal-view.html @@ -0,0 +1,16 @@ +<sdc-modal modal="modalInstanceError" + type="classic" + class="w-sdc-modal modal-type-alert" + header="{{messageModalModel.title}}" + buttons="footerButtons" + show-close-button="true"> + + <perfect-scrollbar include-padding="true"> + <div class="w-sdc-modal-icon w-sdc-modal-icon-{{messageModalModel.severity}}"></div> + <div class="w-sdc-modal-caption"> + <div ng-bind-html="messageModalModel.message" data-tests-id="message"></div> + </div> + <!--<div class="w-sdc-modal-body-content" data-ng-bind-html="messageModalModel.message"></div>--> + </perfect-scrollbar> + +</sdc-modal> diff --git a/catalog-ui/app/scripts/view-models/modals/message-modal/message-client-modal/client-message-modal.less b/catalog-ui/app/scripts/view-models/modals/message-modal/message-client-modal/client-message-modal.less new file mode 100644 index 0000000000..e69de29bb2 --- /dev/null +++ b/catalog-ui/app/scripts/view-models/modals/message-modal/message-client-modal/client-message-modal.less diff --git a/catalog-ui/app/scripts/view-models/modals/message-modal/message-server-modal/server-message-modal-view-model.ts b/catalog-ui/app/scripts/view-models/modals/message-modal/message-server-modal/server-message-modal-view-model.ts new file mode 100644 index 0000000000..f7a0dcfabf --- /dev/null +++ b/catalog-ui/app/scripts/view-models/modals/message-modal/message-server-modal/server-message-modal-view-model.ts @@ -0,0 +1,45 @@ +/*- + * ============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========================================================= + */ +/// <reference path="../../../../references"/> +module Sdc.ViewModels { + 'use strict'; + + export interface IServerMessageModalModel extends IMessageModalModel { + status: string; + messageId: string; + } + + export interface IServerMessageModalViewModelScope extends IMessageModalViewModelScope { + serverMessageModalModel: IServerMessageModalModel; + } + + export class ServerMessageModalViewModel extends MessageModalViewModel { + + static '$inject' = ['$scope', '$modalInstance', 'serverMessageModalModel']; + + constructor(private $scope:IServerMessageModalViewModelScope, + private $modalInstance:ng.ui.bootstrap.IModalServiceInstance, + private serverMessageModalModel:IServerMessageModalModel) { + + super($scope, $modalInstance, serverMessageModalModel); + } + + } +} diff --git a/catalog-ui/app/scripts/view-models/modals/message-modal/message-server-modal/server-message-modal-view.html b/catalog-ui/app/scripts/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/app/scripts/view-models/modals/message-modal/message-server-modal/server-message-modal-view.html @@ -0,0 +1,17 @@ +<sdc-modal modal="modalInstanceError" + type="classic" + class="w-sdc-modal modal-type-error" + header="{{messageModalModel.title}}" + buttons="footerButtons" + show-close-button="true"> + + <perfect-scrollbar include-padding="true"> + <div class="w-sdc-modal-icon w-sdc-modal-icon-{{messageModalModel.severity}}"></div> + <div class="w-sdc-modal-caption"> + <div>Error code: {{messageModalModel.messageId}}</div> + <div>Status code: {{messageModalModel.status}}</div> + </div> + <div class="w-sdc-modal-body-content" data-ng-bind-html="messageModalModel.message" data-tests-id="message"></div> + </perfect-scrollbar> + +</sdc-modal> diff --git a/catalog-ui/app/scripts/view-models/modals/message-modal/message-server-modal/server-message-modal.less b/catalog-ui/app/scripts/view-models/modals/message-modal/message-server-modal/server-message-modal.less new file mode 100644 index 0000000000..e69de29bb2 --- /dev/null +++ b/catalog-ui/app/scripts/view-models/modals/message-modal/message-server-modal/server-message-modal.less diff --git a/catalog-ui/app/scripts/view-models/modals/onboarding-modal/onboarding-modal-view-model.ts b/catalog-ui/app/scripts/view-models/modals/onboarding-modal/onboarding-modal-view-model.ts new file mode 100644 index 0000000000..a6e85c4abc --- /dev/null +++ b/catalog-ui/app/scripts/view-models/modals/onboarding-modal/onboarding-modal-view-model.ts @@ -0,0 +1,249 @@ +/*- + * ============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========================================================= + */ +/// <reference path="../../../references"/> +module Sdc.ViewModels { + 'use strict'; + import Resource = Sdc.Models.Components.Resource; + import ComponentFactory = Sdc.Utils.ComponentFactory; + + interface IOnboardingModalViewModelScope { + modalOnboarding: ng.ui.bootstrap.IModalServiceInstance; + componentsList: Array<Models.Components.IComponent>; + tableHeadersList: Array<any>; + selectedComponent: Models.Components.Component; + componentFromServer: Models.Components.Component; + reverse: boolean; + sortBy: string; + searchBind: string; + okButtonText: string; + isCsarComponentExists: boolean; + user: Models.IUser; + isLoading: boolean; + + doSelectComponent(component: Models.Components.Component): void; + doUpdateCsar(): void; + doImportCsar(): void; + sort(sortBy: string): void; + downloadCsar(packageId: string): void; + } + + export class OnboardingModalViewModel { + + static '$inject' = [ + '$scope', + '$filter', + '$state', + 'sdcConfig', + '$modalInstance', + 'Sdc.Services.OnboardingService', + 'okButtonText', + 'currentCsarUUID', + 'Sdc.Services.CacheService', + 'FileUtils', + 'ComponentFactory', + 'ModalsHandler' + ]; + + constructor(private $scope: IOnboardingModalViewModelScope, + private $filter: ng.IFilterService, + private $state: any, + private sdcConfig: Models.IAppConfigurtaion, + private $modalInstance: ng.ui.bootstrap.IModalServiceInstance, + private onBoardingService: Sdc.Services.OnboardingService, + private okButtonText: string, + private currentCsarUUID: string, + private cacheService: Services.CacheService, + private fileUtils: Sdc.Utils.FileUtils, + private componentFactory: Utils.ComponentFactory, + private modalsHandler: Sdc.Utils.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; + + // Dismiss the modal and pass the "mini" component to workspace general page + this.$scope.doImportCsar = (): void => { + this.$modalInstance.dismiss(); + this.$state.go('workspace.general', { + type: Utils.Constants.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.$modalInstance.close(); + // Change the component version to the CSAR version we want to update. + /*(<Resource>this.$scope.componentFromServer).csarVersion = (<Resource>this.$scope.selectedComponent).csarVersion; + let component:Models.Components.Component = this.componentFactory.createComponent(this.$scope.componentFromServer); + this.$state.go('workspace.general', {vspComponent: component, disableButtons: true });*/ + this.cacheService.set(Utils.Constants.CHANGE_COMPONENT_CSAR_VERSION_FLAG, (<Resource>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.onBoardingService.downloadOnboardingCsar(packageId).then( + (file: any): void => { + if (file) { + this.fileUtils.downloadFile(file, packageId + '.zip'); + } + }, (): void => { + let data: Sdc.ViewModels.IServerMessageModalModel = { + title: 'Download error', + message: "Error downloading file", + severity: Utils.Constants.SEVERITY.ERROR, + messageId: "", + status: "" + }; + this.modalsHandler.openServerMessageModal(data); + } + ); + }; + + // When the user select a row, set the component as selectedComponent + this.$scope.doSelectComponent = (component: Models.Components.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: Models.Components.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((<Resource>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.$modalInstance; + }; + + private initOnboardingComponentsList = (): void => { + let onSuccess = (onboardingResponse: Array<Models.Components.IComponent>): 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<Models.Components.IComponent>): void => { + // Get only the latest version of each item + this.$scope.componentsList = []; + + // Get all unique items from the list + let uniqueItems = _.uniqBy(onboardingResponse, '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<Models.Components.IComponent> = _.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/app/scripts/view-models/modals/onboarding-modal/onboarding-modal-view.html b/catalog-ui/app/scripts/view-models/modals/onboarding-modal/onboarding-modal-view.html new file mode 100644 index 0000000000..246915212c --- /dev/null +++ b/catalog-ui/app/scripts/view-models/modals/onboarding-modal/onboarding-modal-view.html @@ -0,0 +1,142 @@ +<sdc-modal modal="modalOnboarding" class="w-sdc-modal-onboarding w-sdc-classic-top-line-modal" buttons="footerButtons" header="Import VF" show-close-button="true"> + <info-tooltip class="general-info-button" info-message-translate="ON_BOARDING_GENERAL_INFO "></info-tooltip> + <div class="title-wrapper"> + <div> + <p class="sub-title">Select one of the software product component below:</p> + </div> + + <div class="top-search"> + <input type="text" + class="search-text" + placeholder="Search" + data-ng-model="searchBind" + data-tests-id="onboarding-search" + ng-model-options="{ debounce: 500 }" /> + <span class="w-sdc-search-icon magnification"></span> + </div> + </div> + + <div class="table-container-flex"> + <div class="table" data-ng-class="{'view-mode': isViewMode()}"> + + <!-- Table headers --> + <div class="head flex-container"> + <div class="table-header head-row hand flex-item" ng-repeat="header in tableHeadersList track by $index" data-ng-click="sort(header.property)" data-tests-id="{{header.title}}">{{header.title}} + <span data-ng-show="sortBy === header.property" class="table-header-sort-arrow" data-ng-class="{'down': reverse, 'up':!reverse}"> </span> + </div> + </div> + + <!-- Table body --> + <div class="body"> + <perfect-scrollbar suppress-scroll-x="true" scroll-y-margin-offset="0" include-padding="true" class="scrollbar-container"> + + <!-- In case the component list is empty --> + <div data-ng-if="!componentsList || componentsList.length===0" class="no-row-text"> + There are no software product component to display + </div> + + <!-- Loop on components list --> + <div data-ng-repeat-start="component in componentsList | filter: searchBind | orderBy:sortBy:reverse track by $index" + class="flex-container data-row" + data-ng-class="{'selected': component === selectedComponent}" + data-ng-click="doSelectComponent(component);" + data-tests-id="csar-row" + > + + <!-- Name --> + <div class="table-col-general flex-item" sdc-smart-tooltip> + <span class="sprite table-arrow" data-ng-class="{'opened': component === selectedComponent}" data-tests-id="{{component.name}}"></span> + {{component.name}} + </div> + + <!-- Vendor --> + <div class="table-col-general flex-item" data-tests-id="{{component.vendorName}}" sdc-smart-tooltip> + {{component.vendorName}} + </div> + + <!-- Category --> + <div class="table-col-general flex-item" sdc-smart-tooltip> + {{component.categories[0].name}} {{component.categories[0].subcategories[0].name}} + </div> + + <!-- Version --> + <div class="table-col-general flex-item" sdc-smart-tooltip> + {{component.csarVersion}} + </div> + + <!-- Import And Update --> + <div class="table-col-general flex-item" sdc-smart-tooltip></div> + + </div> + + <div data-ng-repeat-end="" data-ng-if="component===selectedComponent" class="item-opened"> + + <div class="item-opened-description"> + <div class="item-opened-description-title">VSP Description:</div> + {{component.description}} + </div> + + <div class="item-opened-metadata1"> + <div data-ng-if="isCsarComponentExists===true"> + <div class="item-opened-metadata-title">VF'S Meta Data:</div> + <div><span class="th">Name:</span> {{componentFromServer.name}}</div> + <div><span class="th">Lifecycle:</span> {{componentFromServer.lifecycleState}}</div> + <div><span class="th">Creator:</span> {{componentFromServer.creatorFullName}}</div> + </div> + </div> + + <div class="item-opened-metadata2"> + <div data-ng-if="isCsarComponentExists===true"> + <div class="item-opened-metadata-title"> </div> + <div><span class="th">UUID:</span> {{componentFromServer.uuid}}</div> + <div><span class="th">Version:</span> {{componentFromServer.version}}</div> + <div><span class="th">Modifier:</span> {{componentFromServer.lastUpdaterFullName}}</div> + <div data-ng-if="componentFromServer.lifecycleState==='NOT_CERTIFIED_CHECKOUT' && componentFromServer.lastUpdaterUserId !== user.userId"> + <span class="note">Designers cannot update a VSP if the VF is checked out by another user.</span> + </div> + <div data-ng-if="componentFromServer.lifecycleState==='READY_FOR_CERTIFICATION'"> + <span class="note">Designers cannot update a VSP if the VF is in Ready for testing state.</span> + </div> + </div> + </div> + + <div class="item-opened-metadata3"> + <info-tooltip class="info-button" info-message-translate="{{isCsarComponentExists?'ON_BOARDING_UPDATE_INFO':'ON_BOARDING_IMPORT_INFO'}}" direction="left"></info-tooltip> + </div> + + <div class="item-opened-icon"> + <span data-ng-if="isCsarComponentExists!==true" + class="sprite-new import-file-btn" + data-ng-click="doImportCsar()" + uib-tooltip="Import VSP" + tooltip-class="uib-custom-tooltip" + tooltip-placement="bottom" + data-tests-id="import-csar"></span> + + <span data-ng-if="isCsarComponentExists===true" + class="sprite-new refresh-file-btn" + uib-tooltip="Update VSP" + tooltip-class="uib-custom-tooltip" + tooltip-placement="bottom" + data-ng-class="{'disabled': (componentFromServer.lifecycleState==='NOT_CERTIFIED_CHECKOUT' && componentFromServer.lastUpdaterUserId!==user.userId) || componentFromServer.lifecycleState==='READY_FOR_CERTIFICATION'}" + data-ng-click="doUpdateCsar()" + data-tests-id="update-csar"></span> + + <span data-ng-click="downloadCsar(component.packageId)" + class="sprite-new download-file-btn hand" + uib-tooltip="Download VSP" + tooltip-class="uib-custom-tooltip" + tooltip-placement="bottom" + data-tests-id="download-csar"></span> + </div> + <loader data-display="isLoading" relative="true" size="small"></loader> + + </div> + + </perfect-scrollbar> + </div><!-- End table body --> + </div><!-- End table --> + </div><!-- End table-container-flex --> + <div class="w-sdc-modal-footer classic"></div> + +</sdc-modal> diff --git a/catalog-ui/app/scripts/view-models/modals/onboarding-modal/onboarding-modal.less b/catalog-ui/app/scripts/view-models/modals/onboarding-modal/onboarding-modal.less new file mode 100644 index 0000000000..c745a86888 --- /dev/null +++ b/catalog-ui/app/scripts/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; + } + + } + +} |