summaryrefslogtreecommitdiffstats
path: root/catalog-ui/src/app/view-models/modals/confirmation-modal
diff options
context:
space:
mode:
Diffstat (limited to 'catalog-ui/src/app/view-models/modals/confirmation-modal')
-rw-r--r--catalog-ui/src/app/view-models/modals/confirmation-modal/confirmation-modal-view-model.ts73
-rw-r--r--catalog-ui/src/app/view-models/modals/confirmation-modal/confirmation-modal-view.html29
-rw-r--r--catalog-ui/src/app/view-models/modals/confirmation-modal/confirmation-modal.less30
3 files changed, 132 insertions, 0 deletions
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 @@
+<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/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;
+ }
+}